/* bb-corrections-d8.nettoye.css : version nettoyée D10 (blocs 0.1/0.1b et 4.1 retirés, 4.10 limité à 768-980 px ; voir recette-d10/ecarts.md § 4).
   Original : bb-corrections-d8.css : lot D8, recette visuelle maquette v12 / goblackbond.com après les lots D7.1a/b/c (2026-10-08).
   58 pages x 3 largeurs relevées au Chromium sans tête (D-design/recette-d8/ecarts.md). À charger EN DERNIER, après
   bb-pages-l3c.css (uploads/bb-css/). Préfixe « .bb-m » (classe portée par body et par chaque section Divi).
   Un commentaire par écart : page(s), largeur, mesure (maquette -> site), cause (règle ou attribut relevé dans le DOM).
   Cette feuille suppose que bb-corrections-d5.css est remplacée par bb-corrections-d5.nettoye.css ; le bloc 0 ci-dessous
   neutralise en attendant les règles D5 et D4 devenues contradictoires avec les largeurs explicites de D7. */

/* ==================================================================================================
   0. GRILLE : rendre leurs largeurs aux colonnes Divi (attributs D7) — cause de la majorité des écarts de largeur
   ================================================================================================== */

/* 0.1 / 0.1b retirés D10 : sélecteur laissé ouvert par D9c (bloc rejeté par l'analyseur) et devenus redondants (bb-modeles D4 00
   et le flex-wrap de bb-global retirés par D9c : les rangées lisent l'attribut nowrap / wrap par point de rupture). */

/* 0.2 Toutes les pages, 768 : bb-modeles.css D4 00 « @media (max-width:1180px) colonne { flex: 0 0 100%; width: 100% } »
   empile toutes les colonnes de 981 à 1180 et sous 980, y compris celles dont l'attribut tablette garde deux colonnes
   (plans Adhérer 48 %, cartes Coaching 2 x 341, lettres du glossaire 12,5 %, e-book 48 %, accroche de l'en-tête) ;
   mesuré : accroche 111 px au lieu de 54 ; Coaching « Les thèmes prévus » 1281 -> 2128 ; IA « L'assistant » 1057 -> 1978.
   Une feuille ne peut pas « rendre » la valeur d'attribut effacée par width:100% : la règle D4 00 est à retirer de
   bb-modeles.css (voir ecarts.md § 5) ; ici on ne corrige que le flex, et l'en-tête (bloc 1). */
@media (max-width: 1180px) {
  .bb-m .et_pb_row.et_flex_row > .et_pb_column.et_flex_column:not(.bb-pillar) { flex: 0 1 auto; }
}

/* 0.3 Rangées « grille » de bb-corrections-d5.css 0.5 (.bb-rm9, .bb-m-g3, .bb-m-plans, .bb-ptiles5, .bb-faq-grid, .bb-m-ap-stats) :
   « width:auto!important ; flex:none » sur les colonnes et un gap de 18 à 86 px, alors que la rangée est redevenue flex
   (bb-global : display:flex!important) et que les attributs portent largeur + space-between (D7b). Les colonnes se
   dimensionnent par leur contenu (FAQ accueil 340 au lieu de 372). On rend la main aux attributs. */
.bb-m :is(.bb-rm9, .bb-m-g3, .bb-m-plans, .bb-ptiles5, .bb-faq-grid, .bb-m-ap-stats) > .et_pb_column { flex: 0 1 auto; }
.bb-m .et_pb_row.et_flex_row:is(.bb-rm9, .bb-m-g3, .bb-m-plans, .bb-ptiles5, .bb-faq-grid, .bb-m-ap-stats) { gap: 0 !important; justify-content: space-between; }

/* ==================================================================================================
   1. EN-TÊTE ET MÉGA-MENUS (toutes pages)
   ================================================================================================== */

/* 1.1 Méga-menus, 1440, 3 entrées : panneau .dnxte-mega-menu-panel à x 120 et large de 1440 (débordement à 1560 px,
   « Débuter le BDSM en toute sécurité » rogné à droite), posé à y 76 (il recouvre l'accroche ; maquette : x 0, y 127).
   Cause : mega-menu.js écrit « left:120px ; width:1200px » en style en ligne en se calant sur la rangée .bb-entete-nav
   (style en ligne « position:relative ; z-index:999 » posé par le même script) ; bb-entete-pied.css ne rend statique
   que la section, le menu et le li. On rend la rangée statique : le bloc conteneur redevient l'en-tête collant
   (0 -> 1440, 127 px), et le panneau se cale dessous. */
body.bb-m .et-l--header .bb-entete-nav.et_pb_row { position: static !important; }
body.bb-m .et-l--header .dnxte-mega-menu-panel { left: 0 !important; width: 100% !important; max-width: 100vw; top: 100% !important; transform: none; background: #FAF7F2 !important; }
body.bb-m .et-l--header .dnxte-mega-menu-panel::before { content: none; }

/* 1.2 Méga-menu Éducation, aperçu (colonne .bb-apercu, fond Encre) : titre h4 « Les Fondamentaux » en #241E1A sur
   #241E1A (illisible) et titres de cartes h5 en Encre ; cause : « :is(.bb-p-degrade, .bb-cat-hero) :is(h1..h4, p, a) { color:
   var(--bb-pi) } » (bb-global, L1) et « h1..h6 { color: var(--bb-encre) } » l'emportent sur la règle Bone de bb-entete-pied
   (h4 et h5 absents de sa liste). La classe du pilier actif (bb-p-les-fondamentaux…) n'est jamais posée sur .bb-apercu,
   donc --bb-pi vaut Encre : tout en Bone tant que le JS ne pose pas la classe (voir ecarts.md § 5). */
.bb-m .bb-apercu, .bb-m .bb-apercu :is(h2, h3, h4, h5, h6, p, a, li, span, small, .et_pb_module_header, .dnxte-post-grid-card-title),
body .et-l--header .bb-m .bb-apercu .et_pb_heading .et_pb_heading_container :is(h2, h3, h4, h5) { color: #FAF7F2 !important; }

/* 1.3 Méga-menu Éducation, aperçu : les 3 articles du Post Grid sont rendus en 3 colonnes de 118 / 151 / 114 px dans 380
   (titres 18 px sur 136 px de haut) ; maquette : liste verticale, 13,5 px, filet entre les lignes, 6 articles.
   Cause : « .dnxte-mega-menu-panel #et-boc .dnxte-post-grid-container { grid-template-columns: repeat(3, 1fr) } » et
   « …card-title { font-size: 18px } » (styles en ligne #dnxte-mega-menu-styles-head, spécificité avec id) l'emportent
   sur l'attribut « 1 colonne / 13,5 px ». 6 articles au lieu de 3 : attribut posts-per-page (générateur). */
.bb-m .bb-apercu .dnxte-post-grid-container { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
.bb-m .bb-apercu .dnxte-post-grid-card { border-top: 1px solid rgba(250, 247, 242, .14) !important; padding: 8px 0 !important; }
.bb-m .bb-apercu .dnxte-post-grid-card-title { font: 500 13.5px/1.35 var(--bb-fd, Poppins, sans-serif) !important; margin: 0 !important; }
.bb-m .bb-apercu .dnxte-post-grid-card-content { padding: 0 !important; }

/* 1.4 Méga-menu Coaching & e-books, 1440 : les 4 couvertures de [bb_ebooks_cartes] font 0 x 0 (bloc sombre de 774 x 359
   avec du texte sombre) ; maquette : 4 couvertures 180 x 240. Cause : le lien .bbeb-card-a hérite des règles du menu Divi
   (« .bb-menu li a { display:flex } » + lecteur.css « flex-direction:column », align-items:center) : .bbeb-cv, sans
   largeur propre, se réduit à 0 ; la liste hérite « .bb-menu :is(ul) { display:flex } » au lieu de la grille. */
.bb-m.bb-mega .bbeb-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; background: transparent !important; align-items: start; }
.bb-m.bb-mega .bbeb-card { width: auto; }
.bb-m.bb-mega .bbeb-card-a { display: flex; flex-direction: column; align-items: stretch !important; width: auto !important; min-height: 0; padding: 0 !important; }
.bb-m.bb-mega .bbeb-cv { width: 100% !important; }
body .et-l--header .et_pb_menu .nav li ul.bbeb-grid, body .et-l--header .bb-m.bb-mega .et_pb_code ul.bbeb-grid { background-color: transparent !important; background-image: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
body .et-l--header .bb-m.bb-mega .bbeb-card-pil, body .et-l--header .bb-m.bb-mega .bbeb-card-t, body .et-l--header .bb-m.bb-mega .bbeb-card-a > span, body .et-l--header .bb-m.bb-mega .bbeb-card-a > b { color: #241E1A !important; }
body .et-l--header .bb-m.bb-mega .bbeb-card-a .bbeb-cv * { color: var(--bbeb-ink, #FAF7F2) !important; }

/* 1.5 Méga-menu Communauté & App, 1440 : carte Discord sans fond (texte Bone sur Bone : « Ouvert », titre, texte,
   « Rejoindre le Discord » invisibles) ; maquette : carte Encre. Cause : « .bb-m.bb-mega .et_pb_text, .et_pb_text_inner
   { background: initial !important } » (bb-entete-pied.css § 6) efface le fond d'attribut (var(--gcid-bb-encre)) du module. */
.bb-m.bb-mega .et_pb_text.bb-carte-commu--discord { background-color: #241E1A !important; }
.bb-m.bb-mega .et_pb_text.bb-carte-commu--app { background-color: #F3ECE1 !important; }
.bb-m.bb-mega .et_pb_text.bb-carte-commu--lives { background-color: transparent !important; border: 1px dashed #D9CFC2 !important; }

/* 1.6 Bouton « Adhérer » (en-tête, tiroir) et boutons Divi Essential des pages : le texte est « Adhérer5 » (icône ETmodules
   « 5 » = flèche, violet #AE16F0, attribut button_icon activé par le générateur L2/L3) : 106 px de large au lieu de 96, un
   « 5 » lisible si la police ETmodules tarde. Repli : icône masquée (correctif pérenne : désactiver l'icône, ecarts.md § 5). */
.bb-m .dnxte_button .dnxt-btn-icon i, .bb-m .dnxte_button a i[class=""] { display: none !important; }

/* 1.7 Accroche, 768 : rangée sur deux lignes (111 px ; maquette 54) : la colonne du champ Ajax Search passe sous le texte.
   Cause : bb-modeles.css D4 00 « (max-width:1180px) .bb-m .et_pb_row.et_flex_row { flex-wrap: wrap } » et colonne 100 %
   (0.2) l'emportent sur D5 1.4 (même spécificité, feuille chargée après). Le texte peut passer sur 2 lignes (maquette
   768 : 54 px), le champ reste à droite (220 px). */
@media (max-width: 1180px) {
  .bb-m.bb-barre-accroche .et_pb_row { flex-wrap: nowrap !important; align-items: center; }
  .bb-m.bb-barre-accroche .et_pb_row > .et_pb_column:first-child { flex: 1 1 auto !important; width: auto !important; min-width: 0; }
  .bb-m.bb-barre-accroche .et_pb_row > .et_pb_column:last-child { flex: 0 0 auto !important; width: auto !important; }
  .bb-m .bb-accroche, .bb-m .bb-accroche p, .bb-m .bb-accroche .dnxt-animation-intro, .bb-m .bb-accroche .dnxt-headline { white-space: normal !important; overflow: visible !important; text-overflow: clip; }
}

/* 1.8 Barre Encre, 390 : 76 px (maquette 64) ; accroche : texte 13,5 px forcé sur une ligne de 511 px dans 390 (rogné à
   gauche de 60 px et à droite : « On parle de sexualité » coupé). Cause : min-height 76 de la rangée et « white-space:nowrap
   + overflow:hidden » (bb-entete-pied § 2) sur l'animation. */
@media (max-width: 640px) {
  .bb-m .bb-entete-nav.et_pb_row { min-height: 64px !important; }
  .bb-m .bb-entete-nav > .et_pb_column { align-items: center; }
  .bb-m.bb-barre-accroche .et_pb_row { min-height: 49px; padding-top: 6px !important; padding-bottom: 6px !important; }
  .bb-m .bb-accroche .dnxt-animation-intro, .bb-m .bb-accroche .dnxt-headline { white-space: normal !important; text-align: left; }
}

/* ==================================================================================================
   2. PIED (toutes pages)
   ================================================================================================== */

/* 2.1 « Être prévenu·e », 1440 et 390 : l'étiquette Fluent Forms « Ton email » (Encre sur Encre, illisible) est rendue à
   gauche du champ (champ décalé à x 235, 305 px au lieu de 323 à x 152) ; maquette : champ seul, placeholder « Ton email ».
   Cause : « .bb-m .bb-champ .ff-el-group { display:flex } » (bb-entete-pied § 5) met l'étiquette et le champ côte à côte ;
   l'étiquette reste accessible (masquage visuel). */
.bb-m .bb-pied .ff-el-input--label, .bb-m .bb-champ .ff-el-input--label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); margin: -1px; padding: 0; white-space: nowrap; }
.bb-m .bb-champ .ff-el-group { position: relative; }
.bb-m .bb-champ .ff-el-input--content { flex: 1 1 100%; }

/* 2.2 Bandeau d'aide du pied : « Besoin d'aide ? » en #A89C90 (maquette Bone #FAF7F2) ; cause : var(--bbm-bone) non définie
   dans la portée du pied (bb-entete-pied § 5 : color: var(--bbm-bone) sans repli). */
.bb-m .bb-bandeau-aide b, .bb-m .bb-bandeau-aide strong { color: #FAF7F2; }

/* ==================================================================================================
   3. ACCUEIL
   ================================================================================================== */

/* 3.1 Piliers, 1440 (section 881 px = maquette, mais) : les 5 piliers fermés (130 px) affichent tout leur contenu (titre,
   phrase, description, 6 liens) coupé mot à mot sur 2111 px de haut ; la rangée est fixée à 520 px (D5 4.1 « height:520px »)
   et ne rogne pas : le texte déborde sur « Lire dans l'ordre » (chevauchement). Maquette : pilier fermé = numéro + titre
   vertical ; ouvert = contenu complet. Cause : bb-pages-l3a.css § 04 ne masque pas le contenu des piliers fermés. */
.bb-m .et_pb_row.et_flex_row.bb-pillars { height: auto !important; min-height: 520px; overflow: hidden; align-items: stretch; }
.bb-m .bb-pillars > .et_pb_column.bb-pillar { position: relative; max-height: 520px; display: flex; flex-direction: column; }
.bb-m .bb-pillars > .et_pb_column.bb-pillar > .et_pb_text { flex: 1 1 auto; min-height: 0; }
.bb-m .bb-pillars > .et_pb_column.bb-pillar > .et_pb_text > .et_pb_text_inner { height: 100%; display: flex; flex-direction: column; }
/* pilier fermé : tout masqué sauf le surtitre et le titre, titre tourné à la verticale */
.bb-m .bb-pillars > .et_pb_column.bb-pillar.bb-m-ferme .et_pb_text_inner > :not(p:first-child):not(h3) { display: none !important; }
.bb-m .bb-pillars > .et_pb_column.bb-pillar.bb-m-ferme .et_pb_text_inner > h3 { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 18px !important; line-height: 1.1; margin: 0 auto !important; white-space: nowrap; align-self: center; flex: 1 1 auto; display: flex; align-items: flex-end; }
.bb-m .bb-pillars > .et_pb_column.bb-pillar.bb-m-ferme .et_pb_text_inner > p:first-child { text-align: center; white-space: nowrap; }
/* état « fermé » calculé sans JS : tout pilier qui n'est ni premier, ni survolé, ni actif ; le premier se ferme quand un autre est survolé */
.bb-m .bb-pillars > .et_pb_column.bb-pillar:not(:first-child):not(:hover):not(:focus-within):not(.is-actif):not(.bb-open) .et_pb_text_inner > :not(p:first-child):not(h3),
.bb-m .bb-pillars:hover > .et_pb_column.bb-pillar:first-child:not(:hover):not(:focus-within):not(.is-actif):not(.bb-open) .et_pb_text_inner > :not(p:first-child):not(h3) { display: none !important; }
.bb-m .bb-pillars > .et_pb_column.bb-pillar:not(:first-child):not(:hover):not(:focus-within):not(.is-actif):not(.bb-open) .et_pb_text_inner > h3,
.bb-m .bb-pillars:hover > .et_pb_column.bb-pillar:first-child:not(:hover):not(:focus-within):not(.is-actif):not(.bb-open) .et_pb_text_inner > h3 { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 18px !important; line-height: 1.1; margin: 12px auto 0 !important; white-space: nowrap; }
.bb-m .bb-pillars > .et_pb_column.bb-pillar:not(:first-child):not(:hover):not(:focus-within):not(.is-actif):not(.bb-open) .et_pb_text_inner > p:first-child,
.bb-m .bb-pillars:hover > .et_pb_column.bb-pillar:first-child:not(:hover):not(:focus-within):not(.is-actif):not(.bb-open) .et_pb_text_inner > p:first-child { text-align: center; white-space: nowrap; }
@media (max-width: 1180px) {
  .bb-m .et_pb_row.et_flex_row.bb-pillars { min-height: 0; overflow: visible; }
  .bb-m .bb-pillars > .et_pb_column.bb-pillar { max-height: none; }
  .bb-m .bb-pillars > .et_pb_column.bb-pillar .et_pb_text_inner > * { display: revert !important; writing-mode: horizontal-tb !important; transform: none !important; }
}

/* 3.2 Piliers, 1440 : bouton « Parcourir les articles » (a.bb-btn--clair, fond Bone) écrit en Bone (#FAF7F2 sur #FAF7F2, 3 piliers).
   Cause : « :is(.bb-p-degrade, .bb-cat-hero) :is(… a …) { color: var(--bb-pi) } » (bb-global, L1) colore tout lien du pilier,
   y compris le bouton clair. */
.bb-m .bb-p-degrade a.bb-btn--clair, .bb-m .bb-pillar a.bb-btn--clair, .bb-m .bb-p-degrade .bb-btn--clair a { color: #241E1A !important; background: #FAF7F2; }
.bb-m .bb-p-degrade a.bb-btn--clair:hover { background: #FFFFFF; color: #241E1A !important; }

/* 3.3 Questions fréquentes (accueil) et toutes les Next FAQ (FAQ 1440 : 8 sections + 28 à 51 %, page 8417 -> 10440) :
   24 px de la réponse restent visibles sous chaque question fermée (ligne de texte rognée entre les items).
   Cause : « réponse 0 / 50 / 24 / 0 » (D7.1b : padding-bottom 24 px sur .next_faq__body-inner) : l'animation Next FAQ
   réduit le corps en grid 0fr mais le padding de l'inner reste. Padding reporté sur la réponse ouverte seulement. */
.bb-m .next_faq__header[aria-expanded="false"] + .next_faq__body .next_faq__body-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
.bb-m .next_faq__header[aria-expanded="false"] + .next_faq__body { overflow: hidden; }
.bb-m .next_faq__header[aria-expanded="true"] + .next_faq__body .next_faq__body-inner { padding-bottom: 24px; }

/* 3.4 Questions qu'on n'ose pas poser (accueil, 1440) : la classe .bb-q9-grid pose la grille 2 colonnes sur le MODULE Next FAQ
   (.dnxte_next_faq) ; la liste .dnxte-next-faq-list tombe dans la 1re case (548 / 1136 px, section 719 -> 929). Même motif que
   les Post Grid (D5, bloc D7) : module en bloc, grille sur la liste. Idem pour les modules Code qui portent encore
   .bb-hgrid / .bb-grid3 / .bb-une-grid / .bb-tools7-grid (Besoin d'aide : [bb_aides] dans une case de 260 px). */
.bb-m .dnxte_next_faq.bb-q9-grid, .bb-m .dnxte_next_faq[class*="bb-m-grille"] { display: block !important; grid-template-columns: none !important; }
.bb-m .dnxte_next_faq.bb-q9-grid .dnxte-next-faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .bb-m .dnxte_next_faq.bb-q9-grid .dnxte-next-faq-list { grid-template-columns: minmax(0, 1fr); } }
.bb-m .et_pb_code.bb-hgrid, .bb-m .et_pb_code.bb-grid3, .bb-m .et_pb_code.bb-une-grid, .bb-m .et_pb_code.bb-tools7-grid { display: block !important; grid-template-columns: none !important; }

/* ==================================================================================================
   4. PAGES L3b / L3c
   ================================================================================================== */

/* 4.1 retiré D10 : la colonne .bb-m-hero-texte est une grille depuis D9b (bb-pages-l3b § 2) ; les règles flex de D8 étaient
   contradictoires et sans effet mesuré. */

/* 4.2 Coaching & e-books, Discord, 390 : « Comment ça marche » en 4 colonnes de 71 px (titres et textes coupés, débordement
   à 394 px) ; maquette 390 : une colonne. Cause : bb-maquette-pages.css l. 210 « .bb-c7-steps { grid-template-columns:
   repeat(4, …) } » sans point de rupture ; la règle 1fr 1fr de bb-maquette.css l. 895 est chargée avant et perd. */
@media (max-width: 980px) { .bb-m .bb-c7-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .bb-m .bb-c7-steps::before { display: none; } }
@media (max-width: 640px) { .bb-m .bb-c7-steps { grid-template-columns: minmax(0, 1fr) !important; } }

/* 4.3 Coaching & e-books, 1440 : éventail de 3 couvertures rendues à 489 x 653 (une seule visible, 585 px de haut, section
   706 -> 868) ; maquette : 3 couvertures 222 x 296 dans 505 x 420. Cause : « .et_pb_image_0, …_wrap { width:100% } »
   (attribut Divi) et bb-pages-l3b « .bb-m-hero-visuel > .et_pb_module { width:100% } » l'emportent sur « .bb-eventail >
   .et_pb_module { width:44% } » (bb-global). */
.bb-m .bb-eventail > .et_pb_module, .bb-m .bb-eventail > .et_pb_module .et_pb_image_wrap, .bb-m .bb-eventail > .et_pb_module img { width: 44% !important; max-width: 44%; height: auto; }
.bb-m .bb-eventail > .et_pb_module .et_pb_image_wrap, .bb-m .bb-eventail > .et_pb_module img { width: 100% !important; max-width: 100%; }
@media (max-width: 760px) { .bb-m .bb-eventail > .et_pb_module { width: 40% !important; max-width: 40%; } }

/* 4.4 Besoin d'aide, 1440 (11 sections) : cartes du registre [bb_aides] à contenu horizontal (nom, numéro, public 310 px,
   pastille, lien sur une ligne : débordement à 1739 px) ; maquette : carte verticale. Cause : bb-composants.css (extension)
   « .bb-aide { display:flex; flex-wrap:wrap } » et l3c « flex-direction: column » sans flex-wrap : les enfants restent en
   ligne (wrap + colonne = colonnes multiples). */
.bb-m .bb-m-aides .bb-aide, .bb-m .bb-hgrid .bb-aide { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; }
.bb-m .bb-m-aides .bb-aide > *, .bb-m .bb-hgrid .bb-aide > * { flex: 0 0 auto !important; max-width: 100%; }
.bb-m .bb-m-aides .bb-aide-public { flex-basis: auto !important; }

/* 4.5 Besoin d'aide, 1440 : section « Je suis en danger maintenant » sur fond blanc (#FFFFFF) ; maquette : encadré blanc
   dans une section Bone — équivalent une fois la colonne encadrée (attribut) ; aucune correction. Les sections de situation
   mesurent + 33 à 41 % (239 -> 319) : padding 44 / 44 de la maquette porté par les marges des modules ; mineur, laissé. */

/* 4.6 Fiche e-book (4 pages), 1440 : « Prix | Chapitres | Lecture » en 2 colonnes (Chapitres sous Prix) ; maquette : 3 blocs
   en ligne. Cause : bb-corrections-d5.css (bloc D7 de fin) « [class*="facts"] dl { display:grid!important ; grid-auto-flow:
   column ; grid-template-rows: auto auto } » écrit pour un dl plat, alors que le dl est en <div> (dt + dd). */
.bb-m dl.bb-m-eb-facts { display: flex !important; flex-wrap: wrap; gap: 12px 32px; grid-auto-flow: row; }
.bb-m dl.bb-m-eb-facts > div { display: grid; gap: 3px; grid-row: auto; }
.bb-m dl.bb-m-eb-facts dt, .bb-m dl.bb-m-eb-facts dd { grid-row: auto !important; }

/* 4.7 Fiche e-book, 1440 : sommaire 1019 px (maquette 555) : chaque chapitre sur 81 px, numéro d'ordre « 1. » du <ol>
   affiché en plus de l'index du shortcode (« · », « 1 »…). Cause : lecteur.css pose list-style:none sur .bbeb-toc mais Divi
   (« .et-l--body ol { list-style-position: inside; line-height: 26px } ») rétablit le marqueur « decimal » sur les li. */
.bb-m .bbeb-toc, .bb-m .bbeb-toc li { list-style: none !important; }
.bb-m .bbeb-toc li::marker { content: none; }
.bb-m .bbeb-toc li a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; min-height: 51px; line-height: 1.35; }
.bb-m .bbeb-toc .bbeb-toc-n { text-align: center; }

/* 4.8 Plan du site, 1440 : liens hachés en colonnes de 61 px (page 4880 -> 6247, lignes « À / propos »). Cause : bb-pages-l3c
   § 10 « .bb-plan ul { column-count: 4 } » appliqué dans des sections de 341 px (grille 3 x 341 de .bb-plan) : 4 colonnes
   de 61 px. Maquette : blocs de 4 colonnes pleine largeur (Général, Les 23 outils, Les 36 articles). */
.bb-m .bb-m-plan .bb-plan { display: block !important; }
.bb-m .bb-m-plan .bb-plan > section { margin: 0 0 48px; }
.bb-m .bb-m-plan .bb-plan ul { column-count: 4; column-gap: 32px; }
.bb-m .bb-m-plan .bb-plan ul ul { column-count: 1; }
.bb-m .bb-m-plan .bb-plan li { break-inside: avoid; }
@media (max-width: 980px) { .bb-m .bb-m-plan .bb-plan ul { column-count: 2; } }
@media (max-width: 640px) { .bb-m .bb-m-plan .bb-plan ul { column-count: 1; } }

/* 4.9 Adhérer, 390 : tableau comparatif .bb-cmp (640 px dans 358 : débordement à 656 px). Cause : bb-maquette.css « .bb-m .bb-cmp
   table { min-width: 640px } » sans conteneur défilant. */
.bb-m .bb-m-cmp figure.bb-table { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* 4.10 Glossaire, 768 : lettre (calc(12,5 % − 17,5 px)) et termes (calc(87,5 % − 2,5 px)) + gap 20 px = 100 % exactement : la rangée
   se replie (12 923 -> 15 005 px pendant la validation, lettre au-dessus des termes). Cause : « .et_pb_row_N { flex-wrap: wrap } »
   (attribut tablette) sur une somme qui ne laisse aucune marge. */
/* D10 : limité à la tablette (en dessous de 768 les deux colonnes font 100 % : le nowrap les écrasait en 169 + 169 px, glossaire 390 +43 %) */
@media (min-width: 768px) and (max-width: 980px) { .bb-m .et_pb_row.et_flex_row.bb-m-gl-lettre { flex-wrap: nowrap !important; } .bb-m .bb-m-gl-lettre > .et_pb_column { flex-shrink: 1; } }

/* ==================================================================================================
   5. MODÈLES THEME BUILDER
   ================================================================================================== */

/* 5.1 404, 1440 : H1 « Cette page s'est emmêlée. » en Encre sur la carte Encre (invisible, seul « ERREUR 404 » se lit) ;
   lien « Besoin d'aide ? » (.bb-lien-fleche) Bone sur Bone sous la carte. Cause : attribut de couleur du module Titre
   (var(--gcid-bb-encre) !important) copié du modèle clair ; .bb-lien-fleche hérite du Bone de la section sombre. */
.bb-m .bb-module--noeud404 h1.bbnd-h, .bb-m .bb-module--noeud404 .bbnd-h { color: #FAF7F2 !important; }
.bb-m .et_pb_section:has(.bb-module--noeud404) .et_pb_text .bb-lien-fleche:not(.bb-on-dark .bb-lien-fleche) { color: #241E1A; }

/* 5.2 Article, 1440 : boîte « Une question qui reste ? » (.bb-m-cote .bb-m-boite) : titre h3 Bone sur fond Bone à 6 %
   (quasi invisible) dans la section Encre « Continuer le fil » ; conforme à la maquette (boîte Bone 6 % sur Encre), le fond
   effectif est l'Encre : aucun écart réel. Le fil de progression .bb-fil-points est en spans screen-reader (1 x 1) : aucun écart. */

/* 5.3 Glossaire, 1440 et 768 : lettres à un seul terme (E, F, …) occupent la moitié de la grille 2 colonnes : conforme à la
   maquette (grille de termes), aucun écart ; les 10 « grilles enfermées » relevées sont des faux positifs. */