/* Refonte UI (18/10/2026) — commun à index.html et en/index.html, chargé après le style de la page.
   Corrige l'audit (TRAVAUX/53-refonte-ui/) et pose un rendu plus sobre, type outil financier :
   angles resserrés, aucune ombre au repos, pas de cartes toutes identiques, animations en boucle retirées. */

/* Mouvement : courbes communes. Entrées/sorties = --ease-out, déplacement à l'écran = --ease-in-out, feuille mobile = --ease-drawer. */
:root{
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
}

/* Surfaces du navigateur */
::selection{background:color-mix(in srgb,var(--sun) 38%,transparent);color:var(--ink)}
input,select,textarea{caret-color:var(--sun)}
a{text-underline-offset:.18em;text-decoration-thickness:1px}

/* Angles : boutons et champs presque droits, blocs à 16 px. Les bascules restent en pilule. */
.btn{border-radius:8px}
.diag input,.diag select{border-radius:8px}
.trace,.price div,.vs-card,.cpt,.launch{border-radius:16px}
.final{border-radius:20px}

/* Boutons : retour à l'appui, survol réservé aux souris */
.btn,.ctas .btn{transition:transform 160ms var(--ease-out)}
.btn:hover{transform:none}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-1px)}}
.btn:active{transform:scale(.97)}

/* Haut de page : moins de vide avant « Voir de combien… », soulignement dégagé de la phrase */
.hero-top{min-height:min(calc(100svh - 120px),760px);padding-bottom:96px}
.hero .lead{margin-top:30px}
.scroll-hint{animation:none}
/* Haut de page : entrée courte, le bouton est utilisable en moins de 0,7 s */
.hero h1{animation:heroIn 500ms var(--ease-out) both}
.hero .lead{animation:heroIn 500ms var(--ease-out) 60ms both}
.hero .ctas{animation:heroIn 500ms var(--ease-out) 120ms both}
.hero .proof{animation:heroIn 500ms var(--ease-out) 180ms both}
@keyframes heroIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Le téléphone est un fragment d'interface (data-ui) : son ombre et celle de la notification restent.
   Écran verrouillé en aplat, sans dégradé. */
.phone{box-shadow:0 24px 48px -28px rgba(20,32,43,.5)}
.screen.locked{background:#1E3A55}

/* Texte courant à l'encre pleine ; le gris reste pour les notes */
.hero .lead,.block .intro,.faq details p,.vs-ex{color:var(--ink)}
footer .flow-legal{display:inline-block;max-width:75ch}
.vs-k{text-transform:none;letter-spacing:0;font-size:.95rem;opacity:.8}

/* Étapes : une frise, pas quatre cartes */
.how{gap:0 28px}
.how li{background:none;border-radius:0;padding:18px 0 0;border-top:3px solid var(--line)}
.how li:first-child{border-top-color:var(--sun)}
.how li::before{display:block;width:auto;height:auto;margin:0 0 6px;background:none;border-radius:0;color:var(--muted);font-size:1rem;font-weight:800;place-items:normal}
.how h3{font-size:1.3rem}
.how li p{color:var(--muted)}

/* Tarifs : l'entrée gratuite en aplat sombre, les deux autres sur le fond doux */
.price div.free{background:#14202B;color:#F4F6F9;border:0}
.price div.free p:last-child{color:#C9D3DC}
.price .p{letter-spacing:-.02em}

/* Offre de lancement : fond doux, sans crème */
.launch{background:var(--surface)}
.launch b{color:var(--ink)}

/* Logos : pastilles blanches dans les deux modes (les logos sont dessinés pour le blanc) */
.cl-logo{background:#FFFFFF;border-color:var(--line);border-radius:10px}
.cl-logo.cl-eq{background:none;border:0}
/* Rayures = la part comptée en double : c'est une donnée, pas un décor. taste-skill-ignore */
.cl-ghost{background:repeating-linear-gradient(135deg,#B4233C 0 6px,#8E1B2F 6px 12px);font-size:.8125rem} /* taste-skill-ignore */

/* Étiquette « Calcul » lisible en sombre */
.src b.calc{background:#55636F}

/* Bouton « ? » : 28 px visibles, 44 px touchables */
.line{grid-template-columns:1fr 30px}
.q{width:28px;height:28px;position:relative;font-size:.85rem}
.q::after{content:"";position:absolute;inset:-8px}

/* Formulaire de diagnostic : bouton sur sa ligne, mentions centrées sous le formulaire */
.final .diag .btn{grid-column:1/-1;justify-self:center;white-space:nowrap;min-width:min(100%,340px)}
.final .form-msg,.final .form-legal{max-width:none}
.mode{white-space:nowrap}

/* Pas de vide sous le bouton tant qu'aucun message n'est affiché */
.final .form-msg:empty{min-height:0;margin:-6px 0}

/* Pied de page et FAQ : cibles plus grandes */
footer a{display:inline-block;padding:10px 2px}
.faq details{padding:8px 0}
.faq summary{padding:12px 0}

/* Mobile */
@media (max-width:900px){
  .how li{align-items:flex-start;text-align:left}
  .how li::before{margin-left:0}
  .who .intro,.price div{text-align:left}
  .who h2{text-align:center}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .how li{padding:14px 0 0;border-radius:0}
  .how li::before{width:auto;height:auto;font-size:.9rem;margin-bottom:4px}
  .phone{padding:9px;border-radius:40px}
  .screen{border-radius:32px}
  .feed{padding:14px 10px 18px}
  .row,.tap{font-size:.9rem}
  .row span:last-child,.tap span:last-child{white-space:nowrap}
  .canal-btn{padding:8px 12px;font-size:.9rem}
  .final{padding:40px 20px}
}

/* Feuille du calcul (mobile) : fond qui suit la feuille, ouverture 400 ms, fermeture 250 ms */
@media (max-width:900px){
  .trace{transition:transform 250ms var(--ease-drawer)}
  .trace.open{transition-duration:400ms}
  .sheet-bg{opacity:0;transition:opacity 250ms var(--ease-out)}
  .sheet-open .sheet-bg{opacity:1;transition-duration:400ms}
}

/* Mode sombre */
@media (prefers-color-scheme:dark){
  /* Le bloc de réservation reste un aplat sombre, distinct du fond */
  .final{background:#1C2B39;color:#F4F6F9}
  .final .mode[aria-checked="true"],.final .rdv-jour[aria-selected="true"]{background:#F4F6F9;color:#14202B}
  /* « Ce qu'il vous reste vraiment » se détache de la carte Google */
  .vs-real{background:color-mix(in srgb,#B4233C 22%,#0F1923)}
  .price div.free{background:#F4F6F9;color:#14202B}
  .price div.free p:last-child{color:#55636F}
  .phone{box-shadow:none}
}

/* Barre fixe mobile : glisse à l'entrée comme à la sortie, cachée seulement une fois sortie */
@media (max-width:900px){
  .sticky{transition:transform 250ms var(--ease-out),visibility 0s linear 250ms}
  .sticky.show{transition:transform 250ms var(--ease-out),visibility 0s}
  .sticky.show.masque{transition:transform 250ms var(--ease-out),visibility 0s linear 250ms}
}
/* Barre fixe mobile : aplat, sans halo */
.sticky .btn{box-shadow:none}

/* Lignes du calcul : entrée courte la première fois, simple fondu ensuite */
.steps li{transform:translateX(-6px);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.steps.swap li{transform:none;transition:opacity 120ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){.steps li{transform:none}}

/* Apparition au défilement : courte, décalée par groupe */
.reveal{transform:translateY(12px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){.reveal{transform:none}}

/* Ventes en double : même histoire, racontée en 1,7 s, barres en transform */
.claims.anim .cl-fill,.claims.anim .cl-seg{width:var(--w);transform:scaleX(0);transform-origin:left center;transition:transform 500ms var(--ease-out) var(--d,0s)}
.claims.anim.go .cl-fill,.claims.anim.go .cl-seg{transform:none}
.claims.anim .cl-ghost{transition:opacity 300ms var(--ease-out) 1.25s}
.claims.anim.go .cl-ghost{animation:clghost 1.6s ease-in-out 1.6s 2}
.claims.anim .cl-verdict{transition:opacity 400ms var(--ease-out) 1.35s,transform 400ms var(--ease-out) 1.35s}