/*
Theme Name: Ma Bulle Bien-Etre
Theme URI: https://onwebdesign.fr
Author: ON Web Design
Author URI: https://onwebdesign.fr
Description: Theme sur mesure de l'application Ma Bulle Bien-Etre. Bien-etre, yoga, sophrologie, hypnose. Mode sombre/clair, palette douce et apaisante.
Version: 0.5.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ma-bulle-bien-etre
*/

/* ==========================================================================
   1. Variables (palette MBB)
   ========================================================================== */
:root {
    --mbb-beige: #F5F0E8;
    --mbb-sauge: #7A8B6F;
    --mbb-vert: #5A6B4F;
    --mbb-blanc: #FAF7F2;
    --mbb-gris: #3D3D3D;
    --mbb-gris-fonce: #1A1A2E;

    --mbb-bg: var(--mbb-beige);
    --mbb-bg-card: var(--mbb-blanc);
    --mbb-bg-section: rgba(255,255,255,0.5);
    --mbb-text: var(--mbb-gris);
    --mbb-text-soft: #6B6B6B;
    --mbb-accent: var(--mbb-sauge);
    --mbb-accent-strong: var(--mbb-vert);
    --mbb-border: rgba(122, 139, 111, 0.18);
    --mbb-shadow: 0 4px 20px rgba(90, 107, 79, 0.08);

    --mbb-font-base: 'Nunito', 'Lato', system-ui, -apple-system, sans-serif;
    --mbb-font-heading: 'Poppins', 'Nunito', sans-serif;

    --mbb-radius: 14px;
    --mbb-radius-lg: 20px;
}

[data-theme="dark"] {
    /* PALETTE DARK MODE — INVERSION STRICTE de la light :
       Light : titre VERT FONCÉ sur fond BEIGE
       Dark  : titre BEIGE     sur fond VERT FONCÉ
       Utilise TOUTES les couleurs palette SAUF #1A1A2E (gris foncé exclu).
       - #5A6B4E vert foncé    → fond principal
       - #7A8B6F sauge         → cartes
       - #F5F0E8 beige chaud   → titres + accents + bordures
       - #FAF7F2 blanc cassé   → texte body (un peu plus blanc pour body)
       - #3D3D3D gris doux     → shadows */
    --mbb-bg: #18260d;        /* body : vert nuit profond (demande user 27/05 v2) */
    --mbb-bg-card: #38473D;   /* cards : vert tres fonce, ressortent sur body nuit */
    --mbb-bg-section: rgba(245, 240, 232, 0.06);
    --mbb-text: #FAF7F2;
    --mbb-text-soft: rgba(250, 247, 242, 0.80);
    --mbb-accent: #F5F0E8;
    --mbb-accent-strong: #F5F0E8;
    --mbb-border: rgba(245, 240, 232, 0.25);
    --mbb-shadow: 0 4px 24px rgba(61, 61, 61, 0.45);
}

/* === DARK MODE OVERRIDES GLOBAUX — force la cohérence palette stricte ===
   Battent toutes les règles éparses qui hardcodent des couleurs hors palette.
   Sélecteurs très spécifiques pour gagner la cascade. */
html[data-theme="dark"] body,
html[data-theme="dark"] body:not(.wp-admin) main,
html[data-theme="dark"] body:not(.wp-admin) section {
    color: var(--mbb-text);
}
/* TITRES h1/h2/h3/h4 = beige (#F5F0E8) partout en dark */
html[data-theme="dark"] body:not(.wp-admin) h1,
html[data-theme="dark"] body:not(.wp-admin) h2,
html[data-theme="dark"] body:not(.wp-admin) h3,
html[data-theme="dark"] body:not(.wp-admin) h4,
html[data-theme="dark"] body:not(.wp-admin) h5,
html[data-theme="dark"] body:not(.wp-admin) h6 {
    color: #F5F0E8 !important;
}
/* Élimine tout résidu #1A1A2E hardcodé en dark (gris foncé exclu) */
html[data-theme="dark"] body:not(.wp-admin) [style*="color:#5A6B4E"],
html[data-theme="dark"] body:not(.wp-admin) [style*="color: #5A6B4E"] {
    color: var(--mbb-text) !important;
}

/* Corrections specifiques mode sombre */
[data-theme="dark"] body::before {
    opacity: 0.3;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(122, 139, 111, 0.10) 0%, transparent 35%),
        radial-gradient(circle at 85% 75%, rgba(122, 139, 111, 0.10) 0%, transparent 35%);
}

[data-theme="dark"] .mbb-header {
    background: #5A6B4F !important; /* vert fonce palette (demande user 27/05) */
    border-bottom-color: var(--mbb-border);
}

/* Hero : retravailler l'overlay sombre */
[data-theme="dark"] .mbb-hero::before {
    background: radial-gradient(ellipse at center, rgba(122, 139, 111, 0.18) 0%, transparent 60%);
}
[data-theme="dark"] .mbb-hero-eyebrow { color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-hero-text { color: var(--mbb-text); }

/* Smileys & cartes : meilleur contraste */
[data-theme="dark"] .mbb-smiley-item,
[data-theme="dark"] .mbb-card,
[data-theme="dark"] .mbb-pratique-card,
[data-theme="dark"] .mbb-pricing-card,
[data-theme="dark"] .mbb-faq-item,
[data-theme="dark"] .mbb-module-item {
    background: var(--mbb-bg-card);
    border-color: var(--mbb-border);
    color: var(--mbb-text);
}
[data-theme="dark"] .mbb-smiley-item:hover,
[data-theme="dark"] .mbb-pratique-card:hover {
    border-color: var(--mbb-accent-strong);
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    color: var(--mbb-accent-strong);
}
[data-theme="dark"] .mbb-card-thumb {
    background-color: #5A6B4E;
}

/* Boutons */
[data-theme="dark"] .mbb-btn {
    background: var(--mbb-accent);
    color: #5A6B4E;
    box-shadow: 0 2px 12px rgba(122, 139, 111, 0.25);
}
[data-theme="dark"] .mbb-btn:hover {
    background: var(--mbb-accent-strong);
    color: #5A6B4E;
}
[data-theme="dark"] .mbb-btn-outline {
    color: var(--mbb-accent-strong) !important;
    border-color: var(--mbb-accent-strong) !important;
    background: transparent !important;
}
[data-theme="dark"] .mbb-btn-outline:hover {
    background: var(--mbb-accent) !important;
    color: #5A6B4E !important;
}

/* Liens et accents */
[data-theme="dark"] a { color: var(--mbb-accent-strong); }
[data-theme="dark"] a:hover { color: #FFFFFF; }
[data-theme="dark"] .mbb-link-arrow { color: var(--mbb-accent-strong); }

/* Headings : maintenir contraste */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 { color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-card-body h3 a { color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-card-body h3 a:hover { color: #FFFFFF; }

/* CTA banner garde ses couleurs vives */
[data-theme="dark"] .mbb-cta-banner {
    background: linear-gradient(135deg, #5A6B4E 0%, #7A8B6F 100%);
}

/* Tags */
/* TAG catégorie article : BLANC FORCÉ light + dark (demande user explicite).
   Le badge ".mbb-tag" affiche le nom de la catégorie (YOGA, etc.) avec fond
   sauge — le texte doit être BLANC pour contraste max, peu importe le mode. */
[data-theme="dark"] .mbb-tag { background: var(--mbb-accent); color: #FFFFFF !important; }
[data-theme="dark"] .mbb-tag-free { background: #F5F0E8; color: #FFFFFF !important; }

/* Form inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #5A6B4E;
    color: var(--mbb-text);
    border-color: var(--mbb-border) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: rgba(184,184,200,0.6); }

/* FAQ accordeon */
[data-theme="dark"] .mbb-faq-item summary { color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-faq-answer { color: var(--mbb-text); }

/* Module list "termine" */
[data-theme="dark"] .mbb-module-item.is-done {
    background: rgba(184, 212, 168, 0.10);
    border-color: rgba(184, 212, 168, 0.4);
}
[data-theme="dark"] .mbb-module-meta .mbb-done { color: #F5F0E8; }

/* Tips block */
[data-theme="dark"] .mbb-tips-block {
    background: var(--mbb-bg-card);
    border-left-color: var(--mbb-accent-strong);
}

/* Pricing : badge featured */
[data-theme="dark"] .mbb-pricing-featured { border-color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-pricing-badge { background: var(--mbb-accent); color: #5A6B4E; }
[data-theme="dark"] .mbb-pricing-soon { color: #FFD27A; }
[data-theme="dark"] .mbb-pricing-features li { border-bottom-color: var(--mbb-border); color: var(--mbb-text); }
[data-theme="dark"] .mbb-pricing-price { color: var(--mbb-accent-strong); }

/* Welcome */
[data-theme="dark"] .mbb-welcome { color: var(--mbb-accent-strong); }

/* Disclaimer */
[data-theme="dark"] .mbb-disclaimer { color: var(--mbb-text-soft); }

/* Theme toggle button */
[data-theme="dark"] .mbb-theme-toggle {
    background: var(--mbb-bg-card);
    color: var(--mbb-accent-strong);
    border-color: var(--mbb-border);
}

/* Burger */
[data-theme="dark"] .mbb-burger {
    background: var(--mbb-bg-card);
    color: var(--mbb-accent-strong);
    border-color: var(--mbb-border);
}

/* Dashboard sidebar */
[data-theme="dark"] .mbb-dashboard-sidebar { background: var(--mbb-bg-card); border-color: var(--mbb-border); }

/* Footer : vert fonce palette (demande user 27/05 v2) */
[data-theme="dark"] .mbb-footer {
    background: #5A6B4F;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Mobile nav overlay : DESKTOP nav doit etre transparent (heriter du header),
   sinon une bande verte foncee apparait derriere les liens. Le drawer mobile
   garde son bg via media query plus bas. */
[data-theme="dark"] .mbb-nav { background: transparent !important; }
[data-theme="dark"] .mbb-nav-list a { color: var(--mbb-text); border-bottom-color: var(--mbb-border); }

/* Card hover en sombre */
[data-theme="dark"] .mbb-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

/* Progress bar background */
[data-theme="dark"] [style*="background:rgba(122,139,111,0.15)"] {
    background: rgba(122, 139, 111, 0.15) !important;
}

/* ==========================================================================
   Mode sombre - corrections renforcees v0.2 (anti-disparition)
   ========================================================================== */

/* Tous les paragraphes lisibles */
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] label {
    color: var(--mbb-text);
}

/* Tous les <small> visibles */
[data-theme="dark"] small {
    color: var(--mbb-text-soft);
}

/* Tous les <strong> et <b> en accent visible */
[data-theme="dark"] strong,
[data-theme="dark"] b {
    color: var(--mbb-accent-strong);
    font-weight: 700;
}

/* Tous les separateurs (hr, border-top, border-bottom) */
[data-theme="dark"] hr {
    border: 0;
    border-top: 1px solid var(--mbb-border);
}
[data-theme="dark"] [style*="border-top: 1px solid"] {
    border-top-color: var(--mbb-border) !important;
}
[data-theme="dark"] [style*="border-bottom: 1px solid"] {
    border-bottom-color: var(--mbb-border) !important;
}

/* Tableaux */
[data-theme="dark"] table {
    background: var(--mbb-bg-card);
    border-color: var(--mbb-border);
}
[data-theme="dark"] table th,
[data-theme="dark"] table td {
    border-color: var(--mbb-border);
    color: var(--mbb-text);
}
[data-theme="dark"] table th {
    background: rgba(122, 139, 111, 0.08);
    color: var(--mbb-accent-strong);
}

/* Code / pre */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background: #5A6B4E;
    color: #FFD27A;
    border: 1px solid var(--mbb-border);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Blockquote / citation */
[data-theme="dark"] blockquote {
    border-left: 3px solid var(--mbb-accent);
    background: var(--mbb-bg-card);
    color: var(--mbb-text);
}
[data-theme="dark"] cite {
    color: var(--mbb-accent-strong);
}

/* Selection texte */
[data-theme="dark"] ::selection {
    background: var(--mbb-accent);
    color: #5A6B4E;
}
[data-theme="dark"] ::-moz-selection {
    background: var(--mbb-accent);
    color: #5A6B4E;
}

/* Scrollbars (Chromium) */
[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--mbb-bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--mbb-bg-card);
    border-radius: 6px;
    border: 2px solid var(--mbb-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--mbb-accent); }

/* Focus visible (accessibilite) */
[data-theme="dark"] *:focus-visible {
    outline: 2px solid var(--mbb-accent-strong);
    outline-offset: 2px;
}

/* Fieldset / details */
[data-theme="dark"] fieldset,
[data-theme="dark"] details {
    border: 1px solid var(--mbb-border);
    background: var(--mbb-bg-card);
}

/* Inputs : forcer la lisibilite y compris autofill */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] button {
    color-scheme: dark;
}
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--mbb-text);
    -webkit-box-shadow: 0 0 0 1000px #5A6B4E inset;
    border-color: var(--mbb-border);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--mbb-accent-strong) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(122, 139, 111, 0.3);
}

/* Boutons natifs (form submit) */
[data-theme="dark"] button[type="submit"],
[data-theme="dark"] input[type="submit"] {
    background: var(--mbb-accent);
    color: #5A6B4E;
    border: 0;
}
[data-theme="dark"] button[type="submit"]:hover,
[data-theme="dark"] input[type="submit"]:hover {
    background: var(--mbb-accent-strong);
}

/* Checkbox / radio bordures visibles */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    accent-color: var(--mbb-accent);
    border: 1px solid var(--mbb-border);
}

/* Cards de notification (.mbb-card avec bg #FEE etc.) */
[data-theme="dark"] .mbb-card[style*="background: #FEE"],
[data-theme="dark"] .mbb-card[style*="background:#FEE"] {
    background: rgba(255, 100, 100, 0.12) !important;
    border-color: rgba(255, 100, 100, 0.4) !important;
    color: #FFAEAE !important;
}

/* Bandeau "welcome" inline style green */
[data-theme="dark"] .mbb-card[style*="rgba(184, 212, 168"] {
    background: rgba(184, 212, 168, 0.10) !important;
    border-color: rgba(184, 212, 168, 0.4) !important;
}

/* Footer : liens encore lisibles */
[data-theme="dark"] .mbb-footer h4 { color: #FAF7F2; }
[data-theme="dark"] .mbb-footer a { color: rgba(255, 255, 255, 0.85); }
[data-theme="dark"] .mbb-footer a:hover { color: #FFFFFF; }
[data-theme="dark"] .mbb-footer-bottom { color: rgba(255, 255, 255, 0.55); }
[data-theme="dark"] .mbb-footer-grid { border-bottom-color: rgba(255, 255, 255, 0.10); }
[data-theme="dark"] .mbb-footer p { color: rgba(255, 255, 255, 0.85); }

/* Hero text contraste max */
[data-theme="dark"] .mbb-hero-title { color: var(--mbb-accent-strong); }

/* Section headers */
[data-theme="dark"] .mbb-section-header h2 { color: var(--mbb-accent-strong); }
/* Description sous le titre de section : BLANC pur en dark mode pour lisibilité max
   (var(--mbb-text) = #ECEAE5 paraissait trop dim sur le fond sombre #1A1A2E). */
[data-theme="dark"] .mbb-section-header p { color: #FFFFFF !important; opacity: 1 !important; }

/* CTA banner garde contraste blanc sur fond colore */
[data-theme="dark"] .mbb-cta-banner h2,
[data-theme="dark"] .mbb-cta-banner p { color: #FFFFFF; }
[data-theme="dark"] .mbb-cta-banner .mbb-btn {
    background: #FFFFFF;
    color: var(--mbb-accent-strong);
}
[data-theme="dark"] .mbb-cta-banner .mbb-btn:hover {
    background: var(--mbb-blanc);
}

/* Burger lignes encore plus visibles */
[data-theme="dark"] .mbb-burger-bars,
[data-theme="dark"] .mbb-burger-bars::before,
[data-theme="dark"] .mbb-burger-bars::after { background: var(--mbb-accent-strong); }

/* Sticky header backdrop */
[data-theme="dark"] .mbb-header { box-shadow: 0 1px 0 var(--mbb-border); }

/* Pratique cards emoji visible */
[data-theme="dark"] .mbb-pratique-emoji,
[data-theme="dark"] .mbb-smiley-emoji { filter: brightness(1.2); }

/* Smileys text labels */
[data-theme="dark"] .mbb-smiley-item span { color: var(--mbb-text); font-weight: 600; }
[data-theme="dark"] .mbb-smiley-item:hover span { color: var(--mbb-accent-strong); }

/* ==========================================================================
   FIX MODE SOMBRE : Smileys avec couleur de fond personnalisee
   Force texte SOMBRE lisible sur cards pastel claires, peu importe le theme.
   Triple-specificity pour battre toute autre regle dark.
   ========================================================================== */
/* === MODE CLAIR : la card garde sa couleur pastel + texte sombre === */
html body:not([data-theme="dark"]) .mbb-smiley-item.has-custom-bg,
html body:not([data-theme="dark"]) .mbb-smiley-item.has-custom-bg .mbb-smiley-emoji,
html body:not([data-theme="dark"]) .mbb-smiley-item.has-custom-bg span {
    color: #5A6B4E !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.55) !important;
    font-weight: 700 !important;
    filter: none !important;
}
html body:not([data-theme="dark"]) .mbb-smiley-item.has-custom-bg .mbb-smiley-emoji {
    text-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.10)) !important;
}
html body:not([data-theme="dark"]) .mbb-smiley-item.has-custom-bg:hover,
html body:not([data-theme="dark"]) .mbb-smiley-item.has-custom-bg:hover span {
    color: #000 !important;
    border-color: rgba(0,0,0,0.30) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18) !important;
}
html body:not([data-theme="dark"]) .mbb-smiley-item.has-custom-bg {
    border: 2px solid rgba(0,0,0,0.10) !important;
}

/* === MODE SOMBRE : on FORCE le fond dark + texte clair pour TOUTES les cards
       (custom-bg ou non), peu importe l'inline style PHP. La couleur perso
       du smiley devient un accent (border-left + lueur subtile). === */
html body[data-theme="dark"] .mbb-smiley-item.has-custom-bg,
html[data-theme="dark"] body .mbb-smiley-item.has-custom-bg {
    background: var(--mbb-bg-card) !important;
    color: var(--mbb-text) !important;
    border: 1px solid var(--mbb-border) !important;
    border-left: 4px solid var(--mbb-card-bg, var(--mbb-accent-strong)) !important;
    text-shadow: none !important;
    position: relative;
    overflow: hidden;
}
html body[data-theme="dark"] .mbb-smiley-item.has-custom-bg::after,
html[data-theme="dark"] body .mbb-smiley-item.has-custom-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mbb-card-bg, transparent);
    opacity: 0.10;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 0;
}
html body[data-theme="dark"] .mbb-smiley-item.has-custom-bg > *,
html[data-theme="dark"] body .mbb-smiley-item.has-custom-bg > * {
    position: relative;
    z-index: 1;
}
html body[data-theme="dark"] .mbb-smiley-item.has-custom-bg span,
html body[data-theme="dark"] .mbb-smiley-item.has-custom-bg .mbb-smiley-emoji,
html[data-theme="dark"] body .mbb-smiley-item.has-custom-bg span,
html[data-theme="dark"] body .mbb-smiley-item.has-custom-bg .mbb-smiley-emoji {
    color: var(--mbb-text) !important;
    text-shadow: none !important;
    filter: none !important;
}
html body[data-theme="dark"] .mbb-smiley-item.has-custom-bg:hover,
html[data-theme="dark"] body .mbb-smiley-item.has-custom-bg:hover {
    border-color: var(--mbb-accent-strong) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.40) !important;
    transform: translateY(-3px);
}
html body[data-theme="dark"] .mbb-smiley-item.has-custom-bg:hover::after,
html[data-theme="dark"] body .mbb-smiley-item.has-custom-bg:hover::after {
    opacity: 0.18;
}

/* ==========================================================================
   CARDS SMILEY UNIFORMES — light + dark mode
   IMPORTANT : le JS theme-toggle pose data-theme="dark" sur <html>,
   PAS sur <body>. Donc on cible avec html[data-theme="dark"] et
   html:not([data-theme="dark"]) pour le mode clair.
   ========================================================================== */
/* ---------- MODE CLAIR : beige #F5F0E8 (match reference Anxiete + Petite forme) */
html:not([data-theme="dark"]) .mbb-smiley-item:not(.has-custom-bg) {
    background: var(--mbb-beige) !important;
    color: var(--mbb-text) !important;
    border: 2px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 2px 8px rgba(90, 107, 79, 0.06) !important;
}
html:not([data-theme="dark"]) .mbb-smiley-item:not(.has-custom-bg):hover {
    border-color: rgba(0,0,0,0.30) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18) !important;
    transform: translateY(-2px);
}
html:not([data-theme="dark"]) .mbb-smiley-item:not(.has-custom-bg) span,
html:not([data-theme="dark"]) .mbb-smiley-item:not(.has-custom-bg) .mbb-smiley-label {
    color: #5A6B4E !important;
    font-weight: 700 !important;
}

/* ---------- MODE SOMBRE : fond sombre + border + texte clair */
html[data-theme="dark"] .mbb-smiley-item:not(.has-custom-bg) {
    background: var(--mbb-bg-card) !important; /* #7A8B6F */
    color: var(--mbb-text) !important;
    border: 1px solid var(--mbb-border) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.20) !important;
}
html[data-theme="dark"] .mbb-smiley-item:not(.has-custom-bg):hover {
    background: rgba(122, 139, 111, 0.10) !important;
    border-color: var(--mbb-accent-strong) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.40) !important;
    transform: translateY(-2px);
}
html[data-theme="dark"] .mbb-smiley-item:not(.has-custom-bg) span,
html[data-theme="dark"] .mbb-smiley-item:not(.has-custom-bg) .mbb-smiley-label {
    color: var(--mbb-text) !important; /* #ECEAE5 */
    font-weight: 600 !important;
    text-shadow: none !important;
}
html[data-theme="dark"] .mbb-smiley-item:not(.has-custom-bg):hover span,
html[data-theme="dark"] .mbb-smiley-item:not(.has-custom-bg):hover .mbb-smiley-label {
    color: var(--mbb-accent-strong) !important;
}
html[data-theme="dark"] .mbb-smiley-item:not(.has-custom-bg) .mbb-smiley-emoji {
    filter: brightness(1.15) !important;
}

/* ---------- Override inline white background (cache LiteSpeed legacy) */
html:not([data-theme="dark"]) .mbb-smileys .mbb-smiley-item[style*="background:#FFF"]:not(.has-custom-bg),
html:not([data-theme="dark"]) .mbb-smileys .mbb-smiley-item[style*="background: #FFF"]:not(.has-custom-bg),
html:not([data-theme="dark"]) .mbb-smileys .mbb-smiley-item[style*="background:white"]:not(.has-custom-bg),
html:not([data-theme="dark"]) .mbb-smileys .mbb-smiley-item[style*="background: white"]:not(.has-custom-bg) {
    background: var(--mbb-beige) !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* Pratique card text */
[data-theme="dark"] .mbb-pratique-card p { color: var(--mbb-text-soft); }

/* Module list "ordre" badge */
[data-theme="dark"] .mbb-module-num { background: #F5F0E8; color: #38473D; }

/* Inputs placeholder bonne lisibilite */
[data-theme="dark"] ::placeholder { color: rgba(184, 184, 200, 0.7); opacity: 1; }

/* Input border par defaut visible */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea {
    border: 1px solid var(--mbb-border) !important;
}

/* Liens "back" */
[data-theme="dark"] .mbb-link-back { color: var(--mbb-accent-strong); }

/* Empty messages */
[data-theme="dark"] .mbb-empty { color: var(--mbb-text-soft); }

/* Contenu prose */
[data-theme="dark"] .mbb-content { color: var(--mbb-text); }
[data-theme="dark"] .mbb-content h1,
[data-theme="dark"] .mbb-content h2,
[data-theme="dark"] .mbb-content h3 { color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-content a { color: var(--mbb-accent-strong); text-decoration: underline; }

/* ==========================================================================
   2. Reset / base
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background-color: var(--mbb-bg);
    color: var(--mbb-text);
    font-family: var(--mbb-font-base);
    font-size: 17px;
    line-height: 1.65;
    transition: background-color 0.3s ease, color 0.3s ease;
}
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mbb-font-heading);
    color: var(--mbb-accent-strong);
    font-weight: 600;
    line-height: 1.25;
    margin-top: 0;
}
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }

a { color: var(--mbb-accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--mbb-accent-strong); }

p { margin-top: 0; }

/* Texture de fond subtile */
body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.6;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(122, 139, 111, 0.06) 0%, transparent 35%),
        radial-gradient(circle at 85% 75%, rgba(122, 139, 111, 0.06) 0%, transparent 35%),
        radial-gradient(circle at 50% 110%, rgba(122, 139, 111, 0.04) 0%, transparent 50%);
}

.mbb-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   3. Boutons
   ========================================================================== */
.mbb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    background: var(--mbb-accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: var(--mbb-font-base);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(122, 139, 111, 0.25);
}
.mbb-btn:hover { background: var(--mbb-accent-strong); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(90, 107, 79, 0.3); }
.mbb-btn:active { transform: translateY(0); }
.mbb-btn-sm { padding: 8px 16px; font-size: 14px; }
.mbb-btn-lg { padding: 16px 32px; font-size: 17px; }

.mbb-link-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--mbb-accent-strong);
    font-weight: 600;
    gap: 6px;
    transition: gap 0.2s ease;
}
.mbb-link-arrow:hover { gap: 10px; color: var(--mbb-accent-strong); }

/* ==========================================================================
   4. Header
   ========================================================================== */
.mbb-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(245, 240, 232, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 0; /* barre horizontale retirée — user request */
    padding: 14px 0;
}
[data-theme="dark"] .mbb-header { background: #5A6B4F !important; box-shadow: none !important; border-bottom: 0 !important; } /* vert fonce palette (demande user 27/05) */
[data-theme="dark"] .mbb-footer { background: #5A6B4F !important; color: #FAF7F2 !important; } /* vert fonce palette (demande user 27/05 v2) */
[data-theme="dark"] .mbb-footer h4, [data-theme="dark"] .mbb-footer a { color: #FAF7F2 !important; }
[data-theme="dark"] .mbb-footer p, [data-theme="dark"] .mbb-footer small { color: rgba(250, 247, 242, 0.85) !important; }

.mbb-header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
}
.mbb-logo { display: flex; align-items: center; }
.mbb-logo-text {
    font-family: var(--mbb-font-heading);
    font-weight: 700;
    color: var(--mbb-accent-strong);
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.mbb-nav { flex: 1; }
.mbb-nav-list {
    display: flex;
    gap: 24px;
    justify-content: center;
}
.mbb-nav-list a {
    color: var(--mbb-text);
    font-weight: 500;
    padding: 6px 4px;
    position: relative;
}
.mbb-nav-list a::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0; height: 2px; background: var(--mbb-accent);
    transition: width 0.2s ease;
}
.mbb-nav-list a:hover::after { width: 100%; }

.mbb-header-actions { display: flex; align-items: center; gap: 12px; }

.mbb-theme-toggle {
    background: var(--mbb-bg-card);
    border: 1px solid var(--mbb-border);
    color: var(--mbb-text);
    border-radius: 999px;
    width: 38px; height: 38px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    transition: all 0.2s ease;
}
.mbb-theme-toggle:hover { background: var(--mbb-accent); color: #fff; border-color: var(--mbb-accent); }
.mbb-theme-toggle .icon-sun { display: none; }
.mbb-theme-toggle .icon-moon { display: inline; }
[data-theme="dark"] .mbb-theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .mbb-theme-toggle .icon-moon { display: none; }

/* ==========================================================================
   5. Sections
   ========================================================================== */
.mbb-main { display: block; }
.mbb-section { padding: 80px 0; }
.mbb-section-header { text-align: center; margin-bottom: 48px; }
.mbb-section-header h2 { margin-bottom: 12px; }
.mbb-section-header p { color: var(--mbb-text-soft); max-width: 640px; margin: 0 auto; }

/* alternance fond */
.mbb-section-smileys,
.mbb-section-pratiques,
.mbb-section-temoignages { background: var(--mbb-bg-section); }

/* ==========================================================================
   6. Hero
   ========================================================================== */
.mbb-hero {
    padding: 96px 0 72px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.mbb-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(122, 139, 111, 0.10) 0%, transparent 60%);
    pointer-events: none;
}
.mbb-hero-content { position: relative; max-width: 820px; margin: 0 auto; }
.mbb-hero-eyebrow {
    color: var(--mbb-accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.mbb-hero-title { margin-bottom: 18px; color: var(--mbb-accent-strong); }
.mbb-hero-text { font-size: 1.15rem; color: var(--mbb-text-soft); margin-bottom: 36px; }
.mbb-hero-cta { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   7. Smileys grid
   ========================================================================== */
.mbb-smileys {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin: 0 auto 24px;
    max-width: 960px;
}
.mbb-smiley-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 16px;
    background: var(--mbb-bg-card);
    border: 1px solid var(--mbb-border);
    border-radius: var(--mbb-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    color: var(--mbb-text);
    min-height: 130px;
}
.mbb-smiley-item:hover {
    transform: translateY(-4px);
    border-color: var(--mbb-accent);
    box-shadow: var(--mbb-shadow);
    color: var(--mbb-accent-strong);
}
.mbb-smiley-item img { width: 56px; height: 56px; object-fit: contain; }
.mbb-smiley-emoji { font-size: 42px; line-height: 1; }
.mbb-smiley-item span { font-size: 14px; font-weight: 600; }

.mbb-disclaimer { text-align: center; color: var(--mbb-text-soft); margin-top: 16px; }

/* ==========================================================================
   8. Cards / grilles
   ========================================================================== */
.mbb-grid { display: grid; gap: 24px; }
.mbb-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mbb-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.mbb-card {
    background: var(--mbb-bg-card);
    border: 1px solid var(--mbb-border);
    border-radius: var(--mbb-radius);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mbb-card:hover { transform: translateY(-3px); box-shadow: var(--mbb-shadow); }

.mbb-card-thumb {
    display: block; /* IMPORTANT : nécessaire pour que aspect-ratio s'applique sur <a> aussi */
    aspect-ratio: 16/9;
    min-height: 180px; /* fallback si aspect-ratio non supporté (vieux navigateurs) */
    background-size: cover;
    background-position: center;
    background-color: var(--mbb-beige);
}
.mbb-card-body { padding: 20px 22px; }
.mbb-card-body h3 { margin: 8px 0 10px; }
.mbb-card-body h3 a { color: var(--mbb-accent-strong); }
.mbb-card-body h3 a:hover { color: var(--mbb-accent); }
.mbb-card-body p { color: var(--mbb-text-soft); margin-bottom: 14px; }

.mbb-tag {
    display: inline-block;
    padding: 3px 10px;
    background: var(--mbb-accent);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.mbb-tag-free { background: #F5F0E8; color: #3F5A2F; }
.mbb-tag-premium {
    background: linear-gradient(135deg, #F5C265 0%, #E6A23C 100%);
    color: #6B4400;
}
[data-theme="dark"] .mbb-tag-premium {
    background: linear-gradient(135deg, #E6A23C 0%, #BF7A1A 100%);
    color: #5A6B4E;
}

/* Pratiques */
.mbb-pratique-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 20px;
    background: var(--mbb-bg-card);
    border: 1px solid var(--mbb-border);
    border-radius: var(--mbb-radius);
    color: var(--mbb-text);
    transition: all 0.2s ease;
}
.mbb-pratique-card:hover {
    transform: translateY(-4px);
    border-color: var(--mbb-accent);
    box-shadow: var(--mbb-shadow);
    color: var(--mbb-accent-strong);
}
.mbb-pratique-emoji { font-size: 48px; margin-bottom: 12px; }
.mbb-pratique-card h3 { margin: 0 0 6px; }
.mbb-pratique-card p { color: var(--mbb-text-soft); margin: 0; font-size: 14px; }

/* Bibliotheque CTA */
.mbb-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 48px;
    background: linear-gradient(135deg, var(--mbb-accent) 0%, var(--mbb-accent-strong) 100%);
    color: #fff;
    border-radius: var(--mbb-radius-lg);
    flex-wrap: wrap;
}
.mbb-cta-banner h2 { color: #fff; margin-bottom: 8px; }
.mbb-cta-banner p { color: rgba(255, 255, 255, 0.92); margin: 0; max-width: 560px; }
.mbb-cta-banner .mbb-btn {
    background: #fff;
    color: var(--mbb-accent-strong);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.mbb-cta-banner .mbb-btn:hover { background: var(--mbb-blanc); }

/* Temoignages */
.mbb-temoignage {
    padding: 28px;
    margin: 0;
    font-style: italic;
}
.mbb-temoignage p { color: var(--mbb-text); font-size: 1.05rem; margin-bottom: 14px; }
.mbb-temoignage cite { color: var(--mbb-accent); font-weight: 600; font-style: normal; font-size: 0.9rem; }

/* FAQ */
.mbb-faq { max-width: 820px; margin: 0 auto; }
.mbb-faq-item {
    background: var(--mbb-bg-card);
    border: 1px solid var(--mbb-border);
    border-radius: var(--mbb-radius);
    margin-bottom: 12px;
    overflow: hidden;
}
.mbb-faq-item summary {
    padding: 18px 22px;
    cursor: pointer;
    font-weight: 600;
    color: var(--mbb-accent-strong);
    list-style: none;
    position: relative;
    font-size: 1rem;
}
.mbb-faq-item summary::-webkit-details-marker { display: none; }
.mbb-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--mbb-accent);
    transition: transform 0.2s ease;
}
.mbb-faq-item[open] summary::after { content: '-'; }
.mbb-faq-answer { padding: 0 22px 18px; color: var(--mbb-text-soft); }

.mbb-empty {
    text-align: center;
    color: var(--mbb-text-soft);
    padding: 48px 0;
    font-style: italic;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.mbb-footer {
    background: var(--mbb-vert);
    color: rgba(255, 255, 255, 0.85);
    padding: 56px 0 24px;
    margin-top: 64px;
}
[data-theme="dark"] .mbb-footer { background: #5A6B4F; } /* vert fonce palette (demande user 27/05 v2) */
.mbb-footer h4 { color: #fff; margin-bottom: 16px; font-size: 1rem; }
.mbb-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mbb-footer ul li { margin-bottom: 8px; }
.mbb-footer a { color: rgba(255, 255, 255, 0.78); }
.mbb-footer a:hover { color: #fff; }
.mbb-footer-bottom { text-align: center; padding-top: 24px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); }

/* ==========================================================================
   10. "Bonjour [Prenom]"
   ========================================================================== */
.mbb-welcome {
    font-family: var(--mbb-font-heading);
    font-size: 1.5rem;
    color: var(--mbb-accent-strong);
    margin-bottom: 1rem;
    font-weight: 600;
}

/* ==========================================================================
   11. Single programme + modules
   ========================================================================== */
.mbb-prog-hero {
    padding: 64px 0 48px;
    background-color: var(--mbb-bg);
    position: relative;
    isolation: isolate;
}
.mbb-prog-hero.has-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(245, 240, 232, 0.85), rgba(245, 240, 232, 0.95)),
        var(--mbb-prog-thumb);
    background-size: cover;
    background-position: center;
}
[data-theme="dark"] .mbb-prog-hero.has-thumb::before {
    /* Palette stricte : overlay vert fonce #38473D (pas le bleu-gris #1A1A2E) */
    background-image:
        linear-gradient(rgba(55, 70, 61, 0.88), rgba(55, 70, 61, 0.96)),
        var(--mbb-prog-thumb);
}
.mbb-prog-hero h1,
.mbb-prog-hero p,
.mbb-prog-hero span,
.mbb-prog-hero a { position: relative; z-index: 1; }
[data-theme="dark"] .mbb-prog-hero h1 { color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-prog-hero .mbb-prog-excerpt { color: var(--mbb-text); }
[data-theme="dark"] .mbb-prog-hero .mbb-link-back { color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-prog-hero .mbb-prog-meta { color: var(--mbb-text); }
[data-theme="dark"] .mbb-prog-hero .mbb-prog-meta strong { color: var(--mbb-accent-strong); }
.mbb-link-back {
    display: inline-block;
    color: var(--mbb-accent-strong);
    margin-bottom: 18px;
    font-weight: 600;
}
.mbb-prog-discipline { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mbb-prog-excerpt { font-size: 1.15rem; color: var(--mbb-text-soft); max-width: 760px; }
.mbb-prog-meta { display: flex; gap: 16px; align-items: center; margin-top: 16px; flex-wrap: wrap; }

.mbb-modules-list {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    counter-reset: mbb-module;
}
.mbb-module-item {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 20px 24px;
    background: var(--mbb-bg-card);
    border: 1px solid var(--mbb-border);
    border-radius: var(--mbb-radius);
    margin-bottom: 12px;
    transition: all 0.2s ease;
}
.mbb-module-item:hover {
    border-color: var(--mbb-accent);
    transform: translateX(4px);
    box-shadow: var(--mbb-shadow);
}
.mbb-module-item.is-done { background: rgba(184, 212, 168, 0.18); }
.mbb-module-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: #F5F0E8;
    color: #37463D;
    border-radius: 999px;
    font-weight: 700;
    font-family: var(--mbb-font-heading);
    flex-shrink: 0;
}
.mbb-module-item.is-done .mbb-module-num { background: #F5F0E8; color: #3F5A2F; }
.mbb-module-content { flex: 1; min-width: 0; }
.mbb-module-content h3 { margin: 0 0 4px; font-size: 1.05rem; }
.mbb-module-tips { color: var(--mbb-text-soft); margin: 0 0 6px; font-size: 0.94rem; }
.mbb-module-meta { display: flex; gap: 14px; font-size: 0.85rem; color: var(--mbb-text-soft); flex-wrap: wrap; }
.mbb-module-meta .mbb-done { color: #5A8B3F; font-weight: 600; }
.mbb-module-meta .mbb-progress-badge {
    background: rgba(122, 139, 111, 0.12);
    color: var(--mbb-vert);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.82rem;
}
.mbb-module-item.is-progress { border-left: 3px solid var(--mbb-sauge); padding-left: 12px; }
[data-theme="dark"] .mbb-module-meta .mbb-progress-badge {
    background: rgba(122, 139, 111, 0.15);
    color: #FAF7F2;
}

/* Module page (player) */
.mbb-player-wrap {
    aspect-ratio: 16/9;
    background: #000;
    border-radius: var(--mbb-radius-lg);
    overflow: hidden;
    margin-bottom: 32px;
    position: relative;
}
.mbb-player-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.mbb-tips-block {
    padding: 22px 26px;
    background: var(--mbb-bg-card);
    border-left: 4px solid var(--mbb-accent);
    border-radius: 8px;
    margin: 24px 0;
}
.mbb-tips-block strong { color: var(--mbb-accent-strong); display: block; margin-bottom: 6px; }

/* Dashboard membre */
.mbb-dashboard {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
}
.mbb-dashboard-sidebar {
    background: var(--mbb-bg-card);
    border: 1px solid var(--mbb-border);
    border-radius: var(--mbb-radius);
    padding: 24px;
    align-self: start;
}
.mbb-dashboard-sidebar h3 { font-size: 1rem; margin: 0 0 12px; color: var(--mbb-accent-strong); }
.mbb-dashboard-sidebar ul li { margin-bottom: 8px; }
@media (max-width: 768px) { .mbb-dashboard { grid-template-columns: 1fr; } }

/* ==========================================================================
   12. Pricing (choix abonnement)
   ========================================================================== */
.mbb-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 0 auto;
    max-width: 1100px;
}
.mbb-pricing-card {
    background: var(--mbb-bg-card);
    border: 1px solid var(--mbb-border);
    border-radius: var(--mbb-radius-lg);
    padding: 32px 28px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mbb-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mbb-shadow);
}
.mbb-pricing-featured {
    border-color: var(--mbb-accent);
    border-width: 2px;
    transform: scale(1.02);
    box-shadow: var(--mbb-shadow);
}
.mbb-pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mbb-accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.mbb-pricing-card h2 {
    margin: 0 0 16px;
    color: var(--mbb-accent-strong);
    font-size: 1.4rem;
}
.mbb-pricing-price {
    margin: 0 0 4px;
    font-family: var(--mbb-font-heading);
    color: var(--mbb-accent-strong);
}
.mbb-pricing-price strong {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}
.mbb-pricing-price span {
    color: var(--mbb-text-soft);
    font-size: 1rem;
    margin-left: 4px;
}
.mbb-pricing-soon {
    color: #C28A00;
    font-weight: 600;
    margin: 8px 0 16px;
    font-size: 0.92rem;
}
.mbb-pricing-features {
    list-style: none;
    padding: 0;
    margin: 24px 0 28px;
}
.mbb-pricing-features li {
    padding: 8px 0;
    color: var(--mbb-text);
    border-bottom: 1px solid var(--mbb-border);
}
.mbb-pricing-features li:last-child { border-bottom: 0; }
.mbb-btn-outline {
    background: transparent !important;
    color: var(--mbb-accent-strong) !important;
    border: 2px solid var(--mbb-accent) !important;
    box-shadow: none !important;
}
.mbb-btn-outline:hover {
    background: var(--mbb-accent) !important;
    color: #fff !important;
}

/* ==========================================================================
   13. Mobile menu (hamburger)
   ========================================================================== */
.mbb-burger {
    display: none;
    background: var(--mbb-bg-card);
    border: 1px solid var(--mbb-border);
    color: var(--mbb-text);
    border-radius: 999px;
    width: 38px; height: 38px;
    cursor: pointer;
    align-items: center; justify-content: center;
    font-size: 20px;
    transition: all 0.2s ease;
}
.mbb-burger:hover { background: var(--mbb-accent); color: #fff; border-color: var(--mbb-accent); }
.mbb-burger-bars {
    display: inline-block;
    width: 18px; height: 2px;
    background: currentColor;
    position: relative;
}
.mbb-burger-bars::before, .mbb-burger-bars::after {
    content: ''; position: absolute; left: 0;
    width: 18px; height: 2px;
    background: currentColor;
    transition: transform 0.2s ease;
}
.mbb-burger-bars::before { top: -6px; }
.mbb-burger-bars::after  { top: 6px; }
.mbb-burger.is-open .mbb-burger-bars { background: transparent; }
.mbb-burger.is-open .mbb-burger-bars::before { transform: translateY(6px) rotate(45deg); }
.mbb-burger.is-open .mbb-burger-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   14. Responsive
   ========================================================================== */
@media (max-width: 900px) {
    .mbb-burger { display: inline-flex; }

    .mbb-nav {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: var(--mbb-bg);
        z-index: 90;
        padding: 80px 24px 24px;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
        flex: none;
        overflow-y: auto;
    }
    .mbb-nav.is-open { transform: translateX(0); }
    .mbb-nav-list {
        flex-direction: column;
        gap: 0;
    }
    .mbb-nav-list li { width: 100%; }
    .mbb-nav-list a {
        display: block;
        padding: 18px 0;
        font-size: 1.2rem;
        border-bottom: 1px solid var(--mbb-border);
    }
    .mbb-nav-list a::after { display: none; }

    .mbb-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .mbb-dashboard { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    body { font-size: 16px; }
    .mbb-section { padding: 56px 0; }
    .mbb-hero { padding: 64px 0 48px; }
    .mbb-cta-banner { padding: 32px; }
    .mbb-footer-grid { grid-template-columns: 1fr; }
    .mbb-pricing-featured { transform: none; }
    .mbb-module-item { flex-wrap: wrap; }
    .mbb-module-num { width: 38px; height: 38px; font-size: 0.9rem; }
}
/* DOUBLONS @media (max-width: 900px) + (max-width: 600px) SUPPRIMÉS ici :
   - L'ancienne règle `.mbb-nav { display: none }` écrasait le drawer mobile
     (lignes 1215+) → le burger ne pouvait plus afficher le menu.
   - Les autres règles (footer-grid, font-size, sections padding) sont déjà
     définies plus haut et dans le bloc RESPONSIVE MOBILE FINAL v0.8 en fin
     de fichier (sources de vérité uniques). */

/* ==========================================================================
   15. Blog (home.php / single.php / category.php)
   ========================================================================== */

/* Hero blog */
.mbb-blog-hero {
    padding: 72px 0 32px;
    text-align: center;
    background: linear-gradient(180deg, var(--mbb-bg-section) 0%, transparent 100%);
}
.mbb-blog-hero .mbb-hero-eyebrow {
    color: var(--mbb-accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.mbb-blog-hero h1 { margin: 0 0 18px; }
.mbb-blog-intro { max-width: 720px; margin: 0 auto; color: var(--mbb-text-soft); font-size: 1.1rem; }
.mbb-blog-intro p { margin: 0 0 8px; }

/* Filtres categories */
.mbb-blog-filters {
    background: var(--mbb-bg-section);
    border-top: 1px solid var(--mbb-border);
    border-bottom: 1px solid var(--mbb-border);
    padding: 16px 0;
    overflow-x: auto;
}
.mbb-blog-cats {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 0;
}
.mbb-blog-cats li { white-space: nowrap; }
/* .mbb-blog-cats a : style supprime, repris desormais 1:1 par les regles
   `.mbb-biblio-filter-row > a, .mbb-blog-cats li > a` (~ligne 4928+) pour
   garantir parite visuelle avec les pills de la bibliotheque. */
.mbb-cat-count { font-size: 0.78rem; }

/* Card article */
.mbb-card-article { display: flex; flex-direction: column; height: 100%; }
.mbb-card-article .mbb-card-thumb-link { display: block; line-height: 0; }
.mbb-card-article .mbb-card-thumb {
    aspect-ratio: 16/10;
    background-color: var(--mbb-beige);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.mbb-card-article:hover .mbb-card-thumb { transform: scale(1.02); }
.mbb-card-thumb-placeholder { font-size: 56px; opacity: 0.6; }
.mbb-card-article .mbb-card-body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.mbb-card-article .mbb-card-body h3 { margin: 10px 0 8px; line-height: 1.35; font-size: 1.15rem; }
.mbb-card-article .mbb-card-body h3 a { color: var(--mbb-accent-strong); }
.mbb-card-article .mbb-card-body h3 a:hover { color: var(--mbb-accent); }
.mbb-article-meta {
    color: var(--mbb-text-soft);
    font-size: 0.85rem;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mbb-article-reading-time { font-size: 0.85rem; }
.mbb-article-excerpt {
    color: var(--mbb-text-soft);
    margin: 0 0 16px;
    flex: 1;
}

/* Grid blog : assure mêmes hauteurs */
.mbb-blog-grid { align-items: stretch; }
.mbb-blog-grid > article { display: flex; flex-direction: column; }

/* Pagination */
.mbb-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 48px 0 0;
    flex-wrap: wrap;
}
.mbb-pagination .page-numbers,
.mbb-pagination a.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    background: var(--mbb-bg-card);
    border: 1px solid var(--mbb-border);
    border-radius: 8px;
    color: var(--mbb-text);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
.mbb-pagination a.page-numbers:hover {
    background: var(--mbb-accent);
    color: #fff;
    border-color: var(--mbb-accent);
}
.mbb-pagination .page-numbers.current {
    background: var(--mbb-accent-strong);
    color: #fff;
    border-color: var(--mbb-accent-strong);
}
.mbb-pagination .page-numbers.dots { background: transparent; border: 0; }

/* Section blog sur home */
.mbb-section-blog-home {
    background: var(--mbb-bg-section);
}

/* Single article */
.mbb-article-hero {
    padding: 56px 0 28px;
    text-align: center;
}
.mbb-article-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin: 12px 0 18px;
    color: var(--mbb-accent-strong);
    line-height: 1.25;
}
.mbb-article-meta-large {
    color: var(--mbb-text-soft);
    font-size: 0.96rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
}
.mbb-article-meta-large strong { color: var(--mbb-accent-strong); }
.mbb-meta-sep { opacity: 0.5; }

/* Breadcrumb */
.mbb-breadcrumb {
    margin: 0 0 24px;
    font-size: 0.88rem;
}
.mbb-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
.mbb-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mbb-text-soft);
}
.mbb-breadcrumb li:not(:last-child)::after {
    content: '/';
    color: var(--mbb-border);
    font-weight: 700;
}
.mbb-breadcrumb a {
    color: var(--mbb-accent);
    transition: color 0.2s ease;
}
.mbb-breadcrumb a:hover { color: var(--mbb-accent-strong); text-decoration: underline; }
.mbb-breadcrumb [aria-current="page"] {
    color: var(--mbb-accent-strong);
    font-weight: 600;
}

/* Cover image */
.mbb-article-cover {
    aspect-ratio: 21/9;
    background-size: cover;
    background-position: center;
    border-radius: var(--mbb-radius-lg);
    margin: 0 0 48px;
    box-shadow: var(--mbb-shadow);
}

/* Contenu article */
.mbb-article-content { font-size: 1.05rem; line-height: 1.8; color: var(--mbb-text); }
.mbb-article-content h2 {
    margin: 48px 0 16px;
    font-size: 1.7rem;
    color: var(--mbb-accent-strong);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mbb-border);
}
.mbb-article-content h3 {
    margin: 36px 0 12px;
    font-size: 1.3rem;
    color: var(--mbb-accent-strong);
}
.mbb-article-content p { margin: 0 0 18px; }
.mbb-article-content ul,
.mbb-article-content ol {
    margin: 0 0 24px;
    padding-left: 24px;
    list-style: disc;
}
.mbb-article-content ol { list-style: decimal; }
.mbb-article-content li { margin-bottom: 8px; padding-left: 6px; }
.mbb-article-content ul li::marker { color: var(--mbb-accent); }
.mbb-article-content blockquote {
    margin: 32px 0;
    padding: 20px 28px;
    background: var(--mbb-bg-card);
    border-left: 4px solid var(--mbb-accent);
    border-radius: 8px;
    font-style: italic;
    color: var(--mbb-text);
}
.mbb-article-content blockquote p:last-child { margin-bottom: 0; }
.mbb-article-content a {
    color: var(--mbb-accent-strong);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.mbb-article-content a:hover { color: var(--mbb-accent); }
.mbb-article-content img {
    border-radius: 12px;
    margin: 24px 0;
    box-shadow: var(--mbb-shadow);
}
.mbb-article-content code {
    background: rgba(122,139,111,0.12);
    color: var(--mbb-accent-strong);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.92em;
}

/* Tags article */
.mbb-article-tags {
    margin: 32px 0;
    padding-top: 24px;
    border-top: 1px solid var(--mbb-border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.mbb-tag-soft {
    background: rgba(122,139,111,0.12);
    color: var(--mbb-accent-strong);
}

/* Auteur */
.mbb-article-author {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 32px 0;
    padding: 24px;
    background: var(--mbb-bg-card);
    border: 1px solid var(--mbb-border);
    border-radius: var(--mbb-radius);
}
.mbb-author-avatar { border-radius: 999px; flex-shrink: 0; }
.mbb-article-author h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--mbb-accent-strong); }
.mbb-article-author p { margin: 0; color: var(--mbb-text-soft); font-size: 0.95rem; line-height: 1.6; }

/* Partage */
.mbb-article-share {
    margin: 32px 0;
    padding: 18px 22px;
    background: var(--mbb-bg-card);
    border-radius: var(--mbb-radius);
    border: 1px solid var(--mbb-border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.mbb-article-share strong { color: var(--mbb-accent-strong); margin-right: 8px; }
.mbb-article-share a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--mbb-accent);
    color: #fff;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
.mbb-article-share a:hover { background: var(--mbb-accent-strong); transform: translateY(-2px); color: #fff; }

/* Section "articles connexes" */
.mbb-section-related {
    background: var(--mbb-bg-section);
    margin-top: 48px;
}

/* Mode sombre - blog */
/* .mbb-blog-cats a dark : SUPPRIME, repris par les regles unifiees ~4928+ */
[data-theme="dark"] .mbb-card-article .mbb-card-body h3 a { color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-card-article .mbb-card-body h3 a:hover { color: #fff; }
[data-theme="dark"] .mbb-pagination .page-numbers,
[data-theme="dark"] .mbb-pagination a.page-numbers { background: var(--mbb-bg-card); color: var(--mbb-text); border-color: var(--mbb-border); }
[data-theme="dark"] .mbb-pagination a.page-numbers:hover { background: var(--mbb-accent); color: #5A6B4E; }
[data-theme="dark"] .mbb-pagination .page-numbers.current { background: var(--mbb-accent-strong); color: #5A6B4E; border-color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-article-content blockquote { background: var(--mbb-bg-card); color: var(--mbb-text); }
[data-theme="dark"] .mbb-article-share a { background: var(--mbb-accent); color: #5A6B4E; }
[data-theme="dark"] .mbb-article-share a:hover { background: var(--mbb-accent-strong); color: #5A6B4E; }
[data-theme="dark"] .mbb-article-author { background: var(--mbb-bg-card); border-color: var(--mbb-border); }
[data-theme="dark"] .mbb-article-author p { color: var(--mbb-text-soft); }
[data-theme="dark"] .mbb-tag-soft { background: rgba(122, 139, 111, 0.15); color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-breadcrumb a { color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-breadcrumb a:hover { color: #fff; }
[data-theme="dark"] .mbb-breadcrumb [aria-current="page"] { color: var(--mbb-text); }
[data-theme="dark"] .mbb-breadcrumb li { color: var(--mbb-text-soft); }

/* Responsive blog */
@media (max-width: 768px) {
    .mbb-blog-hero { padding: 56px 0 24px; }
    .mbb-blog-cats { justify-content: flex-start; padding: 0 16px; }
    .mbb-article-hero { padding: 40px 0 20px; }
    .mbb-article-share a { flex: 1 1 calc(50% - 8px); justify-content: center; }
    .mbb-article-author { flex-direction: column; gap: 12px; }
    .mbb-article-content h2 { font-size: 1.4rem; margin: 36px 0 12px; }
    .mbb-article-content h3 { font-size: 1.15rem; margin: 28px 0 10px; }
}

/* ==========================================================================
   16. RESPONSIVE MOBILE renforce v0.5+ (smartphone + tablette)
   ========================================================================== */

/* Tablette + petite tablette (<= 1024px) */
@media (max-width: 1024px) {
    .mbb-container { padding: 0 20px; }
    .mbb-hero { padding: 64px 0 48px; }
    .mbb-section { padding: 56px 0; }
    .mbb-section-header { margin-bottom: 32px; }
    .mbb-cta-banner { padding: 36px; }
    .mbb-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .mbb-pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .mbb-footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 28px; }
}

/* Mobile (<= 768px) - touch friendly */
@media (max-width: 768px) {
    /* Inputs : font 16px = pas de zoom iOS automatique */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Boutons touch >= 44px (Apple HIG / Material) */
    .mbb-btn {
        min-height: 44px;
        padding: 12px 20px;
    }
    .mbb-btn-sm { min-height: 38px; padding: 8px 14px; font-size: 14px; }
    .mbb-btn-lg { min-height: 50px; padding: 14px 24px; }

    /* Hero CTA : stack vertical */
    .mbb-hero-cta {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    .mbb-hero-cta .mbb-btn { width: 100%; }
    .mbb-hero-text { font-size: 1rem; }

    /* Smileys : 2 col mobile (au lieu d'auto-fill 140px) */
    .mbb-smileys {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 4px;
    }
    .mbb-smiley-item {
        min-height: 110px;
        padding: 16px 10px;
        gap: 8px;
    }
    .mbb-smiley-emoji { font-size: 36px; }
    .mbb-smiley-item span { font-size: 13px; }

    /* Cards programmes : 1 col */
    .mbb-grid-3,
    .mbb-grid-4 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .mbb-card-body { padding: 16px 18px; }
    .mbb-card-body h3 { font-size: 1.1rem; }

    /* Pricing : 1 col, no scale featured */
    .mbb-pricing-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .mbb-pricing-featured { transform: none; }
    .mbb-pricing-card { padding: 24px 22px; }
    .mbb-pricing-price strong { font-size: 2rem; }

    /* CTA banner stack */
    .mbb-cta-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 28px 24px;
        gap: 18px;
    }
    .mbb-cta-banner .mbb-btn { width: 100%; }

    /* Footer 2 cols */
    .mbb-footer { padding: 40px 0 20px; margin-top: 40px; }
    .mbb-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 18px;
        padding-bottom: 24px;
    }
    .mbb-footer-grid > div:first-child {
        grid-column: 1 / -1; /* Logo + intro full width */
    }

    /* Modules : layout vertical */
    .mbb-module-item {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 18px;
    }
    .mbb-module-num { width: 38px; height: 38px; font-size: 0.9rem; }
    .mbb-module-content h3 { font-size: 1rem; }
    .mbb-module-tips { font-size: 0.86rem; }

    /* Hero programme */
    .mbb-prog-hero { padding: 40px 0 32px; }
    .mbb-prog-excerpt { font-size: 1rem; }
    .mbb-prog-meta { gap: 12px; font-size: 0.88rem; }

    /* FAQ */
    .mbb-faq-item summary { padding: 16px 18px; font-size: 0.96rem; }
    .mbb-faq-item summary::after { right: 18px; }
    .mbb-faq-answer { padding: 0 18px 16px; font-size: 0.94rem; }

    /* Header padding mobile */
    .mbb-header { padding: 10px 0; }
    .mbb-header-actions { gap: 8px; }
    .mbb-theme-toggle { width: 36px; height: 36px; }
}

/* Mobile XS (<= 480px) - ultra compact */
@media (max-width: 480px) {
    .mbb-container { padding: 0 16px; }
    .mbb-section { padding: 40px 0; }
    .mbb-hero { padding: 48px 0 36px; }
    .mbb-hero-eyebrow { font-size: 0.78rem; margin-bottom: 12px; }

    /* Smileys : 2 col plus compactes */
    .mbb-smileys {
        gap: 8px;
        padding: 0;
    }
    .mbb-smiley-item {
        min-height: 96px;
        padding: 12px 8px;
        gap: 6px;
        border-radius: 12px;
    }
    .mbb-smiley-emoji { font-size: 32px; }
    .mbb-smiley-item span { font-size: 12px; line-height: 1.3; }

    /* Section header */
    .mbb-section-header { margin-bottom: 24px; }
    .mbb-section-header p { font-size: 0.94rem; }

    /* Footer 1 col */
    .mbb-footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* CTA banner padding */
    .mbb-cta-banner { padding: 22px 18px; border-radius: 14px; }
    .mbb-cta-banner h2 { font-size: 1.4rem; }

    /* Pricing card padding */
    .mbb-pricing-card { padding: 22px 18px; }

    /* Articles single */
    .mbb-article-cover { aspect-ratio: 16/10; margin-bottom: 28px; }
    .mbb-article-content { font-size: 1rem; line-height: 1.7; }
    .mbb-article-content h2 { font-size: 1.3rem; margin: 28px 0 10px; }
    .mbb-article-content h3 { font-size: 1.1rem; margin: 22px 0 8px; }

    /* Welcome message */
    .mbb-welcome { font-size: 1.2rem; }

    /* Burger menu plus visible */
    .mbb-burger { width: 42px; height: 42px; }
}

/* Touch device (no hover) - retire les hover effects qui restent collés */
@media (hover: none) and (pointer: coarse) {
    .mbb-card:hover,
    .mbb-smiley-item:hover,
    .mbb-pratique-card:hover,
    .mbb-pricing-card:hover {
        transform: none;
    }
    /* Mais on garde les active states pour feedback tactile */
    .mbb-card:active,
    .mbb-smiley-item:active,
    .mbb-pratique-card:active {
        transform: scale(0.98);
    }
}

/* Landscape mobile - éviter contenu trop étroit verticalement */
@media (max-height: 500px) and (orientation: landscape) {
    .mbb-hero { padding: 40px 0 28px; }
    .mbb-section { padding: 40px 0; }
}

/* ==========================================================================
   18. /mes-programmes/ - cards 3 par ligne FORCÉES
   (auto-fit étirait le seul item à 100% → on force repeat(3, 1fr))
   ========================================================================== */
.mbb-mp-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 22px !important;
    align-items: stretch;
}
.mbb-mp-grid .mbb-card-article {
    max-width: 100%;
    min-height: 360px;
}
.mbb-mp-grid .mbb-card-article .mbb-card-thumb {
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: var(--mbb-bg);
    min-height: 180px;
}
.mbb-mp-grid .mbb-card-article .mbb-card-body {
    padding: 16px 18px 18px;
}
.mbb-mp-grid .mbb-card-article .mbb-card-body h3 {
    font-size: 1.05rem;
    margin: 8px 0 6px;
    line-height: 1.35;
}
@media (max-width: 1024px) {
    .mbb-mp-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }
}
@media (max-width: 600px) {
    .mbb-mp-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .mbb-mp-grid .mbb-card-article { min-height: auto; }
}

/* ==========================================================================
   19. RESPONSIVE iPhone 12/13/14 (375-430px viewport)
   ========================================================================== */
@media (min-width: 376px) and (max-width: 430px) {
    body { font-size: 15px !important; }
    .mbb-container { padding-left: 14px !important; padding-right: 14px !important; }
    .mbb-hero { padding: 40px 0 28px !important; }
    .mbb-hero h1 { font-size: 1.7rem !important; line-height: 1.2 !important; }
    .mbb-hero-text { font-size: 0.96rem !important; }
    .mbb-section { padding: 36px 0 !important; }
    .mbb-section-header h2 { font-size: 1.4rem !important; }
    .mbb-header { padding: 8px 0 !important; }
    /* Header mobile : LOGO à gauche, BURGER au milieu, THEME + PROFIL tout à droite.
       Sur mobile le burger est l'ouvre-menu, donc on doit garder le profil/theme
       visible à droite — d'où le margin-left: auto sur .mbb-header-actions. */
    .mbb-header-inner {
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }
    .mbb-logo { flex: 0 0 auto !important; }
    .mbb-burger { order: 2; }
    .mbb-header-actions {
        order: 3 !important;
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    .mbb-logo-img { max-height: 36px !important; }
    .mbb-burger { width: 38px !important; height: 38px !important; }
    .mbb-theme-toggle { width: 32px !important; height: 32px !important; }
    .mbb-header-actions .mbb-btn-sm {
        font-size: 12px !important;
        padding: 6px 10px !important;
        min-height: 34px !important;
    }
    .mbb-smileys { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .mbb-smiley-item { min-height: 92px !important; padding: 10px 6px !important; }
    .mbb-smiley-emoji { font-size: 30px !important; }
    .mbb-smiley-item span { font-size: 11.5px !important; line-height: 1.25 !important; }
    .mbb-grid-3, .mbb-grid-4, .mbb-mp-grid,
    .mbb-pricing-grid, .mbb-hist-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .mbb-card-body { padding: 14px 16px !important; }
    .mbb-card-body h3 { font-size: 1.02rem !important; }
    .mbb-pricing-card { padding: 20px 16px !important; }
    .mbb-pricing-price strong { font-size: 1.8rem !important; }
    .mbb-cta-banner { padding: 24px 18px !important; gap: 14px !important; }
    .mbb-cta-banner h2 { font-size: 1.25rem !important; }
    .mbb-footer { padding: 32px 0 16px !important; }
    .mbb-footer-grid { gap: 22px !important; padding-bottom: 18px !important; }
    .mbb-article-content { font-size: 0.96rem !important; line-height: 1.7 !important; }
    .mbb-article-content h2 { font-size: 1.2rem !important; margin-top: 24px !important; }
    .mbb-article-content h3 { font-size: 1.04rem !important; margin-top: 20px !important; }
    .mbb-prog-hero h1 { font-size: 1.5rem !important; line-height: 1.25 !important; }
    .mbb-module-item { padding: 14px 16px !important; gap: 10px !important; }
    .mbb-module-num { width: 34px !important; height: 34px !important; font-size: 0.84rem !important; }
    .mbb-module-content h3 { font-size: 0.98rem !important; }
    .mbb-btn { font-size: 0.94rem !important; padding: 11px 18px !important; min-height: 44px !important; }
    .mbb-btn-lg { font-size: 1rem !important; padding: 13px 22px !important; min-height: 48px !important; }
    .mbb-faq-item summary { padding: 14px 16px !important; font-size: 0.94rem !important; }
    .mbb-form-row { grid-template-columns: 1fr !important; gap: 12px !important; }
    .mbb-form-field input,
    .mbb-form-field textarea,
    .mbb-form-field select {
        font-size: 16px !important;
        padding: 12px 14px !important;
        min-height: 46px !important;
    }
    .mbb-hist-toolbar { flex-direction: column !important; align-items: stretch !important; padding: 12px !important; }
    .mbb-hist-card-body { padding: 14px 16px 16px !important; }
}
/* iPhone SE (375px) ultra compact */
@media (max-width: 375px) {
    body { font-size: 14.5px !important; }
    .mbb-container { padding-left: 12px !important; padding-right: 12px !important; }
    .mbb-hero h1 { font-size: 1.5rem !important; }
    .mbb-section-header h2 { font-size: 1.25rem !important; }
    .mbb-smiley-emoji { font-size: 26px !important; }
    .mbb-smiley-item span { font-size: 11px !important; }
    .mbb-btn { font-size: 0.9rem !important; padding: 10px 14px !important; }
}

/* ==========================================================================
   17. POLISH FINAL v0.6 - cohérence & a11y & perf
   ========================================================================== */

/* --- Transitions cohérentes (vitesse uniforme partout) --- */
:root {
    --mbb-trans-fast: 0.15s ease-out;
    --mbb-trans-base: 0.2s ease-out;
    --mbb-trans-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Focus visible accessible (WCAG 2.1 AA) - partout --- */
*:focus-visible {
    outline: 3px solid var(--mbb-accent);
    outline-offset: 3px;
    border-radius: 4px;
    transition: outline-offset 0.1s ease;
}
.mbb-btn:focus-visible,
.mbb-btn-sm:focus-visible,
.mbb-btn-lg:focus-visible {
    outline: 3px solid var(--mbb-accent-strong);
    outline-offset: 3px;
}

/* --- Skip link (a11y - keyboard nav) --- */
.skip-link,
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 8px;
    background: var(--mbb-accent-strong);
    color: #fff;
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 700;
    z-index: 10000;
    text-decoration: none;
}
.skip-link:focus,
.skip-to-content:focus {
    left: 8px;
}

/* --- Reduced motion (accessibilité) --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .mbb-card:hover,
    .mbb-smiley-item:hover,
    .mbb-pratique-card:hover { transform: none; }
}

/* --- Print stylesheet (impression articles propre) --- */
@media print {
    .mbb-header,
    .mbb-footer,
    .mbb-hero-cta,
    .mbb-burger,
    .mbb-theme-toggle,
    .mbb-header-actions,
    .mbb-blog-filters,
    .mbb-pagination,
    .mbb-article-share,
    .mbb-cta-banner,
    .mbb-section-related,
    .mbb-breadcrumb,
    .mbb-newsletter-form,
    .mbb-disclaimer { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    a { color: #000 !important; text-decoration: underline; }
    .mbb-article-content { font-size: 12pt; line-height: 1.6; }
    h1, h2, h3 { color: #000 !important; page-break-after: avoid; }
    img { max-width: 100% !important; page-break-inside: avoid; }
}

/* --- Forced colors mode (Windows High Contrast) --- */
@media (forced-colors: active) {
    .mbb-btn,
    .mbb-pricing-card,
    .mbb-card,
    .mbb-smiley-item {
        border: 1px solid CanvasText;
    }
    .mbb-btn { background: ButtonFace; color: ButtonText; }
    .mbb-btn:hover { background: Highlight; color: HighlightText; }
}

/* --- Performance hints (GPU layer pour anim) --- */
.mbb-card,
.mbb-smiley-item,
.mbb-pratique-card,
.mbb-pricing-card,
.mbb-btn {
    will-change: transform;
}

/* --- Image lazy + cohérence aspect ratio --- */
img[loading="lazy"] { opacity: 0; transition: opacity 0.3s ease; }
img[loading="lazy"].loaded,
img[loading="lazy"][src] { opacity: 1; }

/* --- Selection texte branded --- */
::selection {
    background: var(--mbb-accent);
    color: #fff;
}
[data-theme="dark"] ::selection {
    background: var(--mbb-accent-strong);
    color: #5A6B4E;
}

/* --- Scrollbars custom (Chromium + Firefox) --- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(122,139,111,0.5) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(122,139,111,0.4);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--mbb-accent);
    background-clip: padding-box;
}

/* --- Loading spinner global --- */
@keyframes mbb-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.mbb-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--mbb-border);
    border-top-color: var(--mbb-accent);
    border-radius: 999px;
    animation: mbb-spin 0.8s linear infinite;
    vertical-align: middle;
}

/* --- Container max-width cohérent --- */
.mbb-container.mbb-container-sm { max-width: 720px; }
.mbb-container.mbb-container-md { max-width: 960px; }
.mbb-container.mbb-container-lg { max-width: 1200px; }
.mbb-container.mbb-container-xl { max-width: 1440px; }

/* --- Fix iOS Safari : body bounce + viewport stable --- */
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }

/* --- Forms : labels propres partout --- */
form label {
    display: block;
    color: var(--mbb-accent-strong);
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.94rem;
}

/* --- Inputs cohérence palette --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
    background: var(--mbb-bg-card);
    border: 1px solid var(--mbb-border);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--mbb-text);
    font-family: var(--mbb-font-base);
    transition: border-color var(--mbb-trans-fast), box-shadow var(--mbb-trans-fast);
    width: 100%;
    box-sizing: border-box;
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--mbb-accent);
    box-shadow: 0 0 0 3px rgba(122,139,111,0.15);
}

/* --- Spacing rhythm --- */
.mbb-mb-1 { margin-bottom: 8px; }
.mbb-mb-2 { margin-bottom: 16px; }
.mbb-mb-3 { margin-bottom: 24px; }
.mbb-mb-4 { margin-bottom: 32px; }
.mbb-mb-5 { margin-bottom: 48px; }

/* --- Visually hidden (a11y) --- */
.screen-reader-text,
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* --- Wrap long words pour eviter overflow horizontal --- */
.mbb-card-body p,
.mbb-article-content,
.mbb-temoignage,
.mbb-card-body h3 {
    overflow-wrap: anywhere;
    word-wrap: break-word;
    hyphens: auto;
}

/* ==========================================================================
   MODAL AVIS — apres "Marquer ce module comme termine"
   Star rating interactif (CSS only via direction:rtl) + textarea + submit.
   ========================================================================== */
.mbb-review-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, 0.62);
    backdrop-filter: blur(4px);
    z-index: 99990;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px 20px;
    overflow-y: auto;
}
.mbb-review-modal-overlay.is-open { display: flex; }
.mbb-review-modal {
    background: var(--mbb-bg-card);
    border-radius: 18px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.40);
    position: relative;
    padding: 28px 28px 24px;
    color: var(--mbb-text);
    animation: mbbReviewIn 0.22s ease-out;
    border: 1px solid var(--mbb-border);
}
@keyframes mbbReviewIn {
    from { opacity: 0; transform: translateY(-16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mbb-review-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(122,139,111,0.10);
    border: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--mbb-text);
    transition: all 0.15s ease;
}
.mbb-review-close:hover { background: #C00; color: #fff; }

.mbb-review-header { text-align: center; margin-bottom: 22px; }
.mbb-review-icon { font-size: 36px; line-height: 1; }
.mbb-review-header h2 {
    font-size: 1.35rem;
    color: var(--mbb-accent-strong);
    margin: 8px 0 6px;
    font-family: 'Poppins', system-ui, sans-serif;
}
.mbb-review-header p {
    font-size: 0.9rem;
    color: var(--mbb-text-soft);
    margin: 0;
}

.mbb-review-form { display: flex; flex-direction: column; gap: 18px; }
.mbb-review-label {
    display: block;
    font-weight: 700;
    color: var(--mbb-accent-strong);
    font-size: 0.92rem;
    margin-bottom: 8px;
}

/* Star rating CSS-only : on inverse l'ordre HTML (5,4,3,2,1) + flex-direction row-reverse,
   puis ~ peer selector pour dorer toutes les etoiles a droite de celle hover/checked. */
.mbb-review-stars-field { text-align: center; }
.mbb-review-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
    font-size: 2.2rem;
    line-height: 1;
}
.mbb-review-stars input { display: none; }
.mbb-review-stars label {
    color: rgba(122,139,111,0.30);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
    user-select: none;
}
.mbb-review-stars label:hover,
.mbb-review-stars label:hover ~ label,
.mbb-review-stars input:checked ~ label {
    color: #FFB800;
    text-shadow: 0 2px 6px rgba(255,184,0,0.30);
}
.mbb-review-stars label:hover { transform: scale(1.18); }

.mbb-review-field textarea {
    width: 100%;
    border: 2px solid var(--mbb-border);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.96rem;
    font-family: inherit;
    line-height: 1.5;
    background: var(--mbb-bg);
    color: var(--mbb-text);
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mbb-review-field textarea:focus {
    outline: 0;
    border-color: var(--mbb-accent-strong);
    box-shadow: 0 0 0 3px rgba(122,139,111,0.18);
}
.mbb-review-counter {
    display: block;
    text-align: right;
    color: var(--mbb-text-soft);
    font-size: 0.78rem;
    margin-top: 4px;
}
.mbb-review-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    align-items: center;
}
.mbb-btn-ghost {
    background: transparent;
    color: var(--mbb-text-soft);
    border: 1px solid var(--mbb-border);
}
.mbb-btn-ghost:hover { background: rgba(122,139,111,0.08); color: var(--mbb-text); }

@media (max-width: 600px) {
    .mbb-review-modal { padding: 22px 18px 18px; }
    .mbb-review-stars { font-size: 1.9rem; }
    .mbb-review-actions { flex-direction: column-reverse; }
    .mbb-review-actions .mbb-btn { width: 100%; }
}

/* ==========================================================================
   TÉMOIGNAGES — vue LISTE (front-page "Ils nous ont fait confiance")
   Une seule colonne, cards horizontales : étoiles + texte + auteur + module.
   Plus lisible qu'un kanban. Stack vertical en mobile.
   ========================================================================== */
.mbb-temo-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 920px;
    margin: 0 auto;
}
/* Vue grid conservée pour compatibilité mais désormais inutilisée par défaut */
.mbb-temo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
}
/* Card en vue liste : layout simple "avis sur le dessus, auteur avec gros avatar dessous"
   Pas de grid complexe - juste flex column qui marche partout. Cards bien visibles. */
.mbb-temo-list .mbb-temo-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 26px 28px !important;
    background: #ffffff !important;
    border: 1px solid rgba(122,139,111,0.20) !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 22px rgba(0,0,0,0.07) !important;
}
.mbb-temo-list .mbb-temo-card .mbb-temo-quote {
    font-size: 80px;
    opacity: 0.10;
    top: 4px;
    right: 18px;
}
/* Ligne auteur en BAS : gros avatar circulaire + nom + module a droite */
.mbb-temo-list .mbb-temo-card .mbb-temo-author {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    border-top: 1px solid rgba(122,139,111,0.20) !important;
    padding-top: 16px !important;
    margin-top: 4px !important;
}
.mbb-temo-list .mbb-temo-card .mbb-temo-avatar {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.20) !important;
    border: 3px solid #ffffff !important;
    flex-shrink: 0 !important;
    text-transform: uppercase !important;
    font-family: 'Poppins', system-ui, sans-serif !important;
}
.mbb-temo-list .mbb-temo-card .mbb-temo-author-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.mbb-temo-list .mbb-temo-card .mbb-temo-author-name {
    font-weight: 700 !important;
    color: #5A6B4F !important;
    font-size: 1rem !important;
    font-style: normal !important;
}
.mbb-temo-list .mbb-temo-card .mbb-temo-context {
    font-size: 0.84rem !important;
    color: #6B6B6B !important;
    font-style: normal !important;
}
.mbb-temo-list .mbb-temo-card .mbb-temo-context-general {
    color: #5A6B4F !important;
    font-weight: 600 !important;
}

/* DARK MODE pour la liste (override dark mode aggressif) */
[data-theme="dark"] .mbb-temo-list .mbb-temo-card {
    background: #7A8B6F !important;
    border: 1px solid rgba(122, 139, 111, 0.22) !important;
    box-shadow: 0 6px 22px rgba(0,0,0,0.40) !important;
}
[data-theme="dark"] .mbb-temo-list .mbb-temo-card .mbb-temo-author {
    border-top-color: rgba(122, 139, 111, 0.18) !important;
}
[data-theme="dark"] .mbb-temo-list .mbb-temo-card .mbb-temo-author-name {
    color: #FAF7F2 !important;
}
[data-theme="dark"] .mbb-temo-list .mbb-temo-card .mbb-temo-context {
    color: #F5F0E8 !important;
}
[data-theme="dark"] .mbb-temo-list .mbb-temo-card .mbb-temo-context-general {
    color: #FAF7F2 !important;
}
[data-theme="dark"] .mbb-temo-list .mbb-temo-card .mbb-temo-text {
    color: #FAF7F2 !important;
}
[data-theme="dark"] .mbb-temo-list .mbb-temo-card .mbb-temo-avatar {
    border-color: #7A8B6F !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

@media (max-width: 640px) {
    .mbb-temo-list .mbb-temo-card { padding: 22px 20px !important; }
    .mbb-temo-list .mbb-temo-card .mbb-temo-avatar {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        font-size: 0.96rem !important;
    }
}

.mbb-temo-card {
    position: relative;
    background: var(--mbb-bg-card);
    border: 1px solid var(--mbb-border);
    border-radius: 18px;
    padding: 28px 24px 22px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}
.mbb-temo-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mbb-accent) 0%, var(--mbb-accent-strong) 100%);
    opacity: 0.85;
}
.mbb-temo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(122,139,111,0.18);
    border-color: var(--mbb-accent);
}
/* Citation décorative XL en filigrane */
.mbb-temo-quote {
    position: absolute;
    top: 6px;
    right: 16px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 90px;
    line-height: 1;
    color: var(--mbb-accent);
    opacity: 0.10;
    pointer-events: none;
    user-select: none;
    font-weight: 700;
}

/* Étoiles */
.mbb-temo-stars {
    display: flex;
    gap: 2px;
    font-size: 1.05rem;
    line-height: 1;
}
.mbb-temo-star {
    color: rgba(122,139,111,0.25);
    transition: color 0.2s ease;
}
.mbb-temo-star.is-filled {
    color: #FFB800;
    text-shadow: 0 1px 2px rgba(255,184,0,0.20);
}

/* Texte du témoignage */
.mbb-temo-text {
    color: var(--mbb-text);
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0;
    font-style: italic;
    quotes: "« " " »";
    flex: 1;
    position: relative;
    z-index: 1;
}
.mbb-temo-text::before { content: open-quote; }
.mbb-temo-text::after { content: close-quote; }

/* Footer auteur */
.mbb-temo-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--mbb-border);
    margin-top: 4px;
}
.mbb-temo-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.96rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    letter-spacing: 0.02em;
    font-family: 'Poppins', system-ui, sans-serif;
}
.mbb-temo-author-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mbb-temo-author-name {
    color: var(--mbb-text);
    font-weight: 700;
    font-size: 0.92rem;
    font-style: normal;
}
.mbb-temo-context {
    color: var(--mbb-text-soft);
    font-size: 0.78rem;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.mbb-temo-context-general {
    color: var(--mbb-accent-strong);
    font-weight: 600;
}

/* Dark mode adaptations spécifiques */
[data-theme="dark"] .mbb-temo-card {
    background: var(--mbb-bg-card);
    border-color: var(--mbb-border);
    box-shadow: 0 4px 18px rgba(0,0,0,0.30);
}
[data-theme="dark"] .mbb-temo-card:hover {
    box-shadow: 0 14px 32px rgba(0,0,0,0.45);
    border-color: var(--mbb-accent-strong);
}
[data-theme="dark"] .mbb-temo-quote {
    color: var(--mbb-accent-strong);
    opacity: 0.14;
}
[data-theme="dark"] .mbb-temo-text {
    color: var(--mbb-text);
}
[data-theme="dark"] .mbb-temo-author-name {
    color: var(--mbb-accent-strong);
}
[data-theme="dark"] .mbb-temo-star {
    color: rgba(122, 139, 111, 0.30);
}

/* Responsive */
@media (max-width: 600px) {
    .mbb-temo-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .mbb-temo-card {
        padding: 24px 20px 18px;
    }
    .mbb-temo-quote {
        font-size: 70px;
    }
}

/* ==========================================================================
   FINAL OVERRIDES v0.4.1 — DARK MODE FIX
   Place en fin de fichier (cascade CSS la plus tardive) pour battre toute
   regle precedente sans avoir a refactorer le fichier.

   Couvre :
   1. Temoignages : cards visibles en clair ET en sombre, peu importe leur
      conteneur (.mbb-temo-list ou .mbb-temo-grid)
   2. Smileys home avec couleur custom : en dark mode, on remplace l'inline
      `style="background:#F5F0E8"` par un fond sombre + accent colore subtil
      (puisque la couleur custom du smiley pastel devient illisible en sombre)
   ========================================================================== */

/* === TEMOIGNAGES (clair + sombre, .mbb-temo-list ou .mbb-temo-grid) === */
.mbb-temo-list .mbb-temo-card,
.mbb-temo-grid .mbb-temo-card {
    background: #ffffff !important;
    border: 1px solid rgba(122,139,111,0.20) !important;
    border-radius: 18px !important;
    padding: 26px 28px !important;
    box-shadow: 0 6px 22px rgba(0,0,0,0.07) !important;
    color: #5A6B4F !important;
}

[data-theme="dark"] .mbb-temo-list .mbb-temo-card,
[data-theme="dark"] .mbb-temo-grid .mbb-temo-card,
[data-theme="dark"] .mbb-temo-card {
    background: #7A8B6F !important;
    border: 1px solid rgba(122, 139, 111, 0.22) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45) !important;
    color: #FAF7F2 !important;
}
[data-theme="dark"] .mbb-temo-card .mbb-temo-text,
[data-theme="dark"] .mbb-temo-card .mbb-temo-text * {
    color: #FAF7F2 !important;
}
[data-theme="dark"] .mbb-temo-card .mbb-temo-author {
    border-top: 1px solid rgba(122, 139, 111, 0.18) !important;
}
[data-theme="dark"] .mbb-temo-card .mbb-temo-author-name {
    color: #FAF7F2 !important;
}
[data-theme="dark"] .mbb-temo-card .mbb-temo-context {
    color: #F5F0E8 !important;
}
[data-theme="dark"] .mbb-temo-card .mbb-temo-context-general {
    color: #FAF7F2 !important;
}
[data-theme="dark"] .mbb-temo-card .mbb-temo-quote {
    color: #FAF7F2 !important;
    opacity: 0.16 !important;
}
[data-theme="dark"] .mbb-temo-card .mbb-temo-star {
    color: rgba(122, 139, 111, 0.30) !important;
}
[data-theme="dark"] .mbb-temo-card .mbb-temo-star.is-filled {
    color: #FFB800 !important;
}

/* === SMILEYS HOME : couleur custom inline a override en dark mode === */
/* En clair : on garde la couleur pastel choisie par l'admin (esthetique).
   En sombre : on neutralise par fond sombre, et on garde la couleur pastel
   uniquement comme bordure + lueur subtile en haut (accent visuel). */
[data-theme="dark"] .mbb-smiley-item.has-custom-bg {
    background: var(--mbb-bg-card) !important;
    color: var(--mbb-text) !important;
    border-color: var(--mbb-border) !important;
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .mbb-smiley-item.has-custom-bg::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--mbb-card-bg, var(--mbb-accent-strong));
    opacity: 0.85;
    pointer-events: none;
}
[data-theme="dark"] .mbb-smiley-item.has-custom-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mbb-card-bg, transparent);
    opacity: 0.10;
    mix-blend-mode: screen;
    pointer-events: none;
}
[data-theme="dark"] .mbb-smiley-item.has-custom-bg:hover {
    border-color: var(--mbb-accent-strong) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.40);
}
[data-theme="dark"] .mbb-smiley-item.has-custom-bg .mbb-smiley-emoji,
[data-theme="dark"] .mbb-smiley-item.has-custom-bg span {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   NUCLEAR OVERRIDE v0.4.2 — SMILEY DARK MODE FIX DEFINITIF
   Probleme : la card "Anxiete legere" apparaissait moitie sombre / moitie
   claire en dark mode. Causes identifiees :
     1. inline `color:#3D3D3D` (texte sombre force)
     2. inline `border-color: rgba(0,0,0,0.08)` (bordure noire visible)
     3. CSS rule `border-left: 4px solid var(--mbb-card-bg)` qui prenait la
        couleur beige #F5F0E8 du smiley => barre verticale claire visible
     4. ::before + ::after pseudos qui ajoutaient des accents clairs
   Solution : on ANNULE tout ca et on force un rendu DARK 100% uniforme.
   La couleur custom du smiley devient juste un accent VERT SAUGE neutre.
   ========================================================================== */
html body[data-theme="dark"] .mbb-smiley-item,
html body[data-theme="dark"] .mbb-smiley-item.has-custom-bg,
html[data-theme="dark"] body .mbb-smiley-item,
html[data-theme="dark"] body .mbb-smiley-item.has-custom-bg {
    background: var(--mbb-bg-card) !important;
    color: var(--mbb-text) !important;
    border: 1px solid var(--mbb-border) !important;
    border-left: 1px solid var(--mbb-border) !important; /* annule la border-left coloree */
    border-right: 1px solid var(--mbb-border) !important;
    border-top: 1px solid var(--mbb-border) !important;
    border-bottom: 1px solid var(--mbb-border) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: hidden;
}
/* Annule completement les pseudo-elements qui ajoutaient des accents clairs */
html body[data-theme="dark"] .mbb-smiley-item.has-custom-bg::before,
html body[data-theme="dark"] .mbb-smiley-item.has-custom-bg::after,
html[data-theme="dark"] body .mbb-smiley-item.has-custom-bg::before,
html[data-theme="dark"] body .mbb-smiley-item.has-custom-bg::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}
/* Texte/emoji : force texte clair, pas de filter ni text-shadow herites */
html body[data-theme="dark"] .mbb-smiley-item span,
html body[data-theme="dark"] .mbb-smiley-item .mbb-smiley-emoji,
html[data-theme="dark"] body .mbb-smiley-item span,
html[data-theme="dark"] body .mbb-smiley-item .mbb-smiley-emoji {
    color: var(--mbb-text) !important;
    text-shadow: none !important;
    filter: none !important;
}
/* Hover discret : juste une bordure verte sauge + ombre noire profonde */
html body[data-theme="dark"] .mbb-smiley-item:hover,
html[data-theme="dark"] body .mbb-smiley-item:hover {
    border-color: var(--mbb-accent-strong) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.50) !important;
    transform: translateY(-3px);
}
html body[data-theme="dark"] .mbb-smiley-item:hover span,
html[data-theme="dark"] body .mbb-smiley-item:hover span {
    color: var(--mbb-accent-strong) !important;
}

/* ==========================================================================
   v0.7 — REFONTE FRONT-PAGE (hero split + greeting + cards programmes badgées
   + mini-biblio + tarif card) + RESPONSIVE 2-COL MOBILE PARTOUT
   Toutes les nouvelles classes utilisent EXCLUSIVEMENT les variables CSS
   existantes (--mbb-vert, --mbb-bg-card, --mbb-border, --mbb-radius-lg, etc.)
   pour héritage gratuit du mode sombre.
   ========================================================================== */

/* ===== 1. HERO SPLIT 50/50 ===== */
.mbb-hero-split { padding: 64px 0 48px; }
.mbb-hero-split-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    align-items: center;
}
.mbb-hero-split-text { display: flex; flex-direction: column; gap: 14px; }
.mbb-hero-split .mbb-hero-title {
    font-size: clamp(1.8rem, 4.2vw, 2.8rem);
    line-height: 1.15;
    margin: 0;
}
.mbb-hero-split .mbb-hero-text {
    font-size: 1.05rem;
    color: var(--mbb-text-soft);
    margin: 0;
    max-width: 560px;
}
.mbb-hero-split .mbb-hero-cta { margin-top: 8px; }
.mbb-hero-split-image {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(90, 107, 79, 0.18);
    background: linear-gradient(135deg, var(--mbb-accent) 0%, var(--mbb-accent-strong) 100%);
}
.mbb-hero-split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mbb-hero-split-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 96px;
    color: rgba(255,255,255,0.85);
}
@media (max-width: 880px) {
    .mbb-hero-split-grid { grid-template-columns: 1fr; gap: 32px; }
    .mbb-hero-split-image { aspect-ratio: 16/10; max-height: 360px; }
}

/* ===== 2. GREETING + SMILEYS PILLS ===== */
.mbb-greeting {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    color: var(--mbb-accent-strong);
    text-align: center;
    margin: 0 0 28px;
    font-weight: 600;
    line-height: 1.3;
}
.mbb-smileys.mbb-smileys-pills {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* grid-auto-rows: 1fr → toutes les rangées ont la MÊME hauteur, calculée
       sur la rangée la plus haute. Évite le défaut (rang 1 plus grand que rang 2
       quand un label wrappe sur 2 lignes ex: "Manque de concentration"). */
    grid-auto-rows: 1fr;
    gap: 14px;
    max-width: 1000px;
    margin: 0 auto;
}
/* Pills : prennent toute la hauteur de leur cellule grid → uniformité visuelle */
.mbb-smileys.mbb-smileys-pills .mbb-smiley-pill {
    height: 100% !important;
}
.mbb-smiley-pill {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 18px !important;
    border-radius: 999px !important;
    min-height: 56px !important;
    text-align: left !important;
    justify-content: center !important;
}
.mbb-smiley-pill .mbb-smiley-emoji { font-size: 26px !important; line-height: 1 !important; }
.mbb-smiley-pill .mbb-smiley-label {
    font-weight: 600;
    font-size: 0.96rem;
    color: inherit;
}
@media (max-width: 700px) {
    .mbb-smileys.mbb-smileys-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mbb-smiley-pill { padding: 12px 14px !important; min-height: 48px !important; }
    .mbb-smiley-pill .mbb-smiley-emoji { font-size: 22px !important; }
    .mbb-smiley-pill .mbb-smiley-label { font-size: 0.88rem; }
}

/* ===== 3. PROGRAMMES CARDS BADGEES ===== */
.mbb-prog-grid { gap: 28px; }
.mbb-prog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mbb-prog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mbb-shadow);
}
.mbb-prog-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    line-height: 1;
}
.mbb-prog-badge--free {
    background: #F5F0E8;
    color: #2F4923;
}
.mbb-prog-badge--premium {
    background: linear-gradient(135deg, #F5C16C 0%, #E8A546 100%);
    color: #4A2E0A;
}
.mbb-prog-badge strong { font-weight: 800; }

.mbb-prog-thumb-wrap {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--mbb-accent) 0%, var(--mbb-accent-strong) 100%);
}
.mbb-prog-thumb {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}
.mbb-prog-card:hover .mbb-prog-thumb { transform: scale(1.05); }
.mbb-prog-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: rgba(255,255,255,0.85);
}
.mbb-prog-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 36px;
    backdrop-filter: blur(2px);
}
.mbb-prog-card .mbb-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.mbb-prog-card .mbb-card-body h3 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--mbb-accent-strong);
}
.mbb-prog-card .mbb-card-body h3 a {
    color: inherit;
    text-decoration: none;
}
.mbb-prog-card .mbb-card-body p {
    margin: 0;
    color: var(--mbb-text-soft);
    font-size: 0.92rem;
    line-height: 1.5;
    flex: 1;
}
.mbb-prog-cta {
    align-self: flex-start;
    margin-top: 4px;
}
.mbb-prog-meta {
    margin: 4px 0 0 !important;
    color: var(--mbb-accent-strong);
    font-size: 0.84rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(122,139,111,0.10);
    border-radius: 999px;
    align-self: flex-start;
}
[data-theme="dark"] .mbb-prog-meta {
    background: rgba(122, 139, 111, 0.18);
    color: #FFFFFF !important; /* Écriture blanche pour lisibilité max sur fond sombre */
}

/* Bouton "Marquer cette séance comme terminée" — état VERROUILLE
   Tant que la vidéo n'a pas été lue suffisamment, le bouton est grisé
   et non cliquable. Indique visuellement la condition à remplir. */
.mbb-btn.mbb-mark-locked,
.mbb-btn.mbb-mark-locked:hover,
.mbb-btn.mbb-mark-locked:focus {
    background: rgba(122,139,111,0.18) !important;
    color: var(--mbb-text-soft) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 0.85;
    border: 1px dashed var(--mbb-border) !important;
    pointer-events: auto; /* on garde la souris pour montrer le tooltip natif title="" */
}
[data-theme="dark"] .mbb-btn.mbb-mark-locked {
    background: rgba(122, 139, 111, 0.10) !important;
    color: var(--mbb-text-soft) !important;
    border-color: var(--mbb-border) !important;
}

/* ===== 4. MINI-BIBLIOTHEQUE ===== */
.mbb-section-mini-biblio { padding-top: 32px; padding-bottom: 32px; }
.mbb-mini-biblio-grid { gap: 24px; }
.mbb-mini-biblio-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--mbb-radius-lg);
    overflow: hidden;
    background: var(--mbb-bg-card);
    border: 1px solid var(--mbb-border);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mbb-mini-biblio-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mbb-shadow);
    border-color: var(--mbb-accent-strong);
}
.mbb-mini-biblio-thumb {
    aspect-ratio: 3/2;
    background-size: cover;
    background-position: center;
    background-color: var(--mbb-bg-section);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mbb-mini-biblio-icon { font-size: 56px; opacity: 0.55; }
.mbb-mini-biblio-label {
    padding: 14px 18px;
    text-align: center;
    color: var(--mbb-accent-strong);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.mbb-mini-biblio-emoji { font-size: 1.2em; }

/* ===== 5. TARIF SUMMARY CARD ===== */
.mbb-section-tarif { padding: 32px 0 64px; }
.mbb-tarif-summary {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: center;
    padding: 32px 36px;
    border-radius: var(--mbb-radius-lg);
    background: linear-gradient(135deg, rgba(122,139,111,0.08) 0%, rgba(184,212,168,0.18) 100%);
    border: 1px solid var(--mbb-border);
    box-shadow: var(--mbb-shadow);
}
.mbb-tarif-summary-left {
    display: flex;
    align-items: center;
    gap: 18px;
}
.mbb-tarif-summary-icon {
    font-size: 48px;
    line-height: 1;
    flex-shrink: 0;
}
.mbb-tarif-summary-left h2 {
    margin: 0 0 4px;
    font-size: 1.5rem;
    color: var(--mbb-accent-strong);
}
.mbb-tarif-summary-left p {
    margin: 0;
    color: var(--mbb-text-soft);
    font-size: 0.95rem;
}
.mbb-tarif-summary-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}
.mbb-tarif-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.mbb-tarif-price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--mbb-accent-strong);
    line-height: 1;
}
.mbb-tarif-period { color: var(--mbb-text-soft); font-size: 0.95rem; }
.mbb-tarif-row--annuel { gap: 10px; }
.mbb-tarif-price-sm {
    color: var(--mbb-text);
    font-weight: 600;
    font-size: 1rem;
}
.mbb-tarif-discount {
    background: #E8A546;
    color: #4A2E0A;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.mbb-tarif-cta { margin-top: 10px; }
@media (max-width: 700px) {
    .mbb-tarif-summary {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
        padding: 24px 22px;
    }
    .mbb-tarif-summary-left { flex-direction: column; text-align: center; gap: 10px; }
    .mbb-tarif-summary-right { align-items: center; text-align: center; }
}

/* ==========================================================================
   RESPONSIVE 2-COL MOBILE — Programmes + Pratiques + Mini-biblio
   Override CRITIQUE pour la règle métier "2 cards/ligne sur mobile".
   Cible TOUTES les pages où on a programmes/pratiques (front-page, single,
   page-bibliotheque, page-pratiques, page-mes-programmes, archives discipline).
   ========================================================================== */
@media (max-width: 700px) {
    /* Classe utilitaire générique */
    .mbb-grid-mobile-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    /* Sections frontend connues qui DOIVENT être 2-col sur mobile */
    .mbb-section-programmes .mbb-grid,
    .mbb-section-programmes .mbb-grid-3,
    .mbb-section-mini-biblio .mbb-grid,
    .mbb-section-mini-biblio .mbb-grid-3,
    .mbb-section-pratiques .mbb-grid,
    .mbb-section-pratiques .mbb-grid-4,
    .mbb-pratiques-grid,
    .mbb-prog-grid,
    .mbb-mini-biblio-grid,
    .mbb-bibliotheque-grid,
    .mbb-mes-programmes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    /* Cards : padding réduit + texte plus compact */
    .mbb-prog-card .mbb-card-body { padding: 14px 14px 16px; gap: 8px; }
    .mbb-prog-card .mbb-card-body h3 { font-size: 0.98rem; }
    .mbb-prog-card .mbb-card-body p { font-size: 0.86rem; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
    .mbb-prog-cta { font-size: 0.84rem; padding: 8px 14px; }
    .mbb-prog-badge { top: 8px; left: 8px; font-size: 0.62rem; padding: 4px 8px; }
    .mbb-mini-biblio-label { font-size: 0.88rem; padding: 10px 12px; }
    .mbb-pratique-card,
    .mbb-pratique-bigcard { padding: 22px 14px !important; min-height: auto !important; }
    .mbb-pratique-card h3,
    .mbb-pratique-bigcard h2 { font-size: 1.05rem !important; }
    .mbb-pratique-card p,
    .mbb-pratique-bigcard p { font-size: 0.85rem !important; }
    .mbb-pratique-emoji,
    .mbb-pratique-bigcard-emoji { font-size: 36px !important; }
}
@media (max-width: 380px) {
    /* Smartphones très étroits : 1 col pour respirer */
    .mbb-section-programmes .mbb-grid,
    .mbb-section-programmes .mbb-grid-3,
    .mbb-prog-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   AUDIT GENERIQUE RESPONSIVE — toutes pages
   - Touch targets ≥ 44px
   - Inputs ≥ 16px (anti-zoom iOS)
   - Container/section padding réduit mobile
   - Pas de scroll horizontal
   ========================================================================== */
@media (max-width: 700px) {
    .mbb-section { padding: 48px 0; }
    .mbb-container { padding: 0 16px; }
    .mbb-hero, .mbb-hero-split { padding: 40px 0 32px; }
    .mbb-hero-title { font-size: clamp(1.5rem, 5vw, 2rem); }
    .mbb-section-header { margin-bottom: 28px; }
    .mbb-section-header h2 { font-size: clamp(1.4rem, 4.5vw, 1.8rem); }
    .mbb-section-header p { font-size: 0.95rem; }
    /* Touch targets : on garantit 44px min sur boutons */
    .mbb-btn { min-height: 44px; padding: 12px 20px; }
    .mbb-btn-sm { min-height: 40px; padding: 10px 16px; }
    .mbb-btn-lg { min-height: 52px; padding: 14px 24px; font-size: 1rem; }
}
@media (max-width: 480px) {
    .mbb-container { padding: 0 14px; }
    .mbb-section { padding: 36px 0; }
}
/* Anti-zoom iOS : tous les inputs au minimum 16px de font-size */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select {
    font-size: 16px;
}
/* Pas de scroll horizontal — overflow-x sur body UNIQUEMENT (pas sur html
   sinon le scroll molette est cassé dans Chrome/Firefox quand les deux
   éléments ont overflow-x:hidden simultanément). On utilise `clip` quand
   supporté pour ne pas créer un block formatting context qui pourrait
   interférer avec position:sticky. */
body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100vw;
}
/* Images responsive partout */
img { max-width: 100%; height: auto; }
/* Tables wrapper si débordement */
table { max-width: 100%; }
.mbb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   DARK MODE — adaptations pour les nouvelles classes
   ========================================================================== */
[data-theme="dark"] .mbb-hero-split-image {
    box-shadow: 0 14px 40px rgba(0,0,0,0.5);
}
[data-theme="dark"] .mbb-prog-badge--free {
    background: rgba(184,212,168,0.85);
    color: #5A6B4E;
}
[data-theme="dark"] .mbb-prog-badge--premium {
    background: linear-gradient(135deg, #E8A546 0%, #C8842A 100%);
    color: #2A1A04;
}
[data-theme="dark"] .mbb-mini-biblio-card {
    background: var(--mbb-bg-card);
    border-color: var(--mbb-border);
}
[data-theme="dark"] .mbb-mini-biblio-label { color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-tarif-summary {
    background: linear-gradient(135deg, rgba(122, 139, 111, 0.10) 0%, rgba(122, 139, 111, 0.04) 100%);
    border-color: var(--mbb-border);
}
[data-theme="dark"] .mbb-tarif-price,
[data-theme="dark"] .mbb-tarif-summary-left h2 { color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-tarif-price-sm { color: var(--mbb-text); }
[data-theme="dark"] .mbb-prog-card .mbb-card-body h3,
[data-theme="dark"] .mbb-prog-card .mbb-card-body h3 a { color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-greeting { color: var(--mbb-accent-strong); }

/* ==========================================================================
   RESPONSIVE MOBILE COMPLET — append fin de fichier (cascade prioritaire).
   Couvre toutes pages/sous-pages/composants. Breakpoints normalisés
   480 / 768 / 1024. + prefers-reduced-motion + safe-area iOS.
   ========================================================================== */

/* Règles universelles (toutes tailles) */
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe, svg { max-width: 100%; height: auto; }
/* Touch targets accessibles : UNIQUEMENT les éléments cliquables/tappables.
   On EXCLUT .mbb-tag (badge décoratif non cliquable — un min-height ferait
   déborder un texte 11px dans une pill 44px collé en haut). */
.mbb-btn, .mbb-link-arrow, .mbb-smiley-item, .mbb-smiley-pill,
.mbb-card-thumb-link, button, [role="button"], input[type="submit"],
input[type="button"], .mbb-hist-filter,
a.mbb-tag /* uniquement si c'est un lien, pas un span */ {
    min-height: 44px;
    touch-action: manipulation;
}
/* .mbb-tag (span décoratif) reste à sa taille naturelle. Si jamais quelqu'un
   l'utilise comme lien (<a class="mbb-tag">), le min-height ci-dessus s'applique
   ET le flex/align-items ci-dessous garde le texte centré verticalement. */
a.mbb-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"],
input[type="url"], input[type="date"], textarea, select {
    font-size: 16px !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ≤ 1024px — tablette */
@media (max-width: 1024px) {
    .mbb-container { padding-left: 20px !important; padding-right: 20px !important; }
    .mbb-section { padding: 56px 0 !important; }
}

/* ≤ 768px — mobile */
@media (max-width: 768px) {
    .mbb-container { padding-left: 16px !important; padding-right: 16px !important; }
    .mbb-section { padding: 40px 0 !important; }
    h1, .mbb-hero-title { font-size: clamp(1.7rem, 6vw, 2.4rem) !important; line-height: 1.2 !important; }
    h2 { font-size: clamp(1.4rem, 5vw, 1.9rem) !important; line-height: 1.25 !important; }
    h3 { font-size: clamp(1.15rem, 4vw, 1.4rem) !important; }

    /* Header + menu burger */
    .mbb-header { padding: 12px 16px !important; }
    .mbb-header .mbb-logo img { max-height: 38px !important; width: auto !important; }
    .mbb-header-nav {
        position: fixed; top: 70px; left: 0; right: 0;
        background: var(--mbb-bg-card);
        border-top: 1px solid var(--mbb-border);
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 12px 0 !important;
        transform: translateY(-12px); opacity: 0; pointer-events: none;
        transition: transform 0.2s ease, opacity 0.2s ease;
        z-index: 999;
    }
    .mbb-header-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .mbb-header-nav a { padding: 14px 20px !important; font-size: 1rem !important; border-bottom: 1px solid var(--mbb-border); display: block !important; }
    .mbb-header-nav a:last-child { border-bottom: 0; }
    .mbb-burger { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; font-size: 28px; color: var(--mbb-text); }
    .mbb-user-dropdown { right: 8px !important; min-width: 90vw !important; max-width: 320px; }

    /* Grilles : 2 cards/ligne mobile */
    .mbb-grid-3, .mbb-grid-4,
    .mbb-pratiques-grid, .mbb-pratiques-bigcards,
    .mbb-section-programmes .mbb-grid, .mbb-section-pratiques .mbb-grid,
    .mbb-mp-grid, .mbb-blog-grid,
    .mbb-smiley-recommendations .mbb-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
    .mbb-temo-list, .mbb-temo-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .mbb-smileys, .mbb-smileys-pills {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .mbb-smiley-item, .mbb-smiley-pill { padding: 12px 14px !important; font-size: 0.92rem !important; }

    /* Hero : stack vertical */
    .mbb-hero, .mbb-hero-split,
    .mbb-smiley-hero .mbb-smiley-hero-inner,
    .mbb-cta-banner {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 24px !important;
    }
    .mbb-hero-image, .mbb-hero-split img { max-width: 100% !important; margin: 0 auto !important; }
    .mbb-hero-cta { justify-content: center !important; flex-wrap: wrap !important; gap: 12px !important; }
    .mbb-smiley-hero { padding: 32px 0 !important; }
    .mbb-smiley-hero-emoji { font-size: 70px !important; }
    .mbb-smiley-needs { justify-content: center !important; }

    /* Single programme/module */
    .mbb-prog-meta { flex-wrap: wrap !important; gap: 10px !important; }
    .mbb-module-item { flex-wrap: wrap !important; padding: 14px !important; }
    .mbb-module-num { font-size: 1.4rem !important; }
    .mbb-player-wrap iframe { aspect-ratio: 16/9 !important; width: 100% !important; height: auto !important; }

    /* Modal avis : bottom-sheet sur mobile */
    .mbb-review-modal-overlay { padding: 0 !important; align-items: flex-end !important; }
    .mbb-review-modal {
        width: 100% !important; max-width: 100% !important;
        max-height: 92vh !important;
        border-radius: 16px 16px 0 0 !important;
        overflow-y: auto !important;
    }
    .mbb-review-actions { flex-direction: column !important; gap: 10px !important; }
    .mbb-review-actions .mbb-btn { width: 100% !important; }

    /* Bibliothèque : filtres compacts */
    .mbb-biblio-filters { flex-wrap: wrap !important; gap: 8px !important; padding: 14px 16px !important; }
    .mbb-biblio-filters select, .mbb-biblio-filters input { width: 100% !important; }

    /* Historique */
    .mbb-hist-filters { flex-wrap: wrap !important; gap: 8px !important; }
    .mbb-hist-card { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
    .mbb-hist-thumb { width: 100% !important; height: 180px !important; }

    /* Espace membre / mes-programmes / mon-profil */
    .mbb-em-grid, .mbb-mp-grid { grid-template-columns: 1fr !important; }
    .mbb-em-sidebar { position: static !important; width: 100% !important; }
    .mbb-profil-form .form-row { flex-direction: column !important; gap: 10px !important; }

    /* Choix abonnement / tarifs */
    .mbb-pricing-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
    .mbb-tarif-summary { flex-direction: column !important; text-align: center !important; gap: 18px !important; }

    /* Inscription / connexion */
    .mbb-auth-card { padding: 24px 20px !important; width: 100% !important; max-width: 100% !important; }
    .mbb-auth-form input, .mbb-auth-form button { width: 100% !important; }

    /* Blog */
    .mbb-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
    .mbb-article-content { padding: 0 4px !important; }
    .mbb-article-content img { border-radius: 12px !important; }

    /* FAQ */
    .mbb-faq-item { padding: 14px 16px !important; }
    .mbb-faq-item summary { font-size: 0.96rem !important; }

    /* Footer */
    .mbb-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; text-align: center !important; }
    .mbb-footer-col ul { padding: 0 !important; }
    .mbb-footer-newsletter input { width: 100% !important; }
}

/* ≤ 480px — petit mobile */
@media (max-width: 480px) {
    .mbb-container { padding-left: 12px !important; padding-right: 12px !important; }
    .mbb-section { padding: 32px 0 !important; }
    .mbb-grid-3, .mbb-grid-4,
    .mbb-pratiques-grid, .mbb-pratiques-bigcards,
    .mbb-mp-grid, .mbb-blog-grid,
    .mbb-section-programmes .mbb-grid, .mbb-section-pratiques .mbb-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .mbb-smileys, .mbb-smileys-pills { grid-template-columns: 1fr !important; }
    .mbb-smiley-hero-emoji { font-size: 56px !important; }
    .mbb-btn-lg { padding: 14px 24px !important; font-size: 1rem !important; }
}

/* Tables responsive */
@media (max-width: 768px) {
    .mbb-table-wrap, .wp-block-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100% !important; }
    .mbb-table-wrap table, .wp-block-table table { min-width: 500px; }
}

/* Safe-area iOS (notch) */
@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        body { padding-bottom: env(safe-area-inset-bottom); }
        .mbb-header { padding-top: max(12px, env(safe-area-inset-top)) !important; }
    }
}

/* ==========================================================================
   RESPONSIVE MOBILE FINAL v0.8 — Cards 2/ligne universel + accessibilité
   Append en fin de fichier = cascade prioritaire sur toute règle plus haut.
   Cible : <=768px, <=480px, <=380px.
   Best practices : Apple HIG + Material Design Touch Targets + WCAG 2.5.5
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 768px) {
    /* === 2 CARDS / LIGNE UNIVERSEL === */
    .mbb-grid-2, .mbb-grid-3, .mbb-grid-4,
    .mbb-pratiques-grid, .mbb-blog-grid, .mbb-mp-grid, .mbb-hist-grid,
    .mbb-bibliotheque-grid, .mbb-cards-grid,
    .mbb-section-programmes .mbb-grid-3,
    .mbb-section-pratiques .mbb-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    /* Cards compactes */
    .mbb-card-body, .mbb-pratique-bigcard { padding: 12px !important; }
    .mbb-card-body h3, .mbb-pratique-bigcard h2 {
        font-size: 0.98rem !important; line-height: 1.25 !important; margin-bottom: 6px !important;
    }
    .mbb-card-body p, .mbb-pratique-bigcard p {
        font-size: 0.82rem !important; line-height: 1.4 !important; margin-bottom: 8px !important;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .mbb-card-thumb { height: 110px !important; min-height: 110px !important; }
    .mbb-pratique-bigcard-emoji { font-size: 36px !important; margin-bottom: 4px !important; }
    .mbb-card-body .mbb-link-arrow,
    .mbb-pratique-bigcard .mbb-link-arrow {
        font-size: 0.82rem !important; padding: 6px 0 !important;
    }

    /* Dropdown détail card : <details>/<summary> */
    .mbb-card-details { margin-top: 8px; font-size: 0.82rem; }
    .mbb-card-details summary {
        cursor: pointer; color: var(--mbb-accent-strong); font-weight: 600;
        padding: 6px 0; list-style: none; outline: 0;
    }
    .mbb-card-details summary::-webkit-details-marker { display: none; }
    .mbb-card-details summary::after {
        content: '▾'; margin-left: 4px; display: inline-block;
        transition: transform 0.2s ease;
    }
    .mbb-card-details[open] summary::after { transform: rotate(180deg); }
    .mbb-card-details-content {
        padding: 8px 0; color: var(--mbb-text-soft); line-height: 1.5;
    }

    /* === COMPTEURS / KPIs : 2 par ligne === */
    .mbb-stats-grid, .mbb-dash-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .mbb-stats-card, .mbb-dash-kpi-card { padding: 14px 12px !important; gap: 10px !important; }
    .mbb-stats-card-num, .mbb-dash-kpi-value { font-size: 1.4rem !important; }
    .mbb-stats-card-label, .mbb-dash-kpi-label { font-size: 0.78rem !important; line-height: 1.2 !important; }
    .mbb-stats-card-icon, .mbb-dash-kpi-icon {
        width: 40px !important; height: 40px !important; font-size: 20px !important;
    }

    /* === TOUCH TARGETS WCAG 2.5.5 ≥ 44×44 === */
    .mbb-btn, .mbb-btn-sm, .mbb-btn-lg, .mbb-link-arrow,
    button:not(.mbb-fav-btn):not(.mbb-cat-modal-close):not(.mbb-toast-close),
    .mbb-nav-list a, .mbb-footer a {
        min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .mbb-tag, .mbb-tag-soft, .mbb-tag-free, .mbb-tag-premium {
        display: inline-block; padding: 4px 10px !important;
    }
    .mbb-fav-btn.mbb-fav-btn-icon { min-width: 44px !important; min-height: 44px !important; }

    /* === FORMS : font-size 16px = pas de zoom iOS au focus === */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"], input[type="search"],
    input[type="url"], textarea, select {
        font-size: 16px !important; min-height: 44px !important;
        padding: 10px 14px !important; box-sizing: border-box;
    }
    textarea { min-height: 100px !important; }

    /* === CONTAINER + SECTIONS === */
    .mbb-container { padding: 0 14px !important; box-sizing: border-box; }
    .mbb-section { padding: 32px 0 !important; }

    /* === HEADINGS RESPONSIVE === */
    h1 { font-size: clamp(1.4rem, 5vw, 2rem) !important; line-height: 1.2 !important; }
    h2 { font-size: clamp(1.2rem, 4vw, 1.6rem) !important; line-height: 1.25 !important; }
    h3 { font-size: clamp(1rem, 3.5vw, 1.2rem) !important; line-height: 1.3 !important; }

    /* === MÉDIAS sécurisés === */
    img, video, iframe { max-width: 100% !important; height: auto; }
    .mbb-player-wrap iframe { height: 100% !important; }

    /* === MODALS plein écran mobile === */
    .mbb-cat-modal, .mbb-review-modal,
    #mbb-temp-pwd-modal > div {
        max-width: 100% !important;
        width: calc(100vw - 24px) !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        margin: 0 12px !important;
    }
    .mbb-paywall-plans { grid-template-columns: 1fr !important; gap: 12px !important; }

    /* M1.A — Paywall en BOTTOM-SHEET sur mobile (pattern iOS/Android natif).
       Slide-up depuis le bas, coins arrondis en haut, prend toute la largeur,
       max-height 92vh pour laisser voir le contexte derrière. */
    .mbb-paywall-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .mbb-paywall-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        margin: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        overflow-y: auto !important;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
        animation: mbb-paywall-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    @keyframes mbb-paywall-slide-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    /* Drag handle visuel (barre grise au-dessus du contenu) */
    .mbb-paywall-card::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        margin: 8px auto 12px;
    }

    /* M1.B — User dropdown : safety net pour ne jamais dépasser l'écran mobile.
       Le dropdown est anchored right:0 sur le bouton user (right header).
       Sur ≤480px on garantit qu'il reste dans le viewport (max-width 90vw). */
    .mbb-user-dropdown {
        max-width: 90vw !important;
        right: 8px !important; /* léger gutter du bord droit */
    }

    /* === FOOTER : colonnes stack === */
    .mbb-footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center; }
    .mbb-footer-col h4 { margin-bottom: 8px !important; }
}

@media (max-width: 480px) {
    .mbb-grid-3, .mbb-grid-4, .mbb-pratiques-grid, .mbb-blog-grid,
    .mbb-mp-grid, .mbb-bibliotheque-grid, .mbb-cards-grid { gap: 8px !important; }
    .mbb-card-body, .mbb-pratique-bigcard { padding: 10px !important; }
    .mbb-card-body h3, .mbb-pratique-bigcard h2 { font-size: 0.9rem !important; }
    .mbb-card-body p { font-size: 0.76rem !important; -webkit-line-clamp: 2; }
    .mbb-card-thumb { height: 90px !important; min-height: 90px !important; }
    .mbb-container { padding: 0 10px !important; }
    .mbb-section { padding: 24px 0 !important; }
    .mbb-stats-card, .mbb-dash-kpi-card {
        padding: 10px 8px !important; gap: 8px !important;
        flex-direction: column !important; text-align: center;
    }
    .mbb-stats-card-num { font-size: 1.2rem !important; }
}

@media (max-width: 380px) {
    .mbb-card-body h3 { font-size: 0.85rem !important; }
    .mbb-card-body p { -webkit-line-clamp: 1 !important; }
    .mbb-pratique-bigcard-emoji { font-size: 28px !important; }
}

/* === DESKTOP (≥769px) : <details> toujours déplié, summary masqué ===
   En desktop l'espace est suffisant pour afficher la description sans
   dropdown. Le markup HTML <details>/<summary> reste sémantiquement
   correct ; on cache juste le chrome cliquable. */
@media (min-width: 769px) {
    .mbb-card-details > summary { display: none !important; }
    .mbb-card-details > :not(summary) { display: block !important; }
}

/* ==========================================================================
   CONTRAST GUARD v0.9 — Garantit la lisibilité des textes en MODE CLAIR.
   Append final = cascade prioritaire sur toute règle plus haut + admin-skin.css.
   Cible : éléments à risque où une règle admin-skin avait forcé color:white.
   Ne touche PAS le dark mode (les overrides [data-theme="dark"] existants
   restent valides car plus spécifiques que body:not(.wp-admin)).
   ========================================================================== */

/* === ARTICLE SINGLE (single.php) === */
body:not(.wp-admin) .mbb-article-hero h1,
body:not(.wp-admin) .mbb-article-title {
    color: var(--mbb-accent-strong) !important;
    text-shadow: none !important;
}
body:not(.wp-admin) .mbb-article-hero p,
body:not(.wp-admin) .mbb-article-meta-large {
    color: var(--mbb-text-soft) !important;
    text-shadow: none !important;
}
body:not(.wp-admin) .mbb-article-meta-large strong {
    color: var(--mbb-accent-strong) !important;
}
body:not(.wp-admin) .mbb-article-hero a:not(.button):not(.mbb-tag):not(.mbb-tag-free):not(.mbb-tag-premium):not(.mbb-tag-soft),
body:not(.wp-admin) .mbb-breadcrumb a {
    color: var(--mbb-accent) !important;
    text-decoration: none !important;
}
/* .mbb-tag dans le hero : on RESTAURE la couleur native (texte blanc sur
   fond vert sauge) — sinon le sélecteur ci-dessus rendait le texte invisible
   (color === background-color). */
body:not(.wp-admin) .mbb-article-hero a.mbb-tag {
    color: #fff !important;
}
body:not(.wp-admin) .mbb-article-hero a.mbb-tag-free {
    color: #3F5A2F !important;
}
body:not(.wp-admin) .mbb-article-hero a.mbb-tag-premium {
    color: #6B4400 !important;
}
body:not(.wp-admin) .mbb-breadcrumb a:hover {
    color: var(--mbb-accent-strong) !important;
    text-decoration: underline !important;
}
body:not(.wp-admin) .mbb-breadcrumb li {
    color: var(--mbb-text-soft) !important;
}
body:not(.wp-admin) .mbb-breadcrumb [aria-current="page"] {
    color: var(--mbb-accent-strong) !important;
}

/* === ARTICLE CONTENT (texte principal du blog) === */
body:not(.wp-admin) .mbb-content {
    color: var(--mbb-text);
}
body:not(.wp-admin) .mbb-content h2,
body:not(.wp-admin) .mbb-content h3,
body:not(.wp-admin) .mbb-content h4 {
    color: var(--mbb-accent-strong);
}
body:not(.wp-admin) .mbb-content p,
body:not(.wp-admin) .mbb-content li,
body:not(.wp-admin) .mbb-content blockquote {
    color: var(--mbb-text);
}
body:not(.wp-admin) .mbb-content a:not(.mbb-btn) {
    color: var(--mbb-accent-strong);
    text-decoration: underline;
}

/* === DARK MODE article : couleurs claires === */
[data-theme="dark"] body:not(.wp-admin) .mbb-article-hero h1,
[data-theme="dark"] body:not(.wp-admin) .mbb-article-title,
[data-theme="dark"] .mbb-article-title {
    color: var(--mbb-accent-strong) !important;
}
[data-theme="dark"] body:not(.wp-admin) .mbb-article-hero p,
[data-theme="dark"] body:not(.wp-admin) .mbb-article-meta-large,
[data-theme="dark"] .mbb-article-meta-large {
    color: var(--mbb-text-soft) !important;
}
[data-theme="dark"] body:not(.wp-admin) .mbb-content {
    color: var(--mbb-text);
}
[data-theme="dark"] body:not(.wp-admin) .mbb-content h2,
[data-theme="dark"] body:not(.wp-admin) .mbb-content h3,
[data-theme="dark"] body:not(.wp-admin) .mbb-content h4 {
    color: var(--mbb-accent-strong);
}

/* ==========================================================================
   CONTRAST SAFETY NET v0.9 — Garantit WCAG AA partout (frontend uniquement)
   Append en fin de fichier pour priorité cascade maximale. Préfixé
   body:not(.wp-admin) pour ne PAS interférer avec l'admin (qui a son propre
   skin avec heros dark + texte blanc).

   Couleurs cibles WCAG AA :
     • Texte normal : ratio ≥ 4.5:1
     • Texte large  : ratio ≥ 3:1
     • Boutons       : ratio ≥ 4.5:1 (text vs background)

   Palette utilisée :
     LIGHT mode :
       - texte body   : #7A8B6F (sombre indigo, 12:1 sur beige #FAF7F2)
       - texte soft   : #F5F0E8 (4.7:1 sur beige)
       - accent foncé : var(--mbb-vert) = #5A6B4F (4.6:1 sur beige)
     DARK mode :
       - texte body   : #ECEAE5 (off-white, 14:1 sur #1A1A2E)
       - texte soft   : #F5F0E8 (8:1 sur #1A1A2E)
       - accent clair : #FAF7F2 (10:1 sur #1A1A2E)
   ========================================================================== */

/* === LIGHT MODE — body article + contenu blog === */
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-content,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-content p,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-content li,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-content,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-content p,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-content li,
body:not(.wp-admin):not([data-theme="dark"]) .entry-content,
body:not(.wp-admin):not([data-theme="dark"]) .entry-content p,
body:not(.wp-admin):not([data-theme="dark"]) .entry-content li {
    color: #7A8B6F;
}

body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-content h2,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-content h3,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-content h4,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-content h2,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-content h3,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-content h4 {
    color: var(--mbb-vert, #5A6B4E);
}

/* Article hero (page single blog) en mode clair */
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-title {
    color: var(--mbb-vert, #5A6B4E) !important;
}
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-meta-large,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-meta-large * {
    color: #F5F0E8 !important;
}
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-meta-large strong {
    color: var(--mbb-vert, #5A6B4E) !important;
}
body:not(.wp-admin):not([data-theme="dark"]) .mbb-breadcrumb,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-breadcrumb li,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-breadcrumb a {
    color: #F5F0E8 !important;
}
body:not(.wp-admin):not([data-theme="dark"]) .mbb-breadcrumb a:hover,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-breadcrumb [aria-current="page"] {
    color: var(--mbb-vert, #5A6B4E) !important;
}

/* Liens dans le contenu article (mode clair) — souligné + couleur visible */
body:not(.wp-admin):not([data-theme="dark"]) .mbb-content a,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-content a,
body:not(.wp-admin):not([data-theme="dark"]) .entry-content a {
    color: var(--mbb-vert, #5A6B4E);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
body:not(.wp-admin):not([data-theme="dark"]) .mbb-content a:hover,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-content a:hover,
body:not(.wp-admin):not([data-theme="dark"]) .entry-content a:hover {
    color: #5A6B4E; /* sauge plus foncé pour hover */
}

/* === DARK MODE — body article + contenu blog === */
[data-theme="dark"] body:not(.wp-admin) .mbb-article-content,
[data-theme="dark"] body:not(.wp-admin) .mbb-article-content p,
[data-theme="dark"] body:not(.wp-admin) .mbb-article-content li,
[data-theme="dark"] body:not(.wp-admin) .mbb-content,
[data-theme="dark"] body:not(.wp-admin) .mbb-content p,
[data-theme="dark"] body:not(.wp-admin) .mbb-content li,
[data-theme="dark"] body:not(.wp-admin) .entry-content,
[data-theme="dark"] body:not(.wp-admin) .entry-content p,
[data-theme="dark"] body:not(.wp-admin) .entry-content li {
    color: #FAF7F2;
}
[data-theme="dark"] body:not(.wp-admin) .mbb-article-title {
    color: #FAF7F2 !important;
}
[data-theme="dark"] body:not(.wp-admin) .mbb-article-meta-large,
[data-theme="dark"] body:not(.wp-admin) .mbb-article-meta-large * {
    color: #F5F0E8 !important;
}
[data-theme="dark"] body:not(.wp-admin) .mbb-article-meta-large strong {
    color: #FAF7F2 !important;
}
[data-theme="dark"] body:not(.wp-admin) .mbb-breadcrumb,
[data-theme="dark"] body:not(.wp-admin) .mbb-breadcrumb li,
[data-theme="dark"] body:not(.wp-admin) .mbb-breadcrumb a {
    color: #F5F0E8 !important;
}
[data-theme="dark"] body:not(.wp-admin) .mbb-content a,
[data-theme="dark"] body:not(.wp-admin) .mbb-article-content a,
[data-theme="dark"] body:not(.wp-admin) .entry-content a {
    color: #FAF7F2;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* === Filet : tous les <p>/<li> du body frontend si non hérités === */
body:not(.wp-admin):not([data-theme="dark"]) main p,
body:not(.wp-admin):not([data-theme="dark"]) main li {
    color: inherit;
}
body:not(.wp-admin):not([data-theme="dark"]) .mbb-section p {
    color: #7A8B6F;
}
body:not(.wp-admin):not([data-theme="dark"]) .mbb-section h2,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-section h3 {
    color: var(--mbb-vert, #5A6B4E);
}

/* === Articles connexes (related posts) sous l'article === */
body:not(.wp-admin):not([data-theme="dark"]) .mbb-related-posts h2,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-related-posts h3 {
    color: var(--mbb-vert, #5A6B4E);
}
body:not(.wp-admin):not([data-theme="dark"]) .mbb-related-posts a {
    color: var(--mbb-vert, #5A6B4E);
}
[data-theme="dark"] body:not(.wp-admin) .mbb-related-posts h2,
[data-theme="dark"] body:not(.wp-admin) .mbb-related-posts h3 {
    color: #FAF7F2;
}
[data-theme="dark"] body:not(.wp-admin) .mbb-related-posts a {
    color: #FAF7F2;
}

/* === Auteur de l'article === */
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-author,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-author * {
    color: #7A8B6F;
}
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-author h3,
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-author strong {
    color: var(--mbb-vert, #5A6B4E);
}
[data-theme="dark"] body:not(.wp-admin) .mbb-article-author,
[data-theme="dark"] body:not(.wp-admin) .mbb-article-author * {
    color: #FAF7F2;
}

/* === Tags article (sous le contenu) === */
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-tags a {
    color: var(--mbb-vert, #5A6B4E);
    background: rgba(122,139,111,0.10);
}
body:not(.wp-admin):not([data-theme="dark"]) .mbb-article-tags a:hover {
    background: rgba(122,139,111,0.20);
}
[data-theme="dark"] body:not(.wp-admin) .mbb-article-tags a {
    color: #FAF7F2;
    background: rgba(122, 139, 111, 0.14);
}

/* =============================================================
   MBB LEGAL — Templates pages légales (CGU, mentions, confidentialité)
   Mise en page lisible, sommaire numéroté, titres soulignés.
   Mobile-first.
   ============================================================= */

/* HERO légal */
.mbb-legal-hero {
    background: linear-gradient(135deg, #7A8B6F 0%, #5A6B4F 100%);
    color: #fff;
    padding: 56px 24px 48px;
    margin: 0 0 0;
    box-shadow: 0 6px 20px rgba(90,107,79,0.18);
}
.mbb-legal-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
}
.mbb-legal-hero-icon {
    font-size: 56px;
    line-height: 1;
    background: rgba(255,255,255,0.18);
    border-radius: 18px;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mbb-legal-hero-eyebrow {
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.85;
}
.mbb-legal-hero-title {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 2rem !important;
    line-height: 1.15;
    font-weight: 700;
}
.mbb-legal-hero-meta {
    margin: 0;
    color: rgba(255,255,255,0.92);
    font-size: 0.94rem;
}
.mbb-legal-hero-meta strong { color: #fff; font-weight: 700; }

/* Container */
.mbb-legal-container {
    max-width: 820px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}

/* SOMMAIRE (TOC) */
.mbb-legal-toc {
    background: linear-gradient(135deg, #FAF7F2 0%, #F5F0E8 100%);
    border: 1px solid rgba(122,139,111,0.18);
    border-left: 4px solid #7A8B6F;
    padding: 24px 28px;
    border-radius: 14px;
    margin: 0 0 40px;
    box-shadow: 0 2px 12px rgba(90,107,79,0.08);
}
.mbb-legal-toc-title {
    margin: 0 0 14px !important;
    color: #5A6B4F !important;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 1.15rem !important;
    font-weight: 700;
    border: 0 !important;
    padding: 0 !important;
}
.mbb-legal-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: mbb-toc;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 18px;
}
.mbb-legal-toc-list li {
    counter-increment: mbb-toc;
    padding: 0;
    margin: 0;
}
.mbb-legal-toc-list li::before {
    content: counter(mbb-toc) ".";
    color: #7A8B6F;
    font-weight: 700;
    margin-right: 6px;
}
.mbb-legal-toc-list a {
    color: #5A6B4F;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.5;
    transition: color 0.15s ease;
}
.mbb-legal-toc-list a:hover { color: #7A8B6F; text-decoration: underline; }

/* CONTENU légal */
.mbb-legal-content {
    counter-reset: mbb-h2;
    color: #333;
    font-size: 1rem;
    line-height: 1.7;
}
.mbb-legal-content p { margin: 0 0 14px; }
.mbb-legal-content > p:first-child em,
.mbb-legal-content > p:first-of-type em {
    display: block;
    background: rgba(122,139,111,0.06);
    border-left: 3px solid #7A8B6F;
    padding: 14px 18px;
    border-radius: 8px;
    font-style: italic;
    color: #5A6B4F;
    margin: 0 0 36px;
}
.mbb-legal-content h2 {
    counter-increment: mbb-h2;
    color: #5A6B4F !important;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 1.5rem !important;
    font-weight: 700;
    margin: 44px 0 18px !important;
    padding: 0 0 10px !important;
    border: 0;
    border-bottom: 2px solid rgba(122,139,111,0.25) !important;
    scroll-margin-top: 80px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.mbb-legal-content h2::before {
    content: counter(mbb-h2);
    background: linear-gradient(135deg, #7A8B6F 0%, #5A6B4F 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mbb-legal-content h3 {
    color: #5A6B4F;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 1.18rem;
    font-weight: 600;
    margin: 28px 0 12px;
}
.mbb-legal-content ul, .mbb-legal-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}
.mbb-legal-content li { margin: 0 0 6px; }
.mbb-legal-content ul ul, .mbb-legal-content ol ol { margin: 6px 0 6px; }
.mbb-legal-content strong { color: #5A6B4F; }
.mbb-legal-content a {
    color: #7A8B6F;
    text-decoration: underline;
    text-decoration-color: rgba(122,139,111,0.4);
    text-underline-offset: 3px;
}
.mbb-legal-content a:hover { color: #5A6B4F; text-decoration-color: #5A6B4F; }

/* Tables responsives */
.mbb-legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(90,107,79,0.06);
    border: 1px solid rgba(122,139,111,0.18);
}
.mbb-legal-content thead { background: linear-gradient(135deg, #F5F0E8 0%, #FAF7F2 100%); }
.mbb-legal-content thead th {
    color: #5A6B4F !important;
    font-weight: 700;
    padding: 12px 14px !important;
    border: 0 !important;
    border-bottom: 2px solid rgba(122,139,111,0.20) !important;
    text-align: left;
}
.mbb-legal-content tbody td {
    padding: 12px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(122,139,111,0.10) !important;
    vertical-align: top;
}
.mbb-legal-content tbody tr:last-child td { border-bottom: 0 !important; }
.mbb-legal-content tbody tr:hover { background: rgba(122,139,111,0.04); }

/* FOOTER légal */
.mbb-legal-footer {
    margin: 48px 0 0;
    padding: 32px 0 0;
    border-top: 1px solid rgba(122,139,111,0.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.mbb-legal-back-top {
    color: #5A6B4F;
    text-decoration: none;
    font-weight: 600;
    padding: 10px 18px;
    background: rgba(122,139,111,0.10);
    border-radius: 999px;
    transition: all 0.15s ease;
}
.mbb-legal-back-top:hover {
    background: rgba(122,139,111,0.20);
    transform: translateY(-2px);
}
.mbb-legal-cousins {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.mbb-legal-cousin {
    color: #5A6B4F;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid rgba(122,139,111,0.20);
    border-radius: 999px;
    transition: all 0.15s ease;
}
.mbb-legal-cousin:hover {
    background: rgba(122,139,111,0.08);
    border-color: rgba(122,139,111,0.35);
}

/* ----- MOBILE (≤768px) ----- */
@media (max-width: 768px) {
    .mbb-legal-hero { padding: 36px 18px 32px; }
    .mbb-legal-hero-inner { flex-direction: column; align-items: flex-start; gap: 16px; text-align: left; }
    .mbb-legal-hero-icon { width: 64px; height: 64px; font-size: 36px; }
    .mbb-legal-hero-title { font-size: 1.5rem !important; }
    .mbb-legal-container { padding: 28px 18px 56px; }
    .mbb-legal-toc { padding: 18px 20px; margin-bottom: 28px; }
    .mbb-legal-toc-list { grid-template-columns: 1fr; }
    .mbb-legal-content h2 { font-size: 1.2rem !important; margin-top: 32px !important; }
    .mbb-legal-content h2::before { min-width: 28px; height: 28px; font-size: 0.85rem; }
    /* Tables : scroll horizontal sur mobile */
    .mbb-legal-content table { display: block; overflow-x: auto; white-space: nowrap; }
    .mbb-legal-content thead th, .mbb-legal-content tbody td {
        white-space: normal;
        min-width: 140px;
    }
    .mbb-legal-footer { flex-direction: column; align-items: stretch; }
    .mbb-legal-cousins { justify-content: center; }
}

/* ----- DARK MODE ----- */
[data-theme="dark"] .mbb-legal-toc {
    background: linear-gradient(135deg, #7A8B6F 0%, #5A6B4E 100%);
    border-color: rgba(122, 139, 111, 0.20);
    border-left-color: #7A8B6F;
}
[data-theme="dark"] .mbb-legal-toc-title { color: #FAF7F2 !important; }
[data-theme="dark"] .mbb-legal-toc-list a { color: #F5F0E8; }
[data-theme="dark"] .mbb-legal-toc-list a:hover { color: #fff; }
[data-theme="dark"] .mbb-legal-toc-list li::before { color: #7A8B6F; }
[data-theme="dark"] .mbb-legal-content { color: #FAF7F2; }
[data-theme="dark"] .mbb-legal-content h2 {
    color: #FAF7F2 !important;
    border-bottom-color: rgba(122, 139, 111, 0.30) !important;
}
[data-theme="dark"] .mbb-legal-content h3 { color: #FAF7F2; }
[data-theme="dark"] .mbb-legal-content strong { color: #FAF7F2; }
[data-theme="dark"] .mbb-legal-content > p:first-child em,
[data-theme="dark"] .mbb-legal-content > p:first-of-type em {
    background: rgba(122, 139, 111, 0.08);
    border-left-color: #7A8B6F;
    color: #F5F0E8;
}
[data-theme="dark"] .mbb-legal-content a { color: #FAF7F2; }
[data-theme="dark"] .mbb-legal-content a:hover { color: #fff; }
[data-theme="dark"] .mbb-legal-content table {
    background: #5A6B4E;
    border-color: rgba(122, 139, 111, 0.20);
}
[data-theme="dark"] .mbb-legal-content thead {
    background: linear-gradient(135deg, #7A8B6F 0%, #5A6B4E 100%);
}
[data-theme="dark"] .mbb-legal-content thead th { color: #FAF7F2 !important; border-bottom-color: rgba(122, 139, 111, 0.30) !important; }
[data-theme="dark"] .mbb-legal-content tbody td { border-bottom-color: rgba(122, 139, 111, 0.10) !important; }
[data-theme="dark"] .mbb-legal-content tbody tr:hover { background: rgba(122, 139, 111, 0.06); }
[data-theme="dark"] .mbb-legal-back-top { background: rgba(122, 139, 111, 0.12); color: #F5F0E8; }
[data-theme="dark"] .mbb-legal-back-top:hover { background: rgba(122, 139, 111, 0.22); }
[data-theme="dark"] .mbb-legal-cousin {
    background: #5A6B4E;
    border-color: rgba(122, 139, 111, 0.20);
    color: #F5F0E8;
}
[data-theme="dark"] .mbb-legal-cousin:hover { background: rgba(122, 139, 111, 0.10); }

/* =============================================================
   DARK MODE — AUDIT GLOBAL LISIBILITÉ (demande user explicite)
   Force tout le corps de texte (paragraphes, descriptions, eyebrows,
   meta, disclaimers, etc.) en BLANC (#FFFFFF) ou QUASI-BLANC (#F0F0F0)
   pour éliminer les écritures gris/bleu dim qui étaient illisibles
   sur fond #1A1A2E.
   ============================================================= */

/* 1. Tous les <p> sous .mbb-main (corps du site frontend) */
html[data-theme="dark"] body:not(.wp-admin) .mbb-main p,
html[data-theme="dark"] body:not(.wp-admin) main p,
html[data-theme="dark"] body:not(.wp-admin) .mbb-section p,
html[data-theme="dark"] body:not(.wp-admin) .mbb-container p {
    color: #FFFFFF !important;
}

/* 2. Petites écritures discrètes : eyebrows, captions, meta, disclaimers */
html[data-theme="dark"] body:not(.wp-admin) .mbb-hero-eyebrow,
html[data-theme="dark"] body:not(.wp-admin) .mbb-section-eyebrow,
html[data-theme="dark"] body:not(.wp-admin) .mbb-eyebrow,
html[data-theme="dark"] body:not(.wp-admin) .mbb-disclaimer,
html[data-theme="dark"] body:not(.wp-admin) .mbb-caption,
html[data-theme="dark"] body:not(.wp-admin) .mbb-meta,
html[data-theme="dark"] body:not(.wp-admin) .mbb-card-meta,
html[data-theme="dark"] body:not(.wp-admin) small,
html[data-theme="dark"] body:not(.wp-admin) .mbb-text-soft,
html[data-theme="dark"] body:not(.wp-admin) [class*="-subtitle"],
html[data-theme="dark"] body:not(.wp-admin) [class*="-description"],
html[data-theme="dark"] body:not(.wp-admin) [class*="-helper"] {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* 3. Liens dans le corps de texte (gardent leur accent sauge mais lisible) */
html[data-theme="dark"] body:not(.wp-admin) .mbb-main a:not(.mbb-btn):not(.button),
html[data-theme="dark"] body:not(.wp-admin) .mbb-section a:not(.mbb-btn):not(.button) {
    color: var(--mbb-accent-strong) !important; /* #FAF7F2 sauge clair */
}

/* 4. Liste items (ul/ol) — souvent oubliés */
html[data-theme="dark"] body:not(.wp-admin) .mbb-main li,
html[data-theme="dark"] body:not(.wp-admin) .mbb-section li {
    color: #FFFFFF !important;
}

/* 5. Cards : titres + body texte */
html[data-theme="dark"] body:not(.wp-admin) .mbb-card h3,
html[data-theme="dark"] body:not(.wp-admin) .mbb-card h4 { color: var(--mbb-accent-strong) !important; }
html[data-theme="dark"] body:not(.wp-admin) .mbb-card p,
html[data-theme="dark"] body:not(.wp-admin) .mbb-card-body p,
html[data-theme="dark"] body:not(.wp-admin) .mbb-card-body { color: #FFFFFF !important; }

/* 6. Formulaires : labels + helper texts */
html[data-theme="dark"] body:not(.wp-admin) label,
html[data-theme="dark"] body:not(.wp-admin) .mbb-form-label,
html[data-theme="dark"] body:not(.wp-admin) .mbb-form-help { color: #FFFFFF !important; }

/* 7. Footer : tous les textes lisibles */
html[data-theme="dark"] body:not(.wp-admin) .mbb-footer,
html[data-theme="dark"] body:not(.wp-admin) .mbb-footer p,
html[data-theme="dark"] body:not(.wp-admin) .mbb-footer li,
html[data-theme="dark"] body:not(.wp-admin) .mbb-footer a { color: #FFFFFF !important; }

/* 8. Exceptions : on PRÉSERVE le texte sombre sur fonds clairs (cards beiges,
   notice success/info verte, buttons blanc) — ces éléments gardent leur design. */
html[data-theme="dark"] body:not(.wp-admin) .mbb-btn,
html[data-theme="dark"] body:not(.wp-admin) .mbb-btn *,
html[data-theme="dark"] body:not(.wp-admin) .button,
html[data-theme="dark"] body:not(.wp-admin) .mbb-tag,
html[data-theme="dark"] body:not(.wp-admin) .mbb-smiley-item.has-custom-bg,
html[data-theme="dark"] body:not(.wp-admin) .mbb-smiley-item.has-custom-bg *,
html[data-theme="dark"] body:not(.wp-admin) [class*="notice-success"] *,
html[data-theme="dark"] body:not(.wp-admin) [class*="notice-info"] * {
    /* Ces éléments ont leur propre color contextuelle, ne pas forcer blanc */
}

/* =============================================================
   DARK MODE — RÉAJUSTEMENTS CIBLÉS (audit user)
   ============================================================= */

/* AJOUT A : .mbb-blog-intro (description hero pratiques/bibliothèque/historique...)
   Le user a explicitement signalé "Yoga doux, sophrologie..." illisible. */
html[data-theme="dark"] body:not(.wp-admin) .mbb-blog-intro,
html[data-theme="dark"] body:not(.wp-admin) .mbb-hero-text,
html[data-theme="dark"] body:not(.wp-admin) .mbb-hero p,
html[data-theme="dark"] body:not(.wp-admin) .mbb-welcome {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* AJOUT B : eyebrows en haut des pages (NOS DISCIPLINES, BIBLIOTHÈQUE...)
   Force la teinte sauge claire (plus contrastée que le var par défaut). */
html[data-theme="dark"] body:not(.wp-admin) .mbb-hero-eyebrow {
    color: var(--mbb-accent-strong) !important; /* #FAF7F2 */
    opacity: 1 !important;
}

/* Cards /pratiques/ — DARK MODE : texte BEIGE #F5F0E8 (lisible sur fond vert fonce gradient).
   Le fond gradient vert fonce est defini dans page-pratiques.php (inline style). */
/* DARK MODE : gradient VERT FONCE (#5A6B4F → #37463D) + texte BEIGE */
html[data-theme="dark"] body:not(.wp-admin) .mbb-pratique-bigcard {
    background: linear-gradient(135deg, #5A6B4E 0%, #38473D 100%) !important;
    border: 1px solid rgba(245, 240, 232, 0.20) !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-pratique-bigcard,
html[data-theme="dark"] body:not(.wp-admin) .mbb-pratique-bigcard p,
html[data-theme="dark"] body:not(.wp-admin) .mbb-pratique-bigcard h2,
html[data-theme="dark"] body:not(.wp-admin) .mbb-pratique-bigcard li,
html[data-theme="dark"] body:not(.wp-admin) .mbb-pratique-bigcard a,
html[data-theme="dark"] body:not(.wp-admin) .mbb-pratique-bigcard .mbb-pratique-bigcard-desc,
html[data-theme="dark"] body:not(.wp-admin) .mbb-pratique-bigcard .mbb-card-details-content {
    color: #F5F0E8 !important; /* BEIGE palette stricte */
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-pratique-bigcard h2 {
    color: #F5F0E8 !important; /* BEIGE */
    font-weight: 700 !important;
}
/* Lien "Decouvrir" beige aussi (coherence palette) */
html[data-theme="dark"] body:not(.wp-admin) .mbb-pratique-bigcard .mbb-link-arrow {
    color: #F5F0E8 !important;
}
/* Même logique pour les smiley single (hero avec pastel) */
html[data-theme="dark"] body:not(.wp-admin) .mbb-smiley-hero[style*="background:#"],
html[data-theme="dark"] body:not(.wp-admin) .mbb-smiley-hero[style*="background: #"] {
    /* Conservé pour pastels — texte hero smiley déjà géré par single-mbb_smiley.php */
}

/* ==========================================================================
   CARDS /pratiques/ (.mbb-pratique-bigcard)
   LIGHT MODE : gradient VERT CLAIR sauge (#A8BB9C → #7A8B6F) + texte BEIGE
   DARK  MODE : gradient VERT FONCE (#5A6B4F → #37463D) + texte BEIGE
   La variable inline --bg (pastel) du PHP est volontairement ignoree.
   ========================================================================== */
.mbb-pratique-bigcard {
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    border-radius: 18px;
    background: linear-gradient(135deg, #A8BB9C 0%, #7A8B6F 100%) !important;
    border: 1px solid rgba(245, 240, 232, 0.30) !important;
    box-shadow: 0 4px 16px rgba(55, 70, 61, 0.12);
    text-decoration: none !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
    min-height: 260px;
    color: #F5F0E8 !important;
}
.mbb-pratique-bigcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(55, 70, 61, 0.22);
}
.mbb-pratique-bigcard-emoji {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 14px;
}
.mbb-pratique-bigcard h2 {
    color: #F5F0E8 !important;
    font-weight: 700 !important;
    margin: 0 0 14px;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    padding-bottom: 12px;
    border-bottom: 1.5px solid rgba(245, 240, 232, 0.30);
}
.mbb-pratique-bigcard p,
.mbb-pratique-bigcard .mbb-card-details-content {
    color: #F5F0E8 !important;
    line-height: 1.5;
}
.mbb-pratique-bigcard .mbb-pratique-bigcard-desc {
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0 0 14px;
    color: #F5F0E8 !important;
    opacity: 0.95;
}
/* Force emoji color font (sinon fallback monochrome sur certains glyphes
   ex: U+23F1 stopwatch sans variation selector qui ne rendait rien) */
.mbb-pratique-bigcard-emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "Twemoji Mozilla", "EmojiOne Color", "Android Emoji",
                 -apple-system, sans-serif !important;
    font-size: 44px !important;
}
.mbb-pratique-bigcard .mbb-card-details summary {
    color: #5A6B4F !important;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 0;
    list-style: none;
    outline: 0;
}
.mbb-pratique-bigcard .mbb-card-details summary::-webkit-details-marker {
    display: none;
}
.mbb-pratique-bigcard-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 18px;
    gap: 12px;
    flex-wrap: wrap;
}
.mbb-pratique-bigcard .mbb-tag-soft {
    background: rgba(55, 70, 61, 0.10) !important;
    color: #37463D !important;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* CTA "Decouvrir" : pill vert sauge -> hover vert fonce, TOUJOURS visible */
.mbb-pratique-bigcard .mbb-link-arrow {
    background: #5A6B4F !important;
    color: #FFFFFF !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease, gap 0.2s ease, transform 0.2s ease,
                box-shadow 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(55, 70, 61, 0.18);
}
.mbb-pratique-bigcard:hover .mbb-link-arrow,
.mbb-pratique-bigcard .mbb-link-arrow:hover {
    background: #37463D !important;
    color: #FFFFFF !important;
    gap: 10px;
    transform: translateX(0);
    box-shadow: 0 4px 12px rgba(55, 70, 61, 0.28);
}
/* Dark mode : pill "Decouvrir" sur card vert fonce — texte BEIGE coherent */
html[data-theme="dark"] body:not(.wp-admin) .mbb-pratique-bigcard .mbb-link-arrow {
    background: rgba(245, 240, 232, 0.14) !important;
    color: #F5F0E8 !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-pratique-bigcard:hover .mbb-link-arrow {
    background: #38473D !important;
}

/* AJOUT C : .mbb-tag-free et tags de programme — fix contraste dark mode */
html[data-theme="dark"] body:not(.wp-admin) .mbb-tag-free {
    background: rgba(184, 212, 168, 0.20) !important;
    color: #FAF7F2 !important; /* vert clair lisible */
}

/* === FILTRES UNIFIES (biblio/histo/blog) : tout est repris desormais
   par les regles `.mbb-biblio-filter-row > a, .mbb-blog-cats li > a` (~4920+).
   Les overrides historiques sont SUPPRIMES pour eviter les conflits cascade.
   Seul reste un override pour le badge .mbb-hist-count cote historique. */
html[data-theme="dark"] body:not(.wp-admin) .mbb-biblio-filter-row a.is-active .mbb-hist-count,
html[data-theme="dark"] body:not(.wp-admin) .mbb-hist-filter.is-active .mbb-hist-count {
    background: rgba(255,255,255,0.25) !important;
    color: #FFFFFF !important;
}
/* === FIX DEFENSIF : pill ACTIVE blog/biblio — TEXTE TOUJOURS VERT TRES FONCE.
   Specificite max (html body :not + double class) + tres haute position cascade
   pour battre toute autre regle qui essaierait de masquer le texte (color: #fff,
   color: transparent, color: var(--mbb-accent), etc.). */
html body:not(.wp-admin) .mbb-blog-cats a.is-active,
html body:not(.wp-admin) .mbb-blog-cats li > a.is-active,
html body:not(.wp-admin) .mbb-blog-cats a.is-active *,
html body:not(.wp-admin) .mbb-blog-cats li > a.is-active *,
html body:not(.wp-admin) .mbb-biblio-filter-row > a.is-active,
html body:not(.wp-admin) .mbb-biblio-filter-row > a.is-active * {
    color: #37463D !important;
    background-color: #F5F0E8 !important;
    border-color: #F5F0E8 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-indent: 0 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}
/* Centrage blog filters (parite biblio mais centre sur le blog) */
body.blog .mbb-biblio-filter-row,
body:not(.wp-admin) .mbb-blog-filters .mbb-biblio-filter-row {
    justify-content: center !important;
}

/* CTA banner ".mbb-cta-banner" — titre h2 + texte BLANC FORCÉ avec
   spécificité max + bouton "Voir la bibliothèque" en vert SOMBRE lisible.
   Demande user : title "Explorer toute la bibliothèque" doit être lisible. */
html body:not(.wp-admin) .mbb-cta-banner h2,
html body:not(.wp-admin) .mbb-cta-banner p,
html body:not(.wp-admin) .mbb-cta-banner * {
    color: #FFFFFF !important;
    opacity: 1 !important;
}
html body:not(.wp-admin) .mbb-cta-banner .mbb-btn {
    background: #FFFFFF !important;
    color: #3F5A2F !important; /* vert sombre lisible sur fond blanc */
    font-weight: 700 !important;
}
html body:not(.wp-admin) .mbb-cta-banner .mbb-btn:hover {
    background: #FAF7F2 !important;
    color: #5A6B4F !important;
}

/* === P1.6 LAZY BG-IMAGES (placeholder fond beige tant que pas chargé) === */
.mbb-lazy-bg {
    background-color: var(--mbb-beige, #F5F0E8);
    background-image: linear-gradient(135deg, #F5F0E8 0%, #EEE7DA 100%);
    transition: opacity 0.3s ease;
    position: relative;
}
.mbb-lazy-bg::before {
    /* Skeleton shimmer subtil */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.35) 50%,
        rgba(255,255,255,0) 100%);
    animation: mbb-lazy-shimmer 1.6s linear infinite;
}
.mbb-lazy-bg-loaded {
    animation: mbb-lazy-fade-in 0.4s ease;
}
.mbb-lazy-bg-loaded::before { display: none; }
.mbb-lazy-bg-error {
    background: var(--mbb-beige, #F5F0E8);
}
.mbb-lazy-bg-error::before { display: none; }
@keyframes mbb-lazy-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
@keyframes mbb-lazy-fade-in {
    from { opacity: 0.6; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mbb-lazy-bg::before { animation: none; }
    .mbb-lazy-bg-loaded { animation: none; }
}
[data-theme="dark"] .mbb-lazy-bg {
    background-color: #7A8B6F;
    background-image: linear-gradient(135deg, #7A8B6F 0%, #5A6B4E 100%);
}

/* =============================================================
   FIX ALIGNEMENT — reading time dans article cards
   ============================================================= */
.mbb-article-meta {
    line-height: 1.4 !important;
}
.mbb-article-meta time,
.mbb-article-meta .mbb-article-reading-time {
    line-height: inherit;
    vertical-align: baseline;
}
.mbb-article-meta .mbb-article-reading-time {
    /* Le &middot; intégré dans le span causait l'offset visuel : on le sort
       en pseudo-element pour aligner correctement avec le time. */
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}



/* === BANNIÈRE POST-TRIAL 7-JOURS (conversion upsell) === */
.mbb-posttrial-banner {
    background: linear-gradient(135deg, #C28A00 0%, #E8A91D 100%);
    color: #fff;
    box-shadow: 0 4px 18px rgba(194, 138, 0, 0.25);
    animation: mbb-posttrial-slide-down 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes mbb-posttrial-slide-down {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.mbb-posttrial-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 26px 24px;
    flex-wrap: wrap;
}
.mbb-posttrial-text { flex: 1; min-width: 280px; }
.mbb-posttrial-eyebrow {
    display: inline-block;
    background: rgba(255,255,255,0.20);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.mbb-posttrial-title {
    font-family: 'Poppins', system-ui, sans-serif !important;
    color: #fff !important;
    margin: 0 0 6px !important;
    font-size: 1.45rem !important;
    line-height: 1.25;
}
.mbb-posttrial-desc {
    color: rgba(255,255,255,0.95) !important;
    margin: 0 !important;
    font-size: 0.96rem;
    line-height: 1.5;
    max-width: 640px;
}
.mbb-posttrial-desc strong { color: #fff; }
.mbb-posttrial-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.mbb-posttrial-cta {
    background: #fff !important;
    color: #C28A00 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.mbb-posttrial-cta:hover {
    background: #FFF8E6 !important;
    transform: translateY(-2px);
}
.mbb-posttrial-close {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.40);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: all 0.2s ease;
}
.mbb-posttrial-close:hover {
    background: rgba(255,255,255,0.20);
    transform: rotate(90deg);
}
@media (max-width: 768px) {
    .mbb-posttrial-inner { padding: 20px 18px; gap: 16px; }
    .mbb-posttrial-title { font-size: 1.15rem !important; }
    .mbb-posttrial-desc { font-size: 0.88rem; }
    .mbb-posttrial-actions { width: 100%; justify-content: space-between; }
    .mbb-posttrial-cta { flex: 1; text-align: center; }
}
[data-theme="dark"] .mbb-posttrial-banner {
    background: linear-gradient(135deg, #8A6A00 0%, #C28A00 100%);
}

/* === COMPACTAGE GLOBAL (demande user : trop d'espaces, trop de scroll) ===
   Réduit les paddings verticaux des sections principales. S'applique en
   ÉCRASEMENT controlé pour ne PAS casser les heros (premier .mbb-hero garde
   son padding original via .mbb-hero non touché par cette règle). */
body:not(.wp-admin) .mbb-section { padding: 48px 0 !important; }
body:not(.wp-admin) .mbb-section-pratiques-hero { padding-bottom: 0 !important; }
body:not(.wp-admin) .mbb-section-recommandations,
body:not(.wp-admin) .mbb-smiley-recommendations,
body:not(.wp-admin) .mbb-section-related { padding: 40px 0 !important; }
body:not(.wp-admin) .mbb-section-header { margin-bottom: 24px !important; }
body:not(.wp-admin) .mbb-pratiques-grid,
body:not(.wp-admin) .mbb-biblio-grid,
body:not(.wp-admin) .mbb-blog-grid,
body:not(.wp-admin) .mbb-grid-3 { margin-top: 0 !important; gap: 20px !important; }
body:not(.wp-admin) .mbb-cta-banner { margin-top: 32px !important; padding: 32px !important; }
body:not(.wp-admin) .mbb-footer { padding-top: 40px !important; }
body:not(.wp-admin) .mbb-hero { padding: 56px 0 40px !important; }
body:not(.wp-admin) .mbb-hero-split { padding: 48px 0 32px !important; }

/* Mobile : encore plus compact */
@media (max-width: 768px) {
    body:not(.wp-admin) .mbb-section { padding: 32px 0 !important; }
    body:not(.wp-admin) .mbb-section-recommandations,
    body:not(.wp-admin) .mbb-smiley-recommendations,
    body:not(.wp-admin) .mbb-section-related { padding: 28px 0 !important; }
    body:not(.wp-admin) .mbb-section-header { margin-bottom: 18px !important; }
    body:not(.wp-admin) .mbb-cta-banner { margin-top: 24px !important; padding: 24px 20px !important; }
    body:not(.wp-admin) .mbb-hero { padding: 40px 0 32px !important; }
    body:not(.wp-admin) .mbb-hero-split { padding: 36px 0 24px !important; }
}

/* === COMPACTAGE AGRESSIF v2 (demande user récurrente : moins de scroll) ===
   - Titre hero : marges plus serrées
   - Description hero : margin-bottom réduit
   - Search bar : gap réduit avec filtres dessous
   - Filtres : gap réduit avec grid résultats
   - Espaces titre/description sections : moitié */
body:not(.wp-admin) .mbb-hero-title {
    margin-bottom: 12px !important;
    font-size: clamp(1.8rem, 4.5vw, 2.6rem) !important;
    line-height: 1.15 !important;
}
body:not(.wp-admin) .mbb-hero-subtitle,
body:not(.wp-admin) .mbb-hero p,
body:not(.wp-admin) .mbb-section-header p {
    margin-bottom: 16px !important;
    line-height: 1.5 !important;
}
body:not(.wp-admin) .mbb-section-header h2,
body:not(.wp-admin) .mbb-section h2 {
    margin: 0 0 8px !important;
    line-height: 1.2 !important;
}
body:not(.wp-admin) .mbb-section-header { margin-bottom: 18px !important; }

/* Pages spécifiques où on observait beaucoup de whitespace */
body:not(.wp-admin) .mbb-biblio-hero,
body:not(.wp-admin) .mbb-section-pratiques-hero {
    padding: 40px 0 24px !important;
}
body:not(.wp-admin) .mbb-biblio-search-wrap,
body:not(.wp-admin) .mbb-biblio-filters {
    margin: 16px 0 12px !important;
}
body:not(.wp-admin) .mbb-biblio-filter-row {
    margin: 8px 0 !important;
    gap: 8px !important;
}

/* ==========================================================================
   FILTRES BIBLIOTHEQUE / PRATIQUES — lisibilite garantie (light + dark)
   Page bg = vert fonce.
   - INACTIF : pill VERT FONCE #5A6B4F + bord BEIGE visible + texte BEIGE #F5F0E8
   - ACTIF   : pill BEIGE #F5F0E8 + texte VERT TRES FONCE #37463D
   - Label "Discipline :" / "Duree :" : blanc en dark, vert fonce en light
   ========================================================================== */
body:not(.wp-admin) .mbb-biblio-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px !important;
}
body:not(.wp-admin) .mbb-biblio-filter-label {
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: 0.95rem;
    margin-right: 4px;
}
html:not([data-theme="dark"]) body:not(.wp-admin) .mbb-biblio-filter-label {
    color: #38473D !important;
}
/* PILLS INACTIVES — pill vert fonce + bord beige visible + texte beige
   Selecteurs etendus pour couvrir AUSSI le blog (.mbb-blog-cats li > a) */
body:not(.wp-admin) .mbb-biblio-filter-row > a,
body:not(.wp-admin) .mbb-biblio-filter-row > a:visited,
body:not(.wp-admin) .mbb-blog-cats li > a,
body:not(.wp-admin) .mbb-blog-cats li > a:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: #5A6B4F !important;
    color: #F5F0E8 !important;
    border: 1.5px solid #F5F0E8 !important;
    border-radius: 999px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.18s ease, color 0.18s ease,
                transform 0.18s ease, box-shadow 0.18s ease !important;
}
body:not(.wp-admin) .mbb-biblio-filter-row > a *,
body:not(.wp-admin) .mbb-biblio-filter-row > a:visited *,
body:not(.wp-admin) .mbb-blog-cats li > a *,
body:not(.wp-admin) .mbb-blog-cats li > a:visited * {
    color: #F5F0E8 !important;
}
body:not(.wp-admin) .mbb-biblio-filter-row > a:hover,
body:not(.wp-admin) .mbb-blog-cats li > a:hover {
    background: #F5F0E8 !important;
    color: #37463D !important;
    border-color: #F5F0E8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
}
body:not(.wp-admin) .mbb-biblio-filter-row > a:hover *,
body:not(.wp-admin) .mbb-blog-cats li > a:hover * {
    color: #37463D !important;
}
/* PILL ACTIVE — pill beige + texte vert tres fonce */
body:not(.wp-admin) .mbb-biblio-filter-row > a.is-active,
body:not(.wp-admin) .mbb-biblio-filter-row > a.is-active:visited,
body:not(.wp-admin) .mbb-blog-cats li > a.is-active,
body:not(.wp-admin) .mbb-blog-cats li > a.is-active:visited,
html[data-theme="dark"] body:not(.wp-admin) .mbb-biblio-filter-row > a.is-active,
html[data-theme="dark"] body:not(.wp-admin) .mbb-blog-cats li > a.is-active {
    background: #F5F0E8 !important;
    color: #38473D !important;
    border-color: #F5F0E8 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}
body:not(.wp-admin) .mbb-biblio-filter-row > a.is-active *,
body:not(.wp-admin) .mbb-blog-cats li > a.is-active *,
html[data-theme="dark"] body:not(.wp-admin) .mbb-biblio-filter-row > a.is-active *,
html[data-theme="dark"] body:not(.wp-admin) .mbb-blog-cats li > a.is-active * {
    color: #38473D !important;
}
body:not(.wp-admin) .mbb-biblio-filter-row > a.is-active:hover {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #37463D !important;
}

/* ULTRA-DEFENSIF : pill active "Toutes" (porte les classes .mbb-blog-cats.is-active)
   Le texte direct du <a> doit etre VERT FONCE sur fond beige.
   Specificite max : html body + double class + :where pour eviter les conflits. */
html body:not(.wp-admin) .mbb-biblio-filter-row > a.is-active,
html body:not(.wp-admin) .mbb-biblio-filter-row > a.is-active:link,
html body:not(.wp-admin) .mbb-biblio-filter-row > a.is-active:visited,
html body:not(.wp-admin) .mbb-biblio-filter-row > a.mbb-blog-cats.is-active,
html body:not(.wp-admin) .mbb-biblio-filter-row > a.mbb-blog-cats.is-active:link,
html body:not(.wp-admin) .mbb-biblio-filter-row > a.mbb-blog-cats.is-active:visited {
    background: #F5F0E8 !important;
    color: #37463D !important;
    -webkit-text-fill-color: #37463D !important;
    border: 1.5px solid #F5F0E8 !important;
}
/* Les enfants (span count, etc.) aussi en vert fonce */
html body:not(.wp-admin) .mbb-biblio-filter-row > a.is-active *,
html body:not(.wp-admin) .mbb-biblio-filter-row > a.mbb-blog-cats.is-active * {
    color: #37463D !important;
    -webkit-text-fill-color: #37463D !important;
}
body:not(.wp-admin) .mbb-biblio-grid,
body:not(.wp-admin) .mbb-grid-3,
body:not(.wp-admin) .mbb-grid-4 {
    margin-top: 20px !important;
}

/* Single article : compactage entre hero et contenu */
body:not(.wp-admin).single-post .mbb-article-hero { padding: 32px 0 !important; }
body:not(.wp-admin).single-post .mbb-section { padding: 32px 0 !important; }
body:not(.wp-admin).single-post .mbb-article-content { padding-top: 24px !important; }

/* Header/footer : sans gap excessif sous le header */
body:not(.wp-admin) .mbb-header { padding-top: 12px !important; padding-bottom: 12px !important; }
body:not(.wp-admin) .mbb-main { padding-top: 0 !important; }

/* Mobile encore plus compact */
@media (max-width: 768px) {
    body:not(.wp-admin) .mbb-hero-title {
        margin-bottom: 10px !important;
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }
    body:not(.wp-admin) .mbb-biblio-hero,
    body:not(.wp-admin) .mbb-section-pratiques-hero {
        padding: 24px 0 16px !important;
    }
    body:not(.wp-admin) .mbb-biblio-filters {
        margin: 12px 0 8px !important;
    }
    body:not(.wp-admin) .mbb-biblio-grid,
    body:not(.wp-admin) .mbb-grid-3,
    body:not(.wp-admin) .mbb-grid-4 {
        margin-top: 16px !important;
    }
}

/* === PAYWALL : cards programmes verrouillées (Phase A) === */
.mbb-card.mbb-card-locked {
    position: relative;
    filter: grayscale(0.55) brightness(0.92);
    opacity: 0.85;
    transition: all 0.25s ease;
}
.mbb-card.mbb-card-locked:hover {
    filter: grayscale(0.30) brightness(0.96);
    opacity: 1;
}
.mbb-card.mbb-card-locked::after {
    content: '🔒';
    position: absolute;
    top: 12px;
    right: 12px; /* CÔTÉ DROIT (et non gauche : sinon cascade avec tag Premium) */
    z-index: 4;
    background: rgba(0,0,0,0.65);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* Le bouton favori est aussi à droite haut → on le cache sur les cards locked
   pour éviter overlap (de toute façon on ne peut pas favoriser un programme verrouillé). */
.mbb-card.mbb-card-locked .mbb-card-fav { display: none !important; }
.mbb-card.mbb-card-locked .mbb-tag-premium {
    background: linear-gradient(135deg, #C28A00 0%, #E8A91D 100%) !important;
    color: #fff !important;
}

/* === PAYWALL MODAL (tarifs + packs) === */
.mbb-paywall-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    backdrop-filter: blur(4px);
}
.mbb-paywall-modal-overlay.is-open { display: flex; }
.mbb-paywall-modal {
    background: var(--mbb-bg-card, #fff);
    border-radius: 18px;
    max-width: 920px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 40px 32px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0,0,0,0.40);
    animation: mbb-paywall-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mbb-paywall-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mbb-paywall-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0,0,0,0.08);
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: var(--mbb-text);
    transition: all 0.2s ease;
}
.mbb-paywall-modal-close:hover { background: rgba(0,0,0,0.18); transform: rotate(90deg); }
.mbb-paywall-modal-header {
    text-align: center;
    margin-bottom: 28px;
}
.mbb-paywall-modal-header h2 {
    margin: 0 0 8px !important;
    font-size: 1.7rem !important;
    color: var(--mbb-accent-strong, #5A6B4F) !important;
}
.mbb-paywall-modal-header p {
    margin: 0;
    color: var(--mbb-text-soft);
    max-width: 540px;
    margin: 0 auto;
}
.mbb-paywall-modal-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--mbb-border);
}
.mbb-paywall-tab {
    background: none;
    border: 0;
    padding: 12px 20px;
    cursor: pointer;
    color: var(--mbb-text-soft);
    font-weight: 600;
    font-size: 1rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}
.mbb-paywall-tab.is-active {
    color: var(--mbb-accent-strong);
    border-bottom-color: var(--mbb-accent-strong);
}
.mbb-paywall-tab:hover { color: var(--mbb-accent-strong); }
.mbb-paywall-tab-panel { display: none; }
.mbb-paywall-tab-panel.is-active { display: block; }
.mbb-paywall-plan-grid,
.mbb-paywall-pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.mbb-paywall-plan-card,
.mbb-paywall-pack-card {
    background: var(--mbb-bg);
    border: 1.5px solid var(--mbb-border);
    border-radius: 14px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mbb-paywall-plan-card:hover,
.mbb-paywall-pack-card:hover {
    border-color: var(--mbb-accent);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(90,107,79,0.12);
}
.mbb-paywall-plan-icon,
.mbb-paywall-pack-icon { font-size: 32px; line-height: 1; }
.mbb-paywall-plan-name {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--mbb-text);
    margin: 0;
}
.mbb-paywall-plan-price {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--mbb-accent-strong);
}
.mbb-paywall-plan-price small { font-size: 0.7rem; font-weight: 500; color: var(--mbb-text-soft); }
.mbb-paywall-plan-desc { font-size: 0.88rem; color: var(--mbb-text-soft); flex: 1; }
.mbb-paywall-cta {
    background: var(--mbb-accent);
    color: #fff !important;
    border: 0;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
    margin-top: auto;
}
.mbb-paywall-cta:hover { background: var(--mbb-accent-strong); transform: translateY(-1px); }
.mbb-paywall-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--mbb-text-soft);
}

@media (max-width: 768px) {
    .mbb-paywall-modal {
        padding: 24px 20px;
        border-radius: 16px 16px 0 0;
        max-height: 92vh;
        margin-top: auto;
    }
    .mbb-paywall-modal-overlay { align-items: flex-end; padding: 0; }
    .mbb-paywall-modal-header h2 { font-size: 1.3rem !important; }
    .mbb-paywall-plan-grid,
    .mbb-paywall-pack-grid { grid-template-columns: 1fr; }
}

/* === MASQUAGE FORCÉ du bandeau Hostinger "Modifier la page d'accueil" ===
   Le plugin hostinger-easy-onboarding force #wpadminbar même pour les
   non-connectés sur le frontend. Notre filter show_admin_bar(false) est
   bypassé. On masque visuellement + neutralise les marges. */
body:not(.wp-admin) #wpadminbar { display: none !important; }
html:not(.wp-admin) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
html { margin-top: 0 !important; }
* html body { margin-top: 0 !important; }

/* Bouton "🔒 Connectez-vous" sur séances quand user non logged-in */
.mbb-btn.mbb-btn-login-req {
    background: linear-gradient(135deg, #C28A00 0%, #E8A91D 100%) !important;
    color: #fff !important;
    border: 0 !important;
}
.mbb-btn.mbb-btn-login-req:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(194,138,0,0.25);
}

/* =============================================================
   PAYWALL PROGRAMME (single-mbb_programme.php) — Desktop base CSS
   Pleine page : hero + plans + packs en grille. Pas un modal overlay
   ici (vu que la route /programmes/X/ rend ce contenu directement).
   ============================================================= */
.mbb-paywall-overlay {
    background: var(--mbb-bg, #FAF7F2);
    padding: 56px 24px 64px;
    min-height: calc(100vh - 200px);
}
.mbb-paywall-card {
    max-width: 1080px;
    margin: 0 auto;
    background: var(--mbb-bg-card, #fff);
    border: 1px solid var(--mbb-border);
    border-radius: 22px;
    padding: 48px 40px;
    box-shadow: 0 12px 40px rgba(90,107,79,0.10);
}
.mbb-paywall-hero {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--mbb-border);
}
.mbb-paywall-emoji {
    display: inline-block;
    font-size: 56px;
    line-height: 1;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(194,138,0,0.15) 0%, rgba(232,169,29,0.15) 100%);
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mbb-paywall-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--mbb-accent-strong);
    margin: 0 0 12px;
}
.mbb-paywall-title {
    margin: 0 0 16px !important;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2.3rem) !important;
    line-height: 1.2 !important;
    color: var(--mbb-text);
}
.mbb-paywall-subtitle {
    color: var(--mbb-text-soft);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
    font-size: 1rem;
}
.mbb-paywall-subtitle strong { color: var(--mbb-text); }

.mbb-paywall-section-title {
    margin: 24px 0 18px !important;
    font-size: 1.2rem !important;
    color: var(--mbb-accent-strong) !important;
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: 'Poppins', system-ui, sans-serif !important;
}
.mbb-paywall-section-title small {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--mbb-text-soft);
}

.mbb-paywall-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin-bottom: 16px;
}
.mbb-paywall-plan {
    position: relative;
    background: var(--mbb-bg);
    border: 1.5px solid var(--mbb-border);
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all 0.25s ease;
}
.mbb-paywall-plan:hover {
    transform: translateY(-4px);
    border-color: var(--mbb-accent);
    box-shadow: 0 14px 36px rgba(90,107,79,0.14);
}
.mbb-paywall-plan--featured {
    border-color: var(--mbb-accent-strong);
    background: linear-gradient(180deg, rgba(122,139,111,0.05) 0%, var(--mbb-bg) 60%);
}
.mbb-paywall-plan-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: linear-gradient(135deg, #C28A00 0%, #E8A91D 100%);
    color: #fff;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(194,138,0,0.30);
}
.mbb-paywall-plan-label {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mbb-text);
}
.mbb-paywall-plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.mbb-paywall-plan-amount {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--mbb-accent-strong);
    line-height: 1;
}
.mbb-paywall-plan-period {
    color: var(--mbb-text-soft);
    font-size: 0.92rem;
    font-weight: 500;
}
.mbb-paywall-plan-equiv {
    margin: -6px 0 0;
    font-size: 0.86rem;
    color: var(--mbb-text-soft);
}
.mbb-paywall-plan-equiv strong { color: var(--mbb-accent-strong); }
.mbb-paywall-plan-feats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.92rem;
    color: var(--mbb-text);
    flex: 1;
}
.mbb-paywall-plan-feats li {
    line-height: 1.45;
    color: var(--mbb-text);
}
.mbb-paywall-cta {
    background: var(--mbb-accent) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 14px 22px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-top: auto !important;
    transition: all 0.2s ease !important;
    display: block !important;
    text-decoration: none !important;
}
.mbb-paywall-cta:hover {
    background: var(--mbb-accent-strong) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(122,139,111,0.30) !important;
}
.mbb-paywall-cta--featured {
    background: linear-gradient(135deg, var(--mbb-accent-strong) 0%, var(--mbb-accent) 100%) !important;
}

/* PACKS spécifiques */
.mbb-paywall-pack {
    border-color: rgba(194,138,0,0.30);
    background: linear-gradient(180deg, rgba(255,248,230,0.50) 0%, var(--mbb-bg) 60%);
}
.mbb-paywall-pack:hover { border-color: #C28A00; }
.mbb-paywall-pack .mbb-paywall-plan-amount { color: #C28A00; }
.mbb-paywall-pack-progs {
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.86rem;
}
.mbb-paywall-pack-progs li { padding: 2px 0; }
.mbb-paywall-pack-lifetime {
    margin: 0;
    font-size: 0.88rem;
    color: #8A6A00;
    font-weight: 700;
    text-align: center;
    background: rgba(255,248,230,0.7);
    padding: 8px 12px;
    border-radius: 999px;
}
.mbb-paywall-pack .mbb-paywall-cta {
    background: linear-gradient(135deg, #C28A00 0%, #E8A91D 100%) !important;
}

.mbb-paywall-foot {
    text-align: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--mbb-border);
    color: var(--mbb-text-soft);
}

/* Dark mode adaptations */
[data-theme="dark"] .mbb-paywall-card {
    background: var(--mbb-bg-card);
    border-color: var(--mbb-border);
}
[data-theme="dark"] .mbb-paywall-plan { background: rgba(168,200,232,0.04); }
[data-theme="dark"] .mbb-paywall-pack { background: rgba(232,169,29,0.06); }
[data-theme="dark"] .mbb-paywall-pack-progs { background: rgba(0,0,0,0.20); }
[data-theme="dark"] .mbb-paywall-pack-lifetime { background: rgba(232,169,29,0.18); color: #FFD580; }

/* Mobile : pile verticale */
@media (max-width: 768px) {
    .mbb-paywall-overlay { padding: 32px 14px 48px; }
    .mbb-paywall-card { padding: 28px 20px; border-radius: 18px; }
    .mbb-paywall-hero { margin-bottom: 28px; padding-bottom: 24px; }
    .mbb-paywall-emoji { width: 72px; height: 72px; font-size: 40px; margin-bottom: 12px; }
    .mbb-paywall-title { font-size: 1.5rem !important; }
    .mbb-paywall-subtitle { font-size: 0.92rem; }
    .mbb-paywall-plans { grid-template-columns: 1fr; gap: 16px; }
    .mbb-paywall-plan { padding: 22px 18px; }
    .mbb-paywall-plan-amount { font-size: 2rem; }
}

/* === INTEGRATION INTELLIGENTE PALETTE SAGE — DARK MODE ===
   Charte user : "Vert sauge doux #7A8B6F : Boutons, accents, navigation".
   En dark mode, #7A8B6F est trop sombre sur fond #1A1A2E → on utilise
   #7A8B6F (sage clair) pour les boutons + texte sombre #1A1A2E pour contraste.
   Le vert foncé #5A6B4F est réservé aux hovers (assombrir). */

/* Boutons principaux : sage clair + texte sombre lisible */
html[data-theme="dark"] body:not(.wp-admin) .mbb-btn,
html[data-theme="dark"] body:not(.wp-admin) .mbb-btn-lg {
    background: #7A8B6F !important;
    color: #5A6B4E !important;
    border: 0 !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-btn:hover,
html[data-theme="dark"] body:not(.wp-admin) .mbb-btn-lg:hover {
    background: #FAF7F2 !important;
    color: #5A6B4E !important;
    transform: translateY(-1px);
}

/* Header / nav : fond carte + texte clair, lien actif en sage clair */
html[data-theme="dark"] body:not(.wp-admin) .mbb-header {
    background: #5A6B4F !important; /* vert fonce palette (demande user 27/05) — pas sauge */
    border-bottom: 1px solid rgba(245, 240, 232, 0.12) !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-nav a {
    color: #FAF7F2 !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-nav a:hover,
html[data-theme="dark"] body:not(.wp-admin) .mbb-nav a.is-active {
    color: #FAF7F2 !important;
}

/* Titres : sage TRÈS clair pour bon contraste sur fond gris foncé */
html[data-theme="dark"] body:not(.wp-admin) h1,
html[data-theme="dark"] body:not(.wp-admin) h2,
html[data-theme="dark"] body:not(.wp-admin) h3,
html[data-theme="dark"] body:not(.wp-admin) .mbb-hero-title {
    color: #FFFFFF !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-hero-eyebrow {
    color: #FAF7F2 !important;
}

/* Cards : fond #7A8B6F (plus clair que bg) + border sage subtile */
html[data-theme="dark"] body:not(.wp-admin) .mbb-card {
    background: #7A8B6F !important;
    border: 1px solid rgba(122, 139, 111, 0.18) !important;
    color: #FFFFFF;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-card:hover {
    border-color: rgba(122, 139, 111, 0.40) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.40);
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-card-body { color: #FAF7F2; }
html[data-theme="dark"] body:not(.wp-admin) .mbb-card h3 a { color: #FFFFFF !important; }
html[data-theme="dark"] body:not(.wp-admin) .mbb-card h3 a:hover { color: #FAF7F2 !important; }

/* Tags : sage clair sur fond carte */
html[data-theme="dark"] body:not(.wp-admin) .mbb-tag {
    background: rgba(122, 139, 111, 0.20) !important;
    color: #FAF7F2 !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-tag-free {
    background: #7A8B6F !important;
    color: #5A6B4E !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-tag-premium {
    background: linear-gradient(135deg, #8A6A00 0%, #C28A00 100%) !important;
    color: #FFFFFF !important;
}

/* Paywall page : adapter à la palette sage dark (vert très foncé, pas gris violet) */
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-overlay {
    background: rgba(47, 61, 42, 0.85) !important; /* #2F3D2A translucide */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-card {
    background: #7A8B6F !important;
    border-color: rgba(122, 139, 111, 0.18) !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-title {
    color: #FFFFFF !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-subtitle {
    color: #FAF7F2 !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-eyebrow {
    color: #FAF7F2 !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-plan {
    background: rgba(122, 139, 111, 0.06) !important;
    border-color: rgba(122, 139, 111, 0.22) !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-plan:hover {
    border-color: #7A8B6F !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-plan-label,
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-plan-feats li {
    color: #FFFFFF !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-plan-amount {
    color: #FAF7F2 !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-plan-period,
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-plan-equiv {
    color: #FAF7F2 !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-section-title {
    color: #FAF7F2 !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-section-title small {
    color: #FAF7F2 !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-cta {
    background: #7A8B6F !important;
    color: #5A6B4E !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-cta:hover {
    background: #FAF7F2 !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-pack {
    background: rgba(232,169,29,0.08) !important;
    border-color: rgba(232,169,29,0.30) !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-pack-progs {
    background: rgba(0,0,0,0.30) !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-pack-lifetime {
    background: rgba(232,169,29,0.20) !important;
    color: #F2D580 !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-paywall-pack .mbb-paywall-cta {
    background: linear-gradient(135deg, #C28A00 0%, #E8A91D 100%) !important;
    color: #FFFFFF !important;
}

/* Footer : MEME couleur que le header (vert foncé palette #5A6B4F) */
html[data-theme="dark"] body:not(.wp-admin) .mbb-footer {
    background: #5A6B4F !important; /* vert fonce palette exact */
    border-top: 1px solid rgba(245, 240, 232, 0.20) !important;
    color: #FAF7F2;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-footer a {
    color: #FAF7F2 !important;
}

/* Inputs : fond légèrement plus sombre + border sage */
html[data-theme="dark"] body:not(.wp-admin) input[type="text"],
html[data-theme="dark"] body:not(.wp-admin) input[type="email"],
html[data-theme="dark"] body:not(.wp-admin) input[type="password"],
html[data-theme="dark"] body:not(.wp-admin) input[type="search"],
html[data-theme="dark"] body:not(.wp-admin) textarea,
html[data-theme="dark"] body:not(.wp-admin) select {
    background: #5A6B4E !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(122, 139, 111, 0.25) !important;
}
html[data-theme="dark"] body:not(.wp-admin) input:focus,
html[data-theme="dark"] body:not(.wp-admin) textarea:focus {
    border-color: #7A8B6F !important;
    outline: 2px solid rgba(122, 139, 111, 0.25);
}

/* CTA banner garde sa palette (gradient sage standard) */
html[data-theme="dark"] body:not(.wp-admin) .mbb-cta-banner {
    background: linear-gradient(135deg, #5A6B4E 0%, #7A8B6F 100%) !important;
}

/* === MODAL DE CONFIRMATION MODERNE (réutilisable) ===
   Remplace les confirm() natifs du navigateur par un design cohérent MBB.
   Classes : .mbb-confirm-overlay > .mbb-confirm-card avec icon + titre + actions */
.mbb-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.mbb-confirm-overlay.is-open { display: flex; animation: mbb-confirm-fade-in 0.2s ease; }
@keyframes mbb-confirm-fade-in { from { opacity: 0; } to { opacity: 1; } }
.mbb-confirm-card {
    background: var(--mbb-bg-card, #fff);
    border-radius: 18px;
    padding: 36px 32px 28px;
    max-width: 480px;
    width: 100%;
    position: relative;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30);
    animation: mbb-confirm-pop-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mbb-confirm-pop-in {
    from { opacity: 0; transform: scale(0.92) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.mbb-confirm-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0,0,0,0.08);
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: var(--mbb-text);
    transition: all 0.2s ease;
}
.mbb-confirm-close:hover { background: rgba(0,0,0,0.18); transform: rotate(90deg); }
.mbb-confirm-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 14px;
    background: linear-gradient(135deg, rgba(220, 60, 60, 0.12) 0%, rgba(255, 100, 100, 0.12) 100%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mbb-confirm-title {
    margin: 0 0 12px !important;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 1.35rem !important;
    color: var(--mbb-text) !important;
}
.mbb-confirm-text {
    color: var(--mbb-text-soft);
    line-height: 1.5;
    margin: 0 0 24px;
    font-size: 0.96rem;
}
.mbb-confirm-text strong { color: #C00; }
.mbb-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.mbb-confirm-actions .mbb-btn { flex: 1; min-width: 140px; max-width: 220px; }
.mbb-btn-ghost {
    background: rgba(0,0,0,0.06) !important;
    color: var(--mbb-text) !important;
    border: 0 !important;
}
.mbb-btn-ghost:hover { background: rgba(0,0,0,0.12) !important; }
.mbb-btn-danger {
    background: linear-gradient(135deg, #C00 0%, #E63946 100%) !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 700 !important;
}
.mbb-btn-danger:hover {
    background: linear-gradient(135deg, #A00 0%, #C00 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(200, 0, 0, 0.30);
}
.mbb-btn-danger:disabled { opacity: 0.7; cursor: wait; }

/* Dark mode adaptation */
html[data-theme="dark"] .mbb-confirm-card {
    background: #7A8B6F;
    border: 1px solid rgba(122, 139, 111, 0.20);
}
html[data-theme="dark"] .mbb-confirm-close {
    background: rgba(255,255,255,0.10);
    color: #fff;
}
html[data-theme="dark"] .mbb-btn-ghost {
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
}
html[data-theme="dark"] .mbb-btn-ghost:hover { background: rgba(255,255,255,0.18) !important; }

/* Mobile : bottom-sheet */
@media (max-width: 600px) {
    .mbb-confirm-overlay { align-items: flex-end; padding: 0; }
    .mbb-confirm-card {
        max-width: 100%;
        border-radius: 18px 18px 0 0;
        padding: 28px 22px calc(20px + env(safe-area-inset-bottom, 0px));
    }
    .mbb-confirm-actions { flex-direction: column-reverse; }
    .mbb-confirm-actions .mbb-btn { max-width: 100%; }
}

/* === MODAL PAYWALL INLINE (sur /programmes/ archive) === */
.mbb-paywall-modal-inline {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(5px);
    z-index: 99998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}
.mbb-paywall-modal-inline.is-open { display: flex; animation: mbb-confirm-fade-in 0.2s ease; }
.mbb-paywall-modal-card {
    background: var(--mbb-bg-card, #fff);
    border-radius: 22px;
    max-width: 920px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 40px 36px;
    position: relative;
    box-shadow: 0 24px 70px rgba(0,0,0,0.40);
    animation: mbb-confirm-pop-in 0.30s cubic-bezier(0.16, 1, 0.3, 1);
}
.mbb-paywall-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0,0,0,0.10);
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    color: var(--mbb-text);
    z-index: 5;
    transition: all 0.2s ease;
}
.mbb-paywall-modal-close:hover { background: rgba(0,0,0,0.20); transform: rotate(90deg); }
/* Card locked : curseur pointer + indication hover qu'un modal va s'ouvrir */
.mbb-card.mbb-card-locked { cursor: pointer; }
.mbb-card.mbb-card-locked a { cursor: pointer; }
@media (max-width: 768px) {
    .mbb-paywall-modal-inline { padding: 0; align-items: flex-end; }
    .mbb-paywall-modal-card { border-radius: 18px 18px 0 0; padding: 28px 22px; max-height: 92vh; }
}
html[data-theme="dark"] .mbb-paywall-modal-card {
    background: #7A8B6F;
    border: 1px solid rgba(122, 139, 111, 0.20);
}
html[data-theme="dark"] .mbb-paywall-modal-close {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

/* === FORCE 3 cards par ligne sur écrans >= 900px (au lieu de auto-fit qui collapse à 2) === */
@media (min-width: 900px) {
    body:not(.wp-admin) .mbb-mp-grid,
    body:not(.wp-admin) .mbb-grid.mbb-grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 899px) and (min-width: 600px) {
    body:not(.wp-admin) .mbb-mp-grid,
    body:not(.wp-admin) .mbb-grid.mbb-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 599px) {
    body:not(.wp-admin) .mbb-mp-grid,
    body:not(.wp-admin) .mbb-grid.mbb-grid-3 {
        grid-template-columns: 1fr !important;
    }
}

/* === FIX espaces /pratiques/ et /bibliotheque/ : compactage agressif === */
body:not(.wp-admin) .mbb-section-biblio-hero,
body:not(.wp-admin) .mbb-section-pratiques-hero {
    padding: 24px 0 12px !important;
}
body:not(.wp-admin) .mbb-section-biblio-hero .mbb-container,
body:not(.wp-admin) .mbb-section-pratiques-hero .mbb-container {
    padding: 24px 24px 12px !important;
}
body:not(.wp-admin) .mbb-section-biblio-hero h1,
body:not(.wp-admin) .mbb-section-pratiques-hero h1 {
    margin: 6px 0 8px !important;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important;
}
body:not(.wp-admin) .mbb-section-biblio-hero p,
body:not(.wp-admin) .mbb-section-pratiques-hero p {
    margin: 0 !important;
}

/* === Bouton corbeille historique : juste icône, pas de texte === */
.mbb-hist-clear.mbb-hist-clear-icon {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    transition: all 0.2s ease;
}
.mbb-hist-clear.mbb-hist-clear-icon:hover {
    background: rgba(200,0,0,0.10) !important;
    transform: scale(1.08);
}

/* === Daily-unlock : style des séances verrouillées par jour === */
.mbb-module-item.is-locked-day {
    opacity: 0.55;
    background: linear-gradient(135deg, rgba(122,139,111,0.04) 0%, rgba(245,240,232,0.40) 100%);
    border: 1px dashed rgba(122,139,111,0.30) !important;
}
.mbb-module-item.is-locked-day .mbb-module-num {
    background: rgba(122,139,111,0.20) !important;
    color: rgba(58,58,58,0.50) !important;
}
.mbb-module-item.is-locked-day h3 a {
    color: var(--mbb-text-soft, #6B6B6B) !important;
    pointer-events: none;
    text-decoration: none;
}
.mbb-locked-day {
    color: #5A6B4F;
    font-weight: 600;
    font-size: 0.92rem;
}
.mbb-locked-day small {
    color: var(--mbb-text-soft, #6B6B6B);
    font-weight: 500;
    margin-left: 4px;
}
.mbb-btn-locked {
    background: rgba(122,139,111,0.20) !important;
    color: rgba(58,58,58,0.55) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    border: 0 !important;
}
.mbb-btn-locked:hover {
    background: rgba(122,139,111,0.20) !important;
    transform: none !important;
}
[data-theme="dark"] .mbb-module-item.is-locked-day {
    background: rgba(122, 139, 111, 0.04);
    border-color: rgba(122, 139, 111, 0.30) !important;
}
[data-theme="dark"] .mbb-locked-day { color: var(--mbb-accent-strong); }
[data-theme="dark"] .mbb-locked-day small { color: var(--mbb-text-soft); }

/* ============================================================
   DARK MODE — OVERRIDE FINAL : inversion stricte palette user.
   Light  : titre #5A6B4F vert foncé, fond #F5F0E8 beige
   Dark   : titre #F5F0E8 beige,      fond #18260d vert nuit (var --mbb-bg)
   Force tous les hex hardcodés qui pourraient casser le contraste.
   ============================================================ */
html[data-theme="dark"] body:not(.wp-admin) {
    background-color: var(--mbb-bg) !important; /* #18260d vert nuit (demande user 27/05 v2) */
    color: #FAF7F2;
}
/* Page INSCRIPTION : fond VERT FONCE #5A6B4F dans LES DEUX modes (demande user :
   "vert fonce pas beige"). Titre + sous-titre en beige clair pour rester lisibles
   sur le vert. La carte du formulaire reste claire (contraste OK). */
body.page-template-page-inscription {
    background-color: #5A6B4F !important;
}
html[data-theme="dark"] body.page-template-page-inscription:not(.wp-admin) {
    background-color: #5A6B4F !important;
}
body.page-template-page-inscription .mbb-main header h1,
body.page-template-page-inscription .mbb-main header p {
    color: #F5F0E8 !important;
}
/* Titres : tous en BEIGE (palette --mbb-accent-strong) sauf hero CTA banner */
html[data-theme="dark"] body:not(.wp-admin) h1,
html[data-theme="dark"] body:not(.wp-admin) h2,
html[data-theme="dark"] body:not(.wp-admin) h3,
html[data-theme="dark"] body:not(.wp-admin) h4,
html[data-theme="dark"] body:not(.wp-admin) h5,
html[data-theme="dark"] body:not(.wp-admin) h6 {
    color: #F5F0E8 !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-cta-banner h2,
html[data-theme="dark"] body:not(.wp-admin) .mbb-cta-banner * { color: #FFFFFF !important; }
/* Body text + paragraphes : blanc cassé */
html[data-theme="dark"] body:not(.wp-admin) p,
html[data-theme="dark"] body:not(.wp-admin) li,
html[data-theme="dark"] body:not(.wp-admin) span:not(.mbb-tag):not(.mbb-cat-count):not(.mbb-fav-icon):not(.mbb-smiley-emoji),
html[data-theme="dark"] body:not(.wp-admin) div:not([class*="mbb-cta"]) > p {
    color: #FAF7F2 !important;
}
/* Cards et fonds blancs : passent en sauge (sauce var --mbb-bg-card) */
html[data-theme="dark"] body:not(.wp-admin) .mbb-card,
html[data-theme="dark"] body:not(.wp-admin) .mbb-card-article,
html[data-theme="dark"] body:not(.wp-admin) .mbb-card-programme,
html[data-theme="dark"] body:not(.wp-admin) .mbb-card-pack,
html[data-theme="dark"] body:not(.wp-admin) [style*="background:#fff"]:not(.mbb-tag):not(.mbb-fav-btn),
html[data-theme="dark"] body:not(.wp-admin) [style*="background: #fff"]:not(.mbb-tag):not(.mbb-fav-btn),
html[data-theme="dark"] body:not(.wp-admin) [style*="background:#FAF7F2"]:not(.mbb-tag),
html[data-theme="dark"] body:not(.wp-admin) [style*="background: #FAF7F2"]:not(.mbb-tag) {
    background-color: #7A8B6F !important;
    color: #FAF7F2 !important;
    border-color: rgba(245, 240, 232, 0.20) !important;
}
/* Force textes sombres hardcodés (color: #1A1A2E ou #3D3D3D ou #2A2A45) en blanc cassé */
html[data-theme="dark"] body:not(.wp-admin) [style*="color:#1A1A2E"]:not(.mbb-tag),
html[data-theme="dark"] body:not(.wp-admin) [style*="color: #1A1A2E"]:not(.mbb-tag),
html[data-theme="dark"] body:not(.wp-admin) [style*="color:#3D3D3D"]:not(.mbb-tag),
html[data-theme="dark"] body:not(.wp-admin) [style*="color: #3D3D3D"]:not(.mbb-tag),
html[data-theme="dark"] body:not(.wp-admin) [style*="color:#2A2A45"],
html[data-theme="dark"] body:not(.wp-admin) [style*="color: #2A2A45"] {
    color: #FAF7F2 !important;
}
/* Tags Premium en dark : fond beige translucide + texte beige clair */
html[data-theme="dark"] body:not(.wp-admin) .mbb-tag-premium {
    background: rgba(245, 240, 232, 0.18) !important;
    color: #F5F0E8 !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-tag-free {
    background: rgba(245, 240, 232, 0.18) !important;
    color: #F5F0E8 !important;
}
/* Sections "mbb-section" qui ont parfois un fond clair hardcodé */
html[data-theme="dark"] body:not(.wp-admin) .mbb-section,
html[data-theme="dark"] body:not(.wp-admin) main#main {
    background-color: #5A6B4E !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-section-bg-soft,
html[data-theme="dark"] body:not(.wp-admin) [class*="bg-soft"] {
    background-color: rgba(122, 139, 111, 0.50) !important;
}
/* Liens : beige clair */
html[data-theme="dark"] body:not(.wp-admin) a:not(.mbb-btn):not(.mbb-tag):not(.mbb-fav-btn):not(.mbb-link-arrow):not(.mbb-card-thumb-link) {
    color: #F5F0E8;
}
html[data-theme="dark"] body:not(.wp-admin) a:not(.mbb-btn):hover { color: #FAF7F2; }
/* Inputs en dark : fond sauge translucide, texte blanc cassé */
html[data-theme="dark"] body:not(.wp-admin) input[type="text"],
html[data-theme="dark"] body:not(.wp-admin) input[type="email"],
html[data-theme="dark"] body:not(.wp-admin) input[type="password"],
html[data-theme="dark"] body:not(.wp-admin) input[type="search"],
html[data-theme="dark"] body:not(.wp-admin) textarea,
html[data-theme="dark"] body:not(.wp-admin) select {
    background-color: rgba(245, 240, 232, 0.10) !important;
    color: #FAF7F2 !important;
    border-color: rgba(245, 240, 232, 0.25) !important;
}
html[data-theme="dark"] body:not(.wp-admin) ::placeholder { color: rgba(250, 247, 242, 0.55) !important; }
/* Footer en dark : reste sauge (palette) */
html[data-theme="dark"] body:not(.wp-admin) .mbb-footer { background-color: #5A6B4F !important; }
/* Buttons primaires en dark : beige sur sauge */
html[data-theme="dark"] body:not(.wp-admin) .mbb-btn:not(.mbb-btn-ghost) {
    background-color: #F5F0E8 !important;
    color: #5A6B4E !important;
}
html[data-theme="dark"] body:not(.wp-admin) .mbb-btn:not(.mbb-btn-ghost):hover {
    background-color: #FAF7F2 !important;
    color: #3D3D3D !important;
}

/* === Bouton profil header (#mbb-user-menu-btn) — vert foncé palette === */
#mbb-user-menu-btn {
    background-color: #5A6B4F !important;
    color: #FAF7F2 !important;
    border-color: transparent !important;
    font-weight: 600 !important;
}
#mbb-user-menu-btn:hover,
#mbb-user-menu-btn:focus {
    background-color: #3F5A2F !important;
    color: #FFFFFF !important;
}
#mbb-user-menu-btn span { color: inherit !important; }
[data-theme="dark"] #mbb-user-menu-btn {
    background-color: #5A6B4E !important;
    color: #FAF7F2 !important;
}

/* Dark mode : icône ▶ / ↻ + label dans le cercle "Continuer" = BEIGE palette */
html[data-theme="dark"] body:not(.wp-admin) .mbb-hist-play-icon,
html[data-theme="dark"] body:not(.wp-admin) .mbb-hist-play-label,
html[data-theme="dark"] body:not(.wp-admin) .mbb-hist-play-overlay,
html[data-theme="dark"] body:not(.wp-admin) .mbb-hist-play-overlay * {
    color: #F5F0E8 !important;
}

/* === Profil pill modernisation (icone SVG, chevron rotation, hover lift) === */
#mbb-user-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 14px 8px 8px !important;
    border-radius: 999px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
}
#mbb-user-menu-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.16) !important;
}
#mbb-user-menu-btn .mbb-user-pill-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: #FAF7F2;
    flex-shrink: 0;
}
#mbb-user-menu-btn .mbb-user-pill-avatar svg { display: block; }
#mbb-user-menu-btn .mbb-user-pill-name {
    font-weight: 600;
    line-height: 1;
}
#mbb-user-menu-btn .mbb-user-pill-chevron {
    transition: transform 0.22s ease;
    opacity: 0.85;
    margin-left: 2px;
}
#mbb-user-menu-btn[aria-expanded="true"] .mbb-user-pill-chevron {
    transform: rotate(180deg);
}
#mbb-user-menu-btn:hover .mbb-user-pill-avatar {
    background: rgba(255,255,255,0.28);
}

/* Dropdown : entree animee */
.mbb-user-dropdown {
    transform-origin: top right;
    animation: mbb-user-dd-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes mbb-user-dd-in {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.mbb-user-dropdown a {
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease !important;
}
.mbb-user-dropdown a:hover {
    background: rgba(122, 139, 111, 0.10);
    transform: translateX(2px);
}

/* ====================================================================
   RESPONSIVE MOBILE — iPhone 12 Pro (390x844) + tout viewport mobile
   Regles globales : 2 cards par ligne sur ALL grids, 3 compteurs par ligne.
   Tres haut specificity (html body) pour battre toute regle plus ancienne.
   ==================================================================== */
@media (max-width: 768px) {
    /* TOUTES les grids cards en 2 cols (programmes, pratiques, blog, biblio, etc.) */
    html body:not(.wp-admin) .mbb-grid-2,
    html body:not(.wp-admin) .mbb-grid-3,
    html body:not(.wp-admin) .mbb-grid-4,
    html body:not(.wp-admin) .mbb-blog-grid,
    html body:not(.wp-admin) .mbb-pratiques-grid,
    html body:not(.wp-admin) .mbb-mp-grid,
    html body:not(.wp-admin) .mbb-biblio-grid,
    html body:not(.wp-admin) .mbb-fr-packs-grid,
    html body:not(.wp-admin) .mbb-hist-grid,
    html body:not(.wp-admin) .mbb-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    /* Compteurs / KPI / stats : 3 par ligne (compacts) */
    html body:not(.wp-admin) .mbb-stats-grid,
    html body:not(.wp-admin) .mbb-kpi-grid,
    html body:not(.wp-admin) .mbb-counters,
    html body:not(.wp-admin) .mbb-hist-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    /* Cards interieur compact mobile */
    html body:not(.wp-admin) .mbb-card-body { padding: 14px 12px !important; }
    html body:not(.wp-admin) .mbb-card-body h3 { font-size: 0.98rem !important; line-height: 1.25 !important; }
    html body:not(.wp-admin) .mbb-card-body p { font-size: 0.86rem !important; line-height: 1.4 !important; }
    html body:not(.wp-admin) .mbb-tag { font-size: 0.7rem !important; padding: 2px 8px !important; }
    html body:not(.wp-admin) .mbb-link-arrow,
    html body:not(.wp-admin) .mbb-btn-sm { font-size: 0.86rem !important; padding: 6px 12px !important; }
}

/* iPhone 12 Pro range (390-430px) */
@media (max-width: 430px) {
    html body:not(.wp-admin) .mbb-grid-2,
    html body:not(.wp-admin) .mbb-grid-3,
    html body:not(.wp-admin) .mbb-grid-4,
    html body:not(.wp-admin) .mbb-blog-grid,
    html body:not(.wp-admin) .mbb-pratiques-grid,
    html body:not(.wp-admin) .mbb-mp-grid,
    html body:not(.wp-admin) .mbb-biblio-grid,
    html body:not(.wp-admin) .mbb-fr-packs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    /* Container plus serre */
    html body:not(.wp-admin) .mbb-container { padding-left: 14px !important; padding-right: 14px !important; }
    /* Hero ultra compact */
    html body:not(.wp-admin) .mbb-section-archive-hero .mbb-container { padding-top: 18px !important; padding-bottom: 14px !important; }
    html body:not(.wp-admin) .mbb-hero-eyebrow { font-size: 0.7rem !important; letter-spacing: 0.10em !important; }
    html body:not(.wp-admin) h1 { font-size: clamp(1.4rem, 5vw, 1.7rem) !important; }
    /* Touch targets confort */
    html body:not(.wp-admin) a, html body:not(.wp-admin) button { min-height: 44px; }
    /* Safe area iOS (notch top + home indicator bottom) */
    html body:not(.wp-admin) .mbb-header {
        padding-top: env(safe-area-inset-top, 0px) !important;
    }
    html body:not(.wp-admin) .mbb-footer,
    html body:not(.wp-admin) .mbb-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
}

/* Plus petit que iPhone SE (≤375px) — ajuster fonts */
@media (max-width: 380px) {
    html body:not(.wp-admin) .mbb-card-body { padding: 12px 10px !important; }
    html body:not(.wp-admin) .mbb-card-body h3 { font-size: 0.92rem !important; }
    html body:not(.wp-admin) .mbb-stats-grid,
    html body:not(.wp-admin) .mbb-counters { gap: 6px !important; }
}

/* ============================================================
   MOBILE RESPONSIVE — corrections finales d'audit (formulaires)
   Couvre les grilles 2 colonnes inline qui n'avaient pas de
   media query (inscription, mon-profil) + anti-zoom iOS.
   ============================================================ */
@media (max-width: 480px) {
    /* Toute grille inline "1fr 1fr" passe en 1 colonne sur petit ecran.
       L'attribut + !important bat le style inline. */
    html body:not(.wp-admin) [style*="grid-template-columns: 1fr 1fr"],
    html body:not(.wp-admin) [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Inputs/selects/textarea : 16px mini = pas de zoom auto iOS au focus,
       et jamais plus large que l'ecran. */
    html body:not(.wp-admin) input[type="text"],
    html body:not(.wp-admin) input[type="email"],
    html body:not(.wp-admin) input[type="password"],
    html body:not(.wp-admin) input[type="tel"],
    html body:not(.wp-admin) input[type="number"],
    html body:not(.wp-admin) input[type="search"],
    html body:not(.wp-admin) textarea,
    html body:not(.wp-admin) select {
        font-size: 16px !important;
        max-width: 100% !important;
    }
    /* Formulaires : padding interieur reduit pour gagner de la largeur */
    html body:not(.wp-admin) .mbb-register-form,
    html body:not(.wp-admin) .mbb-card form,
    html body:not(.wp-admin) form.mbb-card {
        padding: 20px 16px !important;
    }
    /* Anti-debordement horizontal global (securite) */
    html body:not(.wp-admin) img,
    html body:not(.wp-admin) iframe,
    html body:not(.wp-admin) video,
    html body:not(.wp-admin) table {
        max-width: 100% !important;
    }
}