/* La boîte de la waitlist des pages /castings/ (CFT-1514).
 *
 * C'est la boîte de /talent/ (talent/v2.css, « .boite* », CFT-1602 et CFT-1635), reprise
 * pour une page qui n'est PAS la scène de /talent/ : les valeurs (couleurs, rayons,
 * espacements, mots) sont les siennes, le préfixe est `cfw-` pour ne rien heurter dans les
 * feuilles du site, et le bouton d'envoi est le `.cf-btn` de styles.css.
 *
 * POURQUOI UNE COPIE ET PAS UN FICHIER PARTAGÉ AVEC /talent/. Le code de la boîte de
 * /talent/ vit dans talent/v2.js, un module de 3500 lignes qui pilote la scène (Lenis, le
 * défilement virtuel du téléphone) et dont la boîte n'est pas séparable sans refonte. La
 * refaire pour la partager toucherait une page publique qui marche. Le plus petit geste
 * sûr : ce fichier et assets/js/waitlist-modal.js, pour les pages qui n'ont pas la scène.
 * castings.selftest.js compare les phrases de confirmation des deux, pour que la copie ne
 * dérive pas en silence. Le jour où /talent/ est refaite, elle peut charger ces deux
 * fichiers et perdre les siens.
 */

.cfw{--cfw-encre:#0A0A0A; --cfw-corps:#3F4750; --cfw-muet:#6B747C; --cfw-teal:#007692;
  --cfw-gris:#F5F6F7; --cfw-blanc:#fff;
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px;
  font-family:Geist,-apple-system,system-ui,"Segoe UI",Roboto,sans-serif}
.cfw[hidden]{display:none}
.cfw *{box-sizing:border-box}

/* La page derrière la boîte ne bouge pas (voir CFT-1635 dans talent/v2.css : sur iPhone,
   « overflow:hidden » ne retient pas un geste qui commence sur le panneau, d'où le garde
   de waitlist-modal.js). */
html.cfw-open, html.cfw-open body{overflow:hidden}

.cfw__fond{position:absolute; inset:0; background:rgba(8,20,26,.52); opacity:0;
  transition:opacity .3s linear}
.cfw.on .cfw__fond{opacity:1}
.cfw__panneau{position:relative; width:min(520px, 100%); max-height:calc(100vh - 48px);
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y pinch-zoom;
  background:var(--cfw-blanc); border-radius:24px; padding:38px 38px 32px;
  box-shadow:0 30px 80px rgba(8,20,26,.28);
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .28s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.16,1,.3,1)}
.cfw.on .cfw__panneau{opacity:1; transform:none}
.cfw__x{position:absolute; right:16px; top:14px; width:34px; height:34px; border:0;
  background:none; border-radius:50%; cursor:pointer; font-size:24px; line-height:1;
  color:var(--cfw-muet)}
.cfw__x:hover{background:#F0F1F2; color:var(--cfw-encre)}

.cfw__eb{margin:0 0 10px; font-size:13px; letter-spacing:.14em; font-weight:600; color:var(--cfw-teal)}
.cfw__titre{margin:0; font-size:32px; line-height:38px; font-weight:500; letter-spacing:-.03em;
  color:var(--cfw-encre)}
.cfw__titre:focus{outline:none}
.cfw__sous{margin:12px 0 0; font-size:15px; line-height:23px; color:var(--cfw-corps)}
.cfw__note{margin:22px 0 -6px; font-size:13px; line-height:19px; color:var(--cfw-muet)}

.cfw__champ{display:block; margin-top:18px}
.cfw__champ > span{display:block; margin-bottom:7px; font-size:13px; font-weight:500;
  color:var(--cfw-encre)}
.cfw__champ input, .cfw__champ select{width:100%; font:inherit; font-size:15px;
  color:var(--cfw-encre); background:var(--cfw-gris); border:1px solid #E4E8EA;
  border-radius:12px; padding:12px 14px; outline:none}
.cfw__champ input:focus, .cfw__champ select:focus{border-color:var(--cfw-teal);
  box-shadow:0 0 0 3px rgba(0,118,146,.14)}
.cfw__duo{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.cfw__duo .cfw__champ{margin-top:12px}
/* La province ou l'Etat : sa propre rangee, pleine largeur, meme espacement que le duo. */
.cfw__champ--region{margin-top:12px}

/* Loi 25 : sous 14 ans, le consentement vient du parent ou du tuteur. */
.cfw__tuteur{display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:13px;
  line-height:19px; color:var(--cfw-encre); cursor:pointer}
.cfw__tuteur[hidden]{display:none}
.cfw__tuteur input{flex:0 0 auto; width:18px; height:18px; margin:1px 0 0; accent-color:var(--cfw-teal)}

.cfw__envoi{margin-top:24px; width:100%; height:52px; justify-content:center}
.cfw__envoi[disabled]{opacity:.6; cursor:default}
.cfw__retour{margin-top:22px}
.cfw__consent{margin:12px 0 0; font-size:12.5px; line-height:18px; color:var(--cfw-muet)}
.cfw__consent a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.cfw__consent a:hover{color:var(--cfw-encre)}
.cfw__etat{margin:14px 0 0; font-size:14px; line-height:20px}
.cfw__etat:empty{margin:0}
.cfw__etat.est-ok{color:var(--cfw-teal)}
.cfw__etat.est-mal{color:#A8452F}

@media (max-width: 560px){
  .cfw{padding:14px}
  .cfw__panneau{padding:30px 22px 26px; border-radius:20px}
  .cfw__titre{font-size:26px; line-height:32px}
  .cfw__duo{grid-template-columns:1fr; gap:0}
}

@media (prefers-reduced-motion: reduce){
  .cfw__fond, .cfw__panneau{transition:none}
}