:root {
  --f-titre: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-texte: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-graisse-titre: 600;
  --f-casse-kicker: uppercase;
  --tm: 0.75rem;
  --t1: 1.0rem;
  --t2: 1.333rem;
  --t3: 1.777rem;
  --t4: 2.369rem;
  --t5: 3.157rem;
  --t6: 4.209rem;
  --t7: 5.61rem;
  --t-hero: clamp(3.16rem, 6vw, 7.48rem);
  --e1: 0.3rem;
  --e2: 0.6rem;
  --e3: 0.9rem;
  --e4: 1.2rem;
  --e5: 1.8rem;
  --e6: 2.4rem;
  --e7: 3.6rem;
  --e8: 4.8rem;
  --r-carte: 6px;
  --r-bouton: 6px;
  --r-image: 4px;
  --largeur: 1200px;
  --ico-trait: 1.5;
  --header-h: 72px;
  --c-fond: #fdfdfd;
  --c-fond-2: #f1f4f2;
  --c-surface: #ffffff;
  --c-texte: #2f2325;
  --c-texte-2: #6b575b;
  --c-primaire: #786d6f;
  --c-sur-primaire: #f8f7f7;
  /* L'accent d'action de la home n'est pas propre a la home : il est declare
     une fois dans da.css (--c-accent) et lu ici. Avant, la home peignait ses
     boutons dans un vert et les pages internes dans un autre : sur une meme
     page, deux couleurs d'action se faisaient face. */
  --c-secondaire: var(--c-accent);
  --c-sur-secondaire: var(--c-sur-primaire);
  --c-primaire-texte: var(--c-accent);
  --c-secondaire-texte: var(--c-accent);
  --c-doux: #e5e6e5;
  --c-sur-doux: #201d1e;
  --c-bord: #d9d3d4;
  --c-voile: #180c0e;
  --c-sur-voile: #ffffff;
  --c-ombre: #240f13;
  --o-carte: 0 18px 40px -12px color-mix(in srgb, #240f13 28%, transparent);
  --o-survol: 0 18px 40px -12px color-mix(in srgb, #240f13 28%, transparent);
  --carte-fond: #ffffff;
  --carte-encre: #2f2325;
  --carte-encre-2: #6b575b;
  --carte-lien: #706668;
  --carte-bord: 2px solid #2f2325;
  --btn-fond: transparent;
  --btn-texte: #706668;
  --btn-bord: 0 solid transparent;
  --btn-ombre: none;
  --btn-deco: underline;
  --lien-couleur: #706668;
  --lien-deco: underline;
  --lien-epaisseur: 1px;
  --lien-fond: transparent;
  --lien-fond-encre: #706668;
}
html.dark, html[data-theme="dark"], html[data-mode="dark"], html.theme-dark, body.dark, [data-theme="dark"] [data-bh-home] {
  --c-fond: #181414;
  --c-fond-2: #1c241f;
  --c-surface: #2b2425;
  --c-texte: #eee8e9;
  --c-texte-2: #c3b6b8;
  --c-primaire: #a3999b;
  --c-sur-primaire: #201d1e;
  /* Meme accent qu'en clair : le site est servi en theme clair, et un second
     accent en sombre rendrait de nouveau deux couleurs d'action. */
  --c-secondaire: var(--c-accent);
  --c-sur-secondaire: var(--c-sur-primaire);
  --c-primaire-texte: var(--c-accent);
  --c-secondaire-texte: var(--c-accent);
  --c-doux: #323433;
  --c-sur-doux: #f8f7f7;
  --c-bord: #4d4244;
  --c-voile: #180c0e;
  --c-sur-voile: #ffffff;
  --c-ombre: #070304;
  --o-carte: 0 18px 40px -12px color-mix(in srgb, #070304 28%, transparent);
  --o-survol: 0 18px 40px -12px color-mix(in srgb, #070304 28%, transparent);
  --carte-fond: #2b2425;
  --carte-encre: #eee8e9;
  --carte-encre-2: #c3b6b8;
  --carte-lien: #b6afb0;
  --carte-bord: 2px solid #eee8e9;
  --btn-fond: transparent;
  --btn-texte: #b6afb0;
  --btn-bord: 0 solid transparent;
  --btn-ombre: none;
  --btn-deco: underline;
  --lien-couleur: #b6afb0;
  --lien-deco: underline;
  --lien-epaisseur: 1px;
  --lien-fond: transparent;
  --lien-fond-encre: #b6afb0;
}

/* home.css — la banque de blocs home. AUCUNE couleur ni police ici :
   tout vient des tokens posés par da.py (--c-*, --f-*, --t*, --e*, --r-*...).
   Un test statique refuse toute couleur littérale dans ce fichier. */

html { overflow-x: clip; }
body { overflow-x: clip; }
.bh-a59a-home {
  font-family: var(--f-texte); color: var(--c-texte); background: var(--c-fond);
  font-size: var(--t1); line-height: 1.6;
  width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  position: relative; box-sizing: border-box; text-align: left;
}
.bh-a59a-home *, .bh-a59a-home *::before, .bh-a59a-home *::after { box-sizing: border-box; }
.bh-a59a-home * { min-width: 0; }
.bh-a59a-home :is(a, p, span, small) { opacity: 1; }
.bh-a59a-home img { max-width: 100%; display: block; }
.bh-a59a-home a { color: inherit !important; }
.bh-a59a-home :is(h1, h2, h3, h4, blockquote) { color: inherit; }
.bh-a59a-home p { margin: 0; }
.bh-a59a-home h2, .bh-a59a-home h3 { margin: 0; }
.bh-a59a-home .bh-a59a-h2 { color: var(--c-texte) !important; }
.bh-a59a-home .bh-a59a-intro { color: var(--c-texte) !important; }
.bh-a59a-home :is(.bh-a59a-kicker, .bh-a59a-num) { color: var(--c-texte) !important; }
.bh-a59a-home .bh-a59a-c-p { color: var(--carte-encre) !important; }
.bh-a59a-home :is(.bh-a59a-c-titre, .bh-a59a-c-meta, .bh-a59a-c-kicker, .bh-a59a-c-suite) { color: var(--carte-encre) !important; }
.bh-a59a-marque-site {
  position: absolute; z-index: 10; inset-block-start: var(--e3); inset-inline-start: var(--e5);
  padding: var(--e2) var(--e3); background: var(--c-fond); color: var(--c-texte);
  border: var(--bordure) solid var(--c-bordure); border-radius: var(--r-bouton);
}

/* ─── sections : un écran chacune ─── */
.bh-a59a-home .bh-a59a-bloc {
  min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column;
  justify-content: center; padding-block: var(--e7); background: var(--c-fond) !important; color: var(--c-texte) !important;
  /* l'en-tête est collant : une ancre visée ne doit jamais se cacher dessous */
  scroll-margin-top: var(--header-h);
}
.bh-a59a-home .bh-a59a-fond-b { background: var(--c-fond-2) !important; }
.bh-a59a-home .bh-a59a-fond-doux {
  background: var(--c-doux) !important;
  --c-texte: var(--c-sur-doux); --c-texte-2: var(--c-sur-doux); --c-primaire-texte: var(--c-sur-doux);
}
/* Contraste sur fond doux. Les jetons dérivés (--btn-texte, --carte-lien, --lien-couleur) sont
   résolus sur :root avec la couleur primaire : posés à même un fond doux (bouton contour ou
   souligné, lien hors carte), ils tombaient sous 4.5 (mesuré le 24/09 : 4.06 à 4.45). Sur fond
   doux ils prennent l'encre du doux ; dans une carte, qui a son propre fond, ils reprennent
   leur valeur d'origine gardée sur .bh-a59a-home. */
.bh-a59a-home { --btn-texte-racine: var(--btn-texte); --btn-bord-racine: var(--btn-bord); --carte-lien-racine: var(--carte-lien); }
.bh-a59a-home .bh-a59a-fond-doux { --carte-lien: var(--c-sur-doux); --lien-couleur: var(--c-sur-doux); --lien-fond-encre: var(--c-sur-doux); }
.bh-a59a-home:is([data-bouton="contour"], [data-bouton="souligne"]) .bh-a59a-fond-doux { --btn-texte: var(--c-sur-doux); }
.bh-a59a-home[data-bouton="contour"] .bh-a59a-fond-doux { --btn-bord: 2px solid var(--c-sur-doux); }
.bh-a59a-home .bh-a59a-fond-doux :is(.bh-a59a-carte, .bh-a59a-acc) {
  --carte-lien: var(--carte-lien-racine); --btn-texte: var(--btn-texte-racine); --btn-bord: var(--btn-bord-racine);
}
.bh-a59a-int { width: min(100% - 2 * var(--e5), var(--largeur)); margin-inline: auto; }

/* ─── en-tête de section ─── */
.bh-a59a-entete { margin-bottom: var(--e6); max-width: 64ch; }
[data-alignement="centre"] .bh-a59a-entete { margin-inline: auto; text-align: center; }
[data-alignement="centre"] .bh-a59a-d-colle .bh-a59a-entete { margin-inline: 0; text-align: left; }
.bh-a59a-num { display: none; }
[data-titres="numero"] .bh-a59a-num {
  display: block; font-family: var(--f-titre); font-size: var(--t4); line-height: 1;
  color: var(--c-primaire-texte); margin-bottom: var(--e3);
}
.bh-a59a-kicker { font-size: var(--tm); text-transform: var(--f-casse-kicker); letter-spacing: .08em; color: var(--c-primaire-texte); font-weight: 600; }
.bh-a59a-h2 {
  font-family: var(--f-titre); font-weight: var(--f-graisse-titre); line-height: 1.08;
  font-size: clamp(var(--t3), 4vw, var(--t5)); color: var(--c-texte); margin-bottom: var(--e3);
  letter-spacing: -.01em;
}
[data-titres="geant"] .bh-a59a-h2 { font-size: clamp(var(--t4), 6vw, var(--t6)); letter-spacing: -.025em; }
[data-titres="trait"] .bh-a59a-h2 { padding-bottom: var(--e3); border-bottom: 3px solid var(--c-primaire-texte); display: inline-block; }
[data-titres="kicker"] .bh-a59a-entete::before {
  content: ""; display: block; width: 3rem; height: 4px; background: var(--c-primaire); margin-bottom: var(--e4);
}
[data-alignement="centre"][data-titres="kicker"] .bh-a59a-entete::before { margin-inline: auto; }
.bh-a59a-intro { color: var(--c-texte-2); font-size: var(--t2); }
.bh-a59a-entete-lien { margin-top: var(--e4); }

/* ─── boutons et liens ─── */
.bh-a59a-home .bh-a59a-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .75em 1.35em; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--btn-fond) !important; color: var(--btn-texte) !important; border: var(--btn-bord);
  border-radius: var(--r-bouton); box-shadow: var(--btn-ombre);
  text-decoration: var(--btn-deco); text-underline-offset: .35em; text-decoration-thickness: 2px;
  transition: transform .15s ease;
}
.bh-a59a-bouton:hover { transform: translateY(-2px); }
/* Les flèches de la banque sont des tracés SVG posés par rendu.py, plus des
   glyphes de fonte injectés par CSS (le « » seul se lisait comme un caractère
   orphelin, centré sous les cartes de forme « ligne »). */
.bh-a59a-fleche svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
/* La base du theme pose svg { display: block } : sans conteneur flex, la fleche
   passait a la ligne sous son libelle (« Voir la rubrique » puis la fleche
   seule en dessous). Le flex la remet dans le fil du texte, comme les 25
   occurrences du gabarit le supposaient deja (flex: 0 0 auto ci-dessus). */
.bh-a59a-fleche { display: inline-flex; align-items: center; gap: .5em; }
.bh-a59a-home :is(.bh-a59a-c-suite, .bh-a59a-intro a) {
  color: var(--carte-lien) !important; font-weight: 600; text-decoration: var(--lien-deco);
  text-decoration-thickness: var(--lien-epaisseur); text-underline-offset: .3em; width: fit-content;
}
/* surligné : l encre du doux, en !important sinon la règle .bh-a59a-c-suite (encre de lien) gagnait : 3.85 mesuré en sombre */
.bh-a59a-home[data-lien="surligne"] .bh-a59a-c-suite { background: var(--c-doux); color: var(--c-sur-doux) !important; padding: .1em .35em; }

/* ─── cartes ─── */
.bh-a59a-home .bh-a59a-carte {
  background: var(--carte-fond) !important; color: var(--carte-encre) !important; border: var(--carte-bord);
  border-radius: var(--r-carte); box-shadow: var(--o-carte); overflow: hidden;
  display: flex; flex-direction: column; min-width: 0; position: relative;
  transition: box-shadow .2s ease, transform .2s ease;
}
.bh-a59a-carte:hover { box-shadow: var(--o-survol); }
.bh-a59a-c-corps { padding: var(--e5); display: flex; flex-direction: column; gap: var(--e2); flex: 1; }
.bh-a59a-c-titre { font-family: var(--f-titre); font-weight: var(--f-graisse-titre); font-size: var(--t2); line-height: 1.2; color: var(--carte-encre); }
.bh-a59a-c-titre a { text-decoration: none; color: inherit; }
.bh-a59a-c-titre a:hover { text-decoration: underline; text-underline-offset: .2em; }
/* Plafond de lignes des paragraphes de carte. Il ne sert plus à faire tenir un
   texte dans une mise en page : le budget rédactionnel est de 240 caractères
   (phrase complète) et tient en 8 lignes à 360 px. Douze lignes ne coupent donc
   jamais un texte écrit, elles protègent d'un collage pathologique. Même valeur
   que .bh-a59a-pile, qui l'appliquait déjà à ses propres cartes. */
.bh-a59a-c-p { color: var(--carte-encre-2); display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden; }
.bh-a59a-c-kicker { font-size: var(--tm); text-transform: var(--f-casse-kicker); letter-spacing: .06em; color: var(--carte-lien); font-weight: 600; }
.bh-a59a-c-meta { font-size: var(--tm); color: var(--carte-encre-2); }
.bh-a59a-c-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.bh-a59a-cs-texte, .bh-a59a-cs-qr, .bh-a59a-cs-fait, .bh-a59a-cs-citation { padding: var(--e5); gap: var(--e3); }
/* Les formes de carte sont préfixées par .bh-a59a-home : sans cela elles restaient à
   (0,1,0) sous `.bh-a59a-home .bh-a59a-carte` (0,2,0), qui impose `flex-direction:
   column` à toutes les cartes. La forme « ligne » était donc empilée et son
   icône « lire la suite » tombait seule et centrée sous le texte. À
   spécificité égale, l'ordre de source tranche : ces règles sont plus bas dans
   le fichier, elles gagnent enfin.
   `min-height: 100%` sur un item dont la hauteur de parent est inconnue
   chassait .bh-a59a-c-corps hors de la carte : `align-self: stretch` étire la photo
   sans écraser le texte. */
.bh-a59a-home .bh-a59a-cs-image-gauche { flex-direction: row; }
.bh-a59a-cs-image-gauche .bh-a59a-c-media { flex: 0 0 38%; align-self: stretch; min-height: 0; }
.bh-a59a-cs-image-gauche .bh-a59a-c-media img { width: 100%; height: 100%; min-height: 9rem; object-fit: cover; }
.bh-a59a-cs-superpose { min-height: 15rem; justify-content: flex-end; }
.bh-a59a-cs-superpose .bh-a59a-c-img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.bh-a59a-c-voile {
  position: relative; padding: var(--e5); display: flex; flex-direction: column; gap: var(--e2);
  background: linear-gradient(to top, color-mix(in srgb, var(--c-voile) 92%, transparent) 55%, color-mix(in srgb, var(--c-voile) 0%, transparent));
  color: var(--c-sur-voile); padding-top: var(--e8);
}
/* Sur une carte a voile, le texte est pose sur la photo : il reste clair.
   La regle generale des cartes plus haut impose --carte-encre en !important,
   il faut donc repondre sur le meme terrain, sinon le titre passe en encre
   sombre sur le degrade sombre et devient illisible. */
.bh-a59a-c-voile :is(.bh-a59a-c-titre, .bh-a59a-c-kicker, .bh-a59a-c-meta, .bh-a59a-c-suite, .bh-a59a-c-p) {
  color: var(--c-sur-voile) !important;
}
.bh-a59a-c-vedette .bh-a59a-c-titre { font-size: var(--t4); }
.bh-a59a-cs-portrait { align-items: flex-start; }
.bh-a59a-c-avatar { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; margin: var(--e5) var(--e5) 0; }
.bh-a59a-c-vedette .bh-a59a-c-avatar { width: 9rem; height: 9rem; }
.bh-a59a-cs-numero .bh-a59a-c-numero {
  font-family: var(--f-titre); font-size: var(--t5); line-height: 1; color: var(--carte-lien);
  padding: var(--e5) var(--e5) 0; font-weight: var(--f-graisse-titre);
}
.bh-a59a-home .bh-a59a-cs-ligne { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--e4); }
.bh-a59a-cs-ligne .bh-a59a-c-corps { padding-block: var(--e4); }
.bh-a59a-c-fleche {
  display: inline-flex; align-items: center; padding: var(--e4); text-decoration: none;
  font-size: var(--t3); color: var(--carte-lien);
}
.bh-a59a-cs-pastille { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.bh-a59a-c-pastille {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
  padding: .7em 1.1em; border-radius: var(--r-bouton); border: var(--carte-bord);
  background: var(--carte-fond); color: var(--carte-encre); text-decoration: none; font-weight: 600;
}
.bh-a59a-c-pastille small { color: var(--carte-encre-2); font-weight: 400; }
.bh-a59a-c-pastille:hover { background: var(--c-primaire); color: var(--c-sur-primaire); }
.bh-a59a-c-pastille:hover small { color: var(--c-sur-primaire); }
.bh-a59a-c-citation { margin: 0; font-family: var(--f-titre); font-size: var(--t2); line-height: 1.45; }
.bh-a59a-c-vedette .bh-a59a-c-citation { font-size: var(--t4); }
.bh-a59a-c-signature { display: grid; gap: .1em; font-size: var(--tm); color: var(--carte-encre-2); }
.bh-a59a-c-signature strong { color: var(--carte-encre); font-size: var(--t1); }
/* Notation : les etoiles sont des SVG, jamais des glyphes de police (le
   caractere dependait de la police de secours et ne se dimensionnait pas).
   Meme trace que le kit de lecture des articles. */
.bh-a59a-etoiles { display: inline-flex; align-items: center; gap: .12em; font-size: var(--t1); }
.bh-a59a-etoiles-pleines,
.bh-a59a-etoiles-vides { display: inline-flex; align-items: center; gap: .12em; }
.bh-a59a-etoiles svg { width: 1em; height: 1em; display: block; flex: none; }
.bh-a59a-etoiles-pleines { color: var(--carte-lien); }
.bh-a59a-etoiles-vides { color: var(--c-bord); }
/* Une note pleine ne laisse pas de rangee vide : sans cela, la rangee
   d'etoiles vides conservait l'ecart de la grille pour rien. */
.bh-a59a-etoiles-vides:empty { display: none; }
.bh-a59a-c-chiffre { font-family: var(--f-titre); font-size: var(--t6); line-height: 1; color: var(--carte-lien); font-weight: var(--f-graisse-titre); overflow-wrap: anywhere; }
.bh-a59a-c-label { font-weight: 600; }
.bh-a59a-cs-image-seule { background: transparent; border: 0; box-shadow: none; gap: var(--e2); }
.bh-a59a-cs-image-seule img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-image); }
.bh-a59a-c-legende { font-size: var(--tm); color: var(--c-texte-2); }

/* ─── grilles (colonnes posées par le composeur : --cd --ct --cm) ─── */
.bh-a59a-grille { display: grid; gap: var(--e5); grid-template-columns: repeat(var(--cm), minmax(0, 1fr)); }
@media (min-width: 640px) { .bh-a59a-grille { grid-template-columns: repeat(var(--ct), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bh-a59a-grille { grid-template-columns: repeat(var(--cd), minmax(0, 1fr)); } }
.bh-a59a-g-pastille { gap: var(--e3); }

/* magazine : une vedette et une grille de deux colonnes */
.bh-a59a-magazine { display: grid; gap: var(--e5); }
.bh-a59a-mag-vedette .bh-a59a-c-img { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .bh-a59a-magazine { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
  .bh-a59a-mag-droite .bh-a59a-mag-vedette { order: 2; }
  .bh-a59a-mag-vedette, .bh-a59a-mag-vedette .bh-a59a-carte { height: 100%; }
  .bh-a59a-mag-reste .bh-a59a-cs-image-gauche .bh-a59a-c-p { -webkit-line-clamp: 2; }
}
.bh-a59a-mag-reste .bh-a59a-c-titre { font-size: var(--t1); }

/* bento : rectangle toujours plein */
.bh-a59a-bento { display: grid; gap: var(--e4); grid-template-columns: minmax(0, 1fr); }
.bh-a59a-bento > .bh-a59a-carte { min-height: 13rem; }
@media (min-width: 640px) {
  .bh-a59a-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-a59a-bento > :first-child { grid-column: span 2; }
  .bh-a59a-bento-4 > :nth-child(2), .bh-a59a-bento-6 > :nth-child(2) { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .bh-a59a-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(11rem, 1fr); }
  .bh-a59a-bento-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-a59a-bento-3 > :nth-child(1) { grid-area: 1 / 1 / 3 / 2; } .bh-a59a-bento-3 > :nth-child(2) { grid-area: 1 / 2 / 2 / 3; } .bh-a59a-bento-3 > :nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
  .bh-a59a-bento-4 > :nth-child(1) { grid-area: 1 / 1 / 3 / 3; } .bh-a59a-bento-4 > :nth-child(2) { grid-area: 1 / 3 / 2 / 5; } .bh-a59a-bento-4 > :nth-child(3) { grid-area: 2 / 3 / 3 / 4; } .bh-a59a-bento-4 > :nth-child(4) { grid-area: 2 / 4 / 3 / 5; }
  .bh-a59a-bento-5 > :nth-child(1) { grid-area: 1 / 1 / 3 / 3; } .bh-a59a-bento-5 > :nth-child(2) { grid-area: 1 / 3 / 2 / 4; } .bh-a59a-bento-5 > :nth-child(3) { grid-area: 1 / 4 / 2 / 5; } .bh-a59a-bento-5 > :nth-child(4) { grid-area: 2 / 3 / 3 / 4; } .bh-a59a-bento-5 > :nth-child(5) { grid-area: 2 / 4 / 3 / 5; }
  .bh-a59a-bento-6 > :nth-child(1) { grid-area: 1 / 1 / 3 / 3; } .bh-a59a-bento-6 > :nth-child(2) { grid-area: 1 / 3 / 2 / 5; } .bh-a59a-bento-6 > :nth-child(3) { grid-area: 2 / 3 / 3 / 4; } .bh-a59a-bento-6 > :nth-child(4) { grid-area: 2 / 4 / 3 / 5; } .bh-a59a-bento-6 > :nth-child(5) { grid-area: 3 / 1 / 4 / 3; } .bh-a59a-bento-6 > :nth-child(6) { grid-area: 3 / 3 / 4 / 5; }
  .bh-a59a-bento-7 > :nth-child(1) { grid-area: 1 / 1 / 3 / 3; } .bh-a59a-bento-7 > :nth-child(2) { grid-area: 1 / 3 / 2 / 4; } .bh-a59a-bento-7 > :nth-child(3) { grid-area: 1 / 4 / 2 / 5; } .bh-a59a-bento-7 > :nth-child(4) { grid-area: 2 / 3 / 3 / 5; } .bh-a59a-bento-7 > :nth-child(5) { grid-area: 3 / 1 / 4 / 2; } .bh-a59a-bento-7 > :nth-child(6) { grid-area: 3 / 2 / 4 / 3; } .bh-a59a-bento-7 > :nth-child(7) { grid-area: 3 / 3 / 4 / 5; }
  .bh-a59a-bento > .bh-a59a-carte { min-height: 0; }
}
.bh-a59a-mosaique > .bh-a59a-carte { min-height: 10rem; }
.bh-a59a-mosaique .bh-a59a-c-lienimg { display: block; flex: 1; min-height: 0; }
.bh-a59a-mosaique .bh-a59a-cs-image-seule img { aspect-ratio: auto; height: 100%; min-height: 10rem; }

/* split : image ou aplat d'un côté, liste de l'autre */
.bh-a59a-split { display: grid; gap: var(--e6); align-items: center; }
.bh-a59a-split-media { margin: 0; }
.bh-a59a-split-media img { width: 100%; height: min(68svh, 40rem); object-fit: cover; border-radius: var(--r-image); }
.bh-a59a-split-texte {
  background: var(--c-primaire); color: var(--c-sur-primaire); border-radius: var(--r-carte);
  min-height: 22rem; padding: var(--e7); display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-start; gap: var(--e3);
}
.bh-a59a-split-grand { font-family: var(--f-titre); font-size: clamp(var(--t4), 3.4vw, var(--t6)); line-height: 1.08; font-weight: var(--f-graisse-titre); }
.bh-a59a-split-liste { display: grid; gap: var(--e4); }
@media (min-width: 1024px) {
  .bh-a59a-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bh-a59a-split-droite .bh-a59a-split-media { order: 2; }
}

/* carrousel */
.bh-a59a-car-piste {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 21rem); gap: var(--e5);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e4); scrollbar-width: thin;
}
.bh-a59a-car-piste > * { scroll-snap-align: start; }
.bh-a59a-car-nav { display: flex; gap: var(--e3); margin-top: var(--e4); }
.bh-a59a-car-nav .bh-a59a-bouton {
  padding: .4em .9em; font-size: var(--t2); line-height: 1;
  color: var(--c-texte); background: var(--c-fond);
}

/* timeline */
.bh-a59a-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--e6); border-left: 2px solid var(--c-bord); display: grid; gap: var(--e5); }
.bh-a59a-tl-pas { position: relative; }
.bh-a59a-tl-pas::before {
  content: ""; position: absolute; left: calc(-1 * var(--e6) - 8px); top: 1.4rem;
  width: 14px; height: 14px; border-radius: 50%; background: var(--c-primaire); border: 3px solid var(--c-fond);
}
@media (min-width: 1024px) {
  .bh-a59a-tl-alterne { border-left: 0; padding: 0; position: relative; }
  .bh-a59a-tl-alterne::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px solid var(--c-bord); }
  .bh-a59a-tl-alterne .bh-a59a-tl-pas { width: calc(50% - var(--e6)); }
  .bh-a59a-tl-alterne .bh-a59a-tl-pas:nth-child(even) { margin-left: calc(50% + var(--e6)); }
  .bh-a59a-tl-alterne .bh-a59a-tl-pas::before { left: auto; right: calc(-1 * var(--e6) - 8px); }
  .bh-a59a-tl-alterne .bh-a59a-tl-pas:nth-child(even)::before { right: auto; left: calc(-1 * var(--e6) - 8px); }
}

/* onglets */
.bh-a59a-onglets-barre { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e5); }
.bh-a59a-onglet {
  font: inherit; font-weight: 600; cursor: pointer; padding: .6em 1.1em; border-radius: var(--r-bouton);
  border: var(--carte-bord); background: var(--carte-fond); color: var(--carte-encre);
}
.bh-a59a-onglet[aria-selected="true"] { background: var(--c-primaire); color: var(--c-sur-primaire); }
.bh-a59a-panneau .bh-a59a-carte { font-size: var(--t2); }
.bh-a59a-panneau .bh-a59a-cs-image-gauche .bh-a59a-c-media { flex-basis: 45%; }

/* accordéon */
.bh-a59a-accordeon { display: grid; gap: var(--e3); max-width: 60rem; }
[data-alignement="centre"] .bh-a59a-accordeon { margin-inline: auto; }
.bh-a59a-acc { background: var(--carte-fond); color: var(--carte-encre); border: var(--carte-bord); border-radius: var(--r-carte); box-shadow: var(--o-carte); }
.bh-a59a-acc summary { cursor: pointer; padding: var(--e4) var(--e5); font-family: var(--f-titre); font-weight: var(--f-graisse-titre); font-size: var(--t2); }
.bh-a59a-acc-corps { padding: 0 var(--e5) var(--e5); display: grid; gap: var(--e3); color: var(--carte-encre-2); }
.bh-a59a-acc-corps a { color: var(--carte-lien); font-weight: 600; }

/* mur à colonnes explicites */
.bh-a59a-mur { display: grid; gap: var(--e5); grid-template-columns: minmax(0, 1fr); }
.bh-a59a-mur-col { display: grid; gap: var(--e5); align-content: start; }
@media (min-width: 640px) {
  .bh-a59a-mur { grid-template-columns: repeat(var(--k), minmax(0, 1fr)); grid-template-rows: repeat(var(--r), auto); }
  .bh-a59a-mur-col { grid-row: 1 / -1; grid-template-rows: subgrid; }
}

/* tableau */
.bh-a59a-tableau-cadre { overflow-x: auto; }
.bh-a59a-tableau { width: 100%; border-collapse: collapse; font-size: var(--t1); }
.bh-a59a-tableau th, .bh-a59a-tableau td { padding: var(--e4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-bord); }
.bh-a59a-tableau thead th { font-size: var(--tm); text-transform: var(--f-casse-kicker); letter-spacing: .06em; color: var(--c-texte-2); }
.bh-a59a-tableau tbody th { font-family: var(--f-titre); font-weight: var(--f-graisse-titre); font-size: var(--t2); width: 34%; }
.bh-a59a-tableau tbody th a { color: inherit; text-decoration: none; }
.bh-a59a-tableau td { color: var(--c-texte-2); }

/* Sous 480 px, trois colonnes ne tiennent plus dans la largeur d'un telephone :
   la derniere se faisait couper au milieu d'un mot, et rien n'indiquait qu'on
   pouvait faire defiler. Plutot qu'un cadre etroit avec un defilement cache,
   chaque ligne redevient une carte, et chaque cellule annonce son en-tete
   (data-col, ecrit dans le gabarit) : le tableau se lit de haut en bas, sans
   geste a deviner. Les jetons sont ceux du site : aucun ton nouveau. */
@media (max-width: 479px) {
  .bh-a59a-tableau-cadre { overflow-x: visible; }
  /* `tbody th` est repris explicitement : la regle de bureau qui pose la
     colonne a 34 % (`.bh-a59a-tableau tbody th`) pese 0-1-2, celle-ci doit
     peser autant pour la reprendre. Sans quoi l'intitule se casse mot a mot
     sur toute la hauteur du bloc, et la ligne ne se lit plus comme une carte. */
  .bh-a59a-tableau,
  .bh-a59a-tableau tbody,
  .bh-a59a-tableau tr,
  .bh-a59a-tableau th,
  .bh-a59a-tableau tbody th,
  .bh-a59a-tableau td,
  .bh-a59a-tableau tbody td { display: block; width: auto; }
  .bh-a59a-tableau thead { display: none; }
  .bh-a59a-tableau tr[data-carte] {
    background: var(--c-surface);
    border: 1px solid var(--c-bord);
    border-radius: var(--r-carte);
    padding: var(--e4);
    margin-bottom: var(--e4);
  }
  .bh-a59a-tableau tr[data-carte]:last-child { margin-bottom: 0; }
  .bh-a59a-tableau th,
  .bh-a59a-tableau td { padding: 0; border-bottom: 0; }
  .bh-a59a-tableau tbody th { font-size: var(--t2); }
  .bh-a59a-tableau [data-col] + [data-col] { margin-top: var(--e3); }
  .bh-a59a-tableau [data-col]::before {
    content: attr(data-col);
    display: block;
    font-family: var(--f-texte);
    font-size: var(--tm);
    font-weight: 600;
    text-transform: var(--f-casse-kicker);
    letter-spacing: .06em;
    color: var(--c-texte-2);
    margin-bottom: var(--e1);
  }
}

/* bandes pleine largeur */
.bh-a59a-bandes { display: grid; border-top: 1px solid var(--c-bord); }
.bh-a59a-bande { display: grid; gap: var(--e3); padding-block: var(--e6); border-bottom: 1px solid var(--c-bord); }
.bh-a59a-bande-titre { font-family: var(--f-titre); font-size: clamp(var(--t3), 3vw, var(--t5)); line-height: 1.1; font-weight: var(--f-graisse-titre); }
.bh-a59a-bande-titre a { text-decoration: none; color: inherit; }
.bh-a59a-bande-titre a:hover { color: var(--c-primaire-texte); }
.bh-a59a-bande-corps { display: grid; gap: var(--e2); color: var(--c-texte-2); }
.bh-a59a-bande-corps .bh-a59a-c-kicker { color: var(--c-primaire-texte); }
.bh-a59a-bande-corps .bh-a59a-c-p, .bh-a59a-bande-corps .bh-a59a-c-meta { color: var(--c-texte-2); }
@media (min-width: 1024px) { .bh-a59a-bande { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: baseline; } }

/* zigzag */
.bh-a59a-zigzag { display: grid; gap: var(--e6); }
.bh-a59a-zz .bh-a59a-cs-image-gauche { flex-direction: column; }
.bh-a59a-zz .bh-a59a-c-media { flex-basis: auto; }
.bh-a59a-zz .bh-a59a-c-media img { aspect-ratio: 16 / 10; height: auto; }
@media (min-width: 1024px) {
  .bh-a59a-zz .bh-a59a-cs-image-gauche { flex-direction: row; align-items: center; }
  .bh-a59a-zz .bh-a59a-c-media { flex: 0 0 52%; }
  .bh-a59a-zz-inverse .bh-a59a-cs-image-gauche { flex-direction: row-reverse; }
  .bh-a59a-zz .bh-a59a-c-titre { font-size: var(--t4); }
}

/* pile centrée */
.bh-a59a-pile { display: grid; gap: var(--e5); max-width: 54rem; }
[data-alignement="centre"] .bh-a59a-pile { margin-inline: auto; }
.bh-a59a-pile .bh-a59a-c-citation, .bh-a59a-pile .bh-a59a-cs-texte .bh-a59a-c-p { font-size: var(--t3); -webkit-line-clamp: 12; }

/* défilant */
.bh-a59a-defilant { display: grid; gap: var(--e4); overflow: hidden; }
.bh-a59a-def-rang { overflow: hidden; white-space: nowrap; }
.bh-a59a-def-piste { display: inline-flex; gap: var(--e7); animation: bh-a59a-defile 70s linear infinite; }
.bh-a59a-def-inverse .bh-a59a-def-piste { animation-direction: reverse; }
.bh-a59a-def-mot { font-family: var(--f-titre); font-size: clamp(var(--t3), 4vw, var(--t6)); font-weight: var(--f-graisse-titre); text-decoration: none; color: var(--c-texte); }
.bh-a59a-def-mot:nth-child(3n+2) { color: var(--c-primaire-texte); }
@keyframes bh-a59a-defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bh-a59a-def-piste { animation: none; } }

/* rail : une vedette, un rail dessous */
.bh-a59a-rail { display: grid; gap: var(--e5); }
.bh-a59a-rail-vedette .bh-a59a-cs-image-gauche .bh-a59a-c-media { flex-basis: 50%; }
.bh-a59a-rail-vedette .bh-a59a-c-titre { font-size: var(--t4); }
@media (max-width: 1023px) { .bh-a59a-rail-vedette .bh-a59a-cs-image-gauche { flex-direction: column; } }

/* colle : intro collée à gauche */
.bh-a59a-d-colle .bh-a59a-int { display: grid; gap: var(--e6); }
.bh-a59a-colle-liste { display: grid; gap: var(--e4); }
@media (min-width: 1024px) {
  .bh-a59a-d-colle .bh-a59a-int { grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); align-items: start; }
  .bh-a59a-d-colle .bh-a59a-entete { position: sticky; top: calc(var(--header-h) + var(--e5)); }
}

/* ─── hero ─── */
/* L'en-tête est sticky, donc dans le flux : il pousse le hero de ses 72px,
   aucune compensation à ajouter ici (ni padding-top, ni margin-top : un
   padding-top ne ferait que rogner la boîte de contenu, box-sizing
   border-box, et la règle .bh-a59a-home .bh-a59a-bloc gagnerait en
   spécificité, désaxant le hero sans que les mesures bougent). La hauteur du
   bloc se déduit du jeton --header-h (da.css, 72px), jamais d'une mesure JS. */
.bh-a59a-hero { height: calc(100svh - var(--header-h)); min-height: 0; padding-block: 0; position: relative; overflow: hidden; justify-content: flex-end; }
.bh-a59a-hero-kicker { font-size: var(--tm); text-transform: var(--f-casse-kicker); letter-spacing: .1em; font-weight: 600; margin-bottom: var(--e3); }
.bh-a59a-home .bh-a59a-hero-h1 { font-family: var(--f-titre); font-weight: var(--f-graisse-titre); font-size: clamp(2.2rem, 5.2vw, var(--t-hero)); line-height: 1; letter-spacing: -.02em; margin: 0 0 var(--e3); }
.bh-a59a-home .bh-a59a-hero-accroche { font-size: var(--t2); max-width: 46ch; margin-bottom: var(--e5); }
.bh-a59a-hero-actions { display: flex; flex-wrap: wrap; gap: var(--e3); }
.bh-a59a-hero-titres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.bh-a59a-hero-titres a { display: grid; gap: .15em; text-decoration: none; color: inherit; border-top: 1px solid currentColor; padding-top: var(--e2); }
.bh-a59a-hero-titres a:hover span:last-child { text-decoration: underline; }
.bh-a59a-hero-date { font-size: var(--tm); opacity: .85; }
.bh-a59a-hero-titres span:last-child { font-weight: 600; }

.bh-a59a-hero-plein-cadre .bh-a59a-hero-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.bh-a59a-hero-voile {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding-block: var(--e7);
  color: var(--c-sur-voile);
  background: linear-gradient(to top, color-mix(in srgb, var(--c-voile) 94%, transparent) 0%, color-mix(in srgb, var(--c-voile) 78%, transparent) 50%, color-mix(in srgb, var(--c-voile) 10%, transparent) 85%);
}
.bh-a59a-hero-bas { display: grid; gap: var(--e6); align-items: end; }
@media (min-width: 1024px) { .bh-a59a-hero-bas { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
@media (max-width: 1023px) { .bh-a59a-hero-plein-cadre .bh-a59a-hero-titres { display: none; } }

.bh-a59a-hero-scinde { display: grid; grid-template-rows: minmax(0, .9fr) minmax(0, 1.1fr); background: var(--c-fond); }
.bh-a59a-hero-moitie { min-height: 0; margin: 0; }
.bh-a59a-hero-gauche { display: flex; align-items: flex-end; padding: var(--e6) var(--e5); }
.bh-a59a-hero-media { position: relative; order: -1; }
.bh-a59a-hero-media img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.bh-a59a-hero-media figcaption { position: absolute; left: var(--e4); bottom: var(--e4); right: var(--e4); }
.bh-a59a-hero-media figcaption a { background: var(--c-surface); color: var(--c-texte); padding: .4em .7em; border-radius: var(--r-bouton); text-decoration: none; font-size: var(--tm); font-weight: 600; }
.bh-a59a-hero-gauche .bh-a59a-hero-kicker { color: var(--c-primaire-texte); }
@media (min-width: 1024px) {
  .bh-a59a-hero-scinde { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .bh-a59a-hero-media { order: 0; }
  .bh-a59a-hero-gauche { padding: var(--e7) var(--e7) var(--e7) max(var(--e5), calc((100vw - var(--largeur)) / 2)); }
  .bh-a59a-hero-gauche .bh-a59a-hero-titres { margin-top: var(--e6); }
}
@media (max-width: 1023px) { .bh-a59a-hero-scinde .bh-a59a-hero-titres { display: none; } }

.bh-a59a-hero-mosaique { background: var(--c-fond-2); }
.bh-a59a-hero-grille { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--e4); padding: var(--e4); }
.bh-a59a-hero-mosaique-img { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--e3); min-height: 0; order: -1; }
.bh-a59a-hero-vignette { position: relative; overflow: hidden; border-radius: var(--r-image); min-height: 0; display: block; }
.bh-a59a-hero-vignette img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.bh-a59a-hero-vignette span {
  position: absolute; inset: auto 0 0 0; padding: var(--e3); font-weight: 600; font-size: var(--tm); color: var(--c-sur-voile);
  background: linear-gradient(to top, color-mix(in srgb, var(--c-voile) 92%, transparent) 60%, color-mix(in srgb, var(--c-voile) 0%, transparent));
}
.bh-a59a-hero-grille .bh-a59a-hero-texte { padding: var(--e3) var(--e3) var(--e4); }
@media (min-width: 1024px) {
  .bh-a59a-hero-grille { grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); grid-template-rows: minmax(0, 1fr); align-items: end; padding: var(--e5) max(var(--e5), calc((100vw - var(--largeur)) / 2)); gap: var(--e7); }
  .bh-a59a-hero-mosaique-img { order: 2; height: 100%; }
  .bh-a59a-hero-vignette span { font-size: var(--t1); }
}
@media (max-width: 639px) { .bh-a59a-hero-vignette span { display: none; } }

.bh-a59a-hero-bandeau { justify-content: stretch; }
.bh-a59a-hero-haut { flex: 1 1 auto; min-height: 0; margin: 0; }
.bh-a59a-hero-haut img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.bh-a59a-hero-bande { flex: 0 0 auto; background: var(--c-primaire); color: var(--c-sur-primaire); padding-block: var(--e6); }
.bh-a59a-hero-bande-int { display: grid; gap: var(--e5); align-items: end; }
@media (min-width: 1024px) { .bh-a59a-hero-bande-int { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
@media (max-width: 1023px) { .bh-a59a-hero-bande .bh-a59a-hero-titres { display: none; } }

.bh-a59a-hero-typo { background: var(--c-fond-2); }
.bh-a59a-hero-typo-int { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-block: var(--e7); }
.bh-a59a-hero-typo .bh-a59a-hero-kicker { color: var(--c-primaire-texte); }
.bh-a59a-home .bh-a59a-hero-geant { font-family: var(--f-titre); font-size: clamp(2.8rem, 10.5vw, 10.5rem); line-height: .92; letter-spacing: -.035em; margin: 0 0 var(--e5); color: var(--c-texte); font-weight: var(--f-graisse-titre); overflow-wrap: anywhere; }
.bh-a59a-hero-typo-bas { display: grid; gap: var(--e5); align-items: end; border-top: 2px solid var(--c-texte); padding-top: var(--e5); }
.bh-a59a-hero-titres-ligne { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .bh-a59a-hero-typo-bas { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; }
  .bh-a59a-hero-titres-ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) { .bh-a59a-hero-typo .bh-a59a-hero-titres { display: none; } }

/* Boutons posés sur le voile ou la bande primaire : leurs couleurs doivent battre la règle
   générale .bh-a59a-home .bh-a59a-bouton (en !important). Sans cela, un bouton contour gardait l encre
   primaire sur la bande primaire : 1.07 à 3.5 mesurés le 24/09 sur 8 homes hero/v5. */
.bh-a59a-home .bh-a59a-hero-voile .bh-a59a-bouton-1 { background: var(--c-sur-voile) !important; color: var(--c-voile) !important; border: 2px solid var(--c-sur-voile); box-shadow: none; text-decoration: none; }
.bh-a59a-home .bh-a59a-hero-voile .bh-a59a-bouton-2 { background: transparent !important; color: var(--c-sur-voile) !important; border: 2px solid var(--c-sur-voile); box-shadow: none; }
.bh-a59a-home .bh-a59a-hero-bande .bh-a59a-bouton-1 { background: var(--c-sur-primaire) !important; color: var(--c-primaire) !important; border: 2px solid var(--c-sur-primaire); box-shadow: none; text-decoration: none; }
.bh-a59a-home .bh-a59a-hero-bande .bh-a59a-bouton-2 { background: transparent !important; color: var(--c-sur-primaire) !important; border: 2px solid var(--c-sur-primaire); box-shadow: none; }
.bh-a59a-home .bh-a59a-hero-bande :is(h1, h2, p, span, small, strong, li):not(.bh-a59a-bouton, .bh-a59a-bouton *) { color: var(--c-sur-primaire) !important; }

@media (max-width: 639px) {
  .bh-a59a-bloc { padding-block: var(--e6); }
  /* Préfixée elle aussi, sinon la règle de forme (0,2,0) la battrait et le texte
     passerait à côté de l'image sur téléphone. */
  .bh-a59a-home .bh-a59a-cs-image-gauche { flex-direction: column; }
  .bh-a59a-cs-image-gauche .bh-a59a-c-media { flex-basis: auto; }
  .bh-a59a-cs-image-gauche .bh-a59a-c-media img { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .bh-a59a-home .bh-a59a-hero-accroche { font-size: var(--t1); }
}

/* ─── garde-fous de largeur : une grille ne s'élargit jamais sur le contenu ─── */
.bh-a59a-rail, .bh-a59a-split, .bh-a59a-magazine, .bh-a59a-zigzag, .bh-a59a-bandes, .bh-a59a-pile, .bh-a59a-d-colle .bh-a59a-int, .bh-a59a-split-liste,
.bh-a59a-colle-liste, .bh-a59a-accordeon, .bh-a59a-timeline { grid-template-columns: minmax(0, 1fr); }
.bh-a59a-carte, .bh-a59a-bande, .bh-a59a-acc { overflow-wrap: anywhere; }
.bh-a59a-cs-ligne .bh-a59a-c-corps { min-width: 0; }
@media (min-width: 1024px) {
  .bh-a59a-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bh-a59a-magazine { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .bh-a59a-d-colle .bh-a59a-int { grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); }
}

/* ─── reprises du 24/09 : bloc par bloc, jamais plus loin ───────────────────
   Chaque regle est portee par l'identifiant du bloc concerne. Les mises en page
   du meme type (magazine, bento, bandes, split) servent a plusieurs blocs : une
   regle non prefixee les toucherait toutes. */

/* Articles : la vedette tient la largeur et sa couverture remplit la carte (il
   restait un tiers de vide sous l'image) ; les six suivantes passent en trois
   colonnes, vignette d'au moins 300 px ; les chapos sont entiers. */
.bh-a59a-b-articles .bh-a59a-magazine { grid-template-columns: minmax(0, 1fr); }
.bh-a59a-b-articles .bh-a59a-mag-vedette,
.bh-a59a-b-articles .bh-a59a-mag-vedette .bh-a59a-carte { height: auto; }
.bh-a59a-b-articles .bh-a59a-mag-vedette .bh-a59a-c-img { aspect-ratio: auto; }
.bh-a59a-b-articles .bh-a59a-c-p { display: block; overflow: visible; }
@media (min-width: 640px) {
  .bh-a59a-b-articles .bh-a59a-mag-vedette .bh-a59a-c-img { height: 100%; }
}
@media (min-width: 1024px) {
  .bh-a59a-b-articles .bh-a59a-mag-vedette .bh-a59a-c-media { flex: 0 0 52%; }
}

/* Dossier : trois colonnes de meme hauteur, sur une rangee comme sur deux. */
.bh-a59a-b-dossier .bh-a59a-grille,
.bh-a59a-b-auteurs .bh-a59a-grille,
.bh-a59a-b-methode .bh-a59a-grille { grid-auto-rows: 1fr; }
.bh-a59a-b-dossier .bh-a59a-carte,
.bh-a59a-b-auteurs .bh-a59a-carte,
.bh-a59a-b-methode .bh-a59a-carte { height: 100%; }
.bh-a59a-b-dossier .bh-a59a-c-p { display: block; overflow: visible; }

/* Mosaique : legende sous l'image, en encre pleine sur le fond clair. */
.bh-a59a-b-mosaique .bh-a59a-c-legende { color: var(--c-texte); font-weight: 600; }

/* Saisons : le repere dessine de chaque carte, dans l'accent du site. */
.bh-a59a-saison-ico { display: inline-flex; width: 2.4rem; height: 2.4rem; color: var(--c-accent); }
.bh-a59a-saison-ico svg { width: 100%; height: 100%; }

/* FAQ : l'accordeon prend la largeur, le titre garde son niveau de titre. */
.bh-a59a-b-faq .bh-a59a-accordeon { max-width: none; }
.bh-a59a-acc .bh-a59a-c-titre { margin: 0; }
/* Le triangle natif du resume est retire : il ne se dimensionne pas, ne se
   colore pas au repos et ne suit pas la rotation du chevron SVG pose en fin
   de ligne. */
.bh-a59a-acc-tete { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e4); }
.bh-a59a-acc-tete::-webkit-details-marker { display: none; }
.bh-a59a-acc-chev { flex: none; color: var(--c-accent); transition: transform .2s ease; }
.bh-a59a-acc[open] .bh-a59a-acc-chev { transform: rotate(180deg); }
.bh-a59a-acc[open] summary { border-bottom: 1px solid var(--c-bord); }
.bh-a59a-acc-corps .bh-a59a-c-p { display: block; overflow: visible; }

/* Lettre : un vrai champ, la mention RGPD sous le bouton, le retour annonce. */
.bh-a59a-lettre {
  display: grid; gap: var(--e5); padding: var(--e5);
  background: var(--c-surface); border: var(--carte-bord); border-radius: var(--r-carte);
}
.bh-a59a-lettre-form { display: grid; gap: var(--e3); align-content: start; }
.bh-a59a-champ { display: grid; gap: var(--e2); }
.bh-a59a-champ label { font-size: var(--tm); font-weight: 600; }
.bh-a59a-champ input {
  font: inherit; color: var(--c-texte); background: var(--c-fond);
  border: 1px solid var(--c-bord); border-radius: var(--r-carte); padding: .75em 1em;
}
.bh-a59a-champ input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* Le pot de miel : hors ecran, hors du parcours au clavier et de la lecture. */
.bh-a59a-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bh-a59a-lettre-action { margin: 0; }
.bh-a59a-lettre-retour { font-size: var(--tm); color: var(--c-texte-2); margin: 0; }
.bh-a59a-lettre-retour:not(:empty) { font-weight: 600; color: var(--c-texte); }
@media (min-width: 1024px) {
  .bh-a59a-lettre { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e7); }
}

/* Appel final : un bandeau pleine largeur, comme le .pg-cta des pages
   internes (/a-propos/, /rubriques/, /auteur/). Le duo carte d'accent + trois
   lignes de texte nu laissait toute la colonne de droite sans fond sur la
   hauteur de la carte : le bloc ne se lisait pas comme un appel. Meme aplat
   sombre que les pages internes (--c-texte), contenu centre dans la largeur
   du site. */
.bh-a59a-home .bh-a59a-fond-sombre {
  background: var(--c-voile) !important; /* --c-texte s'inverse en mode sombre : le bandeau devenait clair sous un texte blanc */
  color: var(--c-sur-voile) !important;
}

/* Ici la bascule de jetons de .bh-a59a-fond-doux ne convient pas : --c-texte
   porte l'aplat du bandeau, le redeclarer sur le meme element le resoudrait en
   encre claire et peindrait la bande en blanc. Les enkres sont donc reprises
   une a une, sur les seuls textes du bloc. */
.bh-a59a-home
  .bh-a59a-fond-sombre
  :is(.bh-a59a-kicker, .bh-a59a-h2, .bh-a59a-cta-accroche, .bh-a59a-cta-note) {
  color: var(--c-sur-voile) !important;
}

/* Sur l'aplat sombre, le bouton du gabarit (contour souligne) tombait sous
   4.5:1 : il prend l'aplat clair, comme .bh-a59a-hero-voile .bh-a59a-bouton-1. */
.bh-a59a-home .bh-a59a-b-cta_final .bh-a59a-bouton-1 {
  background: var(--c-sur-voile) !important;
  color: var(--c-voile) !important;
  border: 2px solid var(--c-sur-voile);
  box-shadow: none;
  text-decoration: none;
}

/* Rubriques : la photo occupe toute la tuile, la legende se pose dessus. Le
   degrade du gabarit ne couvrait que le bas (55 %) : sur une photo claire
   (calculatrice, bureau), le surtitre passait sous 3:1. Le voile descend
   desormais jusqu'au haut de la tuile. */
.bh-a59a-b-rubriques .bh-a59a-c-voile {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--c-voile) 94%, transparent) 0%,
    color-mix(in srgb, var(--c-voile) 88%, transparent) 50%,
    color-mix(in srgb, var(--c-voile) 35%, transparent) 100%);
}

/* Biographies de longueur inegale : le lien « Voir sa page » remonte sur la
   fiche la plus courte. Le corps de carte est deja une colonne flex, le lien
   se cale donc en bas de toutes les fiches a la meme hauteur. */
.bh-a59a-b-auteurs .bh-a59a-c-corps > p:last-child { margin-top: auto; }

/* Chronologie : deux dates par rangée, chacune dans sa colonne. En
   alternance, chaque rangée ne portait qu'une carte et laissait l'autre
   moitié vide sur toute sa hauteur ; chaque carte remplit ici sa colonne. */
.bh-a59a-b-archives .bh-a59a-timeline {
  padding-left: 0;
  border-left: 0;
}

.bh-a59a-b-archives .bh-a59a-tl-pas {
  padding-left: var(--e5);
  border-left: 3px solid var(--c-accent);
}

.bh-a59a-b-archives .bh-a59a-tl-pas::before { content: none; }

.bh-a59a-b-archives .bh-a59a-carte { height: 100%; }

@media (min-width: 1024px) {
  .bh-a59a-b-archives .bh-a59a-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--e5) var(--e6);
  }
}

/* La case d'appel ferme la grille des signatures : a cinq portraits sur trois
   colonnes, la deuxieme rangee laissait sa troisieme case vide sur toute sa
   hauteur. Meme carte que les autres, sans portrait. */
.bh-a59a-b-auteurs .bh-a59a-cs-appel {
  background: var(--c-fond-2) !important;
  border-style: dashed;
  box-shadow: none;
  justify-content: center;
}

/* L'appel final est le dernier bloc avant le pied de page, pas un ecran : a
   hauteur de fenetre imposee, son texte court laissait 250 px vides en haut et
   en bas. Le bandeau garde son contenu centre et une respiration large. */
.bh-a59a-home .bh-a59a-b-cta_final {
  min-height: 0;
  padding-block: var(--e8);
}

/* Le contenu du bandeau : surtitre, titre serif, accroche, bouton, note. Une
   seule colonne centree : deux colonnes de hauteurs differentes rejouaient le
   desequilibre que le bloc vient de corriger. */
.bh-a59a-b-cta_final .bh-a59a-cta-final {
  display: grid;
  justify-items: center;
  gap: var(--e4);
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.bh-a59a-b-cta_final .bh-a59a-cta-accroche {
  font-size: var(--t2);
  line-height: 1.5;
  max-width: 60ch;
}
.bh-a59a-b-cta_final .bh-a59a-cta-action { margin-top: var(--e2); }
.bh-a59a-b-cta_final .bh-a59a-cta-note { font-size: var(--tm); }

/* Une : les deux cartes du zigzag ont la hauteur de leur photo, et le texte
   occupe toute la colonne (titre en haut, « Lire l'article » en bas) au lieu de
   laisser le coin bas droit vide. Meme traitement que la vedette des articles. */
.bh-a59a-b-une .bh-a59a-cs-image-gauche { align-items: stretch; }
.bh-a59a-b-une .bh-a59a-cs-image-gauche .bh-a59a-c-suite { margin-top: auto; }
@media (min-width: 1024px) {
  .bh-a59a-b-une .bh-a59a-zz .bh-a59a-c-media { flex: 0 0 52%; }
  .bh-a59a-b-une .bh-a59a-zz .bh-a59a-c-media img { aspect-ratio: auto; height: 100%; object-fit: cover; }
}

/* tablette : la dernière carte d'une grille impaire prend la rangée entière (pas d'orpheline) */
@media (min-width: 640px) and (max-width: 1023px) {
  .bh-a59a-home .bh-a59a-b-dossier .bh-a59a-grille { --ct: 3 !important; } /* 3 cartes : une seule rangée de 3 en tablette */
}