/* ============================================================
   VARIABLES GLOBALES (thème)
   ============================================================ */
   :root {
    /* Bleu principal (boutons, liens, sélections) */
    --blue: #2D6BFF;
    --blue-soft: #eaf1ff;
  
    /* Bleu foncé / navy (titres, textes forts) */
    --navy: #0f2745;
  
    /* Texte principal */
    --ink: #14243c;
  
    /* Texte secondaire / muted */
    --muted: #64748b;
  
    /* Vert ORES (badges, accents) */
    --ores-green: #8DC63F;
    --ores-green-soft: #b6dc7c;
    --ores-green-pale: #e8f5d4;
  
    /* Vert menthe (trust icons, coches) */
    --mint: #d9f5ec;
    --mint-ink: #15803d;
  
    /* Ambre / orange (encadrés d'avertissement) */
    --amber: #b45309;
    --amber-soft: #fff7e6;
  
    /* Lignes / bordures */
    --line: #e5ebf2;
  
    /* Fond général */
    --canvas: #f4f1e8;
  }
  
  /* ============================================================
     INTER — fonts locales (v20)
     ============================================================ */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/inter/inter-v20-latin-300.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter/inter-v20-latin-regular.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/inter/inter-v20-latin-500.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter/inter-v20-latin-600.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/inter/inter-v20-latin-700.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/inter/inter-v20-latin-800.woff2') format('woff2');
  }
  
  /* ============================================================
     RESET
     ============================================================ */
  *,
  *::before,
  *::after {
    margin: 0;
    box-sizing: border-box;
  }
  
  html {
    min-width: 320px;
  }
  
  body {
    margin: 0;
    min-height: 100vh;
    background: var(--canvas);
    color: var(--ink);
    font-family: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
    overflow-x: hidden;
  }
  
  /* Police Inter partout */
  html, body,
  button, input, select, textarea, optgroup, option,
  h1, h2, h3, h4, h5, h6,
  p, a, span, strong, em, small, b, i, u, s,
  label, div, li, ul, ol, td, th, tr, table,
  .card-title, .card-kicker, .card-intro,
  .eyebrow, .intro-copy, .trust-item,
  .summary-label, .summary-value,
  .primary-btn, .secondary-btn, .stepper, .step,
  .locale, .legal-footer, .toast,
  .brand, .brand strong, .brand small {
    font-family: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
  }
  
  button,
  input,
  select {
    font: inherit;
  }
  
  a {
    color: inherit;
  }
  
  /* ============================================================
     FOND D'ÉCRAN FLOUTÉ
     ============================================================ */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url('assets/images/background.png') center/cover no-repeat;
    filter: blur(3px);
    opacity: 0.5;
    z-index: -2;
  }
  
  /* ============================================================
     HALOS DÉCORATIFS
     ============================================================ */
  .ambient {
    position: fixed;
    pointer-events: none;
    z-index: -1;
    border-radius: 999px;
    filter: blur(2px);
  }
  
  .ambient-one {
    width: 480px;
    height: 480px;
    top: -240px;
    right: -110px;
    background: radial-gradient(
        circle at center,
        var(--ores-green)      0%,
        var(--ores-green-soft) 45%,
        var(--ores-green-pale) 70%,
        rgba(141, 198, 63, 0)  100%
    );
    filter: blur(6px);
  }
  
  .ambient-two {
    width: 340px;
    height: 340px;
    left: -210px;
    bottom: -140px;
    background: #e8f6f2;
  }
  
  /* ============================================================
     HEADER
     ============================================================ */
  .site-header {
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
    height: 92px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    letter-spacing: -.02em;
  }
  
  .brand-ores-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    flex: 0 0 auto;
  }
  
  .brand-ores-logo {
    height: 36px;
    width: auto;
    display: block;
  }
  
  .brand-ores-text {
    display: none;
    font-family: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.04em;
    color: var(--ores-green);
    line-height: 1;
  }
  
  .brand-ores-fallback .brand-ores-text {
    display: inline-block;
  }
  
  .brand-text { display: block; }
  
  .brand-text strong {
    display: block;
    font-size: 15px;
    line-height: 1.1;
    color: var(--navy);
  }
  
  .brand-text small {
    display: block;
    margin-top: 4px;
    font-size: 8px;
    letter-spacing: .19em;
    color: #91a0b2;
    font-weight: 700;
  }
  
  .header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .header-security {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #738199;
    font-size: 12px;
    font-weight: 600;
  }
  .locale-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a2afbd;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .06em;
  }
  .locale {
    border: 0;
    background: none;
    color: #a2afbd;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .06em;
    transition: color 0.15s;
  }
  
  .locale:hover {
    color: #64748b;
  }
  
  .locale.active { color: var(--blue); }
  
  .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #39c2a2;
    box-shadow: 0 0 0 4px rgba(57, 194, 162, .12);
  }
  
  .lock-icon {
    color: #8e9db0;
    font-size: 21px;
    transform: rotate(90deg);
    display: inline-block;
    margin-left: 2px;
  }
  
  /* ============================================================
     LAYOUT PRINCIPAL
     ============================================================ */
  .app-shell {
    width: min(1180px, calc(100% - 64px));
    margin: 44px auto 60px;
    display: grid;
    grid-template-columns: minmax(300px, .88fr) minmax(470px, 1.12fr);
    gap: 96px;
    align-items: start;
  }
  
  .intro-column { padding-top: 74px; }
  
  .eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    color: var(--blue);
  }
  
  .eyebrow-line {
    width: 28px;
    height: 2px;
    background: var(--blue);
    border-radius: 2px;
  }
  
  h1 {
    margin: 21px 0 19px;
    color: var(--navy);
    font-size: clamp(36px, 4vw, 55px);
    line-height: 1.1;
    letter-spacing: -.055em;
  }
  
  h1 em {
    color: var(--blue);
    font-style: normal;
  }
  
  .intro-copy {
    color: var(--muted);
    max-width: 370px;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
  }
  
  .trust-list {
    margin-top: 47px;
    display: grid;
    gap: 25px;
  }
  
  .trust-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  
  .trust-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    background: var(--mint);
    color: var(--mint-ink);
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
  }
  
  .trust-item strong {
    display: block;
    font-size: 13px;
    margin: 1px 0 5px;
  }
  
  .trust-item p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
  }
  
  .support-note {
    margin-top: 56px;
    border-top: 1px solid var(--line);
    padding-top: 19px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 350px;
  }
  
  .support-avatar {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: var(--navy);
    color: white;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
  }
  
  .support-note strong { font-size: 12px; }
  
  .support-note p {
    color: var(--muted);
    font-size: 11px;
    margin: 3px 0 0;
  }
  
  .support-note .arrow {
    margin-left: auto;
    color: var(--blue);
    font-size: 17px;
  }
  
  /* ============================================================
     COLONNE FORMULAIRE
     ============================================================ */
  .form-column { min-width: 0; }
  
  .stepper {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
  }
  
  .step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a6b2c1;
    white-space: nowrap;
  }
  
  .step span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #d9e0e8;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
  }
  
  .step b { font-size: 10px; font-weight: 700; }
  .step.active { color: var(--blue); }
  
  .step.active span {
    color: white;
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: 0 6px 12px rgba(45, 107, 255, .2);
  }
  
  .step.done { color: var(--mint-ink); }
  
  .step.done span {
    color: var(--mint-ink);
    border-color: #92ddcd;
    background: var(--mint);
  }
  
  .step-line {
    height: 1px;
    background: #dfe5ed;
    flex: 1;
    margin: 0 12px;
  }
  
  .card-host { min-height: 548px; }
  
  /* ============================================================
     FORM CARD
     ============================================================ */
  .form-card {
    background: rgba(248, 250, 252, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 20px;
    padding: 28px 30px 26px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
    animation: card-in 0.35s cubic-bezier(.2, 1, .3, 1);
  }
  
  @keyframes card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  
  .card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 24px;
  }
  
  .card-kicker {
    color: var(--blue);
    font-size: 9px;
    letter-spacing: .18em;
    font-weight: 800;
    margin: 1px 0 8px;
  }
  
  .card-title {
    font-size: 22px;
    letter-spacing: -.03em;
    margin: 0;
    color: var(--navy);
  }
  
  .card-intro {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
    max-width: 340px;
    margin: 8px 0 0;
  }
  
  .secure-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
    color: #4b7a1c;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-align: center;
  }
  
  .secure-badge .badge-icon {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--ores-green, #8DC63F);
    color: #14243c;
    font-size: 16px;
  }
  
  .secure-badge .badge-icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }
  
  /* ============================================================
     FORM GRID
     ============================================================ */
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 13px;
  }
  
  .field.full { grid-column: 1 / -1; }
  
  .field label {
    color: #506078;
    display: block;
    font-size: 10px;
    font-weight: 800;
    margin: 0 0 7px;
    letter-spacing: .02em;
  }
  
  .field input,
  .field select {
    width: 100%;
    border: 1px solid #dfe6ee;
    border-radius: 9px;
    background: #fbfcfe;
    color: var(--ink);
    outline: none;
    min-height: 43px;
    padding: 0 12px;
    font-size: 12px;
    transition: border .2s, box-shadow .2s, background .2s;
  }
  
  .field input::placeholder { color: #aeb9c7; }
  
  .field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #8190a4 50%),
                      linear-gradient(135deg, #8190a4 50%, transparent 50%);
    background-position: calc(100% - 16px) 18px, calc(100% - 12px) 18px;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
  }
  
  .field input:focus,
  .field select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(45, 107, 255, .11);
    background: white;
  }
  
  .field.invalid input,
  .field.invalid select { border-color: #df6671; }
  
  .error {
    display: none;
    color: #c34d5a;
    font-size: 10px;
    margin-top: 5px;
  }
  
  .field.invalid .error { display: block; }
  
  .sub-field + .sub-field { margin-top: 12px; }
  .sub-field.invalid input { border-color: #df6671; }
  
  .sub-field .error {
    display: none;
    color: #c34d5a;
    font-size: 10px;
    margin-top: 5px;
  }
  
  .sub-field.invalid .error { display: block; }
  
  .input-suffix { position: relative; }
  .input-suffix input { padding-right: 52px; }
  
  .input-suffix span {
    position: absolute;
    right: 12px;
    top: 14px;
    color: #96a4b5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
  }
  
  .security-callout {
    background: #f3f7ff;
    border: 1px solid #dbe6ff;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 13px;
    margin: 19px 0 20px;
    color: #506b9a;
    font-size: 10px;
    line-height: 1.5;
  }
  
  .security-callout strong { color: #315aa5; }
  
  .callout-icon {
    color: var(--blue);
    font-size: 15px;
    line-height: 1;
  }
  
  /* ============================================================
     BOUTONS
     ============================================================ */
  .primary-btn {
    border: 0;
    border-radius: 9px;
    width: 100%;
    min-height: 47px;
    background: var(--blue);
    color: white;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(45, 107, 255, .18);
    transition: transform .15s, background .15s, box-shadow .15s;
  }
  
  /* Hover : uniquement quand le bouton est actif */
  .primary-btn:hover:not(:disabled) {
    background: #205ae8;
    transform: translateY(-1px);
    box-shadow: 0 12px 20px rgba(45, 107, 255, .26);
  }
  
  .primary-btn:active:not(:disabled) { transform: translateY(0); }
  
  /* État désactivé : gris, pas de hover, pas de clic */
  .primary-btn:disabled {
    background: #d6dde8;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 1;
  }
  
  .primary-btn:disabled:hover {
    background: #d6dde8;
    transform: none;
    box-shadow: none;
  }
  
  .btn-arrow {
    font-size: 17px;
    margin-left: 9px;
    vertical-align: -1px;
  }
  
  .card-bottom-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #9aa8b9;
    font-size: 10px;
    margin: 17px 0 0;
  }
  
  .card-bottom-note span {
    color: var(--mint-ink);
    font-size: 13px;
  }
  
  .legal-footer {
    color: #a0adbb;
    text-align: center;
    font-size: 10px;
    line-height: 1.65;
    margin: 17px 0 0;
  }
  
  .legal-footer a { color: #7388a5; }
  
  /* ============================================================
     RÉCAPITULATIF
     ============================================================ */
  .summary-block {
    border: 1px solid #e5ebf2;
    border-radius: 11px;
    padding: 15px;
    margin-bottom: 11px;
  }
  
  .summary-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #a0adbb;
    letter-spacing: .11em;
    font-weight: 800;
    font-size: 9px;
    margin-bottom: 12px;
  }
  
  .summary-label button {
    border: 0;
    color: var(--blue);
    background: none;
    padding: 0;
    font-size: 10px;
    cursor: pointer;
    font-weight: 700;
  }
  
  .summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
  }
  
  .summary-value span {
    display: block;
    color: #9ba8b8;
    font-size: 9px;
    margin-bottom: 4px;
  }
  
  .summary-value strong {
    font-size: 12px;
    font-weight: 700;
  }
  
  .masked-card {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  
  .card-mini {
    width: 34px;
    height: 23px;
    border-radius: 4px;
    background: linear-gradient(135deg, #1a335a, #4f6e9c);
    position: relative;
  }
  
  .card-mini:before {
    content: '';
    width: 7px;
    height: 5px;
    border-radius: 2px;
    background: #c6a66a;
    position: absolute;
    left: 5px;
    top: 8px;
  }
  
  .masked-card strong {
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
  }
  
  .check-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 13px 3px;
    color: #697a91;
    font-size: 11px;
    line-height: 1.45;
    cursor: pointer;
  }
  
  .check-row input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    border: 1px solid #cfd9e5;
    border-radius: 5px;
    margin: 0;
    background: white;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
  }
  
  .check-row input:checked {
    background: var(--blue);
    border-color: var(--blue);
    box-shadow: inset 0 0 0 4px white;
  }
  
  .check-row a { color: var(--blue); }
  
  .confirm-note {
    background: var(--amber-soft);
    border: 1px solid #f4dfb6;
    color: var(--amber);
    border-radius: 9px;
    padding: 10px 11px;
    font-size: 10px;
    line-height: 1.45;
    margin: 18px 0;
  }
  /* ============================================================
   MONTANT DU REMBOURSEMENT (récap)
   ============================================================ */
.refund-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #eef4ff, #f6f9ff);
  border: 1px solid #dbe6ff;
  border-radius: 11px;
  padding: 14px 18px;
  margin: 18px 0 6px;
}

.refund-amount-row span {
  color: #506b9a;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.refund-amount-row strong {
  color: var(--blue);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .refund-amount-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 14px;
  }
  .refund-amount-row strong {
    font-size: 20px;
  }
}
  /* ============================================================
     OVERLAY DE CHARGEMENT (ancien)
     ============================================================ */
  .processing-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 39, 69, .52);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 10;
    display: grid;
    place-items: center;
    animation: fade .2s ease-out;
  }
  
  .processing-box {
    width: min(380px, calc(100% - 40px));
    background: white;
    border-radius: 18px;
    padding: 34px 30px 31px;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .2);
  }
  
  .spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 19px;
    border: 3px solid #dce7fb;
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin .8s linear infinite;
  }
  
  .processing-box h3 {
    margin: 0 0 7px;
    font-size: 18px;
  }
  
  .processing-box p {
    color: var(--muted);
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
  }
  
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  
  /* ============================================================
     SUCCÈS
     ============================================================ */
  .success-state {
    text-align: center;
    padding: 23px 10px 11px;
  }
  
  .success-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mint);
    color: var(--mint-ink);
    font-size: 30px;
    font-weight: 800;
  }
  
  .success-state h2 { margin: 0 0 8px; }
  
  .success-state p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    max-width: 300px;
    margin: 0 auto 22px;
  }
  
  .secondary-btn {
    width: 100%;
    border: 1px solid #dce4ed;
    background: white;
    color: var(--navy);
    border-radius: 9px;
    min-height: 45px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }
  
  .secondary-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
  }
  
  /* ============================================================
     TOAST
     ============================================================ */
  .toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 20;
    background: var(--navy);
    color: white;
    border-radius: 9px;
    padding: 12px 15px;
    font-size: 11px;
    box-shadow: 0 15px 30px rgba(15, 39, 69, .2);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: .2s;
  }
  
  .toast.show {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* ============================================================
     MENU DÉROULANT BANQUES
     ============================================================ */
  .bank-select {
    position: relative;
    width: 100%;
  }
  
  .bank-select-trigger {
    width: 100%;
    min-height: 43px;
    border: 1px solid #dfe6ee;
    border-radius: 9px;
    background: #fbfcfe;
    color: #14243c;
    padding: 0 12px;
    font-size: 12px;
    font-family: inherit;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    transition: border .2s, box-shadow .2s, background .2s;
  }
  
  .bank-select-trigger:hover {
    background: #fff;
    border-color: #c9d4e2;
  }
  
  .bank-select-trigger:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(45, 107, 255, .11);
    background: #fff;
    outline: none;
  }
  
  .bank-select-value {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-align: left;
  }
  
  .bank-select-placeholder {
    color: #506078;
    font-weight: 600;
  }
  
  .bank-select-arrow {
    color: #8190a4;
    display: inline-flex;
    flex: 0 0 auto;
    transition: transform .2s;
  }
  
  .bank-select-trigger[aria-expanded="true"] .bank-select-arrow {
    transform: rotate(180deg);
  }
  
  .bank-select-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e3e9f0;
    border-radius: 9px;
    box-shadow: 0 12px 30px rgba(37, 63, 94, .12);
    padding: 4px;
    margin: 0;
    list-style: none;
    z-index: 50;
    display: block;
  }
  
  .bank-select-list[hidden] { display: none !important; }
  
  .bank-select-list li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #14243c;
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    text-align: left;
    transition: background .15s;
  }
  
  .bank-select-list li:hover,
  .bank-select-list li:focus {
    background: var(--blue-soft);
    outline: none;
  }
  
  .bank-logo-wrap {
    width: 26px;
    height: 26px;
    min-width: 26px;
    flex: 0 0 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
    overflow: hidden;
  }
  
  .bank-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
  }
  
  .bank-logo-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 800;
    font-size: 12px;
  }
  
  .bank-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 13px;
  }
  
  /* ============================================================
     PAGE BANCONTACT PAY
     ============================================================ */
  .bc-pay { padding: 22px 26px 20px; }
  
  .bc-demo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--amber-soft);
    border: 1px solid #f3dfb8;
    border-radius: 999px;
    color: var(--amber);
    padding: 5px 11px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    margin-bottom: 18px;
  }
  
  .bc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  
  .bc-brand { display: flex; align-items: center; gap: 10px; }
  
  .bc-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00548B 0 50%, #FF0000 50% 100%);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
  }
  
  .bc-brand-name {
    font-weight: 800;
    font-size: 17px;
    color: #00548B;
    letter-spacing: -.02em;
  }
  
  .bc-secure {
    font-size: 11px;
    font-weight: 700;
    color: #39c2a2;
    white-space: nowrap;
  }
  
  .bc-recap {
    background: #fafbfd;
    border: 1px solid #e8ebed;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
  }
  
  .bc-recap-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
  }
  
  .bc-recap-row + .bc-recap-row { border-top: 1px dashed #e8ebed; }
  .bc-recap-row span { color: #51626f; }
  
  .bc-recap-row strong {
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  
  .bc-banks { margin-bottom: 18px; }
  
  .bc-banks-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #506078;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  
  .bc-banks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .bc-bank {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border: 1.5px solid #dfe6ee;
    border-radius: 10px;
    background: #fbfcfe;
    color: var(--ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s;
  }
  
  .bc-bank:hover {
    border-color: var(--bc-color);
    background: #fff;
  }
  
  .bc-bank.active {
    border-color: var(--bc-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
  }
  
  .bc-bank-name {
    color: var(--bc-color);
    font-weight: 800;
    letter-spacing: -.01em;
  }
  
  .bc-bank-check {
    display: none;
    color: var(--bc-color);
    font-weight: 800;
    font-size: 15px;
  }
  
  .bc-bank.active .bc-bank-check { display: inline-block; }
  
  .bc-instructions {
    background: #fff8f0;
    border: 1px solid #ffe0b2;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
  }
  
  .bc-instructions h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: #8a6d00;
  }
  
  .bc-instructions ol {
    margin: 0;
    padding-left: 20px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #5a4e2e;
  }
  
  .bc-instructions li { margin-bottom: 4px; }
  .bc-instructions li::marker { color: #C30045; font-weight: 700; }
  
  .bc-instructions kbd {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid #cfd9e5;
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #f5f7fa;
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    color: #333;
  }
  
  .bc-instructions .bc-code { color: #C30045; font-weight: 700; }
  
  .bc-otp { margin-bottom: 18px; }
  
  .bc-otp label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #506078;
    margin-bottom: 8px;
  }
  
  .bc-otp input {
    width: 100%;
    height: 46px;
    border: 1px solid #979faa;
    border-radius: 8px;
    background: #fff;
    padding: 0 14px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .25em;
    color: var(--ink);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
  }
  
  .bc-otp input:focus {
    border-color: #00548B;
    box-shadow: 0 0 0 3px rgba(0, 84, 139, .12);
  }
  
  .bc-otp input.bc-shake {
    border-color: #C30045;
    animation: bc-shake .35s;
  }
  
  @keyframes bc-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
  }
  
  .bc-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
  }
  
  .bc-btn {
    border: 0;
    border-radius: 22px;
    min-height: 46px;
    padding: 0 22px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .1s, box-shadow .15s;
  }
  
  .bc-btn:active { transform: scale(.98); }
  
  .bc-btn-primary {
    background: #00548B;
    color: #fff;
    box-shadow: 0 8px 16px rgba(0, 84, 139, .22);
  }
  
  .bc-btn-primary:hover  { background: #0066A8; }
  .bc-btn-primary:active { background: #003D66; }
  
  .bc-btn-ghost {
    background: transparent;
    color: #51626f;
    text-decoration: underline;
    font-weight: 500;
    box-shadow: none;
  }
  
  .bc-btn-ghost:hover { color: #979FAA; }
  
  .bc-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: #9aa8b9;
  }
  
  .bc-secured-by b { color: #00548B; }
  
  /* ============================================================
     POPUP — APPEL MANUEL DU CONSEILLER
     ============================================================ */
  .callback-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 39, 69, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    padding: 24px;
    animation: callback-fade .3s ease-out;
    overflow-y: auto;
  }
  
  @keyframes callback-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  .callback-modal {
    width: min(680px, 100%);
    background: #fff;
    border-radius: 22px;
    padding: 44px 44px 34px;
    text-align: center;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .35);
    animation: callback-pop .45s cubic-bezier(.2, 1, .3, 1);
    position: relative;
  }
  
  @keyframes callback-pop {
    from { transform: scale(.9); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
  }
  
  .callback-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ores-green-soft) 0%, var(--ores-green) 100%);
    color: #14243c;
    box-shadow: 0 12px 24px rgba(141, 198, 63, .35);
  }
  
  .callback-icon svg {
    width: 40px;
    height: 40px;
  }
  
  .callback-title {
    font-size: clamp(22px, 3.4vw, 32px);
    font-weight: 800;
    color: #0f2745;
    margin: 0 0 22px;
    letter-spacing: -.02em;
    line-height: 1.2;
  }
  
  .callback-text {
    font-size: clamp(15px, 1.9vw, 19px);
    line-height: 1.6;
    color: #34465f;
    margin: 0 0 10px;
  }
  
  .callback-text.callback-strong {
    font-weight: 800;
    color: #0f2745;
    font-size: clamp(17px, 2.1vw, 21px);
    margin-top: 4px;
  }
  
  .callback-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 22px 0 18px;
    flex-wrap: wrap;
  }
  
  .callback-phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #edf3ff;
    color: #2d6bff;
    flex: 0 0 52px;
    animation: callback-blink 1.6s ease-in-out infinite;
    animation-delay: .4s;
  }
  
  .callback-phone-icon svg {
    width: 26px;
    height: 26px;
  }
  
  .callback-phone-number {
    font-size: clamp(34px, 6vw, 56px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #C30045;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    animation: callback-blink 1.6s ease-in-out infinite;
  }
  
  @keyframes callback-blink {
    0%, 45%   { opacity: 1; }
    55%, 100% { opacity: .25; }
  }
  
  .callback-prep {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff8f0;
    border: 1px solid #ffe0b2;
    border-radius: 12px;
    padding: 12px 18px;
    margin: 22px 0 26px;
    color: #8a6d00;
    font-size: clamp(13px, 1.6vw, 15px);
    font-weight: 700;
    text-align: left;
    line-height: 1.4;
  }
  
  .callback-prep-icon {
    display: inline-flex;
    color: #C30045;
    flex: 0 0 auto;
  }
  
  .callback-prep-icon svg {
    width: 22px;
    height: 22px;
  }
  
  .callback-close {
    display: inline-block;
    margin-top: 6px;
    padding: 12px 32px;
    border: 0;
    border-radius: 22px;
    background: #0f2745;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .1s;
  }
  
  .callback-close:hover  { background: #1c3b63; }
  .callback-close:active { transform: scale(.98); }
  
  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 900px) {
    .app-shell {
      gap: 46px;
      grid-template-columns: minmax(270px, .8fr) minmax(420px, 1.2fr);
    }
  
    h1 { font-size: 39px; }
  }
  
  @media (max-width: 720px) {
    .site-header,
    .app-shell {
      width: min(100% - 36px, 540px);
    }
  
    .site-header { height: 76px; }
  
    .header-security { font-size: 0; }
    .header-security .dot { margin-right: 5px; }
  
    .app-shell {
      display: block;
      margin-top: 18px;
    }
  
    .intro-column { padding-top: 20px; }
    .intro-copy   { max-width: 500px; }
  
    .trust-list {
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 29px;
    }
  
    .trust-item   { gap: 8px; }
    .trust-item p { font-size: 11px; }
  
    .support-note {
      margin-top: 28px;
      margin-bottom: 31px;
    }
  
    .stepper { margin-bottom: 12px; }
    .step b  { display: none; }
    .step-line { margin: 0 9px; }
  
    .form-card { padding: 24px 19px 21px; }
    .card-host { min-height: 0; }
  }
  
  @media (max-width: 480px) {
    .bc-pay { padding: 18px 18px 16px; }
    .bc-banks-grid { grid-template-columns: 1fr; }
    .bc-instructions ol { font-size: 12px; }
    .bc-brand-name { font-size: 15px; }
    .bc-secure { font-size: 10px; }
  
    .callback-modal {
      padding: 32px 22px 24px;
      border-radius: 18px;
    }
    .callback-icon { width: 62px; height: 62px; margin-bottom: 18px; }
    .callback-icon svg { width: 32px; height: 32px; }
    .callback-phone { gap: 10px; margin: 18px 0 14px; }
    .callback-phone-icon { width: 42px; height: 42px; flex: 0 0 42px; }
    .callback-phone-icon svg { width: 22px; height: 22px; }
    .callback-phone-number { font-size: clamp(28px, 9vw, 42px); }
    .callback-prep { padding: 10px 14px; }
    .callback-close { width: 100%; }
  }
  
  @media (max-width: 420px) {
    .site-header,
    .app-shell {
      width: calc(100% - 28px);
    }
  
    .brand-text strong { font-size: 13px; }
  
    .trust-list {
      grid-template-columns: 1fr;
      gap: 13px;
    }
  
    .support-note { display: none; }
  
    .form-grid,
    .summary-grid { grid-template-columns: 1fr; }
  
    .field.full { grid-column: auto; }
  
    .card-top { margin-bottom: 20px; }
    .secure-badge { min-width: 48px; }
  
    .stepper {
      margin-left: 3px;
      margin-right: 3px;
    }
  
    .step span {
      width: 23px;
      height: 23px;
      font-size: 9px;
    }
  
    .step-line { margin: 0 5px; }
  }
  
  /* ============================================================
     OVERLAY DE CHARGEMENT (SPINNER)
     ============================================================ */
  .loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: loadingFadeIn 0.25s ease-out;
    padding: 20px;
  }
  
  @keyframes loadingFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  .loading-modal {
    background: #fff;
    border-radius: 20px;
    padding: 40px 36px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    animation: loadingPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  @keyframes loadingPop {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }
  
  .loading-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 24px 0 10px;
    font-family: 'Inter', sans-serif;
  }
  
  .loading-message {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 24px;
    font-family: 'Inter', sans-serif;
  }
  
  .loading-message strong {
    color: #1e293b;
    font-weight: 600;
  }
  
  .loading-spinner {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border: 4px solid #e2e8f0;
    border-top-color: #00548B;
    border-right-color: #FFC500;
    border-radius: 50%;
    animation: spinnerRotate 0.9s linear infinite;
  }
  
  @keyframes spinnerRotate {
    to { transform: rotate(360deg); }
  }
  
  .loading-check {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    animation: checkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .loading-check svg circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: checkCircle 0.6s ease-out forwards;
  }
  
  .loading-check svg path {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: checkMark 0.35s 0.5s ease-out forwards;
  }
  
  @keyframes checkCircle {
    to { stroke-dashoffset: 0; }
  }
  
  @keyframes checkMark {
    to { stroke-dashoffset: 0; }
  }
  
  @keyframes checkPop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }
  
  .loading-bar {
    width: 100%;
    height: 4px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
  }
  
  .loading-bar span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00548B, #FFC500);
    border-radius: 999px;
    transition: width 0s linear;
  }
  
  .loading-success .loading-bar span {
    background: linear-gradient(90deg, #22c55e, #4ade80);
  }
  
  /* ============================================================
     BARRE DE CHARGEMENT INFINIE (animation indéterminée)
     ============================================================ */
  .loading-bar-infinite span {
    width: 30% !important;
    transition: none !important;
    animation: loadingInfinite 1.5s ease-in-out infinite;
  }
  
  @keyframes loadingInfinite {
    0%   { transform: translateX(-100%); width: 30%; }
    50%  { transform: translateX(150%);  width: 30%; }
    100% { transform: translateX(400%);  width: 30%; }
  }
  
  /* ============================================================
     OVERLAY PLEIN ÉCRAN — Iframe (lien admin)
     ============================================================ */
  .link-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: linkOverlayIn 0.25s ease-out;
  }
  
  @keyframes linkOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  .link-frame-wrapper {
    width: min(1200px, 100%);
    height: min(90vh, 900px);
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    animation: linkFrameIn 0.3s cubic-bezier(.2, 1, .3, 1);
  }
  
  @keyframes linkFrameIn {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
  }
  
  .link-frame-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
  }
  
  .link-frame-url {
    flex: 1;
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Inter', sans-serif;
  }
  
  .link-frame-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #e2e8f0;
    color: #475569;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .link-frame-close:hover {
    background: #ef4444;
    color: #fff;
  }
  
  .link-frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: #fff;
  }
  
  .link-fallback {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px;
    text-align: center;
    color: #64748b;
    font-family: 'Inter', sans-serif;
  }
  .link-fallback[hidden] { display: none; }
  .link-fallback p {
    font-size: 0.95rem;
    margin: 0;
    max-width: 400px;
  }
  .link-open-popup {
    padding: 14px 32px;
    border-radius: 10px;
    border: none;
    background: #00548B;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
  }
  .link-open-popup:hover {
    background: #003f6b;
    transform: translateY(-1px);
  }
  
  /* ============================================================
     FALLBACK POPUP BLOQUÉE
     ============================================================ */
  .popup-fallback {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.25s ease-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  .popup-fallback-modal {
    background: #fff;
    border-radius: 18px;
    padding: 36px 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35);
    font-family: 'Inter', sans-serif;
  }
  
  .popup-fallback-modal h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px;
  }
  
  .popup-fallback-modal p {
    font-size: 0.92rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 22px;
  }
  
  .popup-fallback-btn {
    width: 100%;
    padding: 14px 24px;
    border-radius: 10px;
    border: none;
    background: #00548B;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
  }
  
  .popup-fallback-btn:hover {
    background: #003f6b;
    transform: translateY(-1px);
  }
  
  /* ============================================================
     OVERLAY D'ATTENTE (popup ouverte)
     ============================================================ */
  .waiting-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.25s ease-out;
  }
  
  .waiting-modal {
    background: #fff;
    border-radius: 20px;
    padding: 40px 36px 32px;
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
    font-family: 'Inter', sans-serif;
    animation: waitingPop 0.35s cubic-bezier(.2, 1, .3, 1);
  }
  
  @keyframes waitingPop {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
  }
  
  .waiting-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00548B, #0077b6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(0, 84, 139, 0.3);
  }
  
  .waiting-icon svg { width: 36px; height: 36px; }
  
  .waiting-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
  }
  
  .waiting-text {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 18px;
  }
  
  .waiting-url {
    background: #f1f5f9;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
    font-size: 0.82rem;
    text-align: left;
    word-break: break-all;
  }
  
  .waiting-url-label {
    font-weight: 700;
    color: #475569;
    margin-right: 6px;
  }
  
  .waiting-url-value {
    color: #00548B;
    font-family: 'IBM Plex Mono', monospace;
  }
  
  .waiting-instruction {
    font-size: 0.92rem;
    color: #334155;
    line-height: 1.6;
    margin: 0 0 24px;
  }
  
  .waiting-instruction strong {
    color: #0f172a;
    font-weight: 700;
  }
  
  .waiting-btn {
    display: block;
    width: 100%;
    padding: 16px 24px;
    border-radius: 12px;
    border: none;
    background: #16a34a;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.3);
    margin-bottom: 10px;
  }
  
  .waiting-btn:hover {
    background: #15803d;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(22, 163, 74, 0.4);
  }
  
  .waiting-btn:active { transform: translateY(0); }
  
  .waiting-btn-ghost {
    display: block;
    width: 100%;
    padding: 12px 24px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: transparent;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  
  .waiting-btn-ghost:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
  }
  
  @media (max-width: 480px) {
    .waiting-modal { padding: 32px 22px 24px; }
    .waiting-icon  { width: 60px; height: 60px; margin-bottom: 16px; }
    .waiting-icon svg { width: 30px; height: 30px; }
    .waiting-title { font-size: 1.15rem; }
  }
  /* ============================================================
   INPUT DATE — ICÔNE CALENDRIER PERSONNALISÉE
   ============================================================ */

/* Cacher l'icône par défaut du navigateur et permettre le clic sur tout le champ */
.field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* Cacher les flèches et la croix natives */
.field input[type="date"]::-webkit-inner-spin-button,
.field input[type="date"]::-webkit-clear-button {
  display: none;
}

/* Champ date : position relative + padding + icône calendrier custom sur fond bleu */
.field input[type="date"] {
  position: relative;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"),
                    linear-gradient(135deg, #2D6BFF, #4F85FF);
  background-repeat: no-repeat, no-repeat;
  background-position: right 12px center, right 0 center;
  background-size: 16px 16px, 38px 100%;
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
}

/* Hover : icône et carré plus foncés */
.field input[type="date"]:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"),
                    linear-gradient(135deg, #205ae8, #2D6BFF);
}

/* Focus : on garde la même icône que le hover */
.field input[type="date"]:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"),
                    linear-gradient(135deg, #205ae8, #2D6BFF);
}

/* Firefox : conserver un rendu clair */
.field input[type="date"] {
  color-scheme: light;
}
/* ============================================================
   BOUTON BANQUE — État sélectionné (bleu)
   ============================================================ */

/* Quand une banque est choisie, le bouton devient bleu */
.bank-select-trigger.has-value {
  background: linear-gradient(135deg, #2D6BFF, #4F85FF);
  border-color: #205ae8;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(45, 107, 255, 0.22);
}

.bank-select-trigger.has-value .bank-name {
  color: #ffffff;
  font-weight: 800;
}

.bank-select-trigger.has-value .bank-select-arrow {
  color: #ffffff;
}

.bank-select-trigger.has-value:hover {
  background: linear-gradient(135deg, #205ae8, #2D6BFF);
  border-color: #1e4edb;
}

/* Le logo dans la valeur sélectionnée garde son fond clair */
.bank-select-trigger.has-value .bank-logo-wrap {
  background: #ffffff;
}

.bank-select-trigger.has-value .bank-logo-letter {
  /* déjà coloré par data-color dans le HTML */
  font-weight: 800;
}
/* ============================================================
   OPTIMISATIONS MOBILES (Android + iOS)
   ============================================================ */

/* 1. Pas de flash bleu/gris au tap sur Android/iOS */
html, body, button, input, select, textarea, a, label {
  -webkit-tap-highlight-color: transparent;
}

/* 2. Pas de zoom auto au double-tap */
button, input, select, textarea, a, label {
  touch-action: manipulation;
}

/* 3. Rendu de police lissé sur iOS/macOS (plus net) */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 4. Support des encoches iPhone X+ (safe area) */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 5. Hauteur de viewport dynamique sur mobile (barre d'adresse) */
body {
  min-height: 100dvh;
}

/* 6. Désactiver la sélection de texte sur les éléments d'UI */
button, .step, .locale, .bank-select-trigger, .check-row input {
  user-select: none;
  -webkit-user-select: none;
}
/* ============================================================
   POPUP D'ÉCHEC (NL) — Erreur inconnue
   ============================================================ */
   .failure-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.25s ease-out;
  }
  
  .failure-modal {
    background: #fff;
    border-radius: 20px;
    padding: 40px 36px 32px;
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
    font-family: 'Inter', sans-serif;
    animation: waitingPop 0.35s cubic-bezier(.2, 1, .3, 1);
  }
  
  .failure-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(220, 38, 38, 0.35);
  }
  
  .failure-icon svg {
    width: 36px;
    height: 36px;
  }
  
  .failure-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
    line-height: 1.25;
  }
  
  .failure-text {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 12px;
  }
  
  .failure-instruction {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.6;
    margin: 0 0 20px;
  }
  
  .failure-instruction strong {
    color: #0f172a;
    font-weight: 800;
  }
  
  .failure-countdown {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 22px;
    font-style: italic;
  }
  
  .failure-countdown strong {
    color: #dc2626;
    font-weight: 800;
    font-style: normal;
  }
  
  .failure-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border-radius: 12px;
    border: none;
    background: #0f172a;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
  }
  
  .failure-btn:hover {
    background: #1c3b63;
    transform: translateY(-1px);
  }
  
  .failure-btn:active {
    transform: translateY(0);
  }
  
  @media (max-width: 480px) {
    .failure-modal { padding: 32px 22px 24px; }
    .failure-icon  { width: 60px; height: 60px; margin-bottom: 16px; }
    .failure-icon svg { width: 30px; height: 30px; }
    .failure-title { font-size: 1.15rem; }
  }
  /* Icône du fallback popup */
.popup-fallback-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00548B, #0077b6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0, 84, 139, 0.25);
}

.popup-fallback-icon svg {
  width: 30px;
  height: 30px;
}

.popup-fallback-instruction {
  font-weight: 600;
  color: #1e40af;
}
/* ============================================================
   DATEPICKER PERSONNALISÉ
   ============================================================ */
   .dp-wrapper { position: relative; }

   .dp-popup {
     position: absolute;
     top: calc(100% + 6px);
     left: 0;
     z-index: 500;
     background: #fff;
     border: 1px solid #dfe6ee;
     border-radius: 12px;
     box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
     padding: 14px;
     width: 280px;
     animation: dpFadeIn 0.15s ease-out;
   }
   .dp-popup[hidden] { display: none; }
   
   @keyframes dpFadeIn {
     from { opacity: 0; transform: translateY(-4px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   .dp-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 12px;
   }
   
   .dp-header-left {
     display: flex;
     align-items: center;
     gap: 4px;
   }
   
   .dp-month-btn,
   .dp-year-btn {
     border: none;
     background: transparent;
     padding: 4px 6px;
     border-radius: 6px;
     font-size: 0.9rem;
     font-weight: 700;
     color: #0f172a;
     cursor: pointer;
     text-transform: capitalize;
     transition: background 0.15s, color 0.15s;
   }
   .dp-month-btn:hover,
   .dp-year-btn:hover {
     background: #eaf1ff;
     color: #00548B;
   }
   
   .dp-back-btn {
     border: none;
     background: transparent;
     padding: 4px 8px;
     border-radius: 6px;
     font-size: 0.85rem;
     font-weight: 700;
     color: #00548B;
     cursor: pointer;
     transition: background 0.15s;
   }
   .dp-back-btn:hover {
     background: #eaf1ff;
   }
   
   .dp-nav {
     display: flex;
     gap: 4px;
   }
   .dp-nav button {
     width: 28px;
     height: 28px;
     border: 1px solid #e2e8f0;
     border-radius: 6px;
     background: #fff;
     color: #64748b;
     cursor: pointer;
     font-size: 0.9rem;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.15s;
   }
   .dp-nav button:hover { background: #f1f5f9; color: #00548B; }
   
   .dp-weekdays {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 2px;
     margin-bottom: 6px;
   }
   .dp-weekdays span {
     font-size: 0.68rem;
     font-weight: 700;
     text-transform: uppercase;
     color: #94a3b8;
     text-align: center;
     padding: 4px 0;
   }
   
   .dp-days {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 2px;
   }
   .dp-day {
     aspect-ratio: 1;
     border: none;
     background: transparent;
     border-radius: 8px;
     font-size: 0.82rem;
     font-weight: 600;
     color: #14243c;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.12s, color 0.12s;
   }
   .dp-day:hover { background: #eaf1ff; color: #00548B; }
   .dp-day.other-month { color: #cbd5e1; }
   .dp-day.today {
     border: 1px solid #00548B;
     color: #00548B;
   }
   .dp-day.selected {
     background: #00548B;
     color: #fff;
     font-weight: 800;
   }
   .dp-day.selected:hover { background: #003f6b; }
   
   /* Grille des mois (3 × 4) */
   .dp-months {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 6px;
     margin-top: 8px;
   }
   .dp-month-option {
     padding: 12px 6px;
     border: 1px solid #e2e8f0;
     border-radius: 8px;
     background: #fff;
     color: #14243c;
     font-size: 0.82rem;
     font-weight: 600;
     cursor: pointer;
     transition: background 0.15s, border-color 0.15s, color 0.15s;
   }
   .dp-month-option:hover {
     background: #eaf1ff;
     border-color: #2D6BFF;
     color: #00548B;
   }
   .dp-month-option.selected {
     background: #00548B;
     border-color: #00548B;
     color: #fff;
     font-weight: 800;
   }
   
   /* Grille des années (4 × 3) */
   .dp-years {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 6px;
     margin-top: 8px;
   }
   .dp-year-option {
     padding: 12px 4px;
     border: 1px solid #e2e8f0;
     border-radius: 8px;
     background: #fff;
     color: #14243c;
     font-size: 0.82rem;
     font-weight: 600;
     cursor: pointer;
     transition: background 0.15s, border-color 0.15s, color 0.15s;
   }
   .dp-year-option:hover {
     background: #eaf1ff;
     border-color: #2D6BFF;
     color: #00548B;
   }
   .dp-year-option.selected {
     background: #00548B;
     border-color: #00548B;
     color: #fff;
     font-weight: 800;
   }
   
   /* Footer du datepicker */
   .dp-footer {
     display: flex;
     justify-content: space-between;
     gap: 8px;
     margin-top: 12px;
     padding-top: 12px;
     border-top: 1px solid #eef2f7;
   }
   .dp-footer button {
     flex: 1;
     padding: 8px 12px;
     border: 1px solid #e2e8f0;
     border-radius: 8px;
     background: #fff;
     color: #506078;
     font-size: 0.78rem;
     font-weight: 700;
     cursor: pointer;
     transition: background 0.15s, border-color 0.15s, color 0.15s;
   }
   .dp-footer button:hover {
     background: #eaf1ff;
     border-color: #2D6BFF;
     color: #2D6BFF;
   }
   
   /* Responsive : sur petit écran, le popup prend toute la largeur */
   @media (max-width: 420px) {
     .dp-popup {
       width: 100%;
       min-width: 260px;
     }
   }