/* ==========================================================================
   SimuWebsite — Simulateur
   Design tokens extraits des maquettes Claude Design
   (projet « SimuWebsite Design System », templates/simulateur-simuwebsite)
   ========================================================================== */

:root{
  --brand:        #FF6A2B;
  --brand-400:    #FF8A3D;
  --brand-600:    #FF4D14;
  --grad:         linear-gradient(96deg,#FF8A3D 0%,#FF4D14 100%);
  --grad-text:    linear-gradient(94deg,#FF8A3D 0%,#FF4D14 90%);
  --grad-border:  linear-gradient(135deg,#FFD9B8 0%,#FFB08A 45%,#FF8A3D 100%);
  --grad-soft:    linear-gradient(135deg,#FFF1E7,#FFE0CB);
  --grad-panel:   linear-gradient(135deg,#FFF6EF,#FFEDE0);

  --ink:          #16181D;
  --muted:        #5A6472;
  --faint:        #8B94A3;
  --line:         #E6E9EF;
  --track:        #EBEDF2;
  --placeholder:  #B8C0CC;
  --disabled-bg:  #EBEDF2;
  --disabled-fg:  #9AA3B0;

  --shadow-card:  0 6px 20px rgba(255,106,43,.08), 0 3px 10px rgba(22,24,29,.05);
  --shadow-hover: 0 14px 32px rgba(255,106,43,.16);
  --shadow-sel:   0 12px 30px rgba(255,106,43,.2);
  --shadow-badge: 0 6px 14px rgba(255,106,43,.4);
  --shadow-cta:   0 12px 28px rgba(255,106,43,.32);
  --shadow-cta-h: 0 18px 38px rgba(255,106,43,.4);

  --r:            16px;
  --ease:         cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;
}

input,button,a{ font-family:inherit }
input::placeholder{ color:var(--placeholder) }

:focus-visible{ outline:3px solid rgba(255,106,43,.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;
}

.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:16px 0 12px;
  position:relative; z-index:1;
}
.screen--wide .hdr{ padding:22px 0 16px }

.hdr__brand{ display:flex; flex-direction:column; gap:5px }
.hdr__logo{ height:26px; width:auto; display:block; mix-blend-mode:multiply }
.hdr__kicker{
  font-size:9.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint);
}
.hdr__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 13px; border:1.5px solid rgba(255,106,43,.4); border-radius:999px;
  background:rgba(255,255,255,.75); backdrop-filter:blur(8px);
  font-size:13px; font-weight:700; color:var(--brand); white-space:nowrap;
}

.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:center;
  padding:8px 0 10px; position:relative; z-index:1;
}
/* Écrans dont le contenu doit rester haut plutôt que centré verticalement. */
.screen--top .main{
  justify-content:flex-start;
  padding-top:clamp(12px,4vh,36px);
}
.screen--wide .main{ flex:none; justify-content:flex-start; padding:22px 0 20px }

.eyebrow{ display:flex; align-items:center; gap:10px; justify-content:center }
.eyebrow__rule{ width:26px; height:2.5px; border-radius:2px; background:var(--grad) }
.eyebrow__txt{
  font-size:13px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand);
}

h1{
  margin:10px 0 0; text-align:center;
  font-size:clamp(26px,3.8vw,38px); font-weight:800;
  letter-spacing:-.03em; 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:10px 0 0; text-align:center;
  font-size:clamp(14.5px,1.8vw,16.5px); font-weight:600; color:var(--muted);
}

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

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

.opt{
  --r:15px;
  position:relative; cursor:pointer; text-align:left;
  border-radius:var(--r);
  border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box, var(--grad-border) border-box;
  box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease;
  padding:0; font:inherit; color:inherit; width:100%; display:block;
}
.opt:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover) }
.opt::after{
  content:''; position:absolute; inset:-2px; border-radius:var(--r);
  border:2.5px solid var(--brand); box-shadow:var(--shadow-sel);
  pointer-events:none; opacity:0; transition:opacity .18s ease;
}
.opt[aria-pressed="true"]::after{ opacity:1 }

.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__icon{
  width:42px; height:42px; flex-shrink:0; border-radius:12px;
  background:var(--grad-soft); display:grid; place-items:center;
}
.opt__label{
  display:block; font-size:clamp(13.5px,1.6vw,15.5px); font-weight:700;
  letter-spacing:-.01em; color:var(--ink); min-width:0;
}
.opt__sub{ display:block; font-size:14px; color:var(--muted); font-weight:400 }

/* row variant — icon + texte */
.opt--row{ display:flex; align-items:center; gap:11px; padding:13px 12px 13px 12px }
.opt--row .opt__label{ padding-right:26px }

.opt--row-lg{ --r:16px; display:flex; align-items:center; gap:16px; padding:15px 18px }
.opt--row-lg .opt__icon{ width:46px; height:46px; border-radius:13px }
.opt--row-lg .opt__check{ width:28px; height:28px; margin-top:-14px; right:18px }
.opt--row-lg .opt__check svg{ width:14px; height:14px }
.opt--row-lg .opt__body{ display:flex; flex-direction:column; gap:2px; padding-right:40px }
.opt--row-lg .opt__label{ font-size:17px; font-weight:800; padding-right:0 }

.opt--goal{ display:flex; align-items:center; gap:13px; padding:12px 16px }
.opt--goal .opt__icon{ width:40px; height:40px }
.opt--goal .opt__label{ font-size:clamp(14px,1.7vw,16px); padding-right:26px }

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

/* tile variant — couleurs */
.opt--tile{ overflow:hidden }
.opt--tile .opt__check{ top:8px; right:8px; margin-top:0; width:24px; height:24px }
.opt--tile .opt__check svg{ width:12px; height:12px }
.opt__swatch{ display:block; height:64px }
.opt__tilelabel{
  display:block; padding:9px 10px 11px; text-align:center;
  font-size:clamp(13px,1.6vw,15px); font-weight:700;
  letter-spacing:-.01em; color:var(--ink);
}

/* wide "je ne sais pas" / "autre" */
.opt--full{ grid-column:1 / -1 }
.opt--center{ display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 16px }
.opt--center .opt__label{ font-size:clamp(14px,1.7vw,16px); padding-right:0 }

/* image cards (Q1) */
.opt--image{
  --r:20px; overflow:hidden; text-align:center;
  box-shadow:0 10px 30px rgba(255,106,43,.10), 0 4px 14px rgba(22,24,29,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.opt--image:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(255,106,43,.18) }
.opt--image .opt__check{ top:14px; right:14px; margin-top:0; width:30px; height:30px }
.opt--image .opt__check svg{ width:15px; height:15px }
/* Le padding maintient un espace visible entre le visuel et la bordure.
   aspect-ratio porte sur la border-box (box-sizing global), donc les deux
   cartes conservent des dimensions strictement identiques. */
.opt__media{
  aspect-ratio:4/3; background:#fff; display:grid; place-items:center;
  overflow:hidden; padding:16px 16px 0;
}
/* contain plutôt que cover : le visuel n'est jamais rogné et son fond blanc
   se fond dans la carte. */
.opt__media img{ width:100%; height:100%; object-fit:contain; display:block }
.opt__body--image{ display:block; padding:16px 18px 18px }
.opt__title{ display:block; font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink) }
.opt__desc{ display:block; margin:6px 0 0; font-size:15px; line-height:1.5; color:var(--muted) }

/* fallback illustré si le PNG de la maquette n'est pas encore déposé */
.ph{ width:100%; height:100%; display:grid; place-items:center; position:relative }
.ph--oui{ background:linear-gradient(150deg,#FFF6EF,#FFE0CB) }
.ph--non{ background:linear-gradient(150deg,#F6F7F9,#E9ECF2) }

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

.field{
  display:flex; align-items:center; gap:14px;
  padding:6px 6px 6px 22px; border-radius:16px;
  border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box, var(--grad-border) border-box;
  box-shadow:var(--shadow-card);
  transition:box-shadow .2s ease;
}
.field:focus-within{ box-shadow:0 10px 26px rgba(255,106,43,.16) }
.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--lg input{ font-size:17px; padding:14px 0 }
.field--invalid{ background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#F6B4B4,#D62828) border-box }

.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:700; color:#D62828; text-align:center;
  min-height:18px;
}

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

.cta{
  padding:15px 24px; border:none; border-radius:14px;
  background:var(--grad); color:#fff;
  font-size:16px; font-weight:800; letter-spacing:-.01em; cursor:pointer;
  box-shadow:var(--shadow-cta);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.cta:hover:not(:disabled){ transform:translateY(-2px); box-shadow:var(--shadow-cta-h) }
.cta:disabled{
  background:var(--disabled-bg); color:var(--disabled-fg);
  cursor:not-allowed; box-shadow:none; transform:none;
}
.cta--q{ font-size:16.5px }

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

.linkish{
  background:none; border:none; padding:0; cursor:pointer;
  font-size:14px; font-weight:700; color:var(--brand); text-decoration:none;
}
.linkish:hover{ color:var(--brand-600) }
.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(255,106,43,.18);
}
.note__icon{
  width:40px; height:40px; flex-shrink:0; border-radius:12px;
  background:var(--grad); display:grid; place-items:center;
  box-shadow:0 8px 18px rgba(255,106,43,.3);
  animation:qFloat 2.6s ease-in-out infinite;
}
.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(255,106,43,.18);
  text-align:center; font-size:13px; line-height:1.5;
  font-weight:600; color:var(--muted);
}

.secure{
  margin-top:18px; align-self:center;
  display:flex; align-items:center; gap:9px;
}
.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:600; 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 #C9CFD8; 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:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box, var(--grad-border) border-box;
  box-shadow:var(--shadow-card); position:relative;
}
.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:700;
  letter-spacing:-.01em; color:var(--ink); min-width:0;
}
.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 #FFE0CB; border-top-color:var(--brand);
  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:54px; height:54px; border-radius:999px;
  background:var(--grad); display:grid; place-items:center;
  box-shadow:0 12px 28px rgba(255,106,43,.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:2px solid var(--line); outline:none;
  font-size:26px; font-weight:800; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.code input:focus{ border-color:var(--brand); box-shadow:0 6px 16px rgba(255,106,43,.12) }
.code input[data-filled="1"]{ border-color:var(--brand) }
.code--error input{ border-color:#D62828 }

/* ---------- 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 fadeUp{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.screen{ 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 }
  .opt__desc{ font-size:13px }
  .opt__title{ font-size:17px }
  /* Les maquettes conservent 2 colonnes sur mobile : on garde ce parti pris
     et on resserre simplement les paddings internes. */
  .opts--cards{ gap:12px }
  .opts--grid2{ gap:9px }
  /* Grille conservée à 2 colonnes : on gagne de la place en resserrant
     l'icône et les paddings, pas en réduisant le texte. */
  .opt--row{ gap:8px; padding:12px 9px; align-items:center }
  .opt--row .opt__icon{ width:32px; height:32px; border-radius:9px }
  .opt--row .opt__icon svg{ width:17px; height:17px }
  .opt--row .opt__label{ padding-right:20px; font-size:14.5px; line-height:1.25 }
  .opt--row .opt__check{ width:20px; height:20px; margin-top:-10px; right:7px }
  .opt--row .opt__check svg{ width:10px; height:10px }
  .opt--row-lg{ gap:12px; padding:13px 14px }
  .opt__body--image{ padding:12px 12px 14px }
  .code{ gap:9px }
  .code input{ width:52px; height:58px; font-size:23px }
  .hdr__badge{ font-size:12px; padding:7px 11px }
}