/* ============ Comptes vérifiés (S7, spec 2026-09-23) — styles .cv-* ============
   Écrans publics #/inscription et #/demande-acces (dans le rideau, classes de renderLogin),
   section « Vérification et compte » du profil, section « À traiter » de l'écran Comptes.
   Jetons uniquement (aucune couleur en dur) : lisible dans les deux thèmes. */

/* ---------- Écrans publics (rideau) ---------- */
/* Formulaires plus longs que la connexion : le rideau défile ; la carte reste centrée si elle tient. */
.auth-gate:has(.cv-carte){align-items:flex-start; overflow-y:auto; overscroll-behavior:contain}
.cv-carte{max-width:440px; margin-block:auto}
.cv-champ > label{font-size:.7rem; color:var(--text-2); letter-spacing:.05em; text-transform:uppercase}
.cv-aide{font-size:.74rem; line-height:1.4; color:var(--text-3)}
.cv-fichier{height:auto; min-height:44px; padding:9px 12px; font-size:.84rem; line-height:1.3; max-width:100%}
.cv-fichier::file-selector-button{
  margin-right:10px; padding:6px 12px; border:1px solid var(--line-2); border-radius:var(--r-xs);
  background:var(--surface-2); color:var(--text); font:inherit; cursor:pointer;
}
.cv-zone{height:auto; min-height:84px; padding:10px 13px; line-height:1.45; resize:vertical}
.auth-input[aria-invalid="true"]{border-color:var(--crit-line); box-shadow:0 0 0 2px var(--crit-bg)}
.cv-consent{
  display:flex; align-items:flex-start; gap:10px; min-height:44px; padding:4px 0;
  font-size:.82rem; line-height:1.45; color:var(--text-2); cursor:pointer;
}
.cv-consent input{flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--accent); cursor:pointer}
.cv-consent input[aria-invalid="true"]{outline:2px solid var(--crit-line); outline-offset:2px}
.cv-lien{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
/* Champ piège `website` : hors écran (jamais display:none, que certains robots détectent). */
.cv-piege{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.cv-alt{margin:0; font-size:.82rem; color:var(--text-3); line-height:1.4}
.cv-lien-btn{
  display:inline-flex; align-items:center; min-height:36px; padding:0; border:0; background:none;
  color:var(--accent); font:inherit; font-weight:600; cursor:pointer; text-align:left;
}
.cv-lien-btn:hover{text-decoration:underline; text-underline-offset:2px}
.cv-bascule{align-self:stretch}
.cv-bascule .cv-bascule-btn{flex:1; min-height:40px}
.cv-texte{margin:0; font-size:.84rem; line-height:1.5; color:var(--text-2)}

/* Connexion : lien « Mot de passe oublié ? » sous le champ du mot de passe, et sa page d'aide (brique B1, spec comptes-auth). */
.auth-oublie{margin:-8px 0 -4px; text-align:right; font-size:.8rem; line-height:1.45}
.auth-oublie-link{
  display:inline-flex; align-items:center; min-height:36px;
  color:var(--text-2); text-decoration:underline; text-underline-offset:3px;
}
.auth-oublie-link:hover{color:var(--text)}
.cv-oubli .cv-lien{overflow-wrap:anywhere}

/* Inscription « Devenir directeur » (profil pro § 4) : les trois temps du parcours, en liste numérotée. */
.cv-etapes{margin:0 0 var(--sp-2); padding-left:1.25rem; display:flex; flex-direction:column; gap:6px; font-size:.84rem; line-height:1.5; color:var(--text-2)}
.cv-etapes li::marker{color:var(--accent); font-weight:600}

/* ---------- Profil : « Vérification et compte » ---------- */
.cv-section{display:flex; flex-direction:column; gap:var(--sp-3)}
.cv-section > .sv-ph{margin-bottom:0}
.cv-bloc{gap:var(--sp-3)}
.cv-bloc-titre{margin:0; font-size:.9rem; font-weight:600; color:var(--text)}
.cv-qualifs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.cv-qualif{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0;
  padding:var(--sp-3); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-3);
}
.cv-qualif-tete{display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0}
.cv-qualif-nom{font-size:.9rem; font-weight:600; color:var(--text); overflow-wrap:anywhere}
.cv-qualif-meta{margin:0; font-size:.78rem; color:var(--text-3)}
.cv-form{display:flex; flex-direction:column; gap:var(--sp-3); align-self:stretch; padding-top:var(--sp-2)}
.cv-piece{display:flex; flex-direction:column; gap:var(--sp-3)}
.cv-piece [hidden]{display:none}
/* Profil › « Mot de passe » : trois champs empilés, mesure de lecture (pas de champ de 900 px sur bureau). */
.cv-mdp{max-width:420px}
.cv-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3)}
.cv-actions .profil-submit{margin-top:0}
.cv-etat{margin:0; padding:9px 12px; font-size:.82rem; line-height:1.45; border-radius:var(--r-sm); border:1px solid var(--line-2)}
.cv-etat--attente{color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line)}
.cv-etat--refus{color:var(--crit); background:var(--crit-bg); border-color:var(--crit-line)}
.cv-etat--ok{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line)}
.cv-etat--info{color:var(--text); background:var(--surface-3); border-color:var(--line-2)}
.cv-danger{
  align-self:flex-start; min-height:40px; padding:0 16px; border:1px solid var(--crit-line); border-radius:var(--r-sm);
  background:transparent; color:var(--crit); font-family:var(--font-sans); font-size:.84rem; font-weight:600; cursor:pointer;
  transition:background .15s;
}
.cv-danger:hover{background:var(--crit-bg)}
.cv-danger--plein{background:var(--crit-bg)}
.cv-danger:disabled{opacity:.6; cursor:default}

/* Badge de vérification : point + texte, couleur par état (jamais d'emoji). */
.cv-badge{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:3px 9px; border-radius:999px; border:1px solid var(--line-2);
  font-size:.72rem; line-height:1.35; color:var(--text-2); background:var(--surface-2); overflow-wrap:anywhere;
}
.cv-badge-point{flex:none; width:6px; height:6px; border-radius:50%; background:currentColor}
.cv-badge--attente{color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line)}
.cv-badge--ok{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line)}
.cv-badge--refus{color:var(--crit); background:var(--crit-bg); border-color:var(--crit-line)}

/* ---------- Écran Comptes (admin) : « À traiter » ---------- */
.cv-at-tete{display:flex; align-items:center; gap:10px}
.cv-at-compteur{font-size:.72rem; color:var(--accent); letter-spacing:.08em}
.cv-at-corps{display:flex; flex-direction:column; gap:var(--sp-4)}
.cv-at-groupe{display:flex; flex-direction:column; gap:var(--sp-2)}
.cv-at-liste{display:flex; flex-direction:column; gap:8px}
.cv-at-ligne{
  display:flex; flex-direction:column; gap:10px; min-width:0;
  padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--surface-3);
}
.cv-at-ligne .compte-row-mail{overflow-wrap:anywhere}
.cv-at-details{margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:6px 14px}
.cv-at-detail{display:flex; flex-direction:column; gap:2px; min-width:0}
.cv-at-detail dt{font-size:.66rem; color:var(--text-3); letter-spacing:.06em; text-transform:uppercase}
.cv-at-detail dd{margin:0; font-size:.84rem; color:var(--text); overflow-wrap:anywhere}
.cv-at-actions{gap:8px}
.cv-at-actions .compte-reset, .cv-at-actions .compte-valider{min-height:36px}
.cv-at-manque{font-size:.78rem; color:var(--warn)}
/* BAFD d'un compte animateur : ce que la validation ouvre ; confirmation après décision (profil pro § 4). */
.cv-at-mention{margin:0; font-size:.82rem; line-height:1.45; color:var(--text); padding-left:10px; border-left:3px solid var(--accent)}
.cv-at-annonce{margin:0}
.cv-at-refus{display:flex; flex-direction:column; gap:var(--sp-2)}
.cv-at-refus[hidden]{display:none}
.cv-at-refuses > summary{cursor:pointer; font-size:.84rem; color:var(--text-2); min-height:36px; display:flex; align-items:center}
.cv-at-refuses > .cv-at-liste{margin-top:8px}

@media (max-width:640px){
  .cv-at-ligne{padding:10px 12px}
  .cv-at-details{grid-template-columns:1fr}
  .cv-actions .auth-submit{flex:1 1 auto}
}

/* Bloc « Devenir directeur » : bouton d'import (glyphe + texte) et import déplié dans le bloc. */
.cv-bafd-btn{display:inline-flex; align-items:center; gap:8px}
.cv-bafd-btn svg{width:18px; height:18px; flex:none}
.cv-bafd-hote{align-self:stretch}

/* `hidden` l'emporte toujours sur les display:flex des classes ci-dessus. */
.cv-carte [hidden], .cv-section [hidden], .cv-a-traiter [hidden]{display:none !important}

/* Liste des comptes : un compte refusé est étiqueté (la décision reste dans « À traiter »). */
.compte-role-tag.compte-refuse-tag{color:var(--crit); border-color:var(--crit-line); background:var(--crit-bg)}

/* ---------- Connexion Google (brique B3a, spec comptes-auth § 4.5) ---------- */
/* La zone n'existe dans le DOM que si Google est allumé ; elle reste MASQUÉE tant que le script de Google n'a pas répondu (aucun trou de mise
   en page, aucun message si le script est bloqué). `hidden` l'emporte sur les display:flex ci-dessous (hors .cv-carte aussi : la connexion). */
.cv-google[hidden], .cv-google-attente[hidden], .cv-suppr-ok[hidden], .cv-suppr-google [hidden]{display:none !important}
.cv-google{display:flex; flex-direction:column; gap:10px; min-width:0}
.cv-ou{display:flex; align-items:center; gap:12px; margin:0; font-size:.78rem; line-height:1; color:var(--text-3)}
.cv-ou::before, .cv-ou::after{content:''; flex:1 1 0; height:1px; background:var(--line-2)}
/* Le bouton officiel est un iframe de Google, 200 à 400 px de large : centré, jamais plus large que la carte. */
.cv-google-btn{display:flex; justify-content:center; min-height:44px; max-width:100%; min-width:0; overflow:hidden}
.cv-google-attente{margin:0; text-align:center; font-size:.8rem; line-height:1.4; color:var(--text-3)}
/* Une carte de connexion qui porte la zone Google peut dépasser un écran bas (paysage) : le rideau défile, la carte reste centrée si elle tient. */
.auth-gate:has(.cv-google){align-items:flex-start; overflow-y:auto; overscroll-behavior:contain}
.auth-gate .auth-card:has(.cv-google){margin-block:auto}
/* E-mail de l'étape de consentement : lu, pas modifié. */
.cv-lecture-seule{background:var(--surface-2); color:var(--text-2); cursor:default}
/* Suppression d'un compte sans mot de passe : le bouton Google s'aligne à gauche comme les autres actions du profil. */
.cv-suppr-hote .cv-google-btn{justify-content:flex-start}
.cv-suppr-intro{overflow-wrap:anywhere}
/* Profil › « Définir un mot de passe » (compte sans mot de passe, B3c) : deuxième étape = le bouton Google (nouveau passage, jeton frais), alignée à gauche comme celle
   de la suppression ; Google éteint : le texte « écris à … » seul, aucun champ. `hidden` l'emporte sur les display:flex du formulaire. */
.cv-mdp-definir [hidden]{display:none !important}
.cv-mdp-google{display:flex; flex-direction:column; gap:var(--sp-3); min-width:0}
.cv-mdp-google-intro, .cv-mdp-sans-google{overflow-wrap:anywhere}
.cv-mdp-hote .cv-google-btn{justify-content:flex-start}
.cv-mdp-definir input[readonly]{background:var(--surface-2); color:var(--text-2); cursor:default}

/* Avis à usage unique après la connexion (« Ton ancien mot de passe est désactivé… ») : encart fixe, au-dessus de la navigation basse. */
.cv-avis[hidden]{display:none !important}
.cv-avis{
  position:fixed; z-index:9000; left:50%; transform:translateX(-50%); box-sizing:border-box;
  bottom:calc(var(--nav-bas-h, 0px) + 16px + env(safe-area-inset-bottom, 0px));
  width:min(480px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto;
  display:flex; flex-direction:column; gap:var(--sp-3); padding:14px 16px;
  background:var(--s1); color:var(--text); border:1px solid var(--line-2); border-left:3px solid var(--accent); border-radius:var(--r-md);
  box-shadow:var(--shadow-card), 0 8px 24px var(--ombre);
}
.cv-avis-texte{margin:0; font-size:.88rem; line-height:1.5}
.cv-avis-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-4)}
.cv-avis-action{margin:0; padding:0 18px}
@media (max-width:640px){
  .cv-avis-actions{flex-direction:column; align-items:stretch}
  .cv-avis-fermer{justify-content:center}
}

/* E-mail dormant (brique B4-front, spec comptes-auth § 4.4) : pages `#/reinitialiser` et `#/verifier-email`, formulaire « Mot de passe oublié ? »,
   bandeau « Vérifie ton adresse ». Jetons uniquement ; media-queries après les règles de base. */
.cv-champ-erreur{margin-top:6px}
.cv-oubli-formulaire{display:flex; flex-direction:column; gap:var(--sp-3)}
.cv-oubli-formulaire .cv-etat, .cv-verif-zone .cv-etat, .cv-reinit > .cv-etat{font-size:.88rem}
.cv-verif-zone{display:flex; flex-direction:column; gap:var(--sp-3)}
.cv-verif-zone .cv-lien-btn{align-self:flex-start}

/* Bandeau « Vérifie ton adresse » : en tête de l'application, dans le flux (même place que le bandeau « Simulation »), calme — une ligne de texte,
   deux gestes. Posé avant le premier rendu : rien ne se décale quand les écrans s'affichent. */
.bandeau-verif[hidden]{display:none !important}
.bandeau-verif{
  flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2) var(--sp-4);
  box-sizing:border-box; min-width:0; padding:8px clamp(1rem, 3vw, 2rem);
  background:var(--s2); color:var(--text); border-bottom:1px solid var(--line-2); border-left:3px solid var(--accent);
}
.bv-texte{margin:0; flex:1 1 18rem; min-width:0; font-size:.86rem; line-height:1.45; color:var(--text-2); overflow-wrap:anywhere}
.bv-texte b{margin-right:.5rem; font-weight:600; color:var(--text)}
.bv-actions{display:flex; align-items:center; gap:var(--sp-2) var(--sp-4); flex:0 0 auto}
.bv-btn{
  display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:transparent; color:var(--text); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
}
.bv-btn:hover{background:var(--surface-3)}
.bv-btn:disabled{opacity:.6; cursor:default}
.bv-plus-tard{color:var(--text-2); font-weight:500; font-size:.82rem}
.bv-retour{flex-basis:100%; margin:0; font-size:.82rem; line-height:1.4}
.bv-retour[hidden]{display:none !important}
.bv-retour--ok{color:var(--ok)}
.bv-retour--erreur{color:var(--crit)}
@media (max-width:640px){
  .bandeau-verif{padding-block:10px}
  .bv-actions{flex:1 1 100%; justify-content:space-between}
  .bv-btn{flex:1 1 auto; justify-content:center}
}