/* fonts.css : les deux familles de codeco-decoration, AUTO-HÉBERGÉES.
   Règle du parc : zéro appel distant au runtime (RGPD, LCP qui ne dépend d'aucun tiers).
   Fichiers dans public/fonts/, sous-ensemble latin seul, font-display: swap.
   Familles relevées dans compo/css/tokens.css et dans le lien Google Fonts de compo/index.html
   du 2026-09-05 :
     Fraunces:ital,opsz,wght,SOFT@0,9..144,500,50;0,9..144,600,50;1,9..144,500,50
     DM Sans:wght@400;500

   Décision de portage (2026-09-05) : les fichiers sont EXACTEMENT ceux que Google Fonts servait à
   la compo (fonts.gstatic.com, Fraunces v38, DM Sans v17), donc des fontes VARIABLES restreintes :
   Fraunces garde l'axe opsz 9..144 et l'axe SOFT 50, DM Sans l'axe wght 400..500. Le CSS de la
   compo pilote l'axe optique à la main (`--opsz-grand: "opsz" 96`, `--opsz-courant: "opsz" 24`,
   `font-optical-sizing: none`) : une instance statique n'aurait pas d'axe opsz et le rendu jugé
   changerait de dessin sur tous les titres. Les « instances statiques » du plan de portage ne
   sont donc pas retenues ; la gate `pixels.mjs` est la preuve du bon choix.
   Google déclare une @font-face par graisse en pointant le même fichier : la déclaration est
   reprise à l'identique (mêmes plages, même appariement), seule l'URL change. */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dmsans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dmsans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-500italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* tokens.css — codeco-decoration, trois niveaux : global → sémantique → composant.
   Source : DESIGN.md du 2026-09-05 (valeurs proposées, première composition).
   Parti pris suspendu pour ce test (JOURNAL.md §2) : bandes olive en pleine
   surface, display 60 sur l'éditoriale, photos pleine largeur. Aucun hex hors
   de ce fichier. */

:root {
  /* ---------- 1. GLOBAL ---------- */
  /* couleur */
  --blanc: #FFFFFF;
  --voile-50: #F2F7F7;
  --olive-950: #1E2219;
  --olive-900: #2F3628;
  --olive-800: #3C4534;
  --olive-700: #454C3D;
  --olive-500: #67705E;
  --inverse-second: #B9C0B2;
  --filet-200: #DDE1D8;
  --canard-600: #1D6570;
  --canard-700: #154D56;
  --canard-200: #A6D6DC;
  --terre-600: #B3261E;
  --terre-200: #F3B5AB;

  /* espace (pas) */
  --pas-1: 4px;  --pas-2: 8px;  --pas-3: 12px; --pas-4: 16px; --pas-5: 20px;
  --pas-6: 24px; --pas-7: 32px; --pas-8: 48px; --pas-9: 64px; --pas-10: 96px;
  --pas-11: 140px;

  /* taille (ech) */
  --ech-micro: 11px; --ech-mini: 13px; --ech-petit: 15px; --ech-base: 17px;
  --ech-moyen: 20px; --ech-grand: 22px; --ech-titre: 32px; --ech-titre-xl: 44px;
  --ech-page: 52px; --ech-display: 60px;
  --ech-signature: 26px; --ech-regle: 28px;

  /* familles */
  --famille-titre: "Fraunces", Georgia, "Times New Roman", serif;
  --famille-corps: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --opsz-grand: "opsz" 96, "SOFT" 50;
  --opsz-courant: "opsz" 24, "SOFT" 50;

  /* ---------- 2. SÉMANTIQUE ---------- */
  --action: var(--canard-600);
  --action-appui: var(--canard-700);
  --action-inverse: var(--canard-200);
  --alerte: var(--terre-600);
  --alerte-inverse: var(--terre-200);
  --structure: var(--olive-950);
  --surface-page: var(--blanc);
  --surface-douce: var(--voile-50);
  --bande: var(--olive-900);
  --bande-surface: var(--olive-800);
  --voile-photo: rgba(30, 34, 25, 0.55);      /* olive-950 à 55 % */
  --voile-photo-regle: rgba(30, 34, 25, 0.48);   /* décision de la session du 2026-09-05 sur la photo refaite ; était 0.62 sur la première photo (crops b) */
  --voile-photo-regle-survol: rgba(30, 34, 25, 0.40); /* la bande s'éclaircit au survol, passe 6 */
  --voile-photo-survol: rgba(30, 34, 25, 0.08);
  --voile-photo-actif: rgba(30, 34, 25, 0.14);
  --mot-principal: var(--olive-950);
  --mot-courant: var(--olive-700);
  --mot-second: var(--olive-500);
  --mot-inverse: var(--blanc);
  --mot-inverse-second: var(--inverse-second);
  --filet: var(--filet-200);

  --respire-serre: var(--pas-8);
  --respire: var(--pas-10);
  --respire-large: var(--pas-11);
  --conteneur: 1304px;
  --marge: var(--pas-9);
  --gouttiere: 22px;
  --passe-partout: var(--pas-8);
  --barre-hauteur: 120px;
  --hero-hauteur: 540px;
  --bande-manifeste: 600px;
  --bande-regle: 435px;
  --rayon: 0;
  --duree: 180ms;
  --courbe: cubic-bezier(0.2, 0, 0, 1);

  /* mouvement (passe 6, mot de l'opérateur du 2026-09-05 : « de l'animation, beau et smooth ») */
  --mouvement-courte: var(--duree);                        /* couleur, voile 8 % */
  --mouvement-courbe: var(--courbe);
  --mouvement-courbe-pose: cubic-bezier(0.33, 1, 0.68, 1); /* cubic-out : tout ce qui se pose ; l'expo-out essayé d'abord finissait à 97 % en 120 ms, mesuré le 2026-09-05 */
  --mouvement-apparition: 600ms;                           /* fondu + translation au défilement (réf. fadeInUp 600 ms) */
  --mouvement-translation: 24px;
  --mouvement-cascade: 90ms;                               /* décalage entre voisins entrant ensemble */
  --mouvement-cascade-max: 450ms;
  --mouvement-barre: 400ms;                                /* la barre se réduit et se colle */
  --mouvement-respiration: 1600ms;                         /* la photo du hero se pose au chargement ; passe 7 : 1200 → 1600 et 1,02 → 1,04, le jury du 2026-09-05 mesurait 1,02 imperceptible (frames hero-0ms et -500ms identiques à l'octet) */
  --mouvement-echelle-hero: 1.04;
  --mouvement-survol: 700ms;                               /* échelle d'une photo au survol, voile de la règle */
  --mouvement-echelle-survol: 1.03;
  --mouvement-echelle-survol-large: 1.02;                  /* éditoriale pleine largeur */
  --mouvement-filet: 450ms;                                /* bouton qui s'emplit, filet qui s'étire */
  --mouvement-defilement: 400ms;                           /* pagination de la galerie */
  --barre-hauteur-collee: 72px;
  --barre-decalage: calc(var(--barre-hauteur-collee) - var(--barre-hauteur)); /* passe 7 : la barre sticky garde 120 px dans le flux et glisse de -48 px au-dessus du bord ; 0 en mobile (60 = 60) */
  --voile-photo-fort: rgba(30, 34, 25, 0.85);  /* passe 7 : fond du fil d'Ariane posé sur photo (4,5:1 mesuré sur la photo réelle, JOURNAL §11) */
  --voile-photo-dense: rgba(30, 34, 25, 0.66); /* passe 7 : bas du dégradé des heros d'article et nuage local sous le bloc de titre */
  --barre-collee-fond: var(--surface-douce);   /* retouche opérateur 2026-09-05 : la barre collée passe sur blanc quasi, texte olive (option B de l'opérateur ; l'option A, filet 1 px clair à 30 / 55 / 80 %, laissait le kicker coupé sous une barre de la couleur du voile : frames article-guide-barre-400-optionA*.png) */
  --barre-filet-colle: var(--filet-200);          /* filet 1 px sous la barre collée, pendant de la border-b white/20 de la référence (studio-mcgee.com mesuré le 2026-09-05 : header fixed, opaque, filet à toute position) */
  --laterale: 320px;                           /* retouche opérateur 2026-09-05 : colonne latérale collante des pages intérieures (étiquette, méta, sommaire, partage) */

  /* ---------- 3. COMPOSANT ---------- */
  --bouton-hauteur: 44px;
  --bouton-remplissage: 24px;
  --champ-hauteur: 48px;
  --focus-anneau: 2px solid var(--canard-700);
  --focus-anneau-inverse: 2px solid var(--canard-200);
  --module-image-ratio: 3 / 4;
}

@media (max-width: 719px) {
  :root {
    --ech-base: 16px; --ech-moyen: 18px; --ech-grand: 20px; --ech-titre: 26px;
    --ech-titre-xl: 32px; --ech-page: 36px; --ech-display: 40px;
    --ech-signature: 18px; --ech-regle: 22px;
    --respire-serre: 32px; --respire: 64px; --respire-large: 96px;
    --marge: 20px; --gouttiere: 16px; --passe-partout: 16px;
    --barre-hauteur: 60px; --barre-hauteur-collee: 60px; --hero-hauteur: 92vw;   /* référence mobile : image de ~370 px sur 390, capture 2026-09-05 */
    --bouton-hauteur: 48px;
  }
}
/* base.css — remise à plat, typographie composite (DESIGN.md §3), utilitaires
   de conteneur et de bande. Aucune couleur en dur : tout vient de tokens.css. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--famille-corps); font-size: var(--ech-base); line-height: 1.6;
  color: var(--mot-principal); background: var(--surface-page);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, .serif {
  font-family: var(--famille-titre); font-weight: 500;
  font-variation-settings: var(--opsz-courant); font-optical-sizing: none;
}

/* focus visible, jamais supprimé */
:focus-visible { outline: var(--focus-anneau); outline-offset: 3px; }
.bande :focus-visible, .sur-photo :focus-visible { outline: var(--focus-anneau-inverse); }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; left: var(--pas-4); top: -60px; z-index: 100;
  background: var(--blanc); color: var(--action); padding: var(--pas-3) var(--pas-5);
  font-size: var(--ech-mini); text-transform: uppercase; letter-spacing: 0.1em;
}
.lien-evitement:focus { top: var(--pas-4); }

.conteneur { width: min(var(--conteneur), calc(100% - 2 * var(--marge))); margin-inline: auto; }
.bande { background: var(--bande); color: var(--mot-inverse); }

/* titre de section sur deux lignes : première en mot-principal, seconde en action */
.titre-section {
  font-family: var(--famille-titre); font-weight: 500; font-size: var(--ech-titre);
  line-height: 1.15; font-variation-settings: var(--opsz-courant);
}
.titre-section span { display: block; color: var(--action); }
.bande .titre-section span { color: var(--action-inverse); }

/* kicker et méta, capitales espacées */
.kicker, .meta, .libelle {
  font-family: var(--famille-corps); font-weight: 500; font-size: var(--ech-micro);
  text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.4;
}
.kicker { color: var(--action); }
.meta { color: var(--mot-second); }
.libelle { color: var(--mot-principal); }
.sur-photo .kicker, .bande .kicker { color: var(--action-inverse); }
.bande .meta { color: var(--mot-inverse-second); }

.corps { color: var(--mot-courant); }
.bande .corps { color: var(--mot-inverse); }
.chiffre { font-variant-numeric: tabular-nums; }
.lien-inline { color: var(--action); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bande .lien-inline, .sur-photo .lien-inline { color: var(--action-inverse); }

/* icônes en trait 1,5 px */
.icone { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
  html { scroll-behavior: auto; }
}
/* boutons.css
   Rôle : les trois boutons de la marque (DESIGN.md §6) : filet (primaire, un par
   section), plein (le bouton de la lettre seulement), secondaire (texte souligné).
   Variantes : .bouton-filet sur blanc (action) / sur bande ou photo (mot-inverse) ;
   .bouton-plein ; .bouton-secondaire.
   États : repos, survol (le filet s'emplit), focus (anneau), actif, désactivé via
   aria-disabled (jamais disabled), chargement via aria-busy.
   Interdits : aplat d'action ailleurs que sur la lettre (parti pris 2026-09-05, lu sur
   la référence « boutons filet », REFERENCES.md déc. 1) ; rayon non nul (la référence
   n'arrondit rien, captures 2026-09-05) ; attribut disabled (règles non négociables). */

.bouton-filet, .bouton-plein, .bouton-secondaire {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--bouton-hauteur); padding: 0 var(--bouton-remplissage);
  font-family: var(--famille-corps); font-weight: 500; font-size: var(--ech-mini);
  text-transform: uppercase; letter-spacing: 0.12em; line-height: 1;
  border-radius: var(--rayon); white-space: nowrap;
  transition: background-color var(--mouvement-courte) var(--mouvement-courbe), color var(--mouvement-courte) var(--mouvement-courbe), border-color var(--mouvement-courte) var(--mouvement-courbe);
}

/* Le remplissage au survol est porté par motion.css (passe 7 : deux couches clippées ensemble,
   le texte se lit à chaque instant ; repli sans script : dégradé plat 180 ms) ; ici seuls filet et texte. */
.bouton-filet { border: 1px solid var(--action); color: var(--action); background: transparent; }
.bouton-filet:hover { color: var(--blanc); }
.bouton-filet:active { border-color: var(--action-appui); color: var(--blanc); }
.bande .bouton-filet, .sur-photo .bouton-filet { border-color: var(--mot-inverse); color: var(--mot-inverse); }
.bande .bouton-filet:hover, .sur-photo .bouton-filet:hover { color: var(--olive-900); }
.bande .bouton-filet:active, .sur-photo .bouton-filet:active { color: var(--olive-950); }
.bouton-filet[aria-disabled="true"] { border-color: var(--mot-second); color: var(--mot-second); pointer-events: none; }
.bande .bouton-filet[aria-disabled="true"] { border-color: var(--mot-inverse-second); color: var(--mot-inverse-second); }

.bouton-plein { background: var(--action); color: var(--blanc); border: 1px solid var(--action); }
.bouton-plein:hover, .bouton-plein:active { background: var(--action-appui); border-color: var(--action-appui); }
.bouton-plein[aria-disabled="true"] { background: var(--surface-douce); border-color: var(--surface-douce); color: var(--mot-second); cursor: not-allowed; }
.bouton-plein[aria-busy="true"] { opacity: 0.7; }

.bouton-secondaire {
  padding: 0; color: var(--mot-principal);
  text-decoration: underline; text-decoration-color: var(--filet); text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.bouton-secondaire:hover { color: var(--action); text-decoration-color: var(--action); }
.bouton-secondaire:active { color: var(--action-appui); }
/* nav.css
   Rôle : barre d'identité posée sur la même bande olive que le hero (geste de la
   référence : la barre et la photo partagent un seul aplat, REFERENCES.md déc. 1,
   sections 1-2). Logo à gauche, quatre rubriques et loupe centrées-droite, filet
   vertical 1 px, puis « La lettre ».
   Variantes : desktop 120 px ; mobile 60 px avec loupe et menu en trait.
   États : entrée courante soulignée ; focus anneau inverse ; menu mobile ouvert
   (aria-expanded) déroulé sous la barre.
   Passe 4 (2026-09-05) : les rubriques passaient 40 px sous le logo parce que
   `.rubrique:nth-child(1)` de galerie.css (marge haute 80) attrapait aussi le premier
   lien de la barre ; galerie.css est désormais scopé à `.galerie-rangee`.
   Retouche opérateur (2026-09-05, « le chevauchement est pas bon ») : l'état collé
   (.est-collee, posé par enhance.js après 8 px) passe sur blanc quasi avec texte olive et
   filet 1 px : sur le hero d'article, la barre olive et le voile olive du titre se
   confondaient (frame shots/motion-frames/article-guide-barre-400-avant.png). L'état de
   repos, celui des montages et du jury, ne change pas.
   Interdits : fond blanc sous la barre AU REPOS (le geste tient à l'aplat commun avec le
   hero, REFERENCES.md déc. 1) ; hauteur improvisée hors token. */

.barre { height: var(--barre-hauteur); display: flex; align-items: center; }
.barre .conteneur { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 2 * var(--passe-partout)); }
.logo {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--famille-titre); font-weight: 500; font-size: 22px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mot-inverse); font-variation-settings: var(--opsz-courant);
}
.logo em { font-style: italic; text-transform: none; letter-spacing: 0.02em; }
.barre-menu { display: flex; align-items: center; gap: var(--pas-7); }
.barre-menu ul { display: flex; gap: var(--pas-7); }
.barre-menu a.rubrique, .barre-lettre a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500; font-size: var(--ech-mini); text-transform: uppercase; letter-spacing: 0.1em; color: var(--mot-inverse);
  transition: color var(--duree) var(--courbe);
}
.barre-menu a.rubrique:hover { color: var(--action-inverse); }
.barre-menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--action-inverse); }
.barre-recherche { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--mot-inverse); }
.barre-recherche:hover { color: var(--action-inverse); }
.barre-filet { width: 1px; height: 50px; background: var(--inverse-second); opacity: 0.7; }
.barre-lettre { display: flex; flex-direction: column; align-items: flex-start; }
.barre-lettre small { font-size: var(--ech-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mot-inverse-second); margin-top: -8px; }
.barre-burger { display: none; }

/* état collé : blanc quasi, texte olive (retouche opérateur 2026-09-05, comparaison des frames
   article-guide-barre-400-{avant,optionA-filet,optionA55,optionA80,optionB-blanc}.png) */
.barre.est-collee { background: var(--barre-collee-fond); }
.barre.est-collee .logo, .barre.est-collee a.rubrique, .barre.est-collee .barre-lettre a,
.barre.est-collee .barre-recherche, .barre.est-collee .barre-burger { color: var(--mot-principal); }
.barre.est-collee .barre-lettre small { color: var(--mot-second); }
.barre.est-collee .barre-filet { background: var(--filet); opacity: 1; }
.barre.est-collee a.rubrique:hover, .barre.est-collee .barre-recherche:hover { color: var(--action); }
.barre.est-collee a[aria-current="page"] { text-decoration-color: var(--action); }
.barre.est-collee :focus-visible { outline: var(--focus-anneau); }

@media (max-width: 1023px) {
  .barre-menu ul, .barre-filet, .barre-lettre { display: none; }
  .barre-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--mot-inverse); }
  .barre-burger .icone, .barre-recherche .icone { width: 24px; height: 24px; }
  .barre-menu { gap: var(--pas-2); }
  .logo { font-size: 18px; }
  .barre-menu[data-ouvert="true"] ul {
    display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: var(--barre-hauteur);
    background: var(--bande); padding: var(--pas-4) var(--marge) var(--pas-6); z-index: 20;
  }
  .barre-menu[data-ouvert="true"] a.rubrique { min-height: 48px; width: 100%; border-bottom: 1px solid var(--bande-surface); }
  /* le menu déroulé reste olive, ses liens restent blancs même sous une barre collée */
  .barre.est-collee .barre-menu[data-ouvert="true"] a.rubrique { color: var(--mot-inverse); }
  .barre.est-collee .barre-menu[data-ouvert="true"] a.rubrique:hover { color: var(--action-inverse); }
  .barre.est-collee .barre-menu[data-ouvert="true"] :focus-visible { outline: var(--focus-anneau-inverse); }
}
/* hero.css
   Rôle : le geste de marque. Une seule bande olive tient la barre, la photo posée
   en passe-partout (48 px de marge, ne touche pas les bords, REFERENCES.md déc. 1
   section 2) et la signature en petites capitales, 138 px de bande sous la photo
   (section 3). Aucun texte sur la photo, aucun bouton : la photo porte tout.
   Variantes : desktop 1344 × 540 ; mobile passe-partout 16 px, 56 vw de haut,
   signature sur deux lignes.
   États : aucun, la photo n'est pas un lien.
   Interdits : H1 ou bouton posé sur la photo (désapprentissage 3 du journal, lu sur
   la capture du 2026-09-05) ; fermer la bande sous l'image (désapprentissage 2). */

.hero { padding: 30px var(--passe-partout) 0; }
.hero-cadre { width: 100%; height: var(--hero-hauteur); overflow: hidden; background: var(--bande-surface); }
.hero-cadre img { width: 100%; height: 100%; object-fit: cover; }
.signature {
  height: 138px; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 var(--marge);
}
.signature h1 {
  font-family: var(--famille-titre); font-weight: 500; font-size: var(--ech-signature); line-height: 1.3;
  font-variant-caps: small-caps; letter-spacing: 0.08em; color: var(--mot-inverse);
  font-variation-settings: var(--opsz-courant);
}
.signature h1 em { font-style: italic; }

@media (max-width: 719px) {
  .hero { padding-top: 0; }
  .signature { height: auto; padding: var(--pas-7) var(--marge) var(--pas-8); }
  .signature h1 { max-width: 20ch; }
}
/* editoriale.css
   Rôle : la une, article mis en avant. Photo pleine largeur 1440 × 642 bord à bord
   sous la bande olive, texte posé à gauche (x 64) et centré verticalement : kicker,
   titre en display 60 (seul emploi du cran, DESIGN.md §3), bouton filet.
   Variantes : desktop texte à gauche ; mobile texte en bas, 640 px de haut.
   États : le bloc entier est un lien (survol : titre inchangé, bouton s'emplit).
   Interdits : marge blanche entre la bande et la photo (REFERENCES.md section 4) ;
   display employé ailleurs (DESIGN.md §7). */

.editoriale { display: block; position: relative; height: 642px; overflow: hidden; color: var(--mot-inverse); }
.editoriale > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.editoriale::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--voile-photo) 0%, rgba(30,34,25,0.35) 45%, rgba(30,34,25,0.05) 100%);
}
.editoriale .conteneur { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 150px; gap: var(--pas-6); }
.editoriale h2 {
  font-weight: 600; font-size: var(--ech-display); line-height: 1.05; max-width: 14ch;
  font-variation-settings: var(--opsz-grand); color: var(--mot-inverse);
}
.editoriale .bouton-filet { align-self: flex-start; margin-top: var(--pas-2); }

@media (max-width: 719px) {
  .editoriale { height: 640px; }
  .editoriale::before { background: linear-gradient(180deg, rgba(30,34,25,0.05) 30%, var(--voile-photo) 100%); }
  .editoriale .conteneur { justify-content: flex-end; padding-bottom: var(--pas-8); gap: var(--pas-4); }
}
/* flux.css
   Rôle : « À lire », le flux de lecture. Titre de section sur deux lignes, grille
   3 colonnes de modules d'article (image 3:4 nue, titre serif, chapô, méta), deux
   rangées de trois, sur blanc. Le module.article est le « composant carte » du site.
   Variantes : desktop 3 colonnes 420 × 552, gouttière 22, 100 px entre rangées ;
   mobile 2 colonnes, gouttière 16.
   États du module : repos ; survol (voile 8 % sur l'image, titre action) ; focus
   (anneau sur le module) ; actif (voile 14 %, titre appui) ; désactivé (image en
   surface-douce, méta « Article en préparation ») ; erreur ; vide (ligne entre
   deux filets) ; chargement (blocs surface-douce, texte visible, aria-busy).
   Titres : le flux affiche un titre court (une à deux lignes, jamais coupé par « … »,
   référence section 5 et verdict jury 2026-09-05) ; le titre canonique reste dans
   l'attribut title du h3 et dans l'article.
   Interdits : bordure, ombre, fond, rayon sur le module (pas de carte, REFERENCES.md
   section 5, captures 2026-09-05) ; fond voile-50 sous la section (1,08:1 mesuré). */

.flux { padding: 56px 0 96px; }
.flux .titre-section { margin-bottom: 48px; }
.flux-grille { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gouttiere); row-gap: 36px; }

.module { display: block; position: relative; }
.module-image { position: relative; aspect-ratio: var(--module-image-ratio); overflow: hidden; background: var(--surface-douce); }
.module-image img { width: 100%; height: 100%; object-fit: cover; }
.module-image::after { content: ""; position: absolute; inset: 0; background: var(--structure); opacity: 0; transition: opacity var(--duree) var(--courbe); }
.module h3 { margin-top: 12px; font-size: var(--ech-grand); line-height: 1.25; color: var(--mot-principal); text-wrap: balance; transition: color var(--duree) var(--courbe); }
.module p { margin-top: var(--pas-1); font-size: var(--ech-petit); line-height: 1.5; color: var(--mot-courant); }
.module .meta { margin-top: var(--pas-2); display: block; }
.module:hover .module-image::after { opacity: 0.08; }
.module:hover h3 { color: var(--action); }
.module:active .module-image::after { opacity: 0.14; }
.module:active h3 { color: var(--action-appui); }
.module[aria-disabled="true"] h3 { color: var(--mot-second); }
.module[aria-disabled="true"] .module-image img { visibility: hidden; }
.module-vide { grid-column: 1 / -1; padding: var(--pas-6) 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); color: var(--mot-second); }
.module[aria-busy="true"] h3, .module[aria-busy="true"] p { background: var(--surface-douce); color: transparent; }

@media (max-width: 719px) {
  .flux { padding: var(--pas-8) 0 var(--respire); }
  .flux .titre-section { margin-bottom: var(--pas-7); }
  .flux-grille { grid-template-columns: repeat(2, 1fr); row-gap: var(--pas-8); }
  .module h3 { font-size: var(--ech-base); }
  .module p { font-size: var(--ech-mini); }
}
/* manifeste.css
   Rôle : « Qui écrit ici ». Bande olive de 600 px ; à gauche un collage de deux
   photos qui se chevauchent (portrait 342 × 480 posé à 60 px du haut, seconde photo
   150 × 260 qui déborde en bas à gauche, REFERENCES.md section 6) ; à droite une
   colonne de 456 px : titre, sous-titre italique, corps, bouton filet inverse.
   Variantes : desktop deux colonnes ; mobile collage au-dessus puis texte.
   États : bouton filet inverse (voir boutons.css).
   Interdits : portrait de la rédactrice tant que le persona n'est pas incarné
   (brief §Images, 2026-09-05) : mains et matière ; aligner les deux photos
   (désapprentissage 5) ; canard-600 sur olive (1,87:1 mesuré le 2026-09-05). */

.manifeste { min-height: var(--bande-manifeste); position: relative; }
.manifeste .conteneur { display: grid; grid-template-columns: 600px 456px; column-gap: 0; min-height: var(--bande-manifeste); align-items: center; }
.collage { position: relative; height: var(--bande-manifeste); }
.collage-grande { position: absolute; left: 170px; top: 60px; width: 342px; height: 480px; overflow: hidden; }
.collage-petite { position: absolute; left: 104px; top: 250px; width: 150px; height: 260px; overflow: hidden; outline: 6px solid var(--bande); }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.manifeste-texte { display: flex; flex-direction: column; gap: var(--pas-5); padding: var(--pas-9) 0; }
.manifeste-texte h2 { font-size: var(--ech-titre); line-height: 1.15; color: var(--mot-inverse); }
.manifeste-texte .sous-titre { font-family: var(--famille-titre); font-style: italic; font-weight: 500; font-size: 30px; line-height: 1.2; color: var(--mot-inverse); margin-top: -10px; font-variation-settings: var(--opsz-courant); }
.manifeste-texte p.corps { font-size: var(--ech-base); line-height: 1.6; }
.manifeste-texte .bouton-filet { align-self: flex-start; margin-top: var(--pas-4); }

@media (max-width: 1023px) {
  .manifeste .conteneur { grid-template-columns: 1fr; }
  .collage { height: 440px; }
  .collage-grande { left: 40px; top: 32px; width: 260px; height: 360px; }
  .collage-petite { left: 0; top: 200px; width: 120px; height: 190px; }
}
@media (max-width: 719px) {
  .manifeste-texte { padding: 0 0 var(--pas-8); }
  .manifeste-texte .sous-titre { font-size: var(--ech-titre); }
}
/* regle.css
   Rôle : bande « règle de pro », à la place de la citation presse de la référence
   (REFERENCES.md section 7) : photo pleine largeur 435 px assombrie, phrase en
   italique serif 28 px centrée sur trois lignes, petit trait vertical, puis un objet
   court à la place du logo média de la référence : l'étiquette de teinte, signature de
   la marque (DESIGN.md §6 « le motif de marque », posée ici pour les trois proportions).
   Pas de kicker : la référence n'en a pas (verdict jury 2026-09-05, correction 3). Bande fixe : le carrousel de la référence est remplacé (brief amont
   2026-09-05).
   Variantes : desktop 435 px ; mobile hauteur libre.
   États : aucun, l'étiquette n'est pas interactive (DESIGN.md §6).
   Interdits : flèches ou points de carrousel (brief amont du 2026-09-05, bande fixe) ;
   photo de nuit (brief §Images). */

.regle { position: relative; min-height: var(--bande-regle); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--mot-inverse); overflow: hidden; }
.regle > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.regle::before { content: ""; position: absolute; inset: 0; background: var(--voile-photo-regle); z-index: 1; }
.regle .conteneur { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--pas-5); padding: var(--pas-9) 0; }
.regle blockquote { font-family: var(--famille-titre); font-style: italic; font-weight: 500; font-size: var(--ech-regle); line-height: 1.35; max-width: 640px; font-variation-settings: var(--opsz-courant); }
.regle-trait { width: 1px; height: 28px; background: var(--mot-inverse); opacity: 0.7; }
.etiquette-teinte {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  border-left: 2px solid var(--action-inverse); padding-left: var(--pas-4); align-self: center;
}
.etiquette-nom { font-family: var(--famille-titre); font-weight: 500; font-size: var(--ech-grand); line-height: 1.2; color: var(--mot-inverse); font-variation-settings: var(--opsz-courant); }
.etiquette-detail { font-family: var(--famille-corps); font-weight: 500; font-size: var(--ech-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--mot-inverse-second); line-height: 1.4; }
/* galerie.css
   Rôle : galerie des quatre rubriques, à la place du portfolio de la référence
   (REFERENCES.md section 8, mesure pixel du jury 2026-09-05, verdict-compo-passe4.md :
   bande Portfolio y 4311-5150 soit 839 px, marges latérales 148, trois images
   297 × 394 / 417 × 533 / 297 × 394, latérales posées 60 px plus bas, titre à x 92
   et +68, filet de navigation 77 px sous le bas de l'image centrale, 58 px de bande
   sous lui ; aucun texte sous les images).
   Chez nous (passe 5) : mêmes cotes que la référence, trois rubriques visibles à
   l'échelle 1, la quatrième par la navigation « ‹ › » qui pagine une rangée à
   défilement natif ; depuis la passe 6 (mot de l'opérateur du 2026-09-05) le
   défilement est doux, 400 ms par js/enhance.js ; sans JS les ancres restent.
   Légende réduite au nom court en capitales 11 px (le jury demandait « le strict
   nom en petites capitales »).
   Variantes : desktop 297 / 417 / 297, gouttière 67, empan 1144 centré ; mobile
   92 / 150 / 92, gouttière 8, empan 350 (référence mobile, crop y 4180-4650 de
   studiomcgee-home-mobile.png : trois images de ~88 × 132 et 149 × 192, marge 20).
   États : chaque rubrique est un lien (survol : nom en action-inverse, image 90 %) ;
   flèches 44 px focusables ; la quatrième rubrique se rejoint aussi au clavier
   (le conteneur défile vers le lien focalisé, comportement natif).
   Interdits : quatre hauteurs égales (désapprentissage 6) ; remplir la largeur du
   conteneur (verdict jury 2026-09-05, « conteneurs remplis là où la référence fait
   flotter les objets ») ; défilement automatique (brief amont du 2026-09-05). */

.galerie { padding: 65px 0 47px; }
.galerie .titre-section { margin-left: 24px; margin-bottom: 0; }
.galerie-defile {
  width: 1144px; margin-inline: auto; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: auto;
}
.galerie-defile::-webkit-scrollbar { display: none; }
.galerie-rangee { display: flex; align-items: flex-start; gap: 67px; width: max-content; }
.galerie-rangee .rubrique { display: block; flex: none; width: 297px; scroll-snap-align: start; }
.galerie-rangee .rubrique:nth-child(2) { width: 417px; }
.galerie-rangee .rubrique:nth-child(odd) { margin-top: 60px; }
.rubrique-image { height: 394px; overflow: hidden; background: var(--bande-surface); }
.galerie-rangee .rubrique:nth-child(2) .rubrique-image { height: 533px; }
.rubrique-image img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--mouvement-courte) var(--mouvement-courbe), transform var(--mouvement-survol) var(--mouvement-courbe-pose); }
.rubrique h3 {
  margin-top: 10px; font-family: var(--famille-corps); font-weight: 500; font-size: var(--ech-micro);
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; color: var(--mot-inverse);
  transition: color var(--duree) var(--courbe);
}
.rubrique:hover h3 { color: var(--action-inverse); }
.rubrique:hover img { opacity: 0.9; }

.galerie-nav { margin: 50px 24px 0; display: flex; align-items: center; gap: var(--pas-6); }
.galerie-nav .fleche { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--mot-inverse); color: var(--mot-inverse); flex: none; }
.galerie-nav .fleche:hover { background: var(--blanc); color: var(--olive-900); }
.galerie-nav .filet-h { flex: 1; height: 1px; background: var(--inverse-second); opacity: 0.7; }
.galerie-nav .bouton-filet { flex: none; }

@media (max-width: 1279px) {
  .galerie-defile { width: auto; margin-inline: 60px; }
}
@media (max-width: 1023px) {
  .galerie { padding: 40px 0 40px; }
  .galerie .titre-section { margin-left: 0; margin-bottom: var(--pas-4); }
  .galerie-defile { margin-inline: 0; }
  .galerie-rangee { gap: var(--pas-2); }
  .galerie-rangee .rubrique { width: 92px; }
  .galerie-rangee .rubrique:nth-child(2) { width: 150px; }
  .galerie-rangee .rubrique:nth-child(odd) { margin-top: 36px; }
  .rubrique-image { height: 128px; }
  .galerie-rangee .rubrique:nth-child(2) .rubrique-image { height: 200px; }
  .rubrique h3 { font-size: 10px; letter-spacing: 0.06em; margin-top: var(--pas-2); }
  .galerie-nav { margin: var(--pas-6) 0 0; gap: var(--pas-3); }
  .galerie-nav .filet-h { opacity: 1; }
  .galerie-nav .bouton-filet { padding: 0 var(--pas-4); font-size: var(--ech-micro); min-height: 44px; }
}
/* lettre.css
   Rôle : « La lettre de la rédaction », à la place de la boutique de la référence
   (REFERENCES.md section 9) : section blanche de 660 px, texte à gauche (x 64,
   largeur 650 : titre deux lignes, chapô italique, champ + bouton plein, mention),
   image 50 % collée au bord droit, posée au ras du haut de section.
   Variantes : desktop deux colonnes ; mobile texte puis image pleine largeur.
   Bloc texte posé en haut de section (titre à +60, référence section 9 « Shop » à y +60,
   verdict jury 2026-09-05) ; bouton plein visible dès le repos, aria-disabled seulement
   après une tentative à champ vide.
   États du champ : repos (surface-douce, contour filet) ; survol (contour olive-500) ;
   focus (contour 2 px action + anneau) ; erreur (contour alerte, message « Erreur : »,
   aria-invalid) ; désactivé ; vide (placeholder mot-second). Bouton plein : voir
   boutons.css (aria-disabled tant que le champ est vide, aria-busy en cours).
   Interdits : marge entre l'image et le bord droit (désapprentissage 7) ; placeholder
   à la place du libellé (règles non négociables) ; case à cocher (aucune donnée
   transmise à un tiers, brief 2026-09-05). */

.lettre { position: relative; min-height: 660px; display: grid; grid-template-columns: 1fr 1fr; }
.lettre-texte { padding: 60px var(--pas-8) var(--pas-10) var(--marge); display: flex; flex-direction: column; justify-content: flex-start; gap: var(--pas-5); max-width: 720px; }
.lettre-texte h2 { font-size: var(--ech-titre); line-height: 1.15; }
.lettre-texte h2 span { display: block; color: var(--mot-principal); }
.lettre-chapo { font-family: var(--famille-titre); font-style: italic; font-weight: 500; font-size: var(--ech-moyen); line-height: 1.5; color: var(--mot-courant); font-variation-settings: var(--opsz-courant); max-width: 600px; }
.lettre-image { position: relative; height: 550px; align-self: start; }
.lettre-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.champ-groupe { display: flex; flex-direction: column; gap: var(--pas-2); margin-top: var(--pas-3); }
.champ-ligne { display: flex; gap: 0; max-width: 520px; }
.champ {
  flex: 1; min-width: 0; height: var(--champ-hauteur); padding: 0 var(--pas-4);
  background: var(--surface-douce); border: 1px solid var(--filet); border-radius: var(--rayon);
  color: var(--mot-principal); font-size: var(--ech-base);
  transition: border-color var(--duree) var(--courbe);
}
.champ::placeholder { color: var(--mot-second); }
.champ:hover { border-color: var(--mot-second); }
.champ:focus { outline: none; border: 2px solid var(--action); }
.champ:focus-visible { outline: var(--focus-anneau); }
.champ[aria-invalid="true"] { border: 2px solid var(--alerte); }
.champ-ligne .bouton-plein { height: var(--champ-hauteur); min-height: var(--champ-hauteur); }
.champ-aide { font-size: var(--ech-petit); color: var(--mot-second); line-height: 1.5; }
.champ-erreur { font-size: var(--ech-petit); color: var(--alerte); }
.champ-erreur:empty { display: none; }

@media (max-width: 719px) {
  .lettre { grid-template-columns: 1fr; min-height: 0; }
  .lettre-texte { padding: var(--respire) var(--marge) var(--pas-8); }
  .lettre-image { min-height: 0; height: 100vw; }
  .champ-ligne { flex-direction: column; gap: var(--pas-3); }
  .champ { font-size: 16px; flex: none; height: var(--champ-hauteur); }
}
/* pied.css
   Rôle : plan du site, calé sur la référence (REFERENCES.md section 10) : logo seul
   sur une ligne, filet, trois colonnes de liens en capitales 11 px + colonne lettre
   à droite (champ + bouton), rangée « Suivre » avec icônes en trait, filet, ligne
   d'éditeur.
   Variantes : desktop 4 colonnes ; mobile 2 colonnes (référence mobile, crop y 5600-6248,
   verdict jury 2026-09-05 : un pied d'une colonne faisait 18 % de la page), cibles 44 px.
   États : liens (survol action) ; icônes sociales mot-second → action au survol ;
   champ et bouton : voir lettre.css et boutons.css.
   Interdits : pied sombre (le pied de la référence est clair, section 10) ; adresse
   postale, téléphone, horaires (posture média du pack, 2026-09-05). */

.pied { padding: var(--pas-7) 0 var(--pas-5); border-top: 1px solid var(--filet); }
.pied .logo { color: var(--mot-principal); display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--pas-3); }
.pied-filet { height: 1px; background: var(--filet); }
.pied-colonnes { display: grid; grid-template-columns: 160px 160px 160px 1fr; column-gap: var(--pas-6); padding: var(--pas-7) 0 var(--pas-7); }
.pied-colonnes h3 { font-size: var(--ech-moyen); font-weight: 500; margin-bottom: var(--pas-4); }
.pied-colonnes ul li { margin-bottom: 0; }
.pied-colonnes ul a { display: inline-flex; align-items: center; min-height: 24px; font-size: var(--ech-micro); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mot-principal); transition: color var(--duree) var(--courbe); }
.pied-colonnes ul a:hover { color: var(--action); }
.pied-lettre { justify-self: end; width: 100%; max-width: 360px; }
.pied-lettre .champ-ligne { max-width: none; }
.pied-lettre .champ, .pied-lettre .bouton-plein { height: 40px; min-height: 40px; }
.pied-suivre { margin-top: var(--pas-5); }
.pied-suivre ul { display: flex; gap: var(--pas-5); margin-top: var(--pas-3); }
.pied-suivre a { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--mot-second); }
.pied-suivre a:hover { color: var(--action); }
.pied-suivre .icone { width: 18px; height: 18px; }
.pied-editeur { padding-top: var(--pas-6); display: flex; flex-wrap: wrap; gap: var(--pas-2) var(--pas-4); }
.pied-editeur a { display: inline-flex; align-items: center; min-height: 24px; }
.pied-editeur a:hover { color: var(--action); }

@media (max-width: 1023px) { .pied-colonnes { grid-template-columns: 1fr 1fr; row-gap: var(--pas-7); } .pied-lettre { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 719px) {
  .pied-colonnes { grid-template-columns: 1fr 1fr; column-gap: var(--pas-4); row-gap: var(--pas-6); padding: var(--pas-6) 0; }
  .pied-colonnes h3 { margin-bottom: var(--pas-2); }
  .pied-lettre { grid-column: auto; }
  .pied-suivre ul { gap: var(--pas-2); }
  .pied-colonnes ul a { min-height: 44px; }
  .pied-lettre .champ, .pied-lettre .bouton-plein { height: 44px; min-height: 44px; }
  .pied-suivre a { width: 44px; height: 44px; }
  .pied-editeur a { min-height: 44px; }
}
/* pages.css — matière commune des pages intérieures (pilier, article guide, article
   conseil, écran d'états), chargée après base.css. Ne redéfinit aucun token existant :
   ajoute les cotes de lecture du DESIGN.md §2 (`lecture` 640, `chapo-large`) qui
   manquaient à tokens.css, et les utilitaires d'en-tête de page, de fil d'Ariane, de
   colonne de lecture décalée, de corps d'article, d'encarts et de tableau.
   Référence : Studio McGee « A Study in Natural Stone », capture
   studiomcgee-tool-desktop.png du 2026-09-05 (chapô x 68-1370 à y 725, corps
   x 730-1372 à partir de y 905, filets de méta à y 4604 et 4728).
   Interdits : hex hors tokens.css (doctrine tokens.md) ; fond crème ou voile-50 en
   section (DESIGN.md §7, 1,08:1 mesuré le 2026-09-05). */

:root {
  --lecture: 680px;                       /* colonne du corps ; 640 (DESIGN.md §2) jusqu'à la retouche opérateur 2 du 2026-09-05, 680 depuis (consigne : latérale 320 | gouttière 80 | corps 680) */
  --gouttiere-lecture: 80px;              /* retouche opérateur 2 : entre la colonne latérale et le corps ; 344 px auparavant (« le gros trou blanc est moche ») ; fourchette acceptée 64-96 */
  --conteneur-lecture: calc(var(--laterale) + var(--gouttiere-lecture) + var(--lecture)); /* 1080 px : conteneur centré des sections de lecture, x 180-1260 à 1440 */
  --chapo-large: calc(var(--conteneur) * 3 / 4); /* 978 px : le chapô de la référence court sur ~100 %, le brief demande 2/3, on tranche à 3/4 pour tenir en 3 lignes comme elle */
  --ouverture-hauteur: 742px;             /* image d'ouverture et image pleine de galerie, référence y 2240-2982 */
  --paire-hauteur: 764px;                 /* image d'une paire, référence y 3002-3766 */
}

/* --- en-tête de page sur blanc (pilier, article conseil) --- */
.en-tete-page { padding: var(--pas-8) 0 var(--pas-9); }
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pas-2); font-size: var(--ech-petit); color: var(--mot-second); }
.fil-ariane a { display: inline-flex; align-items: center; min-height: 24px; color: var(--mot-second); }
.fil-ariane a:hover { color: var(--action); }
.fil-ariane .icone { width: 14px; height: 14px; }
.fil-ariane [aria-current="page"] { color: var(--mot-courant); }
.en-tete-page .kicker { display: block; margin-top: var(--pas-7); }
.titre-page {
  margin-top: var(--pas-4); font-family: var(--famille-titre); font-weight: 500; font-size: var(--ech-page);
  line-height: 1.08; max-width: 20ch; font-variation-settings: var(--opsz-grand); color: var(--mot-principal);
}
.chapo-ouverture, .corps-article .chapo-ouverture {
  margin-top: var(--pas-7); max-width: var(--chapo-large);
  font-family: var(--famille-titre); font-weight: 500; font-size: var(--ech-regle); line-height: 1.35;
  color: var(--mot-principal); font-variation-settings: var(--opsz-courant);
}
.corps-article .chapo-ouverture .a-verifier, .chapo-ouverture .a-verifier { font-family: var(--famille-corps); font-size: var(--ech-mini); color: var(--mot-second); font-style: normal; }

/* --- image d'ouverture pleine largeur de conteneur --- */
.ouverture { height: var(--ouverture-hauteur); overflow: hidden; background: var(--surface-douce); }
.ouverture img { width: 100%; height: 100%; object-fit: cover; }

/* --- conteneur de lecture 1080 et grille à trois pistes ---
   Retouche opérateur 1 (2026-09-05, « le gros blanc à droite est bizarre ») : grille latérale 320 |
   gouttière 1fr (344 px à 1440) | lecture 640, la colonne de lecture gardait x 732-1372 comme la
   référence. Retouche opérateur 2 (2026-09-05, « Oui le gros trou blanc est moche », capture :
   gouttière de 344 px entre x 412 et 732) : la gouttière tombe à 80, le corps passe à 680, le tout
   dans un conteneur centré de 1080 (x 180-1260). Le hero, le chapô, la réponse rapide, les
   questions et le tableau large prennent le même conteneur : le bord gauche du texte est unique sur
   toute la page (Kinfolk, kinfolk-tool-desktop.png y 1000-2200 : méta, image et corps partent d'un
   même bord). Les images de galerie et la paire restent sur le conteneur 1304, plus larges que le
   texte, comme la galerie de la référence déborde de sa colonne. */
.conteneur-lecture, .hero-article .conteneur, .corps-article > .conteneur, .questions .conteneur, .reponse-rapide .conteneur, .tableau-large .conteneur { width: min(var(--conteneur-lecture), calc(100% - 2 * var(--marge))); }
.grille-lecture { display: grid; grid-template-columns: var(--laterale) var(--gouttiere-lecture) var(--lecture); column-gap: 0; align-items: start; }
.grille-lecture > .pleine-largeur, .grille-lecture > .chapo-ouverture, .grille-lecture > .tableau, .grille-lecture > .tableau-mention { grid-column: 1 / -1; }
.colonne-lecture { width: var(--lecture); margin-left: auto; }
.grille-lecture > .colonne-lecture { grid-column: 3; width: auto; margin-left: 0; }
.corps-article { padding: 0 0 var(--respire); }
.corps-article > .conteneur > .chapo-ouverture { margin-top: 0; }
.corps-article .colonne-lecture { padding-top: 75px; }
/* encart source posé sous un tableau pleine largeur : libellé dans la piste de gauche, texte dans la colonne de lecture */
.encart-source-large { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin: var(--pas-9) 0 0; padding: var(--pas-6) 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.encart-source-large .libelle { grid-column: 1; color: var(--mot-second); }
.encart-source-large p { grid-column: 3; font-size: var(--ech-petit); line-height: 1.5; color: var(--mot-courant); }
.corps-article p, .corps-article li { font-size: var(--ech-base); line-height: 1.7; color: var(--mot-principal); }
.corps-article p + p, .corps-article ul + p, .corps-article p + ul { margin-top: 20px; }
.corps-article h2 { font-size: var(--ech-titre); line-height: 1.15; margin: var(--pas-8) 0 var(--pas-4); color: var(--mot-principal); font-variation-settings: var(--opsz-courant); } /* DESIGN.md §3 dit `titre-xl` 44 ; à 44 sur 640 px chaque intertitre prend deux lignes et casse la colonne calme de la référence (montage article-guide-corps-passe1.png) : 32 ici, règle contestée au JOURNAL */
.corps-article h2:first-child { margin-top: 0; }
.corps-article h3 { font-size: var(--ech-grand); line-height: 1.25; margin: var(--pas-7) 0 var(--pas-3); }
.corps-article ul { list-style: none; }
.corps-article ul li { position: relative; padding-left: var(--pas-6); }
.corps-article ul li + li { margin-top: var(--pas-2); }
.corps-article ul li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 12px; height: 1px; background: var(--action); }
.corps-article a:not(.bouton-filet):not(.bouton-secondaire) { color: var(--action); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.corps-article a:not(.bouton-filet):not(.bouton-secondaire):hover { color: var(--action-appui); }

/* --- encarts (DESIGN.md §6 encart.regle, encart.source) --- */
.encart-regle { margin: var(--pas-9) 0; padding: var(--pas-7); background: var(--bande); color: var(--mot-inverse); }
.encart-regle .kicker { color: var(--action-inverse); }
.encart-regle h3 { margin: var(--pas-3) 0 var(--pas-4); color: var(--mot-inverse); }
.encart-regle p { color: var(--mot-inverse); }
.encart-regle .lien-inline, .corps-article .encart-regle a { color: var(--action-inverse); display: inline-flex; align-items: center; min-height: 24px; margin-top: var(--pas-4); }
.encart-regle .chiffre { font-weight: 500; }
.encart-source { margin: var(--pas-9) 0; padding: var(--pas-6) 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.encart-source .libelle { color: var(--mot-second); display: block; margin-bottom: var(--pas-3); }
.encart-source p { font-size: var(--ech-petit); line-height: 1.5; color: var(--mot-courant); }
.encart-source .meta { display: block; margin-top: var(--pas-3); }
.encart-source + .encart-source { margin-top: calc(-1 * var(--pas-9) - 1px); border-top: 0; }

/* --- tableau (DESIGN.md §6 tableau.teintes, et tableau d'orientation) --- */
.tableau { width: 100%; border-collapse: collapse; }
.tableau caption { text-align: left; font-family: var(--famille-titre); font-size: var(--ech-grand); font-weight: 500; padding-bottom: var(--pas-5); color: var(--mot-principal); }
.tableau th { text-align: left; font-family: var(--famille-corps); font-weight: 500; font-size: var(--ech-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--mot-principal); padding: 0 var(--pas-4) var(--pas-3) 0; border-bottom: 1px solid var(--mot-principal); }
.tableau td { vertical-align: top; padding: var(--pas-4) var(--pas-4) var(--pas-4) 0; border-bottom: 1px solid var(--filet); font-size: var(--ech-petit); line-height: 1.5; color: var(--mot-courant); }
.tableau td:first-child { font-family: var(--famille-titre); font-size: var(--ech-moyen); color: var(--mot-principal); font-weight: 500; }
.tableau tbody tr:hover td { background: var(--surface-douce); }
.tableau .meta { display: block; }
.tableau-mention { margin-top: var(--pas-4); font-size: var(--ech-petit); line-height: 1.5; color: var(--mot-second); max-width: 70ch; }
.tableau td[data-statut] .etat { font-size: var(--ech-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--mot-second); }

/* --- étiquette de teinte sur blanc (regle.css la définit pour la bande) --- */
.titre-section span span { display: inline; color: inherit; }
.corps-article .encart-regle a:not(.bouton-filet):not(.bouton-secondaire) { color: var(--action-inverse); } /* canard-600 sur olive = 1,87:1, DESIGN.md §7 */
.etiquette-claire .etiquette-nom { color: var(--mot-principal); }
.etiquette-claire .etiquette-detail { color: var(--mot-second); }
.etiquette-claire { border-left-color: var(--action); }
.etiquette-claire .meta { display: block; }

/* --- signature d'article --- */
.signature-article { display: flex; align-items: center; gap: var(--pas-4); margin-top: var(--pas-9); font-family: var(--famille-titre); font-size: var(--ech-moyen); color: var(--mot-principal); }
.signature-article::before { content: ""; width: 40px; height: 1px; background: var(--action); }

/* --- bloc de fin de section centré (bouton) --- */
.centre { display: flex; justify-content: center; }

/* --- mobile --- */
@media (max-width: 1023px) {
  .colonne-lecture { width: auto; margin-left: 0; }
  .grille-lecture { grid-template-columns: 1fr; }
  .grille-lecture > .colonne-lecture, .grille-lecture > .pleine-largeur, .grille-lecture > .chapo-ouverture, .grille-lecture > .tableau, .grille-lecture > .tableau-mention, .encart-source-large .libelle, .encart-source-large p { grid-column: 1; }
  .encart-source-large { display: block; }
  .encart-source-large .libelle { display: block; margin-bottom: var(--pas-3); }
}
@media (max-width: 719px) {
  :root { --ouverture-hauteur: 62vw; --paire-hauteur: 110vw; --chapo-large: 100%; }
  .en-tete-page { padding: var(--pas-6) 0 var(--pas-8); }
  .en-tete-page .kicker { margin-top: var(--pas-6); }
  .chapo-ouverture { font-size: 24px; margin-top: var(--pas-6); }
  .corps-article .colonne-lecture { padding-top: var(--pas-8); }
  .corps-article h2 { margin-top: var(--pas-8); }
  .encart-regle { padding: var(--pas-6); margin: var(--pas-8) calc(-1 * var(--marge)); }
  .encart-regle a, .corps-article .encart-regle a { min-height: 44px; }
  .fil-ariane a { min-height: 44px; }
  /* tableau converti en fiches (DESIGN.md §4 : jamais un tableau à défilement horizontal).
     Passe 7 : fiches recomposées à l'œil (jury pages 2026-09-05 : « Les teintes citées » 2409 px, un
     libellé par ligne ; « Ce que l'orientation impose » 1281 px). Le caption d'un tableau en display: block
     hérite d'une largeur de contenu minimale : il est remis en block pleine largeur (titre sur une ligne). */
  .tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau, .tableau tbody { display: block; }
  .tableau caption { display: block; width: 100%; }
  .tableau tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--pas-3); row-gap: var(--pas-1); padding: var(--pas-3) 0; border-bottom: 1px solid var(--filet); }
  .tableau td { display: block; border: 0; padding: 0; }
  .tableau td:first-child { font-size: 18px; }
  .tableau tbody tr:hover td { background: transparent; }
  /* teintes (fabricant · nom · numéro · relevé) : une ligne serif, le relevé dessous */
  .tableau-teintes td:nth-child(2) { font-family: var(--famille-titre); font-size: 18px; color: var(--mot-principal); font-weight: 500; }
  .tableau-teintes td:nth-child(3) { margin-left: auto; }
  .tableau-teintes td:nth-child(4) { flex-basis: 100%; }
  /* orientation : orientation + lumière sur la première ligne, « ce qui marche » et « ce qui aggrave » en deux colonnes */
  .tableau-orientation td { font-size: var(--ech-mini); line-height: 1.45; }
  .tableau-orientation td:nth-child(2) { flex: 1 1 60%; }   /* 60 % : la lumière prend le reste de la première ligne et repousse « ce qui marche » à la seconde (à 0, la troisième cellule remontait sur la première ligne et la lumière tombait un mot par ligne, capture 12:31) */
  .tableau-orientation td:nth-child(3), .tableau-orientation td:nth-child(4) { flex: 1 1 calc(50% - var(--pas-3)); margin-top: var(--pas-2); }
  .tableau-orientation td:nth-child(3)::before, .tableau-orientation td:nth-child(4)::before { content: attr(data-titre); display: block; font-size: var(--ech-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--mot-second); margin-bottom: 2px; }
}

/* --- pilier : grille de lecture qui tient à 2 comme à 12 (brief amont 2026-09-05, écran 2) ---
   auto-fit : deux articles remplissent deux colonnes de 641 (aucun trou), douze articles
   passent en trois colonnes de 420 comme le flux de l'accueil. Ratio d'image 641/764,
   celui de la paire de la galerie du guide (référence y 3002-3766). */
.pilier-flux { padding-top: var(--respire); }
.pilier-flux .flux-grille { row-gap: var(--pas-9); }
.pilier-flux .module h3 { max-width: 30ch; }
/* passe 2 : trois colonnes comme le flux de la référence (home, section 5) ; à deux articles la troisième cellule
   porte le module de la lettre (contenu réel, pas un texte de substitution) ; à douze, la grille est pleine */
.ouverture-rubrique { padding: 0; }
@media (max-width: 719px) {
  .pilier-flux { padding-top: var(--pas-8); }
  .pilier-flux .flux-grille { grid-template-columns: 1fr; row-gap: var(--pas-8); }
}
/* hero-article.css
   Rôle : ouverture de l'article guide (modèle « A Study in Natural Stone ») : photo
   pleine largeur bord à bord sous la barre olive, kicker (rubrique · date) et H1 en
   `page` 52 posés en bas à gauche sur un voile en dégradé (référence : photo 1440 × 660,
   kicker à 157 px du bas, titre à 105 px du bas, x 58 ; capture studiomcgee-tool-desktop.png,
   y 0-660, lue le 2026-09-05). Le H1 est le seul emploi de `page` sur la page (DESIGN.md §3).
   Passe 2 (2026-09-05) : le pilier et l'article de conseil prennent le même hero, avec le fil
   d'Ariane posé sur la photo au-dessus du kicker (montages pilier-entete-passe1.png et
   article-conseil-entete-passe1.png sous 80 %). DESIGN.md §3 `titre.h1` disait « mot-principal
   sur blanc » pour ces deux pages : règle contestée au JOURNAL.
   Variantes : desktop 1440 × 560 sous la barre de 120 (silhouette totale 680 pour 660
   chez la référence) ; mobile 390 × 640 (référence mobile y 60-700).
   États : aucun, la photo n'est pas un lien.
   Interdits : bouton sur le hero d'article (la référence n'en a pas, capture 2026-09-05) ;
   cran `display` ici (DESIGN.md §7, réservé à l'éditoriale de l'accueil). */

.hero-article { position: relative; height: 560px; overflow: hidden; color: var(--mot-inverse); }
.hero-article > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-article::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* passe 7 : deux voiles. Un dégradé vertical qui commence plus haut et finit plus dense, et un nuage
     local (ellipse) sous le seul bloc de titre, bas-gauche : le reste de la photo garde sa lumière.
     Cible : kicker 11 px et H1 à 4,5:1 mesurés sur la photo réelle (mesure-contraste-photo.mjs, JOURNAL §11) ;
     le jury du 2026-09-05 mesurait 3,2:1 (kicker conseil) et 3,9:1 (H1 pilier) avec le voile de la passe 3. */
  background:
    radial-gradient(ellipse 66% 96% at 16% 100%, var(--voile-photo-dense) 0%, rgba(30,34,25,0.50) 40%, rgba(30,34,25,0.28) 65%, rgba(30,34,25,0) 100%),
    linear-gradient(180deg, rgba(30,34,25,0) 18%, rgba(30,34,25,0.34) 48%, var(--voile-photo-dense) 100%);
}
.hero-article .conteneur { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 72px; gap: var(--pas-4); }
.hero-article .kicker { color: var(--mot-inverse); }
/* passe 7 : le fil d'Ariane (15 px) est posé sur un fond olive à 85 % (--voile-photo-fort), pas sur la photo nue :
   2,6:1 mesuré par le jury sur la fenêtre du conseil, 3,9:1 sur le pilier ; cible 4,5:1. Le fond déborde de 12 px à
   gauche pour que le texte reste aligné à x 68 avec le kicker et le titre. */
.hero-article .fil-ariane { display: inline-flex; align-self: flex-start; background: var(--voile-photo-fort); padding: 6px 12px; margin: 0 0 var(--pas-2) -12px; }
.hero-article .fil-ariane, .hero-article .fil-ariane a { color: var(--mot-inverse); }
.hero-article .fil-ariane a:hover, .hero-article .fil-ariane [aria-current="page"] { color: var(--mot-inverse); }
.hero-article h1 {
  font-weight: 500; font-size: var(--ech-page); line-height: 1.08; max-width: 22ch;
  font-variation-settings: var(--opsz-grand); color: var(--mot-inverse);
}

@media (max-width: 719px) {
  .hero-article { height: 640px; }
  .hero-article::before {
    background:
      radial-gradient(ellipse 120% 60% at 30% 100%, var(--voile-photo-dense) 0%, rgba(30,34,25,0.40) 50%, rgba(30,34,25,0) 100%),
      linear-gradient(180deg, rgba(30,34,25,0) 30%, rgba(30,34,25,0.30) 55%, var(--voile-photo-dense) 100%);
  }
  .hero-article .conteneur { padding-bottom: var(--pas-8); gap: var(--pas-3); }
  .hero-article .fil-ariane { padding: 4px 10px; margin-left: -10px; }
  /* deux niveaux au plus en mobile (jury pages 2026-09-05, conseil 1) : le niveau courant est le H1 juste dessous */
  .hero-article .fil-ariane a ~ a ~ svg, .hero-article .fil-ariane a ~ a ~ [aria-current] { display: none; }
}
/* methode.css
   Rôle : bande olive « Comment nous choisissons une couleur » du pilier (brief amont
   2026-09-05, écran 2 : méthode en trois temps ; DESIGN.md §2 : un emploi de `bande` sur
   le pilier). Même geste que le manifeste de la référence (studiomcgee-home-desktop.png,
   section 6, y 2955-3555 : bande de 600, photo portrait 342 × 480 posée à 60 px du haut à
   gauche, colonne de texte à droite qui s'arrête à x 1120 et laisse 320 px vides). À la
   place du corps : trois temps numérotés séparés par des filets, longueurs inégales.
   Variantes : desktop deux colonnes ; mobile photo au-dessus puis texte.
   États : aucun lien dans la bande hors le renvoi final (bouton filet inverse).
   Interdits : trois cartes identiques (consigne de mission 2026-09-05) ; canard-600 sur
   olive (1,87:1, DESIGN.md §7). */

.methode { min-height: var(--bande-manifeste); }
.methode .conteneur { display: grid; grid-template-columns: 600px 456px; align-items: start; min-height: var(--bande-manifeste); }
.methode-photo { position: relative; height: var(--bande-manifeste); }
.methode-photo > div { position: absolute; left: 170px; top: 60px; width: 342px; height: 480px; overflow: hidden; }
.methode-photo img { width: 100%; height: 100%; object-fit: cover; }
.methode-texte { padding: 60px 0 var(--pas-9); display: flex; flex-direction: column; gap: var(--pas-6); }
.methode-texte .titre-section { color: var(--mot-inverse); }
.methode-temps { list-style: none; counter-reset: temps; border-top: 1px solid var(--bande-surface); }
.methode-temps li { counter-increment: temps; display: grid; grid-template-columns: 56px 1fr; gap: var(--pas-4); padding: var(--pas-5) 0; border-bottom: 1px solid var(--bande-surface); }
.methode-temps li::before { content: "0" counter(temps); font-family: var(--famille-titre); font-size: var(--ech-titre); line-height: 1; color: var(--action-inverse); font-variant-numeric: tabular-nums; }
.methode-temps h3 { font-size: var(--ech-grand); line-height: 1.25; color: var(--mot-inverse); }
.methode-temps p { margin-top: var(--pas-1); font-size: var(--ech-petit); line-height: 1.5; color: var(--mot-inverse-second); }
.methode-texte .bouton-filet { align-self: flex-start; }

@media (max-width: 1023px) {
  .methode .conteneur { grid-template-columns: 1fr; }
  .methode-photo { height: 440px; }
  .methode-photo > div { left: 0; top: 32px; width: 280px; height: 380px; }
  .methode-texte { padding: 0 0 var(--pas-8); }
}
@media (max-width: 719px) {
  .methode-temps li { grid-template-columns: 44px 1fr; }
  .methode-temps li::before { font-size: var(--ech-grand); }
}
/* questions.css
   Rôle : « Ce que les lectrices nous demandent sur la couleur », cinq questions et
   réponses (textes du brief amont 2026-09-05). Composition reprise de l'article de la
   référence : titre de section à gauche, texte dans la colonne de lecture 640 décalée à
   droite (x 730-1372, studiomcgee-tool-desktop.png, 2026-09-05). Chaque question est un
   titre serif 22 suivi de sa réponse ; filets entre les entrées.
   Variantes : desktop titre à gauche collé (sticky) et liste à droite ; mobile empilé.
   États : aucune interaction, tout est ouvert (pas d'accordéon : une réponse de trois
   lignes n'a rien à cacher).
   Interdits : accordéon ou chevron d'ouverture (rien ne se déplace, DESIGN.md §5). */

.questions { padding: var(--respire-large) 0 var(--respire); }
/* retouche opérateur 2026-09-05 : pistes communes aux pages intérieures (pages.css .grille-lecture) ; la piste de gauche porte le titre et une note de la rédaction dans une colonne latérale collante */
.questions .conteneur { display: grid; grid-template-columns: var(--laterale) var(--gouttiere-lecture) var(--lecture); /* retouche opérateur 2 : gouttière 80, conteneur 1080 (pages.css) */ align-items: start; }
.questions .colonne-laterale { padding-top: 0; }
.questions .titre-section { max-width: 12ch; }
.questions dl { grid-column: 3; }
.questions .laterale-note { font-size: var(--ech-petit); line-height: 1.5; color: var(--mot-second); }
.questions .laterale-note a { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
.questions dl { border-top: 1px solid var(--filet); }
.questions .entree { padding: var(--pas-6) 0; border-bottom: 1px solid var(--filet); }
.questions dt { font-family: var(--famille-titre); font-weight: 500; font-size: var(--ech-grand); line-height: 1.25; color: var(--mot-principal); font-variation-settings: var(--opsz-courant); }
.questions dd { margin-top: var(--pas-3); font-size: var(--ech-base); line-height: 1.6; color: var(--mot-courant); }

@media (max-width: 1023px) {
  .questions .conteneur { grid-template-columns: 1fr; row-gap: var(--pas-7); }
  .questions .colonne-laterale { border-bottom: 0; padding: 0; }
  .questions dl { grid-column: 1; }
  .questions .titre-section { max-width: none; }
  /* cible 44 px sur le lien inline sans casser la ligne : padding vertical compensé par une marge négative (regles-composition cibles 390 : 79 × 20 mesuré le 2026-09-05) */
  .questions .laterale-note a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
@media (max-width: 719px) {
  .questions { padding: var(--respire) 0; }
}
/* colonne-laterale.css
   Rôle : la colonne latérale collante (sticky) des pages intérieures, posée à gauche de la
   colonne de lecture 640 (retouche opérateur du 2026-09-05 : « le gros blanc à droite est
   bizarre », capture du guide en défilement). Elle porte, dans cet ordre : l'étiquette de
   teinte de l'article, la méta (rubrique · date · temps de lecture), le sommaire des H2, le
   partage. Modèles regardés le 2026-09-05 : Kinfolk (kinfolk-tool-desktop.png, y 1090-1120 :
   rangée « ISSUE 60, FEATURES · ARTS & CULTURE · Words / Photos · SHARE » puis image 272 px à
   gauche du corps 547, gouttière 308) et The Design Files (thedesignfiles-tool-desktop.png,
   y 990-1060 : logo « supported by » à gauche du titre centré). La référence Studio McGee
   laisse ce vide (studiomcgee-tool-desktop.png, x 68-730 vide sur 3600 px) : on le remplit
   avec du contenu réel, pas avec une décoration.
   Grille : voir pages.css (`--laterale` 320 | gouttière 1fr ≥ 64 | `--lecture` 640) ; la
   colonne de lecture ne bouge pas (x 732-1372, celui de la référence), tous les montages de
   corps déjà acceptés restent valables.
   Variantes : desktop collante sous la barre collée (72 + 24 px) ; ≤ 1023 px au-dessus du
   corps, réduite à l'étiquette et à la méta, sommaire replié (`details` fermé par enhance.js),
   partage masqué (il reste dans la méta de fin d'article).
   États : liens du sommaire `mot-courant` → `action` au survol, focus anneau ; cibles 24 px
   desktop, 44 px mobile ; `summary` 44 px.
   Interdits : contenu de substitution dans la colonne (le sommaire est celui des H2 réels,
   la teinte celle de l'article, consigne de mission 2026-09-05 « aucun placeholder »). */

.colonne-laterale {
  grid-column: 1; align-self: start;
  position: sticky; top: calc(var(--barre-hauteur-collee) + var(--pas-6));
  display: flex; flex-direction: column; gap: var(--pas-6);
  padding-top: 75px;                       /* même haut que le premier paragraphe de .colonne-lecture */
}
.colonne-laterale.sans-decalage { padding-top: 0; }

/* étiquette de teinte : regle.css + pages.css (.etiquette-claire) ; ici le filet est canard, le nom serif 22 */
.colonne-laterale .etiquette-teinte { margin: 0; }

/* méta : trois lignes libellé / valeur entre filets */
.laterale-meta { border-top: 1px solid var(--filet); }
.laterale-meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pas-3); padding: 10px 0; border-bottom: 1px solid var(--filet); }
.laterale-meta dt { font-family: var(--famille-corps); font-weight: 500; font-size: var(--ech-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--mot-second); }
.laterale-meta dd { font-size: var(--ech-petit); line-height: 1.4; color: var(--mot-principal); text-align: right; }
.laterale-meta dd a { color: var(--mot-principal); display: inline-flex; align-items: center; min-height: 24px; }
.laterale-meta dd a:hover { color: var(--action); }

/* sommaire des H2 : details ouvert sur desktop, replié sur mobile par enhance.js */
.sommaire summary { list-style: none; cursor: default; display: flex; align-items: center; gap: var(--pas-2); min-height: 24px; }
.sommaire summary::-webkit-details-marker { display: none; }
.sommaire summary .icone { display: none; width: 16px; height: 16px; }
.sommaire ol { list-style: none; counter-reset: sommaire; margin-top: var(--pas-3); }
.sommaire li { counter-increment: sommaire; display: grid; grid-template-columns: 28px 1fr; column-gap: var(--pas-2); }
.sommaire li + li { margin-top: var(--pas-2); }
.sommaire li::before { content: "0" counter(sommaire); font-family: var(--famille-titre); font-size: var(--ech-petit); line-height: 1.5; color: var(--action); font-variant-numeric: tabular-nums; }
.sommaire a { display: inline-flex; align-items: flex-start; min-height: 24px; font-size: var(--ech-petit); line-height: 1.5; color: var(--mot-courant); transition: color var(--duree) var(--courbe); }
.sommaire a:hover { color: var(--action); }

/* partage : mêmes liens que meta-partage.css (.partage), empilés sous un libellé */
.laterale-partage { display: flex; flex-direction: column; gap: var(--pas-3); }
.laterale-partage .partage { flex-direction: column; align-items: flex-start; gap: var(--pas-2); }   /* en colonne : en ligne, « Épingler » passait seul à la ligne (capture 2026-09-05) */

/* variante « notes » : les encarts source d'une suite de corps passent à gauche (article conseil, corps2) */
.colonne-laterale .encart-source { margin: 0; padding: var(--pas-5) 0; }
.colonne-laterale .encart-source + .encart-source { margin-top: -1px; border-top: 0; }
.colonne-laterale .encart-source p { font-size: var(--ech-mini); line-height: 1.5; }

@media (max-width: 1023px) {
  .colonne-laterale {
    position: static; padding: var(--pas-6) 0; gap: var(--pas-5);
    border-bottom: 1px solid var(--filet);
  }
  .colonne-laterale.sans-decalage { padding-top: 0; }
  .laterale-partage { display: none; }
  .sommaire summary { cursor: pointer; min-height: 44px; }
  .sommaire summary .icone { display: block; transition: transform var(--duree) var(--courbe); }
  .sommaire[open] summary .icone { transform: rotate(180deg); }
  .sommaire a { min-height: 44px; align-items: center; }
  .sommaire li::before { line-height: 44px; }
  .sommaire li + li { margin-top: 0; }
  .laterale-meta dd a { min-height: 44px; }
}
/* passerelle.css
   Rôle : « Les trois autres rubriques », le seul nœud inter-silos du site
   (`.claude/rules/codeco-decoration.md`, Maillage, 2026-09-05). Trois images 3:4 nues avec
   nom en petites capitales et une ligne, sur blanc, en hauteurs décalées (la centrale
   plus haute de 60 px) : le geste du Portfolio de la référence (studiomcgee-home-desktop.png,
   section 8, images latérales posées 60 px plus bas) transposé sur blanc.
   Variantes : desktop 3 colonnes 420 ; mobile 1 colonne, pas de décalage.
   États : chaque rubrique est un lien (survol : nom en action, image 90 %) ; focus anneau.
   Interdits : quatre rubriques (la courante ne se renvoie pas à elle-même) ; carte
   (DESIGN.md §7). */

/* passe 2 : sur bande olive, avec la rangée filet · bouton · filet du Portfolio (montage
   pilier-passerelle-passe1.png, 72 % sur blanc). Alternance conservée : méthode (bande) ·
   questions (blanc) · passerelle (bande) · lettre (blanc). */
.passerelle { padding: 80px 0 70px; }
.passerelle .titre-section { margin-left: 24px; }
.passerelle .titre-section { margin-bottom: var(--pas-8); }
.passerelle-grille { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gouttiere); align-items: start; }
.passerelle .rubrique-lien { display: block; }
.passerelle .rubrique-lien:nth-child(odd) { margin-top: 60px; }
.passerelle .rubrique-cadre { aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface-douce); }
.passerelle .rubrique-cadre img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--duree) var(--courbe); }
.passerelle h3 { margin-top: var(--pas-4); font-family: var(--famille-corps); font-weight: 500; font-size: var(--ech-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mot-inverse); transition: color var(--duree) var(--courbe); }
.passerelle p { margin-top: var(--pas-2); font-family: var(--famille-titre); font-size: var(--ech-grand); line-height: 1.25; color: var(--mot-inverse); font-variation-settings: var(--opsz-courant); }
.passerelle .rubrique-lien:hover h3 { color: var(--action-inverse); }
.passerelle-grille { width: min(1144px, 100%); margin-inline: auto; column-gap: clamp(22px, 5vw, 67px); }
.passerelle-nav { margin: 60px 24px 0; display: flex; align-items: center; gap: var(--pas-6); }
.passerelle-nav .filet-h { flex: 1; height: 1px; background: var(--inverse-second); opacity: 0.7; }
.passerelle .rubrique-lien:hover img { opacity: 0.9; }

@media (max-width: 719px) {
  .passerelle { padding: var(--respire) 0; }
  .passerelle-grille { grid-template-columns: 1fr; row-gap: var(--pas-8); }
  .passerelle .rubrique-lien:nth-child(odd) { margin-top: 0; }
  .passerelle .rubrique-cadre { aspect-ratio: 4 / 3; }
  .passerelle-grille { width: auto; column-gap: var(--gouttiere); }
  .passerelle .titre-section { margin-left: 0; }
  .passerelle-nav { margin: var(--pas-7) 0 0; }
}
/* galerie-etiquetee.css
   Rôle : la galerie pleine largeur de conteneur du guide couleur, chaque image portant
   son étiquette de teinte (signature `.etiquette-teinte`, DESIGN.md §6). Rythme lu sur la
   référence (studiomcgee-tool-desktop.png, 2026-09-05) : une image pleine 1304 × 742
   (y 2240-2982), une paire 641 × 764 gouttière 22 (y 3002-3766), une pleine 742. Chez nous
   cinq images : pleine · paire · paire, mêmes cotes.
   Différence assumée : la référence pose l'étiquette DANS l'angle de l'image sur un aplat
   olive-gris (swatch + nom + trois lignes) ; le brief amont du 2026-09-05 (§Images, article
   guide) impose « l'étiquette est posée sous l'image, jamais dessus ». Voir JOURNAL.
   Variantes : desktop grille 2 colonnes, `.pleine` sur les deux ; mobile une colonne.
   États : aucun, ni l'image ni l'étiquette ne sont des liens (DESIGN.md §6 : non interactive).
   Interdits : aplat de la couleur nommée ou code hexadécimal sur l'étiquette (brief amont
   2026-09-05, « Exemple de guide couleur ») ; texte posé sur la photographie (brief amont
   2026-09-05, §Images). */

.galerie-etiquetee { padding: var(--pas-10) 0 0; }
.galerie-etiquetee .grille { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gouttiere); row-gap: var(--pas-8); }
.galerie-etiquetee figure { margin: 0; }
.galerie-etiquetee figure.pleine { grid-column: 1 / -1; }
.galerie-etiquetee .cadre { height: var(--paire-hauteur); overflow: hidden; background: var(--surface-douce); }
.galerie-etiquetee figure.pleine .cadre { height: var(--ouverture-hauteur); }
.galerie-etiquetee .cadre img { width: 100%; height: 100%; object-fit: cover; }
.galerie-etiquetee figcaption { margin-top: var(--pas-3); }
.galerie-etiquetee .etiquette-teinte { display: flex; }
.galerie-etiquetee .etiquette-nom { font-size: var(--ech-grand); }
.galerie-etiquetee .etiquette-teinte { gap: var(--pas-1); }

@media (max-width: 719px) {
  .galerie-etiquetee { padding-top: var(--respire); }
  .galerie-etiquetee .grille { grid-template-columns: 1fr; row-gap: var(--pas-7); }
  .galerie-etiquetee .cadre { height: 110vw; }
  .galerie-etiquetee figure.pleine .cadre { height: 62vw; }
}
/* meta-partage.css
   Rôle : la barre de méta et de partage en bas d'article, entre deux filets pleine
   largeur de conteneur (référence : filets à y 4604 et 4728, trois colonnes « Date Posted ·
   Category · Share » alignées à droite x 1052-1372, libellé serif 20 et valeur en capitales
   10 ; capture studiomcgee-tool-desktop.png du 2026-09-05). Chez nous : la signature
   « La rédaction Codeco Décoration » à gauche, et à droite « Publié le · Rubrique · Partager »
   avec trois icônes de partage en trait 18 px, chacune avec son libellé (DESIGN.md §5).
   Variantes : desktop une ligne ; mobile empilé et centré (référence mobile y 5310-5560).
   États : liens de partage `mot-second` au repos, `action` au survol, focus anneau, cible
   44 px sur mobile ; la copie de lien passe en « Lien copié » (aria-live).
   Interdits : bouton de partage flottant ou compteur social (anti-références Pinterest,
   brief amont 2026-09-05). */

.meta-partage { margin-top: var(--pas-10); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding: var(--pas-8) 0; }
.meta-partage .conteneur { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--pas-8); }
.meta-partage .signature-article { margin-top: 0; }
.meta-colonnes { display: flex; gap: var(--pas-9); }
.meta-colonnes > div { display: flex; flex-direction: column; gap: var(--pas-3); }
.meta-colonnes dt { font-family: var(--famille-titre); font-weight: 500; font-size: var(--ech-moyen); color: var(--mot-principal); font-variation-settings: var(--opsz-courant); }
.meta-colonnes dd a { display: inline-flex; align-items: center; min-height: 24px; }
.meta-colonnes dd a:hover { color: var(--action); }
.meta-colonnes dd { font-family: var(--famille-corps); font-weight: 500; font-size: var(--ech-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--mot-second); }
.partage { display: flex; gap: var(--pas-4); }
.partage a, .partage button { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--mot-second); font-family: var(--famille-corps); font-weight: 500; font-size: var(--ech-micro); text-transform: uppercase; letter-spacing: 0.12em; transition: color var(--duree) var(--courbe); }
.partage a:hover, .partage button:hover { color: var(--action); }
.partage .icone { width: 18px; height: 18px; }

@media (max-width: 719px) {
  .meta-partage { margin-top: var(--respire); padding: var(--pas-7) 0; }
  .meta-partage .conteneur { flex-direction: column; align-items: center; text-align: center; gap: var(--pas-6); }
  .meta-partage .signature-article::before { display: none; }
  .meta-colonnes { flex-direction: column; align-items: center; gap: var(--pas-6); }
  .meta-colonnes > div { align-items: center; }
  .partage { flex-wrap: wrap; justify-content: center; }
  .partage a, .partage button, .meta-colonnes dd a { min-height: 44px; padding: 0 var(--pas-2); }
}
/* lecture-suivante.css
   Rôle : « À lire dans la même rubrique », le « Read More » de la référence : titre de
   section serif 32 sur une ligne à x 68 (y 4875), grille de trois modules d'article
   (images 421 × 450 à y 4940, titre serif 26, sous-titre serif 16, méta capitales),
   puis un bouton filet centré « VIEW ALL » (y 5595-5648) ; capture
   studiomcgee-tool-desktop.png du 2026-09-05. Réemploie `.module` de flux.css et en
   change seulement le ratio d'image (421/450 au lieu de 3/4) et le pas au-dessus.
   Le troisième module est la lettre de la rédaction (image + titre + chapô) : un article
   ne renvoie qu'à sa rubrique et à son pilier (`.claude/rules/codeco-decoration.md`,
   Maillage, 2026-09-05), la lettre n'est pas un silo.
   Variantes : desktop 3 colonnes ; mobile 1 colonne (référence mobile y 5840-7400, images
   294 × 355 empilées).
   États : ceux du module (flux.css) ; bouton filet (boutons.css).
   Interdits : quatrième module ou pagination (la référence en montre trois puis « View all »). */

.lecture-suivante { padding: 140px 0 var(--pas-10); }
.lecture-suivante .titre-section { margin-bottom: var(--pas-7); }
.lecture-suivante .flux-grille { --module-image-ratio: 421 / 450; }
.lecture-suivante .centre { margin-top: var(--pas-9); }

@media (max-width: 719px) {
  .lecture-suivante { padding: var(--respire) 0; }
  .lecture-suivante .flux-grille { grid-template-columns: 1fr; row-gap: var(--pas-8); }
  .lecture-suivante .flux-grille { --module-image-ratio: 294 / 355; }
  .lecture-suivante .module h3 { font-size: var(--ech-grand); }
  .lecture-suivante .centre { margin-top: var(--pas-8); }
}
/* reponse-rapide.css
   Rôle : « En cinq gestes, dans cet ordre », la réponse rapide de l'article de conseil
   (brief amont 2026-09-05, écran 4). Titre de section à gauche, liste numérotée dans la
   colonne de lecture décalée à droite (référence : corps à x 730-1372,
   studiomcgee-tool-desktop.png, 2026-09-05). Chiffres serif en `titre` 32 dans la marge,
   filets entre les gestes. Aussi : la paire d'images de corps 641 × 427 (3:2) qui rompt la
   colonne comme la galerie de la référence rompt la sienne.
   Variantes : desktop deux colonnes ; mobile empilé, chiffres 22.
   États : aucun.
   Interdits : icônes décoratives devant les gestes (DESIGN.md §5). */

.reponse-rapide { padding: var(--respire) 0 0; }
/* retouche opérateur 2026-09-05 : pistes communes aux pages intérieures (pages.css .grille-lecture) */
.reponse-rapide .conteneur { display: grid; grid-template-columns: var(--laterale) var(--gouttiere-lecture) var(--lecture); /* retouche opérateur 2 : gouttière 80, conteneur 1080 (pages.css) */ align-items: start; }
.reponse-rapide .gestes { grid-column: 3; }
.reponse-rapide .titre-section { max-width: 14ch; }
.gestes { list-style: none; counter-reset: geste; border-top: 1px solid var(--mot-principal); }
.gestes li { counter-increment: geste; display: grid; grid-template-columns: 64px 1fr; gap: var(--pas-4); padding: var(--pas-5) 0; border-bottom: 1px solid var(--filet); font-size: var(--ech-base); line-height: 1.6; color: var(--mot-principal); }
.gestes li::before { content: "0" counter(geste); font-family: var(--famille-titre); font-size: var(--ech-titre); line-height: 1; color: var(--action); font-variant-numeric: tabular-nums; }
.gestes strong { font-weight: 500; }

.paire-images { padding: var(--pas-9) 0 0; }
.paire-images .conteneur { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gouttiere); }
.paire-images figure { margin: 0; }
.paire-images .cadre { aspect-ratio: 641 / 560; /* passe 2 : la paire de la référence fait 641 × 764, un 3:2 pur (427) paraissait mince, montage article-conseil-images-passe1.png */ overflow: hidden; background: var(--surface-douce); }
.paire-images img { width: 100%; height: 100%; object-fit: cover; }
.paire-images figcaption { margin-top: var(--pas-3); font-size: var(--ech-petit); line-height: 1.5; color: var(--mot-second); }

.tableau-large { padding: var(--pas-9) 0 0; }

@media (max-width: 1023px) {
  .reponse-rapide .conteneur { grid-template-columns: 1fr; row-gap: var(--pas-6); }
  .reponse-rapide .gestes { grid-column: 1; }
  .reponse-rapide .titre-section { max-width: none; }
}
@media (max-width: 719px) {
  .reponse-rapide { padding-top: var(--pas-8); }
  .gestes li { grid-template-columns: 44px 1fr; }
  .gestes li::before { font-size: var(--ech-grand); }
  .paire-images .conteneur { grid-template-columns: 1fr; row-gap: var(--pas-6); }
  .paire-images, .tableau-large { padding-top: var(--pas-8); }
}
/* etats.css
   Rôle : l'écran d'états (brief amont 2026-09-05, écran 5) : chaque composant dans ses
   huit états (repos, survol, focus, actif, désactivé, erreur, vide, chargement), avec les
   textes exacts du brief. Les états qui dépendent du pointeur ou du clavier (survol, focus,
   actif) sont FORCÉS par l'attribut `data-etat` de la cellule, en recopiant à l'identique
   les règles de boutons.css, lettre.css et flux.css : cette feuille ne sert qu'à cet écran
   et n'est chargée par aucune page du site.
   Variantes : grille de 4 cellules par rangée sur desktop, 2 sur mobile.
   États : ceux des composants ; les cellules « sans objet » le disent en toutes lettres
   (brief amont 2026-09-05, Textes d'états : « (sans objet) »).
   Interdits : attribut `disabled` (règles non négociables, rappelées au brief amont
   2026-09-05) ; état inventé hors des huit nommés ; texte d'état différent du brief. */

.etats-entete { padding: var(--pas-8) 0 var(--pas-7); }
.etats-entete .titre-page { max-width: 24ch; }
.etats-entete p { margin-top: var(--pas-5); max-width: 70ch; color: var(--mot-courant); }

.composant { padding: var(--pas-9) 0; border-top: 1px solid var(--filet); }
.composant header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pas-6); margin-bottom: var(--pas-7); }
.composant header h2 { font-size: var(--ech-titre); line-height: 1.15; }
.composant header p { font-size: var(--ech-petit); color: var(--mot-second); max-width: 52ch; }
.cellules { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pas-7) var(--gouttiere); }
.cellule { display: flex; flex-direction: column; gap: var(--pas-4); min-height: 120px; }
.cellule > .libelle { color: var(--mot-second); display: flex; align-items: center; gap: var(--pas-2); }
.cellule > .libelle::before { content: ""; width: 12px; height: 1px; background: var(--action); }
.cellule .sans-objet { font-size: var(--ech-petit); color: var(--mot-second); font-style: italic; }
.cellule .bande-cellule { background: var(--bande); padding: var(--pas-5); color: var(--mot-inverse); }
.cellule .champ-groupe { margin-top: 0; }
.cellule .champ-ligne { max-width: none; }
.cellule .note { font-size: var(--ech-mini); color: var(--mot-second); }

/* ---- états forcés : recopie des règles de survol, focus et actif ---- */
[data-etat="survol"] .bouton-filet { background: var(--action); color: var(--blanc); }
[data-etat="actif"] .bouton-filet { background: var(--action-appui); border-color: var(--action-appui); color: var(--blanc); }
[data-etat="survol"] .bande-cellule .bouton-filet { background: var(--blanc); color: var(--olive-900); }
[data-etat="survol"] .bouton-plein, [data-etat="actif"] .bouton-plein { background: var(--action-appui); border-color: var(--action-appui); }
[data-etat="survol"] .bouton-secondaire { color: var(--action); text-decoration-color: var(--action); }
[data-etat="actif"] .bouton-secondaire { color: var(--action-appui); }
[data-etat="focus"] .bouton-filet, [data-etat="focus"] .bouton-plein, [data-etat="focus"] .bouton-secondaire, [data-etat="focus"] .module { outline: var(--focus-anneau); outline-offset: 3px; }
[data-etat="survol"] .champ { border-color: var(--mot-second); }
[data-etat="focus"] .champ, [data-etat="actif"] .champ { border: 2px solid var(--action); outline: var(--focus-anneau); outline-offset: 3px; }
.champ[aria-disabled="true"] { color: var(--mot-second); border-color: var(--filet); background: var(--blanc); }
.champ[aria-busy="true"] { border-color: var(--action); }
[data-etat="survol"] .module .module-image::after { opacity: 0.08; }
[data-etat="survol"] .module h3 { color: var(--action); }
[data-etat="actif"] .module .module-image::after { opacity: 0.14; }
[data-etat="actif"] .module h3 { color: var(--action-appui); }
.module .module-erreur { margin-top: var(--pas-2); font-size: var(--ech-petit); color: var(--mot-second); }
.module[aria-busy="true"] .module-image { background: var(--surface-douce); }
.module[aria-busy="true"] .meta { color: var(--mot-second); background: none; }
.module .module-image .visuellement-cache { position: absolute; }

@media (max-width: 1023px) { .cellules { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 719px) { .composant header { flex-direction: column; } .cellules { grid-template-columns: 1fr; } }
/* recherche.css : propre au site (pas dans la compo) : la page /recherche/, la 404 et la page À propos
   partagent l'en-tête de page sur blanc de pages.css (`.en-tete-page`, `.titre-page`, `.kicker`) ; ce
   fichier ajoute la liste de résultats de Pagefind et ses états, avec les seuls tokens de tokens.css.
   Liste nue à filets, rubrique en petites capitales (`.meta`), titre serif, extrait avec les mots
   trouvés soulignés (jamais un aplat de couleur). Cibles 44 px. */

.rech-champ { max-width: 640px; }
.rech-champ .champ-ligne { max-width: none; }
.rech-compte { margin-top: var(--pas-6); font-size: var(--ech-petit); color: var(--mot-second); min-height: 1.6em; }
.rech-etat { margin-top: var(--pas-6); padding: var(--pas-6) 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); color: var(--mot-courant); max-width: 680px; }
.rech-etat b { display: block; font-family: var(--famille-titre); font-weight: 500; font-size: var(--ech-grand); color: var(--mot-principal); margin-bottom: var(--pas-2); }
.rech-rubriques { display: flex; flex-wrap: wrap; gap: var(--pas-2) var(--pas-5); margin-top: var(--pas-4); }
.rech-rubriques a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--ech-micro); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--action); text-decoration: underline; text-underline-offset: 4px; }
.rech-liste { margin-top: var(--pas-6); max-width: 680px; border-top: 1px solid var(--filet); }
.rech-resultat { border-bottom: 1px solid var(--filet); }
.rech-resultat a { display: block; padding: var(--pas-5) 0; }
.rech-resultat h2 { font-size: var(--ech-grand); line-height: 1.25; margin-top: var(--pas-1); color: var(--mot-principal); transition: color var(--duree) var(--courbe); }
.rech-resultat a:hover h2 { color: var(--action); }
.rech-resultat p.rech-extrait { margin-top: var(--pas-2); font-size: var(--ech-petit); line-height: 1.5; color: var(--mot-courant); }
.rech-extrait mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--action); text-underline-offset: 3px; }
/* motion.css — codeco-decoration, passe 6 (2026-09-05), passe 7 (barre sticky, bouton deux couches, hero 1,04).
   Rôle : le vocabulaire de mouvement de la marque (JOURNAL.md §10.2, DESIGN.md §5),
   piloté par les tokens --mouvement-* de tokens.css. Registre éditorial et calme :
   ce qui bouge se pose, rien ne saute, rien ne tourne, rien ne compte.
   Source : mot de l'opérateur du 2026-09-05 (« de l'animation, beau et smooth »),
   référence Studio McGee sondée le 2026-09-05 (fadeInUp 20 px / 600 ms ease-out),
   demenavi compo-v2 (état caché seulement sous html.js-anim).
   Règles :
   - l'état caché (.reveal) n'existe que sous html.js-anim, posé par js/enhance.js :
     sans JS la page est entière ;
   - après l'apparition, le script retire .reveal : l'état final est celui de la
     passe 5 au pixel, et les transitions de survol des composants reprennent ;
   - html.motion-fin (posé par capture.mjs via window.__codecoMotionFin) coupe tout, y compris
     les transitions de survol : toute mesure de survol ou de bouton prise après lui est fausse
     (jury mouvement 2026-09-05, doctrine 3) ;
   - prefers-reduced-motion: reduce : tokens à 0 ms et échelle 1 (base.css annule
     déjà transitions et animations, double sécurité). */

/* ---------- 1. Apparition au défilement ---------- */
html.js-anim .reveal {
  opacity: 0;
  transform: translateY(var(--mouvement-translation));
  transition:
    opacity var(--mouvement-apparition) var(--mouvement-courbe-pose) var(--cascade, 0ms),
    transform var(--mouvement-apparition) var(--mouvement-courbe-pose) var(--cascade, 0ms);
  will-change: opacity, transform;
}
html.js-anim .reveal.est-visible { opacity: 1; transform: none; }

/* le trait de la règle pousse de haut en bas au lieu de monter */
html.js-anim .regle-trait.reveal { opacity: 1; transform: scaleY(0); transform-origin: top; }
html.js-anim .regle-trait.reveal.est-visible { transform: none; }

/* le filet de l'étiquette de teinte s'étire, 200 ms après le texte ;
   sous js-anim la bordure devient transparente et ::before la redessine au pixel */
html.js-anim .etiquette-teinte { position: relative; border-left-color: transparent; }
html.js-anim .etiquette-teinte::before {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: var(--action-inverse); clip-path: inset(0);
  transition: clip-path var(--mouvement-filet) var(--mouvement-courbe-pose) 200ms;
}
/* clip-path plutôt que scaleY : sur un pseudo-élément animé par le compositeur,
   Chromium ignorait transform-origin (bouton rempli depuis la droite, frames du
   2026-09-05, JOURNAL §10.4) ; clip-path et translate n'ont pas d'origine. */
html.js-anim .etiquette-teinte.reveal::before { clip-path: inset(0 0 100% 0); }
html.js-anim .etiquette-teinte.reveal.est-visible::before { clip-path: inset(0); }

/* ---------- 2. Barre collante ---------- */
/* Passe 7 (jury mouvement du 2026-09-05, correction 1). La barre est sticky, comme demenavi,
   et ne quitte jamais le flux : plus de passage static → fixed (saut de 9 px au seuil), plus
   de padding compensatoire. Elle garde ses 120 px de flux en permanence : réduite, elle glisse
   de --barre-decalage (-48 px) au-dessus du bord et 72 px restent visibles ; le contenu
   redescend de la moitié pour rester centré dans la partie visible. Rien sous elle ne change
   de hauteur : le haut du hero reste à y constant à toute position de défilement (mesuré
   passe 7). demenavi anime la hauteur (76 → 64) et déplace son hero de 12 px ; ici non. */
.barre { position: sticky; top: 0; z-index: 60; }
html.js-anim .barre {
  transition: top var(--mouvement-barre) var(--mouvement-courbe-pose),
              background-color var(--mouvement-barre) var(--mouvement-courbe-pose),
              box-shadow var(--mouvement-barre) var(--mouvement-courbe-pose);
}
html.js-anim .barre .logo, html.js-anim .barre a.rubrique, html.js-anim .barre .barre-lettre a, html.js-anim .barre .barre-lettre small,
html.js-anim .barre .barre-recherche, html.js-anim .barre .barre-burger, html.js-anim .barre .barre-filet {
  transition: color var(--mouvement-barre) var(--mouvement-courbe-pose), background-color var(--mouvement-barre) var(--mouvement-courbe-pose);
}
html.js-anim .barre .conteneur { transition: transform var(--mouvement-barre) var(--mouvement-courbe-pose); }
.barre.est-collee {
  top: var(--barre-decalage);
  box-shadow: 0 1px 0 var(--barre-filet-colle);   /* un filet, pas une ombre (DESIGN.md §7) ; couleurs de l'état collé dans nav.css (retouche opérateur 2026-09-05) */
}
.barre.est-collee .conteneur { transform: translateY(calc(-0.5 * var(--barre-decalage))); }
@media (max-width: 719px) {
  /* décalage nul : aucun transform, sinon il deviendrait le bloc conteneur du menu déroulé (position: absolute) */
  .barre.est-collee .conteneur { transform: none; }
}
html.js-anim [id] { scroll-margin-top: calc(var(--barre-hauteur-collee) + 12px); }

/* ---------- 3. La photo du hero se pose ---------- */
@keyframes respire {
  from { transform: scale(var(--mouvement-echelle-hero)); }
  to { transform: none; }
}
.hero-cadre img { animation: respire var(--mouvement-respiration) var(--mouvement-courbe-pose) both; }

/* ---------- 4. Photos qui gagnent 2 à 3 % au survol, dans leur cadre fixe ---------- */
.module-image img, .collage img, .editoriale > img {
  transition: transform var(--mouvement-survol) var(--mouvement-courbe-pose);
}
.module:hover .module-image img, .rubrique:hover .rubrique-image img { transform: scale(var(--mouvement-echelle-survol)); }
.editoriale:hover > img { transform: scale(var(--mouvement-echelle-survol-large)); }
.collage-grande:hover img, .collage-petite:hover img { transform: scale(var(--mouvement-echelle-survol)); }

/* ---------- 5. Le bouton filet s'emplit de gauche à droite ---------- */
/* Passe 7 (jury mouvement du 2026-09-05, correction 2) : deux couches. Le libellé de repos
   reste en place et garde sa couleur ; ::before porte le fond plein ET le même libellé en
   couleur inverse (content: attr(data-libelle), posé par enhance.js), et un clip-path les
   découvre ensemble de gauche à droite. À chaque instant, chaque lettre est soit action sur
   blanc, soit blanc sur action : le texte se lit pendant toute la course (frames à 60 / 150 /
   300 / 450 ms). Sans script : fond et couleur en 180 ms ensemble (repli, aucun ::before).
   Le remplissage par background-size (passe 6) est conservé comme repli sans script ; les
   deux premières versions (scaleX, translateX sur ::before) étaient rendues à l'envers par
   Chromium (JOURNAL §10.4). */
.bouton-filet {
  position: relative; overflow: hidden;
  background-image: linear-gradient(var(--action), var(--action));
  background-repeat: no-repeat; background-position: 0 0; background-size: 0% 100%;
  transition: background-size var(--mouvement-courte) var(--mouvement-courbe),
              color var(--mouvement-courte) var(--mouvement-courbe),
              border-color var(--mouvement-courte) var(--mouvement-courbe);
}
.bouton-filet:hover, .bouton-filet:active { background-size: 100% 100%; }
.bouton-filet:active { background-image: linear-gradient(var(--action-appui), var(--action-appui)); }
.bande .bouton-filet, .sur-photo .bouton-filet { background-image: linear-gradient(var(--blanc), var(--blanc)); }
.bouton-filet[aria-disabled="true"] { background-image: none; }

html.js-anim .bouton-filet { background-image: none; }
html.js-anim .bouton-filet:hover, html.js-anim .bouton-filet:active { color: var(--action); }
html.js-anim .bande .bouton-filet:hover, html.js-anim .sur-photo .bouton-filet:hover,
html.js-anim .bande .bouton-filet:active, html.js-anim .sur-photo .bouton-filet:active { color: var(--mot-inverse); }
html.js-anim .bouton-filet::before {
  content: attr(data-libelle); position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; padding: 0 var(--bouton-remplissage);
  background: var(--action); color: var(--blanc); white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--mouvement-filet) var(--mouvement-courbe-pose), background-color var(--mouvement-courte) var(--mouvement-courbe);
}
html.js-anim .bouton-filet:hover::before, html.js-anim .bouton-filet:active::before { clip-path: inset(0); }
html.js-anim .bouton-filet:active::before { background: var(--action-appui); }
html.js-anim .bande .bouton-filet::before, html.js-anim .sur-photo .bouton-filet::before { background: var(--blanc); color: var(--olive-900); }
html.js-anim .bande .bouton-filet:active::before, html.js-anim .sur-photo .bouton-filet:active::before { color: var(--olive-950); }
html.js-anim .bouton-filet[aria-disabled="true"]::before { content: none; }

/* ---------- 6. Voile de la règle qui s'éclaircit au survol ---------- */
.regle::before { transition: background-color var(--mouvement-survol) var(--mouvement-courbe); }
.regle:hover::before { background: var(--voile-photo-regle-survol); }

/* ---------- 7. Galerie : défilement doux au clavier (les flèches passent par le script) ---------- */
html.js-anim .galerie-defile { scroll-behavior: smooth; }

/* ---------- 8. État final forcé (captures) et mouvement réduit ---------- */
html.motion-fin *, html.motion-fin *::before, html.motion-fin *::after {
  transition: none !important; animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --mouvement-courte: 0ms; --mouvement-apparition: 0ms; --mouvement-cascade: 0ms;
    --mouvement-cascade-max: 0ms; --mouvement-barre: 0ms; --mouvement-respiration: 0ms;
    --mouvement-survol: 0ms; --mouvement-filet: 0ms; --mouvement-defilement: 0ms;
    --mouvement-translation: 0px; --mouvement-echelle-hero: 1;
    --mouvement-echelle-survol: 1; --mouvement-echelle-survol-large: 1;
  }
  html.js-anim .galerie-defile { scroll-behavior: auto; }
  .hero-cadre img { animation: none; }
}