/* bb-corrections-d5.nettoye.css : version nettoyée de bb-corrections-d5.css après les lots D7.1a/b/c (recette D8, 2026-10-08).
   Blocs retirés : 0.2, 0.3, 0.5, 1.1, 1.2, 1.3, 1.4, 1.5, 3.1b, 3.1c, 4.1, 5.1, 6.1, 6.2, 6.3, 6.4, 6.5, 7.1
   — contradictoires avec les largeurs explicites D7 (0.2 base N/24, 0.3 row-gap, 0.5 grilles de rangée, 1.4 accroche, 1.5 position du
   panneau, 3.1b/3.1c décalage du fil, 4.1 piliers « height:520px », 6.4 grilles des méga-menus) ou redondants avec bb-entete-pied.css
   D7.1c / bb-pages-l3a.css D7a / bb-ponts.js (1.1, 1.2, 1.3, 5.1, 6.1, 6.2, 6.3, 6.5, 7.1) ; vérifié par relevé des 58 pages (ecarts.md § 1).
   Blocs conservés : 0.1 (fond de page), 0.4 (modules Code à grille : display:block, encore nécessaire pour .bb-hgrid), 0.4b (.bb-legal),
   2.1 (padding des sections FAQ), 2.2 (pilules FAQ), 2.3 (Besoin d'aide), 3.1 (fil de lecture), 3.2 (À retenir), 4.2 (Advanced Tab :
   display:block du module .bb-paths, sans lequel bb-pages-l3a.css pose la grille 320 | 1fr sur le module), 4.3, 6.6 (couleurs du
   méga-menu Éducation : pilules, personas, aperçu), blocs D7 de fin (Next FAQ du pied, formulaire, Post Grid) sans les règles « dl facts »
   (remplacées par bb-corrections-d8.css 4.6). Remplace bb-corrections-d5.css à la même place dans l'ordre de chargement ;
   bb-corrections-d8.css se charge en dernier. */
/* bb-corrections-d5.css : lot D5, recette visuelle maquette v12 / goblackbond.com (2026-10-08).
   Correctifs CSS des écarts mesurés au Chromium sans tête à 1440 / 768 / 390 (D-design/recette-d5/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).
   Chaque bloc cite la page et la mesure (maquette -> site) qui le justifient. Les écarts non corrigeables en CSS sont listés dans ecarts.md.
   Mesures de référence : D-design/pages/<route>.json et design.json (lot D0). */

/* ==================================================================================================
   0. GLOBAL : fond de page et grille Divi 5 (flex) — cause de 80 % des écarts de hauteur
   ================================================================================================== */

/* 0.1 Fond de page : maquette body #FAF7F2 ; site body #FFFFFF -> toutes les sections sans fond propre
   ressortent blanches (accueil « À la une », « Six piliers », « Questions », Éducation, Outils, FAQ…, 16 pages x 3 largeurs). */
body.bb-m, body.bb-m #page-container, body.bb-m #et-main-area, body.bb-m #main-content { background-color: #FAF7F2; }

/* 0.4 Modules Code qui portent une grille : la grille est posée sur le module (.bb-une-grid, .bb-grid3, .bb-hgrid,
   .bb-tools7-grid) mais le shortcode rend un conteneur unique dedans (.et_pb_code_inner > div.bb-articles > ul.bb-articles-grille,
   ul.bb-aides, ul.bb-outils-liste) : une seule cellule, cartes empilées sur une colonne (accueil « À la une » grille
   1248 -> 1973 px ; Besoin d'aide « Ma santé sexuelle » 415 -> 1573 ; Éducation « Tous les articles » 1413 -> 3073 ;
   Outils 353 -> 895). On neutralise la grille du module et on la pose sur la liste rendue, aux mesures de la maquette. */
.bb-m .et_pb_code.bb-grid3, .bb-m .et_pb_code.bb-une-grid, .bb-m .et_pb_code.bb-hgrid, .bb-m .et_pb_code.bb-tools7-grid { display: block; }
.bb-m .et_pb_code.bb-grid3 .bb-articles-grille, .bb-m .et_pb_code.bb-une-grid .bb-articles-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.bb-m .et_pb_code.bb-une-grid.bb-une9-grid .bb-articles-grille { gap: 22px; grid-auto-rows: auto; }
.bb-m .et_pb_code.bb-une-grid.bb-une9-grid .bb-articles-grille > li:first-child { grid-column: 1 / 3; grid-row: 1 / 3; } /* grande carte 750 x 519 */
.bb-m .et_pb_code.bb-une-grid .bb-articles-grille > li, .bb-m .et_pb_code.bb-grid3 .bb-articles-grille > li { width: auto; min-width: 0; }
.bb-m .et_pb_code.bb-hgrid .bb-aides { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; width: 100%; }
.bb-m .et_pb_code.bb-tools7-grid .bb-outils-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; width: 100%; }
.bb-m .et_pb_code.bb-grid3 .bb-articles-plus { margin-top: 40px; }
/* module Texte dont la grille est posée deux fois (module + .et_pb_text_inner) : pied de « Questions » 2 colonnes imbriquées */
.bb-m .et_pb_text.bb-q9-foot > .et_pb_text_inner, .bb-m .et_pb_text.bb-rm9-st > .et_pb_text_inner { display: contents; }
@media (max-width: 980px) {
  .bb-m .et_pb_code.bb-grid3 .bb-articles-grille, .bb-m .et_pb_code.bb-une-grid .bb-articles-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-m .et_pb_code.bb-une-grid.bb-une9-grid .bb-articles-grille > li:first-child { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
  .bb-m .et_pb_code.bb-grid3 .bb-articles-grille, .bb-m .et_pb_code.bb-une-grid .bb-articles-grille { grid-template-columns: 1fr; }
}

/* 0.4b Pages légales / Qui écrit : la classe .bb-legal (grille 230 px | 720 px, gap clamp(28px,5vw,80px)) est portée
   par la SECTION et non par la rangée -> la rangée Divi tombe dans la cellule de 230 px (Qui écrit : colonnes de 40 et
   54 px, texte de 18 919 px de haut une fois les largeurs de colonnes rétablies ; avant correctif, colonnes débordantes
   non rognées). On rend la section à Divi et on pose la grille sur la rangée. */
.bb-m .et_pb_section.bb-legal { display: flex !important; grid-template-columns: none !important; }
.bb-m .et_pb_section.bb-legal > .et_pb_row.et_flex_row { display: grid !important; grid-template-columns: 230px minmax(0, 720px); gap: clamp(28px, 5vw, 80px); align-items: start; }
.bb-m .et_pb_section.bb-legal > .et_pb_row.et_flex_row > .et_pb_column { width: auto !important; flex: none; min-width: 0; }
@media (max-width: 980px) { .bb-m .et_pb_section.bb-legal > .et_pb_row.et_flex_row { grid-template-columns: minmax(0, 1fr); } }

/* ==================================================================================================
   1. EN-TÊTE (1440 : barre 76 px, bandeau 51 px ; maquette _global.json › entete)
   ================================================================================================== */

/* ==================================================================================================
   2. PAGES L3c : FAQ, Besoin d'aide, Contact, Qui écrit, Adhérer (en-tête de page .pg-head : maquette padding 86,4 / 36)
   ================================================================================================== */

/* 2.1 FAQ : les 8 sections de thème ont padding-top 86,4 px sur la section + 28 px sur la rangée + 28 px sur la colonne
   (maquette : 28 px haut et bas sur la section, rien d'autre ; « Compte » 366 -> 571 px). */
.bb-m .et_pb_section[id^="fc-"] { padding-top: 0 !important; padding-bottom: 0 !important; }
.bb-m .et_pb_section[id^="fc-"] > .et_pb_row > .et_pb_column { padding-top: 0; padding-bottom: 0; }

/* 2.2 FAQ : pilules de thèmes toutes pleines (8 x fond #241E1A) ; maquette : seule « Tous les thèmes » est pleine,
   les autres blanches, filet #D9CFC2, gap 8 px. La règle D1c « .bb-pilule:first-child » vise le lien, premier enfant
   de chaque li. La pilule « Tous les thèmes » n'existe pas sur le site (-> générateur, voir ecarts.md). */
.bb-m .bb-faq6-cats li .bb-pilule:first-child, .bb-m .bb-faq6-cats .bb-pilule { background: #FFFFFF; color: #241E1A; border-color: #D9CFC2; }
.bb-m .bb-faq6-cats li .bb-pilule:first-child:hover { border-color: #241E1A; }
.bb-m .bb-faq6-cats li .bb-pilule.bb-est-actif:first-child, .bb-m .bb-faq6-cats li .bb-pilule[aria-current]:first-child, .bb-m .bb-faq6-cats li .bb-pilule[aria-pressed="true"]:first-child { background: #241E1A; color: #FAF7F2; border-color: #241E1A; }
.bb-m .bb-faq6-cats .bb-pilules { gap: 8px; }

/* 2.3 Besoin d'aide : les 11 sections de situation n'ont plus le padding 44 px haut/bas de la maquette sur la section
   (il est reporté sur rangée + colonne, soit 88 px à chaque fois) ; cartes .bb-hgrid empilées (corrigé en 0.4). */
.bb-m .bb-sit.et_pb_section > .et_pb_row > .et_pb_column, .bb-m .et_pb_section:has(> .et_pb_row > .et_pb_column > .bb-hgrid) > .et_pb_row > .et_pb_column { padding-top: 0; padding-bottom: 0; }

/* ==================================================================================================
   3. MODÈLE ARTICLE (consentement-bases ; maquette pages/consentement-bases.json)
   ================================================================================================== */

/* 3.1 Fil de lecture : pastille « 0 % » (.dnxte-progress-tooltip 48 x 8 à x 5, y 185) visible en haut à gauche,
   et la barre descend à y 203 au lieu de coller sous l'en-tête (wrapper margin 10 px 0, layout1-wrapper 50 px).
   Maquette : .read-fil 3 px, pleine largeur, collé au bas de l'en-tête, aucun texte. */
.bb-m .bb-fil-lecture .dnxte-progress-tooltip, .bb-m .bb-fil-lecture .dnxte-progress-percentage, .bb-m .bb-fil-lecture [class*="tooltip"], .bb-m .bb-fil-lecture [class*="percent"] { display: none !important; }
.bb-m .bb-fil-lecture .dnxte-progress-bar-wrapper { margin: 0 !important; }
.bb-m .bb-fil-lecture .dnxte-layout1-wrapper, .bb-m .bb-fil-lecture .dnxte-progress-bar-container { height: 3px !important; overflow: hidden; }
.bb-m .bb-fil-lecture { font-size: 0; line-height: 0; }

/* 3.2 Corps : colonne de texte 4344 px de large (rognée), sommaire en double (placeholder collant 376 px) ;
   maquette : sommaire 230 px | texte 700 px, gap 72. Les largeurs sont rétablies par 0.2 ; le placeholder collant
   Divi garde la largeur de la colonne. Taille du texte courant : maquette 17 px / 29 ; « À retenir » 16 px (site 13). */
.bb-m .bb-m-retenir, .bb-m .bb-m-retenir li, .bb-m .bb-m-retenir p { font-size: 16px; line-height: 1.6; }
.bb-m .et_pb_column.et_pb_sticky_placeholder { visibility: hidden; }

/* ==================================================================================================
   4. ACCUEIL (pages/accueil.json)
   ================================================================================================== */

/* 4.2 Parcours par persona (Divi Essential Advanced Tabs) : le kit vise des classes qui n'existent pas dans le rendu
   (.dnxte_adv_tabs_wrapper…). Rendu réel : .tab-container > .dnxte_tab_menu ul li a.dnxte_tab_a + .dnxte_body_content_wrapper.
   Mesure : tout dans une colonne de 320 px, section 781 -> 1713 px. Maquette : onglets 320 px à gauche, scène 776 px. */
.bb-m .bb-paths.dnxte_advanced_tab, .bb-m .et_pb_row.bb-paths { display: block !important; }
.bb-m .bb-paths .tab-container { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: start; }
.bb-m .bb-paths .dnxte_tab_menu ul { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(36,30,26,.12); }
.bb-m .bb-paths .dnxte_tab_menu li { margin: 0; padding: 0; }
.bb-m .bb-paths .dnxte_tab_a { display: grid; gap: 4px; text-align: left; padding: 18px 8px 18px 16px; border: 0; border-bottom: 1px solid rgba(36,30,26,.12); border-left: 2px solid transparent; background: none; color: #241E1A; text-decoration: none; min-height: 88px; box-sizing: border-box; }
.bb-m .bb-paths .dnxte_tab_a:hover { border-left-color: #D9CFC2; }
.bb-m .bb-paths .dnxte_tab_a.dnxte_active_a { border-left-color: #B3562A; }
.bb-m .bb-paths .dnxte_tab_nav_title { font: 600 17px/1.3 var(--bb-fd, Poppins, sans-serif); }
.bb-m .bb-paths .dnxte_tab_nav_pra { font: 500 12.5px/1.4 var(--bb-fb, Inter, sans-serif); color: #7A6F66; margin: 0; }
.bb-m .bb-paths .dnxte_body_content_wrapper { padding-top: 28px; border-top: 1px solid rgba(36,30,26,.12); }
.bb-m .bb-paths .dnxte_tab_content_title { font: 600 26px/1.1 var(--bb-fd, Poppins, sans-serif); margin: 0 0 6px; }
.bb-m .bb-paths .dnxte_tab_content_pra > p:first-child { margin: 0 0 30px; }
.bb-m .bb-paths .dnxte_tab_content_pra ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; list-style: none; padding: 0; margin: 0; counter-reset: etape; }
.bb-m .bb-paths .dnxte_tab_content_pra ol li { display: grid; gap: 6px; counter-increment: etape; }
.bb-m .bb-paths .dnxte_tab_content_pra ol li::before { content: counter(etape, decimal-leading-zero); font: 600 12.5px/36px var(--bb-fd, Poppins, sans-serif); text-align: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #241E1A; }
.bb-m .bb-paths .dnxte_tab_content_pra ol li span { font: 500 12.5px var(--bb-fb, Inter, sans-serif); color: #7A6F66; }
.bb-m .bb-paths .dnxte_tab_content_pra ol li a { font: 600 17px/1.3 var(--bb-fd, Poppins, sans-serif); color: #241E1A; text-decoration: none; }
.bb-m .bb-paths .dnxte_tab_content_pra ol li small { font: 500 12.5px var(--bb-fb, Inter, sans-serif); color: #7A6F66; }
@media (max-width: 980px) {
  .bb-m .bb-paths .tab-container { grid-template-columns: 1fr; gap: 24px; }
  .bb-m .bb-paths .dnxte_tab_content_pra ol { grid-template-columns: 1fr; }
}

/* 4.3 Questions qu'on n'ose pas poser : l'accordéon Divi ouvre le premier item (255 px) alors que la maquette
   a les 4 <details> fermés (90 px) ; non corrigeable en CSS sans casser l'ouverture. On aligne au moins le
   pied de section (2 colonnes, grille posée sur le module ET sur .et_pb_text_inner -> corrigé en 0.4). */

/* ==================================================================================================
   5. PIED À 390 (maquette : 5 colonnes dépliables <details>, 56 px fermées)
   ================================================================================================== */

/* ==================================================================================================
   6. PONTS CSS <-> bb-global.js (le script pose d'autres classes que celles attendues par bb-entete-pied.css)
   ================================================================================================== */

/* ==================================================================================================
   7. REPLI OPTIONNEL (à retirer dès que bb-global.js gère le dépliage du pied) — coût : +1 850 px de pied à 390
   ================================================================================================== */
/* 6.6 Méga-menu Éducation, couleurs (capture pts-mega-education-1440-site-corrige.png) : texte des liens rapides et des
   pilules d'outils toujours Bone (règles de menu Divi plus spécifiques), bandeau sombre derrière les pilules et les
   personas (fond du module Texte), titres de l'aperçu en Encre sur fond Encre. Maquette : liens Encre, pilules blanches
   filet, « Tous les outils » pleine, aperçu en Bone. */
.bb-m .dnxte-mega-menu-panel .bb-lien-rapide, .bb-m .dnxte-mega-menu-panel .bb-mega-pied a:not(.bb-btn) { color: #241E1A !important; }
.bb-m .dnxte-mega-menu-panel .bb-puce { color: #241E1A !important; }
.bb-m .dnxte-mega-menu-panel .bb-puce--pleine { color: #FAF7F2 !important; }
.bb-m.bb-mega .bb-mega-pied .et_pb_text, .bb-m.bb-mega .bb-mega-pied .et_pb_text_inner, .bb-m.bb-mega .bb-mega-pied .bb-pilules { background: transparent !important; }
.bb-m .bb-apercu, .bb-m .bb-apercu :is(h4, p, span, li, .et_pb_module_header, .bb-surtitre, .bb-attenue, .bb-lien-fleche) { color: #FAF7F2 !important; }
.bb-m .bb-apercu .et_pb_blog_grid .column, .bb-m .bb-apercu .et_pb_salvattore_content .column { margin: 0 !important; padding: 0 !important; }

/* === D7 : pied, Next FAQ et formulaire (relevé 2026-10-08 03h50, /consentement-bases/) === */
/* Questions rapides : h3 .next_faq__question en Encre 2 (#3A322C) sur fond Encre : illisible */
.bb-m .bb-pied .next_faq__question, .bb-m .bb-pied .next_faq__item h3, .bb-m .bb-pied .next_faq__item [class*="question"]{color:#FAF7F2!important}
.bb-m .bb-pied .next_faq__item [class*="icon"], .bb-m .bb-pied .next_faq__item svg{color:#E58A5C;fill:#E58A5C;stroke:#E58A5C}
.bb-m .bb-pied .next_faq__answer, .bb-m .bb-pied .next_faq__item p{color:rgba(250,247,242,.82)}
/* Formulaire « Être prévenu·e » : champ à 305 px, le wrapper Fluent Forms limite la largeur */
.bb-m .bb-pied .fluentform, .bb-m .bb-pied .fluentform .ff-el-group, .bb-m .bb-pied .fluentform .ff-el-input--content, .bb-m .bb-pied .fluentform .ff-el-form-control{width:100%!important;max-width:100%!important}
.bb-m .bb-pied .fluentform .ff-el-form-control{height:50px;border-radius:10px}

/* === D7 : module Post Grid enfermé dans une case de grille (relevé 2026-10-08 03h55, accueil À la une) ===
   .bb-m-cartes pose display:grid sur le module .dnxte_post_grid lui-même (3 × 364 px) ; la vraie grille
   .dnxte-post-grid-container tombe dans la 1re case. Le module redevient un bloc, la grille interne garde ses colonnes. */
.bb-m .dnxte_post_grid.bb-m-cartes, .bb-m .dnxte_post_grid.bb-carte, .bb-m .dnxte_post_grid[class*="bb-m-grille"], .bb-m .dnxte_post_grid.bb-une-grid, .bb-m .dnxte_post_grid.bb-une9-grid{display:block!important;grid-template-columns:none!important;gap:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
.bb-m .dnxte_post_grid .dnxte-post-grid-container{width:100%}

/* === D7 : rangées à largeur explicite non centrées (relevé 2026-10-08 04h05, fiche e-book : rangée 820 px à x=0) === */
.bb-m #main-content .et_pb_row, .bb-m .et-l--body .et_pb_row{margin-left:auto!important;margin-right:auto!important}
/* Facts de la fiche e-book (prix / chapitres / lecture) : dl empilée au lieu d'une ligne à 3 colonnes */