:root {
  /* Typographie du thème d'origine (Alexandria Variable / IBM Plex Sans Arabic), importées par
     src/styles/global.css. Aucune police tierce n'est chargée : on ne déclare pas Archivo/Inter,
     qui n'existent nulle part et faisaient retomber les blocs sur system-ui. */
  --f-titre: 'Alexandria Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-texte: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-graisse-titre: 700;
  --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);
}


.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);
}


.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; } }

/* Hero couverture, deux colonnes pleine hauteur : texte à gauche centré verticalement,
   photo à droite couvrant toute la hauteur du hero. Aucune bande de fond, aucun vide. */
.bh-858b-home .bh-858b-bloc.bh-858b-hero-scinde {
  display: grid; 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));
  padding-block: 0; justify-content: normal; background: var(--c-fond);
}
.bh-858b-hero-moitie { min-height: 0; margin: 0; }
.bh-858b-hero-gauche { display: flex; align-items: center; justify-content: center; padding: var(--e6) var(--e5); }
.bh-858b-hero-texte { width: 100%; max-width: 34rem; }
.bh-858b-hero-media { position: relative; min-height: 0; }
.bh-858b-hero-media img { display: block; 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); }
/* Second bouton du hero : bouton secondaire du thème, à bord seul (pilule). */
.bh-858b-hero-scinde .bh-858b-hero-bouton-2 { background: transparent !important; color: var(--c-texte) !important; border: 2px solid var(--c-primaire); box-shadow: none; text-decoration: none; }
.bh-858b-hero-scinde .bh-858b-hero-bouton-2:hover { background: var(--c-doux) !important; color: var(--c-primaire-texte) !important; }


.bh-858b-quiz [hidden] { display: none !important; }
.bh-858b-etapes-photos .bh-858b-etape-photo[hidden] { display: none !important; }

/* Article : le H1 ne passe jamais sous le header collant (bandeau compris). La hauteur réelle du
   header est posée en --header-h par le header ; le conteneur de l'article la réserve. */
.bh-858b-int-article { padding-top: calc(var(--header-h, 72px) + var(--e6)) !important; }

/* Icônes du bloc de partage du kit article : taille fixe. Sans elle, les svg à viewBox sociale
   s'étiraient sur toute la colonne et recouvraient le corps et le sommaire. Le composant
   KitArticle n'est ni enveloppé ni filtré. */
.bh-858b-int-article .ks-share-links svg {
  width: 20px !important; height: 20px !important;
  max-width: 20px !important; max-height: 20px !important; flex: 0 0 auto;
}
@media (min-width: 1024px) {
  .bh-858b-home .bh-858b-bloc.bh-858b-hero-scinde { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .bh-858b-hero-gauche { padding: var(--e7) var(--e7) var(--e7) max(var(--e5), calc((100vw - var(--largeur)) / 2)); }
}
@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; }



/* 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); }


.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)); }



.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: 3px; font-size: 13px; line-height: 1.2; }
header.bh-858b-tete .bh-858b-tete-bandeau-int { min-height: 30px; padding-block: 2px; gap: var(--e2); line-height: 1.2; }
header.bh-858b-tete .bh-858b-tete-int { padding-block: 0 !important; }
/* 04/10 : en colonne (>= 1080 px), le logo respire autant au-dessus (sous le bandeau) qu au-dessous (socle:header-centre) */
@media (min-width: 1080px) { header.bh-858b-tete .bh-858b-tete-int { padding-top: 1.25rem !important; } }
header.bh-858b-tete .bh-858b-tete-logo { display: flex; align-items: center; line-height: 0; }


.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); }


.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); }


.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; } }