/* ============================================================================
   PLAIN MONEY — la couche projet. Elle vient APRÈS odersa-systeme.css.

   CE QU’ELLE PEUT FAIRE, ET RIEN DE PLUS.
   Le design du site est le skill odersa-design : odersa-systeme.css n’est pas
   retouché, pas surchargé, pas contourné. Cette feuille n’existe que pour deux
   choses :
     ① NOMMER les placements que les gabarits du skill montrent en style en
       ligne. Le skill le dit lui-même : « les style="..." sont des repères de
       placement, pas une façon d’écrire ; dans un vrai projet ils vont dans la
       feuille sous un nom de composant ». Un attribut style échappe aux thèmes,
       au contraste renforcé et à l’impression : il n’y en a aucun sur ce site.
     ② COMPOSER, avec les jetons existants, les quelques pièces que le sujet
       exige et que le système ne connaît pas encore (un calculateur, une liste
       de définitions, un journal).

   INTERDITS, VÉRIFIÉS PAR build/outils/verifier-da.js :
     · aucune couleur littérale : uniquement var(--jeton) du système ;
     · aucune police, aucune taille, aucun espacement hors échelle du système ;
     · aucun arrondi (le système est à 0), aucune ombre, aucun dégradé ;
     · aucun !important dans une règle de page.
   Ce qui manque ici et servirait à plus d’un site de la flotte ne s’ajoute pas
   ici : ça remonte au skill.
   ========================================================================== */

/* ═══════════ 1. LES PLACEMENTS DES GABARITS, NOMMÉS ═══════════
   Recopiés à l’identique des squelettes de references/gabarits.md. */

/* Le cadre d’outil : filet du système, filet haut d’accent, respiration. */
.outil {
  border: 1px solid var(--rule);
  border-block-start: 3px solid var(--accent);
  padding: var(--s-6);
}
.outil > form { margin: 0; }

/* La zone de résultat existe DÈS LE DÉPART, vide mais présente : sinon la page
   saute quand le résultat arrive. aria-live la fait annoncer. */
.resultat {
  margin-block-start: var(--s-6);
  min-height: 3rem;
}

/* L’imagerie du sujet, aux emplacements prévus par les gabarits. */
.figure-sujet { margin: 0; border: 1px solid var(--rule); }
.figure-sujet img { display: block; width: 100%; }
.figure-sujet figcaption { padding: var(--s-3); }

/* Les badges de faits, sous les boutons du premier écran. */
.badges--espace { margin-block-start: var(--s-8); }

/* Un chiffre de la bande de preuve. */
.chiffre__n { font: 600 var(--t-2xl)/1 var(--serif); margin: 0; }
.chiffre__q { font-size: var(--t-s); margin: var(--s-2) 0 0; max-width: 28ch; }

/* La pastille d’accessibilité de la maison. GÉOMÉTRIE RELEVÉE SUR LA PAGE MÈRE
   https://odersa.org/accessibilite le 14/08/2026, règle par règle, sur son
   `.pupitre-fab` : onglet fixe au bord de fin, à 42vh, mot vertical en
   capitales sur la surface la plus sombre du système, 44 px au moins dans les
   deux dimensions. Les valeurs littérales de la mère sont remplacées par leurs
   jetons : #FFFFFF devient --on-dark, la teinte de survol est --btn-accent, et
   la surface --bg-deep est exactement celle que .site-foot emploie déjà.
   Contrastes mesurés sur les quatre états : 17,79:1 et 8,61:1 en clair,
   16,59:1 et 5,70:1 en sombre.
   Propriétés LOGIQUES seulement : la pastille se retourne seule en arabe.

   MOBILE D’ABORD, ET C’EST UNE CORRECTION D’ACCESSIBILITÉ, PAS UN GOÛT.
   Sous 64rem la colonne de texte va d’un bord à l’autre : l’onglet fixe de la
   mère recouvrait alors 24 px de mots, mesurés sur /apprendre/premier-argent à
   360 px, où le h1 et son chapeau passaient derrière. Un site mère de bureau
   ne rencontre pas ce cas ; ce service, lui, se lit d’abord sur un téléphone.
   La pastille reste donc DANS LE FLUX en dessous de ce seuil, en bande pleine
   largeur juste après le pied, sur la même surface que lui : le lien, les mots
   et la cible ne changent pas, seule sa place change, et elle ne cache plus
   une lettre. Au-delà, elle reprend l’onglet vertical de la page mère. Le
   seuil de 64rem n’est pas inventé : c’est celui où le système replie déjà sa
   navigation. */
.pastille-a11y {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: var(--s-3) var(--s-2);
  background: var(--bg-deep);
  color: var(--on-dark);
  text-decoration: none;
}
.pastille-a11y span[aria-hidden] {
  font: 600 var(--t-xs)/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pastille-a11y:hover { background: var(--btn-accent); color: var(--on-dark); }

@media (min-width: 64rem) {
  .pastille-a11y {
    position: fixed;
    inset-inline-end: 0;
    inset-block-start: 42vh;
    z-index: 80;
    min-inline-size: 44px;
  }
  .pastille-a11y span[aria-hidden] { writing-mode: vertical-rl; }
}

/* À l’impression, un onglet posé en travers de la page n’a aucun sens : la
   feuille du système cache déjà ses propres flottants ici, celui-ci est de la
   couche projet et se cache donc dans la couche projet. */
@media print {
  .pastille-a11y { display: none; }
}

/* ═══════════ 2. LES PIÈCES DU SUJET ═══════════ */

/* Le plan du site et les listes de pages : une liste, avec sa description en
   encre secondaire. Aucune puce : les titres portent déjà la hiérarchie. */
.plan-groupe + .plan-groupe { margin-block-start: var(--s-10); }
.plan-liste { list-style: none; padding: 0; margin: 0; }
.plan-liste > li {
  border-block-start: 1px solid var(--rule);
  padding-block: var(--s-3);
  max-width: none;
}
.plan-liste > li > a { font-weight: 600; }
.plan-liste .muted { display: block; font-size: var(--t-s); max-width: 70ch; }
.plan-liste .plan-liste { margin-block-start: var(--s-2); padding-inline-start: var(--s-5); }

/* Le lexique : une vraie liste de définitions. */
.lexique { margin: 0; }
.lexique dt {
  font: 600 var(--t-m)/1.2 var(--serif);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--s-5);
  margin-block-start: var(--s-5);
  scroll-margin-block-start: var(--s-8);
}
.lexique dd { margin: var(--s-2) 0 0; }
.lexique dd p { max-width: 70ch; }
.lexique__ex {
  border-inline-start: 3px solid var(--rule);
  padding-inline-start: var(--s-4);
  color: var(--ink-mid);
  font-size: var(--t-s);
}

/* Le journal des publications : une date, une nature, un titre. */
.journal { list-style: none; padding: 0; margin: 0; }
.journal > li {
  display: grid;
  gap: var(--s-1) var(--s-5);
  border-block-start: 1px solid var(--rule);
  padding-block: var(--s-4);
  max-width: none;
}
@media (min-width: 40rem) {
  .journal > li { grid-template-columns: 12rem 8rem 1fr; align-items: baseline; }
}
.journal__d { margin: 0; color: var(--ink-mid); font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.journal__t { margin: 0; font: 600 var(--t-xs)/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.journal__n { margin: 0; font-weight: 600; }

/* Les listes de sources, sous un article ou une fiche. Une URL brute ne wrappe
   pas, et un débordement caché la tronque en silence. */
.sources-liste { font-size: var(--t-s); }
.sources-liste a { overflow-wrap: anywhere; }

/* ═══════════ 3. LES COMPOSITIONS DE PAGE ═══════════
   La loi de flotte veut que chaque page ait SA composition. Elle s’écrit ici,
   et chaque règle COMMENCE par la classe de sa page (posée par la coquille sur
   <main> : p-accueil, p-faq, p-calculateurs…). Sans cette portée, une feuille
   commune tient toutes les compositions à la main et la première correction en
   casse deux autres. build/outils/verifier-pages.js refuse une règle qui ne
   commence pas par sa classe de page, et tout !important. */