/* bb-corrections-d10.css : lot D10, recette visuelle maquette v12 / goblackbond.com rejouée à l'identique de D8 après les lots
   D9a/b/c (2026-10-08). 59 pages x 3 largeurs relevées au Chromium sans tête (D-design/recette-d10/ecarts.md). À charger EN
   DERNIER, après bb-corrections-d8.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 bb-corrections-d8.css remplacée par bb-corrections-d8.nettoye.css (blocs 0.1, 4.1 et 4.10 retirés :
   voir ecarts.md § 4) ; les blocs 1.1 et 1.2 ci-dessous la neutralisent en attendant. */

/* ==================================================================================================
   1. RÉGRESSIONS INTRODUITES PAR D9 (corrigeables en CSS)
   ================================================================================================== */

/* 1.1 Glossaire, 390 (section A–Z 11 877 -> 16 970 px, +43 %, page 15 241 -> 20 505) : les deux colonnes de chaque lettre
   (lettre 100 % + termes 100 % par attribut téléphone) restent côte à côte en 169 + 169 px : les définitions tombent dans
   une colonne de 169 px (lettre A : 1 333 px de haut). Cause : bb-corrections-d8.css 4.10 « (max-width: 980px) .bb-m-gl-lettre
   { flex-wrap: nowrap !important } » écrit pour la tablette (D9a a depuis posé 90 px + calc(100 % − 110 px) à 768) et
   appliqué aussi au téléphone. En dessous de 768 : repli. */
@media (max-width: 767px) {
  .bb-m .et_pb_row.et_flex_row.bb-m-gl-lettre { flex-wrap: wrap !important; }
  .bb-m .bb-m-gl-lettre > .et_pb_column { flex: 0 0 100% !important; width: 100% !important; }
}

/* 1.2 Glossaire, bande A–Z (1440 : 189 px ; 768 : 291 px ; 390 : 393 px ; maquette 97 px à 768) : 26 colonnes Divi d'une
   lettre, boutons Divi Essential de 48 px, rangée « row-gap 40px » et marges de colonne 14 px (attributs D9a) : la bande
   tient sur 2 à 4 rangées espacées de 54 px. Maquette : lettres de 34 px serrées (gap 4). */
.bb-m.bb-gl7-az .et_pb_row.bb-m-gl-az { row-gap: 6px !important; column-gap: 6px !important; justify-content: center; }
.bb-m.bb-gl7-az .bb-m-gl-az > .et_pb_column { margin: 0 !important; width: auto !important; flex: 0 0 auto !important; }
.bb-m.bb-gl7-az .bb-btn--lettre .dnxt-button-wrapper a, .bb-m.bb-gl7-az .bb-btn--lettre a { min-height: 34px !important; height: 34px !important; min-width: 34px; padding: 0 8px !important; line-height: 34px !important; }
.bb-m.bb-gl7-az .bb-btn--lettre, .bb-m.bb-gl7-az .bb-btn--lettre .et_pb_module_inner { min-height: 0 !important; height: auto !important; }

/* 1.3 Qui écrit, qui vérifie, 1440 : colonne de corps .bb-m-qui-corps de 1 136 px à côté du sommaire de 287 px (1 423 > 1 200 :
   texte coupé à droite, débordement à 1 719 px). Cause : attribut « .et_pb_column_2 { width: 63.38% } » battu par
   « width: 100% » (attributs tablette copiés au bureau, D9b) et « flex: 0 0 auto » ; la rangée porte grid-template-columns
   230px minmax(0, 720px) sans être une grille (display:flex de bb-global). Maquette : sommaire 230 + corps 720. */
@media (min-width: 981px) {
  .bb-m.bb-qui .et_pb_row > .et_pb_column.bb-m-qui-som { flex: 0 0 230px !important; width: 230px !important; }
  .bb-m.bb-qui .et_pb_row > .et_pb_column.bb-m-qui-corps { flex: 0 1 720px !important; width: 720px !important; max-width: 720px; min-width: 0; }
}

/* 1.4 Fiches e-book (4 pages), 1440 et 768 : section « Sommaire » (#sommaire, .bb-m-prod-sommaire) large de 820 px et collée
   au bord gauche (x 0, liste à x 32) ; maquette : sommaire aligné sur la couverture (x 170), 820 px. Cause : attribut
   « width: 820px » posé sur la SECTION (D9b) sans marge automatique. La section reprend toute la largeur, la rangée fait
   820 px et s'aligne sur le conteneur (50 % − 550 px = 170 px à 1440 ; 32 px minimum). */
.bb-m.et_pb_section.bb-m-prod-sommaire { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.bb-m.et_pb_section.bb-m-prod-sommaire > .et_pb_row { width: 820px !important; max-width: calc(100% - 64px) !important; margin-left: max(32px, calc(50% - 550px)) !important; margin-right: auto !important; }
@media (max-width: 767px) { .bb-m.et_pb_section.bb-m-prod-sommaire > .et_pb_row { max-width: calc(100% - 32px) !important; margin-left: 16px !important; } }

/* 1.5 Tableaux (Adhérer 390 : comparatif .bb-cmp 640 px dans 358, débordement à 656 ; article « Le clitoris » 390 : tableau
   de la prose 520 px, débordement à 536). Cause : « table { width: 100% } » + « min-width » du tableau sans conteneur
   défilant ; bb-corrections-d8 4.9 ne visait que .bb-m-cmp. Toute figure .bb-table défile horizontalement. */
.bb-m figure.bb-table, .bb-m .bb-prose figure.bb-table, .bb-m .wp-block-table { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* 1.6 Outil « La boîte à questions », 1440 / 768 / 390 : titre « Ce n'est pas un service d'urgence » (h3, 18 px) en Encre sur
   l'encadré Encre .bbm-qs-box--alert de l'aside (illisible ; l'autre encadré est Lin, titre Encre conforme). Cause :
   « h1…h6 { color: var(--bb-encre) } » (Divi / bb-global) l'emporte sur la couleur Bone du bloc, posée sur le bloc seulement. */
.bb-m .bbm-qs .bbm-qs-box--alert h3, .bb-m .bbm-qs .bbm-qs-box--alert h2 { color: #FAF7F2 !important; }

/* ==================================================================================================
   2. EN-TÊTE, MÉGA-MENUS, TIROIR (toutes pages, 1440)
   ================================================================================================== */

/* 2.1 Méga-menu Éducation, aperçu (.bb-apercu, 380 x 550) : « Pilier 01 » collé au bord haut de la colonne Encre (y 162 =
   haut de la colonne ; maquette : 26 px de marge intérieure, « Pilier 01 » à y 202). Cause : le padding 26 px d'attribut
   (styles en ligne #dnxte-mega-menu-styles-head) est effacé par « .bb-mega .et_pb_row > .et_pb_column { … } » (bb-entete-pied). */
body.bb-m .et-l--header .bb-mega .bb-apercu.et_pb_column { padding: 26px !important; }

/* 2.2 Méga-menu Coaching & e-books, 1440 : panneau 547 px (maquette 397) ; chaque carte [bb_ebooks_cartes] affiche sous la
   couverture le pilier, le titre, « Offert contre ton e-mail » et « 9 chapitres, 44 min de lecture » (carte 394 px) ;
   maquette : couverture + une ligne « Fondamentaux · Offert » (272 px). Titre et sous-titre masqués, pilier à gauche et
   prix à droite sur une ligne (grille 2 colonnes sous la couverture). */
.bb-m.bb-mega .bbeb-card-a { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; }
.bb-m.bb-mega .bbeb-card-a > .bbeb-cv { grid-column: 1 / -1; }
.bb-m.bb-mega .bbeb-card-t, .bb-m.bb-mega .bbeb-card-s, .bb-m.bb-mega .bbeb-card-m small { display: none !important; }
.bb-m.bb-mega .bbeb-card-pil { margin: 10px 0 0 !important; font-size: 12px; }
.bb-m.bb-mega .bbeb-card-m { display: block !important; margin: 10px 0 0 !important; padding: 0 !important; font-size: 12px; }
.bb-m.bb-mega .bbeb-card-m b { color: #C4602F !important; font-weight: 600; }

/* 2.3 Méga-menu Communauté & App, 1440 : panneau 480 px (maquette 399), cartes 356 px (maquette 251) : titre h3 22 px sur
   2 lignes (58 px ; maquette 1 ligne, 24 px), paragraphes avec padding-bottom 14 px cumulé au gap 12 px de la carte,
   « Rejoindre le Discord » repoussé en bas (margin-top auto). Cause : styles de .bb-carte-commu (bb-entete-pied § 6). */
.bb-m.bb-mega .et_pb_text[class*="bb-carte-commu"] h3 { font-size: 18px !important; line-height: 1.3 !important; padding-bottom: 0 !important; }
.bb-m.bb-mega .et_pb_text[class*="bb-carte-commu"] p { padding-bottom: 0 !important; }
.bb-m.bb-mega .et_pb_text[class*="bb-carte-commu"] .et_pb_text_inner { gap: 10px !important; }
.bb-m.bb-mega .et_pb_text[class*="bb-carte-commu"] .bb-carte-commu-pied { margin-top: 6px !important; }

/* 2.4 Tiroir mobile, 390 (toutes pages) : le chevron « Sous-menu Éducation / Coaching / Communauté » pose bien bb-est-ouvert
   sur le li (bb-ponts.js) mais la liste ul.sub-menu#bb-tiroir-sm-N reste à display:none (0 lien visible, tiroir 844 px) :
   le tiroir mobile n'ouvre aucun sous-menu. Cause : mega-menu.css (Divi Essential) « .dnxte-has-mega-menu > ul.sub-menu
   { display: none !important } » (le même élément de menu porte le méga-menu et le sous-menu WordPress) l'emporte sur
   « .bb-m .bb-tiroir-lien li.bb-est-ouvert > ul.sub-menu { display: grid } » (bb-entete-pied). Spécificité relevée. */
.bb-m .bb-tiroir-lien li.menu-item.bb-est-ouvert.dnxte-has-mega-menu > ul.sub-menu, .bb-m .bb-tiroir-lien li.menu-item.bb-est-ouvert > ul.sub-menu { display: grid !important; }
.bb-m .bb-tiroir-lien li.menu-item:not(.bb-est-ouvert).dnxte-has-mega-menu > ul.sub-menu { display: none !important; }
/* 2.5 Tiroir mobile, 390 : bouton « Fermer le menu » (croix SVG currentColor) en #3A322C sur le fond Encre (quasi invisible,
   maquette : Bone) ; titre du sous-menu ouvert grisé (classe et-hover posée par Divi). Cause : couleur du corps (bb-global
   --bb-texte) héritée par le bouton, « .et-hover > a » de Divi. */
.bb-m.bb-tiroir [data-bb-tiroir-fermer], .bb-m.bb-tiroir .bb-icone-btn { color: #FAF7F2 !important; }
.bb-m .bb-tiroir-lien li.menu-item.bb-est-ouvert > a, .bb-m .bb-tiroir-lien li.menu-item.et-hover > a { color: #FAF7F2 !important; opacity: 1 !important; }
/* Entrées « Besoin d'aide », « À propos », « Qui écrit », « Mon compte » absentes du tiroir, sous-menus repliés par défaut
   (maquette : Éducation déplié) : contenu du menu WordPress « Principal » (ecarts.md § 5), pas de CSS. */

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

/* 3.1 « Être prévenu·e », 1440 : champ email de 396 px seul sur sa ligne, case à cocher, puis bouton « Être prévenu·e » 48 px
   sous la case (formulaire 221 px) ; maquette : champ 323 px et bouton côte à côte (50 px), case en dessous (newsletter
   391 px). Cause : Fluent Forms empile ses .ff-el-group. Grille 2 colonnes sur le fieldset : champ | bouton, case en
   dessous sur toute la largeur. En dessous de 640 : empilé comme la maquette 390. */
@media (min-width: 641px) {
  .bb-m .bb-pied .frm-fluent-form fieldset { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 10px; align-items: start; }
  .bb-m .bb-pied .frm-fluent-form fieldset > legend { position: absolute; }
  .bb-m .bb-pied .frm-fluent-form .ff-el-group { margin: 0 !important; }
  .bb-m .bb-pied .frm-fluent-form .ff_submit_btn_wrapper { grid-column: 2; grid-row: 1; }
  .bb-m .bb-pied .frm-fluent-form .ff-el-group:has(.ff-el-tc) { grid-column: 1 / -1; grid-row: 2; }
  .bb-m .bb-pied .frm-fluent-form .ff-btn-submit { height: 50px; white-space: nowrap; }
}

/* 3.2 Barre de confiance du pied, 390 (et 1440) : « Revoir l'écran d'accès » rendu comme un bouton de 220 x 48 px en gras,
   décalé (padding 26 px) ; maquette : lien souligné dans la phrase. Cause : .bb-btn--lien hérite des dimensions de .bb-btn. */
.bb-m .bb-pied-confiance .bb-btn.bb-btn--lien { display: inline !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; font: inherit !important; font-weight: 500 !important; color: inherit !important; text-decoration: underline; text-underline-offset: 3px; background: transparent !important; border: 0 !important; border-radius: 0 !important; }

/* ==================================================================================================
   4. BLOCS DE bb-corrections-d8.css NEUTRALISÉS (en attendant bb-corrections-d8.nettoye.css)
   ================================================================================================== */

/* 4.1 bb-corrections-d8 4.1 (« .bb-m-hero-texte { flex-direction: column !important … } », « > .et_pb_module { width: 100% ;
   flex: 0 0 auto } », « > .bb-m-cta { display: inline-flex } ») : écrit pour une colonne flex ; D9b rend la colonne en grille
   (bb-pages-l3b § 2 : grid-template-columns auto 1fr, bouton et lien-flèche côte à côte). Sans effet visible mesuré
   (Adhérer, App, Coaching, IA : en-têtes empilés, boutons alignés) mais contradictoire : retiré dans la version nettoyée ;
   rien à neutraliser ici. */

/* 4.2 bb-corrections-d8 0.1 (« …:not(.bb-pillar), » suivi d'un bloc @media) : sélecteur laissé ouvert lors du nettoyage D9c,
   le bloc 0.1b entier est rejeté par l'analyseur (CSSOM : 79 règles, aucune @media (min-width: 981px)). Mort et redondant
   (bb-modeles D4 00 et le flex-wrap de bb-global ont été retirés par D9c : les rangées lisent l'attribut nowrap) :
   retiré dans la version nettoyée. */