/*
Theme Name: L'Etabli
Theme URI: https://www.remouleur-affuteur.fr
Description: Theme de remouleur-affuteur.fr. Enfant de Twenty Twenty-Five.
  Sans-serif, fond gris-bleu froid, accent acier : DELIBEREMENT hors de
  l'archetype « editorial-premium-artisan » (serif + creme + accent chaud)
  que docs/template-site.md interdit, parce qu'al-creations le coche 4/4.
  Aucune photographie de personne ni de lieu, par decision du 01/09/2026.
Author: L'Etabli
Template: twentytwentyfive
Version: 1.0
Text Domain: etabli
*/

/* ── Polices auto-hebergees. UNE declaration par famille, font-weight en
   PLAGE : le fichier 400 et le fichier 600 d'IBM Plex Sans ont le meme md5,
   c'est une variable. Deux fichiers, 49 Ko, zero doublon. ────────────────── */
@font-face{
  font-family:"Plex Sans";
  src:url("assets/fonts/plex-sans.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Plex Mono";
  src:url("assets/fonts/plex-mono.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ── Charpente. Noms de classes DISTINCTS d'al-creations : ni hero, ni chapo,
   ni enbref, ni tablewrap, ni sommaire. Un site qui reprend les memes classes
   est reconnaissable au curl, quel que soit son theme. ───────────────────── */

body{ -webkit-font-smoothing:antialiased; }

.et-entete{
  border-bottom:1px solid var(--wp--preset--color--trait);
  margin-bottom:var(--wp--preset--spacing--50);
}
.et-marque{ font-weight:600; letter-spacing:-.02em; text-decoration:none; }
/* le logo remplace le titre texte (02/09/2026, demande de Mathieu) : une image
   d'une seule ligne, largeur bornee pour que le menu tienne a cote, jamais
   coupee ni empilee, meme sur mobile */
.et-logo{ display:block; flex:0 0 auto; line-height:0; }
.et-logo img{ display:block; width:clamp(150px, 38vw, 200px); height:auto; }
.et-marque .et-accent{ color:var(--wp--preset--color--meule); }
.et-nav a{ text-decoration:none; color:var(--wp--preset--color--doux); }
.et-nav a:hover{ color:var(--wp--preset--color--encre); }

/* l'ouverture : une observation, pas un chapo typographie */
.et-ouverture{ font-size:1.2rem; line-height:1.55; }

/* la fiche technique, en tete des articles a chiffres */
.et-fiche{
  border-left:3px solid var(--wp--preset--color--meule);
  background:var(--wp--preset--color--carte);
  padding:1rem 1.25rem; margin:0 0 1.75rem;
}
.et-fiche dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.25rem; }
.et-fiche dt{ color:var(--wp--preset--color--doux); }
.et-fiche dd{ margin:0; font-weight:500; }
.et-valeur{ font-family:"Plex Mono",ui-monospace,monospace; color:var(--wp--preset--color--meule); }

/* un terme technique, defini a sa premiere occurrence */
.et-terme{ font-weight:600; }
.et-terme em{ font-style:normal; font-weight:400; color:var(--wp--preset--color--doux); font-size:.94em; }

/* les tableaux : lisibles, sans bordure exterieure */
.wp-block-table table{ border-collapse:collapse; }
.wp-block-table td, .wp-block-table th{
  border:0; border-bottom:1px solid var(--wp--preset--color--trait); padding:.6rem .7rem;
}
.wp-block-table th{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--wp--preset--color--doux); font-weight:600;
}
.wp-block-table{ overflow-x:auto; }

/* les figures : schema ou photo, meme traitement */
.wp-block-image figcaption{
  color:var(--wp--preset--color--doux); font-size:.86rem; line-height:1.5;
  border-left:2px solid var(--wp--preset--color--meule); padding-left:.7rem; margin-top:.6rem;
}
.wp-block-image img{ border-radius:2px; }

.et-signature{
  margin-top:2.6rem; padding-top:1.1rem;
  border-top:1px solid var(--wp--preset--color--trait);
  color:var(--wp--preset--color--doux); font-size:.92rem; line-height:1.6;
}
.et-signature strong{ color:var(--wp--preset--color--encre); }

.et-pied{
  border-top:1px solid var(--wp--preset--color--trait);
  margin-top:var(--wp--preset--spacing--60);
  color:var(--wp--preset--color--doux); font-size:.88rem;
}
.et-pied a{ color:var(--wp--preset--color--doux); }


/* ════════════════════════════════════════════════════════════════════════
   L'ACCUEIL COMPOSE. Releve du 01/09 sur un site de reference : 6 sections,
   images pleine largeur, echelle d'affichage jusqu'a 5rem. Nos concurrents
   directs, eux, empilent des paragraphes dans du Bootstrap 3.
   ════════════════════════════════════════════════════════════════════════ */

.et-accueil > *{ margin-block:0; }

/* le bandeau d'ouverture : grand, sobre, sans image de fond */
.et-manchette{
  padding-block:clamp(3.5rem,9vw,7rem) clamp(2.5rem,6vw,4.5rem);
  border-bottom:1px solid var(--wp--preset--color--trait);
}
.et-manchette h1, .et-manchette .et-display{
  font-size:var(--wp--preset--font-size--display);
  line-height:1.02; letter-spacing:-.035em; font-weight:600;
  margin:0 0 1.6rem; max-width:16ch; text-wrap:balance;
}
.et-manchette .et-chapeau{
  font-size:clamp(1.15rem,2.1vw,1.45rem); line-height:1.5;
  max-width:38ch; color:var(--wp--preset--color--encre);
}
.et-manchette .et-sous{ color:var(--wp--preset--color--doux); max-width:46ch; margin-top:1rem; }

/* une section = un sujet, alternee texte / image */
.et-section{ padding-block:clamp(2.8rem,6vw,5rem); border-bottom:1px solid var(--wp--preset--color--trait); }
.et-section:last-of-type{ border-bottom:0; }
.et-section .et-numero{
  font-family:"Plex Mono",ui-monospace,monospace; font-size:.78rem;
  letter-spacing:.14em; color:var(--wp--preset--color--braise);
  display:block; margin-bottom:.7rem;
}
.et-section h2{ font-size:clamp(1.55rem,3vw,2.15rem); letter-spacing:-.02em; margin:0 0 .8rem; }

@media (min-width:900px){
  .et-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
  .et-duo.est-inverse > :first-child{ order:2; }
}

/* les emplacements d'image : ratio fixe, jamais de saut de mise en page */
.et-visuel{ position:relative; overflow:hidden; border-radius:3px; background:var(--wp--preset--color--carte); }
.et-visuel img{ width:100%; height:100%; object-fit:cover; display:block; }
.et-visuel.est-large{ aspect-ratio:16/9; }
.et-visuel.est-carre{ aspect-ratio:1; }
.et-visuel.est-haut{ aspect-ratio:4/5; }
/* en attendant les photos : une trame d'atelier, honnete, qui ne simule rien */
.et-visuel:empty::after{
  content:"image à venir"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:"Plex Mono",ui-monospace,monospace; font-size:.72rem;
  letter-spacing:.12em; color:var(--wp--preset--color--doux);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 11px, color-mix(in srgb, var(--wp--preset--color--trait) 70%, transparent) 11px 12px);
  border:1px solid var(--wp--preset--color--trait);
}

/* les cartes de piliers */
.et-cartes{ display:grid; gap:1px; background:var(--wp--preset--color--trait);
            border-block:1px solid var(--wp--preset--color--trait); }
@media (min-width:760px){ .et-cartes{ grid-template-columns:repeat(3,1fr); } }
.et-carte{ background:var(--wp--preset--color--fond); padding:1.6rem 1.5rem 1.8rem;
           transition:background .18s ease; }
.et-carte:hover{ background:var(--wp--preset--color--carte); }
.et-carte h3{ font-size:1.1rem; margin:.5rem 0 .5rem; letter-spacing:-.01em; }
.et-carte h3 a{ text-decoration:none; color:inherit; }
.et-carte h3 a:hover{ text-decoration:underline; text-underline-offset:.22em; }
.et-carte p{ font-size:.94rem; color:var(--wp--preset--color--doux); margin:0; line-height:1.55; }
.et-carte .et-numero{ margin:0; }

/* le chiffre mis en avant, signature du site */
.et-chiffre{ display:block; font-family:"Plex Mono",ui-monospace,monospace;
  font-size:clamp(2.2rem,5vw,3.4rem); line-height:1; letter-spacing:-.03em;
  color:var(--wp--preset--color--meule); }
.et-chiffre + .et-legende{ display:block; color:var(--wp--preset--color--doux);
  font-size:.9rem; margin-top:.5rem; max-width:32ch; }

/* entete collante, qui se resserre au defilement */
.et-entete{ position:sticky; top:0; z-index:8;
  background:color-mix(in srgb, var(--wp--preset--color--fond) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(9px);
  transition:padding .2s ease, box-shadow .2s ease; }
.et-entete .et-barre{ padding-block:.95rem; transition:padding .2s ease; }
body.a-defile .et-entete .et-barre{ padding-block:.55rem; }
body.a-defile .et-entete{ box-shadow:0 1px 0 var(--wp--preset--color--trait); }
.et-marque{ font-size:1.05rem; }

@media (prefers-reduced-motion:reduce){
  .et-entete, .et-entete .et-barre, .et-carte{ transition:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   ⚠ CORRECTION du 01/09 au soir, sur capture Playwright. L'accueil entier
   etait enferme dans les 42rem de la colonne de LECTURE : sur un ecran de
   1440 px il occupait 47 % de la largeur, et les sections en duo n'avaient
   que la moitie de cette colonne, soit des images de 200 px. Une page
   d'accueil et un article n'ont pas la meme mesure.
   ════════════════════════════════════════════════════════════════════════ */
main.et-accueil{ max-width:none; padding:0; }

/* Chaque section EST le conteneur centre. Les enfants restent en flux, cales
   a gauche : la premiere version mettait margin-inline:auto sur les enfants,
   ce qui centrait le chapo pendant que le titre debordait a gauche, parce
   qu'une regle plus loin remettait margin:0. Vu sur capture, corrige. */
main.et-accueil{ padding-inline:var(--et-gouttiere); }
.et-manchette, .et-section, .et-bande-cartes{
  max-width:72rem; margin-inline:auto; padding-inline:0;
}
.et-manchette > *, .et-section > *{ margin-inline:0; }

.et-manchette{ padding-block:clamp(4rem,10vw,8rem) clamp(2.5rem,6vw,4rem); }
.et-manchette .et-display{ max-width:22ch; margin:0 0 1.7rem; }
.et-manchette .et-chapeau{ max-width:48ch; margin:0; }
.et-manchette .et-sous{ max-width:56ch; margin:1.1rem 0 0; }

/* les cartes : le fond ne deborde plus, il est porte par la grille elle-meme */

.et-cartes{
  display:grid; gap:1px; background:var(--wp--preset--color--trait);
  border:1px solid var(--wp--preset--color--trait); border-radius:3px;
  overflow:hidden; max-width:none; padding:0;
}
@media (min-width:760px){ .et-cartes{ grid-template-columns:repeat(3,1fr); } }
.et-carte{ background:var(--wp--preset--color--carte); padding:1.5rem 1.4rem 1.6rem;
  display:flex; flex-direction:column; gap:.2rem;
  transition:background .18s ease, box-shadow .18s ease; position:relative; }
/* le liseré d'accent ne se dessine qu'au survol : il colore sans decorer */
.et-carte::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--wp--preset--color--braise);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.et-carte:hover::before{ transform:scaleX(1); }
.et-carte p{ margin:.35rem 0 0; }

.et-section{ padding-block:clamp(3.2rem,7vw,5.5rem); border-bottom:1px solid var(--wp--preset--color--trait); }
.et-section:last-of-type{ border-bottom:0; }
.et-manchette{ border-bottom:1px solid var(--wp--preset--color--trait); }
.et-manchette::after, .et-section::after{ content:none; }
.et-section > h2, .et-section > p{ max-width:52ch; }

@media (min-width:900px){
  .et-duo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
           gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
  .et-duo.est-inverse > :first-child{ order:2; }
  .et-duo > div:not(.et-visuel){ max-width:42ch; }
}

.et-chiffre{ font-family:inherit; font-weight:600; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums; margin-top:1.4rem; }

/* ⚠ L'entete et le pied suivaient la colonne de LECTURE (42rem) pendant que
   l'accueil tenait sur 72rem : la marque etait visiblement decalee vers la
   droite par rapport au titre. Vu sur capture le 01/09. Une entete de site
   est pleine largeur, la colonne de texte reste etroite. */
/* ⚠ On ne lutte pas contre la mise en page de WordPress, on lui donne sa
   variable. Les blocs `is-layout-constrained` centrent leurs enfants sur
   --wp--style--global--content-size : la redefinir sur l'entete et le pied
   suffit, la surcharger en CSS ne suffisait pas. */
/* ⚠ UNE SEULE gouttiere pour tout le site, definie dans theme.json, et une
   seule largeur de contenu large. Deux systemes coexistaient : les sections
   ajoutaient leur padding EN DEHORS des 72rem, l'entete le mettait DEDANS.
   Aligne a 1440 px, decale de 20 px a 1024. Mesure, puis unifie. */
.et-entete, .et-pied{ --wp--style--global--content-size:72rem; }
.et-pied{ padding-block:2rem 2.6rem; }

/* ════════════════════════════════════════════════════════════════════════
   BANDES SOMBRES. La palette d'origine etait sobre au point d'etre anonyme
   (constat de Mathieu, 01/09). Une section sur deux bascule en graphite :
   c'est ce qui differencie, bien plus qu'un changement de teinte.
   Pire contraste calcule : 4,54:1 (braise sur teinte), tout au-dessus de 4,5.
   ⚠ Le site est en THEME CLAIR SEUL depuis le 01/09 (decision de Mathieu) :
   le bloc prefers-color-scheme:dark a ete retire, ces bandes sombres sont
   un element de design du theme clair, pas un mode.
   ════════════════════════════════════════════════════════════════════════ */
.est-sombre{
  --wp--preset--color--fond:#12110f;
  --wp--preset--color--carte:#1b1a17;
  --wp--preset--color--encre:#f2efe8;
  --wp--preset--color--doux:#a8a297;
  --wp--preset--color--meule:#c89b62;
  --wp--preset--color--braise:#e0855c;
  --wp--preset--color--trait:#2b2924;
  background:var(--wp--preset--color--fond);
  color:var(--wp--preset--color--encre);
  border-bottom:0;
}
.est-sombre h2, .est-sombre p, .est-sombre .et-chiffre{ color:inherit; }
.est-sombre .et-numero{ color:var(--wp--preset--color--meule); }
.est-sombre .et-chiffre{ color:var(--wp--preset--color--braise); }
.est-sombre .et-legende, .est-sombre .et-sous{ color:var(--wp--preset--color--doux); }

/* la bande deborde en pleine largeur, son contenu reste dans la mesure.
   ⚠ il faut ANNULER le max-width de la section, sinon elle reste a 72rem
   et la bande ne se voit pas comme une bande (mesure au Playwright). */
/* ⚠ 01/09 : mesure Playwright, la page debordait de 80 px a droite.
   Deux causes cumulees, et aucune ne se voit a l'oeil :
     1. la boite n'est pas en border-box ici, donc `width:100vw` + padding
        faisait 1520 px pour un ecran de 1440 ;
     2. `100vw` compte la barre de defilement, que `100%` ne compte pas.
   D'ou : border-box, aucune largeur declaree (les marges negatives suffisent
   a etirer un bloc), et `overflow-x:clip` sur html pour la barre. `clip` et
   non `hidden` : `hidden` ferait de html un conteneur de defilement et
   casserait les `position:sticky` de l'entete et de la section epinglee. */
html{ overflow-x:clip; }
.et-pleine, .et-bande-cartes, .et-pied.est-sombre{ box-sizing:border-box; }

.et-pleine{
  max-width:none;
  margin-inline:calc(-1 * var(--et-gouttiere));
  padding-inline:var(--et-gouttiere);
}
.et-pleine > .et-dedans{ max-width:72rem; margin-inline:auto; }

/* le chiffre prend l'accent vif : c'est la promesse du site */
.et-chiffre{ color:var(--wp--preset--color--braise); }

/* ── EFFETS AU DEFILEMENT ───────────────────────────────────────────────
   Trois, tous desactives si le systeme demande moins d'animation. */

/* 1. apparition progressive des sections */
.et-revele{ opacity:0; transform:translateY(18px); }
/* des que GSAP pilote (html.a-gsap), le CSS rend la main sur tout ce qui bouge */
.a-gsap .et-revele{ opacity:1; transform:none; transition:none; }
.a-gsap .et-manchette .et-display,
.a-gsap .et-manchette .et-chapeau,
.a-gsap .et-manchette .et-sous{ animation:none; }
.a-gsap .et-revele .et-numero::after{ transition:none; width:3.2rem; }
.et-revele.est-vu{ opacity:1; transform:none;
  transition:opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1); }
@media (prefers-reduced-motion:reduce){
  .et-revele{ opacity:1; transform:none; }
  .et-revele.est-vu{ transition:none; }
}

/* 2. le visuel reste epingle pendant que le texte defile a cote */
@media (min-width:900px){
  .et-epingle{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
               gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }
  .et-epingle > .et-visuel{ position:sticky; top:6rem; }
  .et-epingle .et-etapes{ display:grid; gap:clamp(3rem,9vh,6rem); padding-block:2rem 4rem; }
}
.et-etape h3{ font-size:1.25rem; margin:0 0 .5rem; letter-spacing:-.015em; }
.et-etape p{ margin:0; color:var(--wp--preset--color--doux); max-width:46ch; }
.et-etape .et-rang{
  font-family:"Plex Mono",ui-monospace,monospace; font-size:.72rem; letter-spacing:.14em;
  color:var(--wp--preset--color--meule); display:block; margin-bottom:.5rem;
}

/* 3. le titre de la manchette se leve legerement au chargement */
@media (prefers-reduced-motion:no-preference){
  .et-manchette .et-display{ animation:et-monte .7s cubic-bezier(.2,.6,.2,1) both; }
  .et-manchette .et-chapeau{ animation:et-monte .7s .09s cubic-bezier(.2,.6,.2,1) both; }
  .et-manchette .et-sous{ animation:et-monte .7s .16s cubic-bezier(.2,.6,.2,1) both; }
  @keyframes et-monte{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
}

/* les liens de navigation prennent l'accent vif au survol */
.et-nav a:hover, .et-nav a:focus-visible{ color:var(--wp--preset--color--braise); }
.et-carte h3 a:hover{ color:var(--wp--preset--color--braise); }


/* ════════════════════════════════════════════════════════════════════════
   TROIS FONDS, PAS UN. 01/09/2026, sur « des couleurs plus différenciantes ».
   La page n'avait qu'un gris (#ffffff) et l'accent n'apparaissait qu'une
   fois. Elle en a maintenant quatre, qui alternent de haut en bas :
   clair → teinté → sombre → clair → sombre (le pied).
   12 combinaisons texte/fond recalculees, la pire a 4,79:1.
   ════════════════════════════════════════════════════════════════════════ */

/* la bande de cartes prend le fond teinte, sur toute la largeur */
.et-bande-cartes{
  max-width:none; margin-inline:calc(-1 * var(--et-gouttiere));
  padding:clamp(2.2rem,5vw,3.4rem) var(--et-gouttiere);
  background:var(--wp--preset--color--teinte);
  border-block:1px solid var(--wp--preset--color--trait);
}
.et-bande-cartes > .et-cartes{ max-width:72rem; margin-inline:auto; border:0; }

/* le pied ferme la page comme la bande la coupe : meme noir, meme portee */
/* ⚠ le pied n'est PAS dans `main` : son parent ne porte aucune gouttiere,
   donc il occupe deja toute la largeur et n'a rien a compenser. Lui donner
   la marge negative des bandes le poussait 40 px hors de l'ecran de chaque
   cote, et rendait la page scrollable lateralement (mesure du 01/09). */
.et-pied.est-sombre{
  max-width:none; margin-inline:0;
  padding:2.6rem var(--et-gouttiere) 3rem;
  margin-top:0; border-top:0;
}
.et-pied.est-sombre .et-pied-cols{ max-width:72rem; margin-inline:auto; }
.et-pied.est-sombre a{ color:var(--wp--preset--color--meule); }
.et-pied.est-sombre strong{ color:var(--wp--preset--color--encre); }

/* 4. le trait qui se trace : chaque section revelee tire sa regle */
.et-revele .et-numero::after{
  content:""; display:block; height:1px; margin-top:.55rem; width:0;
  background:var(--wp--preset--color--braise); transition:width .8s .15s ease-out;
}
.et-revele.est-vu .et-numero::after{ width:3.2rem; }

/* 5. les visuels sont promus sur leur propre couche : sans ca, chaque pas de
   l'animation repeint la zone. `will-change` sur l'image ET sur son cadre,
   puisque les deux portent une transform (l'une le zoom, l'autre la derive). */
.et-visuel, .et-visuel img{ will-change:transform; backface-visibility:hidden; }

@media (prefers-reduced-motion:reduce){
  .et-carte::before{ transition:none; }
  .et-revele .et-numero::after{ transition:none; width:3.2rem; }
  .et-visuel, .et-visuel img{ will-change:auto; transform:none; }
}

/* En theme sombre, la bande sombre et le pied ne se distinguent plus du
   fond de page (1,03:1) : c'est un liseré qui les separe, pas une teinte. */


/* ════════════════════════════════════════════════════════════════════════
   LA COUCHE DE DEFILEMENT, 01/09/2026 au soir. Meme mecanique qu'Ampevino,
   lue dans leur bundle : GSAP + ScrollTrigger + Lenis, self-hostes dans
   assets/. Toute cette couche est une AMELIORATION : sans JS ou en
   reduced-motion, la page est complete et immobile.
   ════════════════════════════════════════════════════════════════════════ */

/* le porche : le titre prend l'echelle d'Ampevino (eux montent a 5,25rem) */
.et-manchette .et-display{ font-size:clamp(2.9rem, 7vw, 6.2rem); line-height:1.02; }

/* le visuel du porche : pleine largeur, cinema, sous le titre */
.et-porche-visuel{
  box-sizing:border-box; max-width:none;
  margin-inline:calc(-1 * var(--et-gouttiere));
  /* ⚠ 01/09 : min-height:340px transferait 793 px de LARGEUR sur un ecran
     de 390 (la spec propage les minimums a travers aspect-ratio). Le ratio
     seul suffit, il se resserre sur petit ecran. */
  aspect-ratio:21/9;
}
@media (max-width:760px){ .et-porche-visuel{ aspect-ratio:4/3; } }
.et-porche-visuel img{ width:100%; height:100%; object-fit:cover; display:block; }

/* la bande qui defile : un seul mot d'ordre, en tres grand, moitie creux */
.et-defile{
  box-sizing:border-box; max-width:none;
  margin-inline:calc(-1 * var(--et-gouttiere));
  overflow:hidden; padding-block:clamp(1.6rem,4vw,3rem); user-select:none;
  border-block:1px solid var(--wp--preset--color--trait);
}
/* ⚠ le `gap` en `em` se resout sur le CONTENEUR, pas sur ses enfants : avec
   la taille declaree sur les <span>, il valait 5,4 px au lieu de 40. La
   taille se pose donc ici, les mots en heritent. */
.et-defile-piste{ display:flex; align-items:baseline; width:max-content;
                  font-size:clamp(3rem, 9vw, 8rem); gap:.3em;
                  will-change:transform; }
/* ⚠ 02/09 : chaque copie portait un `padding-right:1.2em`, soit un trou de
   150 px au raccord la ou les mots sont separes d'un simple espace. Mathieu
   l'a vu tout de suite (« traits et mots espaces irregulierement »). Les
   espaces sont desormais un `gap` de grille : identiques par construction,
   y compris entre deux copies, et plus rien ne depend de l'espace HTML, qui
   se fait rogner en fin d'element. */
.et-defile-piste span{
  white-space:nowrap; padding-right:0;
  font-weight:700; letter-spacing:-.03em; line-height:1;
  font-size:inherit; color:var(--wp--preset--color--encre);
}
.et-defile-piste .et-sep{ color:var(--wp--preset--color--encre); opacity:.55; }
/* ⚠ 02/09 : ces regles visaient `span em`. La piste ayant ete rebalisee en
   `<span class="et-mot est-creux">`, elles ne s'appliquaient plus et tous les
   mots ressortaient pleins. Un selecteur orphelin ne fait pas d'erreur, il
   fait disparaitre un effet en silence : c'est la capture qui l'a dit. */
.et-defile-piste .est-creux{
  color:transparent;
  -webkit-text-stroke:1.5px var(--wp--preset--color--meule);
}

/* les gestes : sous GSAP, seul le geste au centre de l'ecran est allume */
.a-gsap .et-etape{ opacity:.3; transition:opacity .45s ease; }
.a-gsap .et-etape.est-actif{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .et-defile-piste{ transform:none !important; }
}

/* les figures d'article : l'image porte la revelation, la legende reste sobre */
.et-figure{ margin:2.2rem 0 0; }
.et-legende-figure, .et-figure figcaption{
  display:block; margin:.6rem 0 2.2rem; font-size:.88rem;
  color:var(--wp--preset--color--doux); line-height:1.55;
}


/* la fiche d'ouverture en liste (variante du dl existant) */
.et-fiche-titre{
  margin:0 0 .7rem; font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--braise);
}
.et-fiche ul{ margin:0; padding:0; list-style:none; }
.et-fiche ul li{ padding:.45rem 0; border-top:1px solid var(--wp--preset--color--trait); }
.et-fiche ul li:first-child{ border-top:0; }

/* la liste des billets de l'atelier : date en mono, titre, extrait */
.et-atelier .et-billet{
  padding-block:1.6rem; border-top:1px solid var(--wp--preset--color--trait);
}
.et-atelier .et-billet:last-child{ border-bottom:1px solid var(--wp--preset--color--trait); }
.et-atelier .et-billet time, .et-atelier .et-billet .wp-block-post-date{
  font-family:"Plex Mono",ui-monospace,monospace; font-size:.78rem;
  letter-spacing:.1em; color:var(--wp--preset--color--braise);
}
.et-atelier .wp-block-post-title{ margin:.35rem 0 .3rem; }
.et-atelier .wp-block-post-title a{ text-decoration:none; }
.et-atelier .wp-block-post-title a:hover{ text-decoration:underline; text-underline-offset:.22em; }
.et-atelier .wp-block-post-excerpt{ color:var(--wp--preset--color--doux); }
.et-atelier .wp-block-post-excerpt__more-text{ display:none; }


/* le sommaire, insere par le JS avant le premier H2 */
.et-sommaire{
  margin:2.4rem 0; padding:1.15rem 1.3rem 1.25rem;
  border:1px solid var(--wp--preset--color--trait);
  background:var(--wp--preset--color--carte); border-radius:3px;
}
.et-sommaire::before{
  content:"Sommaire"; display:block; margin-bottom:.6rem;
  font-family:"Plex Mono",ui-monospace,monospace; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--braise);
}
.et-sommaire ul{ margin:0; padding:0; list-style:none; }
.et-sommaire li{ padding:.28rem 0; }
.et-sommaire a{ text-decoration:none; color:var(--wp--preset--color--encre); }
.et-sommaire a:hover{ text-decoration:underline; text-underline-offset:.22em; }
.et-sommaire a.est-lu{ color:var(--wp--preset--color--meule); font-weight:600; }


/* la page courante dans les menus : soulignee a l'accent, sans graisse
   (une graisse ferait bouger la largeur de la barre d'un chemin a l'autre) */
.et-nav a.est-ici, .et-pied-nav a.est-ici{
  color:var(--wp--preset--color--meule);
  text-decoration:underline; text-underline-offset:.3em;
  text-decoration-color:var(--wp--preset--color--braise);
}
.et-pied-nav{ text-align:right; }
.et-pied-nav p{ margin:0 0 .3rem; }


/* ════════════════════════════════════════════════════════════════════════
   PAGES INTERIEURES AU NIVEAU DE L'ACCUEIL (01/09 au soir, demande de
   Mathieu : « les autres ne sont pas au niveau »). Les cartes de l'atelier
   deviennent des rangees editoriales image + texte, alternees, revelees en
   cascade ; les billets recoivent une vraie tete (date, titre en display,
   temps de lecture pose par le JS).
   ════════════════════════════════════════════════════════════════════════ */

.et-tete-rubrique{ padding-block:clamp(2.2rem,5vw,4rem) clamp(1.4rem,3vw,2.2rem); }
.et-tete-rubrique h1, .et-tete-billet .wp-block-post-title{
  font-size:clamp(2.3rem,5vw,3.8rem); line-height:1.05; letter-spacing:-.025em;
  margin:.35rem 0 .6rem;
}
.et-chapeau-rubrique{ color:var(--wp--preset--color--doux); max-width:52ch;
  font-size:1.08rem; line-height:1.6; margin:0; }

/* la rangee editoriale d'un billet dans la liste */
.et-atelier .wp-block-post{ border-top:1px solid var(--wp--preset--color--trait); }
.et-atelier .wp-block-post:last-child{ border-bottom:1px solid var(--wp--preset--color--trait); }
.et-billet{ display:grid; gap:1.4rem clamp(1.6rem,3.5vw,3rem);
  padding-block:clamp(1.8rem,4vw,2.8rem); align-items:center; }
@media (min-width:820px){
  .et-billet{ grid-template-columns:minmax(0,30rem) 1fr; }
  /* une rangee sur deux s'inverse : la liste respire comme l'accueil */
  .et-atelier .wp-block-post:nth-child(even) .et-billet > .et-billet-visuel{ order:2; }
}
.et-billet-visuel{ margin:0; overflow:hidden; border-radius:3px; aspect-ratio:16/10; }
.et-billet-visuel a, .et-billet-visuel img{ display:block; width:100%; height:100%; }
.et-billet-visuel img{ object-fit:cover; transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.et-atelier .wp-block-post:hover .et-billet-visuel img{ transform:scale(1.045); }
.et-billet-texte .wp-block-post-date{
  font-family:"Plex Mono",ui-monospace,monospace; font-size:.78rem;
  letter-spacing:.1em; color:var(--wp--preset--color--braise); }
.et-billet-texte .wp-block-post-title{
  font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.02em; margin:.45rem 0 .5rem; }
.et-billet-texte .wp-block-post-title a{ text-decoration:none;
  background-image:linear-gradient(var(--wp--preset--color--braise),var(--wp--preset--color--braise));
  background-repeat:no-repeat; background-size:0% 2px; background-position:0 100%;
  transition:background-size .35s ease; padding-bottom:2px; }
.et-atelier .wp-block-post:hover .wp-block-post-title a{ background-size:100% 2px; }
.et-billet-texte .wp-block-post-excerpt{ color:var(--wp--preset--color--doux); margin:0; }
.et-billet-texte .wp-block-post-excerpt__more-text{ display:none; }

/* la tete d'un billet ouvert */
.et-tete-billet{ padding-top:clamp(1.6rem,3vw,2.6rem); }
.et-date-billet, .et-duree{
  font-family:"Plex Mono",ui-monospace,monospace; font-size:.78rem;
  letter-spacing:.1em; color:var(--wp--preset--color--braise); }
.et-duree{ color:var(--wp--preset--color--doux); }

/* ⚠ la liste de l'atelier vit en LARGE : le conteneur de lecture (42rem)
   ecrasait la colonne de texte des rangees, un mot par ligne sur le titre
   (vu sur capture le 01/09). La mesure de lecture reste la regle des
   billets ouverts ; une liste image + texte a besoin des 72rem. */
main.et-atelier{ --wp--style--global--content-size: 72rem; }

/* la tete de rubrique s'aligne sur UN bord gauche (le h1 partait au bord du
   conteneur large, le chapo restait centre dans la mesure de lecture) */
.et-tete-rubrique > h1, .et-tete-rubrique > p{ margin-inline:0 !important; max-width:none; }
.et-tete-rubrique .et-chapeau-rubrique{ max-width:52ch; }

/* les pages simples recoivent la meme tete que les billets */
.et-page > .wp-block-post-title{
  font-size:clamp(2.3rem,5vw,3.8rem); line-height:1.05; letter-spacing:-.025em;
  padding-top:clamp(1.6rem,3vw,2.6rem); margin-bottom:.6rem;
}

/* une page courte laissait un vide SOUS le pied (vu sur /qui-ecrit-ici/ le
   01/09) : le squelette prend l'ecran entier et le main pousse le pied en bas */
.wp-site-blocks{ display:flex; flex-direction:column; min-height:100vh; }
.wp-site-blocks > main{ flex:1; }


/* ════════════════════════════════════════════════════════════════════════
   PALETTE V3 (01/09 au soir, « les couleurs sont pas assez différenciantes »).
   Le vert cesse d'etre un accent : il devient une SURFACE. L'entete, les
   bandes et le pied portent le sapin #12110f ; la teinte des cartes est un
   sauge visible ; la braise fonce d'un cran pour tenir 4,5 sur le sauge.
   Pire contraste calcule : 4,82 (braise sur sauge), sapin >= 5,8 partout.
   ════════════════════════════════════════════════════════════════════════ */

/* l'entete porte l'identite sur toutes les pages */
.et-entete{
  background:color-mix(in srgb, #12110f 94%, transparent);
  backdrop-filter:saturate(1.4) blur(9px);
  border-bottom:1px solid #2b2924;
}
.et-entete .et-marque, .et-entete .et-marque a{ color:#f2efe8; }
.et-nav a{ color:#e8e4da; text-decoration:none; }
.et-nav a:hover{ color:#c89b62; }
.et-nav a.est-ici{ color:#c89b62; text-decoration-color:var(--wp--preset--color--braise); }
.et-nav a.est-ici{ text-decoration:underline; text-underline-offset:.3em; }

/* les boites de lecture prennent la teinte : la couleur entre DANS la page */
.et-fiche, .et-sommaire{
  background:var(--wp--preset--color--teinte);
  border-color:color-mix(in srgb, var(--wp--preset--color--meule) 25%, var(--wp--preset--color--teinte));
}


/* ════════════════════════════════════════════════════════════════════════
   PALETTE V4 (01/09, référence donnée par Mathieu : ampevino.fr).
   Leur feuille de style rend la palette REELLE, et elle corrige mon erreur :
   ils ont MOINS de couleur que nous, pas plus. Trois valeurs portent tout le
   site — papier chaud #f2efe8 (46 usages), bronze #b2865d (23), presque-noir
   #0b0b0b (11) — plus un rouge de vin en ponctuation (4).
   ⚠ Et leur bronze est a 2,83:1 sur leur papier : c'est un accent DECORATIF,
   jamais du texte courant. Le notre est fonce a #7a5732 (5,49) pour porter
   des liens et des titres sans casser la lisibilite.
   Teintes VOISINES et jamais identiques (anti-empreinte) : papier #ffffff,
   bronze #7a5732, presque-noir #12110f. Pire contraste 4,88 sur 20 paires.
   ════════════════════════════════════════════════════════════════════════ */


/* ⚠ l'entete est une SURFACE sombre : tout ce qu'elle contient herite du
   clair, sinon les <p> qui enveloppent les liens gardent l'encre sombre.
   Invisible a l'oeil (le <a> a sa propre couleur), mais un contraste de
   1,01 sur la page servie, et le prochain element ajoute la serait illisible. */
.et-entete{ color:var(--wp--preset--color--carte); }
.et-entete p{ color:inherit; margin:0; }


/* ════════════════════════════════════════════════════════════════════════
   V5, 01/09 : le papier passe au BLANC (demande de Mathieu). La chaleur ne
   vient plus du fond mais des SURFACES : les panneaux teintes (#f4f1e9),
   le bronze et le presque-noir. Le grain radial a ete retire, il remettait
   du beige par la fenetre.
   ⚠ Sur blanc, carte == fond : une carte ne se distingue plus par sa
   couleur. Ce sont sa BANDE teintee et son liseré qui la posent.
   Pire contraste clair : 5,75.
   ════════════════════════════════════════════════════════════════════════ */

/* les cartes redeviennent lisibles comme cartes sur la bande teintee */
.et-carte{ border:1px solid var(--wp--preset--color--trait); border-radius:3px; }
.et-cartes{ gap:.9rem; background:transparent; border:0; }

/* la fiche et le sommaire gardent un liseré d'accent, seule marque forte */
.et-fiche, .et-sommaire{ border-left:3px solid var(--wp--preset--color--bronze, #7a5732); }


/* ════════════════════════════════════════════════════════════════════════
   V6, 01/09 : LA TYPOGRAPHIE (« quelque chose de plus artistique et de plus
   pro »). C'est le dernier ecart avec ampevino.fr, qui compose ses titres en
   PP Editorial Old, un serif de display sous licence. Ici : INSTRUMENT SERIF
   (SIL OFL, self-heberge, 43 Ko pour les deux coupes), un serif a fort
   contraste, tres ouvert, avec une italique qui porte l'accent.

   ⚠ architecture.md interdit l'archetype « editorial-premium-artisan » =
   serif humaniste + creme + accent chaud. Ce n'est PAS ce qui est fait ici :
   fond BLANC, serif de DISPLAY a fort contraste (pas humaniste), et le corps
   reste en grotesque (Plex Sans). Le serif ne touche que les titres.
   ════════════════════════════════════════════════════════════════════════ */

/* ⚠ 01/09, troisieme essai : « plus brutaliste ». Instrument Serif etait
   emoussee, Cormorant Garamond trop classique. BIG SHOULDERS DISPLAY (SIL
   OFL) est une condensee de SIGNALETIQUE INDUSTRIELLE : angles vifs, coupes
   franches, aucune rondeur. Elle repond aux deux demandes a la fois,
   anguleux et brutaliste, et elle vient du vocabulaire de l'atelier.
   Fichier VARIABLE, une seule copie pour toute la plage de graisse.
   ⚠ Elle n'a PAS d'italique : l'accent de la bande qui defile repasse en
   contour, une oblique synthetique serait un faux dessin. */
@font-face{
  font-family:"Shoulders"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("assets/fonts/big-shoulders.woff2") format("woff2-variations"),
      url("assets/fonts/big-shoulders.woff2") format("woff2");
}

:root{ --et-gouttiere:clamp(1.25rem, 5vw, 2.5rem);
       --et-titre:"Shoulders", "Haettenschweiler", "Arial Narrow", sans-serif; }

/* tous les titres passent au serif, avec une graisse 400 assumee : le
   contraste du dessin remplace la graisse, c'est ce qui fait « edition ». */
h1, h2, h3,
.et-manchette .et-display,
.et-tete-rubrique h1,
.et-tete-billet .wp-block-post-title,
.et-page > .wp-block-post-title,
.et-billet-texte .wp-block-post-title,
.et-section h2, .et-carte h3, .et-carte b, .et-etape h3{
  font-family:var(--et-titre); font-weight:700;
  letter-spacing:-.005em; text-wrap:balance;
  /* ⚠ 02/09 : Big Shoulders CRENE l'espace. Mesure sur la page servie : tout
     espace suivi d'un « f » fait 7,86 px, tous les autres 8,69, soit 10 %
     d'ecart visible a 41 px de corps (« les deux fac,ons » se resserrait).
     Un crenage applique a l'espace est un defaut de fonte, pas une intention
     typographique : on le coupe sur les titres. Le crenage des paires de
     LETTRES est perdu avec, ce qui est acceptable sur une condensee dont
     l'approche est deja serree par dessin. */
  font-kerning:none;
}

/* l'echelle monte : un serif a fort contraste demande de la taille pour
   montrer son dessin, et c'est la que se joue l'impression « pro ». */
.et-manchette .et-display{ font-size:clamp(3.6rem, 9.6vw, 8.8rem); line-height:.88; }
.et-tete-rubrique h1,
.et-tete-billet .wp-block-post-title,
.et-page > .wp-block-post-title{ font-size:clamp(2.9rem, 6.8vw, 5.2rem); line-height:1; }
.et-section h2{ font-size:clamp(2.1rem, 4.2vw, 3.2rem); line-height:.98; }
.et-billet-texte .wp-block-post-title{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); line-height:.98; }
.et-page h2{ font-size:clamp(1.85rem, 3.2vw, 2.6rem); line-height:1; margin-top:2.8rem; }
/* condensee : les petits titres peuvent grossir sans casser la grille */
.et-carte h3, .et-carte b, .et-etape h3{ font-size:1.5rem; letter-spacing:0; font-weight:700; line-height:1.02; }

/* l'italique du serif devient la ponctuation du site : elle remplace le gras
   dans les titres, et signe la bande qui defile. */
.et-titre-accent{ color:var(--wp--preset--color--bronze,#7a5732); }
.et-defile-piste span{ font-family:var(--et-titre); font-weight:700; letter-spacing:-.01em; }
.et-defile-piste .est-creux{ color:transparent; -webkit-text-stroke:1.5px var(--wp--preset--color--bronze,#7a5732); }

/* le corps respire davantage : mesure plus courte, interligne plus haut */
.et-page p, .et-section p{ line-height:1.72; }
.et-page > p, .et-page > ul, .et-page > ol{ max-width:38rem; }

/* la lettrine ouvre les BILLETS seulement (.et-lecture, pose par single.html).
   Sur une page de service comme les mentions legales, elle serait incongrue. */
.et-lecture > .wp-block-post-content > p:first-of-type::first-letter,
.et-lecture > p:first-of-type::first-letter{
  font-family:var(--et-titre); float:left; font-size:3.9em; line-height:.82;
  padding:.06em .12em 0 0; color:var(--wp--preset--color--bronze,#7a5732);
}

/* les etiquettes en petites capitales gagnent un filet, comme en revue */
.et-section .et-numero, .et-tete-rubrique .et-numero{ font-size:.72rem; }


/* ── MOBILE : les paragraphes entrent par les cotes, cales sur le scroll ──
   Demande de Mathieu le 01/09. L'etat de depart est pose par gsap.set, donc
   sans JS ou en reduced-motion le texte est en place et immobile.
   ⚠ Un deplacement horizontal peut creer une barre de defilement : le
   `overflow-x:clip` de html l'absorbe, et la mesure le verifie a 390 px. */
/* le clip au bord de l'ecran vaut sur TOUTES les largeurs depuis que l'effet
   lateral y tourne aussi. Les bandes pleine largeur s'arretent pile sur la
   boite de `main`, donc clipper `main` ne rogne rien. */
main{ overflow-x:clip; }
.et-lateral{ will-change:transform, opacity; }

@media (max-width:760px){
  /* ⚠ 01/09, deux mesures successives.
     1. `overflow-x:clip` sur html ne suffit pas : avec overflow-y visible la
        racine devient elle-meme scrollable, la page partait de 38 px.
     2. Clipper les CONTENEURS DE TEXTE reparait le defilement mais coupait
        le paragraphe en pleine glissade AU BORD INTERIEUR de la bande
        (mesure : left = -27 px). Un texte tronque a 20 px du bord se lit
        comme une casse, pas comme une entree.
     La forme juste : les bandes ne debordent plus en `100vw` mais de la
     GOUTTIERE EXACTE, donc elles s'arretent pile sur la boite de `main` ;
     `main` peut alors clipper, et il clippe AU BORD DE L'ECRAN. Le texte
     entre depuis le hors-champ au lieu d'etre coupe en pleine bande. */
}

/* ⚠ 01/09 : les légendes des trois figures photo étaient INVISIBLES depuis
   leur pose. `.et-visuel` clippe (overflow:hidden) et porte un ratio fixe,
   parce qu'il doit contenir le zoom de l'image ; une <figcaption> placée
   dedans débordait de 31 à 53 px et disparaissait. Un texte qui n'existe pas
   à l'écran ne se voit pas à la relecture du code : c'est la mesure de la
   position de la légende qui l'a trouvé.
   La figure ne clippe plus rien, c'est un <span class="et-visuel"> intérieur
   qui contient l'image et son zoom. */
.et-figure{ overflow:visible; aspect-ratio:auto; background:none; }
.et-figure > .et-visuel{ display:block; }