:root {
  --f-titre: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-graisse-titre: 500;
  --f-casse-kicker: uppercase;
  --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(1.9rem, 4.2vw, 3rem);
  --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: 1rem;
  --r-bouton: 999px;
  --r-image: 1rem;
  --largeur: 1100px;
  --ico-trait: 1.75;
  --header-h: 72px;
  --c-fond: #f7f8f3;
  --c-fond-2: #efece2;
  --c-surface: #ffffff;
  --c-texte: #102a2b;
  --c-texte-2: #5e7473;
  --c-primaire: #1f6b58;
  --c-sur-primaire: #ffffff;
  --c-secondaire: #e8795f;
  --c-sur-secondaire: #102a2b;
  --c-primaire-texte: #15483d;
  --c-secondaire-texte: #c9543c;
  --c-doux: #e9f0ec;
  --c-sur-doux: #102a2b;
  --c-bord: #dce5df;
  --c-voile: #102a2b;
  --c-sur-voile: #ffffff;
  --c-ombre: #102a2b;
  --o-carte: 0 1px 2px rgba(16, 42, 43, .06);
  --o-survol: 0 18px 40px -20px rgba(16, 42, 43, .35);
  --carte-fond: #ffffff;
  --carte-encre: #102a2b;
  --carte-encre-2: #5e7473;
  --carte-lien: #1f6b58;
  --carte-bord: 1px solid #dce5df;
  --btn-fond: #1f6b58;
  --btn-texte: #ffffff;
  --btn-bord: 2px solid #1f6b58;
  --btn-ombre: none;
  --btn-deco: none;
  --lien-couleur: #15483d;
  --lien-deco: underline;
  --lien-epaisseur: 2px;
  --lien-fond: transparent;
  --lien-fond-encre: #1f6b58;
}

/* 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-858b-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-858b-home *, .bh-858b-home *::before, .bh-858b-home *::after { box-sizing: border-box; }
.bh-858b-home * { min-width: 0; }
.bh-858b-home :is(a, p, span, small) { opacity: 1; }
.bh-858b-home img { max-width: 100%; display: block; }
.bh-858b-home a { color: inherit !important; }
.bh-858b-home :is(h1, h2, h3, h4, blockquote) { color: inherit; }
.bh-858b-home p { margin: 0; }
.bh-858b-home h2, .bh-858b-home h3 { margin: 0; }
.bh-858b-home .bh-858b-h2 { color: var(--c-texte) !important; }
.bh-858b-home .bh-858b-intro { color: var(--c-texte) !important; }
.bh-858b-home :is(.bh-858b-kicker, .bh-858b-num) { color: var(--c-texte) !important; }
.bh-858b-home .bh-858b-c-p { color: var(--carte-encre) !important; }
.bh-858b-home :is(.bh-858b-c-titre, .bh-858b-c-meta, .bh-858b-c-kicker, .bh-858b-c-suite) { color: var(--carte-encre) !important; }
.bh-858b-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 Cedia 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). */
.bh-858b-home .bh-858b-bloc {
  display: flex; flex-direction: column;
  justify-content: flex-start; padding-block: var(--e8); background: var(--c-fond) !important; color: var(--c-texte) !important;
}
.bh-858b-home .bh-858b-fond-b { background: var(--c-fond-2) !important; }
.bh-858b-home .bh-858b-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-858b-home. */
.bh-858b-home { --btn-texte-racine: var(--btn-texte); --btn-bord-racine: var(--btn-bord); --carte-lien-racine: var(--carte-lien); }
.bh-858b-home .bh-858b-fond-doux { --carte-lien: var(--c-sur-doux); --lien-couleur: var(--c-sur-doux); --lien-fond-encre: var(--c-sur-doux); }
.bh-858b-home:is([data-bouton="contour"], [data-bouton="souligne"]) .bh-858b-fond-doux { --btn-texte: var(--c-sur-doux); }
.bh-858b-home[data-bouton="contour"] .bh-858b-fond-doux { --btn-bord: 2px solid var(--c-sur-doux); }
.bh-858b-home .bh-858b-fond-doux :is(.bh-858b-carte, .bh-858b-acc) {
  --carte-lien: var(--carte-lien-racine); --btn-texte: var(--btn-texte-racine); --btn-bord: var(--btn-bord-racine);
}
.bh-858b-int { width: min(100% - 2 * var(--e5), var(--largeur)); margin-inline: auto; }

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

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

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

.bh-858b-cs-texte, .bh-858b-cs-qr, .bh-858b-cs-fait, .bh-858b-cs-citation { padding: var(--e5); gap: var(--e3); }
/* Les formes de carte sont préfixées par .bh-858b-home : sans cela elles restaient à
   (0,1,0) sous `.bh-858b-home .bh-858b-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-858b-c-corps hors de la carte : `align-self: stretch` étire la photo
   sans écraser le texte. */
.bh-858b-home .bh-858b-cs-image-gauche { flex-direction: row; }
.bh-858b-cs-image-gauche .bh-858b-c-media { flex: 0 0 38%; align-self: stretch; min-height: 0; }
.bh-858b-cs-image-gauche .bh-858b-c-media img { width: 100%; height: 100%; min-height: 9rem; object-fit: cover; }
.bh-858b-cs-superpose { min-height: 15rem; justify-content: flex-end; }
.bh-858b-cs-superpose .bh-858b-c-img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.bh-858b-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-858b-c-voile .bh-858b-c-titre, .bh-858b-c-voile .bh-858b-c-kicker, .bh-858b-c-voile .bh-858b-c-meta { color: var(--c-sur-voile); }
.bh-858b-c-vedette .bh-858b-c-titre { font-size: var(--t4); }
.bh-858b-cs-portrait { align-items: flex-start; }
.bh-858b-c-avatar { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; margin: var(--e5) var(--e5) 0; }
.bh-858b-c-vedette .bh-858b-c-avatar { width: 9rem; height: 9rem; }
.bh-858b-cs-numero .bh-858b-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-858b-home .bh-858b-cs-ligne { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--e4); }
.bh-858b-cs-ligne .bh-858b-c-corps { padding-block: var(--e4); }
.bh-858b-c-fleche {
  display: inline-flex; align-items: center; padding: var(--e4); text-decoration: none;
  font-size: var(--t3); color: var(--carte-lien);
}
.bh-858b-cs-pastille { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.bh-858b-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-858b-c-pastille small { color: var(--carte-encre-2); font-weight: 400; }
.bh-858b-c-pastille:hover { background: var(--c-primaire); color: var(--c-sur-primaire); }
.bh-858b-c-pastille:hover small { color: var(--c-sur-primaire); }
.bh-858b-c-citation { margin: 0; font-family: var(--f-titre); font-size: var(--t2); line-height: 1.45; }
.bh-858b-c-vedette .bh-858b-c-citation { font-size: var(--t4); }
.bh-858b-c-signature { display: grid; gap: .1em; font-size: var(--tm); color: var(--carte-encre-2); }
.bh-858b-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-858b-etoiles { letter-spacing: .15em; font-size: var(--t1); display: flex; align-items: center; gap: .15em; flex-wrap: nowrap; margin: 0; line-height: 1; }
.bh-858b-etoiles svg { display: inline-block; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; color: var(--carte-lien); }
.bh-858b-etoile { color: var(--carte-lien); }
.bh-858b-etoiles .bh-858b-etoile-vide { color: var(--c-bord); }
.bh-858b-etoiles-vides { display: inline-flex; gap: .15em; }
.bh-858b-etoiles-pleines { color: var(--carte-lien); }
.bh-858b-etoiles-vides { color: var(--c-bord); }
.bh-858b-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-858b-c-label { font-weight: 600; }
/* La carte image seule n'a pas de chrome : l'image EST la carte. Il faut .bh-858b-home et
   !important, sinon `.bh-858b-home .bh-858b-carte` (0,2,0, `background: var(--carte-fond)
   !important`) repeint la carte et le texte de la légende se retrouve collé à son bord
   gauche (decorateur-maison.com 28/09, contrôle home:cartes-marge-interne). */
.bh-858b-home .bh-858b-cs-image-seule { background: transparent !important; border: 0; box-shadow: none; gap: var(--e2); }
.bh-858b-cs-image-seule img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-image); }
.bh-858b-c-legende { font-size: var(--tm); color: var(--c-texte-2); }

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

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

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

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

/* timeline = frise vivante (Cedia 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-858b-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-858b-home .bh-858b-timeline[data-frise] { border-left: 0; padding: 0 0 0 calc(var(--e7) + .25rem); position: relative; }
.bh-858b-home .bh-858b-timeline[data-frise]::before, .bh-858b-home .bh-858b-timeline[data-frise]::after {
  content: ""; position: absolute; left: calc(var(--e5) - 2px); top: .5rem; width: 4px; border-radius: 4px; }
.bh-858b-home .bh-858b-timeline[data-frise]::before { bottom: .5rem; height: auto; background: var(--c-bord); }
.bh-858b-home .bh-858b-timeline[data-frise]::after { height: calc((100% - 1rem) * var(--kv-progression, 1)); background: var(--c-primaire); transition: height .2s linear; }
.bh-858b-home .bh-858b-timeline[data-frise] > .bh-858b-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-858b-home .bh-858b-timeline[data-frise] > .bh-858b-tl-pas.kv-atteint::before { border-color: var(--c-primaire); background: var(--c-primaire); }
.bh-858b-home .bh-858b-timeline[data-frise] > [data-jalon]::after { content: none; }
.bh-858b-home .bh-858b-timeline[data-frise] .bh-858b-carte { transition: transform .3s ease, box-shadow .3s ease; }
.bh-858b-home .bh-858b-timeline[data-frise] > .kv-atteint .bh-858b-carte { box-shadow: var(--o-survol); }
.bh-858b-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-858b-home .bh-858b-carte .bh-858b-c-echeance { color: var(--c-sur-primaire) !important; }
.bh-858b-cs-jalon, .bh-858b-cs-repere { padding: var(--e5); gap: var(--e3); }
.bh-858b-tl-pas { position: relative; }
.bh-858b-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-858b-tl-alterne { border-left: 0; padding: 0; position: relative; }
  .bh-858b-tl-alterne::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px solid var(--c-bord); }
  .bh-858b-tl-alterne .bh-858b-tl-pas { width: calc(50% - var(--e6)); }
  .bh-858b-tl-alterne .bh-858b-tl-pas:nth-child(even) { margin-left: calc(50% + var(--e6)); }
  .bh-858b-tl-alterne .bh-858b-tl-pas::before { left: auto; right: calc(-1 * var(--e6) - 8px); }
  .bh-858b-tl-alterne .bh-858b-tl-pas:nth-child(even)::before { right: auto; left: calc(-1 * var(--e6) - 8px); }
}

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

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

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

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

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

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

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

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

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

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

/* ─── hero ─── */
.bh-858b-hero { height: calc(100svh - var(--header-h)); min-height: 0; padding-block: 0; position: relative; overflow: hidden; justify-content: flex-end; }
.bh-858b-hero-kicker { font-size: var(--tm); text-transform: var(--f-casse-kicker); letter-spacing: .1em; font-weight: 600; margin-bottom: var(--e3); }
.bh-858b-home .bh-858b-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-858b-home .bh-858b-hero-accroche { font-size: var(--t2); max-width: 46ch; margin-bottom: var(--e5); }
.bh-858b-hero-actions { display: flex; flex-wrap: wrap; gap: var(--e3); }
.bh-858b-hero-titres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.bh-858b-hero-titres a { display: grid; gap: .15em; text-decoration: none; color: inherit; border-top: 1px solid currentColor; padding-top: var(--e2); }
.bh-858b-hero-titres a:hover span:last-child { text-decoration: underline; }
.bh-858b-hero-date { font-size: var(--tm); opacity: .85; }
.bh-858b-hero-titres span:last-child { font-weight: 600; }

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

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

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

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

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

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

/* ─── garde-fous de largeur : une grille ne s'élargit jamais sur le contenu ─── */
.bh-858b-rail, .bh-858b-split, .bh-858b-magazine, .bh-858b-zigzag, .bh-858b-bandes, .bh-858b-pile, .bh-858b-d-colle .bh-858b-int, .bh-858b-split-liste,
.bh-858b-colle-liste, .bh-858b-accordeon, .bh-858b-timeline { grid-template-columns: minmax(0, 1fr); }
.bh-858b-carte, .bh-858b-bande, .bh-858b-acc { overflow-wrap: anywhere; }
.bh-858b-cs-ligne .bh-858b-c-corps { min-width: 0; }
@media (min-width: 1024px) {
  .bh-858b-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bh-858b-magazine { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .bh-858b-d-colle .bh-858b-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-858b-b-une .bh-858b-cs-image-gauche { align-items: stretch; }
.bh-858b-b-une .bh-858b-cs-image-gauche .bh-858b-c-suite { margin-top: auto; }
@media (min-width: 1024px) {
  .bh-858b-b-une .bh-858b-zz .bh-858b-c-media { flex: 0 0 52%; }
  .bh-858b-b-une .bh-858b-zz .bh-858b-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-858b-home .bh-858b-c-suite { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; width: fit-content; }

/* ─── retours Cedia 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-858b-home .bh-858b-cs-idee { padding: 0; gap: 0; border: var(--carte-bord); border-radius: max(var(--r-carte), 6px); box-shadow: var(--o-carte, none); }
.bh-858b-cs-idee .bh-858b-ir-faux, .bh-858b-cs-idee .bh-858b-ir-vrai { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e3); padding: var(--e5); align-items: start; }
.bh-858b-cs-idee .bh-858b-ir-faux { background: color-mix(in srgb, var(--c-bord) 35%, var(--carte-fond)); border-bottom: 1px solid var(--c-bord); }
.bh-858b-cs-idee .bh-858b-ir-vrai { flex: 1; }
.bh-858b-ir-ico { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: 0 0 auto; }
.bh-858b-ir-ico svg { width: 1.25rem; height: 1.25rem; }
.bh-858b-ir-faux .bh-858b-ir-ico { background: var(--carte-encre-2); color: var(--carte-fond); }
.bh-858b-ir-vrai .bh-858b-ir-ico { background: var(--c-primaire); color: var(--c-sur-primaire); }
.bh-858b-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-858b-ir-vrai .bh-858b-ir-etiquette { color: var(--carte-lien); }
.bh-858b-ir-faux .bh-858b-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 (Cedia 26/09 : « un peu vide »). */
.bh-858b-cs-repere .bh-858b-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-858b-cs-repere .bh-858b-rp-ico svg { width: 1.35rem; height: 1.35rem; }
.bh-858b-cs-repere .bh-858b-c-chiffre { font-size: var(--t6); margin-top: var(--e2); }
.bh-858b-cs-repere .bh-858b-c-suite { margin-top: auto; }
.bh-858b-c-vedette.bh-858b-cs-repere { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: var(--e5); align-items: center; }
.bh-858b-c-vedette.bh-858b-cs-repere > * { margin: 0; }
.bh-858b-c-vedette.bh-858b-cs-repere .bh-858b-c-p, .bh-858b-c-vedette.bh-858b-cs-repere .bh-858b-c-suite { grid-column: 3; }
.bh-858b-c-vedette.bh-858b-cs-repere .bh-858b-c-label { grid-column: 3; font-size: var(--t2); }
.bh-858b-c-vedette.bh-858b-cs-repere .bh-858b-rp-ico { grid-row: 1 / span 3; }
.bh-858b-c-vedette.bh-858b-cs-repere .bh-858b-c-chiffre { grid-row: 1 / span 3; font-size: var(--t7); }
@media (max-width: 639px) {
  .bh-858b-c-vedette.bh-858b-cs-repere { grid-template-columns: auto minmax(0, 1fr); }
  .bh-858b-c-vedette.bh-858b-cs-repere .bh-858b-c-chiffre { grid-row: auto; grid-column: 2; font-size: var(--t6); }
  .bh-858b-c-vedette.bh-858b-cs-repere :is(.bh-858b-c-p, .bh-858b-c-suite, .bh-858b-c-label) { grid-column: 1 / -1; }
}

/* Avis : cartes citation lisibles, jamais plus étroites que 18rem ; la signature en pied. */
.bh-858b-home .bh-858b-cs-citation { gap: var(--e3); }
.bh-858b-cs-citation .bh-858b-c-citation p { margin: 0; }
.bh-858b-cs-citation .bh-858b-c-signature { margin-top: auto; padding-top: var(--e3); border-top: 1px solid var(--c-bord); }
.bh-858b-b-avis .bh-858b-c-vedette .bh-858b-c-citation { font-size: var(--t3); max-width: 60ch; }
@media (max-width: 639px) { .bh-858b-b-avis .bh-858b-c-vedette .bh-858b-c-citation, .bh-858b-c-vedette .bh-858b-c-citation { font-size: var(--t2); } }
.bh-858b-b-avis .bh-858b-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-858b-home .bh-858b-bloc.bh-858b-hero { min-height: calc(100svh - var(--header-h)); }

/* Recopié de correctifs.css (Cedia 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, Cedia 26/09). */
.bh-858b-timeline .bh-858b-c-media img, .bh-858b-b-parcours .bh-858b-c-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 320px; object-fit: cover; }
@media (min-width: 900px) {
  .bh-858b-timeline .bh-858b-carte:has(> .bh-858b-c-media) { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--e5); align-items: start; }
  .bh-858b-timeline .bh-858b-carte:has(> .bh-858b-c-media) > .bh-858b-c-media { margin: 0; }
}

/* Tête compacte (portier 4) : le header passe sous 200 px sans rien perdre du socle.
   Sont serrées les seules marges intérieures — bandeau et boîte du lockup. Restent
   intacts : le logo (44 px à 1440, 34 px à 390), les 24 px entre logo, menu et bouton,
   la hauteur de 44 px des liens et du bouton du menu, et l'ancrage du bandeau aux deux
   bords. Aucune structure ni aucune classe du bloc validé ne change. */
header.bh-858b-tete .bh-858b-tete-bandeau { padding-block: 6px; font-size: 13px; line-height: 1.2; }
header.bh-858b-tete .bh-858b-tete-bandeau-int { min-height: 32px; padding-block: 2px; gap: var(--e2); line-height: 1.2; }
header.bh-858b-tete .bh-858b-tete-int { padding-block: 6px; }
header.bh-858b-tete .bh-858b-tete-logo { display: flex; align-items: center; line-height: 0; }

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

/* Pastilles de sujets : une vraie pastille cliquable, en nuage centré, jamais une barre grise plate
   (Cedia 26/09, journal-entreprise). */
.bh-858b-b-sujets .bh-858b-mur { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e3); }
.bh-858b-b-sujets .bh-858b-mur-col { display: contents; }
.bh-858b-b-sujets .bh-858b-carte.bh-858b-cs-pastille { background: transparent; border: 0; box-shadow: none; padding: 0; width: auto; }
.bh-858b-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-858b-c-pastille::after { content: "\2192"; font-weight: 400; }
.bh-858b-c-pastille:hover, .bh-858b-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 (Cedia 26/09, journal-entreprise : collés au 3e titre). */
.bh-858b-hero-actions { margin-top: var(--e5); }

/* 28/09 decorateur-maison : sur le hero plein cadre, tout le texte est sur la photo voilée ; les couleurs du hero
   scindé (hero-gauche, kicker primaire, H1 foncé) le rendaient illisible. */
.bh-858b-home .bh-858b-hero-plein-cadre :is(.bh-858b-hero-kicker, .bh-858b-hero-h1, .bh-858b-hero-geant, .bh-858b-hero-accroche) { color: var(--c-sur-voile); }

/* 28/09 maison-bien-etre : en mobile, l image 4/3 (248 px) sortait de son cadre de 164 px et passait sous le titre de la carte. Le cadre coupe son image. */
.bh-858b-carte .bh-858b-c-media { overflow: hidden; }

/* 28/09 decorateur-maison : hero-gauche dans le conteneur centré (hero plein cadre) : pas de marge d'écran en plus. */
@media (min-width: 1024px) { .bh-858b-home .bh-858b-int .bh-858b-hero-gauche { padding-left: 0; } }