/* ==========================================================================
   Ma Pergola Idéale — Simulateur V2
   Design system « jardin premium » : fond blanc épuré, feuillages discrets,
   dégradés verts sur les mots importants, ombres en couches.
   Playfair Display (titres) · DM Sans (interface).
   ========================================================================== */

:root{
  /* --- Verts ------------------------------------------------------------ */
  --green:        #3d8b4f;
  --green-bright: #58a85e;
  --green-deep:   #1f4733;
  --forest:       #2a5f35;
  --leaf:         #6fb069;
  --leaf-lt:      #9fd096;

  --grad:         linear-gradient(135deg,#4f9e57 0%,#246b3a 100%);
  --grad-text:    linear-gradient(100deg,#2c7a45 0%,#4e9e52 52%,#79c069 100%);
  --grad-soft:    linear-gradient(180deg,#eef6ec,#e2eede);
  --grad-panel:   linear-gradient(135deg,#f3f9f1,#eaf3e7);

  /* --- Encre & neutres --------------------------------------------------- */
  --ink:          #16241a;
  --ink-soft:     #42533f;
  --muted:        #6f8069;
  --faint:        #9aa895;
  --line:         #e7ede3;
  --line-strong:  #d7e2d1;
  --track:        #e8efe4;
  --placeholder:  #a9b6a4;
  --disabled-bg:  #edf1ea;
  --disabled-fg:  #a3b09e;
  --red:          #cf4436;
  --cream:        #f8f7f1;

  /* --- Ombres ------------------------------------------------------------ */
  --shadow-xs:    0 1px 2px rgba(22,52,30,.05), 0 2px 8px rgba(22,52,30,.04);
  --shadow-card:  0 2px 6px rgba(22,52,30,.05), 0 10px 24px -8px rgba(22,52,30,.10);
  --shadow-hover: 0 4px 10px rgba(22,52,30,.05), 0 20px 44px -14px rgba(45,110,60,.26);
  --shadow-sel:   0 0 0 3px rgba(88,168,94,.18), 0 14px 32px -12px rgba(36,107,58,.38);
  --shadow-badge: 0 3px 8px rgba(36,107,58,.34);
  --shadow-cta:   0 4px 12px rgba(36,107,58,.24), 0 14px 32px -8px rgba(36,107,58,.42), inset 0 1px 0 rgba(255,255,255,.26), inset 0 -2px 6px rgba(18,62,32,.24);
  --shadow-cta-h: 0 6px 16px rgba(36,107,58,.30), 0 22px 52px -10px rgba(36,107,58,.52), inset 0 1px 0 rgba(255,255,255,.28);
  --shadow-lg:    0 8px 18px rgba(22,52,30,.06), 0 36px 84px -20px rgba(22,52,30,.24);

  --r:            16px;
  --ease:         cubic-bezier(.4,0,.2,1);
  --font:         'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display: 'Playfair Display',Georgia,'Times New Roman',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(88,168,94,.20) }
:focus-visible{ outline:3px solid rgba(88,168,94,.45); outline-offset:3px; border-radius:6px }

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

/* Fond blanc franc : l'univers pergola passe par les feuillages et les photos,
   pas par un lavis vert qui grise la page sur grand écran. */
.screen{
  min-height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  padding:0 24px; position:relative; overflow:hidden;
  background:#fff;
}
.shell{
  width:100%; max-width:780px;
  display:flex; flex-direction:column; min-height:100dvh;
}
.screen--wide .shell{ max-width:920px }

/* ---------- Feuillages décoratifs ----------------------------------------- */

.deco{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.deco > *{ position:absolute }
.deco svg{ display:block }
.leaf{ transform-origin:50% 50%; animation:leafSway 9s ease-in-out infinite }
.leaf:nth-child(2){ animation-duration:11s; animation-delay:-2s }
.leaf:nth-child(3){ animation-duration:13s; animation-delay:-5s }
.leaf:nth-child(4){ animation-duration:10s; animation-delay:-7s }
/* Sur petit écran, on garde les feuilles (l'univers pergola compte surtout
   sur mobile) mais on retire cercles et points, et on réduit la taille. */
@media (max-width:900px){
  .deco > *:not(.leaf){ display:none }
  .deco .leaf svg{ width:122px; height:122px }
  .deco .leaf{ opacity:.055 !important }
}

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

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

.hdr__brand{ display:flex; align-items:center; gap:11px }
.logo{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:inherit }
.hdr__mark{
  width:38px; height:38px; flex-shrink:0; border-radius:12px;
  background:var(--grad); display:grid; place-items:center;
  box-shadow:var(--shadow-badge);
}
.hdr__names{ display:flex; flex-direction:column; gap:3px }
.hdr__name{
  font-family:var(--font-display); font-size:19px; font-weight:600;
  letter-spacing:-.015em; color:var(--ink); line-height:1;
}
.hdr__name em{ font-style:italic; font-weight:500 }
.hdr__kicker{
  font-size:9px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--faint);
}
.hdr__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border:1.5px solid rgba(88,168,94,.34); border-radius:999px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(8px);
  font-size:13px; font-weight:600; color:var(--forest); 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 --------------------------------------------------------- */

/* Le contenu démarre toujours juste sous la barre de progression, avec le même
   écart quelle que soit la hauteur de l'écran. Un centrage vertical creusait
   un vide énorme entre la barre et le titre sur les grands écrans. */
.main{
  flex:1; display:flex; flex-direction:column; justify-content:flex-start;
  padding:clamp(20px,3vh,38px) 0 28px; position:relative; z-index:1;
}
.screen--top .main,
.screen--wide .main{ padding-top:clamp(20px,3vh,38px) }

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

h1{
  margin:8px 0 0; text-align:center;
  font-family:var(--font-display);
  font-size:clamp(27px,3.9vw,40px); font-weight:600;
  letter-spacing:-.018em; line-height:1.18; color:var(--ink);
  text-wrap:balance;
}
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(29px,4.4vw,44px); line-height:1.14 }

/* Mot important : dégradé vert. */
.g{
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:italic;
}
.g--up{ font-style:normal }
.nb{ white-space:nowrap }

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

/* ---------- Cartes d'option ----------------------------------------------- */

.opts{ display:flex; flex-direction:column; gap:12px; margin-top:26px }
.opts--grid2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:26px }
.opts--cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2.4vw,20px); margin-top:28px }
.opts--photo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2.2vw,18px); margin-top:26px }

.opt{
  --r:15px;
  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 var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
  padding:0; font:inherit; color:inherit; width:100%; display:block;
}
.opt:hover{
  transform:translateY(-2px); border-color:var(--green-bright);
  background:linear-gradient(180deg,#fcfefb,#f4faf2);
  box-shadow:var(--shadow-hover);
}
.opt[aria-pressed="true"]{
  border-color:var(--green-bright); background:#f0f8ee;
  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:3;
  opacity:0; transform:scale(.4); transition:opacity .18s var(--ease), transform .18s var(--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(--forest);
  font-weight:700; 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:44px; height:44px; flex-shrink:0; border-radius:13px;
  background:var(--grad-soft); display:grid; place-items:center; color:var(--forest);
  box-shadow:inset 0 1px 0 #fff;
  transition:background .22s, color .22s, box-shadow .22s;
}
.opt:hover .opt__icon,
.opt[aria-pressed="true"] .opt__icon{ background:var(--grad); color:#fff; box-shadow:var(--shadow-badge) }

.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; line-height:1.4 }

/* Ligne : icône + texte */
.opt--row{ display:flex; align-items:center; gap:14px; padding:14px 16px }
.opt--row .opt__label{ padding-right:30px }
.opt--row .opt__body{ display:flex; flex-direction:column; min-width:0; padding-right:26px }

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

/* Budgets : ligne centrée */
.opt--plain{
  display:flex; align-items:center; gap:14px;
  padding:17px 20px;
  font-size:clamp(16px,2vw,18px); font-weight:600;
  letter-spacing:-.01em; color:var(--ink);
}
.opt--plain .opt__label{ font-size:inherit; font-weight:inherit }

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

/* Cartes photo (type de pose, usage) */
.opt--photo{ --r:18px; overflow:hidden; padding:0 }
.opt--photo .opt__check{ top:13px; right:13px; margin-top:0; width:28px; height:28px }
.opt__media{
  position:relative; display:block; width:100%; aspect-ratio:4 / 3;
  overflow:hidden; background:var(--grad-soft);
}
/* Deux grandes cartes côte à côte : format plus panoramique, sinon l'écran
   dépasse la hauteur d'un portable. */
.opts--photo2 .opt__media{ aspect-ratio:16 / 10 }

/* Quatre usages : une seule rangée sur grand écran, deux colonnes en dessous. */
@media (min-width:880px){
  .opts--photo4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .opts--photo4 .opt__media{ aspect-ratio:1 / 1 }
  .opts--photo4 .opt__title{ font-size:17px }
  .opts--photo4 .opt__desc{ font-size:12.5px }
  .opts--photo4 .opt__cap{ padding:12px 12px 14px }
}
.opt__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease);
}
.opt:hover .opt__media img{ transform:scale(1.045) }
.opt__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(22,52,30,0) 55%,rgba(22,52,30,.28));
  opacity:0; transition:opacity .25s var(--ease);
}
.opt[aria-pressed="true"] .opt__media::after{ opacity:1 }
.opt__cap{ display:block; padding:14px 16px 16px; text-align:center }
.opt__title{
  display:block; font-family:var(--font-display); font-size:19px; font-weight:600;
  letter-spacing:-.015em; color:var(--ink); line-height:1.25;
}
.opt__desc{ display:block; margin:5px 0 0; font-size:13.5px; line-height:1.45; color:var(--muted); font-weight:400 }

/* Cartes dimension (chiffre + libellé) */
.opt--dim{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:16px 14px; text-align:center }
.opt--dim .opt__check{ top:11px; right:11px; margin-top:0; width:24px; height:24px }
.opt__num{
  display:block; font-family:var(--font-display); font-size:20px; font-weight:600;
  letter-spacing:-.01em; color:var(--ink);
}
.opt--dim .opt__sub{ margin-top:1px }

/* Aperçu de la dimension choisie */
.preview{
  margin:18px auto 0; width:100%; max-width:238px;
  border-radius:20px; overflow:hidden; position:relative;
  box-shadow:var(--shadow-lg); border:1.5px solid var(--line-strong);
  animation:previewIn .45s var(--ease) both;
}
.preview img{ width:100%; display:block; aspect-ratio:4 / 5; object-fit:cover }
.preview__tag{
  position:absolute; left:12px; bottom:12px;
  padding:7px 13px; border-radius:999px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  font-size:12.5px; font-weight:700; color:var(--forest);
  box-shadow:var(--shadow-xs);
}

/* ---------- 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(--green);
  transition:box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.field:focus-within{ border-color:var(--green-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:500; color:var(--ink); padding:13px 0;
}
.field--invalid{ border-color:var(--red) }
.field__prefix{
  display:flex; align-items:center; gap:7px; padding-right:13px;
  margin-right:2px; border-right:1.5px solid var(--line);
  font-size:15.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap;
}

.fields{ display:flex; flex-direction:column; gap:12px }

/* Autocomplétion commune / code postal */
.ac{ position:relative }
.ac__list{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:20;
  max-height:232px; overflow-y:auto;
  border-radius:14px; border:1.5px solid var(--line-strong); background:#fff;
  box-shadow:var(--shadow-lg); padding:6px;
  animation:fadeIn .16s var(--ease) both;
}
.ac__item{
  display:flex; align-items:baseline; gap:9px; width:100%;
  padding:11px 13px; border:none; border-radius:10px; background:none;
  text-align:left; cursor:pointer; font:inherit;
  transition:background .12s var(--ease);
}
.ac__item:hover,.ac__item[data-active="1"]{ background:var(--grad-soft) }
.ac__city{ font-size:15px; font-weight:600; color:var(--ink) }
.ac__cp{ font-size:13px; font-weight:500; color:var(--muted); margin-left:auto }

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

.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:600; letter-spacing:-.01em; cursor:pointer;
  box-shadow:var(--shadow-cta);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.cta::after{
  content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-20deg); transition:left .6s var(--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 }
.cta svg{ flex-shrink:0 }

.back{
  margin-top:16px; align-self:center; background:none; border:none; padding:5px 10px;
  font-size:14.5px; font-weight:500; color:var(--faint);
  cursor:pointer; transition:color .2s var(--ease);
  display:inline-flex; align-items:center; gap:7px;
}
.back:hover{ color:var(--green) }

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

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

.note{
  display:flex; gap:14px; align-items:center;
  padding:15px 18px; border-radius:16px;
  background:var(--grad-panel); border:1px solid rgba(88,168,94,.20);
}
.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.8s 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:700; 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(88,168,94,.20);
  text-align:center; font-size:13px; line-height:1.5;
  font-weight:400; 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:500; 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 28px; border-top:1px solid var(--line);
  display:flex; justify-content:center; gap:clamp(22px,6vw,60px); flex-wrap:wrap;
  position:relative; z-index:1;
}
.trust__i{ display:flex; flex-direction:column; align-items:center; gap:2px }
.trust__n{
  font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:-.02em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.trust__l{ font-size:13px; font-weight:400; color:var(--muted) }

/* Bandeau « analyse en temps réel » */
.ticker{
  margin-top:auto; margin-bottom:18px; align-self:center;
  display:flex; align-items:center; gap:12px;
  padding:12px 20px; border-radius:999px;
  background:var(--grad-panel); border:1px solid rgba(88,168,94,.20);
  font-size:13.5px; font-weight:500; color:var(--ink-soft);
  box-shadow:var(--shadow-xs); position:relative; z-index:1;
}
.ticker__dot{
  width:28px; height:28px; flex-shrink:0; border-radius:50%;
  background:var(--grad); display:grid; place-items:center; color:#fff;
  box-shadow:var(--shadow-badge);
}
.ticker__pulse{
  width:8px; height:8px; border-radius:50%; background:var(--leaf); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(111,176,105,.6); animation:pulse 2s infinite;
}

/* ---------- 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 var(--ease);
}
.consent__box svg{ position:relative; z-index:1; opacity:0; transition:opacity .15s var(--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) }

/* ---------- Écran « simulation en cours » --------------------------------- */

.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 var(--ease);
}
.step[data-state="busy"],.step[data-state="done"]{ border-color:rgba(88,168,94,.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 var(--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:500; 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 #dcebd9; border-top-color:var(--green);
  animation:spin .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:pop .45s var(--ease) both;
}

/* Vignettes des modèles comparés */
.gallery{
  margin:24px auto 0; max-width:384px; width:100%;
  display:grid; grid-template-columns:1fr 1fr; gap:11px;
}
.gallery__c{
  position:relative; border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-card); border:1.5px solid var(--line-strong);
  aspect-ratio:16 / 10;
}
.gallery__c img{ width:100%; height:100%; object-fit:cover; display:block }
.gallery__c::after{
  content:''; position:absolute; inset:0; background:rgba(255,255,255,.55);
  transition:opacity .4s var(--ease);
}
.gallery__c[data-on="1"]::after{ opacity:0 }
.gallery__loupe{
  position:absolute; z-index:2; width:44px; height:44px; border-radius:999px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  display:grid; place-items:center; color:var(--forest);
  box-shadow:0 6px 18px rgba(22,52,30,.22);
  left:50%; top:50%; margin:-22px 0 0 -22px;
  animation:loupe 5s ease-in-out infinite;
}

.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(36,107,58,.34);
  animation:pop .5s var(--ease) both;
}
.seal--sq{ border-radius:18px; animation:none }
.seal--soft{ background:var(--grad-soft); box-shadow:var(--shadow-xs); color:var(--forest) }

/* ---------- Écran résultat (carte sur photo) ------------------------------ */

/* Photo d'ambiance floutée sous un voile blanc : la carte reste parfaitement
   lisible, l'univers pergola est là sans écraser le contenu. */
.screen--hero{ background:#fff }
.screen--hero::before,
.screen--hero::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none }
.screen--hero::before{
  inset:-40px;
  background:var(--hero) center/cover no-repeat;
  filter:blur(7px) saturate(.95);
}
.screen--hero::after{
  background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.78) 45%,rgba(255,255,255,.88) 100%);
}
.screen--hero .shell{ justify-content:center; position:relative; z-index:1 }
/* La carte est centrée dans la fenêtre, et repart du haut si elle déborde. */
.screen--hero .main{ justify-content:flex-start }
.card{
  max-width:520px; width:100%; align-self:center;
  padding:clamp(24px,4vw,34px); border-radius:24px;
  background:rgba(255,255,255,.96); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-lg);
  animation:fadeUp .4s var(--ease) both;
}
.card h1{ text-align:left; margin:14px 0 0 }
.card .lede{ text-align:left }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  background:var(--grad-panel); border:1px solid rgba(88,168,94,.28);
  font-size:12.5px; font-weight:700; color:var(--forest);
}

/* ---------- 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-family:var(--font-display);
  font-size:26px; font-weight:600; color:var(--ink);
  box-shadow:var(--shadow-xs);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.code input:focus{ border-color:var(--green-bright); box-shadow:var(--shadow-sel) }
.code input[data-filled="1"]{ border-color:var(--green-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:700; 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:400; color:var(--muted) }
.recap__v{ font-size:13.5px; font-weight:600; color:var(--ink); text-align:right }

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

@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes pop{ 0%{transform:scale(.4);opacity:0} 70%{transform:scale(1.14)} 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} }
@keyframes previewIn{ from{opacity:0;transform:translateY(14px) scale(.97)} to{opacity:1;transform:none} }
@keyframes leafSway{
  0%,100%{ transform:rotate(0deg) translateY(0) }
  50%    { transform:rotate(5deg) translateY(-10px) }
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(111,176,105,.55) }
  70% { box-shadow:0 0 0 10px rgba(111,176,105,0) }
  100%{ box-shadow:0 0 0 0 rgba(111,176,105,0) }
}
@keyframes loupe{
  0%,100%{ transform:translate(-46px,-28px) scale(1) }
  25%    { transform:translate(44px,-16px) scale(1.1) }
  50%    { transform:translate(30px,30px)  scale(1.1) }
  75%    { transform:translate(-38px,22px) scale(1.1) }
}

/* Le glissement est porté par .main (rogné par .screen) : translater l'écran
   entier allongerait la page 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; animation-iteration-count:1 !important; transition-duration:.001ms !important }
}

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

@media (max-width:600px){
  .screen{ padding:0 18px }

  /* La marque et le badge doivent tenir sur une seule ligne. */
  .hdr{ flex-wrap:nowrap; gap:10px }
  .hdr__kicker{ display:none }

  .trust{
    display:grid; grid-template-columns:1fr 1fr; gap:14px 10px;
    padding:14px 0 20px;
  }
  .trust__n{ font-size:18px }
  .trust__l{ font-size:11.5px; text-align:center }

  h1{ font-size:25px !important }
  h1.h1--xl{ font-size:27px !important }
  h1.h1--sm{ font-size:22px !important }
  .lede{ font-size:14px }

  .opts--cards{ gap:11px }
  .opts--grid2{ grid-template-columns:1fr; gap:10px }
  /* Les dimensions restent sur deux colonnes : compactes, et l'aperçu doit
     rester visible sans faire défiler. */
  .opts--dim2{ grid-template-columns:1fr 1fr !important; gap:9px }
  .opts--photo{ gap:11px }

  .opt__cap{ padding:11px 12px 13px }
  .opt__title{ font-size:16px }
  .opt__desc{ font-size:12.5px; margin-top:3px }
  .opt--row{ gap:11px; padding:12px 13px }
  .opt--row-lg{ gap:12px; padding:13px 14px }
  .opt--plain{ padding:15px 16px; font-size:16px }
  .opt__icon{ width:38px; height:38px; border-radius:11px }
  .opt--dim{ padding:13px 10px }
  .opt__num{ font-size:17px }

  .preview{ max-width:208px; margin-top:16px }

  .code{ gap:9px }
  .code input{ width:52px; height:58px; font-size:23px }

  .hdr{ padding:14px 0 12px }
  .hdr__badge{ font-size:12px; padding:7px 12px }
  .hdr__mark{ width:34px; height:34px; border-radius:11px }
  .hdr__name{ font-size:17px }

  /* Chaque question doit tenir dans l'écran d'un téléphone sans défilement. */
  .main,
  .screen--top .main,
  .screen--wide .main{ padding-top:18px }
  .opts{ gap:10px; margin-top:16px }
  .opts--photo,.opts--cards,.opts--grid2{ margin-top:16px }
  .back{ margin-top:10px }
  .note--desktop{ display:none }
  .ticker{ font-size:12.5px; padding:10px 15px; gap:10px; margin-bottom:12px }
  .ticker__dot{ width:24px; height:24px }
  .gallery{ max-width:320px; gap:9px; margin-top:20px }
  .card{ padding:22px 20px; border-radius:20px }
  .secure span{ font-size:12px }
}