/* ------------------------------------------------------------------------
 * Formulaire d'inscription des pages catalogue (D-09, 21/09/2026)
 * voir inc/mist-inscription-catalogue.php
 *
 * ⚠️ CE FICHIER NE REDESSINE PAS LE FORMULAIRE. Les classes `card`, `field`,
 * `label`, `input`, `select`, `grid grid-2` et `btn btn-accent` viennent du
 * design system (`mist-ds.css`) et sont celles de la maquette : le formulaire
 * garde exactement l'apparence que la cliente a validée. On n'ajoute ici que
 * ce qui n'existait pas — la case de consentement, la marque d'obligation et
 * la légende.
 *
 * ⚠️ LES NOMS DE CLASSES SONT CEUX DU FORMULAIRE DE CONTACT
 * (`inc/mist-champs-obligatoires.php`, R-CONTACT du 21/09) : le site n'a
 * qu'une seule façon de dire « obligatoire ». Seule la PORTÉE change — ce
 * formulaire-ci n'est pas un `.elementor-form`, les règles de
 * `mist-formulaires.css` ne l'atteignent donc pas.
 * ------------------------------------------------------------------------ */

/* La case de consentement : le texte du DPO fait quinze lignes, la case doit
   rester en haut, alignée sur la première ligne, et cliquable avec son texte
   (d'où le <label> englobant côté PHP). */
.mist-inscription-catalogue .mist-inscription-catalogue-rgpd{
  display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  /* Le pavé RGPD défile : sans hauteur bornée il repousse le bouton d'envoi
     sous la ligne de flottaison, et personne ne le trouve.
     ⚠️ LE CADRE N'EST PAS DÉCORATIF. Sans lui, le texte se coupe en pleine
     phrase et RIEN ne dit qu'il continue : la capture du 21/09 montrait un
     paragraphe tronqué, ce qui se lit comme un défaut de rendu. Le cadre et le
     fond disent « zone qui défile ». */
  max-height:118px;overflow-y:auto;
  border:1px solid var(--line,#E6E8F2);border-radius:var(--r-s,10px);
  background:#FBFBFE;padding:10px 12px;
}
.mist-inscription-catalogue .mist-inscription-catalogue-rgpd input{
  margin-top:3px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--blue,#3E4982);
}
/* 🔴 LA COULEUR EST MESUREE, PAS HERITEE.
   Ce formulaire est une carte BLANCHE posee dans une bande de CTA sombre : les
   classes `small muted` du design system y valent rgb(207,211,238), soit
   1,48:1 sur blanc. Mesure du 21/09, capture regardee : le texte RGPD et la
   legende etaient ILLISIBLES, et les huit criteres de sonde etaient verts.
   #4A5076 (--ink-soft) mesure 7,78:1 — c'est deja la couleur des etiquettes
   du meme formulaire. */
.mist-inscription-catalogue .mist-inscription-catalogue-texte,
.mist-inscription-catalogue .mist-form-legende{
  color:#4A5076;
}
.mist-inscription-catalogue .mist-inscription-catalogue-texte{
  font-size:11.5px;line-height:1.55;display:block;
}

/* 🔴 L'ETAT VIDE — « Aucune session n'est ouverte ». Il n'est PAS dans le
   <form> (aucun formulaire n'est rendu sans session), d'ou une regle hors de
   la portee `.mist-inscription-catalogue`. Sans couleur explicite il herite
   du `color:#fff` de `.cta-band` (mist-ds.css:171) : blanc sur la carte
   blanche. Il portait `muted` jusqu'au 02/10 : 1,48:1, mesure en simulant la
   purge des seances de demonstration. Meme couleur que la legende, 7,78:1. */
.card.mist-inscription-catalogue-vide{
  color:#4A5076;
}

/* #a8331a, et non var(--orange) : l'orange du design system (#E94E1B) ne rend
   que 3,77:1 sur blanc, sous le seuil AA de 4,5:1. Valeur et motif repris de
   `mist-formulaires.css:121` — deux marques d'obligation de couleurs
   différentes sur le même site seraient une incohérence visible. */
.mist-inscription-catalogue .mist-champ-requis{
  color:#a8331a;font-weight:800;margin-left:2px;
}

/* La mention lue par les lecteurs d'écran, retirée de l'écran SANS quitter
   l'arbre d'accessibilité : `display:none` et `visibility:hidden` la
   supprimeraient aussi pour eux, et l'obligation ne reposerait plus que sur un
   symbole et une couleur. */
.mist-inscription-catalogue .mist-obligatoire-texte{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Une astérisque sans légende ne veut rien dire. */
.mist-inscription-catalogue .mist-form-legende{
  margin:0;font-size:12.5px;line-height:1.5;
}

/* Un champ que le serveur a refusé : le contour seul ne suffit pas à ceux qui
   ne distinguent pas le rouge, mais il accompagne le message et le focus. */
.mist-inscription-catalogue [aria-invalid="true"]{
  border-color:#a8331a;box-shadow:0 0 0 3px rgba(168,51,26,.14);
}

/* ⚠️ La bascule à 600 px, pas 767 : c'est la rupture du design system
   (`mist-pages.css:289-310`), et la grille à deux colonnes de ce formulaire
   vient de `mist-ds.css`, qui l'emploie aussi. Un point de rupture différent
   ferait passer les champs sur une colonne à un moment où le reste de la
   section est encore sur deux. */
@media (max-width:600px){
  .mist-inscription-catalogue .mist-inscription-catalogue-rgpd{max-height:150px}
}