/* ==========================================================================
   Gabarits des feuilles — La Sultane
   Refondu en M29 : ratio 4:5, habillage entièrement piloté par le DESIGN
   SYSTEM extrait de « La Sultane #101 (1).idml » (design-system.css).

   Un gabarit = une FEUILLE. Chaque feuille est un fragment responsive qui, en
   mobile 390, réorganise son contenu EN CASCADE à l'intérieur de la page —
   mais se feuillette quand même (§1.5 du plan).

   HTML/CSS natif · zéro dépendance · zéro requête externe.
   Ne contient AUCUNE valeur d'habillage en dur : tout vient des variables.
   ========================================================================== */

@import url("design-system.css?v=1784895297");
@import url("geo.css?v=1784895297");

* { box-sizing: border-box; }
/* Un bloc renvoyé à la feuille suivante DOIT disparaître : sans ce !important, une
   règle `display:grid`/`flex` de gabarit l'emporte sur le [hidden] du navigateur et
   le bloc reste visible (bug attrapé en vérification sur `reportage`). */
[hidden] { display: none !important; }

/* ==========================================================================
   LA FEUILLE — cadre commun
   ========================================================================== */
.page-native {
  --ratio: 0.8;                      /* 4:5 — décision Houda (PLAN LISEUSE) */
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--f-corps);
  line-height: var(--i-corps);
  letter-spacing: var(--approche);
  overflow: hidden;
  container-type: inline-size;
  /* Taille FIXE + mise à l'échelle : la feuille ne se recompose jamais, elle se
     regarde plus ou moins grand. `--k` est posé par motion.js d'après la place
     réelle. Sans JavaScript, `--k: 1` : la feuille reste juste, à sa taille. */
  width: var(--feuille-l);
  height: var(--feuille-h);
  min-height: 0;
  flex: none;
  transform-origin: 0 0;
  transform: scale(var(--k, 1));
}
/* INVARIANT DE FEUILLE (bug du 2026-07-20, p.12-13 #105 — feuille coupée, grand vide
   sombre, folio par-dessus le texte). La taille FIXE de la feuille (900×1125) prime sur
   TOUTE classe de gabarit posée sur le MÊME élément. `.gab-ouverture`, `.gab-sommaire`,
   `.gab-couv-accroches`, `.gab-couverture`, `.gab-rubrique`, `.gab-plein-cadre`,
   `.gab-entretien`, `.gab-portfolio` déclarent `height: 100%` à spécificité égale (0,1,0)
   et, situées plus bas dans le fichier, l'emportaient sur `height: var(--feuille-h)` : la
   feuille s'écrasait à la hauteur de son conteneur (~854 px au lieu de 1125), puis `--k`
   la rapetissait une SECONDE fois → texte rogné, bande sombre sous la page, folio sur le
   texte. On rehausse ici la spécificité à (0,2,0) SANS `!important` : bat les gabarits
   dans la liseuse (`.kl-fragment`), mais l'aperçu flip garde la main (sa règle plus
   tardive `.page .page-native { width/height:100% }` gagne l'égalité de spécificité).
   Robuste pour M38 : un nouveau gabarit à `height:100%` ne pourra plus casser l'échelle. */
.page-native.page-native { width: var(--feuille-l); height: var(--feuille-h); }
.page-native.autonome { min-height: 100dvh; }

/* ⚠ LA TAILLE DU CORPS SE POSE SUR LES ENFANTS, PAS SUR LA FEUILLE.
   `.page-native` est le CONTENEUR de requête (`container-type: inline-size`) : un
   élément ne peut pas s'interroger lui-même. Un `font-size: 2cqw` écrit SUR lui ne
   se mesurait donc pas sur la feuille mais, faute de conteneur ancêtre, sur la
   FENÊTRE — la typo grossissait avec l'écran au lieu de suivre la page, et sur un
   grand écran elle butait en permanence sur le plafond du clamp. C'est la cause de
   fond du « corps trop gros par rapport aux pages » (Houda, 2026-07-19), et elle
   faussait aussi toutes les contenances mesurées.
   Posée sur les enfants directs, l'unité se mesure enfin sur la feuille. */
.page-native > * { font-size: var(--t-corps); }

/* Marges du gabarit maître B du #101, reportées en % */
.pn-corps {
  padding: var(--marge-haut) var(--marge-cote) var(--marge-bas);
  height: 100%;
  overflow: hidden;
}
.pn-plein { padding: 0; }

/* --- Titraille (styles nommés du #101) ----------------------------------- */
/* « Nom de la Rubrique » : Montserrat Medium Italic, petites capitales */
.pn-kicker {
  font: 500 var(--t-note)/1.2 var(--f-rubrique);
  font-style: italic;
  letter-spacing: var(--approche-large);
  text-transform: uppercase;
  color: var(--bordeaux);
  margin: 0 0 0.8em;
}
/* « Titres Article : H1 » — Scotch Display Fat → Playfair Display 700, majuscules */
.pn-titre {
  font-family: var(--f-titre);
  font-weight: 700;
  line-height: var(--i-titre);
  letter-spacing: var(--approche);
  margin: 0;
  color: var(--encre-fort);
}
.pn-titre.xxl { font-size: var(--t-h1); text-transform: uppercase; }
.pn-titre.xl  { font-size: var(--t-h1s); }
.pn-titre.l   { font-size: var(--t-h2); }
.pn-titre em, .pn-titre i { font-style: italic; color: var(--bordeaux); text-transform: none; }
/* « H2 - Titre 1 » — Kepler Std Bold → Source Serif 4, bordeaux, majuscules */
.pn-h2 {
  font: 600 var(--t-h2)/1.15 var(--f-h2);
  letter-spacing: var(--approche);
  text-transform: uppercase;
  color: var(--bordeaux);
  margin: 0 0 0.5em;
}
/* « Chapô » — IvyPresto Display 20/26 → Playfair Display */
.pn-chapo {
  font: 400 var(--t-chapo)/var(--i-chapo) var(--f-titre);
  color: var(--encre-fort);
  margin: 0.8em 0 0;
}
/* « Nom Rédacteur » — Montserrat Medium Italic, bordeaux */
.pn-signature {
  font: 500 var(--t-h4)/1.3 var(--f-rubrique);
  font-style: italic;
  letter-spacing: var(--approche);
  color: var(--bordeaux);
  margin-top: 1.4em;
}
/* « Note de bas de page » — Montserrat Regular 11 pt, gris taupe */
.pn-note, figcaption {
  font: 400 var(--t-note)/1.4 var(--f-rubrique);
  color: var(--taupe-clair);
  letter-spacing: 0;
}

/* --- Média d'ouverture : image OU vidéo au même emplacement -----------------
   L'affiche (première frame) est posée SOUS la vidéo et reste visible tant que
   celle-ci n'a pas de quoi peindre : la feuille n'est donc jamais vide, même sans
   réseau, même si le format n'est pas lu. */
.pn-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gab-ouverture .pn-video { position: static; }
.pn-affiche { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gab-ouverture .pn-affiche { position: static; }
/* Moins d'animation demandée : on garde l'affiche, on retire le mouvement. */
@media (prefers-reduced-motion: reduce) {
  .pn-video { display: none; }
}

/* Le logo en tête de couverture (tracé vectoriel, jamais du texte composé).
   Le fichier est monochrome sombre : `brightness(0) invert(1)` le rend blanc pour
   qu'il se détache de la photo, sans dupliquer le fichier source. */
/* ⚠ Sélecteur en DEUX parties, comme `.cv-img`/`.pn-img` : `lecteur.css` pose
   `.kl-page-html img { width:100% }`, plus spécifique qu'une classe seule — avec
   `.cva-logo` seul, le logo sortait à 100 % de la feuille et recouvrait la moitié
   de la couverture. */
.gab-couv-accroches .cva-logo {
  display: block; width: 52%; height: auto; margin: 0 auto;
  filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.45));
}
.gab-couv-accroches .cva-logo--large { width: 72%; }  /* logo arabe : L/H ≈ 6,7 */

/* Justifié, mais SANS césure : un magazine ne coupe pas les mots en fin de ligne
   (correction Houda 2026-07-19 — `hyphens: auto` était une faute). */
.pn-corps p { margin: 0 0 var(--grille); text-align: justify; text-justify: inter-word; hyphens: none; }
.pn-corps p:last-child { margin-bottom: 0; }

/* --- Blocs du corps d'article (montage du #105) --------------------------
   Les articles réels portent des intertitres, des listes, des phrases détachées
   et des « chiffres porteurs ». Aucune couleur ni police nouvelle ici : que des
   jetons du relevé #101. L'intertitre réutilise `.pn-h2` (« H2 - Titre 1 »),
   l'exergue reprend le traitement déjà validé de la tribune. */
.pn-corps h3.pn-h2 { margin: var(--grille) 0 0; }
.pn-corps h3.pn-h2:first-child { margin-top: 0; }
.pn-liste { margin: 0 0 0.85em; padding-inline-start: 1.25em; }
.pn-liste li { margin-bottom: 0.35em; }
.pn-liste li:last-child { margin-bottom: 0; }
.pn-liste::marker, .pn-liste li::marker { color: var(--bordeaux); }
.pn-exergue {
  font: 400 var(--t-h3)/1.25 var(--f-titre); font-style: italic; color: var(--bordeaux);
  border-inline-start: 2px solid var(--or); padding-inline-start: 0.8em;
  margin: 1em 0; text-align: start;
}
/* Fin d'article : portrait de la signataire + signature, alignés à la fin de ligne. */
/* La signature s'ANCRE en pied de bloc de texte — « à moins d'exceptions pensées
   pour, sinon elle flotte sans être ancrée » (Houda). Elle vient donc au niveau de
   la dernière ligne de la dernière colonne, pas là où le texte s'arrête. */
.pn-fin { position: absolute; left: var(--petit-fond); right: var(--grand-fond);
  bottom: var(--marge-pied); margin: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.5em; }
.pn-fin .pn-signature { margin-top: 0; }
.pn-portrait { margin: 0; width: 26%; max-width: 150px; }
/* Le portrait est cadré en médaillon. `object-position` remonte le cadrage vers le
   HAUT de la photo : sur un cliché en pied, un carré pris au centre donne un buste
   lointain et un visage minuscule. */
.pn-portrait img { width: 100%; height: auto; display: block; border-radius: 50%;
  aspect-ratio: 1; object-fit: cover; object-position: 50% 12%; }
.pn-capsule {
  font: 400 var(--t-h4)/1.35 var(--f-rubrique);
  background: var(--champagne); color: var(--encre-fort);
  padding: 0.7em 0.9em; margin: 1em 0; text-align: start;
}
/* ⚠ PAS DE LETTRINE EN ARABE. L'écriture arabe est CURSIVE : ses lettres se lient.
   Détacher la première d'un mot pour en faire une lettrine casse la liaison et
   change le dessin de la lettre — le mot devient méconnaissable (constaté par
   Houda sur l'édito arabe : « الافتتاحية » commençait par un ف orphelin et le
   texte enchaînait sur « ي بيوت الصيف »). La lettrine est une convention de
   l'imprimerie latine ; elle ne se transpose pas. */
[dir="rtl"] .lettrine::first-letter,
.page-native[lang="ar"] .lettrine::first-letter {
  font-family: inherit; float: none; font-size: inherit;
  line-height: inherit; padding: 0; color: inherit;
}
.lettrine::first-letter {
  font-family: var(--f-lettrine);
  float: left;
  font-size: 3.2em;
  line-height: 0.78;
  padding: 0.06em 0.08em 0 0;
  color: var(--bordeaux);
}
/* Renvoi de la fin d'un texte sur la feuille suivante (cf. ajuster.js) */
.pn-suite {
  font: 500 var(--t-note)/1 var(--f-rubrique); font-style: italic;
  letter-spacing: var(--approche-large); text-transform: uppercase;
  color: var(--bordeaux); margin: 0.8em 0 0; text-align: right;
}
.pn-filet { width: 3.2em; height: 2px; background: var(--or); border: 0; margin: 0.9em 0; }

/* Folio — position relevée dans le #101 (88 % de la hauteur) */
/* M31 — CORRECTIF REPLIÉ DEPUIS LA DÉMO M30.
   Le folio était en `top: 88%`, donc AU-DESSUS de la marge basse (7,4 %), et en
   `position:absolute` : il ne réservait aucune place dans le flux. Résultat mesuré
   sur les feuilles exemplaires : le chapô du « Boudoir » lui passait dessus.
   Il descend dans la MARGE BASSE, là où un folio d'imprimeur se tient, et prend le
   jeton de MOBILIER (11 px) et non celui des étiquettes de contenu (13 px). */
.pn-folio {
  position: absolute;
  left: var(--marge-cote); right: var(--marge-cote);
  top: auto;
  bottom: calc(var(--marge-bas) * 0.42);
  display: flex; justify-content: space-between; align-items: baseline;
  font: 400 var(--t-mobilier)/1 var(--f-rubrique);
  opacity: .75;
  letter-spacing: var(--approche-large);
  text-transform: uppercase;
  color: var(--taupe-clair);
  margin: 0;
  pointer-events: none;
}
.pn-sombre .pn-folio { color: rgba(251, 249, 244, 0.55); }
/* Le folio se tient dans la marge basse : le bloc de texte lui réserve sa bande au
   lieu de passer dessous (sans quoi le chapô lui monte dessus — vécu en M30). */
.page-native:has(.pn-folio) .pn-corps { padding-bottom: calc(var(--marge-pied) + var(--grille)); }
/* Une page qui porte une signature lui RÉSERVE sa bande : le texte s'arrête au-dessus,
   la signature s'y pose. Sans réserve, elle passerait par-dessus la dernière ligne. */
.page-native:has(.pn-fin) .pn-corps { padding-bottom: calc(var(--marge-pied) + var(--grille) * 2); }
/* Le titre d'ARTICLE n'est pas un intertitre : il porte l'encre forte du #101, pas
   le bordeaux, sans quoi tout est bordeaux et la hiérarchie disparaît (Houda). */
.gab-double > .pn-corps > .pn-titre { color: var(--encre-fort); margin-bottom: var(--grille); }
.gab-double > .pn-corps > .pn-kicker { margin-bottom: calc(var(--grille) / 2); }
.gab-double > .pn-corps > .pn-chapo { margin: 0 0 var(--grille); }

/* Sur une photo pleine page, un folio nu flotte et donne l'« impression brouillon »
   refusée en M30 : il s'assied sur un voile dégradé au lieu d'être posé dessus. */
.gab-plein-cadre .pn-folio,
.gab-rubrique .pn-folio,
.gab-couverture .pn-folio,
.gab-couv-accroches .pn-folio,
.pn-sombre .pn-folio {
  left: 0; right: 0;
  padding: .5em var(--marge-cote) .35em;
  background: linear-gradient(180deg, rgba(28, 23, 20, 0), rgba(28, 23, 20, .45));
}

/* Images */
.pn-img { width: 100%; height: auto; display: block; object-fit: cover; background: var(--brume); }
figure { margin: 1.2em 0; }
figcaption { margin-top: 0.4em; }

/* Grille à 2 colonnes du gabarit maître B */
.pn-colonnes {
  columns: var(--colonnes);
  column-gap: var(--gouttiere);
  column-fill: auto;
}
.pn-colonnes p { margin-bottom: var(--grille); }
/* --- Règles d'édition (exigences Houda 2026-07-19) -------------------------
   1. Un titre ne termine JAMAIS une colonne : il descend avec son texte.
      `break-after: avoid-column` le colle à ce qui suit, dans la colonne comme
      dans la page. Sans cette règle, un intertitre se retrouve seul en pied de
      colonne, ce qui est proscrit en édition.
   2. Ni veuves ni orphelines : jamais une ligne seule en haut ou en bas d'une
      colonne.
   3. Les blocs qui font sens d'un seul tenant ne se coupent pas. */
.pn-colonnes .pn-h2,
.pn-colonnes .pn-titre { break-after: avoid-column; page-break-after: avoid; }
.pn-colonnes p, .pn-colonnes li { orphans: 2; widows: 2; }
.pn-capsule, .pn-exergue, .pn-fin, .pn-liste { break-inside: avoid; }
/* Les titres et blocs détachés restent EUX AUSSI sur la grille de lignes de pied :
   leurs marges sont des multiples de --grille, sinon la colonne voisine décroche. */
.pn-colonnes .pn-h2 { margin: var(--grille) 0 0; padding-bottom: calc(var(--grille) / 2); line-height: calc(var(--grille) * 0.85); }
.pn-colonnes .pn-h2:first-child { margin-top: 0; }
.pn-capsule { margin: var(--grille) 0; }
.pn-exergue { margin: var(--grille) 0; }
.pn-liste { margin: 0 0 var(--grille); }
.pn-liste li { margin-bottom: 0; line-height: var(--grille); }
.pn-colonnes .pn-h2 { font-size: var(--t-h2-col); }

/* Pages sombres (respiration, sommaire, ouverture de rubrique) */
.pn-sombre { background: var(--sombre); color: var(--champagne); }
.pn-sombre .pn-titre { color: var(--papier); }
.pn-sombre .pn-kicker { color: var(--or); }
.pn-sombre .pn-chapo { color: var(--champagne); }

/* ==========================================================================
   États d'entrée (mouvement M20 ; les animations M28 arrivent en M30)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--dur) var(--ease-sortie), transform var(--dur) var(--ease-sortie);
  transition-delay: var(--delai, 0ms);
}
.reveal.vu { opacity: 1; transform: none; }

/* ==========================================================================
   LES GABARITS  (cf. gabarits.json / FICHES.md — source : gabarits.py)
   ========================================================================== */

/* --- couverture ---------------------------------------------------------- */
.gab-couverture { display: grid; height: 100%; }
.gab-couverture .cv-img { grid-area: 1/1; width: 100%; height: 100%; object-fit: cover; }
.gab-couverture .cv-voile { grid-area: 1/1; background: linear-gradient(180deg, rgba(28,23,20,.06) 35%, rgba(28,23,20,.78)); }
.gab-couverture .cv-txt { grid-area: 1/1; align-self: end; padding: var(--marge-haut) var(--marge-cote) var(--marge-bas); color: var(--papier); }
.gab-couverture .pn-titre { color: var(--papier); }
.gab-couverture .pn-titre em { color: var(--champagne); }
.gab-couverture .cv-num { color: var(--champagne); }

/* accroches optionnelles de la couverture-affiche */
.gab-couverture .cv-accroches {
  list-style: none; margin: 1em 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4em 1.2em;
}
.gab-couverture .cv-accroches li {
  font: 500 var(--t-note)/1.3 var(--f-rubrique);
  letter-spacing: var(--approche-large); text-transform: uppercase;
  color: var(--champagne);
  padding-left: 0.9em; position: relative;
}
.gab-couverture .cv-accroches li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 0.4em; height: 1px; background: var(--or);
}

/* --- couverture-accroches : LA COUVERTURE DE KIOSQUE ----------------------
   Structure relevée sur les gabarits de couverture de Houda (3 Magazine Covers,
   Sportmagz, MG15) : bandeau de titre pleine largeur en tête (y≈0,056, hauteur
   ≈0,134), puis les accroches en DEUX colonnes (gauche x≈0,038, droite x≈0,634,
   largeur ≈0,31 chacune). Les positions ci-dessous sont ces mesures, en %. */
.gab-couv-accroches { display: grid; height: 100%; position: relative; }
.gab-couv-accroches .cva-img { grid-area: 1/1; width: 100%; height: 100%; object-fit: cover; }
.gab-couv-accroches .cva-voile {
  grid-area: 1/1;
  background:
    linear-gradient(180deg, rgba(28,23,20,.62) 0%, rgba(28,23,20,.12) 26%, rgba(28,23,20,.10) 62%, rgba(28,23,20,.58) 100%),
    linear-gradient(90deg, rgba(28,23,20,.42) 0%, transparent 36%, transparent 62%, rgba(28,23,20,.42) 100%);
}
.gab-couv-accroches .cva-bandeau {
  grid-area: 1/1; align-self: start;
  margin-top: 5.6%;              /* y relevé : 0,056 */
  width: 100%; text-align: center; color: var(--papier);
}
.gab-couv-accroches .cva-marque {
  font-family: var(--f-marque);   /* la fonte du logo */
  font-size: clamp(30px, 13cqw, 96px);
  line-height: 1; margin: 0; color: var(--papier);
  text-shadow: 0 2px 18px rgba(28,23,20,.45);
}
.gab-couv-accroches .cva-ligne {
  margin: 0.5em 0 0;
  font: 500 var(--t-note)/1 var(--f-rubrique);
  letter-spacing: var(--approche-large); text-transform: uppercase;
  color: var(--champagne);
}
/* les deux colonnes d'accroches, aux abscisses relevées */
.gab-couv-accroches .cv-col {
  grid-area: 1/1; list-style: none; padding: 0; margin: 0;
  position: absolute; top: 26%; bottom: 8%;
  width: 31%;                     /* largeur relevée : 0,31 */
  display: flex; flex-direction: column; gap: 1.1em;
  color: var(--papier);
}
.gab-couv-accroches .cv-col--g { left: 3.8%; text-align: left; }
.gab-couv-accroches .cv-col--d { left: 63.4%; text-align: right; justify-content: flex-end; }
.gab-couv-accroches .cv-col li { display: flex; flex-direction: column; gap: 0.15em; }
.gab-couv-accroches .ac-t {
  font: 400 var(--t-h4)/1.15 var(--f-titre);
  text-shadow: 0 1px 3px rgba(28,23,20,.85), 0 1px 14px rgba(28,23,20,.6);
}
/* Le surtitre de rubrique se lit SUR LA PHOTO : l'or de marque (#B08D57) y disparaît
   dès que la photo est claire — constaté sur la couverture du #105, mur beige.
   Or éclairci + ombre portée, comme arrêté en M30. */
.gab-couv-accroches .ac-s {
  font: 500 var(--t-note)/1 var(--f-rubrique); font-style: italic;
  letter-spacing: var(--approche-large); text-transform: uppercase;
  color: var(--or-clair);
  text-shadow: 0 1px 3px rgba(28,23,20,.9), 0 1px 12px rgba(28,23,20,.7);
}

/* --- sommaire ------------------------------------------------------------ */
.gab-sommaire { height: 100%; }
.gab-sommaire ol { list-style: none; margin: 1.2em 0 0; padding: 0; counter-reset: s; }
.gab-sommaire li { border-bottom: 1px solid rgba(251,249,244,.16); }
.gab-sommaire a {
  counter-increment: s; display: flex; gap: 0.8em; align-items: baseline;
  padding: 0.6em 0; color: inherit; text-decoration: none;
  font: 400 var(--t-h4)/1.25 var(--f-edito); font-style: italic;
}
.gab-sommaire a::before {
  content: counter(s, decimal-leading-zero);
  font: 700 var(--t-note)/1 var(--f-rubrique); color: var(--or);
  font-variant-numeric: tabular-nums; font-style: normal;
}
.gab-sommaire .som-rub {
  font: 700 var(--t-note)/1 var(--f-edito); text-transform: uppercase;
  letter-spacing: var(--approche-large); color: var(--taupe-clair); font-style: normal;
}
.gab-sommaire .som-pg { margin-left: auto; color: var(--or); font-variant-numeric: tabular-nums; font-style: normal; }

/* --- edito --------------------------------------------------------------- */
.gab-edito .pn-corps { max-width: 90%; margin-inline: auto; }
.gab-edito .ed-txt { font-family: var(--f-edito); color: var(--encre-fort); }
.gab-edito .pn-titre { color: var(--bordeaux); }

/* --- rubrique-ouverture : le motif d'ouverture de rubrique du #101 -------- */
.gab-rubrique { display: grid; height: 100%; }
.gab-rubrique img { grid-area: 1/1; width: 100%; height: 100%; object-fit: cover; }
.gab-rubrique .rb-voile { grid-area: 1/1; background: rgba(28,23,20,.42); }
.gab-rubrique .rb-txt { grid-area: 1/1; place-self: center; text-align: center; padding: 0 var(--marge-cote); }
/* « Nom de la Rubrique » : Montserrat Medium Italic 34/38, petites capitales, BLANC */
.gab-rubrique .rb-nom {
  font: 500 var(--t-rubrique)/1.12 var(--f-rubrique);
  font-style: italic; font-variant-caps: small-caps;
  color: var(--papier-pur); margin: 0;
}
.gab-rubrique .rb-sous { color: var(--champagne); margin-top: 0.6em; }

/* --- ouverture-dossier --------------------------------------------------- */
/* Le bloc de titraille (kicker + titre + chapô + signature) n'a PAS de corps à
   reporter sur la feuille suivante : s'il ne tient pas dans une part FIXE, il déborde
   sous le folio (résidu +97 px des ouvertures, M37). On inverse donc la souplesse :
   la titraille prend sa hauteur NATURELLE, l'IMAGE prend le reste (au moins 40 %).
   La titraille tient toujours ; l'image respire tant que le texte est court. */
.gab-ouverture { display: flex; flex-direction: column; height: 100%; }
.gab-ouverture figure { margin: 0; flex: 1 1 auto; min-height: 40%; overflow: hidden; }
.gab-ouverture .pn-img { height: 100%; object-fit: cover; }
.gab-ouverture .ouv-txt { flex: 0 0 auto; max-height: 60%; padding: var(--marge-haut) var(--marge-cote) var(--marge-bas); overflow: hidden; }

/* --- ouverture-plein-cadre : titre compressé sur image pleine feuille ----- */
.gab-plein-cadre { display: grid; height: 100%; }
.gab-plein-cadre img { grid-area: 1/1; width: 100%; height: 100%; object-fit: cover; }
.gab-plein-cadre .pc-voile { grid-area: 1/1; background: linear-gradient(180deg, rgba(28,23,20,.45), rgba(28,23,20,.15) 45%, rgba(28,23,20,.62)); }
.gab-plein-cadre .pc-txt { grid-area: 1/1; place-self: center; text-align: center; padding: 0 var(--marge-cote); color: var(--papier); }
.gab-plein-cadre .pn-titre { color: var(--papier); font-size: var(--t-h1); text-transform: uppercase; }
.gab-plein-cadre .pn-kicker { color: var(--champagne); }
.gab-plein-cadre .pn-chapo { color: var(--champagne); }

/* --- article-illustre ---------------------------------------------------- */
.gab-article figure { margin: 1em 0; }
.gab-article figure .pn-img { aspect-ratio: 3/2; }   /* l'image intercalée ne mange pas la feuille */

/* --- double-colonne : la page courante du gabarit maître B ---------------
   Les colonnes ne se forment que dans une hauteur BORNÉE : la colonne de texte
   prend la hauteur restante de la feuille, et `column-fill:auto` la remplit. */
.gab-double .pn-corps { display: flex; flex-direction: column; }
.gab-double .dc-txt { margin-top: 0.8em; flex: 1 1 auto; min-height: 0; height: 100%; }
.gab-breves .pn-corps { display: flex; flex-direction: column; }
.gab-breves .pn-colonnes { flex: 1 1 auto; min-height: 0; }

/* --- article-texte ------------------------------------------------------- */
.gab-texte .pn-corps { max-width: 86%; margin-inline: auto; }

/* --- reportage : bandes texte / image alternées -------------------------- */
.gab-reportage .rp-bande { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gouttiere); align-items: center; margin: 0.9em 0; }
.gab-reportage .rp-bande.inverse > figure { order: -1; }
.gab-reportage .rp-bande figure { margin: 0; }
.gab-reportage .rp-bande .pn-img { aspect-ratio: 3/2; }
.gab-reportage p { margin: 0 0 0.6em; }

/* --- interview ----------------------------------------------------------- */
/* « H5 - Interview » : Avenir Medium Oblique → Mulish italique, brun doux */
.gab-interview .itw-q {
  font: 600 var(--t-h4)/1.3 var(--f-edito); font-style: italic;
  letter-spacing: var(--approche); color: var(--brun-doux);
  margin: 1.1em 0 0.3em; text-align: left;
}
.gab-interview .itw-r { margin: 0 0 0.5em; }

/* --- entretien-portrait : portrait pleine hauteur + Q/R ------------------ */
.gab-entretien { display: grid; grid-template-columns: 42% 1fr; height: 100%; }
.gab-entretien .et-photo { margin: 0; height: 100%; overflow: hidden; }
.gab-entretien .et-photo img { width: 100%; height: 100%; object-fit: cover; }
.gab-entretien .et-txt { padding: var(--marge-haut) var(--marge-cote) var(--marge-bas); overflow: hidden; }

/* --- portfolio ----------------------------------------------------------- */
/* La grille REMPLIT la hauteur restante de la feuille (elle ne la déborde jamais) :
   les rangées se partagent l'espace, les images sont recadrées par object-fit. */
.gab-portfolio { padding: var(--marge-haut) var(--marge-cote) var(--marge-bas); height: 100%;
                 display: flex; flex-direction: column; }
.gab-portfolio .pf-grille {
  display: grid; gap: 0.5em; grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr; margin-top: 0.8em; flex: 1 1 auto; min-height: 0;
}
.gab-portfolio figure { margin: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.gab-portfolio .pf-grille img { height: 100%; min-height: 0; flex: 1 1 auto; object-fit: cover; aspect-ratio: auto; }
.gab-portfolio .pf-large { grid-column: 1 / -1; }

/* --- lookbook : grille bord-à-bord légendée par numéros ------------------ */
.gab-lookbook { height: 100%; background: var(--sombre); position: relative; }
.gab-lookbook .lb-grille { display: grid; height: 100%; gap: 3px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.gab-lookbook figure { margin: 0; height: 100%; overflow: hidden; position: relative; }
.gab-lookbook img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gab-lookbook figcaption {
  position: absolute; left: 0; bottom: 0; margin: 0; padding: 0.5em 0.7em;
  color: var(--papier); background: linear-gradient(0deg, rgba(28,23,20,.72), transparent);
}
.gab-lookbook .lb-n { font: 700 var(--t-note)/1 var(--f-rubrique); color: var(--or); display: block; }

/* --- mosaique ------------------------------------------------------------ */
.gab-mosaique { height: 100%; background: var(--sombre); position: relative; }
.gab-mosaique .ms-grille { display: grid; height: 100%; gap: 2px; grid-template-columns: 1fr; }
.gab-mosaique .ms-grille.ms-n2 { grid-template-columns: 1fr 1fr; }
.gab-mosaique .ms-grille.ms-n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.gab-mosaique .ms-grille.ms-n3 figure:first-child { grid-row: 1 / 3; }
.gab-mosaique .ms-grille.ms-n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.gab-mosaique figure { margin: 0; height: 100%; overflow: hidden; }
.gab-mosaique .pn-img { width: 100%; height: 100%; object-fit: cover; }
.gab-mosaique .ms-kicker {
  position: absolute; left: 0; bottom: 0; margin: 0; padding: 0.6em 0.9em;
  color: var(--papier); background: linear-gradient(0deg, rgba(28,23,20,.6), transparent);
}

/* --- pleine-image -------------------------------------------------------- */
.gab-pleine { position: relative; height: 100%; background: var(--sombre); }
.gab-pleine img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gab-pleine figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; color: var(--champagne);
  padding: var(--marge-cote); background: linear-gradient(0deg, rgba(28,23,20,.7), transparent);
}

/* --- carnet -------------------------------------------------------------- */
.gab-carnet .ct-grille { columns: 2; column-gap: var(--gouttiere); margin-top: 0.6em; }
.gab-carnet .ct-piece { break-inside: avoid; margin: 0 0 1.2em; }
.gab-carnet .ct-piece .pn-img { aspect-ratio: 1/1; margin-bottom: 0.4em; }
.gab-carnet .ct-piece h3 { font: 400 var(--t-h4)/1.2 var(--f-titre); margin: 0 0 0.2em; color: var(--encre-fort); }
.gab-carnet .ct-piece p { margin: 0; color: var(--taupe); font-size: var(--t-note); text-align: left; }

/* --- breves -------------------------------------------------------------- */
.gab-breves .br { padding: 0.7em 0; border-bottom: 1px solid var(--brume); break-inside: avoid; }
.gab-breves .br h3 { font: 600 var(--t-h4)/1.2 var(--f-h2); margin: 0 0 0.2em; color: var(--bordeaux); }
.gab-breves .br p { margin: 0; color: var(--encre); font-size: var(--t-note); text-align: left; }

/* --- data : les chiffres qui se comptent (geste M20) --------------------- */
.gab-data { background: var(--champagne); height: 100%; }
.gab-data .dt-grille { display: grid; gap: 1.1em; grid-template-columns: repeat(auto-fit, minmax(38%, 1fr)); margin-top: 1.2em; }
.gab-data .dt { text-align: center; border-top: 2px solid var(--or); padding-top: 0.7em; }
.gab-data .dt .n {
  display: block; font: 700 var(--t-h1)/1 var(--f-titre); color: var(--bordeaux);
  font-variant-numeric: tabular-nums;
}
.gab-data .dt .l { display: block; margin-top: 0.3em; color: var(--taupe); font-size: var(--t-note); }

/* --- reperes : blocs courts en grille régulière -------------------------- */
.gab-reperes .rp-grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gouttiere); margin-top: 1em; }
.gab-reperes .rp-case { border-top: 1px solid var(--brume); padding-top: 0.6em; }
.gab-reperes .rp-case h3 { font: 600 var(--t-h4)/1.2 var(--f-h2); color: var(--bordeaux); margin: 0 0 0.25em; text-transform: uppercase; letter-spacing: var(--approche); }
.gab-reperes .rp-case p { margin: 0; font-size: var(--t-note); color: var(--encre); text-align: left; }

/* --- citation ------------------------------------------------------------ */
.gab-citation { display: grid; place-content: center; text-align: center; height: 100%; padding: var(--marge-cote); }
.gab-citation blockquote { margin: 0; max-width: 22ch; }
.gab-citation q { font: 400 var(--t-h1s)/1.18 var(--f-titre); font-style: italic; color: var(--encre-fort); }
.gab-citation q::before { content: "«\00a0"; color: var(--bordeaux); }
.gab-citation q::after { content: "\00a0»"; color: var(--bordeaux); }
.gab-citation .cit-src {
  margin-top: 1.2em; color: var(--bordeaux); letter-spacing: var(--approche-large);
  text-transform: uppercase; font: 500 var(--t-note)/1 var(--f-rubrique); font-style: italic;
}

/* --- tribune : colonne étroite très aérée + exergue ---------------------- */
.gab-tribune .pn-corps { max-width: 74%; margin-inline: auto; }
.gab-tribune .tr-exergue {
  font: 400 var(--t-h3)/1.25 var(--f-titre); font-style: italic; color: var(--bordeaux);
  border-left: 2px solid var(--or); padding-left: 0.8em; margin: 1em 0; text-align: left;
}

/* --- respiration : page nue, une phrase, un filet ------------------------ */
.gab-respiration { display: grid; place-content: center; text-align: center; height: 100%; padding: var(--marge-cote); }
.gab-respiration .rs-mot { font: 400 var(--t-h1s)/1.2 var(--f-marque); color: var(--bordeaux); margin: 0; }
.gab-respiration .pn-filet { margin: 1.2em auto; }

/* --- pub-a4 : l'encart A4 du partenaire, ENTIER, jamais recadré ---------- */
.gab-pub { display: grid; place-items: center; height: 100%; background: var(--brume); padding: 3%; }
.gab-pub .pub-cadre {
  /* la feuille est en 4:5, l'encart est en A4 : il est présenté ENTIER,
     à son ratio réel (210/297), centré, sur fond neutre — jamais déformé. */
  /* l'encart occupe TOUTE la hauteur utile de la feuille, à son ratio A4 exact :
     la feuille 4:5 étant plus large que l'A4, il reste une marge latérale neutre. */
  aspect-ratio: 210 / 297;
  height: 100%;
  width: auto;
  max-width: 100%;
  background: var(--papier-pur);
  box-shadow: 0 2px 18px rgba(28,23,20,.14);
  display: grid;
  overflow: hidden;
}
.gab-pub .pub-cadre img { width: 100%; height: 100%; object-fit: contain; }
/* Locataire 2 : AdSense dormant — factice neutre maison marqué, jamais un vrai bloc. */
.gab-pub .pub-factice {
  place-content: center; text-align: center; gap: 0.6em; padding: 8%;
  border: 2px dashed var(--or, #b08d57);
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(176,141,87,.05) 22px 44px),
    var(--papier-pur);
}
.gab-pub .pub-fx-tit {
  font: 500 var(--t-note) var(--f-rubrique); letter-spacing: var(--approche-large);
  text-transform: uppercase; color: var(--taupe-clair, #8a7a6a); margin: 0;
}
.gab-pub .pub-fx-note {
  font: italic 400 var(--t-note) var(--f-rubrique); color: var(--taupe-clair, #8a7a6a);
  opacity: .8; margin: 0.4em 0 0;
}
.gab-pub .pub-mention {
  position: absolute; top: 2.4%; right: var(--marge-cote); margin: 0;
  font: 400 var(--t-note)/1 var(--f-rubrique); letter-spacing: var(--approche-large);
  text-transform: uppercase; color: var(--taupe-clair);
}

/* ==========================================================================
   MOBILE 390 — la mise en page « grand écran » cascade dans la feuille
   ========================================================================== */
@container (max-width: 460px) {
  .pn-colonnes { columns: 1; }
  /* Sur une feuille étroite, l'image d'ouverture cède la place à la titraille */
  .gab-ouverture figure { flex: 0 0 38%; min-height: 38%; }
  /* et les bandes de reportage empilées ne prennent pas toute la hauteur */
  .gab-reportage .rp-bande .pn-img { aspect-ratio: 2/1; }
  .gab-portfolio .pf-grille { grid-template-columns: 1fr; }
  .gab-carnet .ct-grille { columns: 1; }
  .gab-reperes .rp-grille { grid-template-columns: 1fr; }
  .gab-data .dt-grille { grid-template-columns: 1fr 1fr; }
  .gab-reportage .rp-bande { grid-template-columns: 1fr; }
  .gab-reportage .rp-bande.inverse > figure { order: 0; }
  .gab-entretien { grid-template-columns: 1fr; grid-template-rows: 38% 1fr; }
  .gab-mosaique .ms-grille { grid-template-columns: 1fr !important; grid-template-rows: none !important; }
  .gab-mosaique .ms-grille.ms-n3 figure:first-child { grid-row: auto; }
  .gab-mosaique figure { aspect-ratio: 4/3; }
  .gab-lookbook .lb-grille { grid-template-columns: 1fr; grid-template-rows: none; }
  .gab-tribune .pn-corps, .gab-texte .pn-corps, .gab-edito .pn-corps { max-width: 100%; }
  /* En feuille étroite, les deux colonnes d'accroches s'EMPILENT (posées dans la
     même case de grille, elles se chevauchaient — constat de vérification).
     L'image et son voile couvrent toutes les rangées ; le bandeau prend la
     première, les deux colonnes les deux dernières. */
  .gab-couv-accroches { grid-template-rows: auto 1fr auto auto; }
  .gab-couv-accroches .cva-img,
  .gab-couv-accroches .cva-voile { grid-area: 1 / 1 / -1 / -1; }
  .gab-couv-accroches .cva-bandeau { grid-row: 1; grid-column: 1; }
  .gab-couv-accroches .cv-col {
    position: static; width: auto; grid-column: 1;
    margin-inline: 3.8%; text-align: left; gap: 0.7em;
  }
  .gab-couv-accroches .cv-col--g { grid-row: 3; }
  .gab-couv-accroches .cv-col--d { grid-row: 4; margin-bottom: 6%; justify-content: flex-start; }
}
@media (max-width: 460px) {
  .pn-colonnes { columns: 1; }
  .gab-portfolio .pf-grille { grid-template-columns: 1fr; }
  .gab-carnet .ct-grille { columns: 1; }
  .gab-reperes .rp-grille { grid-template-columns: 1fr; }
  .gab-reportage .rp-bande { grid-template-columns: 1fr; }
  .gab-entretien { grid-template-columns: 1fr; grid-template-rows: 38% 1fr; }
  .gab-mosaique .ms-grille { grid-template-columns: 1fr !important; grid-template-rows: none !important; }
  .gab-lookbook .lb-grille { grid-template-columns: 1fr; grid-template-rows: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   VAGUE 1 (Santal — A4.idml) + VAGUE 2 (structures a4) — gabarits ajoutés
   par l'extraction en série. Habillage entièrement piloté par les variables
   du design system (design-system.css) : aucune valeur d'habillage en dur.
   ========================================================================== */

/* --- sommaire-illustré : la table des matières coiffée d'une grande photo -- */
.gab-sommaire-illustre .pn-corps { display: flex; flex-direction: column; }
.gab-sommaire-illustre .si-hero {
  margin: 0.8em 0 0.4em; flex: 0 0 auto; height: 34%; min-height: 0;
  overflow: hidden; border-radius: 2px;
}
.gab-sommaire-illustre .si-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gab-sommaire-illustre .si-liste { list-style: none; margin: 0.4em 0 0; padding: 0; counter-reset: s;
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; }
.gab-sommaire-illustre .si-liste li { border-top: 1px solid rgba(80,64,58,.16); }
.gab-sommaire-illustre .si-liste li:first-child { border-top: 0; }
.gab-sommaire-illustre .si-liste a {
  counter-increment: s; display: flex; gap: 0.8em; align-items: baseline;
  padding: 0.55em 0; color: var(--taupe-sombre); text-decoration: none;
  font: 400 var(--t-h4)/1.25 var(--f-titre); font-style: italic;
}
.gab-sommaire-illustre .si-liste a::before {
  content: counter(s, decimal-leading-zero);
  font: 700 var(--t-note)/1 var(--f-rubrique); color: var(--bordeaux);
  font-variant-numeric: tabular-nums; font-style: normal; flex: 0 0 auto;
}
.gab-sommaire-illustre .som-rub {
  font: 700 var(--t-note)/1 var(--f-rubrique); text-transform: uppercase;
  letter-spacing: var(--approche-large); color: var(--bordeaux); font-style: normal;
}
.gab-sommaire-illustre .som-pg { margin-left: auto; color: var(--taupe); font-variant-numeric: tabular-nums; font-style: normal; }

/* --- diptyque : deux images en regard en tête, texte en deux colonnes ------ */
.gab-diptyque .pn-corps { display: flex; flex-direction: column; }
.gab-diptyque .dp-band {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gouttiere);
  height: 32%; flex: 0 0 auto; margin: 0.7em 0 0.9em; min-height: 0;
}
.gab-diptyque .dp-band figure { margin: 0; overflow: hidden; }
.gab-diptyque .dp-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gab-diptyque .dp-txt { flex: 1 1 auto; min-height: 0; }

/* --- manchette de partie : le séparateur en aplat de couleur DA ------------ */
.gab-manchette {
  background: radial-gradient(circle at 50% 32%, #8A2340, #5C1528 78%);
  color: var(--papier);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.gab-manchette .mn-txt { padding: 0 12%; max-width: 100%; }
.gab-manchette .mn-kicker {
  font: 700 var(--t-note)/1 var(--f-rubrique); text-transform: uppercase;
  letter-spacing: var(--approche-large); color: var(--or-clair); margin: 0 0 0.4em;
}
.gab-manchette .mn-num {
  font: 700 clamp(64px, 13cqw, 132px)/0.9 var(--f-titre); color: var(--or-clair); margin: 0;
}
.gab-manchette .mn-titre {
  font: 700 clamp(28px, 6cqw, 54px)/1.02 var(--f-titre); color: var(--papier); margin: 0.1em 0 0;
}
.gab-manchette .mn-filet { width: 64px; height: 1.5px; border: 0; background: var(--or-clair); margin: 0.7em auto; }
.gab-manchette .mn-sub {
  font: italic 400 var(--t-chapo)/1.35 var(--f-titre); color: rgba(255,255,255,.86);
  margin: 0.6em auto 0; max-width: 26ch;
}
.gab-manchette .pn-folio { color: rgba(255,244,232,.6); }

/* --- mur d'images : la planche-contact dense ------------------------------- */
.gab-mur .pn-corps { display: flex; flex-direction: column; }
.gab-mur .mi-grille {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em;
  grid-auto-rows: 1fr; margin: 0.8em 0 0; flex: 1 1 auto; min-height: 0;
}
.gab-mur .mi-grille figure { margin: 0; overflow: hidden; }
.gab-mur .mi-grille img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gab-mur .mi-legende {
  flex: 0 0 auto; margin: 0.8em 0 0; text-align: center;
  font: 400 var(--t-note)/1.4 var(--f-rubrique); color: var(--taupe); letter-spacing: var(--approche);
}
@container (max-width: 480px) {
  .gab-mur .mi-grille { grid-template-columns: repeat(2, 1fr); }
  .gab-diptyque .dp-band { grid-template-columns: 1fr 1fr; }
}

/* --- recette / pas-à-pas (VAGUE 3) : étapes numérotées + encadré ingrédients */
.gab-recette .pn-corps { display: flex; flex-direction: column; }
.gab-recette .rc-corps {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.2em; margin: 0.8em 0 0; flex: 0 0 auto;
}
.gab-recette .rc-steps { list-style: none; counter-reset: et; margin: 0; padding: 0; }
.gab-recette .rc-steps li {
  position: relative; padding: 0 0 0.8em 2.4em;
  font: 400 var(--t-corps)/1.5 var(--f-corps); text-align: justify; hyphens: none;
}
.gab-recette .rc-steps li:last-child { padding-bottom: 0; }
.gab-recette .rc-steps li::before {
  counter-increment: et; content: counter(et);
  position: absolute; left: 0; top: -0.1em; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--bordeaux); color: var(--papier);
  font: 700 var(--t-note)/1.6em var(--f-rubrique); text-align: center;
}
.gab-recette .rc-encadre { background: var(--champagne); border-radius: 8px; padding: 1em 1.1em 1.2em; align-self: start; }
.gab-recette .rc-enc-tit {
  font: 700 var(--t-note)/1 var(--f-rubrique); text-transform: uppercase;
  letter-spacing: var(--approche-large); color: var(--bordeaux); margin: 0 0 0.8em;
}
.gab-recette .rc-encadre ul { list-style: none; margin: 0; padding: 0; }
.gab-recette .rc-encadre li {
  font: 400 var(--t-note)/1.35 var(--f-corps); color: var(--encre-2);
  padding: 0.4em 0; border-top: 1px solid rgba(123,29,53,.14);
}
.gab-recette .rc-encadre li:first-child { border-top: 0; }
.gab-recette .rc-photo { margin: 0.9em 0 0; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 2px; }
.gab-recette .rc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@container (max-width: 480px) { .gab-recette .rc-corps { grid-template-columns: 1fr; } }