/* ============  DESIGN CLAIR & LISIBLE (sans background global)  ============ */
  :root{
    --ink:#000000;           /* texte principal */
    --muted:#D3D3D3;         /* texte secondaire */
    --panel:#FFFFFF;         /* colonne info gauche */
    --glass:#FFFFFF;         /* cartes blanches */
    --line:#D3D3D3;          /* lignes claires */
    --grad-1:#10367A;        /* couleur primaire */
    --grad-2:#FE5716;        /* couleur d’accent */
    --white:#FFFFFF;
    --accent:#10367A;        /* focus/brand */
    --r:18px;
    --shadow:0 16px 50px rgba(16,24,40,.08);
  }



  /* WRAP plus large */
  .sf-wrap{ width:min(1200px, 100%); margin-inline:auto; padding:34px 18px 56px; margin:0; font:16px/1.55 "Inter", ui-sans-serif, system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--ink); background:transparent;}

  /* Carte split */
  .sf-card{ display:grid; grid-template-columns: 420px 1fr; min-height:680px; background:var(--glass); border:1px solid var(--line); border-radius:calc(var(--r) + 4px); overflow:hidden; box-shadow:var(--shadow); backdrop-filter:saturate(1.05); }
  @media (max-width: 980px){ .sf-card{ grid-template-columns: 1fr; min-height:unset; } }

  /* ——— Colonne gauche (visuel + progression) ——— */
  .sf-left{ position:relative; padding:28px; background:var(--panel); border-right:1px solid var(--line); }
  .brand{display:flex; align-items:center; gap:.65rem; font-weight:900; letter-spacing:.6px}
  .brand-badge{width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(90deg, var(--grad-1), var(--grad-2)); box-shadow:0 10px 30px rgba(16, 54, 122, 0.35);}
  .brand svg{ color:#FFFFFF; filter:drop-shadow(0 4px 10px rgba(0,0,0,.15)); }

  .hero{ margin:28px 0 22px; padding:22px; border:1px solid var(--line); border-radius:16px; background:#fff; }
  .hero h1{ margin:0 0 8px; font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem); }
  .hero p{ margin:0; color:#5e6a7a }

  .progress{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
  .bars{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px }
  .bar{ height:8px; border-radius:999px; overflow:hidden; background:#eaf0fb; border:1px solid var(--line); }
  .bar > i{ display:block; height:100%; width:var(--fill,0%); background:linear-gradient(90deg, var(--grad-1), var(--grad-2)); transition:width .3s ease }
  .count{ font-variant-numeric:tabular-nums; color:var(--grad-1); font-weight:800 }

  .left-footer{ position:absolute; left:0; right:0; bottom:18px; display:flex; gap:10px; align-items:center; padding:0 28px; color:#5e6a7a; opacity:.9 }
  .left-footer svg{ opacity:.8 }

  /* ——— Colonne droite (form) ——— */
  .sf-right{ display:flex; flex-direction:column; }

  .sf-head{ padding:22px clamp(18px,2.6vw,28px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:#fff; }
  .tag{ font-size:.72rem; letter-spacing:.14em; font-weight:900; text-transform:uppercase; padding:.45rem .7rem; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); }

  .sf-body{ padding: clamp(18px, 2.4vw, 28px); background:#fff; }
  .grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; column-gap:24px; align-items:start; }
  .col-6{ grid-column: span 6; gap:20px; }
  .col-12{ grid-column: span 12 }
  @media (max-width: 820px){ .col-6{ grid-column: span 12 } }

  .sf-step{ display:none; animation:fade .25s ease }
  .sf-step.active{ display:block }
  @keyframes fade{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

  /* Champs */
  .field{ position:relative; z-index:0; min-height:58px; gap: 20px;}
  .input, .select, .textarea{ width:100%; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); padding:15px 2px; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
  .textarea{ min-height:120px; resize:vertical }
  .select{ appearance:none; -webkit-appearance:none; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>'); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px }
  .label{ position:absolute; left:46px; top:12px; color:#6b7a90; pointer-events:none; transition:.15s ease; background:#fff; padding:0 .25rem; z-index:1 }
  .input::placeholder,.textarea::placeholder{ color:transparent }
  .field:focus-within .input,.field:focus-within .select,.field:focus-within .textarea{ border-color:var(--grad-1); box-shadow:0 0 0 3px rgba(16,54,122,.18); background:#fff }
  .input:focus + .label,
  .input:not(:placeholder-shown) + .label,
  .textarea:focus + .label,
  .textarea:not(:placeholder-shown) + .label,
  .select:focus + .label,
  .select:not([value=""]) + .label{ top:-8px; transform:translateY(-50%); font-size:12px; color:var(--grad-1); background:#fff; border-radius:8px; box-shadow:0 0 0 4px #fff inset }
  .ico-left{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--grad-1); z-index:1 }
  .ico-top{ position:absolute; left:14px; top:18px; width:18px; height:18px; color:var(--grad-1); z-index:1 }

  /* Choix cartes */
  .choicewrap{ display:flex; flex-wrap:wrap; gap:14px }
  .cardchoice{ position:relative; width:calc(33.333% - 9.5px); min-width:200px; cursor:pointer; text-align:center; border:1px solid var(--line); border-radius:16px; padding:18px; background:#fff; transition:transform .18s ease, box-shadow .18s ease; }
  .cardchoice:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(16,24,40,.10) }
  .cardchoice input{ display:none }
  .ico{ width:30px; height:30px; margin:0 auto 8px; color:var(--grad-1) }
  .cardchoice span{ display:block; font-weight:800; color:var(--ink) }
  .glow{ position:absolute; inset:-2px; border-radius:18px; background:linear-gradient(90deg, rgba(16, 54, 122, 0.35), rgba(254, 87, 22, 0.35)); filter:blur(10px); opacity:0; transition:opacity .2s ease; pointer-events:none }
  .cardchoice input:checked ~ .ico{ color:var(--grad-2) }
  .cardchoice input:checked ~ span{ color:var(--ink) }
  .cardchoice input:checked ~ .glow{ opacity:1 }

  /* Radios pills */
  .choices{ display:flex; gap:10px; flex-wrap:wrap }
  .radio{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:#fff }
  .radio input{ appearance:none; width:14px; height:14px; border-radius:50%; border:2px solid var(--grad-1); display:grid; place-items:center }
  .radio input::after{ content:""; width:8px; height:8px; border-radius:50%; background:linear-gradient(90deg, var(--grad-1), var(--grad-2)); transform:scale(0); transition:transform .15s ease }
  .radio input:checked::after{ transform:scale(1) }

  /* Actions */
  .actions{ display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:8px }
  .note{ color:#6b7a90; font-size:.95rem }
  .btn{ appearance:none; -webkit-appearance:none; cursor:pointer; border:none; display:inline-flex; align-items:center; gap:.55rem; padding:1rem 1.15rem; border-radius:14px; font-weight:900; color:#FFFFFF; background:linear-gradient(90deg, var(--grad-1), var(--grad-2)); box-shadow:0 12px 26px rgba(16, 54, 122, 0.28); transition:transform .18s ease, filter .18s ease }
  .btn:hover{ transform:translateY(-1px); filter:saturate(1.06) }
  .btn-ghost{ background:#FFFFFF; color:var(--ink); border:1px solid var(--line); box-shadow:none }
  .btn-ghost:hover{ background:#f7faff }

  .invalid{ border-color:#f59e0b !important; box-shadow:0 0 0 3px rgba(245,158,11,.25) !important }

  /* Toast */
  .toast{ position:fixed; bottom:16px; right:16px; z-index:99; background:#000000; color:#FFFFFF; border:1px solid var(--grad-1); border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.35); padding:12px 14px; display:none; align-items:center; gap:10px }
  .toast.show{ display:flex }

  /* Accessibility focus */
  :is(a,button,input,select,textarea):focus-visible{ outline:2px solid var(--grad-1); outline-offset:3px; border-radius:10px }

  


  /* === PATCH MOBILE & LISIBILITÉ — formulaire32.css === */

/* 1) Safe paddings pour petits écrans (évite bords collés) */
@media (max-width: 480px){
  .sf-wrap{
    padding: 28px max(16px, env(safe-area-inset-left,0) + 12px)
             48px max(16px, env(safe-area-inset-right,0) + 12px);
  }
}

/* 2) Colonne gauche : pas de chevauchement, progression respirante */
@media (max-width: 980px){
  .sf-left{ padding: 20px max(16px, env(safe-area-inset-left,0) + 12px); }
  .left-footer{ position: static; margin-top: 14px; padding: 0; } /* n'écrase plus le contenu */
  .progress{ margin-top: 14px; } /* espace entre hero et barres */
}

/* 3) Champs : vrai padding horizontal, texte jamais collé au bord */
.input, .select, .textarea{
  padding: 16px 14px;              /* L/R confortables au lieu de 2px */
}
.field .input,
.field .select,
.field .textarea{
  padding-left: 44px;               /* laisse la place à l’icône + label */
}
.ico-left{ left: 16px; }            /* cohérent avec le padding */
.label{ left: 44px; }               /* aligne l’étiquette avec le texte */

/* 4) Espacement vertical entre champs */
.grid{ row-gap: 22px; column-gap: 24px; }
@media (max-width: 820px){ .grid{ row-gap: 18px; } }

/* 5) Corps du formulaire : marges internes un peu plus généreuses */
.sf-head{ padding: 18px 18px; }
.sf-body{ padding: 20px 18px 24px; }

/* 6) Barres de progression : compacter légèrement sur mobile */
.bars{ gap: 8px; }
.count{ font-size: .95rem; }
@media (max-width: 480px){
  .progress{ gap: 10px; }
  .bars{ grid-template-columns: repeat(5, 1fr); } /* garde 5 segments sans chevauchement */
}

/* 7) S’assure que la carte ne “touche” pas les bords du viewport */
.sf-card{ margin: 0 auto; }