:root{
    --ink:#000000;           /* texte principal */
    --muted:#5e6a7a;         /* texte secondaire */
    --panel:#f6f8fc;         /* colonne info gauche */
    --glass:#FFFFFF;         /* cartes blanches */
    --line:#e6ebf3;          /* 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);
  }

.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;}

.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; } }

.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:conic-gradient(from 180deg at 50% 50%, var(--grad-1), #a78bfa, var(--grad-2), var(--grad-1)); box-shadow:0 10px 30px rgba(94,163,255,.25);}
.brand svg{ color:#0b1220; 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:#495a6c }

.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:#345da6; 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 }

.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:#123; }

.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 } }

.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="%235c78b4" 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:rgba(37,99,235,.55); box-shadow:0 0 0 3px rgba(37,99,235,.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:#2563eb; 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:#6b8dd6; z-index:1 }
.ico-top{ position:absolute; left:14px; top:18px; width:18px; height:18px; color:#6b8dd6; z-index:1 }

.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:#6b8dd6 }
.cardchoice span{ display:block; font-weight:800; color:var(--ink) }
.glow{ position:absolute; inset:-2px; border-radius:18px; background:linear-gradient(90deg, rgba(110,168,255,.35), rgba(34,211,238,.35)); filter:blur(10px); opacity:0; transition:opacity .2s ease; pointer-events:none }
.cardchoice input:checked ~ .ico{ color:#22c9d6 }
.cardchoice input:checked ~ span{ color:#0b1b33 }
.cardchoice input:checked ~ .glow{ opacity:1 }

.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 #8fb0ff; 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{ 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:#fff; background:linear-gradient(90deg, var(--grad-1), var(--grad-2)); box-shadow:0 12px 26px rgba(94,163,255,.28); transition:transform .18s ease, filter .18s ease }
.btn:hover{ transform:translateY(-1px); filter:saturate(1.06) }
.btn-ghost{ background:#fff; 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{ position:fixed; bottom:16px; right:16px; z-index:99; background:#0b1220; color:#eaf2ff; border:1px solid #223a7a; border-radius:14px; box-shadow:0 14px 40px rgba(15,29,56,.35); padding:12px 14px; display:none; align-items:center; gap:10px }
.toast.show{ display:flex }

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

@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);
  }
}

@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; }
  .progress{ margin-top: 14px; }
}

.input, .select, .textarea{
  padding: 16px 14px;
}
.field .input,
.field .select,
.field .textarea{
  padding-left: 44px;
}
.ico-left{ left: 16px; }
.label{ left: 44px; }

.grid{ row-gap: 22px; column-gap: 24px; }
@media (max-width: 820px){ .grid{ row-gap: 18px; } }

.sf-head{ padding: 18px 18px; }
.sf-body{ padding: 20px 18px 24px; }

.bars{ gap: 8px; }
.count{ font-size: .95rem; }
@media (max-width: 480px){
  .progress{ gap: 10px; }
  .bars{ grid-template-columns: repeat(5, 1fr); }
}

.sf-card{ margin: 0 auto; }