/* ==========================================================================
   Perfeting — Simulateur d'éligibilité
   Design system repris de la landing Perfeting : Inter · bleu #1f6df0 ·
   ombres en couches · dégradés bleus.
   ========================================================================== */

:root{
  --blue:         #1f6df0;
  --blue-bright:  #2b7fff;
  --blue-deep:    #0f4fd8;
  --blue-ink:     #0b2a66;
  --grad:         linear-gradient(135deg,#4396ff 0%,#1256e0 100%);
  --grad-text:    linear-gradient(105deg,#2b7fff 10%,#55a4ff 90%);
  --grad-soft:    linear-gradient(180deg,#eaf3ff,#ddecfe);
  --grad-panel:   linear-gradient(135deg,#f3f8ff,#e9f2ff);

  --ink:          #0c1a33;
  --ink-soft:     #42506b;
  --muted:        #64748f;
  --faint:        #94a3bd;
  --line:         #e3ebf7;
  --line-strong:  #d3dff0;
  --track:        #e6eef9;
  --placeholder:  #a5b2c8;
  --disabled-bg:  #e9eef6;
  --disabled-fg:  #9aa7bd;
  --green:        #12b76a;
  --red:          #f04438;

  --shadow-xs:    0 1px 2px rgba(15,42,90,.05), 0 2px 8px rgba(15,42,90,.04);
  --shadow-card:  0 2px 6px rgba(15,42,90,.05), 0 8px 20px -6px rgba(15,42,90,.08);
  --shadow-hover: 0 4px 10px rgba(15,42,90,.05), 0 18px 40px -12px rgba(31,109,240,.22);
  --shadow-sel:   0 0 0 3px rgba(43,127,255,.16), 0 12px 30px -10px rgba(31,109,240,.35);
  --shadow-badge: 0 3px 8px rgba(18,86,224,.35);
  --shadow-cta:   0 4px 12px rgba(18,86,224,.28), 0 12px 30px -6px rgba(18,86,224,.45), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 6px rgba(9,46,128,.25);
  --shadow-cta-h: 0 6px 16px rgba(18,86,224,.35), 0 20px 50px -8px rgba(18,86,224,.55), inset 0 1px 0 rgba(255,255,255,.3);
  --shadow-lg:    0 8px 18px rgba(15,42,90,.06), 0 34px 80px -18px rgba(15,42,90,.22);

  --r:            16px;
  --ease:         cubic-bezier(.4,0,.2,1);
  --font:         'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
input,button,a{ font-family:inherit }
input::placeholder{ color:var(--placeholder) }
::selection{ background:rgba(43,127,255,.18) }
:focus-visible{ outline:3px solid rgba(43,127,255,.45); outline-offset:3px; border-radius:6px }

/* ---------- Layout -------------------------------------------------------- */

.screen{
  min-height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  padding:0 24px; position:relative; overflow:hidden;
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(67,150,255,.14), transparent 60%),
    radial-gradient(760px 480px at 96% 100%, rgba(18,86,224,.10), transparent 60%),
    #fff;
}
.shell{
  width:100%; max-width:760px;
  display:flex; flex-direction:column; min-height:100dvh;
}
.screen--wide .shell{ max-width:880px }

.deco{ position:absolute; inset:0; pointer-events:none; z-index:0 }
.deco > *{ position:absolute }
@media (max-width:900px){ .deco{ display:none } }

/* ---------- Header + progression ----------------------------------------- */

.hdr{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; padding:18px 0 14px;
  position:relative; z-index:1;
}
.screen--wide .hdr{ padding:24px 0 16px }

.hdr__brand{ display:flex; flex-direction:column; gap:5px }
.logo{ display:inline-flex; align-items:center; text-decoration:none; color:inherit }
.hdr__logo{ height:40px; width:auto; display:block }
.hdr__kicker{
  font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}
.hdr__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 13px; border:1.5px solid rgba(43,127,255,.35); border-radius:999px;
  background:rgba(255,255,255,.8); backdrop-filter:blur(8px);
  font-size:13px; font-weight:700; color:var(--blue); white-space:nowrap;
  box-shadow:var(--shadow-xs);
}

.progress{
  height:7px; border-radius:999px; background:var(--track);
  overflow:hidden; position:relative; z-index:1;
}
.progress__bar{
  height:100%; border-radius:999px; background:var(--grad);
  width:0%; transition:width .5s var(--ease);
}

/* ---------- Main --------------------------------------------------------- */

.main{
  flex:1; display:flex; flex-direction:column; justify-content:flex-start;
  padding:clamp(20px,6vh,64px) 0 24px; position:relative; z-index:1;
}
.screen--top .main{ padding-top:clamp(12px,4vh,36px) }
.screen--wide .main{ flex:none; justify-content:flex-start; padding:22px 0 20px }

.eyebrow{
  display:block; text-align:center; margin:0 0 12px;
  font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue);
}

h1{
  margin:10px 0 0; text-align:center;
  font-size:clamp(26px,3.8vw,38px); font-weight:800;
  letter-spacing:-.028em; line-height:1.18; color:var(--ink);
}
h1.h1--first{ margin:0 }
h1.h1--sm{ font-size:clamp(23px,3.2vw,32px) }
h1.h1--md{ font-size:clamp(24px,3.4vw,34px) }
h1.h1--xl{ font-size:clamp(28px,4.4vw,42px); line-height:1.15 }

.g{
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nb{ white-space:nowrap }

.lede{
  margin:12px 0 0; text-align:center;
  font-size:clamp(14.5px,1.8vw,16.5px); font-weight:500; color:var(--muted); line-height:1.55;
}

/* ---------- Option cards -------------------------------------------------- */

.opts{ display:flex; flex-direction:column; gap:10px; margin-top:24px }
.opts--grid2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:11px; margin-top:26px }
.opts--cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2.5vw,22px); margin-top:28px }

.opt{
  --r:14px;
  position:relative; cursor:pointer; text-align:left;
  border-radius:var(--r);
  border:1.5px solid var(--line-strong);
  background:#fff;
  box-shadow:var(--shadow-card);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  padding:0; font:inherit; color:inherit; width:100%; display:block;
}
.opt:hover{
  transform:translateY(-2px); border-color:var(--blue-bright);
  background:linear-gradient(180deg,#fbfdff,#f4f9ff);
  box-shadow:var(--shadow-hover);
}
.opt[aria-pressed="true"]{
  border-color:var(--blue-bright); background:#ecf4ff;
  box-shadow:var(--shadow-sel);
}

.opt__check{
  position:absolute; display:grid; place-items:center;
  border-radius:999px; background:var(--grad);
  box-shadow:var(--shadow-badge); z-index:2;
  opacity:0; transform:scale(.4); transition:opacity .18s ease, transform .18s ease;
  top:50%; right:14px; margin-top:-13px; width:26px; height:26px;
}
.opt[aria-pressed="true"] .opt__check{ opacity:1; transform:scale(1) }
.opt__check svg{ width:13px; height:13px }

.opt__letter{
  width:32px; height:32px; flex-shrink:0;
  display:grid; place-items:center; border-radius:50%;
  background:var(--grad-soft); color:var(--blue);
  font-weight:800; font-size:13px;
  box-shadow:inset 0 1px 0 #fff;
  transition:background .22s, color .22s, box-shadow .22s;
}
.opt:hover .opt__letter,
.opt[aria-pressed="true"] .opt__letter{ background:var(--grad); color:#fff; box-shadow:var(--shadow-badge) }

.opt__icon{
  width:42px; height:42px; flex-shrink:0; border-radius:12px;
  background:var(--grad-soft); display:grid; place-items:center; color:var(--blue);
}
.opt__label{
  display:block; font-size:clamp(14px,1.6vw,15.5px); font-weight:600;
  letter-spacing:-.01em; color:var(--ink); min-width:0; line-height:1.3;
}
.opt__sub{ display:block; font-size:13.5px; color:var(--muted); font-weight:400; margin-top:2px }

/* row variant — lettre/icône + texte */
.opt--row{ display:flex; align-items:center; gap:13px; padding:14px 16px }
.opt--row .opt__label{ padding-right:30px }

.opt--row-lg{ --r:16px; display:flex; align-items:center; gap:16px; padding:16px 18px }
.opt--row-lg .opt__check{ width:28px; height:28px; margin-top:-14px; right:18px }
.opt--row-lg .opt__body{ display:flex; flex-direction:column; padding-right:40px }
.opt--row-lg .opt__label{ font-size:16.5px; font-weight:700 }

/* plain variant — budgets */
.opt--plain{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:15px 18px;
  font-size:clamp(15px,1.8vw,17px); font-weight:700;
  letter-spacing:-.01em; color:var(--ink);
}

.opt--full{ grid-column:1 / -1 }

/* grandes cartes (Q1) */
.opt--big{
  --r:20px; display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:clamp(22px,3vw,32px) 20px; text-align:center;
}
.opt--big .opt__check{ top:14px; right:14px; margin-top:0; width:30px; height:30px }
.opt--big .opt__check svg{ width:15px; height:15px }
.opt__glyph{
  width:64px; height:64px; border-radius:20px;
  background:var(--grad-soft); display:grid; place-items:center; color:var(--blue);
  box-shadow:inset 0 1px 0 #fff, var(--shadow-xs);
}
.opt[aria-pressed="true"] .opt__glyph,
.opt--big:hover .opt__glyph{ background:var(--grad); color:#fff; box-shadow:var(--shadow-badge) }
.opt__title{ display:block; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink) }
.opt__desc{ display:block; margin:4px 0 0; font-size:14.5px; line-height:1.5; color:var(--muted); font-weight:400 }

/* ---------- Champs ------------------------------------------------------- */

.field{
  display:flex; align-items:center; gap:14px;
  padding:6px 6px 6px 20px; border-radius:16px;
  border:1.5px solid var(--line-strong); background:#fff;
  box-shadow:var(--shadow-card); color:var(--blue);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.field:focus-within{ border-color:var(--blue-bright); box-shadow:var(--shadow-sel) }
.field svg{ flex-shrink:0 }
.field input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-size:16.5px; font-weight:600; color:var(--ink); padding:13px 0;
}
.field--invalid{ border-color:var(--red) }

.narrow{ max-width:560px; width:100%; align-self:center }
.mt22{ margin-top:22px } .mt26{ margin-top:26px } .mt18{ margin-top:18px }
.mt16{ margin-top:16px } .mt14{ margin-top:14px } .mt20{ margin-top:20px }

.err{
  margin:10px auto 0; max-width:560px; width:100%;
  font-size:13.5px; font-weight:600; color:var(--red); text-align:center;
  min-height:18px;
}

/* ---------- Boutons ------------------------------------------------------ */

.cta{
  position:relative; overflow:hidden;
  padding:16px 26px; border:none; border-radius:14px;
  background:var(--grad); color:#fff;
  font-size:16px; font-weight:700; letter-spacing:-.01em; cursor:pointer;
  box-shadow:var(--shadow-cta);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.cta::after{
  content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.cta:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.05); box-shadow:var(--shadow-cta-h) }
.cta:hover:not(:disabled)::after{ left:130% }
.cta:disabled{
  background:var(--disabled-bg); color:var(--disabled-fg);
  cursor:not-allowed; box-shadow:none; transform:none;
}
.cta:disabled::after{ display:none }

.back{
  margin-top:16px; align-self:center; background:none; border:none; padding:4px 8px;
  font-size:14.5px; font-weight:600; color:var(--faint);
  cursor:pointer; transition:color .2s ease;
}
.back:hover{ color:var(--blue) }

.linkish{
  background:none; border:none; padding:0; cursor:pointer;
  font-size:14px; font-weight:700; color:var(--blue);
}
.linkish:hover{ color:var(--blue-deep) }
.linkish:disabled{ color:var(--faint); cursor:default }

/* ---------- Blocs annexes ------------------------------------------------ */

.note{
  display:flex; gap:14px; align-items:center;
  padding:15px 18px; border-radius:15px;
  background:var(--grad-panel); border:1px solid rgba(43,127,255,.18);
}
.note__icon{
  width:40px; height:40px; flex-shrink:0; border-radius:12px;
  background:var(--grad); display:grid; place-items:center; color:#fff;
  box-shadow:var(--shadow-badge);
  animation:qFloat 2.6s ease-in-out infinite;
}
.note.narrow{ align-self:center }
.note__body{ display:flex; flex-direction:column; gap:3px }
.note__t{ font-size:14.5px; font-weight:800; letter-spacing:-.01em; color:var(--ink) }
.note__d{ font-size:13.5px; line-height:1.5; color:var(--muted) }

.panel{
  max-width:620px; width:100%; align-self:center;
  padding:14px 18px; border-radius:15px;
  background:var(--grad-panel); border:1px solid rgba(43,127,255,.18);
  text-align:center; font-size:13px; line-height:1.5;
  font-weight:500; color:var(--muted);
}

.secure{ margin-top:18px; align-self:center; display:flex; align-items:center; gap:9px; color:var(--faint) }
.secure span{ font-size:13px; font-weight:600; color:var(--faint) }

.hint{
  margin:14px auto 0; max-width:560px; width:100%; text-align:center;
  font-size:13.5px; line-height:1.55; color:var(--muted);
}

.trust{
  padding:18px 0 26px; border-top:1px solid var(--line);
  display:flex; justify-content:center; gap:clamp(24px,6vw,64px); flex-wrap:wrap;
  position:relative; z-index:1;
}
.trust__i{ display:flex; flex-direction:column; align-items:center; gap:2px }
.trust__n{
  font-size:22px; font-weight:800; letter-spacing:-.02em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.trust__l{ font-size:13.5px; font-weight:500; color:var(--muted) }

/* ---------- RGPD --------------------------------------------------------- */

.consent{
  margin-top:16px; display:flex; align-items:flex-start; gap:11px;
  cursor:pointer; background:none; border:none; padding:0; text-align:left;
}
.consent__box{
  width:21px; height:21px; flex-shrink:0; margin-top:1px;
  border-radius:6px; border:2px solid var(--line-strong); background:#fff;
  display:grid; place-items:center; position:relative;
}
.consent__box::after{
  content:''; position:absolute; inset:-2px; border-radius:6px;
  background:var(--grad); opacity:0; transition:opacity .15s ease;
}
.consent__box svg{ position:relative; z-index:1; opacity:0; transition:opacity .15s ease }
.consent[aria-checked="true"] .consent__box::after,
.consent[aria-checked="true"] .consent__box svg{ opacity:1 }
.consent__txt{ font-size:12.5px; line-height:1.5; color:var(--muted) }

/* ---------- Éligibilité -------------------------------------------------- */

.steps{
  display:flex; flex-direction:column; gap:12px; margin-top:28px;
  max-width:560px; width:100%; align-self:center;
}
.step{
  display:flex; align-items:center; gap:14px;
  padding:15px 18px; border-radius:15px;
  border:1.5px solid var(--line-strong); background:#fff;
  box-shadow:var(--shadow-card); position:relative;
  transition:border-color .3s ease;
}
.step[data-state="busy"],.step[data-state="done"]{ border-color:rgba(43,127,255,.45) }
.step::before{
  content:''; position:absolute; inset:0; border-radius:13px;
  background:rgba(255,255,255,.6); pointer-events:none; z-index:1;
  opacity:0; transition:opacity .3s ease;
}
.step[data-state="idle"]::before{ opacity:1 }
.step__slot{ width:34px; height:34px; flex-shrink:0; display:grid; place-items:center }
.step__label{ font-size:clamp(13.5px,1.7vw,15.5px); font-weight:600; letter-spacing:-.01em; color:var(--ink) }
.dot-idle{ width:24px; height:24px; border-radius:999px; border:3px solid var(--track) }
.dot-spin{
  width:24px; height:24px; border-radius:999px;
  border:3px solid #dbe8ff; border-top-color:var(--blue);
  animation:eligSpin .8s linear infinite;
}
.dot-done{
  width:30px; height:30px; border-radius:999px; background:var(--grad);
  display:grid; place-items:center; box-shadow:var(--shadow-badge);
  animation:eligPop .45s ease both;
}

.seal{
  align-self:center; width:56px; height:56px; border-radius:999px;
  background:var(--grad); display:grid; place-items:center;
  box-shadow:0 12px 28px rgba(18,86,224,.35);
  animation:eligPop .5s ease both;
}
.seal--sq{ border-radius:16px; animation:none }

/* ---------- Code SMS ----------------------------------------------------- */

.code{ margin-top:22px; display:flex; justify-content:center; gap:12px }
.code input{
  width:58px; height:64px; text-align:center; border-radius:14px;
  border:1.5px solid var(--line-strong); outline:none; background:#fff;
  font-size:26px; font-weight:800; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.code input:focus{ border-color:var(--blue-bright); box-shadow:var(--shadow-sel) }
.code input[data-filled="1"]{ border-color:var(--blue-bright) }
.code--error input{ border-color:var(--red) }

/* ---------- Récapitulatif ------------------------------------------------- */

.recap{
  margin-top:24px; max-width:560px; width:100%; align-self:center;
  padding:18px 20px; border-radius:16px; text-align:left;
  background:#fff; border:1.5px solid var(--line-strong); box-shadow:var(--shadow-card);
}
.recap__t{ font-size:14.5px; font-weight:800; color:var(--ink); margin-bottom:6px }
.recap__row{
  display:flex; justify-content:space-between; gap:16px;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.recap__row:last-child{ border-bottom:none }
.recap__k{ font-size:13.5px; font-weight:500; color:var(--muted) }
.recap__v{ font-size:13.5px; font-weight:700; color:var(--ink); text-align:right }

/* ---------- Animations --------------------------------------------------- */

@keyframes eligSpin{ to{ transform:rotate(360deg) } }
@keyframes eligPop{ 0%{transform:scale(.4);opacity:0} 70%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }
@keyframes qFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes fadeUp{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* Le glissement est porté par .main (rogné par .screen) et non par .screen :
   translater l'écran entier allongeait la page de 10 px pendant l'entrée. */
.screen{ animation:fadeIn .32s var(--ease) both }
.main{ animation:fadeUp .32s var(--ease) both }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* ---------- Responsive --------------------------------------------------- */

@media (max-width:600px){
  .screen{ padding:0 18px }
  .trust{ flex-direction:column; align-items:center; gap:14px }
  h1{ font-size:24px !important }
  h1.h1--xl{ font-size:26px !important }
  .opts--cards{ gap:12px }
  .opts--grid2{ grid-template-columns:1fr; gap:9px }
  .opt--big{ padding:20px 14px; gap:10px }
  .opt__glyph{ width:52px; height:52px; border-radius:16px }
  .opt__title{ font-size:18px }
  .opt__desc{ font-size:13px }
  .opt--row{ gap:10px; padding:12px 12px }
  .opt--row-lg{ gap:12px; padding:13px 14px }
  .code{ gap:9px }
  .code input{ width:52px; height:58px; font-size:23px }
  .hdr__badge{ font-size:12px; padding:7px 11px }
  .hdr__logo{ height:34px }
  /* Chaque question doit tenir dans l'écran d'un téléphone sans défilement :
     contenu plus haut, options plus compactes, bloc « Pourquoi » masqué. */
  .main{ padding-top:10px }
  .opts{ gap:8px; margin-top:16px }
  .opt--plain{ padding:11px 16px; font-size:15px }
  .opt--plain .opt__letter{ width:28px; height:28px; font-size:12px }
  .back{ margin-top:10px }
  .note--desktop{ display:none }
}