/* ─────────────────────────────────────────────────────────────────────────
   Pipelis — page de réservation (/waitlist)

   Feuille autonome, séparée de site.css. Deux raisons :

     1. Tant que l'application n'est pas ouverte, cette page reçoit TOUT le
        trafic. Lui faire charger les 32 Ko du site marketing (tarifs,
        calculateur, témoignages, duel avant/après) pour afficher un titre et
        un champ email, c'est payer le premier rendu au prix fort sur la seule
        page qui doit convertir.
     2. Le monde visuel n'est pas le même. Le site marketing empile des
        cartes ; ici il n'y en a aucune — une colonne, des filets, un seul
        accent. Deux systèmes dans un même fichier finissent toujours par
        déteindre l'un sur l'autre.

   Les couleurs sont celles de site.css : c'est la même marque. Si l'une
   bouge, l'autre doit bouger.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Switzer"; font-style: normal; font-weight: 400;
  font-display: swap; src: url(fonts/switzer-400.woff2) format("woff2");
}
@font-face {
  font-family: "Switzer"; font-style: normal; font-weight: 500;
  font-display: swap; src: url(fonts/switzer-500.woff2) format("woff2");
}
@font-face {
  font-family: "Switzer"; font-style: normal; font-weight: 600;
  font-display: swap; src: url(fonts/switzer-600.woff2) format("woff2");
}
@font-face {
  font-family: "Switzer"; font-style: normal; font-weight: 700;
  font-display: swap; src: url(fonts/switzer-700.woff2) format("woff2");
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url(fonts/geist-mono.woff2) format("woff2");
}

:root {
  --bg:        #0c0c12;
  --surface:   #15151d;
  --surface-2: #1d1d27;
  --line:      #303040;
  --line-fine: #232330;
  /* Les champs se voient plus que les filets : un cadre qu'on devine à peine
     est joli en maquette et coûte des inscriptions en vrai. On reste sous les
     3:1 que demanderait un contour seul — c'est le remplissage, le texte
     d'exemple et l'anneau de focus qui identifient le champ, pas le trait. */
  --bord-champ: #4a4a5e;

  /* Trois niveaux de texte seulement, tous au-dessus de 4,5:1 sur le fond.
     Le gris à 3:1 des maquettes sombres ne se lit pas en plein soleil sur un
     téléphone — et c'est là que cette page est ouverte. */
  --ink:   #f3f3f5;
  --ink-2: #b2b2c0;
  --ink-3: #9595a5;

  --accent:      #a5a0ff;
  --accent-vif:  #b8b4ff;
  --accent-soft: rgba(165, 160, 255, 0.12);

  /* Le second accent, comme sur le reste du site : l'offre et l'urgence. */
  --chaud:      #ffa94d;
  --chaud-soft: rgba(255, 169, 77, 0.12);
  --chaud-fil:  rgba(255, 169, 77, 0.34);
  --encre-btn:   #131320;

  --ok: #6fdcbe;
  --ko: #ff8a82;

  --col:   680px;   /* la colonne de lecture */
  --large: 880px;   /* la seule chose qui dépasse : la preuve produit */

  --font: "Switzer", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --sortie: cubic-bezier(0.16, 1, 0.3, 1);

  /* Hauteur de la barre du haut, bordure comprise. L'accroche plein écran s'en
     retranche : sans ça, elle dépasse d'exactement cette hauteur et laisse une
     bande vide sous le formulaire. */
  --barre-h: 63px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  overflow-x: clip;
  /* Les surfaces que le navigateur dessine à notre place font partie du
     design : une barre de défilement gris système sur une page noire se voit
     autant qu'une faute de typo. */
  scrollbar-color: #2c2c32 transparent;
  scrollbar-width: thin;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

::selection  { background: rgba(165, 160, 255, 0.26); }
a            { color: inherit; text-decoration: none; }
img, svg     { display: block; max-width: 100%; }
input, button, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 { font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.col   { max-width: var(--col);   margin: 0 auto; padding: 0 22px; }
.large { max-width: var(--large); margin: 0 auto; padding: 0 22px; }

/* ─── Entrée ──────────────────────────────────────────────────────────────
   Un seul moment animé sur toute la page, et il ne joue qu'au chargement :
   le contenu monte de 8 px, décalé de 60 ms en 60 ms. Pas d'apparition au
   défilement — répétée à chaque section, elle ne dit plus rien et retarde la
   lecture de ce qu'on est venu lire. */

@keyframes monte {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.monte {
  animation: monte 0.62s var(--sortie) backwards;
  animation-delay: calc(var(--d, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .monte { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ─── Barre du haut ─────────────────────────────────────────────────────── */

.barre {
  border-bottom: 1px solid var(--line-fine);
  background: rgba(10, 10, 11, 0.86);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.barre-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--barre-h) - 1px);   /* la bordure de .barre complète */
}
.logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 500; letter-spacing: -0.02em;
}
.logo-marque {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--accent); color: var(--encre-btn);
  font-size: 13px; font-weight: 700; line-height: 22px; text-align: center;
}

/* ─── Boutons ─────────────────────────────────────────────────────────────
   Deux formes, pas plus : le plein pour l'action de la page, le filet pour
   tout le reste. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: 9px;
  font-size: 14.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn-plein {
  background: var(--accent); color: var(--encre-btn); font-weight: 600;
}
.btn-plein:hover  { background: var(--accent-vif); }
.btn-plein:active { transform: translateY(0.5px); }
.btn-filet {
  border-color: var(--line); color: var(--ink); background: transparent;
}
.btn-filet:hover { border-color: #35353c; background: var(--surface); }
.btn-petit { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 8px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ─── Accroche ──────────────────────────────────────────────────────────── */

.accroche { padding: clamp(56px, 11vw, 104px) 0 0; }

/* Le texte de l'accroche partage la marge gauche de la preuve produit.
   Auparavant il vivait dans .col (680 px) tandis que la maquette occupait
   .large (880 px) : deux blocs centrés de largeurs différentes, donc deux
   bords gauches distants de 100 px. Sur une composition alignée à gauche,
   ce décalage ne se lit pas comme une intention, il se lit comme un défaut.
   La colonne de lecture est conservée — mais par la mesure du texte, pas par
   la largeur du conteneur. */
/* Le seuil est celui à partir duquel la colonne de lecture cesse de remplir
   l'écran (680 px + 2 × 22 de gouttière) : c'est exactement là que son bord
   gauche commence à s'écarter de celui de la preuve. Le fixer plus haut
   laissait la bande 730–940 px désalignée. */
@media (min-width: 730px) {
  .accroche > .col { max-width: var(--large); }
  /* La mesure est portée par le texte, jamais par le conteneur : le formulaire
     et le bloc « ta place » gardent la largeur que leur composition demande.
     Un sélecteur en `> *` les élargirait aussi — un champ email de 680 px de
     large, c'est le genre de dégât qu'on ne voit qu'après. */
  .accroche h1,
  .accroche .sous,
  .accroche .compteur { max-width: 680px; }
}
.accroche h1 {
  font-size: clamp(35px, 5.6vw, 57px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}
.accroche h1 em { font-style: normal; color: var(--accent); }
.accroche .sous {
  margin-top: 20px;
  max-width: 33em;
  font-size: 17px;
  line-height: 1.58;
  color: var(--ink-2);
}
.accroche .sous strong { color: var(--ink); font-weight: 500; }

/* ─── Le champ ────────────────────────────────────────────────────────────
   Champ et bouton dans le même cadre : l'œil voit une seule chose à faire.
   Le cadre s'allume au focus, ce qui économise un anneau de plus autour du
   champ intérieur. */

.form-attente { margin-top: 30px; max-width: 470px; }

.rangee {
  display: flex; gap: 6px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--bord-champ);
  border-radius: 13px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.rangee:focus-within {
  border-color: #6f6ab8;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.champ {
  flex: 1; min-width: 0;
  height: 46px; padding: 0 12px;
  background: transparent; border: 0; outline: none;
  font-size: 15.5px; caret-color: var(--accent);
}
.champ::placeholder { color: var(--ink-3); }
.rangee .btn { height: 46px; flex: none; }

.note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-3);
  max-width: 40em;
}
.erreur {
  margin-top: 10px; font-size: 13px; color: var(--ko);
}
.erreur[hidden] { display: none; }

/* Compteur : une preuve, pas une décoration. Les chiffres sont en mono
   tabulaire pour ne pas changer de largeur quand ils bougent. */
.compteur {
  display: flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.compteur[hidden] { display: none; }
.pastille {
  width: 5px; height: 5px; border-radius: 50%; background: var(--ok); flex: none;
}

/* ─── Place obtenue ───────────────────────────────────────────────────────
   Le formulaire disparaît, ce bloc prend exactement sa place. */

.place[hidden], .form-attente[hidden], .bas-cta[hidden] { display: none; }

.place { margin-top: 30px; max-width: 470px; }
.place-titre {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--ok);
  font-weight: 500;
}
.place-rang {
  margin-top: 12px;
  font-family: var(--mono); font-size: 46px; font-weight: 500;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  line-height: 1;
}
.place-rang span { color: var(--ink-3); font-size: 26px; margin-right: 4px; }
.place-note { margin-top: 12px; font-size: 14px; color: var(--ink-2); }

.bloc {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.bloc-titre { font-size: 14px; font-weight: 500; }
.bloc-note  { margin-top: 5px; font-size: 13px; color: var(--ink-2); }

.lien-rangee { display: flex; gap: 6px; margin-top: 14px; }
.lien-rangee input {
  flex: 1; min-width: 0; height: 42px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--bord-champ); border-radius: 9px;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
  outline: none;
}
.lien-rangee .btn { height: 42px; }
.partages { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.partages .btn { flex: 1; min-width: 104px; height: 38px; font-size: 13px; }
.filleuls { margin-top: 13px; font-size: 12.5px; color: var(--ink-3); }
.filleuls b { color: var(--accent); font-weight: 500; }
.filleuls[hidden] { display: none; }

/* Le profil est demandé APRÈS l'inscription : avant, chaque question posée
   entre la promesse et le bouton coûte des inscriptions. */
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.puce {
  height: 34px; padding: 0 12px;
  background: transparent; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.puce:hover { color: var(--ink); border-color: #35353c; }
.puce[aria-pressed="true"] {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.puces[data-fige="oui"] .puce { pointer-events: none; }
.puces[data-fige="oui"] .puce:not([aria-pressed="true"]) { opacity: 0.4; }

/* ─── Preuve produit ──────────────────────────────────────────────────────
   La seule chose de la page qui dépasse la colonne de lecture. Le cadre est
   le même filet que partout ailleurs : l'image porte l'échelle, pas l'ombre. */

.preuve { margin-top: clamp(56px, 9vw, 88px); }
.preuve figure {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); overflow: hidden;
}
.preuve img { width: 100%; height: auto; }
.preuve figcaption {
  margin-top: 12px; font-size: 12.5px; color: var(--ink-3);
}

/* ─── Sections ────────────────────────────────────────────────────────────
   Un filet entre deux idées, pas une carte autour de chacune. */

.section { padding: clamp(52px, 8vw, 78px) 0; }
.section + .section { border-top: 1px solid var(--line-fine); }
.section h2 { font-size: clamp(21px, 3vw, 26px); letter-spacing: -0.028em; }
.section .intro { margin-top: 10px; font-size: 15px; color: var(--ink-2); max-width: 34em; }

.liste { margin-top: 30px; }
.ligne {
  display: grid; grid-template-columns: 34px 1fr; gap: 4px 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line-fine);
}
.ligne:first-child { border-top: 0; padding-top: 0; }
.ligne .num {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  padding-top: 2px; font-variant-numeric: tabular-nums;
}
.ligne-nu h3, .ligne-nu p { grid-column: 2; }
.ligne h3 { font-size: 15.5px; font-weight: 500; letter-spacing: -0.02em; }
.ligne p  { grid-column: 2; font-size: 14.5px; color: var(--ink-2); max-width: 44em; }

@media (max-width: 560px) {
  .ligne { grid-template-columns: 1fr; gap: 4px; }
  .ligne p, .ligne-nu h3, .ligne-nu p { grid-column: 1; }
  .ligne .num { padding-top: 0; }
}

/* ─── FAQ ─────────────────────────────────────────────────────────────── */

.faq { margin-top: 26px; }
.faq details { border-top: 1px solid var(--line-fine); }
.faq details:first-child { border-top: 0; }
.faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 17px 0; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--mono); font-size: 15px; color: var(--ink-3);
  transition: transform 0.2s var(--sortie); flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding-bottom: 18px; font-size: 14.5px; color: var(--ink-2); max-width: 46em; }

/* ─── Rappel du bas ─────────────────────────────────────────────────────── */

.bas-cta { padding: clamp(52px, 8vw, 78px) 0; border-top: 1px solid var(--line-fine); }
.bas-cta h2 { font-size: clamp(21px, 3vw, 26px); }
.bas-cta .form-attente { margin-top: 22px; }

/* ─── Pied de page ──────────────────────────────────────────────────────── */

footer { border-top: 1px solid var(--line-fine); padding: 46px 0 34px; }
.pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-3);
}
.pied a { color: var(--ink-3); }
.pied a:hover { color: var(--ink-2); }
.pied nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ─── Panneau du code d'accès ─────────────────────────────────────────────
   Une boîte de dialogue, parce qu'elle protège vraiment le focus : on tape un
   mot de passe, rien d'autre ne doit pouvoir se glisser entre les deux. */

.voile {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(6, 6, 8, 0.72);
  backdrop-filter: blur(4px);
}
.voile[hidden] { display: none; }
/* Le relief est porté par UNE chose : le filet. Une ombre large sous un
   contour de 1 px ne fait rien sur un fond presque noir — elle n'ajoute que du
   flou autour d'une carte qui a déjà son bord. C'est le voile derrière qui
   détache le panneau. */
.panneau {
  width: 100%; max-width: 384px; padding: 24px;
  background: var(--surface); border: 1px solid var(--bord-champ); border-radius: 14px;
  animation: monte 0.4s var(--sortie);
}
.panneau h2 { font-size: 17px; }
.panneau p  { margin: 9px 0 18px; font-size: 13.5px; color: var(--ink-2); }
.panneau .champ-nu {
  width: 100%; height: 46px; padding: 0 13px;
  background: var(--bg); border: 1px solid var(--bord-champ); border-radius: 10px;
  font-size: 15px; outline: none; caret-color: var(--accent);
}
.panneau .champ-nu:focus { border-color: #6f6ab8; box-shadow: 0 0 0 3px var(--accent-soft); }
.panneau .btn { margin-top: 14px; width: 100%; }
.fermer {
  display: block; width: 100%; margin-top: 14px;
  background: none; border: 0; cursor: pointer;
  font-size: 12.5px; color: var(--ink-3); text-align: center;
}
.fermer:hover { color: var(--ink-2); }

@media (max-width: 560px) {
  .rangee { flex-direction: column; background: transparent; border: 0; padding: 0; box-shadow: none; }
  .rangee:focus-within { box-shadow: none; }
  .champ {
    height: 52px; background: var(--surface);
    border: 1px solid var(--bord-champ); border-radius: 11px; padding: 0 14px;
  }
  .champ:focus { border-color: #6f6ab8; box-shadow: 0 0 0 3px var(--accent-soft); }
  .rangee .btn { height: 50px; width: 100%; }
  .barre-inner { height: 56px; }
}

/* ─── Démonstration de l'extension ────────────────────────────────────────
   Un seul mouvement, joué une fois quand la section arrive à l'écran : la
   liste brute d'un profil concurrent devient la file du jour, notée et triée.
   C'est le geste que la page décrit juste en dessous en trois phrases — le
   montrer coûte moins d'attention que le lire.

   Les lignes gardent une hauteur fixe : c'est ce qui permet au tri final
   d'être un simple translateY, exact au pixel, sans reflow ni saut. */
.demo {
  --h: 44px;
  margin: 30px 0 0; padding: 16px 18px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.demo-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding-bottom: 13px;
  border-bottom: 1px solid var(--line-fine);
}
/* Monospace ici parce que c'est une adresse, pas pour faire technique. */
.demo-source {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-source b { color: var(--ink-2); font-weight: 500; }
/* Le libellé bascule à la fin : la même liste a changé de nature. */
.demo-source .apres { display: none; }
.demo.fini .demo-source .avant { display: none; }
.demo.fini .demo-source .apres { display: inline; }

.demo-badge {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--accent-soft); background: var(--accent-soft);
  color: var(--accent); font-size: 12px; font-weight: 500;
  opacity: 0; transform: translateY(-6px);
}
.demo-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.demo.joue .demo-badge { animation: demoBadge 0.5s var(--sortie) 0.1s forwards; }
@keyframes demoBadge { to { opacity: 1; transform: none; } }

/* ─── Les lignes ──────────────────────────────────────────────────────── */
.demo-liste { list-style: none; margin: 0; padding: 0; position: relative; }
.demo-liste li {
  display: flex; align-items: center; gap: 12px;
  height: var(--h);
  border-bottom: 1px solid var(--line-fine);
  /* Le tri final : chaque ligne rejoint sa place au score. */
  transform: translateY(0);
  transition: transform 0.75s var(--sortie);
}
.demo-liste li:last-child { border-bottom: 0; }
.demo.fini .demo-liste li { transform: translateY(calc(var(--vers) * var(--h))); }

.demo-nom {
  flex: 1 1 auto; min-width: 0; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink-3);
  transition: color 0.4s linear;
}
.demo.joue .demo-nom { color: var(--ink); transition-delay: calc(0.2s + var(--i) * 0.14s); }

.demo-abonnes {
  flex: none; font-family: var(--mono); font-size: 12px;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* Le score n'existe pas tant que l'IA n'est pas passée : il apparaît après. */
.demo-score {
  flex: none; width: 34px; text-align: right;
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  opacity: 0; transform: translateX(5px);
  transition: opacity 0.4s var(--sortie), transform 0.4s var(--sortie);
}
.demo.joue .demo-score {
  opacity: 1; transform: none;
  transition-delay: calc(1.5s + var(--i) * 0.07s);
}
/* Au-dessus de 75, c'est un profil à contacter aujourd'hui. */
.demo-score.haut { color: var(--accent); }

/* Le passage de collecte : un filet qui descend la liste une seule fois. */
.demo-balai {
  position: absolute; left: -18px; right: -18px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
}
.demo.joue .demo-balai { animation: demoBalai 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.15s; }
@keyframes demoBalai {
  0%        { opacity: 0; transform: translateY(0); }
  12%, 88%  { opacity: 1; }
  100%      { opacity: 0; transform: translateY(calc(6 * var(--h))); }
}

.demo-pied {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0; padding-top: 13px;
  border-top: 1px solid var(--line-fine);
  font-size: 13px; color: var(--ink-2);
}
.demo-compte {
  font-size: 17px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .demo { padding: 14px 14px 12px; }
  .demo-badge { display: none; }   /* l'adresse doit rester lisible en entier */
  .demo-abonnes { display: none; }
}

/* Sans mouvement : l'état final, directement. La démonstration reste lisible,
   c'est le trajet qui disparaît. */
@media (prefers-reduced-motion: reduce) {
  .demo-badge, .demo-score { opacity: 1; transform: none; }
  .demo-nom { color: var(--ink); }
  .demo-liste li { transition: none; }
  .demo-balai { display: none; }
}

/* ─── Panneau de connexion ────────────────────────────────────────────────
   Google d'abord, l'email ensuite : c'est l'ordre des taux de réussite, pas
   une préférence esthétique. Un bouton Google qui se cache sous un formulaire
   se rate, et la personne crée un deuxième compte avec la même adresse. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px;
  border: 1px solid var(--bord-champ); border-radius: 10px;
  background: var(--surface-2); color: var(--ink);
  font-size: 14.5px; font-weight: 500;
}
.btn-google:hover { background: #1d1d21; border-color: #4a4a55; }
.btn-google svg { flex: none; }

/* Le séparateur porte son mot au milieu du filet, sans deux div vides. */
.ou {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 !important; font-size: 12px; color: var(--ink-3) !important;
}
.ou::before, .ou::after {
  content: ""; flex: 1; height: 1px; background: var(--line-fine);
}

.panneau .champ-nu + .champ-nu { margin-top: 9px; }

.bascule {
  margin: 14px 0 0 !important; font-size: 13px; color: var(--ink-3) !important;
  text-align: center;
}
.bascule button {
  color: var(--accent); font-size: inherit; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.bascule button:hover { color: var(--accent-vif); }

/* ─── Accroche à graisse variable ─────────────────────────────────────────
   Geist est une fonte variable (axe wght 100–900). Les lettres s'épaississent
   à l'approche du curseur, et retrouvent leur graisse en s'éloignant.

   Technique reprise des composants « Variable Font Proximity » de 21st.dev,
   portée ici en CSS + JS nus : la page est du HTML statique, une dépendance
   React pour un seul titre serait absurde.

   Réglage volontairement discret — 560 au repos, 760 au plus près. Un écart
   plus large donne un titre qui gigote ; on veut qu'il respire. */
.accroche h1 .mot {
  /* Empêche une coupure au milieu d'un mot : chaque lettre étant un élément
     à part, sans ça le titre se briserait n'importe où. */
  display: inline-block; white-space: nowrap;
}
.accroche h1 .l {
  display: inline-block; text-align: center;
  font-variation-settings: "wght" var(--g, 560);
  /* Pas de transition sur la graisse : elle est recalculée à chaque frame par
     le pointeur, une transition ajouterait un retard visible. Elle sert
     seulement au retour au repos, quand le pointeur quitte le titre. */
  transition: font-variation-settings 0.5s var(--sortie);
}
.accroche h1.suit .l { transition: none; }

/* Sans pointeur fin (mobile, tablette) le survol n'existe pas : le titre
   s'écrit alors une fois au chargement, lettre après lettre. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .accroche h1 .l { font-variation-settings: "wght" 560; transition: none; }
}

/* ═══ ACCROCHE PLEIN ÉCRAN ══════════════════════════════════════════════════
   Composition reprise du composant « Waitlist Hero » de 21st.dev : un écran
   entier, le contenu posé en bas, et derrière, des couches qui tournent
   lentement en perspective, dissoutes par un dégradé vers le fond.

   Deux écarts assumés. Le composant d'origine empile trois images hébergées
   sur un CDN tiers : ici, c'est de la géométrie dessinée — un réticule, la
   mire qu'on pose sur un client idéal. Elle est nette à toutes les tailles,
   ne dépend d'aucun serveur, et veut dire quelque chose. Et les confettis
   restent dans la palette de la page : trois teintes, pas cinq. */
.accroche {
  position: relative;
  min-height: calc(100svh - var(--barre-h));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 96px 0 clamp(52px, 9vh, 96px);
  overflow: hidden;
  text-align: center;
}

/* ─── Le réticule ─────────────────────────────────────────────────────── */
.halo { position: absolute; inset: 0; pointer-events: none; perspective: 1200px; }
.halo-scene {
  position: absolute; inset: 0;
  transform: rotateX(16deg); transform-origin: center bottom;
}
.anneaux {
  position: absolute; top: 46%; left: 50%;
  transform-origin: 50% 50%;
  animation: tourne var(--t) linear infinite;
}
.anneaux svg { width: 100%; height: 100%; display: block; }
/* Les trois échelles, du plus lointain au plus proche. Sens alternés : deux
   couches qui tournent ensemble se lisent comme une seule. */
.anneaux.a1 { --t: 96s; width: 1560px; height: 1560px; margin: -780px 0 0 -780px; color: rgba(165, 160, 255, 0.09); }
.anneaux.a2 { --t: 68s; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; color: rgba(165, 160, 255, 0.13); animation-direction: reverse; }
.anneaux.a3 { --t: 46s; width:  620px; height:  620px; margin: -310px 0 0 -310px; color: rgba(165, 160, 255, 0.20); }
@keyframes tourne { to { transform: rotate(360deg); } }

/* Le dégradé noie le bas du réticule dans la page : sans lui, les cercles
   passent derrière le texte et le rendent illisible. */
.voile-bas {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    var(--bg) 14%,
    rgba(10, 10, 11, 0.86) 40%,
    rgba(10, 10, 11, 0.30) 72%,
    transparent 100%);
}

.accroche > .col { position: relative; z-index: 2; }

/* ─── Marque ──────────────────────────────────────────────────────────── */
.sceau {
  width: 54px; height: 54px; margin: 0 auto 26px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: var(--accent); color: var(--encre-btn);
  font-size: 25px; font-weight: 600; letter-spacing: -0.04em;
  box-shadow: 0 10px 34px -12px rgba(165, 160, 255, 0.65);
}

.accroche h1 { margin: 0 auto; max-width: 15ch; }
.accroche .sous { margin: 20px auto 0; max-width: 46ch; text-align: center; }

/* ─── Le champ en pilule ──────────────────────────────────────────────────
   Le bouton vit DANS le champ. C'est un seul objet à viser, pas deux : sur
   un téléphone, une rangée de deux éléments finit toujours par se casser en
   deux lignes, et la promesse se retrouve séparée de son action. */
.pilule { position: relative; height: 62px; margin: 30px auto 0; max-width: 480px; }
.pilule input {
  width: 100%; height: 62px;
  padding: 0 168px 0 26px;
  border: 0; border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 15.5px; caret-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--bord-champ);
  transition: box-shadow 0.22s var(--sortie);
}
.pilule input::placeholder { color: var(--ink-3); }
.pilule input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft);
}
.pilule input:disabled { opacity: 0.7; }
.pilule button[type="submit"] {
  position: absolute; top: 6px; right: 6px; bottom: 6px;
  min-width: 152px; padding: 0 22px;
  border-radius: 999px;
  background: var(--accent); color: var(--encre-btn);
  font-size: 14.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 0.18s, transform 0.12s;
}
.pilule button[type="submit"]:hover { filter: brightness(1.08); }
.pilule button[type="submit"]:active { transform: scale(0.97); }
.pilule button[type="submit"]:disabled { cursor: wait; filter: none; transform: none; }

@media (max-width: 520px) {
  /* Sous 520 px, le bouton mangerait le champ : il repasse dessous. */
  .pilule { height: auto; }
  .pilule input { padding: 0 20px; }
  .pilule button[type="submit"] {
    position: static; width: 100%; height: 52px; margin-top: 9px; min-width: 0;
  }
}

/* ─── Bascule vers la confirmation ────────────────────────────────────────
   Le formulaire bascule sur son axe horizontal et la confirmation prend sa
   place. Le mouvement dit ce qui vient de se passer : c'est le même objet
   qui a changé d'état, pas un message apparu à côté. */
.bascule-zone { position: relative; }
.bascule-face {
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  backface-visibility: hidden;
}
.bascule-zone.fait .pilule { opacity: 0; transform: rotateX(90deg); pointer-events: none; }
.confirme {
  position: absolute; inset: 0; top: 30px;
  height: 62px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ok); color: #06231b;
  font-size: 15.5px; font-weight: 600;
  opacity: 0; transform: rotateX(-90deg); pointer-events: none;
}
.bascule-zone.fait .confirme { opacity: 1; transform: none; }
.confirme svg { width: 19px; height: 19px; }
.confirme .trait {
  stroke-dasharray: 26; stroke-dashoffset: 26;
}
.bascule-zone.fait .confirme .trait { animation: trace 0.42s ease-out 0.3s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }

/* Les ondes : un seul cercle répété trois fois, décalé. */
.onde {
  position: absolute; inset: 0; border-radius: 999px;
  border: 1px solid var(--ok); opacity: 0;
}
.bascule-zone.fait .onde { animation: onde 0.9s ease-out forwards; }
.bascule-zone.fait .onde:nth-child(2) { animation-delay: 0.14s; }
.bascule-zone.fait .onde:nth-child(3) { animation-delay: 0.28s; }
@keyframes onde {
  from { transform: scale(1);    opacity: 0.9; }
  to   { transform: scale(1.35); opacity: 0; }
}

.confettis {
  position: absolute; left: 50%; top: 30px;
  width: 520px; height: 320px; margin-left: -260px;
  transform: translateY(-45%);
  pointer-events: none; z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  .anneaux { animation: none; }
  .bascule-face, .confirme { transition: none; }
  .confirme .trait { stroke-dashoffset: 0; animation: none; }
  .onde { display: none; }
}

/* Rattrapages de l'accroche plein écran : le formulaire n'a plus de largeur
   propre (c'est la pilule qui la porte) et tout est centré. */
.accroche .form-attente { max-width: none; margin-top: 0; }
.accroche .note,
.accroche .erreur { text-align: center; margin-left: auto; margin-right: auto; max-width: 46ch; }
.accroche .compteur { justify-content: center; }
.accroche .place { text-align: left; max-width: 470px; margin-inline: auto; }
.preuve-section { padding-top: 0; }

/* ─── Le compte préparé pendant l'attente ───────────────────────────────
   Le champ de mot de passe partage la rangée du lien de parrainage, mais
   lui se saisit : il lui faut un état de focus et un curseur visibles,
   sinon il a l'air en lecture seule comme son voisin. */

#form-compte input {
  font-family: var(--font); font-size: 14px; color: var(--ink);
  caret-color: var(--accent);
}
#form-compte input::placeholder { color: var(--ink-3); }
#form-compte input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
#form-compte .lien-rangee[hidden] { display: none; }
#form-compte .erreur { margin-top: 10px; }
#compte-fait b { color: var(--ok); font-weight: 500; }

/* L'œil de relecture, posé DANS le champ. Ce mot de passe sera ressaisi
   des semaines plus tard, une fois : le relire au moment où on le choisit
   évite un « mot de passe oublié » le jour de l'ouverture. */
.champ-mdp { position: relative; flex: 1; min-width: 0; display: flex; }
.champ-mdp input { flex: 1; min-width: 0; padding-right: 40px; }
#voir-mdp {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px;
  color: var(--ink-3); cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
#voir-mdp:hover { color: var(--ink); background: var(--surface); }
#voir-mdp svg { width: 16px; height: 16px; }
#voir-mdp[aria-pressed="true"] { color: var(--accent); }

/* Un bouton qui attend le réseau doit le dire : sans ça, un clic sur une
   connexion lente n'a l'air d'avoir rien fait, et on reclique. */
#btn-compte.attend { color: var(--ink-3); cursor: progress; }

/* ═════════════════════════════════════════════════════════════════════════
   LE FOND WARP — et le raccord avec l'esthétique de l'accueil
   ═════════════════════════════════════════════════════════════════════════

   Cette page vivait dans son propre monde : un sceau carré, trois réticules
   qui tournaient, un titre blanc plat. L'accueil, lui, a une nappe animée,
   une pastille d'annonce et un titre en dégradé. Deux pages de la même
   marque, deux mondes — et c'est la page d'entrée qui payait la différence.

   Le shader remplace les réticules : superposer les deux ferait un fond
   qu'on regarde au lieu de lire ce qui est écrit dessus.
   ═════════════════════════════════════════════════════════════════════════ */

.accroche {
  /* `isolation` crée un contexte d'empilement : sans lui, la toile en
     z-index -2 passerait DERRIÈRE le fond du body et ne se verrait pas. */
  position: relative; isolation: isolate; overflow: hidden;
}
/* Rappel pour qui lirait le CSS avant le JS : warp.js pose déjà ces valeurs
   en ligne, parce qu'une toile qui retombe dans le flux fait grandir la page
   sans fin. Les deux se disent la même chose, exprès. */
.warp-toile {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; display: block; pointer-events: none;
}
/* Le fond sous la toile. Il reste visible si WebGL manque, et c'est lui qui
   donne sa couleur au premier rendu, avant la première image du shader. */
.accroche::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background: radial-gradient(110% 80% at 50% 0%, #1b1734 0%, var(--bg) 72%);
}

/* ─── La pastille d'annonce, la même que sur l'accueil ────────────────── */

.accroche .badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  font-size: 13px; color: var(--ink-2);
}
.accroche .badge svg { width: 14px; height: 14px; flex: none; color: var(--chaud); }
.accroche .badge b { color: var(--ink); font-weight: 500; }

/* ─── Le titre en dégradé, comme l'accueil ────────────────────────────── */

.accroche h1.titre-degrade {
  background-image: linear-gradient(to bottom right, #ffffff 30%, rgba(255, 255, 255, 0.42) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Le mot accentué sort du dégradé : c'est le seul endroit du premier écran
   où la couleur de marque apparaît, elle ne doit pas s'éteindre. */
.accroche h1.titre-degrade em {
  font-style: normal; background: none;
  color: var(--accent); -webkit-text-fill-color: var(--accent);
}

/* ─── Le raccord vers le bas ──────────────────────────────────────────── */

/* Le voile existait déjà ; il doit maintenant couvrir le shader, pas des
   anneaux presque transparents. On monte donc son opacité et sa hauteur,
   sinon la nappe se coupe net au milieu de la démonstration produit. */
.voile-bas {
  z-index: -1;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in oklab, var(--bg) 55%, transparent) 52%,
    var(--bg) 100%);
}

/* Sur un petit écran, la nappe occupe proportionnellement plus de place pour
   moins de texte : on la resserre, sinon elle domine la page. */
@media (max-width: 720px) {
  .accroche::before { background: radial-gradient(130% 60% at 50% 0%, #1b1734 0%, var(--bg) 78%); }
}

/* Sur un téléphone, la pastille tient sur deux lignes et son texte se centre
   mal autour de l'étoile. On raccourcit plutôt que de laisser filer : c'est
   une annonce, pas une phrase. */
@media (max-width: 560px) {
  .accroche .badge { padding: 6px 13px 6px 11px; font-size: 12px; gap: 7px; }
  .accroche .badge .long { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   CE QUE ÇA DONNE — trois rangées, trois chiffres
   ═════════════════════════════════════════════════════════════════════════

   Une tuile d'icône, un titre, sa ligne d'explication, et à droite une jauge
   qui porte le chiffre. Les chiffres viennent du produit : le score
   d'intention du moteur, le rituel visé, la limite du plan Starter. Aucun
   n'est un résultat client, et la note sous la liste le dit — c'est une
   promesse du manifeste, pas une précaution juridique.
   ═════════════════════════════════════════════════════════════════════════ */

.section-dit {
  margin-top: 10px; font-size: 15px; color: var(--ink-2); max-width: 52ch;
}

.resultats { list-style: none; margin-top: 26px; display: grid; gap: 12px; }

.resultat {
  display: grid; align-items: center; gap: 18px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 20px 22px;
  border: 1px solid var(--line-fine); border-radius: 18px;
  background: var(--surface);
  transition: border-color 0.24s ease, background 0.24s ease, transform 0.24s ease;
}
.resultat:hover {
  border-color: var(--line); background: var(--surface-2);
  transform: translateY(-2px);
}

.resultat-tuile {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line-fine);
  color: var(--ink-2);
  transition: color 0.24s ease, border-color 0.24s ease;
}
.resultat:hover .resultat-tuile { color: var(--accent); border-color: rgba(165, 160, 255, 0.34); }
.resultat-tuile svg { width: 24px; height: 24px; }

.resultat-dit h3 { font-size: 17px; letter-spacing: -0.02em; }
.resultat-dit p {
  margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-3);
  max-width: 58ch;
}

/* ─── La jauge ────────────────────────────────────────────────────────────
   L'arc est la valeur, pas une décoration : 92 sur 100 remplit 92 % du
   cercle, dix minutes sur une heure en remplissent un sixième, et la limite
   du plan le remplit entièrement. Un arc arbitraire ferait joli et mentirait. */

.jauge {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 84px; height: 84px;
}
.jauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.jauge circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.jauge-fond { stroke: var(--surface-2); }
.jauge-arc {
  stroke: var(--accent);
  /* L'arc se dessine au premier regard : `reveal` pose la classe quand la
     rangée entre dans le champ (ui.js n'est pas chargé ici, c'est le petit
     observateur en bas de page qui s'en occupe). */
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
/* L'unité passe SOUS le chiffre. Côte à côte, « 2 500 /mois » déborde du
   cercle — et un chiffre qui sort de sa jauge se lit comme un défaut, pas
   comme une valeur. Empilé, n'importe quelle longueur tient. */
.jauge b {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  line-height: 1.05;
  font-size: 19px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink);
}
.jauge i {
  font-style: normal; font-size: 10px; font-weight: 500;
  color: var(--ink-3); letter-spacing: 0.01em;
}
.resultat:last-child .jauge b { font-size: 16.5px; }

.resultats-note {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line-fine);
  font-size: 13px; line-height: 1.6; color: var(--ink-3); max-width: 64ch;
}

@media (max-width: 640px) {
  /* Sur un téléphone, la jauge passe sous le texte plutôt que de lui voler
     la moitié de la largeur : une explication à vingt caractères par ligne
     ne se lit pas. */
  .resultat { grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; padding: 18px; }
  .jauge { grid-column: 2; width: 68px; height: 68px; justify-self: start; }
  .jauge b { font-size: 17px; }
  .resultat-tuile { width: 44px; height: 44px; border-radius: 12px; }
  .resultat-tuile svg { width: 21px; height: 21px; }
}

/* ─── Le pied de page complet ─────────────────────────────────────────────
   Le même que sur le reste du site : une colonne de marque et trois colonnes
   de liens. Il remplace la ligne unique qu'avait cette page — une page qui se
   termine sur quatre liens en petit donne l'impression d'un site qui n'existe
   pas encore. Celui-ci dit qu'il y a un produit derrière. */

.pied-large {
  display: grid; gap: 34px;
  padding-bottom: 34px; margin-bottom: 26px;
  border-bottom: 1px solid var(--line-fine);
}
@media (min-width: 760px) {
  .pied-large { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 44px; }
}
.pied-marque .logo { font-size: 16px; }
.pied-marque p {
  margin-top: 13px; font-size: 13px; line-height: 1.6;
  color: var(--ink-3); max-width: 34ch;
}
.pied-col h3 {
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-2);
}
.pied-col ul { list-style: none; margin-top: 14px; display: grid; gap: 10px; }
.pied-col a {
  font-size: 13.5px; color: var(--ink-3);
  transition: color 0.16s ease;
}
.pied-col a:hover { color: var(--ink); }

/* ─── Le formulaire à deux champs ─────────────────────────────────────────
   Réserver, c'est maintenant créer un compte : il faut donc deux champs et un
   bouton dessous. La pilule ne porte plus de bouton à l'intérieur — son
   rembourrage à droite était calculé pour lui, on le reprend. */

.champs { display: grid; gap: 12px; max-width: 480px; margin: 30px auto 0; }
.champs .pilule { margin: 0; max-width: none; }
.champs .pilule input { padding: 0 26px; }
/* Le champ de mot de passe garde la place de son œil. */
.champs .pilule:has(.oeil) input { padding-right: 56px; }

.oeil {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%; background: none;
  color: var(--ink-3); cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.oeil:hover { color: var(--ink-2); background: rgba(255, 255, 255, 0.05); }
.oeil:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.oeil svg { width: 19px; height: 19px; }
/* Barré quand le mot de passe est visible : l'icône dit l'état, pas l'action. */
.oeil[aria-pressed="true"] { color: var(--accent); }
.oeil[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 9px; right: 9px; top: 50%;
  height: 1.6px; background: currentColor; transform: rotate(-38deg);
}

.btn-large {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 480px; margin: 12px auto 0;
  height: 58px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600;
}

/* ─── La bascule de confirmation ──────────────────────────────────────────
   Elle recouvrait une pilule unique de 62 px ; le formulaire en fait
   maintenant trois fois plus. On bascule donc le FORMULAIRE entier et on
   centre la confirmation dessus, sans hauteur codée en dur. */

.bascule-zone.fait .form-attente { opacity: 0; transform: rotateX(90deg); pointer-events: none; }
.confirme {
  top: 50%; bottom: auto;
  transform: translateY(-50%) rotateX(-90deg);
  max-width: 480px; margin: 0 auto;
}
.bascule-zone.fait .confirme { transform: translateY(-50%); }

/* Sur un petit écran, le texte d'exemple du mot de passe touchait l'œil :
   on le resserre plutôt que de le tronquer. */
@media (max-width: 430px) {
  .champs .pilule input { font-size: 14.5px; padding-left: 20px; }
  .champs .pilule:has(.oeil) input { padding-right: 50px; }
}