/* ============================================================================
   THE AI MANUAL - LA COUCHE PROJET

   La feuille du systeme (odersa-systeme.css) ne se retouche pas. Ce fichier ne
   contient QUE des composants nommes composes avec les jetons du systeme :
   aucune couleur litterale, aucune police nouvelle, aucun rayon, aucune ombre.
   Il est charge APRES la feuille du systeme, sur toutes les pages.

   Regles de contribution, tenues par le builder (construire.js) :
   - proprietes LOGIQUES seulement, jamais left/right : l'arabe se sert en RTL
   - aucune couleur en dur : var(--jeton) uniquement
   - aucun !important
   - une regle propre a UNE page va dans build/pages/<id>/page.css et commence
     par .p-<id>. Ici ne vivent que les composants employes par PLUSIEURS pages.
   ========================================================================== */

/* --- 1. Selecteur de langues : les langues pas encore servies -------------- */
/* Un code sans lien, explicitement inactif : ni lien mort, ni fausse promesse. */
.lang [aria-disabled="true"] {
  font: 600 var(--t-xs) var(--sans);
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  padding: 0.35em 0.5em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* --- 2. Code au fil du texte ---------------------------------------------- */
/* Le systeme n'a pas de police a espacement fixe et n'en veut pas : un
   fragment technique se marque comme un kbd, par son cadre. */
code {
  font: 400 0.9em var(--sans);
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  padding: 0.05em 0.35em;
  overflow-wrap: anywhere;
}
.band--dark code,
.site-foot code { background: transparent; border-color: var(--dark-line); color: var(--on-dark); }

/* --- 3. Le cadre : tout bloc qui n'est pas du texte courant ---------------- */
/* Une demonstration, un encart de methode, un resume : le filet du systeme et
   le trait d'accent en tete, comme le gabarit outil du skill. */
.cadre {
  border: 1px solid var(--rule);
  border-block-start: 3px solid var(--accent);
  padding: var(--s-6);
  background: var(--bg);
  margin-block: var(--s-8);
}
.cadre > :first-child { margin-block-start: 0; }
.cadre > :last-child { margin-block-end: 0; }
.cadre--douce { background: var(--bg-alt); }

/* --- 4. Figures ----------------------------------------------------------- */
.figure { margin: var(--s-8) 0; border: 1px solid var(--rule); }
.figure img, .figure svg { display: block; width: 100%; height: auto; }
.figure figcaption {
  padding: var(--s-3);
  font-size: var(--t-s);
  color: var(--ink-mid);
  border-block-start: 1px solid var(--rule);
  max-width: none;
}

/* --- 5. Compositions a deux et trois colonnes ----------------------------- */
.duo, .trio { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) {
  .duo { grid-template-columns: 1fr 1fr; }
  .trio { grid-template-columns: repeat(3, 1fr); }
}
.duo > *, .trio > * { min-width: 0; }

/* --- 6. Pile : rythme vertical explicite ---------------------------------- */
.pile { display: grid; gap: var(--s-4); }
.pile--large { gap: var(--s-8); }

/* --- 7. Reperes ----------------------------------------------------------- */
.repere {
  font: 600 var(--t-xs) var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mid);
  margin-block-end: var(--s-2);
}

/* --- 8. Les reglages d'une demonstration ---------------------------------- */
/* Un intitule, un controle, la valeur lue a cote : la valeur est du texte, elle
   n'est jamais portee par la seule position du curseur. */
.reglages { display: grid; gap: var(--s-5); margin-block: var(--s-6); }
.reglage { display: grid; gap: var(--s-2); }
.reglage > label { font: 600 var(--t-s) var(--sans); color: var(--ink); }
.reglage__ligne { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.reglage__ligne input[type="range"] { flex: 1 1 12rem; min-height: 44px; accent-color: var(--accent); }
.reglage__valeur {
  font: 700 var(--t-base) var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 0.2em 0.6em;
  min-width: 4.5em;
  text-align: center;
}
.reglage__aide { font-size: var(--t-s); color: var(--ink-mid); }

/* --- 9. La zone de sortie d'une demonstration ----------------------------- */
/* Elle existe des le depart, vide mais presente : la page ne saute pas quand le
   resultat arrive. Son contenu est annonce par aria-live. */
.sortie { margin-block-start: var(--s-6); min-height: 6rem; }
.sortie__vide { font-size: var(--t-s); color: var(--ink-mid); }
/* La ligne d'etat, et elle seule, porte le role=status d'une demonstration.
   Une zone de resultat entiere annoncee en direct fait des milliers de signes
   a chaque mouvement de curseur : ce n'est plus informer, c'est noyer. La
   phrase courte dit ce qui vient de se passer, la zone garde le detail. */
.sortie__etat { font: 600 var(--t-s)/1.5 var(--sans); color: var(--ink); margin-block: var(--s-4) 0; min-height: 1.5em; }
.sortie:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }

/* --- 10. Jetons de texte : le decoupage rendu visible --------------------- */
/* Le cadre dit la frontiere, pas la couleur : lisible en noir et blanc, lisible
   pour qui ne distingue pas les teintes. */
.jetons { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: stretch; }
.jeton {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-block-start: 2px solid var(--ink-mid);
  padding: 0.25em 0.45em;
  font: 400 var(--t-s) var(--sans);
  background: var(--bg-alt);
  white-space: pre-wrap;
}
.jeton--pair { border-block-start-color: var(--accent); background: var(--accent-bg); }
.jeton__num {
  font: 600 var(--t-xs) var(--sans);
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
}
.jeton__espace { color: var(--ink-mid); }

/* --- 11. Barres de proportion --------------------------------------------- */
/* Une valeur se lit en chiffres a cote de sa barre : la barre illustre, le
   chiffre informe. */
.barres { display: grid; gap: var(--s-2); margin-block: var(--s-4); }
.barre { display: grid; grid-template-columns: minmax(6rem, 12ch) 1fr auto; gap: var(--s-3); align-items: center; }
.barre__nom { font: 400 var(--t-s) var(--sans); overflow-wrap: anywhere; }
.barre__piste { background: var(--bg-alt); border: 1px solid var(--rule); block-size: 1.1rem; }
.barre__part { background: var(--accent); block-size: 100%; }
/* La seconde serie ne se distingue PAS par la seule couleur : elle porte un
   filet de fin, visible en noir et blanc comme pour qui ne separe pas les
   teintes. La couleur double la forme, elle ne la remplace jamais. */
.barre__part--pale { background: var(--ink-mid); border-inline-end: 3px solid var(--ink); }
.barre__val { font: 600 var(--t-s) var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-soft); }

/* --- 12. Etapes numerotees ------------------------------------------------ */
.etapes { list-style: none; padding: 0; margin-block: var(--s-6); counter-reset: etape; display: grid; gap: var(--s-5); }
.etapes > li { counter-increment: etape; padding-inline-start: var(--s-10); position: relative; max-width: 70ch; }
.etapes > li::before {
  content: counter(etape);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  font: 600 var(--t-s) var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  border: 1px solid var(--rule);
  border-block-start: 2px solid var(--accent);
  min-width: 2rem;
  text-align: center;
  padding: 0.15em 0.3em;
}

/* --- 13. Sommaire de page ------------------------------------------------- */
.sommaire { border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent); padding: var(--s-5); margin-block: var(--s-8); background: var(--bg-alt); }
.sommaire p { font: 600 var(--t-xs) var(--sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mid); margin-block-end: var(--s-3); }
.sommaire ol, .sommaire ul { margin: 0; padding-inline-start: var(--s-5); }
.sommaire li { margin-block-end: var(--s-2); font-size: var(--t-s); }

/* --- 14. Definitions ----------------------------------------------------- */
.def { margin-block: var(--s-6); }
.def dt { font: 600 var(--t-m) var(--serif); color: var(--ink); margin-block-start: var(--s-5); }
.def dd { margin: var(--s-2) 0 0; max-width: 70ch; }
.def dd + dt { border-block-start: 1px solid var(--rule-soft); padding-block-start: var(--s-5); }

/* --- 15. Sources --------------------------------------------------------- */
/* Une source se cite entiere : titre, auteur, annee, adresse ouvrable. */
.sources { list-style: none; padding: 0; margin-block: var(--s-6); display: grid; gap: var(--s-4); }
.sources > li { padding-inline-start: var(--s-5); border-inline-start: 2px solid var(--rule); font-size: var(--t-s); max-width: 70ch; }
.sources cite, .sources cite a { overflow-wrap: anywhere; font-style: normal; }
.sources .small { display: block; color: var(--ink-mid); }

/* --- 16. Ce qu'on trouve, ce qu'on ne trouve pas -------------------------- */
.liste-oui, .liste-non { list-style: none; padding: 0; margin-block: var(--s-4); display: grid; gap: var(--s-3); }
.liste-oui > li, .liste-non > li { padding-inline-start: var(--s-8); position: relative; max-width: 70ch; }
.liste-oui > li::before, .liste-non > li::before {
  position: absolute;
  inset-inline-start: 0;
  font: 600 var(--t-s) var(--sans);
  letter-spacing: 0.04em;
}
.liste-oui > li::before { content: "OUI"; color: var(--etat-succes); }
.liste-non > li::before { content: "NON"; color: var(--etat-erreur); }

/* --- 17. Chiffre d'appui -------------------------------------------------- */
.chiffres { display: grid; gap: var(--s-8); }
@media (min-width: 40rem) { .chiffres { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.chiffre__valeur { font: 600 var(--t-2xl)/1 var(--serif); margin: 0; font-variant-numeric: tabular-nums; }
.chiffre__quoi { font-size: var(--t-s); margin: var(--s-2) 0 0; }
.band--dark .chiffre__quoi { color: var(--on-dark-muted); }

/* --- 19. La pastille de reglages, et le pupitre qu'elle ouvre -------------
   La pastille est relevee sur odersa.org/accessibilite : elle ne se redessine
   pas. Sa composition n'emploie que des jetons du systeme, et le pupitre pilote
   EXACTEMENT les crochets que la feuille du systeme porte deja :
   data-theme, data-fontsize, data-spacing, data-contrast, data-motion,
   data-links. Rien n'est invente ici, tout est branche.
   Le contour d'un controle emploie --ink-mid et non --rule : un filet de
   7:1 se voit, un filet decoratif de 1,3:1 ne se voit pas. */

.pupitre-fab {
  position: fixed;
  inset-block-end: var(--s-4);
  inset-inline-end: var(--s-4);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.6em 1em;
  border: 1px solid var(--bg-deep);
  border-radius: var(--radius);
  background: var(--bg-deep);
  color: var(--on-dark);
  font: 600 var(--t-s)/1.2 var(--sans);
  cursor: pointer;
}
.pupitre-fab .ic { flex: none; }
.pupitre-fab:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.pupitre-fab:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
/* Sans JavaScript la pastille n'ouvrirait rien : elle ne s'affiche pas. */
.no-js .pupitre-fab { display: none; }

.pupitre-fond {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--bg-deep);
  opacity: 0.6;
}

.pupitre {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 80;
  inline-size: min(26rem, 100vw);
  max-inline-size: 100%;
  overflow-y: auto;
  background: var(--bg);
  color: var(--ink);
  border-inline-start: 1px solid var(--ink-mid);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.pupitre[hidden], .pupitre-fond[hidden] { display: none; }

.pupitre__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); border-block-end: 1px solid var(--rule); padding-block-end: var(--s-3); }
.pupitre__tete h2 { margin: 0; font: 600 var(--t-l)/1.2 var(--serif); }
.pupitre__fermer {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5em 0.9em;
  border: 1px solid var(--ink-mid);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: 600 var(--t-s)/1.2 var(--sans);
  cursor: pointer;
}
.pupitre__fermer:hover { background: var(--bg-alt); }

.pupitre__corps { display: grid; gap: var(--s-8); }
.pupitre__section h3 { margin: 0 0 var(--s-4); font: 600 var(--t-xs) var(--sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mid); }
.pupitre__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-block-end: var(--s-4); }
.pupitre__intitule { font: 400 var(--t-s) var(--sans); color: var(--ink); }
.pupitre__aide { font-size: var(--t-s); color: var(--ink-mid); margin-block: 0 var(--s-3); }
.pupitre__etat { font-size: var(--t-s); color: var(--ink-soft); margin: 0; min-height: 1.62em; }
.pupitre__pied { font-size: var(--t-xs); color: var(--ink-mid); border-block-start: 1px solid var(--rule); padding-block-start: var(--s-4); margin: auto 0 0; }

/* Le controle segmente. Ses deux jetons d'etat sont reserves par le systeme :
   --seg-on-bg et --seg-on-ink. L'etat retenu se lit au remplissage plein, pas
   a une teinte : il tient en noir et blanc comme en daltonisme. */
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ink-mid); border-radius: var(--radius); }
.seg__btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5em 0.9em;
  border: 0;
  border-inline-end: 1px solid var(--ink-mid);
  background: var(--bg);
  color: var(--ink);
  font: 600 var(--t-s)/1.2 var(--sans);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.seg__btn:last-child { border-inline-end: 0; }
.seg__btn:hover { background: var(--bg-alt); }
.seg__btn[aria-pressed="true"] { background: var(--seg-on-bg); color: var(--seg-on-ink); }

/* --- 20. Les zones qui defilent, atteignables au clavier ------------------
   socle.js pose tabindex sur une .table-wrap qui deborde reellement : un bloc
   qui defile a la souris et pas au clavier est un contenu ferme. Le contour de
   focus doit alors se voir, meme colle au bord. */
.table-wrap:focus-visible, .corpus:focus-visible, .corpus-texte:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: -2px;
}

/* --- 21. Impression ------------------------------------------------------ */
@media print {
  .cadre, .figure, .sommaire, .etapes > li, .barre { break-inside: avoid; }
  .reglages, .sortie__vide { display: none; }
  .jeton { background: transparent; }
  .pupitre-fab, .pupitre, .pupitre-fond { display: none; }
}