/* Coque du site — ce que l'application ajoute à la feuille de la maquette.
   /site/styles.css est la copie conforme de site-point-zero-v4 : on ne l'édite
   pas, sinon la prochaine livraison de Codex effacerait la correction. Tout
   écart propre à l'application vit ici. Chargée après styles.css. */

/* --- Le logo -----------------------------------------------------------------
   La maquette dessine la marque en CSS (deux demi-anneaux violets) et pose le
   nom en texte à côté. Le vrai logo est un bloc unique : spirale + « POINT ZERO
   2050 ». Il remplace donc les deux, et .brand-mark / .brand strong / .brand
   small de la maquette ne servent plus.
   Servi à 440 px de large pour rester net en densité double ; les attributs
   width/height du HTML réservent la place avant chargement. */
.brand-logo { display: block; width: 100%; max-width: 200px; height: auto; }

/* La colonne de gauche de l'en-tête passe à 1fr sous 820 px : sans plafond, le
   logo occuperait toute la largeur disponible. */
@media (max-width: 820px) {
  .brand-logo { max-width: 150px; }
}

/* Pied de page : version claire du même bloc, sur le fond sombre.
   flex: none — .footer-brand est un flex container, l'image se laisserait
   comprimer par le paragraphe voisin. */
.footer-brand .brand-logo { max-width: 186px; flex: none; }

/* --- .info-card sur bande sombre ---------------------------------------------
   Trou dans la feuille de la maquette : elle adapte .niveau-card, .duo-card et
   .contradiction-grid aux bandes sombre et violette, mais pas .info-card. Or
   .band-shadow p recolore le texte en blanc à 78 % pendant que la carte garde
   son fond crème — le texte disparaît (contraste mesuré : 1). Même traitement
   que les trois autres familles de cartes. */
.band-shadow .info-card,
.band-violet .info-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.band-shadow .info-card h3,
.band-violet .info-card h3 { color: var(--white); }
.band-shadow .info-card p,
.band-violet .info-card p { color: rgba(255,253,248,.72); }
.band-shadow .info-card a,
.band-violet .info-card a { color: var(--solar); }
.band-shadow .info-card .number,
.band-violet .info-card .number { background: rgba(239,184,63,.16); color: var(--solar); }

/* --- CE QUI SUIT A D'ABORD ÉTÉ ÉCRIT DANS styles.css, PAR ERREUR --------------
   Les trois corrections du 5 septembre 2026 y ont été posées avant que je lise
   l'en-tête de CE fichier : « /site/styles.css est la copie conforme de
   site-point-zero-v4 : on ne l'édite pas, sinon la prochaine livraison de Codex
   effacerait la correction. » Déplacées ici, où elles survivront à la prochaine
   livraison. `coque.css` est chargée APRÈS styles.css : à spécificité égale,
   c'est elle qui gagne.

   ── 1. L'ÉTAGÈRE DES LIVRES : UNE COLONNE, PAS TROIS ────────────────────────
   `.book-shelf` a été dessinée pour TROIS couvertures séparées posées en 3D —
   c'est ce que disent encore `repeat(3, 1fr)`, son `perspective` et les règles
   `.book-volume` / `.book-two`, trois classes qu'AUCUNE vue ne rend. L'accueil y
   met deux enfants : une image où les trois livres sont déjà composités, et une
   citation.

   Mesuré sur la préprod à 1440 px : l'image occupait la 1re colonne — 201 px
   pour une source de 1154, soit 17 % — la citation la 2e, d'où ses lignes de
   trois mots, et la 3e restait VIDE. Après : image 631 × 435 (55 % de la source,
   jamais agrandie), citation sur toute la largeur, 164 px de haut au lieu de 438.

   ⚠️ LE TÉLÉPHONE AVAIT DÉJÀ RAISON : la requête à 560 px de styles.css pose
   `1fr` depuis le début. Le défaut courait de 561 px à toute largeur. */
.book-shelf { grid-template-columns: 1fr; }

/* ── 2. LES COUVERTURES DES CINQ PARCOURS ────────────────────────────────────
   La couverture saigne jusqu'aux bords de la carte, et sa marge négative est
   LIÉE au remplissage par deux variables. Écrire `-26px` en dur aurait marché
   aujourd'hui et se serait décalé au premier ajustement du remplissage, sans que
   rien ne le dise — le genre de nombre qui cesse d'être juste en silence.

   Le remplissage est redéclaré ici, et pas seulement les variables : sinon le
   lien entre les deux ne tiendrait que par convention, d'un fichier à l'autre. */
.parcours-card { --pc-x: 26px; --pc-y: 30px; padding: var(--pc-y) var(--pc-x) 34px; }
.parcours-cover { display: block; width: calc(100% + var(--pc-x) * 2); height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: calc(var(--pc-y) * -1) calc(var(--pc-x) * -1) 20px; }

/* ⚠️ LE NUMÉRO FANTÔME PASSE SUR LA PHOTO, il lui fallait donc une autre encre.
   Il était en violet à 8 % d'opacité, posé sur le papier crème : invisible sur
   une image.

   ⚠️ L'OMBRE EST DOUBLE, ET C'EST MESURÉ. La luminance moyenne du coin où il se
   pose vaut 19, 30, 48 et 88 sur quatre couvertures — mais 148 sur celle du
   Réveil, un ciel clair. Une seule ombre diffuse suffisait aux quatre premières
   et laissait la cinquième fantomatique ; la seconde, courte et serrée, détoure
   le chiffre. Une valeur qui tient sur quatre cas sur cinq n'est pas réglée. */
.parcours-card::before { z-index: 1; top: 8px; color: rgba(255,253,248,.72); text-shadow: 0 2px 14px rgba(23,19,27,.78), 0 0 4px rgba(23,19,27,.42); }

/* ── 3. `.key-grid` REJOINT LA FAMILLE DES CARTES TRAITÉES SUR LES BANDES ────
   ⚠️ SON ABSENCE RENDAIT QUATRE BLOCS DE TEXTE INVISIBLES. La grille pose
   `background: var(--white)` ; posée dans une `.band-violet`, elle recevait de
   `.band-violet h3` et `.band-violet p` un texte BLANC. Une carte blanche, un
   texte blanc. Sur /ecosysteme, seuls les numéros survivaient — aucune règle de
   bande ne vise un `b`. Signalé par Boris comme « cette rubrique est vide » :
   elle ne l'était pas.

   Le remède suit celui des autres cartes plutôt que d'inventer le sien : sur une
   bande, une carte devient TRANSLUCIDE et laisse le texte clair la traverser.
   C'est ce que font déjà `.niveau-card`, `.duo-card`, `.contradiction-grid` et
   `.info-card` juste au-dessus. */
.band-shadow .key-grid,
.band-violet .key-grid { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.band-shadow .key-grid article,
.band-violet .key-grid article { border-color: rgba(255,255,255,.18); }
/* Le numéro passe au solaire, comme les `.eyebrow` de ces mêmes bandes : le
   violet sur violet ne se lisait plus. */
.band-shadow .key-grid b,
.band-violet .key-grid b { color: var(--solar); }

/* ── 4. QUATRE ARTICLES DANS UNE GRILLE DE DEUX ──────────────────────────────
   En trois colonnes, la seconde rangée n'en portait qu'un et laissait DEUX cases
   vides — le trou signalé par Boris. Quatre dans une grille de trois ne tombe
   jamais juste.

   Les filets suivent : `.key-grid` coupe le sien à `:nth-child(3n)`, ce qui
   dessinerait un trait au milieu d'une rangée de deux.

   ⚠️ ET ELLES SONT BORNÉES À 561 px, parce que la première version ne l'était
   pas et que je l'ai payée en production. `styles.css` passe `.key-grid` à UNE
   colonne sous 560 px (son `@media (max-width: 560px)`) ; `.ingenierie-grid`
   porte une seule classe, comme elle — même spécificité — mais vit dans une
   feuille chargée APRÈS. Sans borne, elle rétablissait deux colonnes jusque sur
   un téléphone.

   Mesuré sur la production avant correction : à 375 px, les deux colonnes se
   bloquent sur leur largeur mini-contenu (199 + 176 = 375 px) dans une grille
   de 347, et `overflow: hidden` rogne le texte — « Une économie du Commun »
   coupé net. Débord de 28 px à 375, 13 px à 390, NUL dès 430.

   ⚠️ CES CHIFFRES ONT ÉTÉ REPRIS UNE FOIS. La première série venait d'un
   `documentElement.style.width` — qui élargit l'élément SANS réévaluer la
   moindre media query. Elle mesurait donc sept largeurs dans un seul état de
   feuille. Un seuil ne se mesure qu'en redimensionnant le VIEWPORT.

   ⓘ Entre 430 et 560, deux colonnes tiendraient encore (215 px chacune à 460).
   La borne les abandonne quand même, pour tomber exactement sur le point de
   rupture de `styles.css` : la maquette fait foi, et 215 px de texte utile ne
   valent pas une seconde vérité sur les seuils.

   Les filets suivent la même borne : en colonne unique, ils auraient posé un
   trait à droite et effacé celui du milieu. */
@media (min-width: 561px) {
  .ingenierie-grid { grid-template-columns: repeat(2, 1fr); }
  .ingenierie-grid article:nth-child(3n) { border-right: 1px solid var(--line); }
  .ingenierie-grid article:nth-child(2n) { border-right: 0; }
  .ingenierie-grid article:nth-child(n+3) { border-bottom: 0; }
  .band-shadow .ingenierie-grid article:nth-child(3n),
  .band-violet .ingenierie-grid article:nth-child(3n) { border-right-color: rgba(255,255,255,.18); }
}