/* ═══════════════════════════════════════════════════════════════════════════
   check.css — Vérification d'un membre AAPSL (check.aapsl.fr)

   POURQUOI CE FICHIER PLUTÔT QUE `vitrine/assets/vitrine.css`
   La vitrine porte le même langage visuel, et l'idéal serait de la charger
   telle quelle. Deux raisons l'en empêchent :

     1. LA POLITIQUE DE SÉCURITÉ DU CONTENU. Le `.htaccess` racine impose
        `style-src 'self'` : une feuille servie depuis `aapsl.fr` serait
        REFUSÉE par le navigateur sur `check.aapsl.fr`, et la page s'afficherait
        sans aucun style. Le blocage ne laisse pas de message visible.
     2. LE PÉRIMÈTRE. `vitrine.css` fait mille lignes de navigation, de héros,
        de cartes de matériel et de carte géographique. Une page de
        vérification en emploie une petite part.

   LES JETONS SONT DONC RECOPIÉS, ET CETTE COPIE EST VÉRIFIÉE.
   Recopier des valeurs, c'est ouvrir la porte à la divergence : la vitrine
   change de rouge, la vérification garde l'ancien, et personne ne s'en aperçoit
   avant de voir les deux côte à côte. Un banc d'essai compare donc chaque
   valeur du bloc `:root` — clair et sombre — entre les deux fichiers, et échoue
   si l'une diffère. La duplication reste, mais elle ne peut plus pourrir en
   silence.

   Écrite MOBILE D'ABORD, comme la vitrine : cette page se consulte à quai, sur
   un téléphone, souvent d'une main.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --papier:#F4F6F8; --blanc:#fff; --encre:#101B2D; --rouge:#D81E34;
  --teal:#0E7C7B; --ambre:#E8A22B; --ardoise:#5B6B86; --mut:#5B6B86;
  --ligne:#dfe4ea; --carte:#fff;
  --r:14px;
  --ombre:0 1px 2px rgba(16,27,45,.05), 0 8px 24px -12px rgba(16,27,45,.18);
  --ombre-f:0 2px 4px rgba(16,27,45,.06), 0 18px 40px -18px rgba(16,27,45,.30);
}

@media (prefers-color-scheme: dark){
  :root{
    --papier:#0C1220; --blanc:#0C1220; --encre:#E8EDF5; --mut:#94A3B8;
    --ligne:#1E2A3E; --carte:#131C2E;
    --ombre:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
    --ombre-f:0 2px 4px rgba(0,0,0,.35), 0 18px 40px -18px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--encre);
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  line-height:1.6; font-size:16px; min-height:100vh;
  display:flex; flex-direction:column;
  /* Dernier filet, pas la solution : les causes sont traitées en dessous. Sans
     lui, un mot trop long ajouté un jour ferait défiler la page entière de
     travers — un défaut qui se voit sur tout le site pour une seule ligne. */
  overflow-x:clip;
}

/* ── POURQUOI LE TEXTE DÉBORDAIT ──────────────────────────────────────────
   Un enfant de `flex` ou de `grid` refuse par défaut de devenir plus étroit
   que son contenu (`min-width:auto`). Un nom d'association de quarante
   caractères, une adresse électronique, un titre en grandes lettres : la boîte
   grandit au-delà de sa colonne au lieu de passer à la ligne, et le texte sort.

   `min-width:0` lève cet interdit, et `overflow-wrap` autorise la coupure d'un
   mot qui, seul, ne tiendrait toujours pas. Les deux ensemble, sinon on
   remplace un débordement par un mot tronqué. */
.entete .wrap > *, .foot .wrap > *,
.accueil > *, .colonnes > *,
.identite > *, .verdict > *, .note > *,
.faits li > *, .carte-t > *, .identite .rangee > *{min-width:0}

/* La coupure ne s'applique qu'en dernier recours : `anywhere` couperait au
   milieu d'un mot court dès qu'il gêne. `break-word` essaie d'abord de passer
   à la ligne normalement. */
body{overflow-wrap:break-word}
/* Une adresse électronique ou un identifiant n'a pas d'espace où se couper :
   pour eux seulement, la coupure partout est le seul recours. */
.foot a[href^="mailto:"], .mono{overflow-wrap:anywhere}
img,svg{max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif; line-height:1.12; letter-spacing:-.02em; margin:0}
.mono{font-family:'Space Mono',ui-monospace,monospace}

/* Toute cible tactile fait au moins 44 px — même règle que la vitrine. */
a,button,select,summary,input{min-height:44px}
.puce,.foot a,.lien-sobre{min-height:auto}

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

.wrap{width:100%; max-width:760px; margin:0 auto; padding:0 18px}
@media (min-width:768px){ .wrap{padding:0 24px} }
/* DEUX LARGEURS, ET C'EST TOUT
   - par défaut (760 px) : le formulaire, empilé et centré. Il n'a rien à étaler ;
   - `large` (1180 px) : le résultat, qui a deux colonnes pleines à remplir.
   J'en avais introduit une troisième pour mettre le formulaire sur deux
   colonnes. C'était une mauvaise idée : une page qui pose une question et offre
   deux champs se lit de haut en bas. La largeur intermédiaire part avec. */
body.large .wrap{max-width:1180px}

/* Le filet quadricolore de la vitrine : c'est lui qui fait reconnaître le site
   avant même d'avoir lu quoi que ce soit. */
.toprail{height:4px;background:linear-gradient(90deg,var(--rouge) 0 25%,var(--ambre) 25% 50%,var(--teal) 50% 75%,var(--ardoise) 75% 100%)}

/* Même piège que le pied : ce lien est du blanc sur `--encre`, donc du blanc
   sur du clair en thème sombre. Il ne se voit qu'au clavier, et c'est
   précisément là qu'il doit se voir. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--encre);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--r) 0;font-weight:700;text-decoration:none}
@media (prefers-color-scheme: dark){ .skip{background:#070C16} }
.skip:focus{left:0}

/* ── En-tête ──────────────────────────────────────────────────────────── */
.entete{border-bottom:1px solid var(--ligne);background:var(--carte)}
.entete .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;min-height:64px;flex-wrap:wrap;padding-block:8px}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.marque img{width:34px;height:34px;object-fit:contain;flex-shrink:0}
.marque > span{min-width:0}
.marque b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:15px;letter-spacing:-.01em;line-height:1.2}
/* « Amicale des Agents de Paris Saint-Lazare » fait quarante caractères. À
   côté du logo et du lien de retour, il n'y a pas la place sur un téléphone :
   le nom sortait de l'écran. Il passe à la ligne au lieu de déborder, et
   disparaît en dessous de 380 px — le titre au-dessus dit déjà où l'on est. */
.marque small{display:block;color:var(--mut);font-size:11px;line-height:1.25}
@media (max-width:379px){ .marque small{display:none} }
.lien-sobre{color:var(--mut);text-decoration:none;font-size:13.5px;display:inline-flex;align-items:center;gap:7px}
.lien-sobre:hover{color:var(--rouge)}

/* ── Corps ────────────────────────────────────────────────────────────── */
main{flex:1;padding:28px 0 40px}
@media (min-width:768px){ main{padding:40px 0 56px} }

/* ── Deux colonnes sur grand écran ────────────────────────────────────── */
/* L'ordre de lecture est le même qu'en une colonne : qui est cette personne,
   puis ce à quoi elle est habilitée. La colonne de gauche, plus courte, reste
   à l'écran pendant qu'on parcourt la droite — on garde le nom et la photo
   sous les yeux en lisant les habilitations, ce qui est exactement ce qu'on
   fait en vérifiant une carte. */
.colonnes{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:940px){
  .colonnes{grid-template-columns:minmax(310px,380px) 1fr;gap:24px;align-items:start}
  .colonnes > .col{display:flex;flex-direction:column;gap:16px}
  .colonnes > .col.gauche{position:sticky;top:20px}
}
/* Sous 940 px la colonne de gauche ne colle pas : elle occupe toute la largeur,
   et un élément collant y masquerait le contenu au lieu de l'accompagner. */
@media (max-width:939px){
  .colonnes > .col{display:flex;flex-direction:column;gap:16px}
}

.eyebrow{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.12em;color:var(--rouge);
  text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;margin-bottom:12px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--rouge)}

/* `vw` mesure l'ÉCRAN, jamais la colonne. En deux colonnes, un titre calculé
   sur la largeur de l'écran se retrouvait trop grand pour la colonne qui le
   porte — c'est de là que venait le débordement du titre. Les bornes sont donc
   resserrées, et la césure autorisée en dernier recours. */
.titre{font-size:clamp(26px,5vw,38px);font-weight:800;overflow-wrap:break-word;hyphens:auto}
.sous{color:var(--mut);margin:8px 0 0;max-width:60ch}
.lab{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}

.carte{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);
  box-shadow:var(--ombre);overflow:hidden}
.carte-b{padding:18px}
@media (min-width:600px){ .carte-b{padding:22px} }
.carte-t{display:flex;align-items:center;gap:10px;padding:13px 18px;
  border-bottom:1px solid var(--ligne);background:color-mix(in srgb,var(--ardoise) 6%,transparent)}
@media (min-width:600px){ .carte-t{padding:14px 22px} }
.carte-t h2{font-size:15px;font-weight:700}
.carte-t .lab{margin-left:auto}

.pile{display:flex;flex-direction:column;gap:16px}

/* ── Pastilles ────────────────────────────────────────────────────────── */
.puce{display:inline-flex;align-items:center;gap:5px;font-family:'Space Mono',monospace;
  font-size:11px;font-weight:700;padding:4px 9px;border-radius:6px;
  background:color-mix(in srgb,var(--ardoise) 12%,transparent);color:var(--mut)}
.puce.rouge{background:color-mix(in srgb,var(--rouge) 12%,transparent);color:var(--rouge)}
.puce.vert{background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal)}
.puce.ambre{background:color-mix(in srgb,var(--ambre) 18%,transparent);color:#8a6210}
.puce.grande{font-size:13px;padding:7px 13px;border-radius:8px}

/* ── Boutons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;border-radius:11px;padding:12px 18px;
  font-size:15px;transition:transform .15s,background .15s;border:0;cursor:pointer;line-height:1.2}
.btn-red{background:var(--rouge);color:#fff;box-shadow:0 10px 20px -10px rgba(216,30,52,.6)}
.btn-red:hover{background:#e7263d;transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1.5px solid var(--ligne);color:var(--encre)}
.btn-ghost:hover{border-color:var(--encre)}
.btn-lg{padding:15px 24px;font-size:16px;width:100%}
@media (prefers-reduced-motion:reduce){ .btn:hover,.carte:hover{transform:none} }

/* ── Formulaire ───────────────────────────────────────────────────────── */
.champ{display:block;margin-bottom:14px}
.champ > .lab{display:block;margin-bottom:6px}
.champ input{width:100%;padding:13px 14px;border:1.5px solid var(--ligne);border-radius:11px;
  background:var(--papier);color:var(--encre);font-family:inherit;font-size:16px}
.champ input:focus{outline:none;border-color:var(--rouge);background:var(--carte)}
.champ input::placeholder{color:var(--mut);opacity:.7}

/* ── Page d'accueil : EMPILÉE, à toutes les largeurs ──────────────────── */
/* J'avais essayé de mettre le propos à gauche et le formulaire à droite. Sur un
   écran large, c'était moins bien : deux blocs courts qui ne se répondent pas,
   séparés par un vide, et un titre coincé dans une colonne alors qu'il a de
   quoi tenir sur une ligne pleine.
   Une page qui pose une question et offre deux champs se lit de haut en bas.
   Le contenu reste borné à une largeur de lecture — une ligne qui traverse un
   grand écran se relit mal, l'œil perd la ligne suivante — et le tout est
   centré, ce qui vaut mieux qu'un remplissage forcé. */
.accueil{display:flex;flex-direction:column;gap:22px;max-width:560px;margin:0 auto}
/* Dans la colonne de gauche de l'accueil, la borne haute tient compte de la
   largeur réelle de cette colonne (environ la moitié de l'écran), pas de
   l'écran entier. */
/* Plus de taille propre au titre d'accueil : la colonne fait 560 px au plus,
   c'est-a-dire la largeur pour laquelle `.titre` est deja calibre. Une regle
   qui redit ce que fait la precedente est une regle a maintenir pour rien. */
.accueil .propos .sous{font-size:17px}

/* ── Verdict : le bandeau qui répond à la question posée ──────────────── */
/* La page sert à trancher : cette personne est-elle membre en règle, oui ou
   non. Le verdict occupe donc le haut, en grand, avec le mot écrit — jamais la
   couleur seule, qui ne dit rien à qui ne la distingue pas. */
.verdict{border-radius:var(--r);padding:18px;display:flex;align-items:flex-start;gap:14px;
  border:1.5px solid;box-shadow:var(--ombre)}
@media (min-width:600px){ .verdict{padding:22px} }
@media (min-width:940px){ .verdict{padding:26px 28px;gap:18px} .verdict i{font-size:32px} }
.verdict i{font-size:26px;flex-shrink:0;margin-top:2px}
.verdict h1{font-size:clamp(20px,4.4vw,26px);font-weight:800}
.verdict p{margin:5px 0 0;font-size:14.5px;line-height:1.5}
.verdict.ok   {background:color-mix(in srgb,var(--teal) 9%,var(--carte)); border-color:color-mix(in srgb,var(--teal) 40%,transparent); color:var(--teal)}
.verdict.tiede{background:color-mix(in srgb,var(--ambre) 12%,var(--carte));border-color:color-mix(in srgb,var(--ambre) 45%,transparent);color:#8a6210}
.verdict.non  {background:color-mix(in srgb,var(--rouge) 9%,var(--carte));border-color:color-mix(in srgb,var(--rouge) 40%,transparent);color:var(--rouge)}
.verdict .detail{color:var(--encre)}

/* ── Identité ─────────────────────────────────────────────────────────── */
.identite{display:flex;gap:16px;align-items:center}
.identite img{width:84px;height:84px;border-radius:12px;object-fit:cover;border:1.5px solid var(--ligne);flex-shrink:0}
/* Dans la colonne étroite, la photo passe au-dessus du nom et double de taille :
   c'est elle qu'on compare au visage en face, elle mérite la place. */
@media (min-width:940px){
  .colonnes .identite{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .colonnes .identite img{width:150px;height:150px}
  .colonnes .identite .rangee{justify-content:center}
}
/* Un nom composé — « Marie-Christine de la Fontaine » — n'a pas de raison
   d'être coupé n'importe où tant qu'il peut passer à la ligne. `anywhere` reste
   en réserve pour un nom d'un seul tenant plus large que la colonne. */
.identite .nom{font-size:clamp(19px,4.2vw,24px);font-weight:800;overflow-wrap:anywhere;line-height:1.15}
.identite .num{font-family:'Space Mono',monospace;font-size:13px;color:var(--mut);margin-top:2px;overflow-wrap:anywhere}
.identite > div{min-width:0;flex:1}
.identite .rangee{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.grise{filter:grayscale(1);opacity:.55}

/* ── Faits : une ligne = une information ──────────────────────────────── */
/* Les cases côte à côte de l'ancienne version tenaient mal sur un téléphone et
   ne se lisaient pas dans un ordre clair. Une liste se parcourt. */
.faits{list-style:none;margin:0;padding:0}
.faits li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--ligne)}
.faits li:first-child{border-top:0}
.faits .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  background:color-mix(in srgb,var(--ardoise) 10%,transparent);color:var(--mut);font-size:13px}
.faits .k{color:var(--mut);font-size:13px;min-width:0}
/* La valeur garde sa place à droite mais ne pousse plus la clé hors de la
   ligne : elle se réduit quand il le faut, et passe à la ligne plutôt que de
   déborder. */
.faits .v{font-weight:700;font-size:15px;margin-left:auto;text-align:right;flex-shrink:0;max-width:60%}
.faits .v small{display:block;font-weight:400;font-size:12px;color:var(--mut)}
.faits .ic.vert{background:color-mix(in srgb,var(--teal) 13%,transparent);color:var(--teal)}
.faits .ic.rouge{background:color-mix(in srgb,var(--rouge) 12%,transparent);color:var(--rouge)}
.faits .ic.ambre{background:color-mix(in srgb,var(--ambre) 18%,transparent);color:#8a6210}
.v.vert{color:var(--teal)} .v.rouge{color:var(--rouge)} .v.ambre{color:#8a6210}

/* ── Habilitations ────────────────────────────────────────────────────── */
.habs{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:640px) and (max-width:939px){ .habs{grid-template-columns:repeat(2,1fr)} }
/* Dans la colonne de droite, deux cartes par ligne restent lisibles ; trois
   couperaient les descriptions en tranches trop étroites. */
@media (min-width:1080px){ .habs{grid-template-columns:repeat(2,1fr)} }
.hab{border:1px solid var(--ligne);border-radius:11px;padding:12px 14px;background:var(--papier)}
.hab h3{font-size:14.5px;font-weight:700}
.hab p{margin:3px 0 0;color:var(--mut);font-size:13px;line-height:1.45}
.hab .puce{margin-top:8px}

/* ── Repli et messages ────────────────────────────────────────────────── */
.vide{text-align:center;padding:28px 18px;color:var(--mut)}
.vide i{font-size:30px;opacity:.4;display:block;margin-bottom:10px}
.vide b{display:block;color:var(--encre);font-size:15px;margin-bottom:3px}

details.repli{margin-top:14px}
details.repli > summary{list-style:none;cursor:pointer;color:var(--mut);font-size:13px;
  display:inline-flex;align-items:center;gap:7px}
details.repli > summary::-webkit-details-marker{display:none}
details.repli[open] > summary i{transform:rotate(90deg)}
details.repli > summary i{transition:transform .15s}

/* ── Note de confidentialité ──────────────────────────────────────────── */
.note{display:flex;gap:11px;align-items:flex-start;border:1px dashed var(--ligne);
  border-radius:11px;padding:13px 15px;color:var(--mut);font-size:13px;line-height:1.5}
.note i{color:var(--ardoise);margin-top:2px;flex-shrink:0}

/* ── Pied ─────────────────────────────────────────────────────────────── */
/* `--encre` est la couleur du TEXTE : en thème sombre elle devient CLAIRE
   (#E8EDF5). L'employer comme fond donnait donc un pied presque blanc sous du
   texte pâle — illisible, et laid.
   La vitrine avait la parade, écrite juste sous la règle ; je l'ai recopiée
   sans elle. Un fond de pied n'est pas une couleur de texte : il est fixé, et
   il reste sombre dans les deux thèmes. */
.foot{background:var(--encre);color:#cfd8e6;font-size:13px;padding:20px 0}
@media (prefers-color-scheme: dark){ .foot{background:#070C16} }
.foot .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
.foot .wrap > span{min-width:0}
.foot a{color:#cfd8e6;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .mono{color:#8c9cb5;font-size:12px}