/* =====================================================================
   LE SEUL ENDROIT DU TRONC OU UN JETON DEVIENT UNE VALEUR.

   Les dix-sept en custom properties sur :root, tout le reste en var().
   Aucune couleur, aucune longueur absolue, aucun nom de police ailleurs
   — y compris dans les gabarits, y compris en style en ligne.

   Litteraux autorises ici (addendum A2 §2) : unites relatives sans
   dimension de marque — ch, %, fr, rem (relatif a echelle.base pose sur
   :root), ratios et multiplicateurs sans unite.

   `65ch` en mesure de ligne releve de cette categorie : c'est une
   constante partagee par tous les blogs, ecrite une fois dans le tronc.
   Le jour ou un blog a besoin d'une AUTRE mesure, elle devient un jeton
   et remonte comme amendement — elle ne se contourne pas ici.
   ===================================================================== */

/* =====================================================================
   LES POLICES, DECLAREES — etape 4, 2026-09-04.

   Quatre fichiers pour quatre roles, auto-heberges sous le tronc et
   deposes par le rendu (fdb_actifs). Avant ce bloc, le CSS nommait
   « IBM Plex Sans » et « Space Grotesk » sans que rien ne les charge :
   toutes les pages se rendaient en police systeme, et la direction
   visuelle n existait que sur le papier.

   DEUX D ENTRE ELLES SONT VARIABLES, et prennent donc une PLAGE de
   graisses. Mesure faite avec fontTools, pas supposee : IBM Plex Sans
   porte l axe wght de 100 a 700, Space Grotesk de 300 a 700. Ecrire
   « font-weight: 400 » sur un fichier variable revient a n en employer
   qu un point : le navigateur synthetise alors le gras en epaississant
   le trace, ce qui donne un faux gras — et l on aurait paye 45 ko pour
   une seule graisse.

   font-display: swap. Le texte s affiche IMMEDIATEMENT dans la police de
   repli, puis bascule. Les trois autres valeurs ont ete ecartees : block
   laisse le texte invisible jusqu a 3 s, ce qui est intenable sur un
   blog dont la doctrine est qu on y arrive par une reponse ; optional
   laisse le navigateur ne jamais charger la police, donc la direction
   visuelle devient facultative ; fallback ne laisse que 100 ms pour
   basculer. Le prix de swap est un changement de police visible au
   chargement — il est assume, la lisibilite passe avant.
   ===================================================================== */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/polices/ibm-plex-sans-variable.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/polices/ibm-plex-sans-400-italique.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/polices/space-grotesk-variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/polices/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --couleur-accent: #1E3A5F;
  --couleur-fond: #F7F9FB;
  --couleur-lien: #1F5FA8;
  --couleur-marquage: #B45309;
  --couleur-surface: #FFFFFF;
  --couleur-texte: #111111;
  --densite: confortable;
  --echelle-base: 1.019rem;
  --police-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --police-texte: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --police-titre: 'Space Grotesk', sans-serif;
  --rayon-base: 0;
  --rythme-base: 0.875rem;

  /* Derives : DECLARES dans le derives.json du tronc courant, jamais
     ecrits ici. Un derive non declare n'existe pas — c'est ce qui empeche
     ce bloc de devenir la porte derobee ou toute valeur finit par se
     poser. */
  --pas: var(--rythme-base);
  --mesure: 65ch;
  --filet: 0.0625rem;
  --pas-quart: calc(var(--pas) * 0.25);
  --pas-demi: calc(var(--pas) * 0.5);
  --pas-double: calc(var(--pas) * 2);
  --pas-triple: calc(var(--pas) * 3);
  --large: 77.5rem;
  --carte-min: 17rem;
  --texte-mention: calc(var(--echelle-base) * 0.635);
  --texte-secondaire: calc(var(--echelle-base) * 0.797);
  --texte-courant: var(--echelle-base);
  --texte-appui: calc(var(--echelle-base) * 1.255);
  --texte-titre: calc(var(--echelle-base) * 1.977);
  --texte-titre-fort: calc(var(--echelle-base) * 3.113);
  --laterale: 20rem;
  --couleur-texte-faible: color-mix(in srgb, var(--couleur-texte) 65%, var(--couleur-fond));
  --couleur-bordure: color-mix(in srgb, var(--couleur-accent) 5%, color-mix(in srgb, var(--couleur-texte) 10%, var(--couleur-fond)));
  --couleur-accent-faible: color-mix(in srgb, var(--couleur-accent) 9%, var(--couleur-fond));
  --pas-trois-quarts: calc(var(--pas) * 0.75);
  --pas-un-quart: calc(var(--pas) * 1.25);
  --pas-sept-quarts: calc(var(--pas) * 1.75);
  --pas-trois-demi: calc(var(--pas) * 3.5);
  --pas-quadruple: calc(var(--pas) * 4);
  --texte-titre-faible: calc(var(--echelle-base) * 1.575);
  --texte-titre-large: calc(var(--echelle-base) * 2.481);
  --couleur-texte-appui: color-mix(in srgb, var(--couleur-texte) 81%, var(--couleur-fond));
  --couleur-surface-attenuee: color-mix(in srgb, var(--couleur-accent) 5%, var(--couleur-fond));
  --couleur-sur-sombre: color-mix(in srgb, var(--couleur-surface) 62%, var(--couleur-texte));
  --couleur-bordure-forte: color-mix(in srgb, var(--couleur-accent) 63%, var(--couleur-fond));
  --interlettre-affiche: -0.025em;
  --interlettre-titre: -0.02em;
  --interlettre-titre-faible: -0.01em;
  --interlettre-capitale: 0.06em;
  --flou-entete: 0.625rem;
  --marge-laterale: 2.5rem;
  --filet-fort: calc(var(--filet) * 4);
}

body[data-densite="compacte"] { --pas: calc(var(--rythme-base) * 0.75); }
body[data-densite="confortable"] { --pas: calc(var(--rythme-base) * 1); }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: var(--police-texte);
  font-size: var(--echelle-base);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--police-titre);
  line-height: 1.2;
  margin: calc(var(--pas) * 1.5) 0 var(--pas);
}

h1 { font-size: var(--texte-titre-large); letter-spacing: var(--interlettre-affiche); }
h2 { font-size: var(--texte-titre-faible); letter-spacing: var(--interlettre-titre); }
h3 { font-size: var(--texte-appui); letter-spacing: var(--interlettre-titre-faible); }

p, ul, ol, blockquote, figure, table { margin: 0 0 var(--pas); }

a { color: var(--couleur-lien); }
a:hover, a:focus { color: var(--couleur-accent); }

code, kbd, samp, .valeur { font-family: var(--police-mono); }

.entete, .pied {
  border-color: var(--couleur-bordure);
  border-style: solid;
  /* Padding VERTICAL seulement : l horizontal vient de .enveloppe, qui aligne
     le chassis sur le contenu au pixel pres. Le poser aux deux endroits le
     doublait, et l en-tete ne tombait pas d aplomb avec la page. */
  padding: var(--pas) 0;
}
.entete { border-width: 0; }
.pied   { border-width: var(--filet) 0 0; color: var(--couleur-texte-faible); }

.entete__marque {
  font-family: var(--police-titre);
  font-size: var(--texte-titre);
  font-weight: 700;
  text-decoration: none;
  color: var(--couleur-texte);
}

.page {
  /* Largeur LARGE : .page est le CONTENEUR de page. La mesure de lecture
     (65ch) est portee par .article, qui l a toujours portee — la poser aussi
     ici faisait deux sources pour une meme contrainte, et empechait l accueil
     de disposer une grille et une colonne laterale. */
  max-width: var(--large);
  margin: 0 auto;
  /* Vertical DOUBLE, horizontal simple : le contenu decolle du chassis sans
     s eloigner des bords. Ecrit en une seule declaration — un padding-block
     pose avant un raccourci `padding` est ecrase par lui, et la regle existe
     alors sans rien faire. */
  padding: var(--pas-double) var(--pas);
}

/* Les sources declarees. Elles ferment la page : un lecteur qui veut verifier
   descend, celui qui voulait la reponse ne les traverse pas. Le filet et la
   couleur faible les separent du corps sans les enterrer — une provenance
   qu on cache vaut une provenance absente. Toutes les valeurs viennent des
   jetons ; aucune n est ecrite ici. */
.sources {
  /* Mesure de LECTURE : les sources sont du texte, et le squelette les emet
     hors du corps a deux colonnes — sans cette largeur elles s etalaient sur
     toute la page, sous la colonne laterale, alors qu elles appartiennent a
     l article. */
  max-width: var(--mesure);
  margin-top: var(--pas-double);
  padding-top: var(--pas);
  border-top: var(--filet) solid var(--couleur-bordure);
}
.sources ol { padding-left: var(--pas); }
.sources li { margin-bottom: var(--pas-demi); }
.source-date {
  color: var(--couleur-texte-faible);
  white-space: nowrap;
}

.fil ol, .liens-fin ul { list-style: none; padding: 0; }
.fil li { display: inline; }
.fil li + li::before { content: " / "; color: var(--couleur-texte-faible); }

/* La mention de provenance. couleur.marquage teinte le fond ; le chargeur
   garantit qu'elle differe de couleur.fond, donc ce bloc est toujours
   visible. */
.provenance {
  background: var(--couleur-marquage);
  border-left: var(--filet-fort) solid var(--couleur-accent);
  border-radius: var(--rayon-base);
  padding: var(--pas);
}

.reponse-courte {
  font-size: var(--texte-appui);
  border-left: var(--filet-fort) solid var(--couleur-accent-faible);
  padding-left: var(--pas);
}

blockquote {
  background: var(--couleur-surface);
  border-radius: var(--rayon-base);
  padding: var(--pas);
  margin-left: 0;
  margin-right: 0;
}
cite { color: var(--couleur-texte-faible); font-style: normal; }

figure { margin-left: 0; margin-right: 0; }
img { max-width: 100%; height: auto; border-radius: var(--rayon-base); }
figcaption { color: var(--couleur-texte-faible); font-size: var(--texte-secondaire); }

table { border-collapse: collapse; width: 100%; }
th, td {
  border: var(--filet) solid var(--couleur-bordure);
  padding: calc(var(--pas) * 0.5);
  text-align: left;
}
thead th { background: var(--couleur-surface); }


/* ORDRE DU DOM contre ORDRE VISUEL.
 *
 * Le squelette emet le CONTENU avant le CHASSIS (voir partials/base.j2) : la
 * reponse doit tenir dans les 200 premiers mots du texte visible, et un
 * extracteur lit l ordre du document. Ces trois regles remettent la page dans
 * l ordre attendu a l ecran, sans changer un pixel.
 */
/* 100vh — EXCEPTION NOMMEE (porte1.py, « hauteur-de-vue »). C est un
   MECANISME de mise en page, pas une valeur esthetique : il colle le pied en
   bas sur une page courte. Aucun jeton ne peut le porter — sa valeur n est pas
   choisie, elle est la definition meme de « toute la hauteur visible ». */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.evitement { order: 1; }
.entete { order: 2; }
.page { order: 3; flex: 1 0 auto; }
.pied { order: 4; }

/* Le lien d evitement ne se montre qu au clavier : il repare l ordre de
 * tabulation sans peser sur ce que voit un lecteur. */
.evitement {
  position: absolute;
  left: -9999px;
  background: var(--couleur-accent);
  color: var(--couleur-fond);
  padding: calc(var(--pas) * 0.5) var(--pas);
  text-decoration: none;
}
.evitement:focus { position: static; display: block; text-align: center; }

/* Sommaire derive. Il ne s affiche qu au-dela d un seuil declare au tronc. */
.sommaire {
  background: var(--couleur-surface);
  border-left: calc(var(--filet) * 4) solid var(--couleur-accent);
  padding: calc(var(--pas) * 0.5) var(--pas);
  margin-bottom: var(--pas);
}
.sommaire h2 { font-size: var(--texte-courant); margin-top: 0; }
.sommaire ol { margin: 0; padding-left: var(--pas); }

/* =====================================================================
   STRUCTURE SOBRE — palier 2 (2026-08-30).

   Chaque classe emise par un gabarit a une regle ici, et chaque regle
   correspond a une classe emise : la porte de couverture verifie les DEUX
   sens. C est la premiere porte qui verifie une PRESENCE — les quatre
   autres verifient une absence, ce qui explique qu un rendu les passait
   toutes en ressemblant a un export traitement de texte.

   Aucune valeur litterale : tout vient des dix-sept jetons ou des
   seize derives declares.
   ===================================================================== */

/* ------------------------------------------------------------ en-tete */
.entete {
  background: var(--couleur-surface);
  border-bottom: var(--filet) solid var(--couleur-bordure);
  padding: var(--pas) 0;
  text-align: center;
}
.entete__marque {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--texte-titre-fort);
  color: var(--couleur-texte);
  text-decoration: none;
}
.entete__baseline {
  color: var(--couleur-texte-faible);
  font-size: var(--texte-secondaire);
  margin: var(--pas-quart) auto 0;
  max-width: var(--mesure);
}
.entete__liens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pas);
  font-size: var(--texte-secondaire);
}

/* ------------------------------------------------------- fil d Ariane */
.fil { font-size: var(--texte-mention); padding: var(--pas-demi) 0; }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--pas-quart); margin: 0; padding: 0; }
.fil li + li::before { content: "> "; color: var(--couleur-texte-faible); }
.fil a { color: var(--couleur-texte-faible); }

/* -------------------------------------------------------- metadonnees */
.meta {
  display: flex; flex-wrap: wrap; gap: var(--pas-demi); align-items: center;
  font-size: var(--texte-mention);
  color: var(--couleur-texte-faible);
  margin: 0 0 var(--pas);
}
.meta__signature { font-style: italic; }
.badge {
  background: var(--couleur-accent-faible);
  color: var(--couleur-accent);
  border-radius: var(--rayon-base);
  padding: var(--pas-quart) var(--pas-demi);
  font-weight: 700;
  letter-spacing: var(--interlettre-capitale);
  text-transform: uppercase;
}

/* ------------------------------------------------ listes de l accueil */
.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--carte-min), 1fr));
  gap: var(--pas);
  list-style: none; margin: 0; padding: 0;
}
.carte {
  background: var(--couleur-fond);
  border: var(--filet) solid var(--couleur-bordure);
  border-radius: var(--rayon-base);
  padding: var(--pas);
}
.carte__meta {
  display: flex; flex-wrap: wrap; gap: var(--pas-demi); align-items: center;
  font-size: var(--texte-mention); color: var(--couleur-texte-faible); margin: 0;
}
.carte__titre a { color: var(--couleur-lien); }
.carte__titre { font-family: var(--police-titre); font-size: var(--texte-courant); margin: var(--pas-quart) 0 0; }
.carte__titre a { color: var(--couleur-texte); text-decoration: none; }
.carte__titre a:hover { color: var(--couleur-lien); }

/* ------------------------------------------------------------ article */
.article { max-width: var(--mesure); }
.fiche, .fiche-entreprise, .test, .observatoire, .highlight, .theme { max-width: var(--large); }
.theme__chapeau { font-size: var(--texte-appui); color: var(--couleur-texte-faible); }
.fiche__editeur, .observatoire__periode, .highlight__date {
  color: var(--couleur-texte-faible); font-size: var(--texte-secondaire);
}

/* --------------------------------------------- valeurs et leurs etats */
.grille { margin: var(--pas) 0; }
.grille dt { font-weight: 600; border-top: var(--filet) solid var(--couleur-bordure); padding-top: var(--pas-demi); }
.grille dd { margin: 0 0 var(--pas-demi); }
.valeur { font-weight: 600; display: block; }
.valeur--sans-objet, .valeur--non-publie, .valeur--non-mesure {
  font-weight: 400; font-style: italic; color: var(--couleur-texte-faible);
}
/* La provenance SOUS la valeur, et plus petite : c est la VALEUR qui se
   compare. Cote a cote et de meme taille, la source la noyait. */
.valeur__provenance {
  display: block;
  font-size: var(--texte-mention);
  color: var(--couleur-texte-faible);
  margin-top: var(--pas-quart);
}

/* ------------------------------------------------- fiche et avantages */
.fiche__valeurs, .fiche__avantages, .observatoire__faits, .observatoire__methode,
.highlight__elements, .test__tableau, .test__statuts, .test__points,
.rattachements, .mentions,
.fiche__pour-qui, .fiche__cas, .fiche__offres, .fiche__limites, .fiche__propos, .fiche__atouts { margin: var(--pas-double) 0; }
/* TODO-877 : la page ecrite — la presentation en chapeau, le contexte dans son encadre */
.fiche__presentation { font-size: var(--texte-appui); color: var(--couleur-texte-appui); }
.fiche__contexte { margin: var(--pas-double) 0; padding: var(--pas); background: var(--couleur-surface); border-left: calc(var(--filet) * 4) solid var(--couleur-bordure-forte); border-radius: var(--rayon-base); }
/* Les offres de la fiche (2026-09-27) : le libelle porte la ligne, la date et la page en dessous, comme une valeur. */
.offres { list-style: none; padding: 0; margin: 0; }
.offres li { border-top: var(--filet) solid var(--couleur-bordure); padding: var(--pas-demi) 0; }
.offre__libelle { font-weight: 600; }
.fiche__prix-date { font-size: var(--texte-secondaire); color: var(--couleur-texte-faible); }
/* L avertissement de provenance des valeurs. SOBRE, sans fond : le fond de
   marquage est reserve a .fiche__avertissement, qui signale des propos de
   l editeur rapportes tels quels. Les confondre donnerait a une note
   methodologique l apparence d un contenu fourni par la marque. */
.fiche__provenance {
  font-size: var(--texte-secondaire);
  color: var(--couleur-texte-faible);
  margin: 0 0 var(--pas);
}
.fiche__avertissement {
  background: var(--couleur-marquage);
  padding: var(--pas-demi) var(--pas);
  border-radius: var(--rayon-base);
  font-size: var(--texte-secondaire);
}
.avantages, .elements, .statuts, .points, .mentions__liste { list-style: none; padding: 0; margin: 0; }
.avantage, .element {
  border-left: calc(var(--filet) * 4) solid var(--couleur-bordure);
  padding: var(--pas-quart) var(--pas-demi);
  margin-bottom: var(--pas-demi);
}
.avantage__critere, .element__source, .point__critere {
  display: block; font-size: var(--texte-mention); color: var(--couleur-texte-faible);
  text-transform: uppercase; letter-spacing: var(--interlettre-capitale);
}
.avantage__texte, .point__texte { display: block; }

/* --------------------------------------------------------- test */
.tableau { border-collapse: collapse; width: 100%; font-size: var(--texte-secondaire); }
.protocole { background: var(--couleur-surface); padding: var(--pas); border-radius: var(--rayon-base); }
.protocole__liste { display: grid; grid-template-columns: max-content 1fr; gap: var(--pas-quart) var(--pas); margin: 0; }
.points-produit { margin-bottom: var(--pas); }
.points--pour li {
  border-left: calc(var(--filet) * 4) solid var(--couleur-accent);
  padding-left: var(--pas-demi); margin-bottom: var(--pas-demi);
}
.points--contre li {
  border-left: calc(var(--filet) * 4) solid var(--couleur-bordure);
  padding-left: var(--pas-demi); margin-bottom: var(--pas-demi);
}
.contradictoire {
  border: var(--filet) solid var(--couleur-bordure);
  border-radius: var(--rayon-base);
  padding: var(--pas); margin: var(--pas-double) 0;
}
.contradictoire__sans, .contradictoire__reponse { color: var(--couleur-texte-faible); }

/* --------------------------------------------------------------- pied */
.pied {
  background: var(--couleur-surface);
  border-top: calc(var(--filet) * 2) solid var(--couleur-bordure);
  margin-top: var(--pas-triple);
  padding: var(--pas-double) 0;
  font-size: var(--texte-secondaire);
}
.carte__extrait {
  margin: var(--pas-demi) 0 0;
  color: var(--couleur-texte-faible);
  font-size: var(--texte-secondaire);
}
.pied__editeur { margin: 0; }
.pied__bas {
  max-width: var(--large); margin: var(--pas-double) auto 0;
  padding: var(--pas) var(--pas) 0;
  border-top: var(--filet) solid var(--couleur-bordure);
  color: var(--couleur-texte-faible);
}

/* Vignette de carte. Elle est CONDITIONNELLE : la direction est sobre, l image
   illustre et ne porte pas la mise en page. Une carte sans vignette reste une
   carte — contrairement a la direction dense, ou son absence la reduisait a une
   ligne de liste. */
.carte__vignette {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--rayon-base);
  margin-bottom: var(--pas-demi);
}

/* ------------------------------------------------- structure portee d A2 */

/* Le gabarit a deux colonnes. Le contenu prend deux largeurs de carte, la
   laterale sa largeur declaree ; sous cette place, flex-wrap les empile sans
   qu aucun point de rupture ne soit ecrit. */
.corps-deux-colonnes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas-double);
  align-items: flex-start;
}
.corps-deux-colonnes > :first-child { flex: 1 1 calc(var(--carte-min) * 2); min-width: 0; }

.section { margin-bottom: var(--pas-double); }
.section__titre {
  font-family: var(--police-titre);
  font-size: var(--texte-titre);
  font-weight: 600;
  margin: 0 0 var(--pas);
  border-left: calc(var(--filet) * 5) solid var(--couleur-accent);
  padding-left: var(--pas-demi);
}

/* La zone de une : l article dominant occupe deux colonnes de la grille et
   porte un titre plus grand. C est la seule hierarchie de la page qui ne
   vienne pas de la date. */
.une {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--carte-min), 1fr));
  gap: var(--pas-double) var(--pas);
  list-style: none; margin: 0 0 var(--pas-double); padding: 0;
}
.une .carte--dominante {
  grid-column: span 2;
  border-top: calc(var(--filet) * 4) solid var(--couleur-accent);
}
.une .carte--dominante .carte__titre { font-size: var(--texte-appui); }
.carte__corps { min-width: 0; }

/* La colonne laterale. Elle porte des CONTENUS — releves, moyens de suivre —
   jamais un itineraire par familles : c est ce qui la rend compatible avec
   « le lecteur arrive par une reponse et repart ». */
.laterale { flex: 1 1 var(--laterale); }
.laterale > * + * { margin-top: var(--pas-double); }
.laterale__bloc {
  background: var(--couleur-surface);
  border-radius: var(--rayon-base);
  padding: var(--pas);
}
.laterale__bloc h2 {
  font-family: var(--police-texte);
  font-size: var(--texte-mention);
  text-transform: uppercase;
  letter-spacing: var(--interlettre-capitale);
  color: var(--couleur-accent);
  margin: 0 0 var(--pas-demi);
}
.laterale__bloc ul { list-style: none; margin: 0; padding: 0; }
.laterale__bloc li + li { margin-top: var(--pas-demi); }
.laterale__bloc time {
  display: block;
  font-size: var(--texte-mention);
  color: var(--couleur-texte-faible);
}
.laterale__note {
  font-size: var(--texte-mention);
  color: var(--couleur-texte-faible);
  margin: var(--pas-demi) 0 0;
}

/* -------------------------------------------- en-tete et pied recomposes */
/* L enveloppe donne au chassis la MEME largeur que le contenu. Un en-tete qui
   ne s aligne pas sur la page en dessous se voit au premier coup d oeil. */
.enveloppe {
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 var(--marge-laterale);
}
/* Marque et baseline sur la meme ligne de base, liens pousses a droite. Sous
   la place necessaire, flex-wrap les empile — aucun point de rupture ecrit. */
.entete__haut {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pas-demi) var(--pas);
}
/* B5 — L EN-TETE COLLANT. Il reste EMIS APRES le contenu dans le document :
   le deplacer devant pousserait reponse_courte hors des 200 premiers mots sur
   deux des trois questions du jeu de demonstration (230 et 214 mots, mesure du
   2026-09-04). « En tete » est une position a l ECRAN, et elle s obtient ici.
   Le flou d arriere-plan detache l en-tete du texte qui defile dessous. */
.entete {
  background: var(--couleur-surface);
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(var(--flou-entete));
}

.pied__haut {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--pas-demi) var(--pas);
  padding-bottom: var(--pas-demi);
}
.pied__marque {
  font-family: var(--police-titre);
  font-weight: 700;
  color: var(--couleur-texte);
  margin: 0;
}
.pied__liens {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas);
}
.pied__bas {
  padding-top: var(--pas-demi);
  font-size: var(--texte-mention);
}

/* La bande de navigation : le seul aplat de couleur du chassis.
   Le texte y prend la couleur de FOND — sur un aplat d accent, c est le
   contraste qui porte la lisibilite, pas la taille. Le soulignement
   n apparait qu au survol et au focus : une bande deja coloree n a pas besoin
   d etre soulignee en permanence pour se donner a lire. */
.entete__bande { background: var(--couleur-accent); }
/* Le vertical de la bande, sous un selecteur a DEUX classes : .enveloppe
   arrive plus loin dans la feuille et son raccourci `padding` remettrait un
   padding-block a zero. Plus specifique, donc gagnant sans dependre de
   l ordre — un espacement qui tient a la position d une regle se casse au
   premier deplacement. */
.entete__bande .entete__liens { padding-block: var(--pas-demi); }

/* Le soulignement de survol est un filet BAS. Pose seul, il decale le texte
   vers le haut ; un filet HAUT transparent de meme epaisseur retablit la
   symetrie, et le texte tombe au centre de la bande. */
.entete__bande a {
  color: var(--couleur-fond);
  text-decoration: none;
  font-weight: 600;
  padding-block: var(--pas-quart);
  border-top: calc(var(--filet) * 3) solid transparent;
  border-bottom: calc(var(--filet) * 3) solid transparent;
}
.entete__bande a:hover, .entete__bande a:focus { border-bottom-color: var(--couleur-fond); }

/* La famille, en couleur d accent. Elle remplace le badge : un aplat gris
   repetait la meme information en pesant plus lourd. */
.famille {
  color: var(--couleur-accent);
  font-weight: 700;
  font-size: var(--texte-mention);
  text-transform: uppercase;
  letter-spacing: var(--interlettre-capitale);
}
/* Sur une publication proposee par une entreprise, la famille prend le fond de
   marquage. Le chargeur garantit que couleur.marquage differe de couleur.fond,
   donc ce marquage est toujours visible — c est la meme garantie qui protege
   la mention de provenance en ouverture. */
.famille--client {
  color: var(--couleur-texte);
  background: var(--couleur-marquage);
  padding: 0 var(--pas-quart);
  border-radius: var(--rayon-base);
}

/* SEPARATION PAR LA COULEUR, pas par un filet.
   Une zone posee sur un fond distinct se lit comme un bloc ; un trait, lui,
   se contente de couper. Le fond vient de couleur.surface, dont le chargeur
   garantit qu elle differe de couleur.fond — la separation est donc toujours
   visible, quelle que soit la palette du blog.

   PAS de pleine largeur (« full bleed ») : la technique demande
   calc(50% - 50vw), qui deborde horizontalement des qu une barre de defilement
   apparait. Un bloc a coins arrondis separe aussi nettement sans ce risque. */
.section--surface {
  background: var(--couleur-accent-faible);
  border-radius: var(--rayon-base);
  padding: var(--pas-double) var(--pas);
  margin-bottom: var(--pas-double);
}
/* La carte posee SUR la surface reprend le fond de page : sans cela, deux gris
   proches se superposent et la carte cesse de se detacher. */
.section--surface .carte { background: var(--couleur-fond); }

/* ============================================================================
   ETAPE 3B — LES CLASSES DU CHASSIS, DECLAREES ET VIDES.

   Le 2026-09-04, l etape 3b pose la STRUCTURE des blocs de la maquette :
   bandeau de declaration, logotypes, marque sur deux lignes, navigation
   calculee, signature du reseau. Elle n en pose PAS la mise en forme — c est
   l etape 4, et la separation est le sujet meme de ce lot.

   Ces regles sont donc VIDES, et le vide est une declaration, pas un oubli.
   Motif : la porte de couverture exige que toute classe emise porte une regle
   et qu aucune regle ne soit orpheline. Sans ces huit lignes, un gabarit juste
   ferait refuser le rendu ; avec une valeur dedans, le compteur de la porte 1
   bougerait et prouverait qu on a ecrit du CSS en pretendant ne pas le faire.

   Le compteur de la porte 1 doit rester identique de part et d autre de ce
   bloc. C est la preuve mecanique qu aucune valeur esthetique n a ete ecrite.
   ============================================================================ */
/* -------------------------------------------------- LE BANDEAU (B4)
   Il porte la transparence du reseau, et il la porte SUR FOND SOMBRE : le
   contraste avec la page dit « ceci n est pas du contenu » avant qu on lise.
   Le fond est --couleur-texte, donc l identite du blog — pas un #111111 ecrit
   ici, qui serait faux sur une identite sombre. Le texte dessus descend du
   meme jeu : --couleur-sur-sombre est calcule POUR ce fond. */
.bandeau {
  background: var(--couleur-texte);
  color: var(--couleur-sur-sombre);
  font-family: var(--police-mono);
  font-size: var(--texte-mention);
}
.bandeau__corps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pas-trois-quarts) var(--pas);
  padding: var(--pas-sept-quarts) var(--marge-laterale);
}
/* Le logotype est dimensionne par sa HAUTEUR : sa viewBox fait 590.5 x 210.3,
   le rapport est fixe, et une largeur imposee le deformerait sur un ecran
   etroit. width: auto laisse le rapport decider. */
.bandeau__logo {
  height: var(--texte-appui);
  width: auto;
}
/* La declaration du reseau. Elle n etait JAMAIS emise avant le 2026-09-05 :
   aucun blog ne portait identite.declaration_reseau, donc le bandeau ne rendait
   que le logotype et le lien. La couverture a refuse le rendu des que la classe
   est apparue — c est son role.

   Elle herite du bandeau sa couleur, sa police et sa taille : ce qu on pose ici
   est ce qui lui est propre, pas une redite. */
.bandeau__texte {
  margin: 0;
  max-width: var(--mesure);
}
.bandeau__lien {
  color: var(--couleur-sur-sombre);
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: var(--interlettre-capitale);
}

/* ------------------------------------------ LA MARQUE ET LA NAV (B6, B7) */
.entete__nom {
  font-family: var(--police-titre);
  font-size: var(--texte-titre-faible);
  font-weight: 700;
  letter-spacing: var(--interlettre-titre);
  color: var(--couleur-texte);
  text-decoration: none;
  display: block;
}
/* Le lien de SERVICE se distingue des familles sans changer de taille : il
   n est pas plus important, il est d une autre nature. */
.entete__service {
  margin-left: auto;
  color: var(--couleur-texte-appui);
}
/* LE LIEN DE LANGUE (TODO-880) suit le lien de service, de la meme nature : il
   ne change pas de sujet, il change de langue. */
.entete__langue {
  color: var(--couleur-texte-appui);
}

/* ------------------------------------------------ LE PIED (B10)
   Le logotype clair descend ici le 2026-09-04 : le bandeau porte deja la
   marque du reseau en haut de page. Une marque reseau en haut, une en bas, et
   entre les deux c est le blog. */
.pied__logo {
  height: var(--texte-titre);
  width: auto;
  display: block;
  margin-bottom: var(--pas-trois-quarts);
}
.pied__reseau {
  font-family: var(--police-titre);
  color: var(--couleur-texte-appui);
  margin: 0 0 var(--pas-trois-quarts);
}

/* ---------------------------------------------- LE MARQUAGE DE PROVENANCE
   Un FILET, pas une pastille — il court le long de toute la fiche et ne peut
   pas defiler hors de l ecran. Le <p> est vide tant que marquage.json ne porte
   pas de libelle : il ne montre alors que son filet, ce qui est deja un
   marquage. La couleur est --couleur-bordure-forte et non --couleur-marquage :
   le filet SITUE, le mot ALERTERA quand il existera. */
.marquage {
  border-left: var(--filet-fort) solid var(--couleur-bordure-forte);
  padding-left: var(--pas);
  margin: 0 0 var(--pas-un-quart);
  color: var(--couleur-marquage);
  font-size: var(--texte-secondaire);
  text-transform: uppercase;
  letter-spacing: var(--interlettre-capitale);
  min-height: var(--pas-un-quart);
}

/* ----------------------------------------------------- RESPIRATIONS
   Les deux plus grands pas du rythme se posent aux deux seules coupures de la
   page : entre les sections de l accueil, et avant le chassis de bas de page. */
.section + .section { margin-top: var(--pas-trois-demi); }
.pied { margin-top: var(--pas-quadruple); }
.carte__extrait { color: var(--couleur-texte-appui); }
.laterale { background: var(--couleur-surface-attenuee); }

/* ======================================================================
   LES POINTS DE RUPTURE — poses le 2026-09-04, il n y en avait AUCUN.

   La maquette est dessinee a une seule largeur. Le tronc s en tirait par des
   mecanismes qui se replient seuls — flex-wrap, auto-fit/minmax — et c est
   pourquoi rien ne cassait visiblement. Mais deux choses ne se replient pas
   toutes seules : la laterale de l accueil, et l en-tete collant sur un ecran
   court.

   DEUX LARGEURS, ET PAS PLUS. Chaque point de rupture est une regle de plus a
   tenir d accord avec les autres ; on n en pose que la ou une mise en page
   cesse de fonctionner, jamais « par prudence ».

     40rem (640 px) — sous cette largeur, une seule colonne partout.
     60rem (960 px) — au-dessus, la laterale se met a cote du contenu.

   LES LITTERAUX DE CONDITION SONT UNE EXCEPTION NOMMEE (« media »). Une
   condition de media query ne resout pas var() : la regle serait ignoree en
   silence. Meme motif que l attribut sizes. La porte VOIT ces valeurs et les
   admet en les nommant ; un litteral pose DANS le bloc reste refuse.
   ====================================================================== */
@media (min-width: 60rem) {
  .corps-deux-colonnes {
    display: grid;
    grid-template-columns: 1fr var(--laterale);
    gap: var(--pas-double);
    align-items: start;
  }
}

@media (max-width: 40rem) {
  /* Le bandeau empile ses trois elements ; le lien cesse d etre pousse a
     droite, ou il se retrouverait seul sur une ligne. */
  .bandeau__lien, .entete__service { margin-left: 0; }
  .entete__haut { gap: var(--pas-demi); }
}

/* L EN-TETE COLLANT SUR UN ECRAN COURT — la rupture est en HAUTEUR, pas en
   largeur, parce que c est la hauteur qui pose le probleme : un en-tete
   collant qui mange un tiers de l ecran est pire que pas d en-tete. Sous
   32rem de haut (512 px, un telephone en paysage), il redevient statique. */
@media (max-height: 32rem) {
  .entete { position: static; }
}