:root {
  --f-titre: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-texte: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-graisse-titre: 700;
  --f-casse-kicker: none;
  --tm: 0.833rem;
  --t1: 1.0rem;
  --t2: 1.2rem;
  --t3: 1.44rem;
  --t4: 1.728rem;
  --t5: 2.074rem;
  --t6: 2.488rem;
  --t7: 2.986rem;
  --t-hero: clamp(2.07rem, 6vw, 3.58rem);
  --e1: 0.3rem;
  --e2: 0.6rem;
  --e3: 0.9rem;
  --e4: 1.2rem;
  --e5: 1.8rem;
  --e6: 2.4rem;
  --e7: 3.6rem;
  --e8: 4.8rem;
  --r-carte: 6px;
  --r-bouton: 6px;
  --r-image: 4px;
  --largeur: 1360px;
  --ico-trait: 1.5;
  --header-h: 72px;
  --c-fond: #fbfafc;
  --c-fond-2: #eceaf2;
  --c-surface: #ffffff;
  --c-texte: #211d35;
  --c-texte-2: #534a78;
  --c-primaire: #4d35b0;
  --c-sur-primaire: #f6f5f9;
  --c-secondaire: #706798;
  --c-sur-secondaire: #f6f6f9;
  --c-primaire-texte: #4731a5;
  --c-secondaire-texte: #5a527a;
  --c-doux: #e1dfec;
  --c-sur-doux: #181429;
  --c-bord: #d1cddf;
  --c-voile: #0e0c18;
  --c-sur-voile: #ffffff;
  --c-ombre: #130f24;
  --c-primaire-fonce: #3c2a8a;
  --o-carte: 0 1px 2px color-mix(in srgb, #130f24 8%, transparent), 0 8px 24px color-mix(in srgb, #130f24 8%, transparent);
  --o-survol: 0 18px 40px -12px color-mix(in srgb, #130f24 28%, transparent);
  --carte-fond: #ffffff;
  --carte-encre: #211d35;
  --carte-encre-2: #534a78;
  --carte-lien: #4731a5;
  --carte-bord: 1px solid var(--c-bord);
  --btn-fond: var(--c-primaire);
  --btn-texte: var(--c-sur-primaire);
  --btn-bord: 0 solid transparent;
  --btn-ombre: none;
  --btn-deco: none;
  --lien-couleur: #4731a5;
  --lien-deco: underline;
  --lien-epaisseur: 3px;
  --lien-fond: transparent;
  --lien-fond-encre: #4731a5;
  --c-juste: #15803d;
  --c-faux: #b91c1c;
}
html.dark, html[data-theme="dark"], html[data-mode="dark"], html.theme-dark, body.dark, [data-theme="dark"] [data-bh-home] {
  --c-fond: #12101b;
  --c-fond-2: #1b1828;
  --c-surface: #221e31;
  --c-texte: #e7e5f1;
  --c-texte-2: #b3adcd;
  --c-primaire: #7762d0;
  --c-sur-primaire: #faf9fc;
  --c-secondaire: #8d85ad;
  --c-sur-secondaire: #1b1924;
  --c-primaire-texte: #bdb2f0;
  --c-secondaire-texte: #c6c2d8;
  --c-doux: #2b2541;
  --c-sur-doux: #f6f5f9;
  --c-bord: #3e3857;
  --c-voile: #0e0c18;
  --c-sur-voile: #ffffff;
  --c-ombre: #040307;
  --c-primaire-fonce: #2f2170;
  --o-carte: 0 1px 2px color-mix(in srgb, #040307 8%, transparent), 0 8px 24px color-mix(in srgb, #040307 8%, transparent);
  --o-survol: 0 18px 40px -12px color-mix(in srgb, #040307 28%, transparent);
  --carte-fond: #221e31;
  --carte-encre: #e7e5f1;
  --carte-encre-2: #b3adcd;
  --carte-lien: #bdb2f0;
  --carte-bord: 1px solid var(--c-bord);
  --btn-fond: var(--c-primaire);
  --btn-texte: var(--c-sur-primaire);
  --btn-bord: 1px solid var(--c-primaire);
  --btn-ombre: none;
  --btn-deco: none;
  --lien-couleur: #bdb2f0;
  --lien-deco: underline;
  --lien-epaisseur: 3px;
  --lien-fond: transparent;
  --lien-fond-encre: #bdb2f0;
}

body { font-family: var(--f-texte); }
h1, h2, h3, h4 { font-family: var(--f-titre); }

/* ---------------------------------------------------------------------------
   Composants du site, alignes sur les tokens ci-dessus (une seule famille
   d accent). Le bouton est PLEIN et la carte BORDEE comme dans le theme.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font: inherit; font-weight: 600; line-height: 1.2;
  padding: .62rem 1.15rem; border-radius: var(--r-bouton);
  background: var(--c-primaire); color: var(--c-sur-primaire);
  border: 1px solid var(--c-primaire); text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:hover { background: var(--c-primaire-fonce); border-color: var(--c-primaire-fonce); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primaire) 25%, transparent); }
.btn-secondaire { background: var(--c-surface); color: var(--c-primaire-texte); border: 1px solid var(--c-bord); }
.btn-secondaire:hover { background: var(--c-doux); border-color: var(--c-primaire); color: var(--c-primaire-texte); }
.btn-petit { padding: .4rem .8rem; font-size: var(--tm); }
.carte {
  background: var(--c-surface); border: 1px solid var(--c-bord); border-radius: var(--r-carte);
  box-shadow: var(--o-carte); transition: border-color .18s ease, box-shadow .18s ease;
}
.carte:hover { border-color: var(--c-primaire); box-shadow: var(--o-survol); }
.tag {
  display: inline-flex; align-items: center; gap: .35rem; background: var(--c-doux); color: var(--c-texte-2);
  border-radius: 999px; padding: .22rem .7rem; font-size: var(--tm); font-weight: 500;
  text-decoration: none; transition: color .18s ease, background .18s ease;
}
.tag:hover { color: var(--c-sur-primaire); background: var(--c-primaire); }
.ico { flex: none; vertical-align: -.18em; }
.lien { color: var(--c-primaire-texte); text-underline-offset: 3px; }
.lien:hover { color: var(--c-primaire); }
.kicker { color: var(--c-secondaire); font-size: var(--tm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.entete { border-bottom: 1px solid var(--c-bord); background: var(--c-surface); }
.entete-int { max-width: var(--largeur); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: .55rem 1rem; }
.entete-marque { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--c-texte); }
.entete-marque img { display: block; width: 32px; height: 32px; }
.entete-nom { font-family: var(--f-titre); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }
.entete-nav { display: none; align-items: center; gap: .15rem; }

.entete-nav > .btn { margin-left: var(--e6, 2rem); }
.entete-nav a { white-space: nowrap; }
.entete-lien { display: block; padding: .45rem .7rem; border-radius: var(--r-bouton); font-weight: 500; font-size: .95rem; color: var(--c-texte-2); text-decoration: none; white-space: nowrap; }
.entete-lien:hover { background: var(--c-doux); color: var(--c-primaire-texte); }
.entete-lien[aria-current="page"] { color: var(--c-primaire-texte); font-weight: 600; }
.entete-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--c-bord); background: var(--c-surface); border-radius: var(--r-bouton); color: var(--c-texte); cursor: pointer; }
.entete-mobile { display: none; border-top: 1px solid var(--c-bord); padding: .6rem 1rem 1rem; }
.entete-mobile.ouvert { display: block; }
@media (min-width: 1024px) { .entete-nav { display: flex; } .entete-burger { display: none; } }
.bandeau { display: flex; align-items: center; justify-content: center; gap: .8rem; background: var(--c-fond-2); color: var(--c-texte); border-bottom: 1px solid var(--c-bord); padding: .5rem 2.4rem .5rem 1rem; font-size: var(--tm); position: relative; }
.bandeau-txt { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: center; }
.bandeau-titres { display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; }
.bandeau-fermer { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--c-texte-2); cursor: pointer; padding: .25rem; display: inline-flex; }
.bandeau-fermer:hover { color: var(--c-primaire-texte); }
.pied { border-top: 1px solid var(--c-bord); background: var(--c-surface); margin-top: var(--e7); }
.pied-int { max-width: var(--largeur); margin-inline: auto; padding: var(--e6) 1rem var(--e4); display: grid; gap: var(--e5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .pied-int { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .pied-int { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; } }
.pied h2 { font-size: var(--t1); margin: 0 0 .7rem; font-weight: 700; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pied a { color: var(--c-texte-2); text-decoration: none; font-size: var(--tm); }
.pied a:hover { color: var(--c-primaire-texte); text-decoration: underline; }
.pied-bas { border-top: 1px solid var(--c-bord); }
.pied-bas-int { max-width: var(--largeur); margin-inline: auto; padding: var(--e3) 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between; font-size: var(--tm); color: var(--c-secondaire); }
.pi { display: block; }
.pi-hero { position: relative; border-radius: var(--r-image); overflow: hidden; }
.pi-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pi-tete { padding: var(--e6) 1rem var(--e5); max-width: var(--largeur); margin-inline: auto; }
.pi-tete h1 { font-size: clamp(2rem, 4.4vw, var(--t6)); line-height: 1.05; letter-spacing: -.02em; margin: .5rem 0 var(--e3); }
.pi-chapo { font-size: var(--t2); color: var(--c-texte-2); max-width: 60ch; }
.pi-sec { padding: var(--e6) 1rem; max-width: var(--largeur); margin-inline: auto; }
.pi-sec > h2 { font-size: var(--t4); margin: 0 0 var(--e4); }
.pi-texte { max-width: 68ch; }
.grille { display: grid; gap: var(--e4); grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) { .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grille-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 720px) { .grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Une seule colonne : la page 500 garde la colonne de lecture (44 rem) et n'a donc pas la place de
   deux colonnes de carte — à 1440 px, 2 × 310 px laissent 270 px de texte, sous les 300 px de
   `page_cassee.colonne_etroite` (garde du parc 30/09/2026). On élargit la colonne. */
.grille-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.carte-corps { padding: var(--e4); display: grid; gap: .55rem; align-content: start; }
.carte-corps h3 { margin: 0; font-size: var(--t2); line-height: 1.25; }
.carte-corps h3 a { color: var(--c-texte); text-decoration: none; }
.carte-corps h3 a:hover { color: var(--c-primaire-texte); }
.carte-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-carte) var(--r-carte) 0 0; }
.meta { color: var(--c-secondaire); font-size: var(--tm); margin: 0; }
.suite { display: inline-flex; align-items: center; gap: .35rem; color: var(--c-primaire-texte); font-weight: 600; font-size: var(--tm); text-decoration: none; }
.suite:hover { text-decoration: underline; }
.etoiles { display: inline-flex; gap: .1rem; color: var(--c-primaire-texte); margin: 0; }
.champ { display: grid; gap: .3rem; font-weight: 600; font-size: var(--tm); }
.champ input, .champ select, .champ textarea {
  font: inherit; font-weight: 400; padding: .6rem .8rem; border-radius: var(--r-bouton);
  border: 1px solid var(--c-bord); background: var(--c-fond); color: var(--c-texte);
}
.champ input:focus-visible, .champ textarea:focus-visible, .champ select:focus-visible {
  outline: none; border-color: var(--c-primaire); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primaire) 22%, transparent);
}
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 1024px) { .entete-int { padding-inline: 1.5rem; } }
.entete-fixe { position: sticky; top: 0; z-index: 50; }
.entete-logo { display: block; height: 32px; width: auto; }
.pied-marque { display: inline-flex; align-items: center; }
.pied-marque img { display: block; height: 30px; width: auto; }
.entete-mobile a { display: block; padding: .55rem .2rem; color: var(--c-texte); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--c-doux); }
.entete-mobile a:last-child { border-bottom: 0; }
.entete-mobile a:hover { color: var(--c-primaire-texte); }
.cta-final { background: var(--c-voile); color: var(--c-sur-voile); padding: var(--e7) 1rem; }
.cta-final-in { max-width: var(--largeur); margin-inline: auto; display: grid; gap: var(--e5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .cta-final-in { grid-template-columns: 1.1fr .9fr; gap: var(--e6); } }
.cta-final h2 { font-size: var(--t4); margin: .4rem 0 var(--e3); color: var(--c-sur-voile); }
.cta-final p { color: var(--c-sur-voile); opacity: .88; }
.cta-final .kicker { color: var(--c-sur-voile); opacity: .72; }
.cta-points { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: .5rem; }
.cta-points li { display: flex; align-items: flex-start; gap: .5rem; color: var(--c-sur-voile); opacity: .9; }
.cta-form { background: var(--c-surface); border-radius: var(--r-carte); padding: var(--e4); display: grid; gap: .8rem; }
.cta-form .meta { color: var(--c-secondaire); opacity: 1; font-size: var(--tm); margin: 0; }
.cta-form .champ { color: var(--c-texte); }
.encart { background: var(--c-fond-2); border: 1px solid var(--c-bord); border-radius: var(--r-carte); padding: var(--e4); display: grid; gap: .6rem; }
.encart h3 { margin: 0; font-size: var(--t1); }
.encart p { margin: 0; color: var(--c-texte-2); }
.grille > * { min-width: 0; }
.liste-def { display: grid; gap: var(--e3); }
.liste-def dt { font-weight: 700; font-family: var(--f-titre); }
.liste-def dd { margin: .2rem 0 0; color: var(--c-texte-2); }
.tableau { width: 100%; border-collapse: collapse; font-size: var(--tm); }
.tableau th, .tableau td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--c-bord); vertical-align: top; }
.tableau th { background: var(--c-fond-2); font-weight: 700; }
.tableau tr:last-child td { border-bottom: 0; }
.sommaire { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
/* Blocs ajoutes a la home : ils reprennent les classes du theme et n ajoutent que la
   mise en page des widgets du kit. */
.bh-93e0-lottie { min-height: 200px; display: grid; place-items: center; }
.bh-93e0-lottie svg { max-width: 260px; height: auto; }
.kv-logos { overflow: hidden; border: 1px solid var(--c-bord); border-radius: var(--r-carte); background: var(--c-surface); padding: .9rem 0; }
.kv-logos .kv-piste { display: flex; align-items: center; gap: 2.4rem; width: max-content; padding-inline: 1.2rem; }
.kv-logo { display: inline-flex; align-items: center; gap: .5rem; height: 34px; }
.kv-logo img { max-height: 30px; width: auto; max-width: 130px; object-fit: contain; filter: grayscale(1); opacity: .82; transition: filter .2s ease, opacity .2s ease; }
.kv-logo:hover img { filter: none; opacity: 1; }
.kv-legendes { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: .35rem .9rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); font-size: var(--tm); color: var(--c-texte-2); }
.kv-legendes strong { color: var(--c-texte); }
.kv-widget { display: grid; gap: var(--e4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .kv-widget { grid-template-columns: .95fr 1.05fr; } }
.kv-widget-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-image); }
.kv-calcul { background: var(--c-surface); border: 1px solid var(--c-bord); border-radius: var(--r-carte); box-shadow: var(--o-carte); padding: var(--e4); display: grid; gap: .85rem; }
.kv-sortie { margin: 0; font-family: var(--f-titre); font-weight: 700; font-size: var(--t3); color: var(--c-texte); }
.kv-sortie output { color: var(--c-primaire-texte); }
.kv-sortie-2 { margin: 0; color: var(--c-texte-2); }
.kv-facture { width: 100%; border-collapse: collapse; font-size: var(--tm); }
.kv-facture th, .kv-facture td { padding: .45rem .6rem; border-bottom: 1px solid var(--c-bord); text-align: left; }
.kv-facture td:last-child, .kv-facture th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.kv-facture tfoot td { font-weight: 700; }
.kv-mention { margin: .5rem 0 0; font-size: var(--tm); color: var(--c-texte-2); }
.kv-bascule { display: grid; gap: var(--e3); }
.kv-interrupteur { display: inline-flex; gap: .3rem; background: var(--c-fond-2); border: 1px solid var(--c-bord); border-radius: var(--r-bouton); padding: .25rem; }
.kv-interrupteur button { font: inherit; font-weight: 600; font-size: var(--tm); border: 0; background: transparent; color: var(--c-texte-2); padding: .4rem .8rem; border-radius: var(--r-bouton); cursor: pointer; }
.kv-interrupteur button.kv-actif { background: var(--c-primaire); color: var(--c-sur-primaire); }
.kv-cadre { background: var(--c-surface); border: 1px solid var(--c-bord); border-radius: var(--r-carte); padding: var(--e4); }
.kv-bascule [data-met-en-avant] { opacity: .55; transition: opacity .18s ease; }
.kv-bascule [data-met-en-avant].kv-en-avant { opacity: 1; border-color: var(--c-primaire); }
.kv-quiz { display: grid; gap: var(--e3); }
.kv-question { background: var(--c-surface); border: 1px solid var(--c-bord); border-radius: var(--r-carte); padding: var(--e3) var(--e4); }
.kv-question-texte { margin: 0 0 .7rem; font-weight: 600; color: var(--c-texte); }
.kv-explication { margin: .7rem 0 0; color: var(--c-texte-2); font-size: var(--tm); }
.kv-choix { display: flex; gap: .5rem; }
.kv-choix .kv-bouton { font: inherit; font-weight: 600; font-size: var(--tm); padding: .4rem .9rem; border-radius: var(--r-bouton); border: 1px solid var(--c-bord); background: var(--c-fond); color: var(--c-texte); cursor: pointer; }
.kv-choix .kv-bouton:hover { border-color: var(--c-primaire); color: var(--c-primaire-texte); }
.kv-choix .kv-bouton.kv-choisi { background: var(--c-primaire); border-color: var(--c-primaire); color: var(--c-sur-primaire); }
.kv-question .kv-explication { display: flex; align-items: flex-start; gap: .45rem; }
.kv-etat { display: inline-flex; flex: none; margin-top: .1em; }
.kv-etat svg { width: 18px; height: 18px; }
.kv-question.kv-juste .kv-etat { color: var(--c-juste); }
.kv-question.kv-rate .kv-etat { color: var(--c-faux); }
.kv-choix .kv-bouton.kv-juste { background: color-mix(in srgb, var(--c-juste) 14%, transparent); border-color: var(--c-juste); color: var(--c-juste); }
.kv-choix .kv-bouton.kv-rate { background: color-mix(in srgb, var(--c-faux) 12%, transparent); border-color: var(--c-faux); color: var(--c-faux); }
.kv-quiz-score { margin: 0; font-weight: 700; font-family: var(--f-titre); color: var(--c-primaire-texte); }
.kv-etapes { display: grid; gap: var(--e4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .kv-etapes { grid-template-columns: 1.05fr .95fr; } .kv-etapes-visuel-cadre { position: sticky; top: calc(var(--header-h) + 1rem); order: 2; } }
.kv-etapes-visuel-cadre img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-image); transition: opacity .2s ease; }
.kv-etapes-visuel-cadre img.kv-change { opacity: .25; }
.kv-etapes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); counter-reset: kv-etape; }
.kv-etapes-liste li { background: var(--c-surface); border: 1px solid var(--c-bord); border-left: 3px solid var(--c-bord); border-radius: var(--r-carte); padding: var(--e3) var(--e4); }
.kv-etapes-liste li.kv-actif { border-left-color: var(--c-primaire); }
.kv-etapes-liste h3 { margin: 0 0 .3rem; font-size: var(--t1); }
.kv-etapes-liste p { margin: 0; color: var(--c-texte-2); font-size: var(--tm); }
.kv-num-etape { font-family: var(--f-titre); font-weight: 700; color: var(--c-primaire-texte); }
.kv-faq { display: grid; gap: .6rem; }
.kv-faq details { background: var(--c-surface); border: 1px solid var(--c-bord); border-radius: var(--r-carte); padding: .8rem 1rem; }
.kv-faq summary { cursor: pointer; font-weight: 600; color: var(--c-texte); }
.kv-faq summary::marker { color: var(--c-primaire-texte); }
.kv-faq p { margin: .6rem 0 0; color: var(--c-texte-2); }
.kv-lettre { display: grid; gap: var(--e4); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .kv-lettre { grid-template-columns: .9fr 1.1fr; } }
.kv-lettre img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-image); }
.kv-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.kv-chiffre { font-variant-numeric: tabular-nums; }

/* ─── tête d’article : la rubrique, le titre, le chapeau et la photo ───────── */
.tete-article { max-width: 68ch; margin: 0 auto var(--e5); }
.tete-article .titre-article {
  font-size: clamp(2rem, 4.4vw, var(--t6));
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: .5rem 0 var(--e3);
  font-weight: var(--f-graisse-titre, 700);
}
.chapo-article { font-size: var(--t2); color: var(--c-texte-2); }
.tete-article .pi-hero { margin-top: var(--e4); }


/* bande de logos : quatre marques, hauteur fixe, largeur auto plafonnee, defile lent */
.kv-logos[data-defile] .kv-piste { gap: 0; }
.kv-logos[data-defile] .kv-logo { height: 40px; gap: 0; }
.kv-logos[data-defile] .kv-logo img { height: 28px; width: auto; max-height: 28px; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .25s ease, opacity .25s ease; }
.kv-logos[data-defile] .kv-logo img:hover { filter: none; opacity: 1; }
.kv-logos[data-defile="lent"] .kv-piste { animation-duration: 64s; }
.bh-93e0-b-partenaires .kv-legendes { display: flex; flex-wrap: wrap; gap: .5rem .75rem; justify-content: center; }
.bh-93e0-b-partenaires .kv-legendes li { display: inline-flex; align-items: center; }
.bh-93e0-b-partenaires .kv-legendes .tag { background: var(--c-doux); color: var(--c-texte-2); border: 1px solid var(--c-bord); border-radius: 999px; padding: .2rem .65rem; font-size: var(--tp, .78rem); text-decoration: none; }

/* ─── Plancher de lecture de la page elle-même (garde du parc 30/09/2026) ───────────────
   `page_cassee.colonne_etroite` refuse tout texte de 60 caractères et plus dans une boîte de moins
   de 300 px. À 390 px les gouttières de page se cumulaient : `main` (1 rem) + `.pi-sec` ou
   `.cta-final` (1 rem) + la marge intérieure de la carte (--e4, 19,2 px) ne laissaient que 286 px au
   paragraphe — mesuré sur /devis/, /a-propos/, /services/, /equipe/, /temoignages/, /tags/…  Sous
   720 px la page garde la gouttière de `main` et retire la sienne : on élargit la colonne, jamais on
   ne raccourcit un texte. */
@media (max-width: 719px) {
  .pi-sec, .cta-final { padding-inline: 0; }
}


@media (max-width: 719px) {
  .bh-93e0-home .kv-faq summary { display: block; }
  .bh-93e0-home .kv-faq summary > span { display: block; }
  .bh-93e0-home .kv-faq summary svg { display: block; margin-top: .4rem; }
}

/* Bloc lettre : le `<span class="meta">` posé dans un lien `.suite` est en ligne, donc mesuré à sa
   seule encre (~96 % de la colonne) : 64 caractères dans 249 px. Il prend la largeur de sa colonne. */
.cta-final .suite .meta { display: block; }

/* Avis : la signature (visage + nom + résultat) tient sur deux colonnes au bureau ; à 390 px le
   visage de 48 px ne laissait que 256 px au texte de la citation. Sous 640 px la signature s'empile.
   Trois classes : la copie figée de `home.css` pose la même règle à deux classes, et elle est
   chargée APRÈS `da.css`. */
@media (max-width: 639px) {
  .bh-93e0-home .bh-93e0-cs-citation .bh-93e0-c-signature { grid-template-columns: minmax(0, 1fr); }
}

/* usine:correctifs-home début */
/* Correctifs des blocs de home, recopiés sur chaque site à chaque build
   (astro_site.rafraichit_correctifs_home). bh-93e0- devient le préfixe du site. */


.bh-93e0-acc:not(details) { padding-inline: var(--e5); }
.bh-93e0-acc:not(details) > .bh-93e0-acc-corps { padding-inline: 0; }

/* FAQ : une seule flèche, sur la ligne de la question (le marqueur natif doublait le chevron). */
.bh-93e0-acc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.bh-93e0-acc > summary::-webkit-details-marker { display: none; }
.bh-93e0-acc > summary svg { flex: none; transition: transform .2s; }
.bh-93e0-acc[open] > summary svg { transform: rotate(180deg); }
.bh-93e0-acc > summary:not(:has(svg))::after { content: "+"; flex: none; font-weight: 400; }
.bh-93e0-acc[open] > summary:not(:has(svg))::after { content: "\2212"; }


.bh-93e0-b-faq .bh-93e0-entete { margin-inline: auto; text-align: center; }
.bh-93e0-b-faq .bh-93e0-accordeon { margin-inline: auto; }
/* Même FAQ dans une home « centrée » : le collage deux colonnes (.d-colle) gardait le titre dans
   la colonne de gauche et la règle [data-alignement=centre] .d-colle .entete le recalait à gauche,
   plus spécifique que la ligne ci-dessus (469 px à gauche, 791 px de vide à droite : revue-assurance.com,
   home:faq-centree, 26/09). La FAQ repasse en une colonne, en-tête centré. */
[data-alignement="centre"] .bh-93e0-b-faq.bh-93e0-d-colle > .bh-93e0-int { display: block; }
[data-alignement="centre"] .bh-93e0-b-faq.bh-93e0-d-colle > .bh-93e0-int > .bh-93e0-entete {
  margin-inline: auto; text-align: center; position: static;
}


.bh-93e0-carte:has(> .bh-93e0-c-corps) > .bh-93e0-c-suite { margin: 0 var(--e5) var(--e5); }


.bh-93e0-timeline .bh-93e0-c-media img, .bh-93e0-b-parcours .bh-93e0-c-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 320px; object-fit: cover; }
@media (min-width: 900px) {
  .bh-93e0-timeline .bh-93e0-carte:has(> .bh-93e0-c-media) { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--e5); align-items: start; }
  .bh-93e0-timeline .bh-93e0-carte:has(> .bh-93e0-c-media) > .bh-93e0-c-media { margin: 0; }
}


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


.bh-93e0-b-sujets .bh-93e0-mur { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e3); }
.bh-93e0-b-sujets .bh-93e0-mur-col { display: contents; }
.bh-93e0-b-sujets .bh-93e0-carte.bh-93e0-cs-pastille { background: transparent; border: 0; box-shadow: none; padding: 0; width: auto; }
.bh-93e0-c-pastille {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .55em 1.2em;
  border-radius: 999px; border: 1.5px solid var(--c-primaire); background: var(--carte-fond);
  color: var(--c-primaire-texte, var(--carte-encre)); text-decoration: none; font-weight: 600; cursor: pointer;
  transition: background .2s, color .2s, transform .15s;
}
.bh-93e0-c-pastille::after { content: "\2192"; font-weight: 400; }
.bh-93e0-c-pastille:hover, .bh-93e0-c-pastille:focus-visible { background: var(--c-primaire); color: var(--c-sur-primaire); transform: translateY(-1px); }


.bh-93e0-hero-actions { margin-top: var(--e5); }


.bh-93e0-c-chiffre { font-size: max(28px, var(--t6, 2rem)); }
.bh-93e0-c-label { font-size: max(14px, 1em) !important; }  /* !important : un .home .c-label de builder le ramenait à 12 px */
@media (max-width: 767px) { .bh-93e0-c-chiffre { font-size: max(24px, var(--t6, 1.75rem)); } }


.bh-93e0-hero.bh-93e0-hero-centre { position: relative; isolation: isolate; grid-template-rows: minmax(0, 1fr) !important; }
.bh-93e0-hero.bh-93e0-hero-centre > .bh-93e0-hero-bas { position: absolute !important; inset: 0; margin: 0 !important; z-index: -1; }
.bh-93e0-hero.bh-93e0-hero-centre > .bh-93e0-hero-bas img { width: 100% !important; height: 100% !important; max-height: none !important;
  object-fit: cover; border-radius: 0 !important; }
.bh-93e0-hero.bh-93e0-hero-centre > .bh-93e0-hero-bas::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 24, .66), rgba(8, 12, 24, .52)); }
.bh-93e0-home .bh-93e0-hero-centre :is(.bh-93e0-hero-kicker, .bh-93e0-hero-h1, .bh-93e0-hero-accroche) { color: #fff !important; }
.bh-93e0-home .bh-93e0-hero-centre .bh-93e0-bouton-2 { color: #fff !important; border-color: #fff !important; background: transparent !important; }


.bh-93e0-hero.bh-93e0-hero-bandeau { position: relative; isolation: isolate; justify-content: center !important; }
.bh-93e0-hero.bh-93e0-hero-bandeau > .bh-93e0-hero-haut { position: absolute !important; inset: 0; margin: 0 !important; z-index: -1;
  height: auto !important; }
.bh-93e0-hero.bh-93e0-hero-bandeau > .bh-93e0-hero-haut img { width: 100% !important; height: 100% !important; max-height: none !important;
  object-fit: cover; border-radius: 0 !important; }
.bh-93e0-hero.bh-93e0-hero-bandeau > .bh-93e0-hero-haut::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 24, .50), rgba(8, 12, 24, .72)); }
.bh-93e0-hero.bh-93e0-hero-bandeau > .bh-93e0-hero-bande { background: transparent !important; margin-block: auto; }
.bh-93e0-home .bh-93e0-hero-bandeau .bh-93e0-hero-bande :is(p, h1, li, span, time, a:not(.bh-93e0-bouton)) { color: #fff !important; }
.bh-93e0-home .bh-93e0-hero-bandeau .bh-93e0-bouton-2 { color: #fff !important; border-color: #fff !important; background: transparent !important; }


.bh-93e0-b-logos.bh-93e0-d-colle > .bh-93e0-int { display: flex !important; flex-direction: column; align-items: center; }
.bh-93e0-b-logos.bh-93e0-d-colle .bh-93e0-entete { position: static !important; text-align: center; max-width: 48rem; margin-inline: auto; }
.bh-93e0-b-logos.bh-93e0-d-colle .bh-93e0-entete > * { text-align: center !important; margin-inline: auto; }

/* Mode sombre (27/09, Intermediate-Astro) : un thème qui colore p et li en dur (p, li { color: #4e4b66 }) laissait ce gris
   sur les fonds sombres des blocs ; en sombre, le texte suit la couleur du bloc. */
:is(html.dark, [data-theme="dark"]) .bh-93e0-home :is(p, li) { color: inherit; }

/* Mosaique, carte « image seule » : l'image doit COUVRIR sa carte. Le garde-fou du socle
   (« img d'un bloc hors hero : 480 px au plus ») plafonnait l'image de la vedette (2 lignes x 2
   colonnes, 907 px) alors que le kit étire déjà le lien (`flex: 1 1 0%`) et demande `height: 100%`
   à l'image : la légende tombait 405 px sous l'image, vide mesuré DANS la carte
   (decorateur-maison.com 28/09, portier home:mosaique, trou_dans_carte 405 à 1440). */
.bh-93e0-mosaique .bh-93e0-cs-image-seule img { max-height: none !important; }


.bh-93e0-home .bh-93e0-int { width: min(100% - 2 * var(--e4), var(--largeur)); }
/* `-c-voile` porte la marge intérieure des cartes « superposées » (/tags/, /auteurs/) : sans elle,
   la carte reste à 294 px de texte après l'élargissement du conteneur. */
.bh-93e0-home .bh-93e0-c-corps,
.bh-93e0-home .bh-93e0-cs-texte, .bh-93e0-home .bh-93e0-cs-qr, .bh-93e0-home .bh-93e0-cs-fait,
.bh-93e0-home .bh-93e0-cs-citation, .bh-93e0-home .bh-93e0-c-voile { padding-inline: var(--e4); }


.bh-93e0-home .bh-93e0-cs-jalon, .bh-93e0-home .bh-93e0-cs-repere { padding-inline: var(--e4); }
.bh-93e0-home .bh-93e0-cs-jalon > .bh-93e0-c-corps,
.bh-93e0-home .bh-93e0-cs-repere > .bh-93e0-c-corps { padding-inline: 0; }
/* Une carte `cs-texte` qui enveloppe un `c-corps` paie DEUX fois la marge intérieure : la carte
   (--e5/--e4) ET le corps (--e4 posé plus haut sur TOUS les `.c-corps`). Le gabarit le sait
   (`home.css` : `.cs-texte > .c-corps { padding: 0 }`), mais `da.css` est chargé APRÈS `home.css`
   sur ces pages : la règle du gabarit (0,2,0) perd contre `.home .c-corps` (0,2,0) qui la suit.
   À 1440 px, trois colonnes de 361 px ne laissaient que 285 px de texte (seuil 300 px) sur
   `/projet`, `/realisations` et `/contact` — pages internes écrites à la main qui portent la
   classe ; à 390 px, la carte de 351 px laissait 281 px. Une classe de plus (0,3,0) pour l'emporter
   quel que soit l'ordre des feuilles, comme pour `.cs-jalon`/`.cs-repere`. Garde du parc
   02/10/2026, decorateur-maison.com. Figé par
   `tests/test_colonne_etroite_cs_texte_corps_20261002.py`. */
.bh-93e0-home .bh-93e0-cs-texte > .bh-93e0-c-corps { padding-inline: 0; }
@media (max-width: 639px) {
  .bh-93e0-home .bh-93e0-bloc .bh-93e0-timeline[data-frise] { padding-left: 0; }
  .bh-93e0-home .bh-93e0-bloc .bh-93e0-timeline[data-frise]::before,
  .bh-93e0-home .bh-93e0-bloc .bh-93e0-timeline[data-frise]::after,
  .bh-93e0-home .bh-93e0-bloc .bh-93e0-timeline[data-frise] > .bh-93e0-tl-pas::before { content: none; }
  .bh-93e0-home .bh-93e0-acc > summary { padding: var(--e4); }
  .bh-93e0-home .bh-93e0-acc-corps { padding: 0 var(--e4) var(--e4); }
}


.bh-93e0-home .bh-93e0-bloc .bh-93e0-car-piste { grid-auto-columns: minmax(22rem, 24rem); }

/* ─── Plancher de lecture : widget, résultat de calculateur, carte d'étape (garde du parc
   30/09/2026, maison-bien-etre.com) ───
   Trois familles de cartes du kit échappaient encore aux deux remèdes ci-dessus, parce qu'elles
   portent LEUR marge intérieure sur un élément que `.bh-93e0-c-corps` ne couvre pas :
   `.widget` (encadré d'une thématique, `padding: var(--e5)`), `.resultat` (sortie d'un
   calculateur, `padding: var(--e4) var(--e5)`) et la carte d'étape de `.b-etapes`, qui ajoute
   `padding-left: 1rem` plus 3 px de bord sous 900 px. À 390 px, une carte de 332 px laissait
   273 px de texte pour un paragraphe de plus de 60 caractères — mesuré sur la home
   (`p.bh-0c76-c-p`, `p.bh-0c76-widget-note`). L'horizontale passe à --e4 ; la carte d'étape perd
   son retrait sous 640 px, comme la frise.
   Les deux premiers sélecteurs portent `.bh-93e0-home` (0,2,0) contre la règle figée (0,1,0) ; le
   troisième porte en plus `.bh-93e0-carte`, car la copie figée écrit
   `.bh-93e0-home .bh-93e0-b-etapes [data-etape]` — soit (0,3,0), autant que deux classes plus un
   attribut : sans la classe de plus, l'ordre du document donne le dernier mot à `home.css`.

   ─── La TROISIÈME carte du même widget calculateur manquait (garde du parc 02/10/2026,
   actu-pme.com) ───
   Les deux remèdes ci-dessus couvrent `.widget` et `.resultat`, mais pas la carte du FORMULAIRE
   lui-même : `.calcul` (le `<form data-calcul>`, `padding: var(--e5)` dans les feuilles figées).
   Sur actu-pme.com à 390 px, la carte (338,8 px, bord 1 px) laisse 298,4 px au paragraphe meta de
   132 caractères (`p.bh-5e1c-c-meta`) — rouge `page_cassee:colonne_etroite` (seuil 300 px). Le
   même bloc est posé sur six sites du parc ; sa sortie `.calcul-sortie` (65/67 caractères) ne
   passait que de 0,4 px (300,4) et serait tombée au premier rendu différent. Les deux passent
   leur horizontale à --e4 : 311-313 px de texte.
   Le bloc `calcul` n'est plus dans `catalogue.BLOCS` (classe héritée, comme `.widget`/`.resultat`)
   : le remède ne peut atteindre les sites construits que par `correctifs.css`, réinjecté à chaque
   build. `.bh-93e0-home` (0,2,0) l'emporte sur les copies figées (0,1,0) et sur `retouche.css`.
   Figé par `tests/test_colonne_etroite_calcul_20261002.py`, en plus du test du 30/09. */
.bh-93e0-home .bh-93e0-widget { padding-inline: var(--e4); }
.bh-93e0-home .bh-93e0-resultat { padding-inline: var(--e4); }
.bh-93e0-home .bh-93e0-calcul, .bh-93e0-home .bh-93e0-calcul-sortie { padding-inline: var(--e4); }
@media (max-width: 639px) {
  .bh-93e0-home .bh-93e0-b-etapes [data-etape].bh-93e0-carte { padding-left: 0; }
}

/* ─── Plancher de lecture : LA FAMILLE DE CARTES, PAS SEULEMENT SES CAS PARTICULIERS (garde du
   parc 30/09/2026, mes-travaux-maison.com) ───
   Le remède du matin (`blocs_home/home.css` : `.c-corps` et `.cs-texte`/`cs-qr`/`cs-fait`/
   `cs-citation` passent leur marge HORIZONTALE de --e5 à --e4, et `.bh-93e0-int` sa gouttière de
   page de `2 * --e5` à `2 * --e4`) n'a été recopié ici que pour les cartes qui l'avaient déjà
   réclamé — `.cs-jalon`, `.cs-repere`, `.widget`, `.resultat`, `.b-etapes`. Les quatre styles
   généraux sont restés à --e5, et `home.css` ne se recopie pas : sur un site DÉJÀ CONSTRUIT le
   défaut d'origine subsiste intact. Dix-sept sites du parc portent encore la copie figée sans le
   remède, et il ne se voit que sur une carte `.cs-texte` : à 390 px, `.bh-93e0-int` à `2 * --e5`
   (1,8 rem sur six sites) plus --e5 de marge de carte donnent 292 px de paragraphe, 8 sous le
   seuil de `page_cassee:colonne_etroite` (mesuré sur `p.bh-096f-c-p.hm-chiffre-detail`, 77
   caractères). La règle ci-dessous est la copie EXACTE de celle du gabarit, avec la classe de
   `.bh-93e0-home` pour l'emportent sur la copie figée (0,2,0 contre 0,1,0), qui est chargée après
   `da.css`.
   Figé par `tests/test_colonne_etroite_famille_cartes_20260930.py`. */
.bh-93e0-home .bh-93e0-c-corps,
.bh-93e0-home .bh-93e0-cs-texte, .bh-93e0-home .bh-93e0-cs-qr,
.bh-93e0-home .bh-93e0-cs-fait, .bh-93e0-home .bh-93e0-cs-citation { padding-inline: var(--e4); }

/* La gouttière de page du gabarit, elle aussi absente des copies figées. Sur les six sites dont
   --e4 vaut 1,2 rem et --e5 1,8 rem, la carte seule laisse encore 292 px à 390 px (rouge) :
   `bh-93e0-int` ramené à `2 * --e4` donne 311 px. Sur les sites à --e4 1 rem (dont
   mes-travaux-maison.com), 308 px sans elle, 324 px avec. Mobile seulement : au-dessus, c'est
   `--largeur` qui plafonne le conteneur et rien ne bouge. */
@media (max-width: 639px) {
  .bh-93e0-home .bh-93e0-int { width: min(100% - 2 * var(--e4), var(--largeur)); }
}

/* ─── Plancher de lecture du vrai/faux « idées reçues » (garde du parc 30/09/2026,
   mes-travaux-maison.com) ───
   `.cs-idee .ir-faux` / `.ir-vrai` est une grille à DEUX pistes (icône 2,25rem + texte) avec
   `padding: var(--e5)` et aucune règle de repli : sous 640 px la carte fait la largeur de la
   page, et le texte tombe à 246-265 px selon le thème — sous les 300 px de
   `page_cassee:colonne_etroite` par construction, quelle que soit la phrase. Aucune réduction de
   marge ne suffit (à 358 px de carte, --e4 laisse 276 px) : l'icône passe AU-DESSUS du texte.
   Mesuré sur `p.bh-096f-c-p` du bloc manifeste (131 caractères, 260 px).
   Seize sites du parc portent la même règle figée sans repli ; le gabarit (`home.css`) porte le
   même repli pour les sites neufs, et cette copie a UNE classe de plus (0,3,0 contre 0,2,0) pour
   l'emporter sur une copie figée, `da.css` étant chargé AVANT `home.css`.
   Figé par `tests/test_colonne_etroite_cs_idee_20260930.py`. */
@media (max-width: 639px) {
  .bh-93e0-home .bh-93e0-cs-idee .bh-93e0-ir-faux,
  .bh-93e0-home .bh-93e0-cs-idee .bh-93e0-ir-vrai {
    grid-template-columns: minmax(0, 1fr); padding: var(--e4);
  }
}

/* Colonne titres + boutons du hero bandeau : sans règle, les éléments s empilaient sans espacement (01/10, test_prefixe_css). */
.bh-93e0-hero-cote { display: grid; gap: var(--e4); align-content: end; }
/* usine:correctifs-home fin */