/* Circut — LA MODALE D’INSCRIPTION, feuille dédiée (17/08/2026).

   Extraite de landing.css le jour où la modale est devenue COMMUNE à toutes
   les pages du chantier (décision de Jonathan) : son markup vit dans
   `site-drafts/_waitlist.html` et se propage par `sync_site_chrome.py`, ses
   styles vivent ici, et les deux voyagent ensemble. Les laisser dans
   landing.css aurait obligé chaque page à charger toute la landing pour
   afficher une boîte de dialogue.

   Asset du CHANTIER, comme carousel.css : la préview le sert sans rien
   copier dans site/. À LA PROMOTION, le déplacer dans site/assets/css/ AVEC
   les pages qui le chargent — une page publiée sans lui afficherait une
   modale nue.

   LA PAGE D’ATTENTE EN PRODUCTION NE LE CHARGE PAS : elle garde ses styles
   inline, volontairement (règle du 02/08 — la prod ne dépend de rien du
   chantier). Les deux jeux sont donc jumeaux : une évolution ici se reporte
   là-bas, et réciproquement. */

/* ── Modale waitlist — MÊMES classes/ids que la page d’attente (waitlist.js
      est partagé tel quel). Styles copiés du <style> inline de la page
      d’attente ; si le wizard y évolue, reporter ici. ── */
.waitlist-cta-done { font-size: 1.1rem; font-weight: 600; color: var(--accent-text); }
.waitlist-dialog {
  /* FIXE, et centré dans le viewport (17/08/2026 — bug relevé par Jonathan :
     « ça scrolle tout en haut de la page »). Le `position: relative` d’origine
     ancrait la barre de progression, mais il ÉCRASAIT le `position: fixed` que
     le navigateur donne à `dialog:modal` — une règle d’auteur bat celle du
     navigateur quelle que soit sa spécificité. La modale s’ouvrait donc DANS LE
     FLUX, à l’endroit où sa balise vit dans le document, c’est-à-dire en haut
     de page : mesuré à y = 260 px du document, soit 5 231 px AU-DESSUS du
     viewport quand on cliquait le CTA de fin. Le focus du premier champ y
     traînait la page entière, d’où le symptôme.
     `inset: 0` + `margin: auto` = le centrage natif d’une modale, et le
     `position: fixed` reste un ancrage pour `.waitlist-progress`. Le
     défilement de la page ne bouge plus d’un pixel. */
  position: fixed; inset: 0; margin: auto;
  /* Le pendant OBLIGATOIRE du passage en fixe : une modale du flux pouvait
     déborder vers le bas, la page défilait pour rattraper. Fixe, ce qui
     dépasse serait COUPÉ, donc inatteignable. Mesuré étape par étape (une
     seule visible à la fois — les mesurer toutes affichées gonfle le
     chiffre) : la plus haute est « outil », 557 px, soit 589 px de fenêtre
     avec ses marges. En dessous, il FAUT pouvoir atteindre le bas.
     `auto` remplace le `hidden` d’origine : il clippe pareil (le rayon des
     coins est préservé), il ajoute seulement de quoi descendre. */
  max-height: calc(100dvh - 32px); overflow: auto;
  border: 0; border-radius: var(--radius);
  background: var(--bg-card); color: var(--text);
  box-shadow: var(--shadow-lg);
  padding: 34px 28px 26px;
  width: min(430px, calc(100vw - 40px));
}
.waitlist-dialog::backdrop { background: rgba(10, 10, 18, 0.5); }
.waitlist-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent-soft);
}
.waitlist-progress-fill {
  height: 100%; width: 0;
  background: var(--accent);
  transition: width 0.25s ease;
}
/* RETOUR ET FERMER SONT DES ICÔNES SVG, PAS DES CARACTÈRES (03/10/2026,
   relevé par Grégoire : « le ← sort dans une fonte à empattements »). Un
   `<button>` qui ne déclare pas sa police prend celle du NAVIGATEUR : Arial
   dans Chrome (mesuré), la police système dans Safari. Le « ← » y sortait
   donc dans le dessin classique d’Arial, et le « ✕ », absent d’Arial, dans
   une police de secours : deux glyphes, deux polices, aucune choisie. Les
   deux icônes sont dessinées ensemble, au même trait (1,4 px, extrémités
   nettes comme les chevrons du site ; 1,6 pesait plus que les anciens
   glyphes) et à la même hauteur (9 px d’encre), centrées par la grille :
   rien n’y dépend plus d’une police. Leur nom accessible vient de
   `aria-label` (posé par le script de la modale). */
.waitlist-close, .waitlist-back {
  position: absolute; top: 10px;
  width: 30px; height: 30px;
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--text-2);
  cursor: pointer;
}
.waitlist-close svg, .waitlist-back svg { display: block; width: 16px; height: 16px; }
.waitlist-close { right: 10px; }
.waitlist-back { left: 10px; }
.waitlist-close:hover, .waitlist-back:hover { background: var(--bg-2); color: var(--text); }
.waitlist-step { display: flex; flex-direction: column; gap: 12px; }
.waitlist-title {
  font-family: var(--font-head); font-size: 1.28rem;
  margin: 0 0 6px; padding: 0 22px; text-align: center;
}
.waitlist-input {
  width: 100%;
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 15px;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.waitlist-input::placeholder { color: var(--text-2); opacity: 0.7; }
.waitlist-input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.waitlist-input[aria-invalid="true"] { border-color: light-dark(#b3261e, #ff8078); }
.waitlist-btn { border: 0; cursor: pointer; justify-content: center; }
.waitlist[aria-busy="true"] .waitlist-btn,
.waitlist[aria-busy="true"] .waitlist-option { opacity: 0.6; pointer-events: none; }
.waitlist-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.waitlist-note { margin: 2px 0 0; font-size: 0.88rem; color: var(--text-2); text-align: center; }
.waitlist-options { display: flex; flex-direction: column; gap: 8px; }
.waitlist-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.waitlist-option {
  font: inherit; font-size: 0.94rem; color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; text-align: left; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.waitlist-option:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.waitlist-option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.waitlist-option strong { font-weight: 650; }
.waitlist-otherrow { display: flex; gap: 8px; margin-top: 10px; }
.waitlist-otherrow .waitlist-input { flex: 1; width: auto; }
.waitlist-done { margin: 6px 0 14px; font-size: 1.05rem; font-weight: 600; color: var(--accent-text); text-align: center; }
.waitlist-error { margin: 14px 0 0; font-size: 0.92rem; color: light-dark(#b3261e, #ff8078); text-align: center; }
.waitlist-textarea { min-height: 84px; resize: vertical; line-height: 1.45; }

/* `.hidden` VOYAGE AVEC LA MODALE, et ce n’est pas un doublon de confort
   (17/08/2026) : le wizard ne montre qu’une étape à la fois en posant cette
   classe sur les cinq autres. Elle n’était déclarée que dans landing.css et
   dans le style inline de la page d’attente : sur une page qui ne charge ni
   l’un ni l’autre, les six étapes s’empilaient — modale de 868 px au lieu de
   381, mesurée sur /switch/. Une feuille qui porte un composant doit porter
   tout ce dont il dépend. landing.css garde la sienne pour ses propres
   usages (le CTA du hero et son « merci ») : même déclaration, même effet,
   aucune des deux ne peut trahir l’autre. */
.hidden { display: none; }