:root {
  --f-titre: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-texte: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-graisse-titre: 800;
  --f-casse-kicker: uppercase;
  --tm: 0.707rem;
  --t1: 1.0rem;
  --t2: 1.414rem;
  --t3: 1.999rem;
  --t4: 2.827rem;
  --t5: 3.998rem;
  --t6: 5.653rem;
  --t7: 7.993rem;
  --t-hero: clamp(4.0rem, 6vw, 11.3rem);
  --e1: 0.212rem;
  --e2: 0.425rem;
  --e3: 0.637rem;
  --e4: 0.85rem;
  --e5: 1.275rem;
  --e6: 1.7rem;
  --e7: 2.55rem;
  --e8: 3.4rem;
  --r-carte: 6px;
  --r-bouton: 6px;
  --r-image: 4px;
  --largeur: 1120px;
  --ico-trait: 2;
  --header-h: 72px;
  --c-fond: #fefefe;
  --c-fond-2: #f5f3f4;
  --c-surface: #ffffff;
  --c-texte: #2f232b;
  --c-texte-2: #6b5765;
  --c-primaire: #bc2992;
  --c-sur-primaire: #f9f5f8;
  --c-secondaire: #ad5293;
  --c-sur-secondaire: #fcf9fb;
  --c-primaire-texte: #b02688;
  --c-secondaire-texte: #8b4176;
  --c-doux: #eedde9;
  --c-sur-doux: #291423;
  --c-bord: #d9d3d8;
  --c-voile: #180c15;
  --c-sur-voile: #ffffff;
  --c-ombre: #240f1e;
  --o-carte: 6px 6px 0 #2f232b;
  --o-survol: 0 18px 40px -12px color-mix(in srgb, #240f1e 28%, transparent);
  --carte-fond: #ffffff;
  --carte-encre: #2f232b;
  --carte-encre-2: #6b5765;
  --carte-lien: #b02688;
  --carte-bord: 0 solid transparent;
  --btn-fond: var(--c-primaire);
  --btn-texte: var(--c-sur-primaire);
  --btn-bord: 0 solid transparent;
  --btn-ombre: none;
  --btn-deco: none;
  --lien-couleur: #b02688;
  --lien-deco: underline;
  --lien-epaisseur: 1px;
  --lien-fond: transparent;
  --lien-fond-encre: #b02688;
}
html.dark, html[data-theme="dark"], html[data-mode="dark"], html.theme-dark, body.dark, [data-theme="dark"] [data-bh-home] {
  --c-fond: #181417;
  --c-fond-2: #241c22;
  --c-surface: #2b2429;
  --c-texte: #eee8ec;
  --c-texte-2: #c3b6c0;
  --c-primaire: #dc60b9;
  --c-sur-primaire: #291423;
  --c-secondaire: #be74a9;
  --c-sur-secondaire: #291423;
  --c-primaire-texte: #e481c7;
  --c-secondaire-texte: #d19ec3;
  --c-doux: #43233a;
  --c-sur-doux: #f9f5f8;
  --c-bord: #4d424a;
  --c-voile: #180c15;
  --c-sur-voile: #ffffff;
  --c-ombre: #070306;
  --o-carte: 6px 6px 0 #eee8ec;
  --o-survol: 0 18px 40px -12px color-mix(in srgb, #070306 28%, transparent);
  --carte-fond: #2b2429;
  --carte-encre: #eee8ec;
  --carte-encre-2: #c3b6c0;
  --carte-lien: #e481c7;
  --carte-bord: 0 solid transparent;
  --btn-fond: var(--c-primaire);
  --btn-texte: var(--c-sur-primaire);
  --btn-bord: 0 solid transparent;
  --btn-ombre: none;
  --btn-deco: none;
  --lien-couleur: #e481c7;
  --lien-deco: underline;
  --lien-epaisseur: 1px;
  --lien-fond: transparent;
  --lien-fond-encre: #e481c7;
}

/* 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-ad17-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-ad17-home *, .bh-ad17-home *::before, .bh-ad17-home *::after { box-sizing: border-box; }
.bh-ad17-home * { min-width: 0; }
.bh-ad17-home :is(a, p, span, small) { opacity: 1; }
.bh-ad17-home img { max-width: 100%; display: block; }
.bh-ad17-home a { color: inherit !important; }
.bh-ad17-home :is(h1, h2, h3, h4, blockquote) { color: inherit; }
.bh-ad17-home p { margin: 0; }
.bh-ad17-home h2, .bh-ad17-home h3 { margin: 0; }
.bh-ad17-home .bh-ad17-h2 { color: var(--c-texte) !important; }
.bh-ad17-home .bh-ad17-intro { color: var(--c-texte) !important; }
.bh-ad17-home :is(.bh-ad17-kicker, .bh-ad17-num) { color: var(--c-texte) !important; }
.bh-ad17-home .bh-ad17-c-p { color: var(--carte-encre) !important; }
.bh-ad17-home :is(.bh-ad17-c-titre, .bh-ad17-c-meta, .bh-ad17-c-kicker, .bh-ad17-c-suite) { color: var(--carte-encre) !important; }
.bh-ad17-marque-site {
  position: absolute; z-index: 10; inset-block-start: var(--e3); inset-inline-start: var(--e5);
  padding: var(--e2) var(--e3); background: var(--c-fond); color: var(--c-texte);
  border: var(--bordure) solid var(--c-bordure); border-radius: var(--r-bouton);
}

/* ─── sections : un écran chacune ─── */
.bh-ad17-home .bh-ad17-bloc {
  min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column;
  justify-content: center; padding-block: var(--e7); background: var(--c-fond) !important; color: var(--c-texte) !important;
}
/* Tous les blocs ne valent pas un ecran. Une rangee de cartes (rubriques, cas)
   ou une bande d'appel (bandeau) mesuree a la hauteur d'un ecran ne laisse
   qu'un grand vide au-dessus et au-dessous du contenu : ces trois-la prennent
   la hauteur de ce qu'ils portent. La regle vient apres celle des blocs, a
   specificite egale, donc elle gagne. */
.bh-ad17-home :is(.bh-ad17-b-rubriques, .bh-ad17-b-cas, .bh-ad17-b-bandeau) {
  min-height: 0; padding-block: var(--e7);
}
.bh-ad17-home .bh-ad17-b-bandeau { padding-block: var(--e6); }
.bh-ad17-home .bh-ad17-fond-b { background: var(--c-fond-2) !important; }
.bh-ad17-home .bh-ad17-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-ad17-home. */
.bh-ad17-home { --btn-texte-racine: var(--btn-texte); --btn-bord-racine: var(--btn-bord); --btn-fond-racine: var(--btn-fond); --btn-deco-racine: var(--btn-deco); --carte-lien-racine: var(--carte-lien); }
.bh-ad17-home .bh-ad17-fond-doux { --carte-lien: var(--c-sur-doux); --lien-couleur: var(--c-sur-doux); --lien-fond-encre: var(--c-sur-doux); }
/* Le bouton a son propre fond : sur un fond doux il garde la paire primaire /
   sur-primaire au lieu de prendre l'encre du doux, qui ne valait que pour un
   bouton en texte seul. Les liens, eux, restent a l'encre du doux. */
.bh-ad17-home:is([data-bouton="contour"], [data-bouton="souligne"]) .bh-ad17-fond-doux { --btn-texte: var(--btn-texte-racine); --btn-fond: var(--btn-fond-racine); --btn-deco: var(--btn-deco-racine); }
.bh-ad17-home[data-bouton="contour"] .bh-ad17-fond-doux { --btn-bord: 2px solid var(--c-sur-doux); }
.bh-ad17-home .bh-ad17-fond-doux :is(.bh-ad17-carte, .bh-ad17-acc) {
  --carte-lien: var(--carte-lien-racine); --btn-texte: var(--btn-texte-racine); --btn-bord: var(--btn-bord-racine);
  --btn-fond: var(--btn-fond-racine); --btn-deco: var(--btn-deco-racine);
}
.bh-ad17-int { width: min(100% - 2 * var(--e5), var(--largeur)); margin-inline: auto; }

/* ─── en-tête de section ─── */
.bh-ad17-entete { margin-bottom: var(--e6); max-width: 64ch; }
[data-alignement="centre"] .bh-ad17-entete { margin-inline: auto; text-align: center; }
[data-alignement="centre"] .bh-ad17-d-colle .bh-ad17-entete { margin-inline: 0; text-align: left; }
.bh-ad17-num { display: none; }
[data-titres="numero"] .bh-ad17-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-ad17-kicker { font-size: var(--tm); text-transform: var(--f-casse-kicker); letter-spacing: .08em; color: var(--c-primaire-texte); font-weight: 600; }
.bh-ad17-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-ad17-h2 { font-size: clamp(var(--t4), 6vw, var(--t6)); letter-spacing: -.025em; }
[data-titres="trait"] .bh-ad17-h2 { padding-bottom: var(--e3); border-bottom: 3px solid var(--c-primaire-texte); display: inline-block; }
[data-titres="kicker"] .bh-ad17-entete::before {
  content: ""; display: block; width: 3rem; height: 4px; background: var(--c-primaire); margin-bottom: var(--e4);
}
[data-alignement="centre"][data-titres="kicker"] .bh-ad17-entete::before { margin-inline: auto; }
.bh-ad17-intro { color: var(--c-texte-2); font-size: var(--t2); }
/* Le lien d'en-tête passe sur sa propre ligne, centré sous le titre. En ligne,
   il partageait la boîte de ligne du h2 — en display: inline-block sous
   [data-titres="trait"] — et venait percuter le soulignement du titre.
   Le sélecteur porte la classe du bloc, sinon la règle .bh-ad17-home
   .bh-ad17-bouton (deux classes aussi) le remet en inline-flex. */
.bh-ad17-entete-lien,
.bh-ad17-home a.bh-ad17-entete-lien { display: block; width: fit-content; margin: var(--e4) auto 0; }

/* ─── boutons et liens ─── */
.bh-ad17-home .bh-ad17-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-ad17-bouton:hover { transform: translateY(-2px); }
/* Le second bouton d'une paire reste en contour : deux aplats identiques cote a
   cote ne diraient pas lequel est l'action principale. La bordure suit la
   couleur du texte, donc elle s'adapte au fond (clair, doux, voile). */
.bh-ad17-home .bh-ad17-bouton-2 {
  --btn-fond: transparent; --btn-texte: var(--c-primaire-texte); --btn-bord: 2px solid currentColor; --btn-deco: none;
}
/* 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-ad17-fleche svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.bh-ad17-home :is(.bh-ad17-c-suite, .bh-ad17-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-ad17-c-suite (encre de lien) gagnait : 3.85 mesuré en sombre */
.bh-ad17-home[data-lien="surligne"] .bh-ad17-c-suite { background: var(--c-doux); color: var(--c-sur-doux) !important; padding: .1em .35em; }

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

.bh-ad17-cs-texte, .bh-ad17-cs-qr, .bh-ad17-cs-fait, .bh-ad17-cs-citation { padding: var(--e5); gap: var(--e3); }
/* Les formes de carte sont préfixées par .bh-ad17-home : sans cela elles restaient à
   (0,1,0) sous `.bh-ad17-home .bh-ad17-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-ad17-c-corps hors de la carte : `align-self: stretch` étire la photo
   sans écraser le texte. */
.bh-ad17-home .bh-ad17-cs-image-gauche { flex-direction: row; }
.bh-ad17-cs-image-gauche .bh-ad17-c-media { flex: 0 0 38%; align-self: stretch; min-height: 0; }
.bh-ad17-cs-image-gauche .bh-ad17-c-media img { width: 100%; height: 100%; min-height: 9rem; object-fit: cover; }
.bh-ad17-cs-superpose { min-height: 15rem; justify-content: flex-end; }
.bh-ad17-cs-superpose .bh-ad17-c-img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.bh-ad17-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-ad17-c-voile .bh-ad17-c-titre, .bh-ad17-c-voile .bh-ad17-c-kicker, .bh-ad17-c-voile .bh-ad17-c-meta { color: var(--c-sur-voile); }
.bh-ad17-c-vedette .bh-ad17-c-titre { font-size: var(--t4); }
.bh-ad17-cs-portrait { align-items: flex-start; }
.bh-ad17-c-avatar { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; margin: var(--e5) var(--e5) 0; }
.bh-ad17-c-vedette .bh-ad17-c-avatar { width: 9rem; height: 9rem; }
.bh-ad17-cs-numero .bh-ad17-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-ad17-home .bh-ad17-cs-ligne { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--e4); }
.bh-ad17-cs-ligne .bh-ad17-c-corps { padding-block: var(--e4); }
.bh-ad17-c-fleche {
  display: inline-flex; align-items: center; padding: var(--e4); text-decoration: none;
  font-size: var(--t3); color: var(--carte-lien);
}
.bh-ad17-cs-pastille { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.bh-ad17-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-ad17-c-pastille small { color: var(--carte-encre-2); font-weight: 400; }
.bh-ad17-c-pastille:hover { background: var(--c-primaire); color: var(--c-sur-primaire); }
.bh-ad17-c-pastille:hover small { color: var(--c-sur-primaire); }
.bh-ad17-c-citation { margin: 0; font-family: var(--f-titre); font-size: var(--t2); line-height: 1.45; }
.bh-ad17-c-vedette .bh-ad17-c-citation { font-size: var(--t4); }
.bh-ad17-c-signature { display: grid; gap: .1em; font-size: var(--tm); color: var(--carte-encre-2); }
.bh-ad17-c-signature strong { color: var(--carte-encre); font-size: var(--t1); }
/* Le renvoi de l'avis vers l'article commenté est un lien : il doit se voir
   comme tel. Sans cette règle, la règle générale du banc (.bh-ad17-home a {
   color: inherit }) le laissait de la couleur du texte, donc invisible. */
.bh-ad17-c-signature a { color: var(--carte-lien); text-decoration: underline; text-underline-offset: .15em; }
.bh-ad17-c-signature a:hover { text-decoration-thickness: 2px; }
.bh-ad17-etoiles { letter-spacing: .15em; font-size: var(--t1); }
.bh-ad17-etoiles-pleines { color: var(--carte-lien); }
.bh-ad17-etoiles-vides { color: var(--c-bord); }
.bh-ad17-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-ad17-c-label { font-weight: 600; }
/* Carte d'index : la sixième carte des grilles « rubriques » et « auteurs »
   n'a pas de photo à montrer. Plutôt qu'une carte de texte étirée à la hauteur
   de la rangée, avec deux lignes en haut et le cadre vide en dessous, elle
   liste ce qu'elle indexe : chaque rubrique (ou chaque signature) avec son
   nombre d'articles, et son lien posé en bas du cadre. La liste prend la place
   disponible, elle se répartit donc sur la hauteur de la rangée au lieu de
   laisser un trou. */
.bh-ad17-c-index { gap: var(--e3); }
.bh-ad17-c-index .bh-ad17-c-renvois { flex: 1; align-content: space-between; }
.bh-ad17-c-renvois { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); font-size: var(--t1); }
.bh-ad17-c-renvois li + li { border-top: 1px solid var(--c-bord); }
.bh-ad17-c-renvois a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
  padding-block: var(--e2); text-decoration: none;
}
.bh-ad17-c-renvois a:hover { color: var(--carte-lien) !important; }
.bh-ad17-c-renvois small { color: var(--carte-encre-2); font-size: var(--tm); }
.bh-ad17-c-index .bh-ad17-c-suite { margin-top: auto; }

.bh-ad17-cs-image-seule { background: transparent; border: 0; box-shadow: none; gap: var(--e2); }
.bh-ad17-cs-image-seule img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-image); }
.bh-ad17-c-legende { font-size: var(--tm); color: var(--c-texte-2); }

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

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

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

/* carrousel */
/* La largeur de colonne se cale sur le conteneur : quatre cartes pleines, et la
   cinquième commence une gouttière après le bord droit, donc hors du cadre — il
   n'en reste ni amorce ni ombre orpheline (l'ombre des cartes est franche, sans
   flou, et ne déborde pas à gauche de la carte). L'ancienne largeur fixe
   (16rem à 21rem) laissait une quinzaine de pixels de la cinquième carte et le
   coin de son ombre seuls dans le blanc, ce qui se lisait comme un défaut
   d'affichage. Le plancher de 14rem ne sert qu'aux fenêtres étroites, où le
   rail défile : la carte suivante y montre une amorce large et lisible, jamais
   une bande de quelques pixels. */
.bh-ad17-car-piste {
  display: grid; grid-auto-flow: column; grid-auto-columns: max(14rem, calc((100% - 3 * var(--e5)) / 4));
  gap: var(--e5);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  /* Le rail réserve à droite la largeur de l'ombre des cartes : sans elle, la
     quatrième — la dernière visible, calée sur le bord — était la seule à
     perdre son ombre, coupée par le cadre du défilement. Le bas garde la
     réserve de la barre de défilement. */
  padding-right: var(--e2); padding-bottom: var(--e4);
}
.bh-ad17-car-piste > * { scroll-snap-align: start; }
.bh-ad17-car-nav { display: flex; gap: var(--e3); margin-top: var(--e4); }
.bh-ad17-car-nav .bh-ad17-bouton {
  padding: .5em; font-size: var(--t2); line-height: 0;
  color: var(--c-texte); background: var(--c-fond);
}
/* Les deux boutons du carrousel portaient les glyphes « ‹ » et « › » : les
   seuls caractères de fonte du site employés comme icônes, à côté de flèches
   SVG partout ailleurs. Ils portent maintenant le chevron tracé, à la même
   épaisseur de trait que la flèche de suite. */
.bh-ad17-car-nav svg { width: 1.35em; height: 1.35em; }

/* timeline */
.bh-ad17-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-ad17-tl-pas { position: relative; }
.bh-ad17-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-ad17-tl-alterne { border-left: 0; padding: 0; position: relative; }
  .bh-ad17-tl-alterne::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px solid var(--c-bord); }
  .bh-ad17-tl-alterne .bh-ad17-tl-pas { width: calc(50% - var(--e6)); }
  .bh-ad17-tl-alterne .bh-ad17-tl-pas:nth-child(even) { margin-left: calc(50% + var(--e6)); }
  .bh-ad17-tl-alterne .bh-ad17-tl-pas::before { left: auto; right: calc(-1 * var(--e6) - 8px); }
  .bh-ad17-tl-alterne .bh-ad17-tl-pas:nth-child(even)::before { right: auto; left: calc(-1 * var(--e6) - 8px); }
}

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

/* accordéon */
.bh-ad17-accordeon { display: grid; gap: var(--e3); max-width: 60rem; }
[data-alignement="centre"] .bh-ad17-accordeon { margin-inline: auto; }
.bh-ad17-acc { background: var(--carte-fond); color: var(--carte-encre); border: var(--carte-bord); border-radius: var(--r-carte); box-shadow: var(--o-carte); }
/* Le <details> reste natif : c'est lui qui ouvre et ferme sans script, et qui
   se replie au clavier. Seul son marqueur change : le triangle noir du
   navigateur était le dernier élément d'interface du site à ne pas venir du
   jeu d'icônes. Il est retiré, et le chevron SVG posé dans le summary prend sa
   place, à droite du titre, retourné quand le panneau est ouvert. */
.bh-ad17-acc summary {
  cursor: pointer; padding: var(--e4) var(--e5); font-family: var(--f-titre); font-weight: var(--f-graisse-titre); font-size: var(--t2);
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
}
.bh-ad17-acc summary::-webkit-details-marker { display: none; }
.bh-ad17-acc summary::marker { content: ''; }
.bh-ad17-acc summary svg {
  width: 1.15em; height: 1.15em; flex: 0 0 auto; color: var(--carte-lien);
  transition: transform .2s ease;
}
.bh-ad17-acc[open] summary svg { transform: rotate(180deg); }
.bh-ad17-acc-corps { padding: 0 var(--e5) var(--e5); display: grid; gap: var(--e3); color: var(--carte-encre-2); }
.bh-ad17-acc-corps a { color: var(--carte-lien); font-weight: 600; }

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

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

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

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

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

/* Bandeau de mots : les huit termes, entiers, centrés sur une ligne.
   Ils défilaient avant, sur une piste coupée net aux deux bords : à l'arrêt sur
   une image, le lecteur lisait « elinctte » pour « Grelinette » et « Goutte »
   pour « Goutte-à-goutte ». Un mot de vocabulaire tronqué se lit comme une
   faute de frappe, pas comme un défilement, et c'était le seul élément
   graphique du bloc. Plus de piste qui bouge, donc plus de mot rogné ; sur un
   écran trop étroit pour les huit, la rangée passe à la ligne au lieu de
   couper. La taille suit la largeur jusqu'au plafond --t2, puis s'arrête : la
   colonne de contenu est plafonnée elle aussi, et une taille qui continuerait
   de croître finirait par rejeter un mot à la ligne sur un grand écran. */
.bh-ad17-defilant { display: block; }
.bh-ad17-def-rang { overflow: visible; white-space: normal; }
.bh-ad17-def-piste { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--e2) var(--e4); }
.bh-ad17-def-mot { font-family: var(--f-titre); font-size: clamp(var(--t1), 1.9vw, var(--t2)); font-weight: var(--f-graisse-titre); text-decoration: none; color: var(--c-texte); white-space: nowrap; }
.bh-ad17-def-mot:nth-child(3n+2) { color: var(--c-primaire-texte); }

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

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

/* ─── hero ─── */
.bh-ad17-hero { height: calc(100svh - var(--header-h)); min-height: 0; padding-block: 0; position: relative; overflow: hidden; justify-content: flex-end; }
/* Sur un ecran etroit, un hero a la hauteur d'un ecran entier ne laisse voir
   qu'un texte sur une photo : la hauteur suit le contenu, plafonnee a 80 % de
   l'ecran, pour que le bloc suivant affleure des l'ouverture. */
@media (max-width: 1023px) {
  /* Prefixee .bh-ad17-home : la regle generale des blocs
     (.bh-ad17-home .bh-ad17-bloc, plus specifique) impose sinon son
     min-height d'un ecran et la hauteur reste a 100svh. */
  .bh-ad17-home .bh-ad17-hero { height: auto; min-height: calc(100svh - var(--header-h, 72px)); }
}
.bh-ad17-hero-kicker { font-size: var(--tm); text-transform: var(--f-casse-kicker); letter-spacing: .1em; font-weight: 600; margin-bottom: var(--e3); }
.bh-ad17-home .bh-ad17-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-ad17-home .bh-ad17-hero-accroche { font-size: var(--t2); max-width: 46ch; margin-bottom: var(--e5); }
.bh-ad17-hero-actions { display: flex; flex-wrap: wrap; gap: var(--e3); }
.bh-ad17-hero-titres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.bh-ad17-hero-titres a { display: grid; gap: .15em; text-decoration: none; color: inherit; border-top: 1px solid currentColor; padding-top: var(--e2); }
.bh-ad17-hero-titres a:hover span:last-child { text-decoration: underline; }
.bh-ad17-hero-date { font-size: var(--tm); opacity: .85; }
.bh-ad17-hero-titres span:last-child { font-weight: 600; }

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

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

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

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

.bh-ad17-hero-typo { background: var(--c-fond-2); }
.bh-ad17-hero-typo-int { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-block: var(--e7); }
.bh-ad17-hero-typo .bh-ad17-hero-kicker { color: var(--c-primaire-texte); }
.bh-ad17-home .bh-ad17-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-ad17-hero-typo-bas { display: grid; gap: var(--e5); align-items: end; border-top: 2px solid var(--c-texte); padding-top: var(--e5); }
.bh-ad17-hero-titres-ligne { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .bh-ad17-hero-typo-bas { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; }
  .bh-ad17-hero-titres-ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) { .bh-ad17-hero-typo .bh-ad17-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-ad17-home .bh-ad17-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. */
/* « Lire les articles » mene a la liste des articles : c est une action, elle se lit comme un
   bouton plein (fond primaire, texte sur-primaire), pas comme un lien souligne. Meme jeton que
   le reste du site, aucune couleur inventee : le fond vient de --c-primaire. */
.bh-ad17-home .bh-ad17-hero-voile .bh-ad17-bouton-1 { background: var(--c-primaire) !important; color: var(--c-sur-primaire) !important; border: 2px solid var(--c-primaire); box-shadow: none; text-decoration: none; }
.bh-ad17-home .bh-ad17-hero-voile .bh-ad17-bouton-2 { background: transparent !important; color: var(--c-sur-voile) !important; border: 2px solid var(--c-sur-voile); box-shadow: none; }
.bh-ad17-home .bh-ad17-hero-bande .bh-ad17-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-ad17-home .bh-ad17-hero-bande .bh-ad17-bouton-2 { background: transparent !important; color: var(--c-sur-primaire) !important; border: 2px solid var(--c-sur-primaire); box-shadow: none; }
.bh-ad17-home .bh-ad17-hero-bande :is(h1, h2, p, span, small, strong, li):not(.bh-ad17-bouton, .bh-ad17-bouton *) { color: var(--c-sur-primaire) !important; }

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

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

/* ── étoiles des avis en SVG (remplace les caractères ★, qui dépendaient
   de la police du système et ne s'alignaient pas) ── */
.bh-ad17-etoiles { display: inline-flex; align-items: center; gap: .12em; }
.bh-ad17-etoiles > span { display: inline-flex; align-items: center; gap: .12em; }
.bh-ad17-etoiles svg { width: 1em; height: 1em; display: block; }

/* Hero pleine hauteur sur tous les écrans (règle Cedia) */
[data-bloc="hero"] { min-height: calc(100svh - var(--header-h, 72px)); }

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