/* Valignac Academy — composants.
   Extrait de identite/planche-composants.html, qui reste l'épreuve de contrôle.
   Aucune valeur brute : tout vient de tokens.css.
   Toute maquette du lot 3 lie tokens.css PUIS composants.css, dans cet ordre. */
/* ─────────────────────────────────────────────────────────────────────────
   Composants Valignac Academy.
   Rien ici n'invente de couleur ni d'espace : tout vient de tokens.css.
   ───────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--fond);color:var(--texte);
  font-family:var(--sans);font-size:var(--t-md);line-height:var(--i-normal);
}
.page{max-width:var(--gr-page-max);margin:0 auto;padding:var(--e-16) var(--e-8) var(--e-48)}

/* Titres */
h1{font-family:var(--serif);font-size:var(--t-4xl);line-height:var(--i-serre);
   margin:0 0 var(--e-2);letter-spacing:-.015em}
h2{font-family:var(--serif);font-size:var(--t-2xl);line-height:var(--i-serre);
   margin:var(--e-24) 0 var(--e-3);padding-top:var(--e-8);border-top:1px solid var(--trait)}
h3{font-family:var(--serif);font-size:var(--t-xl);margin:var(--e-12) 0 var(--e-3)}
.chapeau{color:var(--texte-doux);max-width:var(--gr-texte-max);margin:0 0 var(--e-8)}
.legende{color:var(--texte-doux);font-size:var(--t-sm);max-width:56ch;margin:0 0 var(--e-6)}

/* Surtitre — le seul endroit où l'or touche un titre, parce qu'il annonce
   une section de provenance et rien d'autre. */
.surtitre{font-family:var(--sans);font-size:var(--t-2xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--provenance-texte);font-weight:var(--g-fort)}


/* ── Échelle typographique ─────────────────────────────────────────────── */

/* ── Palette ───────────────────────────────────────────────────────────── */

/* ── LA MARGE DE PROVENANCE — loi 1 du territoire ──────────────────────── */
.corps{display:grid;grid-template-columns:var(--gr-marge-provenance) minmax(0,var(--gr-texte-max));
  gap:var(--gr-gouttiere);align-items:start}
.marge{border-right:1px solid var(--provenance-trait);padding-right:var(--e-6);
  text-align:right}
.marge .ref{font-family:var(--mono);font-size:var(--t-xs);color:var(--provenance-texte);
  line-height:var(--i-normal);display:block;margin-bottom:var(--e-2)}
.marge .consulte{font-family:var(--mono);font-size:var(--t-2xs);color:var(--texte-tres-doux)}
.enonce{font-family:var(--serif);font-size:var(--t-lg);line-height:var(--i-lecture);margin:0}
.enonce + .enonce{margin-top:var(--e-6)}

@media (max-width:900px){
  .corps{grid-template-columns:1fr}
  .marge{border-right:0;border-left:2px solid var(--provenance-trait);
    padding:var(--e-1) 0 var(--e-1) var(--e-4);text-align:left;
    margin-top:var(--e-3);order:2}
}

/* ── LA BORNE DE VERSION — objet-signature ─────────────────────────────── */
.borne{display:inline-flex;align-items:center;gap:var(--e-3);
  font-family:var(--mono);font-size:var(--t-xs);color:var(--provenance-texte)}
.borne .trait{position:relative;display:block;width:5rem;height:2px;
  background:var(--provenance)}
.borne .trait::before,.borne .trait::after{content:"";position:absolute;top:-4px;
  width:2px;height:10px;background:var(--provenance)}
.borne .trait::before{left:0}
.borne .trait::after{right:0}
.borne.ouverte .trait::after{display:none}

/* ── Point-clé ─────────────────────────────────────────────────────────── */
.point{padding:var(--e-6) 0;border-bottom:1px solid var(--trait)}
.point p{margin:0 0 var(--e-3)}
.point .bas{display:flex;flex-wrap:wrap;gap:var(--e-6);align-items:center}

/* ── Quiz ──────────────────────────────────────────────────────────────── */
.quiz{max-width:38rem}
.question{font-family:var(--serif);font-size:var(--t-xl);line-height:var(--i-serre);
  margin:0 0 var(--e-6)}
.option{display:flex;gap:var(--e-4);align-items:flex-start;width:100%;text-align:left;
  background:var(--fond-carte);border:1px solid var(--trait-fort);border-radius:var(--r-sm);
  padding:var(--e-4) var(--e-6);margin-bottom:var(--e-3);cursor:pointer;
  font:inherit;color:inherit;
  transition:border-color var(--t-court) var(--c-douce),
             background var(--t-court) var(--c-douce)}
.option:hover{border-color:var(--structure)}
.option:focus-visible{outline:var(--focus-epaisseur) solid var(--structure);outline-offset:var(--focus-decalage)}
.option .lettre{font-family:var(--mono);font-size:var(--t-sm);color:var(--texte-doux);
  flex:0 0 auto;padding-top:.1em}
.option.juste{border-color:var(--succes);background:color-mix(in srgb,var(--succes) 7%,transparent)}
.option.fausse{border-color:var(--erreur);background:color-mix(in srgb,var(--erreur) 7%,transparent)}
/* L'information ne repose jamais sur la seule couleur : chaque état porte un signe. */
.option .signe{margin-left:auto;font-family:var(--mono);font-size:var(--t-sm);font-weight:var(--g-fort)}
.option.juste .signe{color:var(--succes)}
.option.fausse .signe{color:var(--erreur)}

.explication{border-left:3px solid var(--provenance);padding:var(--e-4) 0 var(--e-4) var(--e-6);
  margin-top:var(--e-6);font-family:var(--serif);font-size:var(--t-lg);
  line-height:var(--i-lecture)}
.explication .retour{display:block;margin-top:var(--e-4);font-family:var(--sans);
  font-size:var(--t-sm);color:var(--lien)}

/* ── Barre segmentée — territoire C, versé au système ──────────────────── */
.segments{display:flex;gap:3px;margin:var(--e-3) 0}
.segments i{flex:1;height:10px;border-radius:2px;background:var(--fond-enfonce);
  border:1px solid var(--trait)}
.segments i.fait{background:var(--structure);border-color:var(--structure)}
.segments i.obligatoire{background:var(--provenance);border-color:var(--provenance)}
.compteur{display:flex;align-items:baseline;gap:var(--e-3);flex-wrap:wrap}
.compteur .grand{font-family:var(--serif);font-size:var(--t-3xl);font-weight:var(--g-fort);
  line-height:1}
.compteur .sur{color:var(--texte-doux)}

/* ── Cartes ────────────────────────────────────────────────────────────── */
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:var(--e-6)}
.carte{background:var(--fond-carte);border:1px solid var(--trait);border-radius:var(--r-md);
  padding:var(--e-6);box-shadow:var(--ombre-carte);display:flex;flex-direction:column;
  gap:var(--e-3)}
.carte h4{font-family:var(--serif);font-size:var(--t-lg);margin:0;line-height:var(--i-serre)}
.carte .meta{font-size:var(--t-sm);color:var(--texte-doux);display:flex;gap:var(--e-4);
  flex-wrap:wrap}
.carte .prix{font-family:var(--serif);font-size:var(--t-xl);font-weight:var(--g-fort);
  margin-top:auto}

/* ── Étiquettes ────────────────────────────────────────────────────────── */
.etiq{display:inline-flex;align-items:center;gap:var(--e-2);border-radius:var(--r-plein);
  padding:.15rem .6rem;font-size:var(--t-xs);font-weight:var(--g-moyen);
  border:1px solid transparent}
.etiq.provenance{color:var(--provenance-texte);background:var(--provenance-fond);
  border-color:var(--provenance-trait)}
.etiq.changement{color:var(--changement);background:var(--changement-fond)}
.etiq.neutre{color:var(--texte-doux);background:var(--fond-enfonce);border-color:var(--trait)}
.etiq.univers{color:var(--fond-carte);background:var(--univers-credit)}

/* ── Boutons ───────────────────────────────────────────────────────────── */
.bouton{display:inline-flex;align-items:center;gap:var(--e-2);font:inherit;
  font-weight:var(--g-moyen);border-radius:var(--r-sm);padding:var(--e-3) var(--e-6);
  border:1px solid transparent;cursor:pointer;
  transition:background var(--t-court) var(--c-douce)}
.bouton.principal{background:var(--structure);color:var(--fond-carte)}
.bouton.principal:hover{background:var(--structure-forte)}
.bouton.second{background:transparent;color:var(--structure);border-color:var(--trait-fort)}
.bouton.second:hover{border-color:var(--structure)}
.bouton.discret{background:transparent;color:var(--texte-doux);padding-left:0}
.bouton:focus-visible{outline:var(--focus-epaisseur) solid var(--structure);outline-offset:var(--focus-decalage)}
.bouton[disabled]{opacity:.45;cursor:not-allowed}

/* ── Champs ────────────────────────────────────────────────────────────── */
.champ{display:block;margin-bottom:var(--e-6);max-width:26rem}
.champ label{display:block;font-size:var(--t-sm);font-weight:var(--g-moyen);
  margin-bottom:var(--e-2)}
.champ input{width:100%;font:inherit;color:inherit;background:var(--fond-carte);
  border:1px solid var(--trait-fort);border-radius:var(--r-sm);padding:var(--e-3) var(--e-4)}
.champ input:focus-visible{outline:var(--focus-epaisseur) solid var(--structure);outline-offset:var(--focus-decalage);
  border-color:var(--structure)}
.champ .aide{font-size:var(--t-sm);color:var(--texte-doux);margin-top:var(--e-2)}
.champ.faux input{border-color:var(--erreur)}
.champ .faute{font-size:var(--t-sm);color:var(--erreur);margin-top:var(--e-2);
  display:flex;gap:var(--e-2)}

/* ── Messages ──────────────────────────────────────────────────────────── */
.message{border-left:3px solid var(--structure);padding:var(--e-4) var(--e-6);
  background:var(--fond-enfonce);border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin-bottom:var(--e-4)}
.message.maj{border-left-color:var(--changement);background:var(--changement-fond)}
.message.preuve{border-left-color:var(--provenance);background:var(--provenance-fond)}
.message h4{margin:0 0 var(--e-2);font-family:var(--sans);font-size:var(--t-md);
  font-weight:var(--g-fort)}
.message p{margin:0;font-size:var(--t-sm)}

/* ── Point ouvert : ce qui n'est pas enseigné ──────────────────────────────
   Volontairement sobre. Une limite déclarée n'est ni une alerte ni une faute :
   la signaler en rouge inviterait à la lire comme un défaut du module, alors
   qu'elle en est la partie la plus honnête. Trait discontinu, pas de couleur
   d'état, et surtout PAS d'or — l'or ne signale que la provenance. */
.ouvert{border:1px dashed var(--trait-fort);border-radius:var(--r-sm);
  padding:var(--e-5) var(--e-6);margin-bottom:var(--e-4);max-width:72ch}
.ouvert h4{margin:0 0 var(--e-2);font-family:var(--sans);font-size:var(--t-md);
  font-weight:var(--g-fort)}
.ouvert .etat{font-family:var(--sans);font-size:var(--t-2xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--texte-doux);font-weight:var(--g-fort);
  margin:0 0 var(--e-3)}
.ouvert p{margin:0 0 var(--e-3);font-size:var(--t-sm)}
.ouvert p:last-child{margin-bottom:0}

/* ── États vides, chargement ───────────────────────────────────────────── */
.vide{text-align:center;padding:var(--e-24) var(--e-8);border:1px dashed var(--trait-fort);
  border-radius:var(--r-md)}
.vide h4{font-family:var(--serif);font-size:var(--t-xl);margin:0 0 var(--e-3)}
.vide p{color:var(--texte-doux);max-width:38ch;margin:0 auto var(--e-6)}
.squelette{height:.9rem;border-radius:var(--r-xs);background:var(--fond-enfonce);
  margin-bottom:var(--e-3);animation:pouls 1.4s var(--c-douce) infinite}
@keyframes pouls{0%,100%{opacity:1}50%{opacity:.5}}

/* ── Tableau ───────────────────────────────────────────────────────────── */
.tableau-cadre{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--t-sm);min-width:34rem}
th,td{text-align:left;padding:var(--e-3) var(--e-4);border-bottom:1px solid var(--trait)}
th{font-weight:var(--g-moyen);color:var(--texte-doux);font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.06em}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Utilitaires de mise en page */
.rangee-basculante{display:flex;gap:var(--e-8);flex-wrap:wrap;align-items:flex-start}
.moitie{flex:1;min-width:18rem}
.pile{display:flex;flex-direction:column;gap:var(--e-4)}
.entre{display:flex;justify-content:space-between;align-items:center;gap:var(--e-4);flex-wrap:wrap}
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:var(--e-6)}
.section{padding-top:var(--e-12);margin-top:var(--e-12);border-top:1px solid var(--trait)}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* ── Barre de navigation de l'application ──────────────────────────────────
   Vivait dans un bloc <style> de serveur.py, ce qui violait deux règles à la
   fois : le design system n'est pas dupliqué (modifier un jeton doit se
   propager), et une CSP stricte refuse le style en ligne. Une seule copie,
   ici. */
.barre{position:sticky;top:0;z-index:5;background:var(--fond);
  border-bottom:1px solid var(--trait);padding:var(--e-3) var(--e-8);
  display:flex;align-items:center;gap:var(--e-6);flex-wrap:wrap}
.barre a{color:var(--lien);text-decoration:none;font-size:var(--t-sm)}
.barre a:focus-visible{outline:var(--focus-epaisseur) solid var(--structure);
  outline-offset:var(--focus-decalage)}
.barre .marque{font-family:var(--serif);font-weight:var(--g-fort);color:var(--structure)}
.barre .droite{margin-left:auto;display:flex;gap:var(--e-6)}

/* ── Utilitaires de disposition ────────────────────────────────────────────
   Douze attributs `style=` étaient dispersés dans les gabarits. Une CSP qui
   interdit le style en ligne les aurait tous fait tomber en silence — la mise
   en page se défait sans qu'aucune requête n'échoue. Ils deviennent des
   classes : nommées, réutilisables, et visibles au balayage du DOM. */
.rangee-boutons{display:flex;gap:var(--e-4);flex-wrap:wrap}
.rangee-boutons.detachee{margin-top:var(--e-12)}
.serre{margin-top:var(--e-2)}
.espace-dessous{margin-bottom:var(--e-8)}
.note-sobre{font-size:var(--t-xs);color:var(--texte-doux);max-width:70ch;margin:0}
.note-sobre.apres{margin:var(--e-3) 0 0}
.note-nue{margin-top:var(--e-4);border:0;padding:0}
.cliquable{cursor:pointer}

.sans-marge-haut{margin-top:0}