/* retouche.css — Actu Pme, corrections du portier (tour 2).
   Chargée en DERNIER (après da.css, socle.css, kit-vivant.css, kit-article.css, theme.css).
   Aucune couleur littérale : tout vient des jetons de da.css. */

/* ───────────────────────── 1. BANDEAU DU HAUT ─────────────────────────
   Une seule ligne, 44 px au plus, piste en flex-row nowrap animée par le
   kit_vivant (data-defile). Croix de fermeture visible en bureau ET mobile. */
.header .usine-bandeau {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 0;
  max-height: 44px;
  padding: 0;
  background: var(--c-primaire);
  color: var(--c-sur-primaire);
}
.header .usine-bandeau-int {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding-block: 0;
  padding-inline: max(0.75rem, calc((100vw - var(--largeur)) / 2));
}
.header .usine-bandeau .usine-bandeau-titre {
  flex: 0 0 auto;
  margin: 0;
}
.header .usine-bandeau .usine-bandeau-mot {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--f-titre);
  font-size: var(--tm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.header .usine-bandeau .usine-bandeau-defile {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.header .usine-bandeau .usine-bandeau-piste,
.header .usine-bandeau .kv-piste {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
  white-space: nowrap;
  animation: usine-bandeau-defile 46s linear infinite;
}
.header .usine-bandeau .usine-bandeau-piste > li {
  flex: 0 0 auto;
}
.header .usine-bandeau .usine-bandeau-piste a {
  color: var(--c-sur-primaire);
  text-decoration: none;
  font-size: var(--t1);
  line-height: 1.2;
}
.header .usine-bandeau .usine-bandeau-piste a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
@keyframes usine-bandeau-defile {
  to {
    transform: translateX(-50%);
  }
}
.header .usine-bandeau .usine-bandeau-fermer {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  margin: 0 0 0 0.25rem;
  border: 0;
  background: transparent;
  color: var(--c-sur-primaire);
  cursor: pointer;
}
.header .usine-bandeau .usine-bandeau-fermer svg {
  width: 16px;
  height: 16px;
  display: block;
}
.header .usine-bandeau[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .header .usine-bandeau .usine-bandeau-piste,
  .header .usine-bandeau .kv-piste {
    animation: none;
  }
}
@media (max-width: 639px) {
  .header .usine-bandeau .usine-bandeau-mot {
    display: none;
  }
}

/* ───────────────────────── 2. EN-TÊTE ─────────────────────────
   Le hamburger disparaît quand la nav est visible ; la barre de navigation
   suit exactement la largeur du contenu de la home. */
@media (min-width: 1024px) {
  .header label[for="nav-toggle"] {
    display: none !important;
  }
}
/* La nav porte .container : max-width 1320px !important posé dans un @layer Tailwind, qui l emporte sur
   tout !important hors layer. Le rembourrage calculé sur la largeur de page s ajoutait DANS ces 1320 px :
   logo et menu passaient sur deux lignes (Cedia 29/09). La barre garde la largeur du thème, sans
   rembourrage en plus ; le menu se range à droite du logo. */
.header .navbar {
  padding-inline: 0.75rem;
}
@media (min-width: 1024px) {
  .header .navbar-nav { margin-left: auto; margin-right: 0; }
}

/* ───────────────────────── 3. HERO PLEIN ÉCRAN ─────────────────────────
   Le hero fait un écran sous le header. Le texte est en bas : il ne doit
   jamais dépasser vers le haut (kicker et première ligne de H1 rognés). */
.bh-5e1c-hero-texte {
  max-height: 100%;
  min-height: 0;
  overflow: visible;
}
@media (min-width: 900px) {
  .bh-5e1c-home .bh-5e1c-hero-h1 {
    font-size: clamp(2rem, 3.3vw, 3.1rem);
    line-height: 1.04;
  }
  .bh-5e1c-home .bh-5e1c-hero-accroche {
    font-size: var(--t1);
    margin-bottom: var(--e4);
  }
  .bh-5e1c-hero-grille {
    padding-block: 1.25rem;
  }
}
/* fond accent : le libellé reste clair, comme partout ailleurs sur le site */
.bh-5e1c-home .bh-5e1c-hero .bh-5e1c-bouton-1 {
  background: var(--c-primaire);
  color: var(--c-sur-primaire) !important;
  border: 2px solid var(--c-primaire);
  box-shadow: var(--o-bouton, 4px 4px 0 var(--c-texte));
}
.bh-5e1c-home .bh-5e1c-hero .bh-5e1c-bouton-2 {
  background: transparent;
  color: var(--c-texte) !important;
  border: 2px solid var(--c-texte);
}

/* ───────────────────────── 4. LOGOS DES ORGANISMES ─────────────────────────
   Un vrai logo sur une pastille claire, à la même hauteur optique. Aucune
   initiale, aucun pictogramme générique, aucun masque qui efface le mot. */
.bh-5e1c-defile-logos .kv-piste {
  gap: 1rem;
  align-items: center;
}
.bh-5e1c-b-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-bord);
  border-radius: var(--r-carte);
  flex: 0 0 auto;
}
.bh-5e1c-b-logo img,
.bh-5e1c-defile-logos img {
  height: 26px !important;
  max-height: 26px !important;
  width: auto;
  max-width: 132px;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  mix-blend-mode: normal !important;
}

/* ───────────────────────── 5. À LA UNE (bento) ─────────────────────────
   Titre lisible sur voile sombre, colonnes alignées, aucune vignette sans
   photo parmi les trois principales. */
.bh-5e1c-bento {
  align-items: stretch;
}
.bh-5e1c-bento > * {
  height: 100%;
}
.bh-5e1c-cs-superpose .bh-5e1c-c-voile {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--e4);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--c-voile) 94%, transparent) 55%,
    color-mix(in srgb, var(--c-voile) 0%, transparent)
  );
}
.bh-5e1c-cs-superpose .bh-5e1c-c-voile :is(h3, a, p, span, strong, .bh-5e1c-c-kicker) {
  color: var(--c-sur-voile) !important;
}
.bh-5e1c-cs-superpose .bh-5e1c-c-voile a {
  text-decoration: none;
}
.bh-5e1c-c-titre a {
  border-bottom: 0;
  text-decoration: none;
}
.bh-5e1c-carte.bh-5e1c-cs-image-haut {
  padding: 0;
  overflow: hidden;
}
.bh-5e1c-carte.bh-5e1c-cs-image-haut .bh-5e1c-c-media {
  margin: 0;
}
.bh-5e1c-carte.bh-5e1c-cs-image-haut .bh-5e1c-c-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.bh-5e1c-carte.bh-5e1c-cs-image-haut .bh-5e1c-c-corps {
  padding: var(--e4);
}

/* ───────────────────────── 6. CALCULATEUR D'IMPAYÉ ─────────────────────────
   Saisie à gauche, résultat dans une carte accent à droite. */
.bh-5e1c-widget {
  display: grid;
  gap: var(--e5);
  align-items: start;
}
@media (min-width: 900px) {
  .bh-5e1c-widget {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}
.bh-5e1c-calcul {
  display: grid;
  gap: var(--e4);
  padding: var(--e5);
}
.bh-5e1c-calcul > label {
  display: grid;
  gap: 0.4rem;
  font-family: var(--f-titre);
  font-size: var(--tm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-texte);
}
.bh-5e1c-calcul input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--c-bord);
  border-radius: var(--r-carte);
  background: var(--c-surface);
  color: var(--c-texte);
  font-size: var(--t1);
}
.bh-5e1c-calcul input:focus-visible {
  outline: 2px solid var(--c-primaire);
  outline-offset: 2px;
}
.bh-5e1c-calcul-sortie {
  display: grid;
  gap: 0.35rem;
  padding: var(--e5);
  border-radius: var(--r-carte);
  background: var(--c-primaire);
  color: var(--c-sur-primaire);
}
.bh-5e1c-calcul-sortie :is(p, output, .bh-5e1c-c-kicker, .bh-5e1c-calcul-note) {
  color: var(--c-sur-primaire) !important;
}
.bh-5e1c-calcul-sortie output {
  font-family: var(--f-titre);
  font-size: var(--t3);
  font-weight: 700;
  line-height: 1.1;
}
.bh-5e1c-calcul-sortie .bh-5e1c-calcul-note {
  font-size: var(--tm);
  opacity: 0.9;
}
.bh-5e1c-calcul-sortie output + .bh-5e1c-calcul-note {
  margin-bottom: var(--e3);
}

/* ───────────────────────── 7. PAS À PAS ─────────────────────────
   Quatre étapes lisibles à droite de la photo ; une photo réelle par étape
   (le kit_vivant la change, data-etapes). */
.bh-5e1c-etapes {
  display: grid;
  gap: var(--e5);
  align-items: start;
}
@media (min-width: 1024px) {
  .bh-5e1c-etapes {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--e7);
  }
  .bh-5e1c-etapes-visuel {
    position: sticky;
    top: calc(var(--header-h, 6rem) + 1rem);
    margin: 0;
  }
}
.bh-5e1c-etapes-liste {
  display: grid;
  gap: var(--e3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bh-5e1c-etape {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e3);
  align-items: start;
  padding: var(--e4);
  border: var(--carte-bord, 1px solid var(--c-bord));
  border-radius: var(--r-carte);
  background: var(--carte-fond, var(--c-surface));
}
.bh-5e1c-etape-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-doux, var(--c-fond-2));
  color: var(--c-primaire-texte);
}
.bh-5e1c-etape-ico svg {
  width: 22px;
  height: 22px;
}

/* ───────────────────────── 8. BASCULE ─────────────────────────
   Contraste AA sur le seul contrôle du widget. */
.bh-5e1c-bascule .kv-interrupteur button[aria-pressed="true"] {
  background: var(--c-primaire);
  color: var(--c-sur-primaire) !important;
  border-color: var(--c-primaire);
}
.bh-5e1c-bascule .kv-interrupteur button {
  border: 1px solid var(--c-bord);
  border-radius: var(--r-carte);
  background: var(--c-surface);
  color: var(--c-texte);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

/* ───────────────────────── 9. COLONNES DE BLOC QUI SE VIDENT ─────────────────────────
   Rubriques, témoignages, équipe : la colonne de gauche porte un sommaire,
   un chiffre clé et une citation, jamais un vide d'un écran. */
.bh-5e1c-cote {
  display: grid;
  gap: var(--e4);
  align-content: start;
}
@media (min-width: 1024px) {
  .bh-5e1c-cote {
    position: sticky;
    top: calc(var(--header-h, 6rem) + 1rem);
  }
}
.bh-5e1c-cote-chiffre {
  font-family: var(--f-titre);
  font-size: var(--t4, var(--t3));
  font-weight: 800;
  line-height: 1;
  color: var(--c-primaire-texte);
  margin: 0;
}
.bh-5e1c-cote-citation {
  margin: 0;
  padding-left: var(--e3);
  border-left: 3px solid var(--c-primaire);
  font-family: var(--f-texte, var(--f-titre));
  font-size: var(--t2);
  color: var(--c-texte);
}
.bh-5e1c-cote-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.bh-5e1c-cote-liste a {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--c-bord);
  color: var(--c-texte);
  text-decoration: none;
}
.bh-5e1c-cote-liste a:hover {
  color: var(--c-primaire-texte);
}
.bh-5e1c-cote-liste span {
  color: var(--c-texte-2);
  font-size: var(--tm);
  white-space: nowrap;
}

/* ───────────────────────── 10. ONGLETS DE RUBRIQUE ─────────────────────────
   Le panneau ne laisse pas un vide en bas. */
.bh-5e1c-panneau .bh-5e1c-carte {
  height: 100%;
}
.bh-5e1c-panneau .bh-5e1c-c-corps {
  align-content: start;
}

/* ───────────────────────── 11. FAQ ─────────────────────────
   Accordéon et carte d'appel sur la même largeur, aucun chevauchement. */
.bh-5e1c-faq {
  display: grid;
  gap: var(--e5);
  align-items: start;
}
@media (min-width: 1024px) {
  .bh-5e1c-faq {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}
.bh-5e1c-faq > * {
  position: static !important;
  margin: 0 !important;
  max-width: none;
  width: 100%;
}
.bh-5e1c-accordeon {
  display: grid;
  gap: var(--e2);
  width: 100%;
  min-width: 0;
}
.bh-5e1c-acc {
  width: 100%;
  min-width: 0;
}

/* ───────────────────────── 12. PAGES INTERNES ─────────────────────────
   Même largeur et même marge que la home : le texte ne touche plus le bord
   du viewport (socle : jamais de débordement, colonne de 75 caractères). */
.usine-page {
  width: min(100% - 2 * var(--e5), var(--largeur));
  margin-inline: auto;
  padding: var(--e6) 0 var(--e8);
  min-width: 0;
}
.usine-entete-page {
  max-width: 46rem;
  margin-bottom: var(--e5);
}
.usine-entete-page .usine-mesure {
  max-width: min(60ch, 34em);
}
.usine-hero-page {
  margin: 0 0 var(--e6);
}
.usine-hero-page img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--r-image);
}
@media (max-width: 639px) {
  .usine-hero-page img {
    aspect-ratio: 4 / 3;
  }
}
/* formulaire de contact : libellé au-dessus, champ à la largeur du conteneur */
.usine-champ {
  display: grid;
  gap: 0.4rem;
}
.usine-champ label {
  font-family: var(--f-titre);
  font-size: var(--tm);
  font-weight: 600;
  color: var(--c-texte);
}
.usine-champ :is(input, select, textarea) {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--c-bord);
  border-radius: var(--r-carte);
  background: var(--c-surface);
  color: var(--c-texte);
  font-size: var(--t1);
}
.usine-champ :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--c-primaire);
  outline-offset: 2px;
}
.usine-form .usine-champ :is(input, select, textarea) {
  max-width: 100%;
}
.usine-form button[type="submit"] {
  width: 100%;
  justify-content: center;
}
/* pot de miel : hors écran, jamais vu du visiteur, jamais atteint au clavier */
.usine-miel {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* listes de page interne : icône alignée, jamais une ligne de texte nu */
.usine-liste-plan > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e2);
  align-items: start;
}
.usine-liste-plan > li > svg {
  margin-top: 0.3em;
}
.usine-liste-articles .usine-carte-article-media {
  display: block;
  overflow: hidden;
  border-radius: var(--r-image);
}
.usine-liste-articles .usine-carte-article-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.usine-pastilles a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--c-bord);
  border-radius: var(--r-carte);
  background: var(--c-surface);
  color: var(--c-primaire-texte);
  text-decoration: none;
  font-size: var(--tm);
  font-weight: 600;
}
.usine-pastilles a:hover {
  border-color: var(--c-primaire);
}
.usine-fiche-auteur {
  display: grid;
  gap: var(--e2);
  align-content: start;
}
.usine-fiche-auteur .usine-avatar-ronde {
  width: 132px;
  height: 132px;
}

/* Article : la colonne de lecture ne colle jamais au bord de la fenêtre.
   kit-article.css ne contraint .ka-cadre qu'au-dessus de 1100 px, ce qui
   laissait le texte partir à x=0 sur les écrans plus étroits. */
.ka-cadre {
  width: min(100% - 2rem, var(--largeur));
  max-width: none;
  min-width: 0;
  margin-inline: auto;
}
@media (min-width: 700px) {
  .ka-cadre {
    width: min(100% - 2 * var(--e4), var(--largeur));
  }
}
.ka-corps > :where(p, ul, ol, blockquote, h2, h3, figure) {
  min-width: 0;
}

/* ── page rubrique ──────────────────────────────────────────────────────── */
.usine-rubrique-grille {
  display: grid;
  gap: var(--e4);
  align-items: start;
}
@media (min-width: 1024px) {
  .usine-rubrique-grille {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}
.usine-rubrique-cote {
  display: grid;
  gap: var(--e2);
  align-content: start;
  padding: var(--e3);
  border: 1px solid var(--c-bord);
  border-radius: var(--r-carte);
  background: var(--c-surface);
}
.usine-rubrique-cote .usine-plan-titre {
  margin: 0;
}
.usine-rubrique-cote .usine-liste-simple li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
}

/* ── page signature ─────────────────────────────────────────────────────── */
.usine-auteur-hero {
  display: grid;
  gap: var(--e3);
  align-items: start;
}
@media (min-width: 760px) {
  .usine-auteur-hero {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--e4);
  }
}
.usine-auteur-portrait {
  margin: 0;
}
.usine-auteur-portrait img {
  display: block;
  width: 100%;
  max-width: 16rem;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-carte);
  border: 1px solid var(--c-bord);
}
.usine-auteur-texte {
  display: grid;
  gap: var(--e1);
  align-content: start;
  min-width: 0;
}
.usine-auteur-specialite {
  margin: 0;
  font-family: var(--f-titre);
  font-size: var(--tm);
  font-weight: 600;
  color: var(--c-primaire-texte);
}
.usine-auteur-texte .usine-mesure {
  margin: 0;
}
.usine-auteur-chiffres {
  display: grid;
  gap: var(--e2);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: var(--e4) 0;
}
.usine-auteur-chiffre {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--c-bord);
  border-radius: var(--r-carte);
  background: var(--c-surface);
}
.usine-auteur-chiffre strong {
  font-family: var(--f-titre);
  font-size: var(--t4);
  line-height: 1;
  color: var(--c-primaire-texte);
}
.usine-auteur-chiffre span {
  font-size: var(--tm);
  color: var(--c-doux);
}

/* ── appel à l’action de bas de page ────────────────────────────────────── */
.usine-cta-final {
  display: grid;
  gap: var(--e2);
  justify-items: start;
  margin-top: var(--e6);
  padding: var(--e5) var(--e4);
  border: 1px solid var(--c-bord);
  border-left: 4px solid var(--c-primaire);
  border-radius: var(--r-carte);
  background: var(--c-surf-doux);
}
.usine-cta-final h2 {
  margin: 0;
}
.usine-cta-final .usine-mesure {
  margin: 0;
}
.usine-cta-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: var(--e1) 0 0;
}
.usine-cta-boutons .bh-5e1c-bouton {
  text-decoration: none;
  min-height: 44px;
}

/* ═══════════════════ tour 3 : portier (26/09) ═══════════════════
   Aucune couleur littérale hors le jeton --c-sur-accent, dérivé de la palette. */

/* ── 1. libellés des boutons à fond accent ──────────────────────────────
   Tout bouton du thème posé sur le fond accent porte un libellé clair
   (AA), y compris hors de la home (à propos, rubriques, contact, pied). */
:root { --c-sur-accent: #f8f5f9; }
html.dark, html[data-theme="dark"], html[data-mode="dark"], html.theme-dark {
  --c-sur-accent: #231429;
}
.bh-5e1c-home .bh-5e1c-bouton,
.bh-5e1c-bouton,
a.bh-5e1c-bouton {
  background: var(--c-primaire) !important;
  color: var(--c-sur-accent) !important;
  border: 2px solid var(--c-primaire);
  text-decoration: none;
}
.bh-5e1c-home .bh-5e1c-bouton-2,
.bh-5e1c-bouton-2 {
  background: var(--c-surface) !important;
  color: var(--c-texte) !important;
  border: 2px solid var(--c-texte) !important;
}
.bh-5e1c-home .bh-5e1c-hero .bh-5e1c-bouton-1 {
  background: var(--c-primaire) !important;
  color: var(--c-sur-accent) !important;
  border: 2px solid var(--c-primaire) !important;
}
.bh-5e1c-home .bh-5e1c-hero .bh-5e1c-bouton-2 {
  background: var(--c-surface) !important;
  color: var(--c-texte) !important;
  border: 2px solid var(--c-texte) !important;
}
/* le bouton d'envoi du formulaire est l'action principale de la page */
.usine-form .bh-5e1c-bouton[type="submit"] {
  width: 100%;
  min-height: 48px;
  font-family: var(--f-titre);
  font-size: var(--t2);
}

/* ── 2. une photo par emplacement : plus aucun doublon ─────────────── */

/* ── 3. conteneur unique pour la home, les pages internes et l'article ── */
[data-usine-page="interne"] { width: min(100% - 2rem, 1260px); margin-inline: auto; }
.usine-article { width: min(100% - 2rem, 1260px); margin-inline: auto; }
.ka-cadre { width: min(100% - 2rem, 1260px); max-width: none; margin-inline: auto; }
@media (min-width: 700px) {
  .ka-cadre { width: min(100% - 2 * var(--e4), 1260px); }
}
.usine-hero-page, .usine-entete-page, .usine-page-cols, .usine-auteur-hero,
.usine-auteur-chiffres, .usine-plan-section, .usine-cta-final { width: 100%; }
.usine-entete-page { max-width: none; }
.usine-plan-titre + p, .usine-page-cote p { max-width: min(60ch, 34em); }

/* Le corps d'article remplit sa colonne de grille, le sommaire vient
   immédiatement à sa droite : plus de trou central. */
@container (min-width: 1000px) {
  .ka-grille {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
    justify-content: stretch;
    gap: var(--e6, 2rem);
  }
  .ka-corps { max-width: none; }
}
.ka-corps > :where(p, ul, ol, blockquote) { max-width: min(68ch, 38em); }
.ka-cadre .ka-tete { width: 100%; }

/* ── 4. blocs à colonne courte : collée en haut, jamais centrée ─────── */
.bh-5e1c-split { align-items: start; }
.bh-5e1c-cote { align-self: start; align-content: start; }
.bh-5e1c-cote, .usine-rubrique-cote {
  position: sticky;
  top: calc(var(--header-h, 6rem) + 24px);
}
.bh-5e1c-split-media {
  margin: 0;
  align-self: start;
}
.bh-5e1c-split-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--r-image);
}
@media (min-width: 1024px) {
  .bh-5e1c-split-media { position: sticky; top: calc(var(--header-h, 6rem) + 24px); }
}

/* ── 5. à la une : toutes les cartes descendent au bas de leur rangée ── */
.bh-5e1c-bento { align-items: stretch; }
.bh-5e1c-bento > *, .bh-5e1c-bento .bh-5e1c-carte {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bh-5e1c-bento .bh-5e1c-cs-image-haut .bh-5e1c-c-media { flex: none; }
.bh-5e1c-bento .bh-5e1c-c-corps { flex: 1 1 auto; display: flex; flex-direction: column; }
/* 26/09 : un lien pousse au bas d'une carte de bento laisse un trou (190 px mesures entre la meta
   et « Lire l'article ») : la carte est etiree par la grille, pas par son contenu. */
.bh-5e1c-bento .bh-5e1c-carte > .bh-5e1c-c-suite,
.bh-5e1c-bento .bh-5e1c-c-corps > .bh-5e1c-c-suite { margin-top: var(--e3); }
.bh-5e1c-bento .bh-5e1c-cs-superpose { display: block; }

/* ── 6. logos des organismes : nom et provenance visibles ───────────── */
.bh-5e1c-logos { text-align: center; padding-bottom: 0; }
.bh-5e1c-logos-mention { margin-bottom: var(--e4); }
.bh-5e1c-defile-logos { margin-top: 0; }
.bh-5e1c-b-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  height: auto;
  min-height: 84px;
  padding: 0.6rem 0.9rem;
  text-decoration: none;
}
.bh-5e1c-b-logo img {
  max-height: 26px;
  width: auto;
  max-width: 128px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.06);
  mix-blend-mode: multiply;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.bh-5e1c-b-logo-nom {
  font-family: var(--f-titre);
  font-size: var(--tm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-texte);
}
.bh-5e1c-b-logo-src { font-size: 0.68rem; color: var(--c-texte-2); }

/* ── 7. pas à pas : la photo à gauche, les quatre étapes lisibles ───── */
.bh-5e1c-etapes-visuel { background: var(--c-fond-2); border-radius: var(--r-image); overflow: hidden; }
.bh-5e1c-etapes-visuel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 480px;
  object-fit: cover;
}
.bh-5e1c-etape { opacity: 1 !important; }
.bh-5e1c-etape[aria-current="true"], .bh-5e1c-etape.kv-actif {
  border-left: 4px solid var(--c-primaire);
}
.bh-5e1c-etape-ico svg { width: 24px; height: 24px; }

/* ── 8. bascule : la piste épouse les pastilles, le panneau prend la largeur ── */
.bh-5e1c-bascule .kv-interrupteur {
  display: inline-flex !important;
  flex-wrap: wrap;
  width: auto !important;
  max-width: 100%;
  gap: var(--e2);
  background: transparent !important;
}
.bh-5e1c-bascule .bh-5e1c-widget {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}
.bh-5e1c-bascule .bh-5e1c-widget > [hidden] { display: none !important; }

/* ── 9. engagements : le cadre de la Lottie ne reste jamais vide ────── */
.bh-5e1c-lottie {
  align-self: stretch;
  min-height: 320px;
  border-radius: var(--r-carte);
  background-color: var(--c-doux);
  background-image: radial-gradient(circle at 30% 25%,
    color-mix(in srgb, var(--c-primaire) 22%, transparent) 0 38%, transparent 39%),
    radial-gradient(circle at 72% 68%,
    color-mix(in srgb, var(--c-primaire) 16%, transparent) 0 30%, transparent 31%);
  overflow: hidden;
}
.bh-5e1c-lottie div, .bh-5e1c-lottie svg { width: 100%; height: 100%; display: block; }

/* ── 10. pages À propos et Mentions légales : deux colonnes ─────────── */
.usine-page-cols { display: grid; gap: var(--e6); align-items: start; }
@media (min-width: 1024px) {
  .usine-page-cols { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); }
}
.usine-page-cote {
  display: grid;
  gap: var(--e3);
  align-content: start;
  padding: var(--e4);
  border: 1px solid var(--c-bord);
  border-radius: var(--r-carte);
  background: var(--c-surface);
}
.usine-page-cote .usine-plan-titre { margin: 0; }
.usine-page-cote ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.usine-page-cote li { color: var(--c-texte-2); line-height: 1.5; }
.usine-cote-lien { margin: 0; }
.bh-5e1c-tableau { width: 100%; }
.bh-5e1c-tableau th { width: 42%; text-align: left; }

/* ── 11. page signature : portrait large, libellés lisibles ─────────── */
.usine-auteur-hero { max-width: none; }
@media (min-width: 760px) {
  .usine-auteur-hero { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--e6); }
}
.usine-auteur-portrait img { max-width: none; }
.usine-auteur-chiffre span { color: var(--c-texte-2); font-size: var(--tm); }
.usine-plan-note { justify-items: start; text-align: left; }
.usine-plan-note span { max-width: min(68ch, 38em); }

/* ── 12. page rubrique : bas de colonne rempli ─────────────────────── */
.usine-rubrique-grille { align-items: start; }
.usine-rubrique-cote { align-self: start; }

/* ═══════════════════ tour 4 : consignes du portier (26/09) ═══════════════════ */

/* ── A. LIGHT FORCÉ SUR TOUS LES GABARITS ─────────────────────────────
   Aucune bascule de thème n'est visible : le site est en light, y compris
   quand un script (ou le portier) pose .dark / data-theme="dark" sur <html>.
   Les jetons clairs de da.css sont réaffirmés ici, en !important, pour battre
   da.css et home.css qui déclarent les mêmes sélecteurs plus haut dans le <head>. */
html,
html.light,
html[data-theme="light"],
html.dark,
html[data-theme="dark"],
html[data-mode="dark"],
html.theme-dark,
body.dark {
  color-scheme: light;
  --c-fond: #f7f6f7 !important;
  --c-fond-2: #ece8ee !important;
  --c-surface: #fefefe !important;
  --c-texte: #2c2131 !important;
  --c-texte-2: #67536e !important;
  --c-primaire: #883fa6 !important;
  --c-sur-primaire: #f8f5f9 !important;
  --c-secondaire: #8d5ea1 !important;
  --c-sur-secondaire: #f8f5f9 !important;
  --c-primaire-texte: #7f3b9b !important;
  --c-secondaire-texte: #714b81 !important;
  --c-doux: #e8e0eb !important;
  --c-sur-doux: #231429 !important;
  --c-bord: #d8d1db !important;
  --c-ombre: #1e0f24 !important;
  --o-carte: 0 18px 40px -12px color-mix(in srgb, #1e0f24 28%, transparent) !important;
  --o-survol: 0 18px 40px -12px color-mix(in srgb, #1e0f24 28%, transparent) !important;
  --carte-fond: #fefefe !important;
  --carte-encre: #2c2131 !important;
  --carte-encre-2: #67536e !important;
  --carte-lien: #7f3b9b !important;
  --carte-bord: 1px solid #d8d1db !important;
  --btn-fond: #8d5ea1 !important;
  --btn-texte: #f8f5f9 !important;
  --btn-bord: 2px solid #2c2131 !important;
  --btn-ombre: 4px 4px 0 #2c2131 !important;
  --btn-deco: none !important;
  --lien-couleur: #7f3b9b !important;
  --lien-deco: underline !important;
  --lien-epaisseur: 1px !important;
  --lien-fond: transparent !important;
  --lien-fond-encre: #7f3b9b !important;
  --c-sur-accent: #f8f5f9 !important;
}
/* da.css pose aussi les jetons sombres SUR l'élément [data-bh-home] lui-même :
   une déclaration directe l'emporterait sur l'héritage, on la neutralise. */
[data-theme="dark"] [data-bh-home],
[data-mode="dark"] [data-bh-home],
.dark [data-bh-home] {
  --c-fond: inherit; --c-fond-2: inherit; --c-surface: inherit; --c-texte: inherit;
  --c-texte-2: inherit; --c-primaire: inherit; --c-sur-primaire: inherit; --c-secondaire: inherit;
  --c-sur-secondaire: inherit; --c-primaire-texte: inherit; --c-secondaire-texte: inherit;
  --c-doux: inherit; --c-sur-doux: inherit; --c-bord: inherit; --c-ombre: inherit;
  --o-carte: inherit; --o-survol: inherit; --carte-fond: inherit; --carte-encre: inherit;
  --carte-encre-2: inherit; --carte-lien: inherit; --carte-bord: inherit; --btn-fond: inherit;
  --btn-texte: inherit; --btn-bord: inherit; --btn-ombre: inherit; --btn-deco: inherit;
  --lien-couleur: inherit; --lien-deco: inherit; --lien-epaisseur: inherit; --lien-fond: inherit;
  --lien-fond-encre: inherit;
}
/* Le thème (Astroplate) porte ses surfaces sombres par des jetons Tailwind posés
   sur :root dans le bundle _astro/Base.*.css, chargé APRÈS cette feuille : les
   utilitaires dark:, l'accordéon, le bouton primaire et le fond du <body> lisent
   --color-darkmode-*. On les fait pointer sur la palette claire de la DA, une fois
   pour toutes : plus aucune surface ne bascule, sur aucun gabarit. */
html:root {
  --color-darkmode-body: var(--c-fond) !important;
  --color-darkmode-light: var(--c-fond-2) !important;
  --color-darkmode-border: var(--c-bord) !important;
  --color-darkmode-primary: var(--c-primaire) !important;
  --color-darkmode-text: var(--c-texte) !important;
  --color-darkmode-text-dark: var(--c-texte) !important;
  --color-darkmode-text-light: var(--c-texte-2) !important;
}
html.dark body, html[data-theme="dark"] body, html[data-mode="dark"] body, html.theme-dark body, body.dark {
  background-color: var(--c-fond) !important;
  color: var(--c-texte) !important;
  color-scheme: light;
}

/* Le bandeau est le premier enfant du header collant : la marge intérieure haute du
   header le décollait du bord (mesuré 24 px à 1440, 19,2 à 390), or socle:bandeau-colle
   exige 0 en haut, 0 à gauche et 100 % de la largeur. On annule cette seule marge. */
.header { padding-top: 0 !important; }
/* Cibles tactiles du header : socle:cibles-tactiles mesure tout <a> et <button> du
   header à 390 (le lien du logo tombait à 34 px, la hauteur de l'image). Le lien
   porte la zone de touche, l'image garde sa taille (socle:logo-header). */
.header a,
.header button { display: inline-flex; align-items: center; min-height: 44px; }
/* Le portier interroge TOUS les <header> de la page (celui du site et les en-têtes de
   bloc de la home) : les liens d'en-tête de bloc mesuraient 20 px à 390. */
.bh-5e1c-home header a,
.bh-5e1c-home header button { display: inline-flex; align-items: center; min-height: 44px; }

/* ── B. BANDEAU DU HAUT : UN SEUL MESSAGE ÉDITORIAL, JAMAIS TRONQUÉ ────
   Plus de défilé de titres : un message intemporel, statique, dans le header
   collant. Il passe sur deux lignes en mobile plutôt que d'être coupé au bord. */
.header .usine-bandeau {
  max-height: none;
  align-items: stretch;
  background: var(--c-primaire);
  color: var(--c-sur-primaire);
}
.header .usine-bandeau .usine-bandeau-int {
  overflow: visible;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.45rem;
}
.header .usine-bandeau .usine-bandeau-message {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--f-texte);
  font-size: var(--t1);
  line-height: 1.35;
  color: var(--c-sur-primaire);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.header .usine-bandeau .usine-bandeau-fermer { align-self: center; }
@media (max-width: 639px) {
  .header .usine-bandeau .usine-bandeau-message { font-size: 0.8125rem; line-height: 1.3; }
}

/* ── C. LOGOS DES ORGANISMES : RANGÉE CENTRÉE, AUCUN MOT GOMMÉ ────────
   Le masque du défilé ne mord plus que les deux bords extrêmes ; la rangée est
   centrée verticalement dans son bloc et chaque logo est net et à la même
   hauteur optique (aucune initiale, aucun pictogramme générique). */
[data-defile] {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.bh-5e1c-b-logos { padding-block: var(--e7); }
.bh-5e1c-b-logos .bh-5e1c-int { display: flex; flex-direction: column; }
.bh-5e1c-logos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e5);
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 0;
}
.bh-5e1c-defile-logos { padding-block: 0; }
.bh-5e1c-defile-logos .kv-piste { align-items: center; }
.bh-5e1c-b-logo {
  height: auto;
  min-height: 84px;
  justify-content: center;
}
.bh-5e1c-b-logo img,
.bh-5e1c-defile-logos img {
  height: 26px !important;
  max-height: 26px !important;
  width: auto;
  max-width: 128px;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ── D. À LA UNE : CHAQUE CELLULE DU BENTO EST REMPLIE ───────────────
   La grande vignette porte sa photo sur toute la carte (position relative +
   image absolue en object-fit: cover) ; les quatre cartes à vignette laissent
   la photo prendre la hauteur restante, donc aucune bande blanche interne. */
.bh-5e1c-b-articles .bh-5e1c-bento { align-items: stretch; }
.bh-5e1c-b-articles .bh-5e1c-bento > .bh-5e1c-carte {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Sous 1024 px la grille n'a plus de rangée qui tienne la grande carte : l'image et le
   voile y sont tous deux en position absolue (section 5), donc la carte se réduisait à
   sa bordure (2 px mesurés à 390 et 900). On lui rend une hauteur de photo. */
@media (max-width: 1023px) {
  .bh-5e1c-b-articles .bh-5e1c-bento .bh-5e1c-cs-superpose { min-height: 16rem; }
}
/* La grande vignette : la couverture plein cadre est déjà posée par home.css
   (.bh-5e1c-cs-superpose .bh-5e1c-c-img : position absolute, inset 0, height 100 %,
   aspect-ratio auto) sur une carte elle-même en position relative. On n'y touche pas :
   c'est la géométrie du bento-7 (vedette sur une seule rangée, plafond de 30rem) qui
   garde l'image sous les 480 px du socle, sans plafond CSS sur la carte. */
.bh-5e1c-b-articles .bh-5e1c-bento .bh-5e1c-cs-image-haut > .bh-5e1c-c-media {
  flex: 1 1 auto;
  min-height: 9rem;
  margin: 0;
}
.bh-5e1c-b-articles .bh-5e1c-bento .bh-5e1c-cs-image-haut > .bh-5e1c-c-media img {
  width: 100%;
  height: 100%;
  min-height: 9rem;
  aspect-ratio: auto;
  object-fit: cover;
}
.bh-5e1c-b-articles .bh-5e1c-bento .bh-5e1c-cs-image-haut > .bh-5e1c-c-corps { flex: 0 0 auto; }
.bh-5e1c-b-articles .bh-5e1c-bento .bh-5e1c-c-corps > .bh-5e1c-c-suite { margin-top: auto; }

/* ── E. PAS À PAS : UNE PHOTO PAR ÉTAPE, DANS LE DOM ─────────────────
   Les quatre photos de terrain sont chargées dans la figure (data-etapes-photo),
   visibles ensemble, sans opacité nulle ni changement au défilement. */
.bh-5e1c-b-etapes .bh-5e1c-etapes-visuel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
  margin: 0;
  align-self: start;
}
.bh-5e1c-b-etapes .bh-5e1c-etapes-visuel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--r-image);
  opacity: 1 !important;
}
@media (min-width: 1024px) {
  .bh-5e1c-b-etapes .bh-5e1c-etapes-visuel {
    position: sticky;
    top: calc(var(--header-h, 6rem) + 1rem);
  }
}

/* ── F. MANIFESTE : LES TROIS COLONNES DESCENDENT AU BAS DU BLOC ─────
   À gauche les repères pris avant de publier, au centre la photo et les
   chiffres de la rédaction, à droite les cartes. Aucune colonne vide. */
.bh-5e1c-b-manifeste .bh-5e1c-int { align-items: stretch; }
.bh-5e1c-b-manifeste .bh-5e1c-entete {
  position: static;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  max-width: none;
}
.bh-5e1c-b-manifeste .bh-5e1c-manifeste-reperes {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  margin-top: var(--e5);
}
.bh-5e1c-b-manifeste .bh-5e1c-manifeste-reperes .bh-5e1c-c-suite { margin-top: var(--e3); }
.bh-5e1c-b-manifeste .bh-5e1c-split { align-items: stretch; }
.bh-5e1c-b-manifeste .bh-5e1c-split-cote {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
  min-width: 0;
}
.bh-5e1c-b-manifeste .bh-5e1c-split-media {
  position: static;
  align-self: stretch;
  margin: 0;
}
.bh-5e1c-b-manifeste .bh-5e1c-split-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--r-image);
}
.bh-5e1c-b-manifeste .bh-5e1c-manifeste-cote {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-top: auto;
}
.bh-5e1c-b-manifeste .bh-5e1c-manifeste-cote .bh-5e1c-c-suite { margin-top: var(--e3); }
.bh-5e1c-b-manifeste .bh-5e1c-cote-liste li,
.bh-5e1c-b-manifeste .bh-5e1c-manifeste-cote .bh-5e1c-cote-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--c-bord);
  color: var(--c-texte);
}
.bh-5e1c-b-manifeste .bh-5e1c-cote-liste li svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--c-primaire-texte);
}
.bh-5e1c-b-manifeste .bh-5e1c-cote-liste li span:last-child { color: var(--c-texte-2); }

/* ── G. TÉMOIGNAGES ET ÉQUIPE : LA COLONNE DE GAUCHE COUVRE LE BLOC ──
   Elle porte la note, la répartition des avis, la méthode de recueil et les
   dernières signatures ; son dernier élément touche le bas du bloc. */
.bh-5e1c-b-avis .bh-5e1c-int { align-items: stretch; }
.bh-5e1c-b-avis .bh-5e1c-entete {
  position: static;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  max-width: none;
}
.bh-5e1c-b-avis .bh-5e1c-cote-bas {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  margin-top: auto;
  padding-top: var(--e6);
}
.bh-5e1c-b-avis .bh-5e1c-cote-liste li,
.bh-5e1c-b-auteurs .bh-5e1c-cote-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--c-bord);
  color: var(--c-texte);
}
.bh-5e1c-b-avis .bh-5e1c-cote-liste li span:last-child,
.bh-5e1c-b-auteurs .bh-5e1c-cote-liste li span:last-child { color: var(--c-texte-2); }

.bh-5e1c-b-auteurs .bh-5e1c-split { align-items: stretch; }
.bh-5e1c-b-auteurs .bh-5e1c-cote {
  position: static;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.bh-5e1c-b-auteurs .bh-5e1c-cote > .bh-5e1c-split-grand { margin-bottom: 0; }
.bh-5e1c-b-auteurs .bh-5e1c-cote > .bh-5e1c-c-suite { margin-top: auto; }
.bh-5e1c-b-auteurs .bh-5e1c-cote-liste li a { width: 100%; }

/* ── H. DERNIERS VIDES DE COLONNES ET DE RANGÉES ──────────────────────
   Logos : plus aucune gomme aux extrémités du rail. À la une : la carte de
   la dernière rangée passe en carte horizontale, les trois cartes d'une même
   rangée font la même hauteur. Rubriques, manifeste, cas concrets, charte :
   chaque colonne descend au bas de son bloc. */

/* ── H1. rail de logos : aucune tuile gommée, aucune tuile vide ─────── */
[data-defile] {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ── H2. à la une : rangées d'égale hauteur, lien collé au bas ──────── */
.bh-5e1c-b-articles .bh-5e1c-bento {
  align-items: stretch;
}
.bh-5e1c-b-articles .bh-5e1c-bento > .bh-5e1c-carte {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.bh-5e1c-b-articles .bh-5e1c-bento > .bh-5e1c-cs-texte > .bh-5e1c-c-suite,
.bh-5e1c-b-articles .bh-5e1c-bento > .bh-5e1c-cs-image-haut > .bh-5e1c-c-corps > .bh-5e1c-c-suite {
  margin-top: var(--e3);
}

/* ── H3. à la une : la carte de la dernière rangée passe à l'horizontale ─
   Conteneur en position relative, photo de l'article en absolu sur la moitié
   droite, texte sur la moitié gauche : la carte suit son contenu et sa
   moitié droite n'est plus blanche. */
.bh-5e1c-b-articles .bh-5e1c-bento > .bh-5e1c-cs-image-droite {
  display: block;
  position: relative;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.bh-5e1c-b-articles .bh-5e1c-bento > .bh-5e1c-cs-image-droite > .bh-5e1c-c-corps {
  position: relative;
  z-index: 1;
  width: 50%;
  margin: 0;
  padding: var(--e4);
  display: flex;
  flex-direction: column;
  gap: var(--e2, 0.5rem);
}
.bh-5e1c-b-articles .bh-5e1c-bento > .bh-5e1c-cs-image-droite > .bh-5e1c-c-visuel-droite {
  position: absolute;
  inset: 0 0 0 auto;
  display: block;
  width: 50%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
@media (max-width: 639px) {
  .bh-5e1c-b-articles .bh-5e1c-bento > .bh-5e1c-cs-image-droite > .bh-5e1c-c-corps {
    width: 100%;
  }
  .bh-5e1c-b-articles .bh-5e1c-bento > .bh-5e1c-cs-image-droite > .bh-5e1c-c-visuel-droite {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ── H4. rubriques : la colonne de gauche descend au bas du bloc ────── */
.bh-5e1c-b-rubriques .bh-5e1c-split {
  align-items: stretch;
}
.bh-5e1c-b-rubriques .bh-5e1c-cote {
  position: static;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.bh-5e1c-b-rubriques .bh-5e1c-cote > .bh-5e1c-c-suite {
  margin-top: auto;
}
.bh-5e1c-b-rubriques .bh-5e1c-split-media {
  margin: 0;
}
.bh-5e1c-b-rubriques .bh-5e1c-split-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--r-image);
}
.bh-5e1c-cote-derniers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.bh-5e1c-cote-derniers a {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--c-bord);
  color: var(--c-texte);
  text-decoration: none;
}
.bh-5e1c-cote-derniers a:hover {
  color: var(--c-primaire-texte);
}
.bh-5e1c-dernier-ico {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-bord);
  border-radius: 50%;
  color: var(--c-primaire-texte);
}
.bh-5e1c-dernier-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--tm);
  line-height: 1.25;
}
.bh-5e1c-dernier-txt strong {
  font-family: var(--f-titre);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primaire-texte);
}

/* ── H5. manifeste : visuel à gauche, repères et cartes à droite ────── */
.bh-5e1c-b-manifeste .bh-5e1c-manifeste-gauche {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
  min-width: 0;
}
.bh-5e1c-b-manifeste .bh-5e1c-manifeste-gauche .bh-5e1c-split-media {
  margin: auto 0 0;
}
.bh-5e1c-b-manifeste .bh-5e1c-manifeste-droite {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
  min-width: 0;
}
.bh-5e1c-b-manifeste .bh-5e1c-manifeste-droite .bh-5e1c-manifeste-reperes {
  margin-top: 0;
}
.bh-5e1c-b-manifeste .bh-5e1c-manifeste-droite .bh-5e1c-split-liste {
  margin-top: auto;
}

/* ── H6. cas concrets et charte : la colonne de gauche couvre le bloc ─ */
.bh-5e1c-b-cas .bh-5e1c-int,
.bh-5e1c-b-charte .bh-5e1c-int {
  align-items: stretch;
}
.bh-5e1c-cote-bloc {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
  min-width: 0;
}
.bh-5e1c-cote-bloc > .bh-5e1c-entete {
  position: static;
  max-width: none;
}
.bh-5e1c-cote-bloc > .bh-5e1c-cote-bas {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  margin-top: auto;
}
.bh-5e1c-cote-bloc > .bh-5e1c-cote-bas > .bh-5e1c-split-media {
  margin: 0;
}
.bh-5e1c-cote-bloc > .bh-5e1c-cote-bas .bh-5e1c-split-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--r-image);
}
.bh-5e1c-cote-bloc .bh-5e1c-cote-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--c-bord);
  color: var(--c-texte);
}
.bh-5e1c-cote-bloc .bh-5e1c-cote-liste li svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--c-primaire-texte);
}
.bh-5e1c-encadre-bas {
  display: flex;
  flex-direction: column;
  gap: var(--e2, 0.5rem);
  padding: var(--e4);
  border: 1px solid var(--c-bord);
  border-radius: var(--r-carte);
  background: var(--c-surface);
}
.bh-5e1c-encadre-bas .bh-5e1c-c-suite {
  margin: 0;
}
/* Les cartes d'en face prennent la même hauteur, donc aucune colonne ne
   s'arrête avant le bas du bloc. */
.bh-5e1c-b-cas .bh-5e1c-colle {
  height: 100%;
}
.bh-5e1c-b-cas .bh-5e1c-colle-liste,
.bh-5e1c-b-charte .bh-5e1c-engagements {
  height: 100%;
  align-content: stretch;
}
.bh-5e1c-b-cas .bh-5e1c-colle-liste > .bh-5e1c-carte,
.bh-5e1c-b-charte .bh-5e1c-engagements > .bh-5e1c-carte {
  height: 100%;
}


/* ═════════════════════════ TOUR 6 ═════════════════════════
   A. rail de logos : piste sans gap (boucle sans couture) et bords effacés
      sur la largeur d'une tuile, donc aucune tuile rognée ni blanche à
      l'entrée du défilé.
   B. à la une : la carte large suit son contenu (visuel plafonné à 240 px,
      texte centré verticalement), la rangée du bas n'est plus forcée à 30rem.
   C. équipe : la colonne de gauche descend jusqu'au bas du bloc.
   D. FAQ : la carte d'appel est centrée sur la liste d'accordéons. */

/* ── A1. le defile avance d'une cellule ENTIERE (steps) : la fenetre ne
   contient jamais une tuile rognee, donc plus de mask ni de coin vide ──── */
.bh-5e1c-defile-logos {
  position: relative;
  z-index: 3;
  background: var(--c-fond-2);
  --cellule: 200px;
  --cellules: 5;
  width: calc(var(--cellules) * var(--cellule));
  margin-inline: auto;
  overflow: hidden;
  padding-block: 0;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
@media (max-width: 1199px) { .bh-5e1c-defile-logos { --cellule: 190px; --cellules: 4; } }
@media (max-width: 899px)  { .bh-5e1c-defile-logos { --cellule: 180px; --cellules: 3; } }
@media (max-width: 599px)  { .bh-5e1c-defile-logos { --cellule: 160px; --cellules: 2; } }
/* annule le margin-right: 3rem de kit-vivant.css l.46 et le gap de habillage.css */
.bh-5e1c-defile-logos .kv-piste { gap: 0; align-items: center; }
.bh-5e1c-defile-logos .kv-piste > * {
  flex: 0 0 var(--cellule);
  width: var(--cellule);
  margin-right: 0 !important;
}
@media (prefers-reduced-motion: no-preference) {
  .bh-5e1c-defile-logos .kv-piste {
    animation-name: kv-defile;
    animation-timing-function: steps(8);
    animation-iteration-count: infinite;
  }
}
.bh-5e1c-b-logo {
  background: none;
  border: 0;
  box-shadow: none;
  min-height: 84px;
  height: auto;
  justify-content: center;
}

/* l'en-tete du bloc est sticky (top:161px) et passe donc sur le rail : il
   doit etre opaque, et c'est le rail qui reste au-dessus pour que le texte
   de l'intro ne se lise pas au travers des tuiles */
.bh-5e1c-b-logos .bh-5e1c-entete {
  background: var(--c-fond-2);
  /* 26/09 : le bandeau opaque n'avait aucune marge interieure, le numero et le titre
     touchaient son bord (home:cartes-marge-interne). Le fond s'elargit de la marge, le
     texte reste aligne sur le reste du bloc. */
  padding-inline: var(--e4);
  margin-inline: calc(-1 * var(--e4));
}
/* toutes les tuiles a la meme hauteur : un libelle sur deux lignes decalait
   d'un coup le logo de la tuile de 7px sous les autres */
.bh-5e1c-defile-logos .bh-5e1c-b-logo-nom {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  text-align: center;
}

/* ── B1. à la une : la dernière rangée prend la hauteur de son contenu ── */
@media (min-width: 1024px) {
  .bh-5e1c-b-articles .bh-5e1c-bento-7 {
    grid-template-rows: minmax(11rem, 30rem) minmax(11rem, 30rem) auto;
  }
}

/* ── B2. à la une : carte horizontale, visuel plafonné, texte centré ──── */
@media (min-width: 640px) {
  .bh-5e1c-b-articles .bh-5e1c-bento > .bh-5e1c-cs-image-droite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }
  .bh-5e1c-b-articles .bh-5e1c-bento > .bh-5e1c-cs-image-droite > .bh-5e1c-c-corps {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: var(--e4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--e2, 0.5rem);
  }
  .bh-5e1c-b-articles .bh-5e1c-bento > .bh-5e1c-cs-image-droite > .bh-5e1c-c-visuel-droite {
    position: static;
    inset: auto;
    display: block;
    width: 100%;
    height: 240px;
    max-height: 240px;
    object-fit: cover;
    border-radius: 0;
  }
}

/* ── C. équipe : photo de la rédaction, domaines par signature ────────── */
.bh-5e1c-b-auteurs .bh-5e1c-equipe-photo { margin: 0; }
.bh-5e1c-b-auteurs .bh-5e1c-equipe-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--r-image);
}
.bh-5e1c-b-auteurs .bh-5e1c-cote-liste a.bh-5e1c-dom { align-items: center; }
.bh-5e1c-b-auteurs .bh-5e1c-cote-liste span.bh-5e1c-dom-ico {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--c-primaire-texte);
}
.bh-5e1c-b-auteurs .bh-5e1c-cote-liste span.bh-5e1c-dom-count { white-space: nowrap; }

/* ── D. FAQ : carte d'appel centrée sur la liste d'accordéons ─────────── */
.bh-5e1c-faq { align-items: center; }
.bh-5e1c-faq-aide { display: grid; gap: var(--e3); }
.bh-5e1c-faq-aide .bh-5e1c-cote-liste { margin: 0; }
.bh-5e1c-faq-aide .bh-5e1c-cote-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--c-bord);
  font-size: var(--tm);
  color: var(--c-texte);
}
.bh-5e1c-faq-aide .bh-5e1c-cote-liste svg { flex: 0 0 auto; color: var(--c-primaire-texte); }

/* ═══════════════ tour 7 : consignes du portier (26/09) ═══════════════ */

/* ── A. VRAI OU FAUX : une carte, un pied dans la carte, un tiers droit ──
   Le bloc se lisait comme un formulaire brut : affirmation seule, pastilles
   arrondies hors du système de boutons, compteur et « Suivante » posés hors
   de la carte aux deux bords. Repris : boutons du site, pied dans la carte
   (compteur + barre à cinq segments + « Suivante »), icône Lucide près du
   kicker, tiers droit occupé par les règles du jeu. Une seule affirmation à
   l'écran (règle Cedia) : c'est le kit_vivant qui masque les autres. */
.bh-5e1c-quiz-carte {
  padding: var(--e6);
  border: var(--carte-bord);
  border-radius: var(--r-carte);
  background: var(--carte-fond);
  box-shadow: var(--o-carte);
}
.bh-5e1c-quiz-carte .bh-5e1c-quiz-split { max-width: none; margin: 0; display: block; }
/* L'affirmation n'est plus une carte posée dans la carte. */
.bh-5e1c-quiz-carte .bh-5e1c-quiz-q {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  /* 26/09 : `.__BH__carte` pose son fond en !important (home.css), donc l'article gardait un
     fond de carte sans marge interieure : le texte touchait le bord de sa propre boite
     (home:cartes-marge-interne). On rend le fond transparent, comme le voulait la regle. */
  background: transparent !important;
  box-shadow: none;
}
.bh-5e1c-quiz-tete {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: 0 0 var(--e5);
  color: var(--c-primaire-texte);
}
.bh-5e1c-quiz-tete svg { flex: 0 0 auto; }
.bh-5e1c-quiz-tete .bh-5e1c-kicker { margin: 0; color: inherit; }
.bh-5e1c-quiz-carte .bh-5e1c-quiz-affirmation { margin: 0; }

/* Tiers droit : les règles du jeu, une icône par ligne, aucune zone vide. */
.bh-5e1c-quiz-aide {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e5);
  border-radius: var(--r-image);
  background: var(--c-fond-2);
}
.bh-5e1c-quiz-aide > svg { flex: 0 0 auto; color: var(--c-primaire-texte); }
.bh-5e1c-quiz-aide .bh-5e1c-cote-liste { margin: 0; }
.bh-5e1c-quiz-aide .bh-5e1c-cote-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--c-bord);
  font-size: var(--tm);
  line-height: 1.45;
  color: var(--c-texte);
}
.bh-5e1c-quiz-aide .bh-5e1c-cote-liste li:last-child { border-bottom: 0; }
.bh-5e1c-quiz-aide .bh-5e1c-cote-liste svg { flex: 0 0 auto; color: var(--c-primaire-texte); }
.bh-5e1c-quiz-aide-note { margin: auto 0 0; font-size: var(--tm); line-height: 1.5; color: var(--c-texte-2); }

/* Pied de carte : compteur, barre à cinq segments, « Suivante » à droite. */
.bh-5e1c-quiz-carte .kv-quiz-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3) var(--e4);
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 2px solid var(--c-texte);
}
/* Compteur et barre à cinq segments groupés à gauche, « Suivante » seul à
   droite : la barre vient du kit (kit-vivant.css, --kv-quiz-prog posée sur
   [data-quiz] par le kit, un segment par affirmation). */
.bh-5e1c-quiz-carte .kv-quiz-gauche { flex: 1 1 auto; min-width: 0; }
.bh-5e1c-quiz-carte .kv-quiz-compteur {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Réponses et « Suivante » : les boutons du site, pas des pastilles. */
.bh-5e1c-quiz-carte .kv-choix { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }
.bh-5e1c-quiz-carte .kv-choix .kv-bouton {
  min-width: 8.5rem;
  padding: 0.7em 1.4em;
  font-family: var(--f-titre);
  font-size: var(--t1);
  font-weight: 700;
  border: var(--btn-bord);
  border-radius: var(--r-bouton);
  background: transparent;
  color: var(--c-texte);
  box-shadow: var(--btn-ombre);
  transition: transform .15s ease;
}
.bh-5e1c-quiz-carte .kv-choix .kv-bouton:hover { transform: translateY(-2px); }
.bh-5e1c-quiz-carte .kv-choix .kv-bouton.kv-choisi { background: var(--c-primaire); color: var(--c-sur-primaire); }
.bh-5e1c-quiz-carte .kv-quiz-pied .kv-bouton {
  padding: 0.7em 1.4em;
  font-family: var(--f-titre);
  font-weight: 700;
  border: var(--btn-bord);
  border-radius: var(--r-bouton);
  background: var(--btn-fond);
  color: var(--btn-texte);
  box-shadow: var(--btn-ombre);
}
.bh-5e1c-quiz-carte .kv-quiz-pied .kv-bouton:disabled { opacity: .4; box-shadow: none; transform: none; }
.bh-5e1c-quiz-carte .kv-quiz-pied .kv-encore { background: transparent; color: var(--c-texte); }

@media (min-width: 900px) {
  .bh-5e1c-quiz-carte .bh-5e1c-quiz[data-quiz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
    /* Trois rangées explicites : kicker, affirmation, pied. La colonne de
       droite court sur les trois (grid-row: 1 / 4), donc elle occupe toute
       la hauteur de la carte au lieu de s'arrêter sous le kicker. */
    grid-template-rows: auto 1fr auto;
    column-gap: var(--e6);
    row-gap: var(--e4);
    align-items: start;
  }
  .bh-5e1c-quiz-carte .bh-5e1c-quiz-tete { grid-column: 1; grid-row: 1; }
  .bh-5e1c-quiz-carte .bh-5e1c-quiz[data-quiz] > [data-question] { grid-column: 1; grid-row: 2; }
  .bh-5e1c-quiz-carte .bh-5e1c-quiz[data-quiz] > .kv-quiz-pied { grid-column: 1; grid-row: 3; }
  .bh-5e1c-quiz-carte .bh-5e1c-quiz-aide { grid-column: 2; grid-row: 1 / 4; align-self: stretch; }
}

/* ── B. PAS À PAS : la photo de l'étape est dans sa carte ─────────────
   L'accroche annonce « Chacune a sa photo » : chaque carte d'étape porte
   sa vignette 16/9, au-dessus du numéro. Plus de colonne photo qui
   s'arrête à mi-hauteur, plus de zone vide sous elle. Quatre cartes :
   quatre en ligne en bureau, deux par deux en dessous (jamais d'orphelin). */
.bh-5e1c-b-etapes .bh-5e1c-etapes { grid-template-columns: minmax(0, 1fr); }
.bh-5e1c-b-etapes .bh-5e1c-etapes-liste {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e5);
}
@media (min-width: 640px) {
  .bh-5e1c-b-etapes .bh-5e1c-etapes-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bh-5e1c-b-etapes .bh-5e1c-etapes-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bh-5e1c-b-etapes .bh-5e1c-etape { align-content: start; }
.bh-5e1c-b-etapes .bh-5e1c-etape > .bh-5e1c-etape-media {
  grid-column: 1 / -1;
  margin: 0 0 var(--e3);
}
.bh-5e1c-b-etapes .bh-5e1c-etape-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-image);
}

/* ── C. À PROPOS : du liant dans les sections, colonne de droite utile ──
   « Notre promesse » et « Qui écrit » n'étaient que des paragraphes ; la
   colonne de droite s'arrêtait à mi-page. Chiffres clés à icône, portraits
   des signatures, colonne collée et complétée par trois repères. */
.usine-page-cote {
  position: sticky;
  top: calc(var(--header-h, 72px) + 1rem);
  align-self: start;
}
.usine-cote-reperes { display: grid; gap: var(--e3); margin: 0; padding: 0; list-style: none; }
.usine-cote-reperes li {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  font-size: var(--tm);
  line-height: 1.45;
  color: var(--c-texte-2);
}
.usine-cote-reperes strong { color: var(--c-texte); }
.usine-cote-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-doux);
  color: var(--c-primaire-texte);
}
.usine-chiffres-cles,
.usine-signatures {
  list-style: none;
  margin: var(--e5) 0;
  padding: 0;
  display: grid;
  gap: var(--e3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
  .usine-chiffres-cles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usine-signatures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.usine-chiffres-cles li {
  display: grid;
  gap: var(--e2);
  padding: var(--e4);
  border: 1px solid var(--c-bord);
  border-radius: var(--r-carte);
  background: var(--c-surface);
}
.usine-chiffres-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-doux);
  color: var(--c-primaire-texte);
}
.usine-chiffres-valeur {
  font-family: var(--f-titre);
  font-size: var(--t3);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-texte);
}
.usine-chiffres-label { font-size: var(--tm); line-height: 1.45; color: var(--c-texte-2); }
.usine-signatures li a {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--c-bord);
  border-radius: var(--r-carte);
  background: var(--c-surface);
  color: var(--c-texte);
  text-decoration: none;
}
.usine-signatures li a:hover { border-color: var(--c-primaire); }
.usine-signatures img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.usine-signatures strong { display: block; font-family: var(--f-titre); }
.usine-signatures span { display: block; font-size: var(--tm); color: var(--c-texte-2); }

/* ── I. VRAI OU FAUX : le retour de réponse et le bouton désactivé ────
   Le verdict et l'explication étaient deux paragraphes nus sous les boutons :
   on ne savait pas si « Ça dépend » était un troisième choix. Ils forment
   maintenant un encadré de retour à icône Lucide, masqué par le kit tant que
   le lecteur n'a pas répondu (data-explication porté par l'encadré entier).
   Le bouton « Suivante » désactivé perdait son système : opacité globale 0.4
   sur un fond accent, texte blanc sur lavande (≈ 2:1). Fond clair explicite,
   texte encre, opacité 1, géométrie bh-bouton conservée. */
.bh-5e1c-quiz-retour {
  margin-top: var(--e4);
  padding: var(--e4) var(--e5);
  border: 2px solid var(--c-bord);
  border-left: 6px solid var(--c-primaire);
  border-radius: var(--r-carte);
  background: var(--c-fond-2);
}
.bh-5e1c-quiz-retour[hidden] { display: none; }
.bh-5e1c-quiz-retour-tete {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: 0 0 var(--e2);
  color: var(--c-primaire-texte);
}
.bh-5e1c-quiz-retour-tete svg { flex: 0 0 auto; }
.bh-5e1c-quiz-retour-tete .bh-5e1c-c-kicker { margin: 0; color: inherit; }
.bh-5e1c-quiz-carte .bh-5e1c-quiz-verdict {
  margin: 0;
  font-family: var(--f-titre);
  font-size: var(--t2);
  font-weight: 800;
}
.bh-5e1c-quiz-carte .bh-5e1c-quiz-retour .bh-5e1c-quiz-expl { margin: var(--e2) 0 0; }
.bh-5e1c-quiz-carte .kv-quiz-pied .kv-bouton:disabled {
  opacity: 1;
  background: var(--c-fond-2);
  color: var(--c-texte);
  border: var(--btn-bord);
  border-radius: var(--r-bouton);
  box-shadow: var(--btn-ombre);
  transform: none;
  cursor: not-allowed;
}

/* ── J. PAS À PAS : les quatre vignettes à la même hauteur ────────────
   L'étape active était bordée de 4 px à gauche : sa vignette faisait 2 px de
   moins que les trois autres. La mise en avant passe par un anneau accent
   (outline, hors flux) et l'échelle du titre, sans toucher à la géométrie ni
   à la place de la photo. La vignette garde un fond tant qu'elle se charge. */
.bh-5e1c-b-etapes .bh-5e1c-etape.kv-actif,
.bh-5e1c-b-etapes .bh-5e1c-etape[aria-current="true"] {
  border-color: var(--c-bord);
  border-left-width: 1px;
  outline: 3px solid var(--c-primaire);
  outline-offset: -3px;
  box-shadow: none;
  transform: none;
}
.bh-5e1c-b-etapes .bh-5e1c-etape.kv-actif .bh-5e1c-etape-titre,
.bh-5e1c-b-etapes .bh-5e1c-etape[aria-current="true"] .bh-5e1c-etape-titre { font-size: var(--t3); }
.bh-5e1c-b-etapes .bh-5e1c-etape > .bh-5e1c-etape-media {
  background: var(--c-fond-2);
  border-radius: var(--r-image);
}

/* ── K. ENGAGEMENTS : le panneau de la Lottie remplit sa colonne ──────
   [data-lottie] borne la largeur à 220 px : le panneau s'arrêtait 174 px
   avant le bord droit du conteneur, sur toute la hauteur du bloc. Il prend
   désormais toute sa colonne, l'animation restant à sa taille et calée en bas. */
.bh-5e1c-b-engagements .bh-5e1c-lottie {
  width: 100%;
  max-width: none;
  display: grid;
  align-content: end;
  justify-items: center;
}
.bh-5e1c-b-engagements .bh-5e1c-lottie > div {
  width: min(100%, 20rem);
  height: auto;
  aspect-ratio: 1;
  margin-inline: auto;
}

/* ── L. MANIFESTE : la colonne de gauche se remplit du haut au bas ────
   La photo était calée en bas de colonne (margin auto 0 0) : 330 px de fond
   vide entre la fin du chapeau et le haut de la photo, quand la colonne de
   droite était dense sur la même hauteur. La photo remonte juste sous le
   chapeau, la colonne continue avec le mot de la rédaction et deux des quatre
   chiffres (les deux autres restent à droite). */
.bh-5e1c-b-manifeste .bh-5e1c-manifeste-gauche .bh-5e1c-split-media {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
}
.bh-5e1c-b-manifeste .bh-5e1c-manifeste-gauche .bh-5e1c-split-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--r-image);
}
.bh-5e1c-manifeste-suite {
  display: grid;
  gap: var(--e4);
}
.bh-5e1c-manifeste-citation,
.bh-5e1c-manifeste-chiffres {
  margin: 0;
  padding: var(--e4) var(--e5);
  border: var(--carte-bord);
  border-radius: var(--r-carte);
  background: var(--c-fond-2);
}
.bh-5e1c-manifeste-citation-tete {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: 0 0 var(--e3);
  color: var(--c-primaire-texte);
}
.bh-5e1c-manifeste-citation-tete svg { flex: 0 0 auto; }
.bh-5e1c-manifeste-citation-tete .bh-5e1c-c-kicker { margin: 0; color: inherit; }
.bh-5e1c-manifeste-citation .bh-5e1c-cote-citation { font-size: var(--t1); }
.bh-5e1c-manifeste-citation .bh-5e1c-c-meta { margin: var(--e3) 0 0; }
.bh-5e1c-manifeste-chiffres .bh-5e1c-cote-liste { margin: 0; }
.bh-5e1c-manifeste-chiffres .bh-5e1c-cote-liste li:last-child { border-bottom: 0; }
.bh-5e1c-manifeste-chiffres .bh-5e1c-cote-liste li span:last-child {
  font-family: var(--f-titre);
  font-weight: 700;
  color: var(--c-primaire-texte);
}