:root {
  --f-titre: 'Bricolage Grotesque Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-texte: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-graisse-titre: 800;
  --f-casse-kicker: none;
  --tm: 0.8rem;
  --t1: 1.0rem;
  --t2: 1.25rem;
  --t3: 1.562rem;
  --t4: 1.953rem;
  --t5: 2.441rem;
  --t6: 3.052rem;
  --t7: 3.815rem;
  --t-hero: clamp(2.44rem, 6vw, 4.77rem);
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1.0rem;
  --e5: 1.5rem;
  --e6: 2.0rem;
  --e7: 3.0rem;
  --e8: 4.0rem;
  --r-carte: 28px;
  --r-bouton: 999px;
  --r-image: 22px;
  --largeur: 1360px;
  --ico-trait: 2.5;
  --header-h: calc(72px + 2.8rem);
  --c-fond: #f8f6f6;
  --c-fond-2: #f1e9e8;
  --c-surface: #ffffff;
  --c-texte: #35201d;
  --c-texte-2: #78504a;
  --c-primaire: #cc341a;
  --c-sur-primaire: #f9f6f5;
  --c-secondaire: #aa6255;
  --c-sur-secondaire: #040202;
  --c-primaire-texte: #be3018;
  --c-secondaire-texte: #884e44;
  --c-doux: #efdfdc;
  --c-sur-doux: #291714;
  --c-bord: #dfd0cd;
  --c-voile: #180d0c;
  --c-sur-voile: #ffffff;
  --c-ombre: #24120f;
  --o-carte: 0 18px 40px -12px color-mix(in srgb, #24120f 28%, transparent);
  --o-survol: 0 18px 40px -12px color-mix(in srgb, #24120f 28%, transparent);
  --carte-fond: #ffffff;
  --carte-encre: #35201d;
  --carte-encre-2: #78504a;
  --carte-lien: #be3018;
  --carte-bord: 1px solid #dfd0cd;
  --btn-fond: transparent;
  --btn-texte: #be3018;
  --btn-bord: 2px solid #be3018;
  --btn-ombre: none;
  --btn-deco: none;
  --lien-couleur: #be3018;
  --lien-deco: underline;
  --lien-epaisseur: 1px;
  --lien-fond: transparent;
  --lien-fond-encre: #be3018;
}
html.dark, html[data-theme="dark"], html[data-mode="dark"], html.theme-dark, body.dark, [data-theme="dark"] [data-bh-home] {
  --c-fond: #1b1210;
  --c-fond-2: #281a18;
  --c-surface: #31211e;
  --c-texte: #f1e6e5;
  --c-texte-2: #cdb1ad;
  --c-primaire: #e96953;
  --c-sur-primaire: #291714;
  --c-secondaire: #bb8177;
  --c-sur-secondaire: #291714;
  --c-primaire-texte: #ee8977;
  --c-secondaire-texte: #cfa7a0;
  --c-doux: #47251f;
  --c-sur-doux: #f9f6f5;
  --c-bord: #573c38;
  --c-voile: #180d0c;
  --c-sur-voile: #ffffff;
  --c-ombre: #070403;
  --o-carte: 0 18px 40px -12px color-mix(in srgb, #070403 28%, transparent);
  --o-survol: 0 18px 40px -12px color-mix(in srgb, #070403 28%, transparent);
  --carte-fond: #31211e;
  --carte-encre: #f1e6e5;
  --carte-encre-2: #cdb1ad;
  --carte-lien: #ee8977;
  --carte-bord: 1px solid #573c38;
  --btn-fond: transparent;
  --btn-texte: #ee8977;
  --btn-bord: 2px solid #ee8977;
  --btn-ombre: none;
  --btn-deco: none;
  --lien-couleur: #ee8977;
  --lien-deco: underline;
  --lien-epaisseur: 1px;
  --lien-fond: transparent;
  --lien-fond-encre: #ee8977;
}

/* 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-096f-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-096f-home *, .bh-096f-home *::before, .bh-096f-home *::after { box-sizing: border-box; }
.bh-096f-home * { min-width: 0; }
.bh-096f-home :is(a, p, span, small) { opacity: 1; }
.bh-096f-home img { max-width: 100%; display: block; }
.bh-096f-home a { color: inherit !important; }
.bh-096f-home :is(h1, h2, h3, h4, blockquote) { color: inherit; }
.bh-096f-home p { margin: 0; }
.bh-096f-home h2, .bh-096f-home h3 { margin: 0; }
.bh-096f-home .bh-096f-h2 { color: var(--c-texte) !important; }
.bh-096f-home .bh-096f-intro { color: var(--c-texte) !important; }
.bh-096f-home :is(.bh-096f-kicker, .bh-096f-num) { color: var(--c-texte) !important; }
.bh-096f-home .bh-096f-c-p { color: var(--carte-encre) !important; }
.bh-096f-home :is(.bh-096f-c-titre, .bh-096f-c-meta, .bh-096f-c-kicker, .bh-096f-c-suite) { color: var(--carte-encre) !important; }
.bh-096f-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 : le HERO seul fait un écran (règle revue 26/09) ───
   Les autres blocs prennent la hauteur de leur contenu, avec une respiration régulière :
   le min-height d'un écran laissait 140 à 213 px de vide en bas de repères, duel, titres
   (revue-auto-moto.com). */
/* :not(.bh-096f-hero) est indispensable : cette regle a une specificite (0,2,0) superieure a
   .bh-096f-hero (0,1,0), elle gagnait donc sur le hero et lui imposait padding-block: var(--e8)
   et justify-content: flex-start, ce qui annulait sa hauteur d'ecran. */
.bh-096f-home .bh-096f-bloc:not(.bh-096f-hero) {
  display: flex; flex-direction: column;
  justify-content: flex-start; padding-block: var(--e8); background: var(--c-fond) !important; color: var(--c-texte) !important;
}
.bh-096f-home .bh-096f-fond-b { background: var(--c-fond-2) !important; }
.bh-096f-home .bh-096f-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-096f-home. */
.bh-096f-home { --btn-texte-racine: var(--btn-texte); --btn-bord-racine: var(--btn-bord); --carte-lien-racine: var(--carte-lien); }
.bh-096f-home .bh-096f-fond-doux { --carte-lien: var(--c-sur-doux); --lien-couleur: var(--c-sur-doux); --lien-fond-encre: var(--c-sur-doux); }
.bh-096f-home:is([data-bouton="contour"], [data-bouton="souligne"]) .bh-096f-fond-doux { --btn-texte: var(--c-sur-doux); }
.bh-096f-home[data-bouton="contour"] .bh-096f-fond-doux { --btn-bord: 2px solid var(--c-sur-doux); }
.bh-096f-home .bh-096f-fond-doux :is(.bh-096f-carte, .bh-096f-acc) {
  --carte-lien: var(--carte-lien-racine); --btn-texte: var(--btn-texte-racine); --btn-bord: var(--btn-bord-racine);
}
.bh-096f-int { width: min(100% - 2 * var(--e5), var(--largeur)); margin-inline: auto; }

/* ─── en-tête de section ─── */
.bh-096f-entete { margin-bottom: var(--e6); max-width: 64ch; }
[data-alignement="centre"] .bh-096f-entete { margin-inline: auto; text-align: center; }
[data-alignement="centre"] .bh-096f-d-colle .bh-096f-entete { margin-inline: 0; text-align: left; }
/* FAQ : ses deux boites de mise en page sont centrees dans le bloc, le texte reste a gauche.
   Sans cela l'en-tete (64ch) colle a 24 px du bord et laisse 616 px de vide a droite
   (mesure home:faq-centree, comme sur les autres sites du parc). */
[data-usine-bloc="faq"] :is(.bh-096f-entete, .bh-096f-accordeon) { margin-inline: auto; }
.bh-096f-num { display: none; }
[data-titres="numero"] .bh-096f-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-096f-kicker { font-size: var(--tm); text-transform: var(--f-casse-kicker); letter-spacing: .08em; color: var(--c-primaire-texte); font-weight: 600; }
.bh-096f-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-096f-h2 { font-size: clamp(var(--t4), 6vw, var(--t6)); letter-spacing: -.025em; }
[data-titres="trait"] .bh-096f-h2 { padding-bottom: var(--e3); border-bottom: 3px solid var(--c-primaire-texte); display: inline-block; }
[data-titres="kicker"] .bh-096f-entete::before {
  content: ""; display: block; width: 3rem; height: 4px; background: var(--c-primaire); margin-bottom: var(--e4);
}
[data-alignement="centre"][data-titres="kicker"] .bh-096f-entete::before { margin-inline: auto; }
.bh-096f-intro { color: var(--c-texte-2); font-size: var(--t2); }
.bh-096f-entete-lien { margin-top: var(--e4); }

/* ─── boutons et liens ─── */
.bh-096f-home .bh-096f-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-096f-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-096f-fleche svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.bh-096f-home :is(.bh-096f-c-suite, .bh-096f-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-096f-c-suite (encre de lien) gagnait : 3.85 mesuré en sombre */
.bh-096f-home[data-lien="surligne"] .bh-096f-c-suite { background: var(--c-doux); color: var(--c-sur-doux) !important; padding: .1em .35em; }

/* ─── cartes ─── */
.bh-096f-home .bh-096f-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-096f-carte:hover { box-shadow: var(--o-survol); }
.bh-096f-c-corps { padding: var(--e5); display: flex; flex-direction: column; gap: var(--e2); flex: 1; }
.bh-096f-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-096f-c-titre a { text-decoration: none; color: inherit; }
.bh-096f-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-096f-pile, qui l'appliquait déjà à ses propres cartes. */
.bh-096f-c-p { color: var(--carte-encre-2); display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden; }
.bh-096f-c-kicker { font-size: var(--tm); text-transform: var(--f-casse-kicker); letter-spacing: .06em; color: var(--carte-lien); font-weight: 600; }
.bh-096f-c-meta { font-size: var(--tm); color: var(--carte-encre-2); }
.bh-096f-c-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.bh-096f-cs-texte, .bh-096f-cs-qr, .bh-096f-cs-fait, .bh-096f-cs-citation { padding: var(--e5); gap: var(--e3); }
/* Les formes de carte sont préfixées par .bh-096f-home : sans cela elles restaient à
   (0,1,0) sous `.bh-096f-home .bh-096f-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-096f-c-corps hors de la carte : `align-self: stretch` étire la photo
   sans écraser le texte. */
.bh-096f-home .bh-096f-cs-image-gauche { flex-direction: row; }
.bh-096f-cs-image-gauche .bh-096f-c-media { flex: 0 0 38%; align-self: stretch; min-height: 0; }
.bh-096f-cs-image-gauche .bh-096f-c-media img { width: 100%; height: 100%; min-height: 9rem; object-fit: cover; }
.bh-096f-cs-superpose { min-height: 15rem; justify-content: flex-end; }
.bh-096f-cs-superpose .bh-096f-c-img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.bh-096f-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);
}
.bh-096f-c-voile .bh-096f-c-titre, .bh-096f-c-voile .bh-096f-c-kicker, .bh-096f-c-voile .bh-096f-c-meta { color: var(--c-sur-voile); }
.bh-096f-c-vedette .bh-096f-c-titre { font-size: var(--t4); }
.bh-096f-cs-portrait { align-items: flex-start; }
.bh-096f-c-avatar { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; margin: var(--e5) var(--e5) 0; }
.bh-096f-c-vedette .bh-096f-c-avatar { width: 9rem; height: 9rem; }
.bh-096f-cs-numero .bh-096f-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-096f-home .bh-096f-cs-ligne { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--e4); }
.bh-096f-cs-ligne .bh-096f-c-corps { padding-block: var(--e4); }
.bh-096f-c-fleche {
  display: inline-flex; align-items: center; padding: var(--e4); text-decoration: none;
  font-size: var(--t3); color: var(--carte-lien);
}
.bh-096f-cs-pastille { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.bh-096f-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-096f-c-pastille small { color: var(--carte-encre-2); font-weight: 400; }
.bh-096f-c-pastille:hover { background: var(--c-primaire); color: var(--c-sur-primaire); }
.bh-096f-c-pastille:hover small { color: var(--c-sur-primaire); }
.bh-096f-c-citation { margin: 0; font-family: var(--f-titre); font-size: var(--t2); line-height: 1.45; }
.bh-096f-c-vedette .bh-096f-c-citation { font-size: var(--t4); }
.bh-096f-c-signature { display: grid; gap: .1em; font-size: var(--tm); color: var(--carte-encre-2); }
.bh-096f-c-signature strong { color: var(--carte-encre); font-size: var(--t1); }
/* étoiles : toujours en rangée, pleines = la note (le builder les pose parfois en SVG, qui
   passaient en display:block et s'empilaient : « Ce que vous en dites » cassé, 26/09) */
.bh-096f-etoiles { letter-spacing: .15em; font-size: var(--t1); display: flex; align-items: center; gap: .15em; flex-wrap: nowrap; margin: 0; line-height: 1; }
.bh-096f-etoiles svg { display: inline-block; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; color: var(--carte-lien); }
.bh-096f-etoile { color: var(--carte-lien); }
.bh-096f-etoiles .bh-096f-etoile-vide { color: var(--c-bord); }
.bh-096f-etoiles-vides { display: inline-flex; gap: .15em; }
.bh-096f-etoiles-pleines { color: var(--carte-lien); }
.bh-096f-etoiles-vides { color: var(--c-bord); }
.bh-096f-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-096f-c-label { font-weight: 600; }
.bh-096f-cs-image-seule { background: transparent; border: 0; box-shadow: none; gap: var(--e2); }
.bh-096f-cs-image-seule img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-image); }
.bh-096f-c-legende { font-size: var(--tm); color: var(--c-texte-2); }

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

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

/* bento : rectangle toujours plein */
.bh-096f-bento { display: grid; gap: var(--e4); grid-template-columns: minmax(0, 1fr); }
.bh-096f-bento > .bh-096f-carte { min-height: 13rem; }
@media (min-width: 640px) {
  .bh-096f-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-096f-bento > :first-child { grid-column: span 2; }
  .bh-096f-bento-4 > :nth-child(2), .bh-096f-bento-6 > :nth-child(2) { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .bh-096f-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(11rem, 1fr); }
  .bh-096f-bento-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-096f-bento-3 > :nth-child(1) { grid-area: 1 / 1 / 3 / 2; } .bh-096f-bento-3 > :nth-child(2) { grid-area: 1 / 2 / 2 / 3; } .bh-096f-bento-3 > :nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
  .bh-096f-bento-4 > :nth-child(1) { grid-area: 1 / 1 / 3 / 3; } .bh-096f-bento-4 > :nth-child(2) { grid-area: 1 / 3 / 2 / 5; } .bh-096f-bento-4 > :nth-child(3) { grid-area: 2 / 3 / 3 / 4; } .bh-096f-bento-4 > :nth-child(4) { grid-area: 2 / 4 / 3 / 5; }
  .bh-096f-bento-5 > :nth-child(1) { grid-area: 1 / 1 / 3 / 3; } .bh-096f-bento-5 > :nth-child(2) { grid-area: 1 / 3 / 2 / 4; } .bh-096f-bento-5 > :nth-child(3) { grid-area: 1 / 4 / 2 / 5; } .bh-096f-bento-5 > :nth-child(4) { grid-area: 2 / 3 / 3 / 4; } .bh-096f-bento-5 > :nth-child(5) { grid-area: 2 / 4 / 3 / 5; }
  .bh-096f-bento-6 > :nth-child(1) { grid-area: 1 / 1 / 3 / 3; } .bh-096f-bento-6 > :nth-child(2) { grid-area: 1 / 3 / 2 / 5; } .bh-096f-bento-6 > :nth-child(3) { grid-area: 2 / 3 / 3 / 4; } .bh-096f-bento-6 > :nth-child(4) { grid-area: 2 / 4 / 3 / 5; } .bh-096f-bento-6 > :nth-child(5) { grid-area: 3 / 1 / 4 / 3; } .bh-096f-bento-6 > :nth-child(6) { grid-area: 3 / 3 / 4 / 5; }
  .bh-096f-bento-7 > :nth-child(1) { grid-area: 1 / 1 / 3 / 3; } .bh-096f-bento-7 > :nth-child(2) { grid-area: 1 / 3 / 2 / 4; } .bh-096f-bento-7 > :nth-child(3) { grid-area: 1 / 4 / 2 / 5; } .bh-096f-bento-7 > :nth-child(4) { grid-area: 2 / 3 / 3 / 5; } .bh-096f-bento-7 > :nth-child(5) { grid-area: 3 / 1 / 4 / 2; } .bh-096f-bento-7 > :nth-child(6) { grid-area: 3 / 2 / 4 / 3; } .bh-096f-bento-7 > :nth-child(7) { grid-area: 3 / 3 / 4 / 5; }
  .bh-096f-bento > .bh-096f-carte { min-height: 0; }
}
.bh-096f-mosaique > .bh-096f-carte { min-height: 10rem; }
.bh-096f-mosaique .bh-096f-c-lienimg { display: block; flex: 1; min-height: 0; }
.bh-096f-mosaique .bh-096f-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-096f-split { display: grid; gap: var(--e6); align-items: center; }
.bh-096f-split-media { margin: 0; }
.bh-096f-split-media img { width: 100%; height: min(68svh, 40rem); object-fit: cover; border-radius: var(--r-image); }
.bh-096f-split-texte {
  background: var(--c-primaire); color: var(--c-sur-primaire); border-radius: var(--r-carte);
  min-height: 22rem; padding: var(--e7); display: flex; align-items: flex-end;
}
.bh-096f-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-096f-split-liste { display: grid; gap: var(--e4); }
@media (min-width: 1024px) {
  .bh-096f-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bh-096f-split-droite .bh-096f-split-media { order: 2; }
}

/* carrousel */
.bh-096f-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-096f-car-piste > * { scroll-snap-align: start; }
.bh-096f-car-nav { display: flex; gap: var(--e3); margin-top: var(--e4); }
.bh-096f-car-nav .bh-096f-bouton {
  padding: .4em .9em; font-size: var(--t2); line-height: 1;
  color: var(--c-texte); background: var(--c-fond);
}

/* timeline = frise vivante (revue 26/09 : « timelines moches, pas dynamiques ») : le trait se
   remplit au défilement et chaque jalon s'allume (kit_vivant data-frise / data-jalon, --kv-progression).
   La frise porte son propre dessin : elle reste lisible même sans kit (trait plein). */
.bh-096f-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-096f-home .bh-096f-timeline[data-frise] { border-left: 0; padding: 0 0 0 calc(var(--e7) + .25rem); position: relative; }
.bh-096f-home .bh-096f-timeline[data-frise]::before, .bh-096f-home .bh-096f-timeline[data-frise]::after {
  content: ""; position: absolute; left: calc(var(--e5) - 2px); top: .5rem; width: 4px; border-radius: 4px; }
.bh-096f-home .bh-096f-timeline[data-frise]::before { bottom: .5rem; height: auto; background: var(--c-bord); }
.bh-096f-home .bh-096f-timeline[data-frise]::after { height: calc((100% - 1rem) * var(--kv-progression, 1)); background: var(--c-primaire); transition: height .2s linear; }
.bh-096f-home .bh-096f-timeline[data-frise] > .bh-096f-tl-pas::before {
  left: calc(-1 * var(--e7) - .25rem + var(--e5) - 11px); top: 1.35rem; width: 22px; height: 22px;
  background: var(--c-fond); border: 4px solid var(--c-bord); box-sizing: border-box; transition: all .25s ease; z-index: 1; }
.bh-096f-home .bh-096f-timeline[data-frise] > .bh-096f-tl-pas.kv-atteint::before { border-color: var(--c-primaire); background: var(--c-primaire); }
.bh-096f-home .bh-096f-timeline[data-frise] > [data-jalon]::after { content: none; }
.bh-096f-home .bh-096f-timeline[data-frise] .bh-096f-carte { transition: transform .3s ease, box-shadow .3s ease; }
.bh-096f-home .bh-096f-timeline[data-frise] > .kv-atteint .bh-096f-carte { box-shadow: var(--o-survol); }
.bh-096f-c-echeance { display: inline-flex; align-self: flex-start; align-items: center; gap: .4em; font-weight: 700; font-size: var(--tm);
  letter-spacing: .04em; padding: .3em .75em; border-radius: 999px; background: var(--c-primaire); color: var(--c-sur-primaire); }
.bh-096f-home .bh-096f-carte .bh-096f-c-echeance { color: var(--c-sur-primaire) !important; }
.bh-096f-cs-jalon, .bh-096f-cs-repere { padding: var(--e5); gap: var(--e3); }
.bh-096f-tl-pas { position: relative; }
.bh-096f-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-096f-tl-alterne { border-left: 0; padding: 0; position: relative; }
  .bh-096f-tl-alterne::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px solid var(--c-bord); }
  .bh-096f-tl-alterne .bh-096f-tl-pas { width: calc(50% - var(--e6)); }
  .bh-096f-tl-alterne .bh-096f-tl-pas:nth-child(even) { margin-left: calc(50% + var(--e6)); }
  .bh-096f-tl-alterne .bh-096f-tl-pas::before { left: auto; right: calc(-1 * var(--e6) - 8px); }
  .bh-096f-tl-alterne .bh-096f-tl-pas:nth-child(even)::before { right: auto; left: calc(-1 * var(--e6) - 8px); }
}

/* onglets */
.bh-096f-onglets-barre { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e5); }
.bh-096f-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-096f-onglet[aria-selected="true"] { background: var(--c-primaire); color: var(--c-sur-primaire); }
.bh-096f-panneau .bh-096f-carte { font-size: var(--t2); }
.bh-096f-panneau .bh-096f-cs-image-gauche .bh-096f-c-media { flex-basis: 45%; }

/* accordéon */
.bh-096f-accordeon { display: grid; gap: var(--e3); max-width: 60rem; }
[data-alignement="centre"] .bh-096f-accordeon { margin-inline: auto; }
.bh-096f-acc { background: var(--carte-fond); color: var(--carte-encre); border: var(--carte-bord); border-radius: var(--r-carte); box-shadow: var(--o-carte); }
.bh-096f-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-096f-acc-corps { padding: 0 var(--e5) var(--e5); display: grid; gap: var(--e3); color: var(--carte-encre-2); }
.bh-096f-acc-corps a { color: var(--carte-lien); font-weight: 600; }

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

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

/* bandes pleine largeur */
.bh-096f-bandes { display: grid; border-top: 1px solid var(--c-bord); }
.bh-096f-bande { display: grid; gap: var(--e3); padding-block: var(--e6); border-bottom: 1px solid var(--c-bord); }
.bh-096f-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-096f-bande-titre a { text-decoration: none; color: inherit; }
.bh-096f-bande-titre a:hover { color: var(--c-primaire-texte); }
.bh-096f-bande-corps { display: grid; gap: var(--e2); color: var(--c-texte-2); }
.bh-096f-bande-corps .bh-096f-c-kicker { color: var(--c-primaire-texte); }
.bh-096f-bande-corps .bh-096f-c-p, .bh-096f-bande-corps .bh-096f-c-meta { color: var(--c-texte-2); }
@media (min-width: 1024px) { .bh-096f-bande { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: baseline; } }

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

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

/* défilant */
.bh-096f-defilant { display: grid; gap: var(--e4); overflow: hidden; }
.bh-096f-def-rang { overflow: hidden; white-space: nowrap; }
.bh-096f-def-piste { display: inline-flex; gap: var(--e7); animation: bh-096f-defile 70s linear infinite; }
.bh-096f-def-inverse .bh-096f-def-piste { animation-direction: reverse; }
.bh-096f-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-096f-def-mot:nth-child(3n+2) { color: var(--c-primaire-texte); }
@keyframes bh-096f-defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bh-096f-def-piste { animation: none; } }

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

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

/* ─── hero ─── */
.bh-096f-hero { height: calc(100svh - var(--header-h)); min-height: 0; padding-block: 0; position: relative; overflow: hidden; justify-content: flex-end; }
/* Meme specificite que .bh-096f-home .bh-096f-bloc (0,2,0) : cette regle gagne par l'ordre sur
   la regle generique des blocs. Jamais de plafond, ni min() ni max-height, a aucune largeur :
   le bas du hero tombe au bas de l'ecran a 1440, 820 et 390 px. */
.bh-096f-home .bh-096f-hero {
  height: calc(100svh - var(--header-h));
  min-height: 0; max-height: none;
  padding-block: 0; justify-content: flex-end;
}
.bh-096f-hero-kicker { font-size: var(--tm); text-transform: var(--f-casse-kicker); letter-spacing: .1em; font-weight: 600; margin-bottom: var(--e3); }
.bh-096f-home .bh-096f-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-096f-home .bh-096f-hero-accroche { font-size: var(--t2); max-width: 46ch; margin-bottom: var(--e5); }
.bh-096f-hero-actions { display: flex; flex-wrap: wrap; gap: var(--e3); }
.bh-096f-hero-titres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.bh-096f-hero-titres a { display: grid; gap: .15em; text-decoration: none; color: inherit; border-top: 1px solid currentColor; padding-top: var(--e2); }
.bh-096f-hero-titres a:hover span:last-child { text-decoration: underline; }
.bh-096f-hero-date { font-size: var(--tm); opacity: .85; }
.bh-096f-hero-titres span:last-child { font-weight: 600; }

.bh-096f-hero-plein-cadre .bh-096f-hero-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.bh-096f-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-096f-hero-bas { display: grid; gap: var(--e6); align-items: end; }
@media (min-width: 1024px) { .bh-096f-hero-bas { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
@media (max-width: 1023px) { .bh-096f-hero-plein-cadre .bh-096f-hero-titres { display: none; } }

.bh-096f-hero-scinde { display: grid; grid-template-rows: minmax(0, .9fr) minmax(0, 1.1fr); background: var(--c-fond); }
.bh-096f-hero-moitie { min-height: 0; margin: 0; }
.bh-096f-hero-gauche { display: flex; align-items: flex-end; padding: var(--e6) var(--e5); }
.bh-096f-hero-media { position: relative; order: -1; }
.bh-096f-hero-media img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.bh-096f-hero-media figcaption { position: absolute; left: var(--e4); bottom: var(--e4); right: var(--e4); }
.bh-096f-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-096f-hero-gauche .bh-096f-hero-kicker { color: var(--c-primaire-texte); }
@media (min-width: 1024px) {
  .bh-096f-hero-scinde { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .bh-096f-hero-media { order: 0; }
  .bh-096f-hero-gauche { padding: var(--e7) var(--e7) var(--e7) max(var(--e5), calc((100vw - var(--largeur)) / 2)); }
  .bh-096f-hero-gauche .bh-096f-hero-titres { margin-top: var(--e6); }
}
@media (max-width: 1023px) { .bh-096f-hero-scinde .bh-096f-hero-titres { display: none; } }

.bh-096f-hero-mosaique { background: var(--c-fond-2); }
.bh-096f-hero-grille { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--e4); padding: var(--e4); }
.bh-096f-hero-mosaique-img { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--e3); min-height: 0; order: -1; }
.bh-096f-hero-vignette { position: relative; overflow: hidden; border-radius: var(--r-image); min-height: 0; display: block; }
.bh-096f-hero-vignette img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.bh-096f-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-096f-hero-grille .bh-096f-hero-texte { padding: var(--e3) var(--e3) var(--e4); }
@media (min-width: 1024px) {
  .bh-096f-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-096f-hero-mosaique-img { order: 2; height: 100%; }
  .bh-096f-hero-vignette span { font-size: var(--t1); }
}
@media (max-width: 639px) { .bh-096f-hero-vignette span { display: none; } }

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

.bh-096f-hero-typo { background: var(--c-fond-2); }
.bh-096f-hero-typo-int { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-block: var(--e7); }
.bh-096f-hero-typo .bh-096f-hero-kicker { color: var(--c-primaire-texte); }
.bh-096f-home .bh-096f-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-096f-hero-typo-bas { display: grid; gap: var(--e5); align-items: end; border-top: 2px solid var(--c-texte); padding-top: var(--e5); }
.bh-096f-hero-titres-ligne { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .bh-096f-hero-typo-bas { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; }
  .bh-096f-hero-titres-ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) { .bh-096f-hero-typo .bh-096f-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-096f-home .bh-096f-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-096f-home .bh-096f-hero-voile .bh-096f-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-096f-home .bh-096f-hero-voile .bh-096f-bouton-2 { background: transparent !important; color: var(--c-sur-voile) !important; border: 2px solid var(--c-sur-voile); box-shadow: none; }
.bh-096f-home .bh-096f-hero-bande .bh-096f-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-096f-home .bh-096f-hero-bande .bh-096f-bouton-2 { background: transparent !important; color: var(--c-sur-primaire) !important; border: 2px solid var(--c-sur-primaire); box-shadow: none; }
.bh-096f-home .bh-096f-hero-bande :is(h1, h2, p, span, small, strong, li):not(.bh-096f-bouton, .bh-096f-bouton *) { color: var(--c-sur-primaire) !important; }

@media (max-width: 639px) {
  .bh-096f-home .bh-096f-bloc:not(.bh-096f-hero) { padding-block: var(--e7); }
  /* 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-096f-home .bh-096f-cs-image-gauche { flex-direction: column; }
  .bh-096f-cs-image-gauche .bh-096f-c-media { flex-basis: auto; }
  .bh-096f-cs-image-gauche .bh-096f-c-media img { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .bh-096f-home .bh-096f-hero-accroche { font-size: var(--t1); }
}

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

/* ─── reprises du 24/09 : bloc par bloc, jamais plus loin ───────────────────
   Chaque règle est portée par l'identifiant du bloc concerné. Les mises en page
   du même type (zigzag, magazine, bento, bandes, split) servent à plusieurs
   blocs : une règle non préfixée les toucherait toutes. */

/* 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. Même traitement que la vedette des articles. */
.bh-096f-b-une .bh-096f-cs-image-gauche { align-items: stretch; }
.bh-096f-b-une .bh-096f-cs-image-gauche .bh-096f-c-suite { margin-top: auto; }
@media (min-width: 1024px) {
  .bh-096f-b-une .bh-096f-zz .bh-096f-c-media { flex: 0 0 52%; }
  .bh-096f-b-une .bh-096f-zz .bh-096f-c-media img { aspect-ratio: auto; height: 100%; object-fit: cover; }
}

/* le lien « Lire l article » garde sa flèche sur la même ligne */
.bh-096f-home .bh-096f-c-suite { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; width: fit-content; }

/* ─── retours revue 26/09 (revue-auto-moto.com) ─────────────────────────────── */

/* Idées reçues : de vraies cartes (fond, bord, ombre), l'idée barrée d'une croix, la réalité
   cochée ; avant, du texte flottant sans boîte. */
.bh-096f-home .bh-096f-cs-idee { padding: 0; gap: 0; border: var(--carte-bord); border-radius: max(var(--r-carte), 6px); box-shadow: var(--o-carte, none); }
.bh-096f-cs-idee .bh-096f-ir-faux, .bh-096f-cs-idee .bh-096f-ir-vrai { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e3); padding: var(--e5); align-items: start; }
.bh-096f-cs-idee .bh-096f-ir-faux { background: color-mix(in srgb, var(--c-bord) 35%, var(--carte-fond)); border-bottom: 1px solid var(--c-bord); }
.bh-096f-cs-idee .bh-096f-ir-vrai { flex: 1; }
.bh-096f-ir-ico { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: 0 0 auto; }
.bh-096f-ir-ico svg { width: 1.25rem; height: 1.25rem; }
.bh-096f-ir-faux .bh-096f-ir-ico { background: var(--carte-encre-2); color: var(--carte-fond); }
.bh-096f-ir-vrai .bh-096f-ir-ico { background: var(--c-primaire); color: var(--c-sur-primaire); }
.bh-096f-ir-etiquette { display: block; font-size: var(--tm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--carte-encre-2); margin-bottom: .2em; }
.bh-096f-ir-vrai .bh-096f-ir-etiquette { color: var(--carte-lien); }
.bh-096f-ir-faux .bh-096f-c-titre { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--carte-encre) 45%, transparent); }

/* Repères : chaque chiffre a son icône, son sens et son lien (revue 26/09 : « un peu vide »). */
.bh-096f-cs-repere .bh-096f-rp-ico { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: color-mix(in srgb, var(--c-primaire) 14%, var(--carte-fond)); color: var(--carte-lien); }
.bh-096f-cs-repere .bh-096f-rp-ico svg { width: 1.35rem; height: 1.35rem; }
.bh-096f-cs-repere .bh-096f-c-chiffre { font-size: var(--t6); margin-top: var(--e2); }
.bh-096f-cs-repere .bh-096f-c-suite { margin-top: auto; }
.bh-096f-c-vedette.bh-096f-cs-repere { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: var(--e5); align-items: center; }
.bh-096f-c-vedette.bh-096f-cs-repere > * { margin: 0; }
.bh-096f-c-vedette.bh-096f-cs-repere .bh-096f-c-p, .bh-096f-c-vedette.bh-096f-cs-repere .bh-096f-c-suite { grid-column: 3; }
.bh-096f-c-vedette.bh-096f-cs-repere .bh-096f-c-label { grid-column: 3; font-size: var(--t2); }
.bh-096f-c-vedette.bh-096f-cs-repere .bh-096f-rp-ico { grid-row: 1 / span 3; }
.bh-096f-c-vedette.bh-096f-cs-repere .bh-096f-c-chiffre { grid-row: 1 / span 3; font-size: var(--t7); }
@media (max-width: 639px) {
  .bh-096f-c-vedette.bh-096f-cs-repere { grid-template-columns: auto minmax(0, 1fr); }
  .bh-096f-c-vedette.bh-096f-cs-repere .bh-096f-c-chiffre { grid-row: auto; grid-column: 2; font-size: var(--t6); }
  .bh-096f-c-vedette.bh-096f-cs-repere :is(.bh-096f-c-p, .bh-096f-c-suite, .bh-096f-c-label) { grid-column: 1 / -1; }
}

/* Avis : cartes citation lisibles, jamais plus étroites que 18rem ; la signature en pied. */
.bh-096f-home .bh-096f-cs-citation { gap: var(--e3); }
.bh-096f-cs-citation .bh-096f-c-citation p { margin: 0; }
.bh-096f-cs-citation .bh-096f-c-signature { margin-top: auto; padding-top: var(--e3); border-top: 1px solid var(--c-bord); }
.bh-096f-b-avis .bh-096f-c-vedette .bh-096f-c-citation { font-size: var(--t3); max-width: 60ch; }
@media (max-width: 639px) { .bh-096f-b-avis .bh-096f-c-vedette .bh-096f-c-citation, .bh-096f-c-vedette .bh-096f-c-citation { font-size: var(--t2); } }
.bh-096f-b-avis .bh-096f-grille { align-items: stretch; }

/* Le hero garde son écran plein quoi que le builder pose comme hauteur : sans le min-height général
   des blocs (retiré le 26/09), un hero calculé « écran moins header moins bandeau » s'arrêtait 44 px
   trop haut alors que le bandeau est DANS le header (portier_da da_hauteurs, revue-auto-moto). */
.bh-096f-home .bh-096f-bloc.bh-096f-hero { min-height: calc(100svh - var(--header-h)); }

/* Recopié de correctifs.css (revue 26/09) : les sites neufs l'ont dès la composition. */
/* Parcours / frise : une vignette à côté du texte, jamais une photo pleine largeur par étape
   (journal-entreprise, bloc parcours : trois photos de 1298 x 812 px à la suite, revue 26/09). */
.bh-096f-timeline .bh-096f-c-media img, .bh-096f-b-parcours .bh-096f-c-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 320px; object-fit: cover; }
@media (min-width: 900px) {
  .bh-096f-timeline .bh-096f-carte:has(> .bh-096f-c-media) { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--e5); align-items: start; }
  .bh-096f-timeline .bh-096f-carte:has(> .bh-096f-c-media) > .bh-096f-c-media { margin: 0; }
}

/* Vrai ou faux : une affirmation à la fois (kit_vivant), cinq habillages (revue 26/09). */
.bh-096f-quiz { max-width: 46rem; margin-inline: auto; display: grid; gap: var(--e4); }
.bh-096f-quiz-q { padding: var(--e5); }
.bh-096f-quiz-affirmation { font-family: var(--f-titre, inherit); font-size: var(--t3, 1.35rem); font-weight: 700; line-height: 1.25; margin: 0; }
.bh-096f-quiz-verdict { font-weight: 800; margin: var(--e3) 0 .25rem; }
.bh-096f-quiz-expl { margin-top: var(--e3); }
.bh-096f-quiz-score:empty { display: none; }
.bh-096f-quiz-bandes .bh-096f-quiz-q { border-left: 6px solid var(--c-primaire, currentColor); border-radius: 0; box-shadow: none; }
.bh-096f-quiz-plein .bh-096f-quiz-q { background: var(--c-primaire); color: var(--c-sur-primaire, var(--c-fond)); text-align: center; }
.bh-096f-quiz-plein .kv-choix { justify-content: center; }
.bh-096f-quiz-plein .kv-bouton { color: inherit; border-color: currentColor; }
.bh-096f-quiz-split { max-width: none; }
@media (min-width: 900px) {
  .bh-096f-quiz-split .bh-096f-quiz-q { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--e6); align-items: start; }
  .bh-096f-quiz-split .bh-096f-quiz-q > * { grid-column: 2; }
  .bh-096f-quiz-split .bh-096f-quiz-q > .bh-096f-quiz-affirmation { grid-column: 1; grid-row: 1 / span 3; font-size: var(--t4, 1.6rem); }
}
.bh-096f-quiz-compact { max-width: 38rem; }
.bh-096f-quiz-compact .bh-096f-quiz-affirmation { font-size: var(--t2, 1.1rem); }

/* Pastilles de sujets : une vraie pastille cliquable, en nuage centré, jamais une barre grise plate
   (revue 26/09, journal-entreprise). */
.bh-096f-b-sujets .bh-096f-mur { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e3); }
.bh-096f-b-sujets .bh-096f-mur-col { display: contents; }
.bh-096f-b-sujets .bh-096f-carte.bh-096f-cs-pastille { background: transparent; border: 0; box-shadow: none; padding: 0; width: auto; }
.bh-096f-c-pastille {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .55em 1.2em;
  border-radius: 999px; border: 1.5px solid var(--c-primaire); background: var(--carte-fond);
  color: var(--c-primaire-texte, var(--carte-encre)); text-decoration: none; font-weight: 600; cursor: pointer;
  transition: background .2s, color .2s, transform .15s;
}
.bh-096f-c-pastille::after { content: "\2192"; font-weight: 400; }
.bh-096f-c-pastille:hover, .bh-096f-c-pastille:focus-visible { background: var(--c-primaire); color: var(--c-sur-primaire); transform: translateY(-1px); }

/* Hero : les boutons ne touchent jamais le texte voisin (revue 26/09, journal-entreprise : collés au 3e titre). */
.bh-096f-hero-actions { margin-top: var(--e5); }

/* ==========================================================================
   Correctifs du portier (tour 3). Aucune couleur littérale : tout passe par
   les jetons --c-*. Ce fichier n'est pas recopié au build, c'est la source.
   ========================================================================== */

/* L'attribut hidden doit gagner contre les display des cartes du thème. */
.bh-096f-home [hidden] { display: none !important; }

/* --- hero : pleine hauteur d'écran sous le header, à toutes les largeurs --- */
.bh-096f-hero.bh-096f-hero-scinde { padding: 0; max-height: none; min-height: calc(100svh - var(--header-h, 72px)); }
.bh-096f-hero-gauche { align-items: center; }
.bh-096f-hero-actions { margin-top: var(--e5); }
@media (max-width: 1023px) {
  /* le texte n'est plus rogné : la photo garde sa moitié, le texte la sienne */
  .bh-096f-hero-scinde { grid-template-rows: minmax(0, .85fr) minmax(0, 1.15fr); }
  .bh-096f-hero-media { order: -1; }
  .bh-096f-hero-gauche { padding: var(--e5); }
  .bh-096f-hero-h1 { font-size: clamp(1.7rem, 7.4vw, 2.5rem); line-height: 1.06; }
  .bh-096f-hero-accroche { font-size: 1rem; }
  .hm-hero-file { display: none; }
}

/* --- carte terracotta du bloc maison : encre claire et bouton lisible --- */
[data-usine-bloc="maison"] .bh-096f-split-texte :is(.bh-096f-num, .bh-096f-kicker, .bh-096f-h2, .bh-096f-split-grand, p) {
  color: var(--c-sur-primaire) !important;
}
[data-usine-bloc="maison"] .bh-096f-split-texte .bh-096f-bouton-1 {
  background: var(--c-sur-primaire);
  border-color: var(--c-sur-primaire);
  color: var(--c-primaire-texte);
}
[data-usine-bloc="maison"] .bh-096f-split-media img { height: auto; aspect-ratio: 4 / 3; max-height: 30rem; }

/* --- cartes à image : bord franc net et marge interne du texte --- */
.bh-096f-c-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hm-carrousel .bh-096f-c-corps,
[data-usine-bloc="incontournables"] .bh-096f-c-corps { padding: var(--e4) var(--e4) var(--e5); }
.hm-plus { margin: var(--e6) 0 0; }

/* --- carrousel : sorti du bord, fondu sur le dernier tiers --- */
.hm-carrousel-cadre { position: relative; }
.hm-carrousel-cadre::after {
  content: ""; position: absolute; inset-block: 0; right: 0; width: clamp(2rem, 7vw, 5rem);
  background: linear-gradient(to right, transparent, var(--c-fond));
  pointer-events: none;
}
.hm-carrousel { padding-inline: 2px; scrollbar-width: thin; }

/* --- étapes : la photo du kit, en vignette de parcours --- */
img[data-etapes-visuel] {
  width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 320px;
  object-fit: cover; border-radius: var(--r-image);
}
[data-usine-bloc="etapes"] .bh-096f-split { align-items: start; }
[data-usine-bloc="etapes"] .bh-096f-split-media { align-self: start; }
.hm-frise-courte { margin-top: var(--e6); }
.hm-frise-courte .bh-096f-c-titre { font-size: var(--t2); }

/* --- calculateur : le Lottie passe sous les chiffres en dessous de 900 px --- */
@media (max-width: 900px) { .hm-chiffres { grid-template-columns: minmax(0, 1fr); } }

/* --- sous-blocs du manifeste : même rythme que les blocs numérotés --- */
.bh-096f-sous {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--c-bord);
}

/* --- quiz : carte pleine largeur, compteur et « Suivante » dedans --- */
.hm-quiz-carte { max-width: none; margin-inline: 0; padding: var(--e5); }
.hm-quiz-carte [data-question] { padding: var(--e4) 0; border-bottom: 1px solid var(--c-bord); }
.hm-quiz-carte [data-question]:last-of-type { border-bottom: 0; }
.hm-quiz-carte .bh-096f-quiz-affirmation { margin: 0 0 var(--e2); font-family: var(--f-titre); font-size: var(--t3); font-weight: 700; }

/* --- avant / après : une photo, deux vues superposées, poignée bornée au cadre --- */
.hm-avant-apres { position: relative; width: 100%; }
.hm-avant-apres img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; object-fit: cover;
}
/* L'avant est la copie traitée de l'après : le filtre du kit (kit-vivant.css) doit
   s'appliquer, sinon les deux vues sont identiques et le curseur ne montre rien. */

/* --- marques : un logotype par marque, son nom dessous --- */
/* Spécificité au-dessus de `[data-defile] img` du kit (36 px) : 30 px, dans la fourchette 28-32 px. */
.hm-marques [data-defile] img.hm-marque-logo { height: 30px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .8; }
.hm-marques [data-defile] img.hm-marque-logo:hover { filter: none; opacity: 1; }

/* --- mot de la rédaction : signature --- */
.hm-signature { display: flex; align-items: center; gap: var(--e3); }

/* --- boîte CTA sombre de fin de page --- */
.hm-cta {
  display: grid; gap: var(--e4); border-radius: var(--r-carte);
  background: var(--c-voile); color: var(--c-sur-voile);
  padding: clamp(1.8rem, 4vw, 3.2rem);
}
.hm-cta h2 { margin: 0; color: var(--c-sur-voile); font-family: var(--f-titre); font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.08; }
.hm-cta p { margin: 0; max-width: 62ch; color: color-mix(in srgb, var(--c-sur-voile) 84%, var(--c-voile)); }
.hm-cta .bh-096f-bouton-2 { color: var(--c-sur-voile); border-color: color-mix(in srgb, var(--c-sur-voile) 55%, transparent); }
.hm-cta .bh-096f-bouton-2:hover { background: var(--c-sur-voile); color: var(--c-voile); }

/* Consigne du portier : aucun élément collant plus haut que 200 px. La photo des étapes
   (320 px) et l'en-tête du bloc auteurs (266 px) sont donc remis dans le flux. */
@media (min-width: 900px) { [data-etapes] [data-etapes-visuel] { position: static; } }
.bh-096f-home .bh-096f-d-colle .bh-096f-entete { position: static; }

/* ==========================================================================
   Correctifs du portier (tour 4). Aucune couleur littérale : tout passe par
   les jetons --c-*. Ce fichier n'est pas recopié au build, c'est la source.
   ========================================================================== */

/* --- hero sous 640 px : la pile du thème, le texte d'abord, la photo ensuite.
   L'ordre du thème est conservé (kicker, H1, accroche, bouton plein, bouton
   contour, file des trois derniers titres) et le hero fait toute la hauteur. --- */
@media (max-width: 639px) {
  .bh-096f-home .bh-096f-hero.bh-096f-hero-scinde {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: calc(100svh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    max-height: none;
  }
  .bh-096f-hero-scinde .bh-096f-hero-gauche { order: -1; align-items: flex-start; padding: var(--e5); }
  .bh-096f-hero-scinde .bh-096f-hero-media { order: 0; }
  .bh-096f-home .bh-096f-hero-scinde .bh-096f-hero-h1 { font-size: clamp(1.75rem, 7.2vw, 2.4rem); }
  .bh-096f-home .bh-096f-hero-scinde .bh-096f-hero-accroche { font-size: 1rem; margin-bottom: var(--e4); }
  .bh-096f-hero-scinde .bh-096f-hero-actions { gap: var(--e2); }
  .bh-096f-home .bh-096f-hero-scinde .hm-hero-file { display: grid; margin-top: var(--e4); gap: var(--e2); max-width: none; }
  .bh-096f-home .bh-096f-hero-scinde .hm-hero-file a { padding-top: var(--e1); }
  .bh-096f-home .bh-096f-hero-scinde .hm-hero-file-date { font-size: .72rem; }
  .bh-096f-home .bh-096f-hero-scinde .hm-hero-file-titre { font-size: .95rem; line-height: 1.25; }
}

/* --- carte terre cuite du bloc maison : une seule encre, claire, du numéro au titre --- */
[data-usine-bloc="maison"] .bh-096f-split-texte :is(h2, p, span, strong, .bh-096f-num, .bh-096f-kicker, .bh-096f-c-p) {
  color: var(--c-sur-primaire);
}
/* L'accroche redevient un paragraphe : deux titres empilés se lisaient comme un doublon. */
[data-usine-bloc="maison"] .bh-096f-split-texte .bh-096f-split-grand {
  font-family: var(--f-texte); font-size: var(--t2); font-weight: 400; line-height: 1.6; max-width: 46ch;
}

/* --- carrousel : rail tenu dans la gouttière, bord fondu, deux flèches en haut à droite --- */
[data-usine-bloc="articles"] .hm-carrousel-cadre::after { display: none; }
.hm-carrousel {
  padding-inline: 0;
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 3.5rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 3.5rem), transparent 100%);
}
.hm-carrousel-nav { display: flex; gap: var(--e3); justify-content: flex-end; margin: 0 0 var(--e4); }
.hm-carrousel-nav button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--c-surface); border: 1px solid var(--c-bord); color: var(--c-primaire-texte);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hm-carrousel-nav button:hover { background: var(--c-primaire); border-color: var(--c-primaire); color: var(--c-sur-primaire); }
.hm-carrousel-nav svg { width: 20px; height: 20px; }
.hm-ico-retour { transform: scaleX(-1); }

/* --- pas à pas : le panneau photo fait la hauteur des étapes, la vignette suit la lecture --- */
[data-usine-bloc="etapes"] .bh-096f-split { align-items: stretch; }
[data-usine-bloc="etapes"] .hm-etapes-media {
  align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e3); margin: 0; padding: var(--e4);
  background: var(--c-fond-2); border: 1px solid var(--c-bord); border-radius: var(--r-image);
}
[data-usine-bloc="etapes"] .hm-etapes-media .bh-096f-c-legende { margin: 0; text-align: center; }
.hm-etapes-compteur {
  margin: 0; font-family: var(--f-titre); font-weight: 700; font-size: var(--t2); color: var(--c-primaire-texte);
}
/* L'étape active se marque par la bordure et l'ombre, plus par une opacité qui diluait le
   texte des autres étapes sous le seuil AA sur fond blanc. */
[data-usine-bloc="etapes"] [data-etape] { opacity: 1; transition: border-color .25s ease, box-shadow .25s ease; }
[data-usine-bloc="etapes"] [data-etape].kv-actif { transform: none; border-color: var(--c-primaire); box-shadow: var(--o-carte); }

/* --- avant / après : cadre a la largeur du bloc, hauteur plafonnee au socle --- */
/* Le socle interdit une image de bloc de home de plus de 480 px de haut : 30rem = 480 px
   exactement. Au-dessus de 720 px de large, le cadre fait donc la largeur du bloc
   (1160 x 480 a 1440 px, ratio 2.4:1) ; en dessous, il reprend le 3/2 de la photo. */
.hm-avant-apres {
  width: 100%; max-width: none; margin-inline: 0; aspect-ratio: auto;
  height: min(30rem, 62vw); overflow: hidden; border-radius: var(--r-image);
}
@media (max-width: 720px) {
  .hm-avant-apres { height: auto; aspect-ratio: 3 / 2; }
}
.hm-avant-apres .hm-ap-poignee {
  position: absolute; top: 50%; left: var(--kv-coupe, 50%); transform: translate(-50%, -50%);
  z-index: 3; pointer-events: none; display: inline-flex; align-items: center; justify-content: center;
  gap: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-surface); border: 1px solid var(--c-bord); color: var(--c-primaire-texte);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--c-ombre) 55%, transparent);
}
.hm-avant-apres .hm-ap-poignee svg { width: 18px; height: 18px; }
.hm-avant-apres .hm-ap-poignee svg:first-child { transform: scaleX(-1); }

/* --- étapes inactives : encre --c-texte-2 (#78504a), jamais une opacité sous AA --- */
[data-usine-bloc="etapes"] [data-etape]:not(.kv-actif) :is(h3, h4, p, span, strong) { color: var(--c-texte-2); }
[data-usine-bloc="etapes"] [data-etape].kv-actif :is(h3, h4, p, span, strong) { color: var(--c-texte); }

/* --- incontournables : le visuel est peint au premier rendu, hors de tout conteneur animé --- */
.hm-incontournable-media { background: var(--c-fond-2); overflow: hidden; }
.hm-incontournable-media .bh-096f-c-img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; opacity: 1; filter: none;
}

/* --- cartes à image : un fond de carte plutôt qu'un rectangle blanc si le décodage traîne --- */
.bh-096f-c-img { background: var(--c-fond-2); }

/* Le cadre avant / apres ne peut jamais se lire comme un rectangle blanc : tant que la photo
   d'avant (loading=lazy) n'est pas peinte, c'est le fond doux qui occupe la place. */
.hm-avant-apres { background: var(--c-fond-2); }