/* ScanNuts Brand Meta - styles externalises (v102.303, audit Erwan 6.2).
   Auparavant injectes inline (~23,5 Ko) sur chaque page frontend ; sortis
   ici pour la mise en cache, la minification et l'optimisation WP Rocket.
   Commentaires nettoyes (caracteres de dessin et tirets longs). */

/* ========================================================================
   ScanNuts Brand Meta v100.94 - design 100% aligné sur les fiches Code Promo
   (sn-cp-section-tag + sn-cp-section-title + cards à filet gradient haut +
badge rond cuivré, charte INWT cohérente entre Marque et Code Promo).
   Injecté en pied de page via wp_footer (flag armé par render_for_brand)
   pour éviter le strip du <style> par les page builders / plugins de cache /
   sécurité, et pour court-circuiter wpautop sur le contenu du shortcode.
   ======================================================================== */

.sn-bm-section {
margin: 2.5rem auto 1.5rem;
max-width: 880px;
padding: 0 0.5rem;
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
color: #1a1a1a;
animation: sn-bm-fade-in 0.7s ease both;
}
@keyframes sn-bm-fade-in {
from { opacity: 0; transform: translateY(12px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes sn-bm-card-in {
from { opacity: 0; transform: translateY(16px); }
to   { opacity: 1; transform: translateY(0); }
}

/* Accessibilité : si l'utilisateur a activé "Réduire les animations" dans
   les options système (iOS : Réglages > Accessibilité > Mouvement, Android :
   Paramètres > Accessibilité > Suppression des animations), on désactive
   l'animation et on force opacity:1 d'emblée. Important parce que le mode
   "économie de batterie" iOS active ce flag automatiquement, et beaucoup
   d'utilisateurs naviguent dans cet état sans le savoir. Sans ce fallback,
   les cards restent à opacity:0 (invisibles). */
@media (prefers-reduced-motion: reduce) {
.sn-bm-card {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}
.sn-bm-faq-a {
    animation: none !important;
}
}

/* === Header de section (aligné sn-cp-section-tag / title / subtitle) == */
.sn-bm-header {
text-align: center;
margin-bottom: 1.8rem;
padding-bottom: 0.4rem;
}
.sn-bm-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #ee5a24;
margin: 0 0 0.6rem;
background: #fff5eb;
padding: 5px 14px;
border-radius: 20px;
}
.sn-bm-title {
font-size: clamp(1.4rem, 2.8vw, 1.9rem) !important;
font-weight: 900 !important;
text-transform: uppercase;
color: #1a1a1a !important;
line-height: 1.15 !important;
margin: 0 0 0.3rem !important;
padding: 0 !important;
letter-spacing: -0.01em;
}
.sn-bm-title .sn-bm-brand { color: #E0A564; }

/* FIX v102.156 : robustesse face aux surcharges du theme (Divi) sur le <h2>.
   Sur desktop, Divi rendait le titre non-bloc : la pill "En savoir plus" et le
   titre passaient sur la meme ligne, et l'espace entre "sur" et la marque etait
   avale (rendu colle "surMARQUE"). On reaffirme ici le rendu voulu (bloc,
   centre, espacement normal, sans fond herite), scope aux classes du module
   donc sans effet de bord ailleurs. Le bloc <style> n'est pas mis en cache
   (cf. shortcode plus bas), donc pas besoin d'invalider les transients. */
.sn-bm-header { display: block !important; }
.sn-bm-title {
display: block !important;
white-space: normal !important;
text-align: center !important;
background: none !important;
/* v102.157 : neutralise un lisere (border/box-shadow/outline) applique au
   <h2> par un selecteur externe (Divi ou CSS perso ciblant les h2), devenu
   visible en cadre une fois le titre repasse en bloc pleine largeur. Le
   module ne dessine aucun cadre autour de ce titre. */
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.sn-bm-title .sn-bm-brand {
display: inline !important;
background: none !important;
}
.sn-bm-subtitle {
font-size: 0.88rem;
color: #888;
font-weight: 300;
line-height: 1.6;
margin: 0 auto;
max-width: 620px;
}

/* === Grille des cards (Histoire / Analyse / FAQ) ====================== */
.sn-bm-grid {
display: flex;
flex-direction: column;
gap: 1.2rem;
}

/* === Card de section ================================================== */
.sn-bm-card {
position: relative;
background: #fff;
border: 1px solid rgba(0,0,0,0.04);
border-radius: 16px;
padding: 1.6rem 1.8rem 1.5rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
opacity: 0;
animation: sn-bm-card-in 0.55s ease forwards;
}
.sn-bm-card:nth-child(1) { animation-delay: 0.05s; }
.sn-bm-card:nth-child(2) { animation-delay: 0.18s; }
.sn-bm-card:nth-child(3) { animation-delay: 0.32s; }
.sn-bm-card:hover {
box-shadow: 0 8px 28px rgba(0,0,0,0.10);
transform: translateY(-3px);
}
/* Filet décoratif gradient en haut de la card (couleur via modifier) */
.sn-bm-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, #E0A564 0%, #c88a4f 100%);
border-radius: 16px 16px 0 0;
}
.sn-bm-card--histoire::before {
background: linear-gradient(90deg, #f5d76e 0%, #d4a82a 50%, #b8860b 100%);
}
.sn-bm-card--analyse::before {
background: linear-gradient(90deg, #ffb88c 0%, #ee5a24 50%, #c44518 100%);
}
.sn-bm-card--faq::before {
background: linear-gradient(90deg, #8ec5e0 0%, #5598c0 50%, #39579c 100%);
}

/* === Header de chaque card (badge rond + titre uppercase + pill compteur) */
.sn-bm-card-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.sn-bm-badge {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
line-height: 1;
transition: transform 0.3s ease;
}
.sn-bm-card:hover .sn-bm-badge {
transform: scale(1.05) rotate(-3deg);
}
/* Badge OR - Histoire */
.sn-bm-card--histoire .sn-bm-badge {
background: linear-gradient(135deg, #fff7d6 0%, #ffe89a 50%, #f5cd5b 100%);
border: 1px solid rgba(184,134,11,0.3);
box-shadow: 0 4px 14px rgba(212,168,42,0.3),
            inset 0 1px 2px rgba(255,255,255,0.8),
            inset 0 -2px 4px rgba(184,134,11,0.15);
}
/* Badge ORANGE - Analyse */
.sn-bm-card--analyse .sn-bm-badge {
background: linear-gradient(135deg, #fff5eb 0%, #ffd8b5 50%, #ee9a6a 100%);
border: 1px solid rgba(238,90,36,0.3);
box-shadow: 0 4px 14px rgba(238,90,36,0.25),
            inset 0 1px 2px rgba(255,255,255,0.8),
            inset 0 -2px 4px rgba(196,69,24,0.15);
}
/* Badge BLEU - FAQ */
.sn-bm-card--faq .sn-bm-badge {
background: linear-gradient(135deg, #eef6fb 0%, #c6dff0 50%, #8ec5e0 100%);
border: 1px solid rgba(85,152,192,0.3);
box-shadow: 0 4px 14px rgba(85,152,192,0.28),
            inset 0 1px 2px rgba(255,255,255,0.85),
            inset 0 -2px 4px rgba(57,87,156,0.15);
}
.sn-bm-badge-emoji {
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.12));
}
.sn-bm-card-title {
margin: 0 !important;
padding: 0 !important;
font-size: 1rem !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #1a1a1a !important;
line-height: 1.25 !important;
flex: 1;
min-width: 0;
}
.sn-bm-count-pill {
display: inline-flex;
align-items: center;
gap: 5px;
background: linear-gradient(135deg, rgba(57,87,156,0.08), rgba(85,152,192,0.08));
border: 1px solid rgba(57,87,156,0.12);
border-radius: 50px;
padding: 4px 12px;
font-size: 0.7rem;
font-weight: 700;
color: #39579C;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
}

/* === Contenu texte des sections ======================================= */
.sn-bm-content {
font-size: 0.92rem;
line-height: 1.72;
color: #444;
font-weight: 400;
position: relative;
z-index: 1;
}
.sn-bm-content p { margin: 0 0 1em 0; }
.sn-bm-content p:last-child { margin-bottom: 0; }
.sn-bm-content strong {
font-weight: 700;
color: #1a1a1a;
background: linear-gradient(180deg, transparent 60%, rgba(224,165,100,0.22) 60%);
padding: 0 2px;
border-radius: 2px;
}
/* Mots-clés "métier" auto-détectés (bold_keywords_in_html) : highlight plus
   prononcé et ombre subtile pour bien les distinguer des bolds manuels.
   La classe est ajoutée par ScanNuts_Core_V100::bold_keywords_in_html(). */
.sn-bm-content strong.sn-bm-keyword {
background: linear-gradient(180deg, transparent 55%, rgba(224,165,100,0.42) 55%);
color: #1a1a1a;
text-shadow: 0 0 1px rgba(224,165,100,0.18);
box-shadow: inset 0 -1px 0 rgba(184,116,42,0.18);
}

/* === Sous-titres de paragraphe (H3/H4) - design charté =================
   Saisis par l'éditeur via le menu "Format" de TinyMCE. Le rendu reprend
   le pattern .sn-cp-avis-card-label de la page Code Promo : uppercase,
   letter-spacing, accent latéral cuivré, point coloré en préfixe pour
   créer un repère visuel clair sans surcharger.                         */
.sn-bm-content h3,
.sn-bm-content h4 {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 800 !important;
color: #1a1a1a !important;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 1.6em 0 0.6em 0 !important;
padding: 0 0 0 14px !important;
position: relative;
line-height: 1.3 !important;
border: none !important;
}
.sn-bm-content h3 {
font-size: 0.92rem !important;
}
.sn-bm-content h4 {
font-size: 0.82rem !important;
color: #4a4a4a !important;
letter-spacing: 0.05em;
}
/* Filet latéral cuivré (accent visuel) */
.sn-bm-content h3::before,
.sn-bm-content h4::before {
content: '';
position: absolute;
left: 0;
top: 0.18em;
bottom: 0.18em;
width: 4px;
border-radius: 4px;
background: linear-gradient(180deg, #E0A564 0%, #c88a4f 50%, #b8742a 100%);
box-shadow: 0 0 0 1px rgba(224,165,100,0.18);
}
.sn-bm-content h4::before {
background: linear-gradient(180deg, #c88a4f 0%, #a87539 100%);
width: 3px;
}

/* v102.130 → v102.131 → v102.134 - HIERARCHIE 4 NIVEAUX dans la section "Notre Analyse"
 * =========================================================================
 * NIVEAU 1 PRIMARY  = h4.sn-bm-h4--primary (BIG, uppercase, thick orange bar, deep color)
 *                     Detection : titres contenant un mot-cle metier (point fort,
 *                     point critique, verdict, etc.) via has_section_keyword().
 * NIVEAU 1 standard = h4 (default, sub-section style, barre orange normale)
 *                     Detection : 7 criteres standards d'auto_detect_subtitles
 *                     SANS mot-cle metier present dans le titre.
 * NIVEAU 2 secondary= h4.sn-bm-h4--secondary (filet pale + style plus leger)
 *                     Detection : split inline "Titre multi-mots : Contenu"
 *                     SANS mot-cle metier (sinon promu en primary v102.134).
 * NIVEAU 3 mini     = strong.sn-bm-mini-title (inline, gras + accent color)
 *                     Detection : split inline "MotUnique : Contenu" (1 mot court).
 */

/* v102.134 - NIVEAU 1 PRIMARY : titres de section avec mots-cles metier
 * Style BIG, uppercase via CSS, thick orange bar, couleur deep - pour
 * uniformiser visuellement les titres "le point fort" et "le point critique"
 * meme quand l'un est ecrit en majuscules dans la source et l'autre en
 * casse normale. Bug observe sur USN ou "Le point critique ScanNuts®"
 * apparaissait visuellement plus petit que "L'EFFICACITE QUANTITATIVE DES
 * FORMULES (LE POINT FORT)" alors qu'ils sont au meme niveau hierarchique.
 */
.sn-bm-content h4.sn-bm-h4--primary {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
font-weight: 800 !important;
color: #1d1d1d !important;
font-size: 1.05rem !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 2em 0 0.6em 0 !important;
padding: 0 0 0 14px !important;
position: relative;
line-height: 1.3 !important;
border: none !important;
}
.sn-bm-content h4.sn-bm-h4--primary::before {
content: '';
position: absolute;
left: 0;
top: 0.18em;
bottom: 0.18em;
width: 5px;
border-radius: 4px;
background: linear-gradient(180deg, #ee5a24 0%, #c44318 100%);
opacity: 1;
box-shadow: 0 0 0 1px rgba(238,90,36,0.18);
}
/* Premier titre primary d'une carte : pas de marge superieure */
.sn-bm-content > h4.sn-bm-h4--primary:first-child {
margin-top: 0 !important;
}

/* NIVEAU 2 : sous-titres avec ":" inline ("Titre multi-mots : Contenu")
 *   - Casse naturelle (pas uppercase)
 *   - Taille legerement plus petite que h4 primary
 *   - Couleur plus claire
 *   - Filet lateral plus fin et plus pale
 *   - Letter-spacing normal
 */
.sn-bm-content h4.sn-bm-h4--secondary {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
font-weight: 700 !important;
color: #6a6a6a !important;
font-size: 0.92rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 1.2em 0 0.4em 0 !important;
padding: 0 0 0 11px !important;
position: relative;
line-height: 1.35 !important;
border: none !important;
}
.sn-bm-content h4.sn-bm-h4--secondary::before {
content: '';
position: absolute;
left: 0;
top: 0.22em;
bottom: 0.22em;
width: 2px;
border-radius: 2px;
background: linear-gradient(180deg, #d4a574 0%, #b8895a 100%);
opacity: 0.7;
}
/* Premier sous-titre secondary : pas de marge superieure */
.sn-bm-content > h4.sn-bm-h4--secondary:first-child {
margin-top: 0 !important;
}

/* NIVEAU 3 : mini-titres inline "MotUnique : Contenu"
 * Apparaissent dans le flux du paragraphe (pas un bloc separe).
 * Style : gras + couleur accent + leger underline subtil pour visibilite. */
.sn-bm-content .sn-bm-mini-title {
font-weight: 700 !important;
color: #c88a4f !important;
background: linear-gradient(180deg, transparent 70%, rgba(224,165,100,0.18) 70%, rgba(224,165,100,0.18) 95%, transparent 95%);
padding: 0 2px;
border-radius: 2px;
}

/* Premier sous-titre d'une carte : pas de marge supérieure pour ne pas
   créer un trou bizarre juste après le badge de la carte. */
.sn-bm-content > h3:first-child,
.sn-bm-content > h4:first-child {
margin-top: 0 !important;
}

.sn-bm-content em {
font-style: italic;
color: #6a5d52;
}
.sn-bm-content a {
color: #ee5a24;
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(238,90,36,0.3);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
transition: text-decoration-color 0.2s ease;
}
.sn-bm-content a:hover { text-decoration-color: #ee5a24; }
.sn-bm-content ul,
.sn-bm-content ol {
margin: 0 0 1em 0;
padding-left: 1.5em;
}
.sn-bm-content ul li,
.sn-bm-content ol li { margin-bottom: 0.4em; }
.sn-bm-content ul li::marker { color: #E0A564; }

/* === Drop-cap (lettrine designée) sur 1er paragraphe ================== */
.sn-bm-content--dropcap > p:first-child::first-letter {
float: left;
font-family: 'Poppins', 'Georgia', serif;
font-size: 3.2em;
font-weight: 900;
line-height: 0.85;
margin: 0.06em 0.14em 0 0;
padding: 0.06em 0.1em 0;
letter-spacing: -0.02em;
user-select: none;
}
.sn-bm-card--histoire .sn-bm-content--dropcap > p:first-child::first-letter {
background: linear-gradient(135deg, #b8860b 0%, #d4a82a 50%, #8b6508 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.sn-bm-card--analyse .sn-bm-content--dropcap > p:first-child::first-letter {
background: linear-gradient(135deg, #c44518 0%, #ee5a24 50%, #b8742a 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

/* === FAQ - items dépliables (details/summary) ========================= */
.sn-bm-faq-list {
display: flex;
flex-direction: column;
gap: 0.65rem;
position: relative;
z-index: 1;
}
.sn-bm-faq-item {
background: linear-gradient(135deg, #f8fbfd 0%, #eef4f8 100%);
border: 1px solid rgba(85, 152, 192, 0.15);
border-radius: 12px;
overflow: hidden;
transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.sn-bm-faq-item:hover {
border-color: rgba(85, 152, 192, 0.28);
transform: translateY(-1px);
}
.sn-bm-faq-item[open] {
box-shadow: 0 6px 18px rgba(85, 152, 192, 0.15);
border-color: rgba(85, 152, 192, 0.35);
background: linear-gradient(135deg, #f3f9fc 0%, #e6f0f7 100%);
}
.sn-bm-faq-q {
cursor: pointer;
padding: 0.95rem 3rem 0.95rem 1.1rem;
font-weight: 700;
color: #2c5872;
font-size: 0.95rem;
line-height: 1.4;
list-style: none;
position: relative;
transition: color 0.2s ease;
user-select: none;
/* display:block sur summary pour compat iOS Safari : par défaut <summary>
   a `display: list-item` qui peut causer des bugs de tap/click sur certains
   anciens Safari mobile. Forcer `block` est un fix communément recommandé. */
display: block;
}
.sn-bm-faq-q::-webkit-details-marker { display: none; }
.sn-bm-faq-q::marker { display: none; content: ''; }
.sn-bm-faq-q::after {
content: '+';
position: absolute;
right: 1.1rem;
top: 50%;
width: 22px;
height: 22px;
margin-top: -11px;
border-radius: 50%;
background: linear-gradient(135deg, #5598c0 0%, #39579c 100%);
color: #fff;
font-size: 1rem;
font-weight: 600;
line-height: 22px;
text-align: center;
box-shadow: 0 2px 6px rgba(57,87,156,0.25);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sn-bm-faq-item[open] .sn-bm-faq-q::after {
transform: rotate(45deg);
}
.sn-bm-faq-q:hover { color: #1e4359; }
.sn-bm-faq-a {
padding: 0 1.1rem 1rem 1.1rem;
font-size: 0.92rem;
line-height: 1.7;
color: #3a3530;
border-top: 1px solid rgba(85, 152, 192, 0.15);
padding-top: 0.9rem;
animation: sn-bm-faq-open 0.35s ease both;
}
@keyframes sn-bm-faq-open {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: translateY(0); }
}
.sn-bm-faq-a p { margin: 0 0 0.7em 0; }
.sn-bm-faq-a p:last-child { margin-bottom: 0; }
.sn-bm-faq-a strong {
color: #1a1a1a;
font-weight: 700;
background: linear-gradient(180deg, transparent 60%, rgba(85,152,192,0.20) 60%);
padding: 0 2px;
border-radius: 2px;
}
/* Mots-clés métier auto-détectés dans la FAQ : highlight bleu plus prononcé
   pour cohérence avec la palette de la card FAQ (vs. doré sur Histoire/Analyse). */
.sn-bm-faq-a strong.sn-bm-keyword {
background: linear-gradient(180deg, transparent 55%, rgba(85,152,192,0.38) 55%);
color: #1a1a1a;
text-shadow: 0 0 1px rgba(85,152,192,0.18);
box-shadow: inset 0 -1px 0 rgba(57,87,156,0.18);
}
.sn-bm-faq-a a {
color: #2c5872;
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(44, 88, 114, 0.3);
}
.sn-bm-faq-a a:hover { text-decoration-color: #2c5872; }

/* === Responsive - tablette ============================================ */
@media (max-width: 768px) {
/* CRITICAL BUG FIX (v101.4) : sur mobile, l'animation .sn-bm-card-in
   peut être interrompue par certains contextes - iOS Safari avec scroll
   rapide pendant le chargement, prefers-reduced-motion activé (mode
   économie de batterie iPhone), ad-blockers qui strippent les animations,
   page builders qui interceptent le rendu, etc. Si l'animation est
   interrompue avant la fin, l'opacity reste à 0 (état initial CSS) et
   la card devient INVISIBLE bien que présente dans le DOM. C'est ainsi
   que la FAQ "disparaissait" sur smartphone alors qu'elle existait bien.
   Fix : sur mobile, on force opacity:1 et on désactive l'animation -
   gain bonus en performance/batterie sans perte UX significative
   (les fades sont peu visibles sur petit écran de toute façon).        */
.sn-bm-card {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}

.sn-bm-section    { margin: 2rem auto 1rem; padding: 0 0.4rem; }
.sn-bm-card       { padding: 1.4rem 1.3rem 1.3rem; border-radius: 14px; }
.sn-bm-card-head  { gap: 10px; margin-bottom: 0.85rem; }
.sn-bm-badge      { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 11px; }
.sn-bm-card-title { font-size: 0.92rem !important; }
/* FIX v101.5 : préventif pour tablettes étroites (portrait) où la pill
   et le titre peuvent commencer à se superposer comme sur mobile.
   Force la pill sur sa propre ligne sous le titre.                    */
.sn-bm-count-pill {
    flex-basis: 100%;
    margin-left: 50px; /* badge 40px + gap 10px */
    margin-top: 4px;
}
.sn-bm-content    { font-size: 0.9rem; }
.sn-bm-content h3 { font-size: 0.86rem !important; }
.sn-bm-content h4 { font-size: 0.78rem !important; }
.sn-bm-content h4.sn-bm-h4--primary { font-size: 0.95rem !important; padding-left: 12px !important; }
.sn-bm-content h4.sn-bm-h4--secondary { font-size: 0.88rem !important; }
.sn-bm-content--dropcap > p:first-child::first-letter { font-size: 2.8em; }
}

/* === Responsive - mobile ============================================== */
@media (max-width: 480px) {
.sn-bm-section    { margin: 1.6rem auto 1rem; }
.sn-bm-header     { margin-bottom: 1.4rem; }
.sn-bm-tag        { font-size: 0.66rem; padding: 4px 11px; letter-spacing: 0.12em; }
.sn-bm-subtitle   { font-size: 0.82rem; padding: 0 0.4rem; }
.sn-bm-card       { padding: 1.2rem 1rem 1.1rem; border-radius: 13px; }
.sn-bm-card-head  { gap: 9px; margin-bottom: 0.75rem; }
.sn-bm-badge      { width: 36px; height: 36px; font-size: 1.1rem; border-radius: 10px; }
.sn-bm-card-title { font-size: 0.85rem !important; letter-spacing: 0.03em; }
/* FIX v101.5 : sur mobile, le titre "QUESTIONS FRÉQUENTES" + la pill
   "📋 3 questions" sur la même ligne flex étaient trop larges, ce qui
   forçait le titre à wrapper sur 2 lignes ET la pill à se superposer
   sur la 1ère ligne (visible sur la capture utilisateur).
   Solution : flex-basis:100% force la pill à passer sur sa propre
   ligne flex, sous le titre. margin-left:45px (badge 36px + gap 9px)
   l'aligne verticalement avec le titre, pas avec le badge.            */
.sn-bm-count-pill {
    font-size: 0.62rem;
    padding: 3px 9px;
    flex-basis: 100%;
    margin-left: 45px;
    margin-top: 4px;
}
.sn-bm-content    { font-size: 0.88rem; line-height: 1.65; }
.sn-bm-content h3 { font-size: 0.82rem !important; margin-top: 1.4em !important; padding-left: 11px !important; }
.sn-bm-content h4 { font-size: 0.76rem !important; margin-top: 1.3em !important; padding-left: 10px !important; }
.sn-bm-content h4.sn-bm-h4--primary { font-size: 0.92rem !important; margin-top: 1.6em !important; padding-left: 11px !important; letter-spacing: 0.06em !important; }
.sn-bm-content h4.sn-bm-h4--secondary { font-size: 0.86rem !important; margin-top: 1.1em !important; padding-left: 9px !important; }
.sn-bm-content h3::before, .sn-bm-content h4::before { width: 3px; }
.sn-bm-content h4.sn-bm-h4--primary::before { width: 4px; }
.sn-bm-content h4.sn-bm-h4--secondary::before { width: 2px; }
.sn-bm-content--dropcap > p:first-child::first-letter {
    font-size: 2.4em;
    margin: 0.04em 0.1em 0 0;
}
.sn-bm-faq-q      { padding: 0.85rem 2.6rem 0.85rem 0.95rem; font-size: 0.88rem; }
.sn-bm-faq-q::after { right: 0.85rem; width: 20px; height: 20px; margin-top: -10px; }
.sn-bm-faq-a      { padding: 0.8rem 0.95rem 0.95rem; font-size: 0.86rem; }
}