/*
 Theme Name:   Mademoiselle Bon Plan — Éditorial 2026
 Theme URI:    https://mademoisellebonplan.fr/
 Description:  Thème éditorial autonome de Mademoiselle Bon Plan.
 Author:       Mademoiselle Bon Plan (Gaëlle & Nicolas)
 Version:      4.0.11
 Requires at least: 7.1
 Requires PHP: 8.2
 Text Domain:  mbp
*/

/* ==========================================================================
   1. DESIGN TOKENS & TYPOGRAPHIE GLOBALE
   ========================================================================== */

:root {
    /* Harmonisation native du schéma de couleur (Baseline) */
    color-scheme: light dark;

    --mbp-font-serif: 'Playfair Display', Georgia, serif;
    --mbp-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    --mbp-color-bg: #fcfbf9;
    --mbp-color-surface: #ffffff;
    --mbp-color-surface-soft: #f8f6f1;
    --mbp-color-surface-card: #faf8f5;
    
    --mbp-color-text: #2c3038;
    --mbp-color-text-muted: #5e6b7c;
    --mbp-color-heading: #121824;
    
    --mbp-color-accent: #1e6b45;
    --mbp-color-accent-hover: #144d31;
    --mbp-color-accent-subtle: #ebf5ef;

    /*
     * CANAUX de `--mbp-color-accent`, pour les voiles d'accent.
     *
     * Pourquoi ce jeton : les voiles s'écrivaient `rgba(66, 184, 131, .08 / .16 /
     * .25 / .35)` en dur dans huit blocs sombres. Quatre alphas distincts, qu'aucun
     * jeton ne pouvait porter — `--mbp-color-accent-subtle` n'en couvre qu'un (.14)
     * et vaut un hex OPAQUE en clair, donc non interchangeable avec un rgba.
     * Résultat : changer l'accent laissait huit éléments sur l'ancienne teinte.
     * Consommer via `rgb(var(--mbp-color-accent-rgb) / <alpha>)`.
     */
    --mbp-color-accent-rgb: 30 107 69;

    /*
     * Accent ÉCLAIRCI — pour un survol qui monte en luminosité, pas qui descend.
     *
     * À ne pas confondre avec `--mbp-color-accent-hover`, qui ASSOMBRIT. Le liseré
     * du bouton « remonter en haut » s'éclaircit au survol en sombre (#6eb998,
     * L≈58 %, contre L≈52 % pour l'accent) : le brancher sur `-hover` (L≈46 %)
     * aurait retourné le geste. En clair, aucun composant ne le consomme
     * aujourd'hui ; la valeur est déclarée pour que le jeton ne soit jamais vide.
     */
    --mbp-color-accent-bright: #258354;

    /*
     * APLAT cliquable (boutons pleins, pastille de pagination active, pilule
     * survolée…) — à distinguer de `--mbp-color-accent`, qui ne sert qu'au TEXTE
     * et aux filets.
     *
     * Pourquoi deux jetons : en sombre l'accent devient un vert sauge clair (#59af88),
     * lisible en texte sur fond sombre mais catastrophique en aplat — le blanc y
     * tombe à 2,65:1. Tant que la couleur des boutons vivait dans une liste de
     * sélecteurs recopiant l'aplat à la main, chaque nouveau bouton devait y être
     * ajouté : le CTA du Spotlight ne l'a jamais été et affichait du blanc à
     * 2,5:1. Un bouton qui pointe ce jeton est correct dans les deux modes sans
     * rien avoir à déclarer.
     *
     * Contrastes du blanc posé dessus : 6,47:1 en clair, 5,16:1 en sombre.
     */
    --mbp-color-accent-solid: #1e6b45;

    /*
     * SURVOL d'un aplat d'accent — le pendant de `--mbp-color-accent-solid`.
     *
     * À ne JAMAIS remplacer par `--mbp-color-accent-hover` : celui-ci est le survol
     * du TEXTE et vaut #4c9e79 en sombre, un vert clair sous lequel le blanc tombe
     * à 3,24:1 (seuil AA : 4,5). C'est exactement la confusion que le couple
     * `accent` / `accent-solid` existe pour éviter, et elle se rejoue à l'identique
     * sur les survols : même teinte, même piège, un cran plus loin dans la cascade.
     *
     * La valeur est la même dans les deux modes aujourd'hui ; le jeton existe pour
     * que l'aplat survolé ait un point d'ancrage, pas parce qu'il diverge déjà.
     * Blanc posé dessus : 9,83:1.
     */
    --mbp-color-accent-solid-hover: #144d31;

    /*
     * Couleur du texte posé SUR un aplat d'accent (boutons, pastille de pagination
     * active…). Elle doit basculer avec l'accent : en mode clair l'accent est un vert
     * sombre et le blanc passe à 6,47:1 ; en mode sombre l'accent devient un menthe
     * clair sur lequel le blanc tombe à 2,65:1 — très en dessous du seuil AA de 4,5.
     * Ne jamais écrire « color: #ffffff » en dur sur un fond d'accent.
     */
    --mbp-color-on-accent: #ffffff;
    
    --mbp-color-terracotta: #b44f25;
    --mbp-color-terracotta-subtle: #fcf1eb;
    /*
     * --mbp-color-teal RETIRÉ. Il était déclaré ici et consommé NULLE PART — une seule
     * occurrence dans toute la feuille. Et il n'était pas utilisable : #4a8b9f donne
     * 3,70:1 sur blanc, sous le seuil AA de 4,5, dans le mode même où il était déclaré.
     * Il ne correspondait par ailleurs à aucune couleur du logo (teinte 194°, quand le
     * logo tient en rose 343°, abricot 33° et vert tendre 132°).
     *
     * Ne pas le réintroduire tel quel. Si une troisième couleur de marque est un jour
     * nécessaire, la dériver du logo et la déclarer en COUPLE clair+sombre, comme
     * terracotta. L'analyse complète est conservée hors dépôt (mémoire projet).
     */
    --mbp-color-border: #eae6e0;
    /* Bordure des champs et contours cliquables : 3,2:1 sur blanc, 3,1:1 sur le fond (WCAG 1.4.11).
       --mbp-color-border reste réservé aux filets décoratifs (audit UI/UX du 04/10, P19). */
    --mbp-color-field-border: #8a8f98;
    
    --mbp-radius-sm: 8px;
    --mbp-radius-md: 14px;
    --mbp-radius-lg: 20px;
    --mbp-radius-pill: 9999px;
    
    --mbp-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.04);
    --mbp-shadow-md: 0 6px 22px rgba(0, 0, 0, 0.06);
    --mbp-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.09);
    --mbp-shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.12);
    
    /*
     * « all » demandait au navigateur de surveiller CHAQUE propriété animable, y compris
     * celles qui provoquent un reflow (width, height, margin, top…) et celles qui changent
     * pour des raisons sans rapport avec une intention d'animation — une bascule de classe
     * suffisait alors à déclencher une transition parasite.
     *
     * Relevé de ce que le thème anime réellement dans ses états :hover / :focus / :active :
     * color ×67, background ×52, transform ×39, border-color ×28, box-shadow ×26,
     * opacity ×2, filter ×1 — plus trois propriétés de mise en page, padding-left ×5,
     * gap ×1 et left ×1. Ces trois-là sont conservées explicitement : les exclure aurait
     * rendu instantanés sept effets de survol existants. Le rendu est donc identique, mais
     * la surveillance passe de « tout » à dix propriétés nommées.
     */
    --mbp-transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        filter 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        gap 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    background-color: var(--mbp-color-bg);
    color: var(--mbp-color-text);
    font-family: var(--mbp-font-sans);
    font-size: 15px;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /*
     * RE-ROUTAGE DES POLICES DU PARENT — la condition qui rend `penci-fonts`
     * réellement inutile (voir functions.php, `mbp_alleger_assets_parent`).
     *
     * Soledad ne code pas ses familles en dur : tout son CSS passe par
     * `--pcbody-font` et `--pchead-font`, que la feuille inline du Customizer
     * (`#penci-custom-style`) fixe à 'Open Sans' et 'PT Serif'. Tant que ces deux
     * variables pointaient les polices du parent, DÉRÉFÉRENCER la requête Google
     * Fonts n'aurait pas supprimé la dépendance : elle aurait seulement fait
     * tomber le texte concerné sur une fonte système de repli.
     *
     * Les rebrancher sur les jetons maison route en une déclaration TOUT ce que
     * le parent dessine (module de commentaires, titres de contenu des pages,
     * bandeaux de widgets…) vers Playfair et Jakarta — au lieu de traquer les
     * sélecteurs un à un et d'en oublier. Le relevé avant correction trouvait
     * encore PT Serif sur 17 nœuds d'un article et 31 d'une page.
     *
     * `!important` est nécessaire : la feuille inline du Customizer est imprimée
     * APRÈS les feuilles de style et vise `body`, à spécificité égale.
     */
    --pcbody-font: var(--mbp-font-sans) !important;
    --pchead-font: var(--mbp-font-serif) !important;
}

/* Balance headings and paragraphs across the active templates. */
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.mbp-single-title,
.mbp-top-picks-title,
.mbp-section-title,
.penci-entry-title,
.mbp-post-title,
.mbp-widget-heading{
    text-wrap: balance;
}

p,
.entry-content p,
.mbp-entry-content p,
.mbp-single-article p,
.mbp-post-excerpt{
    text-wrap: pretty;
}
/* ==========================================================================
   2. TOP-BAR & EN-TÊTE HAUTE COUTURE
   ========================================================================== */

/* Sélecteur de Langue Polylang Compact */
.mbp-lang-dropdown {
    position: relative;
}

.mbp-lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--mbp-color-surface);
    border: 1px solid var(--mbp-color-border);
    border-radius: var(--mbp-radius-sm);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 6px 0;
    margin: 0;
    min-width: 130px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
}

/* Pont invisible comblant l'interstice pour assurer un survol fluide sans fermeture intempestive */
.mbp-lang-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -8px;
    right: -8px;
    height: 12px;
    display: block;
}

/* Pas de :focus-within : au clavier, Tab ouvrait le menu sans le demander (6 arrêts de plus par page, Échap inopérant,
   aria-expanded faux). L'ouverture clavier passe par Entrée/Espace sur le bouton (.is-open, js/site-shell.js). */
.mbp-lang-dropdown:hover .mbp-lang-menu,
.mbp-lang-dropdown.is-open .mbp-lang-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    /* Ouverture immédiate : avec la transition de visibilité, un Tab juste après Entrée sautait encore les liens. */
    transition: none;
}

.mbp-lang-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mbp-color-heading);
    text-decoration: none;
    transition: var(--mbp-transition);
}

.mbp-lang-menu li a:hover,
.mbp-lang-menu li.active a {
    background: var(--mbp-color-accent-subtle);
    color: var(--mbp-color-accent);
}

/* Visibility of the two appearance icons; control styles live in navigation-2026.css. */
.mbp-dm-icon-sun {
    display: none;
}
.mbp-dm-icon-moon {
    display: inline-flex;
} html[data-theme="dark"] .mbp-dm-icon-sun {
    display: inline-flex;
} html[data-theme="dark"] .mbp-dm-icon-moon {
    display: none;
}

/* Masthead geometry lives in css/editorial-2026.css. */

/* ==========================================================================
   3. MENU PRINCIPAL HAUTE COUTURE & RECHERCHE
   ========================================================================== */

/* Navigation geometry and stacking live in css/navigation-2026.css. */
/* Même raison : le conteneur d'en-tête ne doit jamais être dépassé par l'article. */
.penci-header-wrap {
    z-index: 9999 !important;
}

#navigation #main-nav,
#navigation .main-nav-class {
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
}

/* Loupe & Module de Recherche Déroulant */
#top-search {
    position: relative !important;
    /* Le parent pose `.pcheader-icon, .top-search-classes { width: 20px }`, jamais
       neutralisé ici : la loupe agrandie à 38px (règle suivante) débordait de 18px et
       sortait du bord droit de .mbp-nav-actions-right. `auto` fait suivre le contenu.
       Pas de `display: flex` : le parent le bat de toute façon
       (`#navigation.header-5 .top-search-classes`, spécificité 10200 > 10000), et s'il
       passait, la loupe deviendrait un item rétrécissable ramené à 20px. */
    width: auto;
}

#top-search a.search-click {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    cursor: pointer;
}

/* Header search panel styles are owned by css/navigation-2026.css. */

/* Bouton Burger Mobile Haute Couture */
.button-menu-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    color: var(--mbp-color-heading);
    transition: var(--mbp-transition);
    border-radius: var(--mbp-radius-sm);
}

.button-menu-mobile svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    transition: var(--mbp-transition);
}

@media only screen and (max-width: 960px) {
    .button-menu-mobile {
        display: inline-flex;
    }
}

.mbp-badge-category {
    display: inline-block;
    background: var(--mbp-color-accent-subtle);
    color: var(--mbp-color-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--mbp-radius-pill);
    transition: var(--mbp-transition);
    text-decoration: none !important;
}

.mbp-badge-category:hover {
    background: var(--mbp-color-accent-solid);
    color: var(--mbp-color-on-accent);
}

/* ==========================================================================
   5. SECTION CARNETS & INSPIRATIONS (4 UNIVERS)
   ========================================================================== */

.mbp-section-header {
    margin-bottom: 24px;
}

.mbp-section-eyebrow {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mbp-color-accent);
    margin-bottom: 6px;
}

.mbp-section-title {
    font-family: var(--mbp-font-serif);
    font-size: 26px;
    font-weight: 700;
    color: var(--mbp-color-heading);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   7. FLUX PRINCIPAL DES ARTICLES (GRILLE 2 COLONNES)
   ========================================================================== */

.mbp-main-content-wrap {
    padding-bottom: 64px;
}

.mbp-layout-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 44px;
}

.mbp-layout-grid > *,
.mbp-articles-column,
.mbp-sidebar-column,
.mbp-single-main {
    min-width: 0;
    max-width: 100%;
}

.mbp-feed-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.mbp-feed-card {
    background: var(--mbp-color-surface);
    border-radius: var(--mbp-radius-md);
    overflow: hidden;
    box-shadow: var(--mbp-shadow-sm);
    border: 1px solid var(--mbp-color-border);
    transition: var(--mbp-transition);
    display: flex;
    flex-direction: column;
}

.mbp-feed-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mbp-shadow-hover);
}

/* Hauteur retirée : figée à 220px alors que la largeur suit la colonne, la boîte
   atteignait un rapport de 2,17 pour des photos en 3:2 — 31 % de hauteur coupée en
   affichage une colonne. « aspect-ratio: 16 / 10 » (section 15) gouverne désormais. */
.mbp-feed-media {
    position: relative;
    overflow: hidden;
    display: block;
}

.mbp-feed-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.mbp-feed-card:hover .mbp-feed-media img {
    transform: scale(1.025);
}

.mbp-feed-topline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12.5px;
    color: var(--mbp-color-text-muted);
}

.mbp-feed-body {
    padding: 24px 22px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.mbp-feed-title {
    font-family: var(--mbp-font-serif);
    font-size: 19.5px;
    line-height: 1.36;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.mbp-feed-title a {
    color: var(--mbp-color-heading);
    text-decoration: none !important;
    transition: var(--mbp-transition);
}

.mbp-feed-title a:hover {
    color: var(--mbp-color-accent);
}

.mbp-feed-excerpt {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--mbp-color-text-muted);
    margin: 0 0 18px 0;
}

.mbp-feed-cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mbp-color-accent);
    text-decoration: none !important;
    transition: var(--mbp-transition);
}

.mbp-feed-cta svg {
    transition: transform 0.25s ease;
}

.mbp-feed-cta:hover {
    color: var(--mbp-color-accent-hover);
}

.mbp-feed-cta:hover svg {
    transform: translateX(4px);
}

/* Pagination */
.mbp-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.mbp-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--mbp-radius-sm);
    background: var(--mbp-color-surface);
    border: 1px solid var(--mbp-color-border);
    color: var(--mbp-color-heading);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: var(--mbp-transition);
}

.mbp-pagination .page-numbers.current,
.mbp-pagination .page-numbers:hover {
    background: var(--mbp-color-accent-solid);
    border-color: var(--mbp-color-accent);
    color: var(--mbp-color-on-accent);
}

/* ==========================================================================
   8. SIDEBAR ÉDITORIALE (« L'UNIVERS MADEMOISELLE BON PLAN »)
   ========================================================================== */

.mbp-sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.mbp-widget {
    background: var(--mbp-color-surface);
    border: 1px solid var(--mbp-color-border);
    border-radius: var(--mbp-radius-md);
    padding: 28px 24px;
    box-shadow: var(--mbp-shadow-sm);
}

.mbp-widget-heading {
    font-family: var(--mbp-font-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--mbp-color-heading);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mbp-color-accent-subtle);
    position: relative;
}

.mbp-widget-heading:after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--mbp-color-accent);
}

.mbp-about-avatar {
    width: 92px;
    height: 92px;
    margin: 0 auto 16px auto;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    border: 3px solid #ffffff;
}

/* Suggestions de recherche */
.mbp-search-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.mbp-search-pills a {
    background: var(--mbp-color-surface-soft);
    border: 1px solid var(--mbp-color-border);
    color: var(--mbp-color-text);
    padding: 3px 10px;
    border-radius: var(--mbp-radius-pill);
    text-decoration: none;
    transition: var(--mbp-transition);
}

.mbp-search-pills a:hover {
    background: var(--mbp-color-accent-solid);
    border-color: var(--mbp-color-accent);
    color: var(--mbp-color-on-accent);
}

.mbp-news-btn {
    display: inline-block;
    background: var(--mbp-color-accent-solid);
    color: var(--mbp-color-on-accent) !important;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: var(--mbp-radius-pill);
    text-decoration: none !important;
    transition: var(--mbp-transition);
    box-shadow: 0 4px 14px rgba(30, 107, 69, 0.28);
}

/* ==========================================================================
   FORMULAIRE NEWSLETTER EN LIGNE (BREVO, RENDU DANS L'ENCART)
   ==========================================================================
   L'encart proposait un bouton vers /newsletter/ : le visiteur devait changer de
   page avant la moindre saisie. Le formulaire du plugin est désormais rendu sur
   place (voir mbp_render_newsletter_signup()).

   Des trois champs qu'expose Brevo, seul « email » est requis. « Nom » et
   « Prénom » sont MASQUÉS ici — pas supprimés : ils restent dans le DOM et sont
   soumis vides, ce que le gestionnaire accepte. Dans une colonne de 280px, chaque
   champ supplémentaire coûte des inscriptions, et l'encart porte déjà son propre
   titre : celui du formulaire ferait doublon.

   `display: none` plutôt que `visibility` ou un déport hors écran : ces champs ne
   doivent recevoir NI le focus clavier NI la lecture d'écran, puisqu'ils ne sont
   pas demandés. Le honeypot du plugin (brevo_hp_check / brevo_hp_ts) conserve en
   revanche son propre masquage — ne pas y toucher.
   ========================================================================== */

.mbp-news-form {
    margin-top: 4px;
    text-align: left;
}

/* Brevo pose `brevo-form-group--name` sur les DEUX groupes optionnels (nom et
   prénom) : une seule classe suffit, pas besoin de `:has()`. Le champ e-mail, lui,
   est dans un `.brevo-form-group` nu et reste donc visible. Son libellé porte déjà
   `screen-reader-text` côté plugin : rien à masquer de notre côté. */
.mbp-news-form .brevo-form-title,
.mbp-news-form .brevo-form-group--name {
    display: none;
}

.mbp-news-form .brevo-input,
.mbp-news-form input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--mbp-font-sans);
    font-size: 14px;
    /* 44px : cible tactile minimale retenue sur tout le site (WCAG 2.5.5). */
    min-height: 44px;
    padding: 10px 16px;
    background: var(--mbp-color-surface);
    border: 1px solid var(--mbp-color-field-border);
    border-radius: var(--mbp-radius-pill) !important;
    color: var(--mbp-color-heading);
    transition: var(--mbp-transition);
}

.mbp-news-form .brevo-input:focus,
.mbp-news-form input[type="email"]:focus {
    outline: 2px solid var(--mbp-color-accent-solid);
    outline-offset: 2px;
    border-color: transparent;
}

.mbp-news-form .brevo-input::placeholder {
    color: var(--mbp-color-text-muted);
}

/* Exemples de tous les champs du thème : la couleur par défaut du navigateur (#757575) tombait à 3,56:1 en sombre (audit du 04/10). */
.mbp-editorial :is(input, textarea)::placeholder {
    color: var(--mbp-color-text-muted);
    opacity: 1;
}

.mbp-news-form .brevo-submit-btn,
.mbp-news-form button[type="submit"] {
    width: 100%;
    margin-top: 10px;
    /* Le plugin pose ses propres couleurs via --brevo-btn-*, en noir. On les
     * redéfinit plutôt que de lutter avec ses sélecteurs : le jeton maison suit
     * alors les deux modes tout seul. */
    --brevo-btn-bg: var(--mbp-color-accent-solid);
    --brevo-btn-text: var(--mbp-color-on-accent);
    background: var(--mbp-color-accent-solid) !important;
    color: var(--mbp-color-on-accent) !important;
    font-family: var(--mbp-font-sans);
    font-size: 13.5px;
    font-weight: 600;
    min-height: 44px;
    padding: 10px 24px;
    border: 0;
    border-radius: var(--mbp-radius-pill) !important;
    cursor: pointer;
    transition: var(--mbp-transition);
    box-shadow: 0 4px 14px rgba(30, 107, 69, 0.28);
}

.mbp-news-form .brevo-submit-btn:hover,
.mbp-news-form button[type="submit"]:hover {
    background: var(--mbp-color-accent-solid-hover) !important;
    transform: translateY(-1px);
}
/* Mode sombre — l'encart garde son dégradé menthe clair en clair ; en sombre il
 * passe sur les surfaces du thème, et le champ avec lui. Sans cette règle, le
 * champ resterait blanc sur une carte bleu nuit. */
html[data-theme="dark"] .mbp-news-form .brevo-input,
html[data-theme="dark"] .mbp-news-form input[type="email"] {
    background: #141a24 !important;
    border-color: #242f40 !important;
    color: #f1f5f9 !important;
}

.mbp-news-btn:hover {
    background: var(--mbp-color-accent-solid-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 107, 69, 0.38);
}

/* ==========================================================================
   9. FICHES PRATIQUES DANS LES ARTICLES (CARNET D'ADRESSES)
   ========================================================================== */

.entry-content blockquote.wp-block-quote,
.inner-post-entry blockquote.wp-block-quote,
.wp-block-quote,
.mbp-entry-content blockquote,
blockquote {
    background: var(--mbp-color-surface-card);
    border-left: 4px solid var(--mbp-color-accent) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: var(--mbp-radius-md);
    padding: 24px 28px;
    margin: 34px 0 38px 0 !important;
    font-style: normal;
    box-shadow: var(--mbp-shadow-sm);
    box-sizing: border-box;
    text-align: left !important;
    max-width: 100% !important;
}

.entry-content blockquote.wp-block-quote p,
.inner-post-entry blockquote.wp-block-quote p,
.wp-block-quote p,
.mbp-entry-content blockquote p,
blockquote p {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    margin-bottom: 10px !important;
    color: var(--mbp-color-text) !important;
    font-style: normal !important;
    text-align: left !important;
}

.entry-content blockquote.wp-block-quote p strong:first-child,
.inner-post-entry blockquote.wp-block-quote p strong:first-child {
    color: var(--mbp-color-heading);
    font-size: 16.5px;
    font-weight: 700;
}

/* Boutons capsules d'affiliation */
.entry-content .wp-block-button__link,
.wp-block-button .wp-block-button__link {
    font-size: 14.5px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: var(--mbp-radius-pill);
    letter-spacing: 0.02em;
    transition: var(--mbp-transition);
    display: inline-block;
    text-decoration: none !important;
    border: none;
}

.entry-content .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: var(--mbp-shadow-hover);
    opacity: 0.96;
}

/* ==========================================================================
   10. MODE SOMBRE HAUTE COUTURE (DARK MODE SYSTEM COMPLET & ROBUSTE)
   ========================================================================== */

body.penci-dark-mode,
body.dark-mode,
body.pcdark-mode,
body.pcdm-enable,
body.pclight-mode.pcdark-mode,
html[data-theme="dark"],
html[data-theme="dark"] body {
    color-scheme: dark !important;
    --mbp-color-bg: #11151c !important;
    --mbp-color-surface: #18202c !important;
    --mbp-color-surface-soft: #141a24 !important;
    --mbp-color-surface-card: #18202c !important;
    --mbp-color-text: #c8d2dc !important;
    --mbp-color-text-muted: #91a0b3 !important;
    --mbp-color-heading: #f1f5f9 !important;
    --mbp-color-border: #242f40 !important;
    --mbp-color-field-border: #6b7a8f !important; /* 3,8:1 sur les surfaces, 4,2:1 sur le fond */
    /*
     * Sauge, pas menthe. Le menthe historique (#42b883, S=47 %) contrastait très
     * bien (7,33:1) mais semblait trop vif sur le fond quasi noir bleuté (#11151c).
     * Ce constat perceptif ne démontre pas une opposition de teintes maximale. Le plus pénible
     * n'était pas les liens mais `.mbp-ed-eyebrow` — 10 px, 600, capitales,
     * interlettrage 1,8 px : du petit texte saturé sur presque noir.
     *
     * Même teinte (153°), saturation ramenée de 47 à 35 %, luminosité 49 -> 52 %
     * pour compenser. Contraste 6,89:1 sur le fond, 6,17:1 sur les surfaces : AA
     * large partout. Les écarts entre les trois jetons sont conservés à l'identique
     * (hover -6 pts de L, bright +6 pts), sinon le sens des survols change.
     */
    --mbp-color-accent: #59af88 !important;
    --mbp-color-accent-hover: #4c9e79 !important;
    --mbp-color-accent-rgb: 89 175 136 !important;
    --mbp-color-accent-subtle: rgb(var(--mbp-color-accent-rgb) / 0.14) !important;
    --mbp-color-accent-bright: #6eb998 !important;
    --mbp-color-on-accent: #ffffff !important;
    /* L'accent sombre (#59af88) est fait pour le TEXTE. En aplat il faut ce vert
     * profond calibré : blanc dessus = 5,16:1. Voir le commentaire du :root.
     *
     * Désaturé avec l'accent (#1e7e4c, S=62 % -> #2d7b54, S=46 %). L'accent sombre
     * étant passé de S=47 à 35 %, l'écart texte/aplat avait doublé — liens sourds,
     * boutons vifs. Pur déplacement de saturation : les deux contrastes sont tenus
     * (blanc 5,07 -> 5,16:1 ; silhouette du bouton sur le fond 3,61 -> 3,55:1). */
    --mbp-color-accent-solid: #2d7b54 !important;
    /* Même valeur qu'en clair — donc en sombre l'aplat ASSOMBRIT au survol
     * (#2d7b54 -> #144d31) au lieu de s'éclaircir, et ne tient plus que 1,86:1 sur le
     * fond de page (1,67:1 sur les surfaces) : le bouton se dissout presque pendant le
     * survol. Le blanc posé dessus reste lui à 9,83:1, ce n'est donc pas un défaut de
     * lisibilité du LABEL mais de silhouette du bouton. Comportement hérité, décrit
     * comme délibéré au §3 du CLAUDE.md : ne pas le corriger sans arbitrage.
     * `--mbp-color-accent-bright` (#6eb998) convient au liseré éclairci, pas à un fond sous du blanc.
     * Ne jamais brancher ce survol sur `--mbp-color-accent-hover` (voir le :root). */
    --mbp-color-accent-solid-hover: #144d31 !important;
    --mbp-color-terracotta: #d9825b !important;
    --mbp-color-terracotta-subtle: rgba(217, 130, 91, 0.14) !important;
    background-color: #11151c !important;
    color: #c8d2dc !important;
}
/* 1. Arrière-plans principaux et en-têtes en Dark Mode */
html[data-theme="dark"] #main,
html[data-theme="dark"] #wrapper,
html[data-theme="dark"] .wrapper-boxed,
html[data-theme="dark"] .penci-main-content,
html[data-theme="dark"] .mbp-topbar,
html[data-theme="dark"] .penci-top-bar {
    background-color: #141a24 !important;
    background: #141a24 !important;
    border-color: #242f40 !important;
}

/* 2. Logo & Slogan en Dark Mode */

/* NE PAS réintroduire ici de sélecteurs `#logo img` : un `#id` porte une spécificité
   (1,1,2) qui écrase les bascules `.mbp-mainlogo-light` en (0,2,1) ci-dessous, même
   avec !important — le logo clair resterait alors visible en mode sombre.
   Le filtre / fond / opacité du logo sont gérés par le bloc GARDE-FOUS en fin de fichier. */

/* Logo Switching Haute Couture (Mode Clair vs Mode Sombre) */
.mbp-mainlogo-light,
.mbp-footer-logo-light,
.mbp-drawer-logo-light {
    display: inline-block !important;
}

.mbp-mainlogo-dark,
.mbp-footer-logo-dark,
.mbp-drawer-logo-dark {
    display: none !important;
}
/* En Dark Mode : Le logo détouré sombre transparent prend le relais */
html[data-theme="dark"] .mbp-mainlogo-light,
html[data-theme="dark"] .mbp-footer-logo-light,
html[data-theme="dark"] .mbp-drawer-logo-light {
    display: none !important;
}
html[data-theme="dark"] .mbp-mainlogo-dark,
html[data-theme="dark"] .mbp-footer-logo-dark,
html[data-theme="dark"] .mbp-drawer-logo-dark {
    display: inline-block !important;
    background: transparent !important;
    background-color: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}
/* 4. Volets de recherche et de langues (commandes dans navigation-2026.css). */
html[data-theme="dark"] .mbp-lang-menu {
    background: #18202c !important;
    border-color: #242f40 !important;
}
html[data-theme="dark"] .mbp-lang-menu li a,
html[data-theme="dark"] .mbp-lang-item {
    color: #c8d2dc !important;
}
html[data-theme="dark"] .mbp-lang-menu li a:hover,
html[data-theme="dark"] .mbp-lang-menu li.active a,
html[data-theme="dark"] .mbp-lang-item:hover {
    background: var(--mbp-color-accent-subtle) !important;
    color: var(--mbp-color-accent) !important;
}
/* 5. TOUTES LES ÉTIQUETTES / BADGES EN DARK MODE */
html[data-theme="dark"] .mbp-feed-tag{
    background: #18202c !important;
    background-color: #18202c !important;
    color: #f1f5f9 !important;
    border: 1px solid #242f40 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .mbp-badge-category {
    background: var(--mbp-color-accent-subtle) !important;
    background-color: var(--mbp-color-accent-subtle) !important;
    color: var(--mbp-color-accent) !important;
    border: 1px solid rgb(var(--mbp-color-accent-rgb) / 0.25) !important;
}
html[data-theme="dark"] .mbp-subcat-pill{
    background: #141a24 !important;
    background-color: #141a24 !important;
    border: 1px solid #242f40 !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .mbp-tag-pill{
    background: #141a24;
    background-color: #141a24;
    border: 1px solid #242f40;
    color: #f1f5f9;
}
html[data-theme="dark"] .mbp-subcat-count {
    background: #242f40 !important;
    color: #91a0b3 !important;
}
html[data-theme="dark"] .mbp-subcat-pill:hover,
html[data-theme="dark"] .mbp-subcat-pill.is-active{
    background: var(--mbp-color-accent-solid) !important;
    border-color: var(--mbp-color-accent-solid) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .mbp-tag-pill:hover{
    background: var(--mbp-color-accent-solid);
    border-color: var(--mbp-color-accent-solid);
    color: #ffffff;
}
html[data-theme="dark"] .mbp-news-btn {
    background: var(--mbp-color-accent-solid) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .mbp-news-btn:hover {
    background: var(--mbp-color-accent-solid-hover) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .mbp-single-article,
html[data-theme="dark"] .mbp-feed-card,
html[data-theme="dark"] .mbp-widget,
html[data-theme="dark"] .mbp-404-box,
html[data-theme="dark"] .mbp-no-posts,
html[data-theme="dark"] .mbp-comments-section{
    background: #18202c !important;
    background-color: #18202c !important;
    border: 1px solid #242f40 !important;
    color: #c8d2dc !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="dark"] .mbp-archive-header-wrap,
html[data-theme="dark"] .mbp-single-breadcrumb-wrap {
    background: #141a24 !important;
    background-color: #141a24 !important;
    border-bottom: 1px solid #242f40 !important;
}

html[data-theme="dark"] .mbp-feed-title a,
html[data-theme="dark"] .mbp-section-title,
html[data-theme="dark"] .mbp-widget-heading span,
html[data-theme="dark"] .mbp-about-title,
html[data-theme="dark"] .mbp-archive-title,
html[data-theme="dark"] .mbp-single-title,
html[data-theme="dark"] .mbp-popular-text h4 a{
    color: #f1f5f9 !important;
}
/* 8. Citations & Fiches Adresses Gutenberg en Dark Mode */
html[data-theme="dark"] .entry-content blockquote.wp-block-quote,
html[data-theme="dark"] .inner-post-entry blockquote.wp-block-quote {
    background: #141a24 !important;
    background-color: #141a24 !important;
    border: 1px solid #242f40 !important;
    border-left: 4px solid var(--mbp-color-accent) !important;
    color: #c8d2dc !important;
}
html[data-theme="dark"] .entry-content blockquote.wp-block-quote p {
    color: #c8d2dc !important;
}
html[data-theme="dark"] .entry-content blockquote.wp-block-quote p strong {
    color: #f1f5f9 !important;
}

.entry-content .wpcf7-form,
.entry-content .wpforms-form{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 28px 0;
    max-width: 680px;
}
.entry-content form:not(#commentform):not(.mbp-search-inline-form){
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 28px 0;
    max-width: 680px;
}

/* ==========================================================================
   11. PAGES DE CATÉGORIES & ARCHIVES (EN-TÊTE & GRILLE MAGAZINE)
   ========================================================================== */

.mbp-archive-header-wrap {
    background: var(--mbp-color-surface-soft);
    border-bottom: 1px solid var(--mbp-color-border);
    padding: 18px 0 16px 0 !important;
    margin-bottom: 24px !important;
    text-align: left;
}

.mbp-breadcrumb {
    font-size: 11.5px;
    color: var(--mbp-color-text-muted);
    margin-bottom: 8px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
}

.mbp-breadcrumb a {
    color: var(--mbp-color-text);
    text-decoration: none;
    transition: var(--mbp-transition);
}

.mbp-breadcrumb a:hover {
    color: var(--mbp-color-accent);
}

.mbp-breadcrumb-sep {
    color: var(--mbp-color-border);
    font-size: 11px;
}

.mbp-breadcrumb-current {
    color: var(--mbp-color-heading);
    font-weight: 600;
}

.mbp-archive-hero {
    max-width: 100%;
    margin: 0;
    text-align: left;
}

.mbp-archive-header-inline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}

.mbp-archive-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--mbp-color-text-muted);
    background: var(--mbp-color-surface);
    padding: 2px 10px;
    border-radius: var(--mbp-radius-pill);
    border: 1px solid var(--mbp-color-border);
    display: inline-flex;
    align-items: center;
}

.mbp-archive-title {
    font-family: var(--mbp-font-serif);
    font-size: clamp(26px, 3.2vw, 32px) !important;
    font-weight: 700;
    line-height: 1.18 !important;
    color: var(--mbp-color-heading);
    margin: 0 !important;
    letter-spacing: -0.015em;
    text-align: left;
}

.mbp-archive-description {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: var(--mbp-color-text-muted);
    max-width: 760px;
    margin: 6px 0 10px 0 !important;
    text-align: left;
}

.mbp-subcats-nav {
    margin-top: 10px !important;
    padding-top: 0 !important;
    border-top: none !important;
}

.mbp-subcats-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px !important;
}

.mbp-subcat-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--mbp-color-surface);
    border: 1px solid var(--mbp-color-border);
    border-radius: var(--mbp-radius-pill);
    padding: 3px 11px !important;
    font-size: 11.5px !important;
    font-weight: 600;
    color: var(--mbp-color-heading);
    text-decoration: none !important;
    transition: var(--mbp-transition);
}

.mbp-subcat-pill:hover {
    background: var(--mbp-color-accent-solid);
    border-color: var(--mbp-color-accent);
    color: var(--mbp-color-on-accent) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(30, 107, 69, 0.2);
}

.mbp-subcat-count {
    font-size: 10.5px;
    background: var(--mbp-color-surface-soft);
    color: var(--mbp-color-text-muted);
    padding: 1px 5px;
    border-radius: 10px;
    font-weight: 700;
}

.mbp-subcat-pill.is-active {
    background: var(--mbp-color-accent-solid);
    border-color: var(--mbp-color-accent);
    color: var(--mbp-color-on-accent) !important;
    box-shadow: 0 3px 8px rgba(30, 107, 69, 0.25);
}

.mbp-subcat-pill.is-active .mbp-subcat-count {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.mbp-subcat-pill:hover .mbp-subcat-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.mbp-no-posts {
    background: var(--mbp-color-surface);
    border-radius: var(--mbp-radius-lg);
    border: 1px solid var(--mbp-color-border);
    padding: 40px 30px;
    text-align: center;
    box-shadow: var(--mbp-shadow-sm);
}

.mbp-no-posts h3 {
    font-family: var(--mbp-font-serif);
    font-size: 22px;
    color: var(--mbp-color-heading);
    margin: 0 0 10px 0;
}

.mbp-no-posts p {
    color: var(--mbp-color-text-muted);
    margin: 0 0 20px 0;
}

/* ==========================================================================
   12. PAGES D'ARTICLES UNIQUES (SINGLE POSTS & RESPONSIVE HAUTE COUTURE)
   ========================================================================== */

.mbp-single-wrap {
    padding-top: 28px !important;
    padding-bottom: 44px;
}

/* Layout Pleine Page Desktop pour les Articles */
.mbp-single-layout-grid {
    display: block !important;
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.mbp-single-main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* `.single .post` du parent (spécificité 200) impose margin-bottom: 60px et battait
   `.mbp-single-article` (100). On repasse devant sans !important en qualifiant par
   le contexte, comme le fait le parent. */
.single .mbp-single-article,
.mbp-single-article {
    background: var(--mbp-color-surface);
    border-radius: var(--mbp-radius-lg);
    border: 1px solid var(--mbp-color-border);
    box-shadow: var(--mbp-shadow-sm);
    padding: 22px 36px 36px 36px !important;
    margin-bottom: 32px;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.mbp-single-header {
    margin-bottom: 16px !important;
}

/* Fil d'Ariane & Catégorie Délicats Intégrés */
.mbp-single-breadcrumb-inline {
    font-size: 11px;
    color: var(--mbp-color-text-muted);
    margin-bottom: 6px !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.3;
}

.mbp-single-breadcrumb-inline a {
    color: var(--mbp-color-text-muted);
    text-decoration: none;
    transition: var(--mbp-transition);
}

.mbp-single-breadcrumb-inline a:hover {
    color: var(--mbp-color-accent);
}

.mbp-single-cat-link {
    display: inline-flex;
    align-items: center;
    background: var(--mbp-color-accent-subtle);
    color: var(--mbp-color-accent) !important;
    font-weight: 700;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px !important;
    border-radius: var(--mbp-radius-pill);
    margin-left: 2px;
}

.mbp-single-cat-link:hover {
    background: var(--mbp-color-accent-solid);
    color: var(--mbp-color-on-accent) !important;
}

.mbp-single-title {
    font-family: var(--mbp-font-serif);
    font-size: clamp(24px, 3vw, 32px) !important;
    line-height: 1.22 !important;
    font-weight: 700;
    color: var(--mbp-color-heading);
    margin: 0 0 8px 0 !important;
    letter-spacing: -0.015em;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.mbp-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--mbp-color-text-muted);
    padding-bottom: 22px;
    border-bottom: 1px solid var(--mbp-color-border);
    margin-bottom: 28px;
}

.mbp-meta-author-wrap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* ==========================================================================
   Contenu & Typographie Gutenberg Haute Lisibilité
   ========================================================================== */

.mbp-single-article,
.mbp-single-header,
.mbp-single-title,
.mbp-single-meta {
    text-align: left;
}

.mbp-entry-content,
.post-entry,
.entry-content {
    font-size: 19px;
    line-height: 1.68;
    color: var(--mbp-color-text);
    min-width: 0;
    max-width: 100%;
    text-align: left;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}

.mbp-entry-content p,
.post-entry p,
.entry-content p {
    font-size: 19px !important;
    line-height: 1.68 !important;
    margin-bottom: 24px;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

.mbp-entry-content ul,
.mbp-entry-content ol,
.post-entry ul,
.post-entry ol,
.entry-content ul,
.entry-content ol {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    text-align: left;
}

/* Alignements intentionnels Gutenberg (séparateurs, textes centrés ou à droite) */
.mbp-entry-content .has-text-align-center,
.entry-content .has-text-align-center,
.post-entry .has-text-align-center,
.mbp-entry-content p.has-text-align-center,
.entry-content p.has-text-align-center,
.has-text-align-center {
    text-align: center !important;
}

.mbp-entry-content .has-text-align-right,
.entry-content .has-text-align-right,
.post-entry .has-text-align-right,
.mbp-entry-content p.has-text-align-right,
.entry-content p.has-text-align-right,
.has-text-align-right {
    text-align: right !important;
}

/* Lettrine sobre & élégante pour le premier paragraphe de l'article */
.mbp-entry-content > p:first-of-type::first-letter {
    font-family: var(--mbp-font-serif);
    font-size: 3.2em;
    float: left;
    line-height: 0.82;
    margin: 6px 12px 0 0;
    color: var(--mbp-color-heading);
    font-weight: 700;
}

.mbp-entry-content h2.wp-block-heading,
.mbp-entry-content h2 {
    font-family: var(--mbp-font-serif);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    padding: 14px 22px;
    border-radius: var(--mbp-radius-md);
    margin: 44px 0 24px 0;
    letter-spacing: 0.01em;
    overflow-wrap: break-word;
    word-break: break-word;
}

.mbp-entry-content h3.wp-block-heading,
.mbp-entry-content h3,
.entry-content h3,
.post-entry h3 {
    font-family: var(--mbp-font-serif);
    font-size: 22.5px !important;
    font-weight: 700 !important;
    color: var(--mbp-color-heading);
    margin: 36px 0 16px 0;
    line-height: 1.35;
    overflow-wrap: break-word;
}

.mbp-entry-content h4 {
    font-family: var(--mbp-font-sans);
    font-size: 16.5px;
    font-weight: 700;
    color: var(--mbp-color-heading);
    margin: 28px 0 14px 0;
}

.mbp-entry-content a {
    color: var(--mbp-color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--mbp-transition);
}

.mbp-entry-content a:hover {
    color: var(--mbp-color-accent-hover);
}

/* Images & Médias Gutenberg Strictement Contenus */
.mbp-entry-content img,
.entry-content img,
.post-entry img,
.wp-block-image img,
.wp-block-gallery img,
.wp-block-cover img,
figure img {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    border-radius: var(--mbp-radius-sm);
}

.mbp-entry-content figure,
.entry-content figure,
.wp-block-image,
.wp-block-gallery,
.wp-block-table,
.wp-block-embed,
.wp-block-video {
    max-width: 100% !important;
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Tableaux Gutenberg avec Défilement Horizontal Tactile */
.mbp-entry-content table,
.entry-content table,
.wp-block-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-collapse: collapse !important;
    margin: 24px 0 !important;
}

/* Intégrations / Iframes Réactives (Google Maps, YouTube) */
.mbp-entry-content iframe,
.entry-content iframe,
.mbp-entry-content embed,
.entry-content embed,
.mbp-entry-content video,
.entry-content video {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* ==========================================================================
   PRÉVENTION DES DÉBORDEMENTS HORIZONTAUX MOBILES (CONSTAT 12)
   ========================================================================== */

pre.wp-block-verse,
.wp-block-verse {
    overflow-x: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

/* ==========================================================================
   COMPOSANT MÉDONNÉES UNIQUE & SOCIAL ROW UNIFIÉ (CONSTATS 13 & 14)
   ========================================================================== */

/* 1. Ligne unique de métadonnées */
.mbp-meta-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
    color: var(--mbp-color-text-muted);
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1.4;
}

.mbp-meta-cat {
    color: var(--mbp-color-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11.5px;
    text-decoration: none;
}

.mbp-meta-cat:hover {
    color: var(--mbp-color-accent-hover);
}

.mbp-meta-dot {
    color: var(--mbp-color-border);
    font-size: 10px;
    user-select: none;
}

.mbp-meta-read,
.mbp-meta-date {
    color: var(--mbp-color-text-muted);
}

/* 2. Composant Réseaux Sociaux Unifié */
.mbp-social-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 auto;
}

.mbp-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mbp-radius-sm);
    border: 1px solid var(--mbp-color-border);
    background: var(--mbp-color-surface-soft);
    color: var(--mbp-color-heading);
    text-decoration: none;
    transition: var(--mbp-transition);
    box-sizing: border-box;
    box-shadow: none;
}

.mbp-social-btn svg {
    flex-shrink: 0;
    display: block;
}

.mbp-social-row-sm .mbp-social-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
}

.mbp-social-row-md .mbp-social-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
}

.mbp-social-btn:hover {
    background: var(--mbp-color-accent-subtle);
    color: var(--mbp-color-accent);
    border-color: var(--mbp-color-accent);
    transform: translateY(-2px);
}
/* Dark mode pour le composant social unifié sur les 5 sélecteurs */
html[data-theme="dark"] .mbp-social-btn {
    background: #1e2634;
    border-color: #242f40;
    color: #f1f5f9;
}
html[data-theme="dark"] .mbp-social-btn:hover {
    background: rgb(var(--mbp-color-accent-rgb) / 0.16);
    border-color: var(--mbp-color-accent);
    color: var(--mbp-color-accent);
}
.mbp-single-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 36px 0 28px 0;
    padding-top: 24px;
    border-top: 1px solid var(--mbp-color-border);
}

.mbp-tags-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--mbp-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mbp-tag-pill {
    background: var(--mbp-color-surface-soft);
    border: 1px solid var(--mbp-color-border);
    color: var(--mbp-color-text);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: var(--mbp-radius-pill);
    transition: var(--mbp-transition);
}

/* Tag links are controls inside article prose; keep their own decoration. */
a.mbp-tag-pill { text-decoration: none; }

a.mbp-tag-pill:hover {
    background: var(--mbp-color-accent-solid);
    border-color: var(--mbp-color-accent);
    color: var(--mbp-color-on-accent);
    transform: translateY(-2px);
}

/* ==========================================================================
   ADAPTATION MOBILE SPÉCIFIQUE DES ARTICLES (ÉCRANS < 768px)
   ========================================================================== */

@media only screen and (max-width: 768px) {
    .mbp-single-wrap {
        padding-top: 18px !important;
        padding-bottom: 40px !important;
    }

    .mbp-single-article {
        padding: 22px 18px !important;
        border-radius: 14px !important;
        margin-bottom: 28px !important;
    }

    .mbp-single-header {
        margin-bottom: 20px !important;
    }

    .mbp-single-title {
        font-size: 25px !important;
        line-height: 1.3 !important;
        margin-bottom: 14px !important;
    }

    .mbp-single-meta {
        font-size: 12.5px !important;
        gap: 6px !important;
        padding-bottom: 16px !important;
        margin-bottom: 20px !important;
    }

    .mbp-entry-content {
        font-size: 16px !important;
        line-height: 1.74 !important;
    }

    .mbp-entry-content p {
        margin-bottom: 18px !important;
    }

    /* Les listes héritaient des 16 px du conteneur à côté de paragraphes forcés à 19 px, et leurs puces
       « outside » étaient dessinées au bord de l'écran (audit du 04/10, P4). Les citations gardent leur taille. */
    .mbp-entry-content li {
        font-size: 19px !important;
        line-height: 1.68 !important;
    }

    .mbp-entry-content :is(ul, ol) {
        padding-left: 1.25em;
    }

    .mbp-entry-content h2.wp-block-heading,
    .mbp-entry-content h2 {
        font-size: 20px !important;
        padding: 10px 14px !important;
        margin: 32px 0 16px 0 !important;
        border-radius: 8px !important;
        line-height: 1.32 !important;
    }

    .mbp-entry-content h3.wp-block-heading,
    .mbp-entry-content h3,
    .entry-content h3,
    .post-entry h3 {
        font-size: 19px !important;
        font-weight: 700 !important;
        margin: 26px 0 12px 0 !important;
    }

    .mbp-entry-content h4 {
        font-size: 15.5px !important;
        margin: 20px 0 10px 0 !important;
    }

    /* Fiches Adresses / Citations sur mobile */
    .entry-content blockquote.wp-block-quote,
    .inner-post-entry blockquote.wp-block-quote,
    .wp-block-quote {
        padding: 18px 16px !important;
        margin: 22px 0 !important;
        border-radius: 10px !important;
        font-size: 14.5px !important;
    }

    .entry-content .wp-block-button,
    .wp-block-button {
        width: 100% !important;
        display: block !important;
    }

    .entry-content .wp-block-button__link,
    .wp-block-button .wp-block-button__link {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        padding: 11px 16px !important;
        font-size: 14px !important;
        box-sizing: border-box;
    }

    /* Galeries Gutenberg empilées proprement sur mobile */
    .wp-block-gallery.has-nested-images,
    .blocks-gallery-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .wp-block-gallery.has-nested-images figure.wp-block-image {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Colonnes Gutenberg sur mobile */
    .wp-block-columns {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

@media only screen and (max-width: 480px) {
    .mbp-single-article {
        padding: 18px 14px !important;
        border-radius: 12px !important;
    }

    .mbp-single-title {
        font-size: 22.5px !important;
    }

    .entry-content blockquote.wp-block-quote,
    .inner-post-entry blockquote.wp-block-quote {
        padding: 14px 12px !important;
    }
}

/* Zone Commentaires */

/* Zone Commentaires Haute Couture */
.mbp-comments-section {
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--mbp-color-border);
}

.post-box-title{
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--mbp-color-heading) !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.01em !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* ==========================================================================
   14c. CIBLES TACTILES MOBILES (≥ 44px WCAG 2.1)
   ========================================================================== */

@media only screen and (max-width: 600px) {
    .mbp-feed-cta,
.mbp-share-btn,
.mbp-copy-btn{
        min-height: 44px;
        min-width: 44px;
    }

    .mbp-feed-cta {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* ==========================================================================
   14d. FICHES ADRESSES : LISERÉS TERRACOTTA & ÉMERAUDE
   ========================================================================== */

/* Liseré Émeraude pour les fiches séjours/hôtels */
.mbp-hotel-card {
    border-left: 4px solid var(--mbp-color-accent) !important;
}

.mbp-hotel-card .mbp-hotel-card-verdict {
    font-style: italic;
    color: var(--mbp-color-text-muted);
    border-left: 3px solid var(--mbp-color-border);
    padding-left: 16px;
    margin: 12px 0 16px 0;
}

/* Micro-note de confiance dans les patterns */
.mbp-affiliate-micro-note {
    display: inline-block;
    font-size: 12px;
    color: var(--mbp-color-text-muted);
    font-style: italic;
    margin-top: 6px;
}

.mbp-comments-section {
    content-visibility: auto;
    /*
     * `auto 400px` et non `0 400px` : le mot-clé `auto` demande au navigateur de
     * MÉMORISER la hauteur réellement mesurée au premier rendu et de la réutiliser
     * ensuite, au lieu de re-supposer 400px à chaque fois que la section ressort
     * du viewport. 400px n'est qu'une estimation de départ, et elle est fausse
     * pour la plupart de ces sections : le bloc Coup de Cœur mesure 395px, et les
     * blocs « articles similaires » et commentaires
     * varient d'un article à l'autre. Chaque écart se paie en saut de barre de
     * défilement quand on remonte la page.
     */
    contain-intrinsic-size: auto 400px;
}

/*
 * Résilience du contenu lecteur : un commentaire contenant une URL collée à un mot
 * (« Maria:https://exemple.wixsite.com/… ») forme une chaîne insécable qui élargit
 * tout le bloc — 389px dans un écran de 375 — et se fait rogner sans provoquer de
 * scroll. Le contenu des commentaires n'est pas maîtrisé : il doit toujours pouvoir
 * se couper.
 */
.mbp-comments-section .comment-content,
.mbp-comments-section .comment-content p,
.mbp-comments-section span.author,
.mbp-comments-section span.date{
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.mbp-feed-media {
    aspect-ratio: 16 / 10;
}

.mbp-about-avatar {
    width: 96px;
    height: 96px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 16px auto;
    border-radius: 50%;
    overflow: hidden;
}

.mbp-about-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ==========================================================================
   18. COMPOSANTS MODERNES HAUTE FIDÉLITÉ & CONFORT UX
   ========================================================================== */

/* 1. Barre de Progression de Lecture Subtile (Single Posts) */
.mbp-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--mbp-color-accent);
    z-index: 999999;
    /* scaleX plutôt que width : une largeur écrite à chaque défilement forçait une mise en page par image
       (483 sur Snax, audit du 04/10, P24). */
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.08s linear;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(30, 107, 69, 0.4);
}

/* 5. Accessibilité : Focus Visible Doux
   La liste s'arrêtait à a/button/input : select, summary et tout porteur de [tabindex]
   n'avaient aucun indicateur. Ils sont ajoutés ici.

   À savoir avant de compter sur cette règle : elle ne pèse que 0-1-1 et plusieurs champs
   posent « outline: none !important » à une spécificité supérieure, qu'elle ne peut donc
   pas reprendre — l'escalade serait une impasse. Ces champs sont couverts autrement, et
   c'est volontaire :
     - #commentform (1-0-1) : règle :focus dédiée §14, bordure accent + anneau de 3px.
     - #top-search : :focus-within sur .pc-searchform-inner (css/navigation-2026.css).
     - .mbp-search-inline-form : :focus-within sur le conteneur.
   Les recherches de la sidebar et du tiroir posent « outline: none » SANS !important :
   le !important d'ici leur suffit. Vérifié au rendu, clair et sombre. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--mbp-color-accent) !important;
    outline-offset: 2px !important;
}

/* Cible du lien d'évitement (tabindex=-1) : le saut déplace le focus sans dessiner un anneau autour de toute la page. */
main#main:focus-visible {
    outline: none !important;
}

/* 6. Respect des Préférences d'Animation Réduite */
@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;
    }
}

/* ==========================================================================
   19. MODULES DE PARTAGE SOCIAL, PAGE 404 & RÉSULTATS DE RECHERCHE
   ========================================================================== */

/* 1. Barre de Partage Sociale Délicate sur les Articles */
.mbp-single-share-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 28px 0 34px 0;
    padding: 16px 20px;
    background: var(--mbp-color-surface-soft);
    border: 1px solid var(--mbp-color-border);
    border-radius: var(--mbp-radius-md);
}

.mbp-share-label {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mbp-color-heading);
}

.mbp-share-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mbp-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mbp-font-sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 6px 14px;
    border-radius: var(--mbp-radius-pill);
    background: var(--mbp-color-surface);
    border: 1px solid var(--mbp-color-border);
    color: var(--mbp-color-heading);
    text-decoration: none !important;
    cursor: pointer;
    transition: var(--mbp-transition);
}

.mbp-share-btn:hover {
    background: var(--mbp-color-accent-solid);
    border-color: var(--mbp-color-accent);
    color: var(--mbp-color-on-accent) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 107, 69, 0.2);
}

.mbp-share-btn.is-copied {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #ffffff !important;
}

/* Le bouton porte un texte visible (« WhatsApp »), donc seuil AA de 4,5:1 — pas les 3:1
   des icônes. Le blanc sur le vert vif de la marque tombait à 1,98:1 : illisible pendant
   tout le survol. Le vert foncé officiel #075E54 ne sauve rien en texte (3,87:1) et, en
   fond, il perdrait le vert vif qui rend le bouton reconnaissable au premier coup d'œil.
   On garde donc #25D366 en aplat et on assombrit le texte : 7,11:1, dans la même famille
   chromatique. Pinterest n'a pas ce problème (blanc sur #E60023 = 4,78:1). */
.mbp-share-whatsapp:hover {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #053225 !important;
}

.mbp-share-pinterest:hover {
    background: #E60023 !important;
    border-color: #E60023 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .mbp-single-share-bar {
    background: #101722;
    border-color: #1e293b;
}
html[data-theme="dark"] .mbp-share-btn {
    background: #141c28;
    border-color: #1e293b;
    color: #f8fafc;
}

@media only screen and (max-width: 600px) {
    .mbp-single-share-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 14px;
    }
    
    .mbp-share-buttons {
        width: 100%;
    }
    
    .mbp-share-btn {
        flex-grow: 1;
        justify-content: center;
        padding: 8px 12px;
    }
}

/* 2. Formulaire de Recherche Inline (Search & 404) */
.mbp-search-refine-wrap {
    max-width: 540px;
    margin: 22px auto 0 auto;
}

.mbp-search-inline-form {
    display: flex;
    align-items: center;
    background: var(--mbp-color-surface);
    border: 1px solid var(--mbp-color-border);
    border-radius: var(--mbp-radius-pill);
    padding: 4px 6px 4px 18px;
    box-shadow: var(--mbp-shadow-sm);
    transition: var(--mbp-transition);
}

.mbp-search-inline-form:focus-within {
    border-color: var(--mbp-color-accent);
    box-shadow: 0 0 0 3px rgba(30, 107, 69, 0.15);
}

.mbp-search-inline-form input[type="text"] {
    flex-grow: 1;
    border: none;
    outline: none !important;
    background: transparent;
    font-size: 14px;
    color: var(--mbp-color-heading);
    padding: 8px 0;
}

.mbp-search-inline-form button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mbp-color-accent-solid);
    color: var(--mbp-color-on-accent);
    border: none;
    border-radius: var(--mbp-radius-pill);
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--mbp-transition);
}

.mbp-search-inline-form button:hover {
    background: var(--mbp-color-accent-solid-hover);
    transform: translateY(-1px);
}
html[data-theme="dark"] .mbp-search-inline-form {
    background: #101722;
    border-color: #1e293b;
}

/* 3. Page 404 Incarnée */
.mbp-404-box {
    background: var(--mbp-color-surface);
    border: 1px solid var(--mbp-color-border);
    border-radius: var(--mbp-radius-lg);
    box-shadow: var(--mbp-shadow-sm);
    padding: 56px 40px;
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
}

.mbp-404-badge {
    font-family: var(--mbp-font-serif);
    font-size: 96px;
    font-weight: 900;
    line-height: 1;
    color: var(--mbp-color-accent);
    letter-spacing: -0.04em;
    margin-bottom: 12px;
    opacity: 0.85;
}

.mbp-404-title {
    font-family: var(--mbp-font-serif);
    font-size: 28px;
    font-weight: 700;
    color: var(--mbp-color-heading);
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.mbp-404-desc {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--mbp-color-text);
    max-width: 580px;
    margin: 0 auto 28px auto;
}

.mbp-404-search {
    max-width: 480px;
    margin: 0 auto 32px auto;
}

.mbp-404-suggestions {
    margin-bottom: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--mbp-color-border);
}

.mbp-404-sug-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mbp-color-text-muted);
    display: block;
    margin-bottom: 12px;
}

.mbp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mbp-color-accent-solid);
    color: var(--mbp-color-on-accent) !important;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 24px;
    border-radius: var(--mbp-radius-pill);
    text-decoration: none !important;
    transition: var(--mbp-transition);
    box-shadow: 0 4px 14px rgba(30, 107, 69, 0.25);
}

.mbp-btn-primary:hover {
    background: var(--mbp-color-accent-solid-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 107, 69, 0.35);
}

@media only screen and (max-width: 600px) {
    .mbp-404-box {
        padding: 36px 18px;
    }
    .mbp-404-badge {
        font-size: 72px;
    }
    .mbp-404-title {
        font-size: 22px;
    }
}

/* ==========================================================================
   20. RESPONSIVE MOBILE ULTRA-PRÉCIS & ZÉRO DÉBORDEMENT (MOBILE FIRST)
   ========================================================================== */

/* 1. Règle absolue anti-débordement global */
html,
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box !important;
}

#main,
#wrapper,
.wrapper-boxed,
.container,
.mbp-main-content-wrap,
.inner-header,
#header,
#navigation {
    max-width: 100% !important;
    box-sizing: border-box;
}

img,
video,
iframe {
    max-width: 100% !important;
}

/* Widgets own their iframe dimensions; auto would replace their height with 150px. */
img,
video {
    height: auto;
}

/* 7. Grille d'Articles & Sidebar Responsive */
@media only screen and (max-width: 1024px) {
    .mbp-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .mbp-sidebar-column {
        max-width: 100% !important;
    }
}

@media only screen and (max-width: 680px) {
    .mbp-feed-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .mbp-feed-card .mbp-feed-body {
        padding: 16px 14px !important;
    }

    .mbp-feed-title {
        font-size: clamp(16.5px, 4.2vw, 19px) !important;
        line-height: 1.35 !important;
        word-break: break-word !important;
    }

    .mbp-feed-excerpt {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
}

/* 8. Widgets de la Sidebar Responsive */
.mbp-search-inline-form input {
    min-width: 0;
}

@media only screen and (max-width: 600px) {
    .mbp-widget-about,
    .mbp-widget-instagram,
    .mbp-widget-popular,
    .mbp-widget-search,
    .mbp-widget-newsletter {
        padding: 20px 16px !important;
    }

    .mbp-about-avatar img {
        width: 80px !important;
        height: 80px !important;
    }

    .mbp-search-pills {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .mbp-news-form {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .mbp-news-btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        box-sizing: border-box;
        padding: 10px 16px !important;
    }
}

/* ==========================================================================
   EN-TÊTE MOBILE ET COMPATIBILITÉ DES LOGOS
   ========================================================================== */
@media only screen and (max-width: 960px) {
    /* En-tête mobile compact 60px (Constat 07) */
    .mbp-header-unified,
    .mbp-navbar-72,
    .mbp-header-container {
        height: 60px !important;
        min-height: 60px !important;
    }

    .mbp-mobile-logo-light {
        display: block !important;
    }

    .mbp-mobile-logo-dark {
        display: none !important;
    }

    html[data-theme="dark"] .mbp-mobile-logo-light{
        display: none !important;
    }

    html[data-theme="dark"] .mbp-mobile-logo-dark{
        display: block !important;
    }

    /* Masquage du menu horizontal desktop */
    #navigation #main-nav,
    #navigation .main-nav-class {
        display: none !important;
    }

    /* Masquage de la langue dans le header mobile (présente dans le drawer) */
    .mbp-nav-lang {
        display: none !important;
    }
}

/* ==========================================================================
   GARDE-FOUS LOGOS & SURCHARGES PARENT (anciennement inline dans wp_head)
   ========================================================================== */
    .mbp-mainlogo-light, .mbp-footer-logo-light, .mbp-drawer-logo-light, .mbp-mobile-logo-light { display: inline-block !important; }
    .mbp-mainlogo-dark, .mbp-footer-logo-dark, .mbp-drawer-logo-dark, .mbp-mobile-logo-dark { display: none !important; } html[data-theme="dark"] .mbp-mainlogo-light, html[data-theme="dark"] .mbp-footer-logo-light, html[data-theme="dark"] .mbp-drawer-logo-light, html[data-theme="dark"] .mbp-mobile-logo-light {
        display: none !important;
    } html[data-theme="dark"] .mbp-mainlogo-dark, html[data-theme="dark"] .mbp-footer-logo-dark, html[data-theme="dark"] .mbp-drawer-logo-dark, html[data-theme="dark"] .mbp-mobile-logo-dark {
        display: inline-block !important;
        background: transparent !important;
        background-color: transparent !important;
        filter: none !important;
        -webkit-filter: none !important;
        opacity: 1 !important;
    }
    #logo img, .inner-header #logo img, .penci-mainlogo, .mbp-footer-logo-img, .mbp-drawer-logo img, html[data-theme="dark"] #logo img, html[data-theme="dark"] .penci-mainlogo {
        -webkit-filter: none !important;
        filter: none !important;
        background: transparent !important;
        opacity: 1 !important;
    }

/* Le déclencheur du tiroir est passé de <div> à <button> : on neutralise le style natif. */
button.button-menu-mobile {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Lien d'évitement : hors écran, visible uniquement au focus clavier. */
.mbp-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 12px 20px;
    background: var(--mbp-color-accent-solid);
    color: var(--mbp-color-on-accent);
    font-family: var(--mbp-font-sans);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--mbp-radius-sm) 0;
}

.mbp-skip-link:focus {
    left: 0;
    outline: 2px solid var(--mbp-color-heading);
    outline-offset: -4px;
}
/* ==========================================================================
   BOUTON RETOUR EN HAUT (anciennement inline dans wp_footer)
   ========================================================================== */

#penci-back-to-top, .penci-go-to-top-floating, .penci-sticky-backtotop, a.penci-go-to-top-floating, .penci-scrollup, #back-to-top, .penci-go-to-top {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* ==========================================================================
   15. COMPOSANTS D'AFFILIATION & D'AIDE À LA DÉCISION HAUTE COUTURE (MBP V2)
   ========================================================================== */

/* Règle globale pour garantir la pleine largeur dans l'éditeur et les vignettes d'aperçu Gutenberg */
.editor-styles-wrapper .mbp-top-picks-box,
.editor-styles-wrapper .mbp-hotel-card,
.editor-styles-wrapper .mbp-pros-cons-box,
.editor-styles-wrapper .mbp-comparison-table,
.editor-styles-wrapper .mbp-disclosure-card,
.block-editor-block-preview__content-iframe body,
.block-editor-block-preview__content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* 15.1. Bloc Sélection Express (Top Picks / Fast-Track en haut d'article) */
.mbp-top-picks-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    background: var(--mbp-color-surface-card, #faf8f5);
    border: 1px solid var(--mbp-color-border, #eae6e0);
    border-left: 4px solid var(--mbp-color-terracotta, #b44f25);
    border-radius: var(--mbp-radius-md, 14px);
    padding: 26px 30px;
    margin: 32px 0 38px 0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.mbp-top-picks-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: var(--mbp-color-terracotta-subtle, #fcf1eb);
    color: var(--mbp-color-terracotta, #b44f25);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 4px 10px;
    border-radius: var(--mbp-radius-pill, 9999px);
    margin: 0 0 10px 0 !important;
    width: fit-content;
}

.mbp-top-picks-badge::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E") no-repeat center / contain;
}

.mbp-top-picks-title {
    font-family: var(--mbp-font-serif, 'Playfair Display', Georgia, serif) !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    color: var(--mbp-color-heading, #121824) !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

.mbp-top-picks-subtitle {
    font-size: 14.5px !important;
    color: var(--mbp-color-text-muted, #5e6b7c) !important;
    margin: 0 0 20px 0 !important;
    line-height: 1.55 !important;
}

.mbp-top-picks-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin: 0 !important;
}

.mbp-pick-item {
    flex: 1 1 calc(33.333% - 16px) !important;
    min-width: 220px !important;
    background: var(--mbp-color-surface, #ffffff);
    border: 1px solid var(--mbp-color-border, #eae6e0);
    border-radius: 10px;
    padding: 18px !important;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.mbp-pick-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    border-color: var(--mbp-color-accent, #1e6b45);
}

.mbp-pick-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    padding: 3px 8px;
    margin: 0 0 10px 0 !important;
    display: inline-block;
    width: fit-content;
}

/* Ces trois pastilles gardaient un fond pastel en mode sombre : parfaitement lisibles
   (4,6 à 5,8:1 en interne) mais posées à 17:1 de la page bleu nuit, elles brillaient comme
   des étiquettes blanches collées sur la carte. Ce n'était pas un défaut de contraste mais
   de cohérence.

   Heureux hasard : les fonds écrits à la main étaient déjà EXACTEMENT les valeurs claires
   de --mbp-color-terracotta-subtle (#fcf1eb) et --mbp-color-accent-subtle (#ebf5ef). Les
   brancher sur les jetons ne change donc rien en clair, et les fait basculer en sombre.
   Le bleu n'a pas de jeton : il reste littéral, mais APPARIÉ clair+sombre (voir plus bas),
   comme .mbp-pros-column. Un littéral apparié est légitime ; orphelin, non. */
.mbp-pick-tag.mbp-tag-luxe {
    background: var(--mbp-color-terracotta-subtle, #fcf1eb);
    color: var(--mbp-color-terracotta, #b44f25);
}

.mbp-pick-tag.mbp-tag-view {
    background: var(--mbp-color-accent-subtle, #ebf5ef);
    color: var(--mbp-color-accent, #1e6b45);
}

.mbp-pick-tag.mbp-tag-budget {
    background: #e8f1f5;
    color: #2b6cb0;
}

.mbp-pick-name {
    font-family: var(--mbp-font-sans, -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.35 !important;
}

.mbp-pick-name a {
    color: var(--mbp-color-heading, #121824);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mbp-pick-name a:hover {
    color: var(--mbp-color-accent, #1e6b45);
}

.mbp-pick-desc {
    font-size: 13px !important;
    color: var(--mbp-color-text-muted, #5e6b7c) !important;
    line-height: 1.5 !important;
    margin: 0 0 14px 0 !important;
    flex-grow: 1;
}

.mbp-pick-link-wrap {
    margin: 0 !important;
}

.mbp-pick-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--mbp-color-accent, #1e6b45);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s ease;
}

.mbp-pick-link:hover {
    gap: 8px;
    color: var(--mbp-color-accent-hover, #144d31);
}

/* 15.2. Fiche Adresse & Hébergement d'Exception (Hotel / Restaurant Card) */
.mbp-hotel-card {
    background: var(--mbp-color-surface, #ffffff);
    border: 1px solid var(--mbp-color-border, #eae6e0);
    border-radius: var(--mbp-radius-md, 14px);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    margin: 36px 0;
    display: grid !important;
    grid-template-columns: 290px 1fr !important;
    padding: 0 !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.mbp-hotel-card:hover {
    border-color: #d1c8bd;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08);
}

.mbp-hotel-card-media {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    margin: 0 !important;
    padding: 0 !important;
}

.mbp-hotel-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    margin: 0 !important;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.mbp-hotel-card:hover .mbp-hotel-card-media img {
    transform: scale(1.025);
}

.mbp-hotel-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(30, 107, 69, 0.95);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: var(--mbp-radius-pill, 9999px);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.mbp-hotel-card-body {
    padding: 24px 28px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 !important;
}

.mbp-hotel-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px 0 !important;
    font-size: 13px;
    color: var(--mbp-color-text-muted, #5e6b7c);
}

.mbp-hotel-card-top::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: var(--mbp-color-text-muted, #5e6b7c);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
    margin-right: -6px;
    flex-shrink: 0;
}

.mbp-hotel-price-pill {
    background: var(--mbp-color-surface-card, #faf8f5);
    border: 1px solid var(--mbp-color-border, #eae6e0);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--mbp-color-terracotta, #b44f25);
    display: inline-block;
    margin-left: 4px;
}

.mbp-hotel-card-title {
    font-family: var(--mbp-font-serif, 'Playfair Display', Georgia, serif) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.3 !important;
}

.mbp-hotel-card-title a {
    color: var(--mbp-color-heading, #121824);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mbp-hotel-card-title a:hover {
    color: var(--mbp-color-accent, #1e6b45);
}

.mbp-hotel-card-verdict {
    font-size: 14.5px !important;
    font-style: italic;
    /* Figé à #4a5568, sans jumeau sombre : 2,17:1 sur la carte sombre, alors que c'est la
       phrase d'accroche de chaque fiche. Le jeton donne 5,12:1 en clair et 6,89:1 en sombre. */
    color: var(--mbp-color-text-muted, #5e6b7c) !important;
    line-height: 1.6 !important;
    margin: 0 0 14px 0 !important;
    border-left: 2px solid var(--mbp-color-terracotta, #b44f25);
    padding-left: 12px;
}

.mbp-hotel-card-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mbp-hotel-card-features li {
    font-size: 13.5px !important;
    color: var(--mbp-color-text, #2c3038) !important;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.mbp-hotel-card-features li::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: var(--mbp-color-accent, #1e6b45);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
    flex-shrink: 0;
}

.mbp-hotel-card-cta-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--mbp-color-border, #eae6e0);
    margin: 0 !important;
}

/* Le fond suit var(--mbp-color-accent) : il BASCULE au menthe #34d399 en sombre. Le texte
   était figé à #ffffff — 1,92:1, illisible, sur le bouton qui monétise le site. On rend la
   main au jeton prévu pour ça : on-accent vaut #ffffff en clair (rendu inchangé, 6,47:1) et
   #04231a en sombre (8,67:1 au repos, 6,57:1 au survol). Aucune règle sombre à écrire. */
.mbp-btn-affiliate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mbp-color-accent, #1e6b45);
    color: var(--mbp-color-on-accent, #ffffff) !important;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: var(--mbp-radius-pill, 9999px);
    text-decoration: none !important;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(30, 107, 69, 0.25);
}

.mbp-btn-affiliate:hover {
    background: var(--mbp-color-accent-solid-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 107, 69, 0.35);
    color: var(--mbp-color-on-accent, #ffffff) !important;
}

.mbp-affiliate-micro-note {
    font-size: 12px;
    color: var(--mbp-color-text-muted, #5e6b7c);
    font-style: italic;
}

/* 15.3. Bloc Avis & Points Forts / Bon à savoir (Pros & Cons) */
.mbp-pros-cons-box {
    display: flex !important;
    gap: 18px !important;
    margin: 30px 0 !important;
}

.mbp-pros-column {
    flex: 1 1 50% !important;
    background: #f4faf6;
    border: 1px solid #d4edd9;
    border-radius: var(--mbp-radius-md, 14px);
    padding: 22px 24px !important;
    margin: 0 !important;
}

.mbp-cons-column {
    flex: 1 1 50% !important;
    background: #fdf8f4;
    border: 1px solid #f9e2d2;
    border-radius: var(--mbp-radius-md, 14px);
    padding: 22px 24px !important;
    margin: 0 !important;
}

.mbp-pros-title {
    color: #1e6b45 !important;
    font-family: var(--mbp-font-sans, sans-serif) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 14px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Ces pictogrammes sont des masques : c'est background-color qui les peint, pas color.
   La correction de contraste des encarts a rendu la main aux jetons sur le `color` des
   titres, mais ces deux ::before gardaient leur littéral clair — 2,37:1 et 3,16:1 sur les
   panneaux sombres. currentColor les arrime définitivement à la couleur du titre, déjà
   inversée : aucune règle sombre à écrire, et le lien ne peut plus se défaire. */
.mbp-pros-title::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
    flex-shrink: 0;
}

.mbp-cons-title {
    color: #b44f25 !important;
    font-family: var(--mbp-font-sans, sans-serif) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 14px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mbp-cons-title::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: currentColor;   /* voir .mbp-pros-title::before */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
    flex-shrink: 0;
}

.mbp-pros-list,
.mbp-cons-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mbp-pros-list li,
.mbp-cons-list li {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: #333d47 !important;
    position: relative;
    padding-left: 14px;
    margin: 0 !important;
    /* `list-style: none` posé sur le <ul> ne suffit pas : le parent vise le <li> en
       direct (`.post-entry ul li { list-style-type: square }`, spécificité 102 contre
       101 ici), et une déclaration directe bat l'héritage. Sans cette ligne, chaque
       puce était doublée — le carré du parent ET le point du ::before ci-dessous. */
    list-style: none !important;
}

/* Puces décoratives : les jetons accent et terracotta sont tous deux inversés en sombre,
   les brancher coûte zéro règle et évite un vert sombre posé sur un panneau sombre. */
.mbp-pros-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mbp-color-accent, #1e6b45);
}

.mbp-cons-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mbp-color-terracotta, #b44f25);
}

/* 15.4. Tableau Comparatif par Profil de Voyageur */
.mbp-comparison-table {
    margin: 32px 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--mbp-radius-md, 14px);
    border: 1px solid var(--mbp-color-border, #eae6e0);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    background: var(--mbp-color-surface, #ffffff);
}

.mbp-comparison-table table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
    min-width: 600px;
    margin: 0 !important;
}

.mbp-comparison-table thead tr {
    background: var(--mbp-color-surface-card, #faf8f5);
}

.mbp-comparison-table th {
    color: var(--mbp-color-heading, #121824);
    font-family: var(--mbp-font-sans, sans-serif);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 15px 18px;
    border-bottom: 2px solid var(--mbp-color-border, #eae6e0);
}

.mbp-comparison-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--mbp-color-border);
    color: var(--mbp-color-text, #2c3038);
    vertical-align: middle;
}

.mbp-comparison-table tr:last-child td {
    border-bottom: none;
}

.mbp-comparison-table tbody tr:hover td {
    background: var(--mbp-color-surface-soft);
}

.mbp-table-btn {
    display: inline-block;
    /* Même correction que les pastilles : le fond suit l'accent, la bordure reste un
       littéral apparié (sa contrepartie sombre est déclarée en §15.7). */
    background: var(--mbp-color-accent-subtle, #ebf5ef);
    color: var(--mbp-color-accent, #1e6b45) !important;
    font-weight: 700;
    font-size: 12.5px;
    padding: 6px 14px;
    border-radius: var(--mbp-radius-pill, 9999px);
    border: 1px solid #cce8d6;
    text-decoration: none !important;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mbp-table-btn:hover,
.mbp-table-btn:focus-visible {
    background: var(--mbp-color-accent-solid, #1e6b45);
    color: var(--mbp-color-on-accent, #ffffff) !important;
    border-color: var(--mbp-color-accent-solid, #1e6b45);
}

/* 15.5. Note de Transparence Éditoriale & Affiliation */
.mbp-disclosure-card {
    background: var(--mbp-color-surface-card, #faf8f5);
    border: 1px solid var(--mbp-color-border, #eae6e0);
    border-radius: 10px;
    padding: 16px 20px !important;
    margin: 28px 0 !important;
}

/* Le paragraphe doit rester un paragraphe : en flex, ses enfants deviennent des items.
   Le <strong> « Engagement éditorial : » se retrouvait rétréci à 49px et, avec le
   `word-break: break-word` du contenu d'article, se cassait au milieu des mots sur
   quatre lignes. L'icône pend donc à gauche d'un texte qui coule normalement. */
.mbp-disclosure-card p {
    font-size: 12.5px !important;
    color: var(--mbp-color-text-muted, #5e6b7c) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    display: block !important;
    position: relative;
    padding-left: 29px;   /* 17px d'icône + 12px de respiration */
}

.mbp-disclosure-card p::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: var(--mbp-color-accent, #1e6b45);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
    position: absolute;
    left: 0;
    top: 2px;
}

.mbp-disclosure-card strong {
    color: var(--mbp-color-heading, #121824);
    font-weight: 600;
}

/* 15.6. Responsive pour les Composants d'Affiliation */
@media (max-width: 768px) {
    .mbp-hotel-card {
        grid-template-columns: 1fr !important;
    }
    .mbp-hotel-card-media {
        min-height: 200px;
        max-height: 240px;
    }
    .mbp-hotel-card-body {
        padding: 20px !important;
    }
    .mbp-top-picks-box {
        padding: 20px !important;
    }
    .mbp-pick-item {
        flex: 1 1 100% !important;
    }
    .mbp-pros-cons-box {
        flex-direction: column !important;
    }
}
/* 15.7. Dark Mode pour les Composants d'Affiliation */
/* Contreparties sombres des boutons et encarts spécifiques */
html[data-theme="dark"] .mbp-pick-tag.mbp-tag-budget {
    background: rgba(124, 179, 232, 0.14);
    color: #7cb3e8;
}
html[data-theme="dark"] .mbp-table-btn {
    border-color: rgb(var(--mbp-color-accent-rgb) / 0.35);
}
html[data-theme="dark"] .mbp-btn-affiliate {
    background: var(--mbp-color-accent-solid) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .mbp-btn-affiliate:hover {
    background: var(--mbp-color-accent-solid-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}
/* Encarts avis délicats avec voiles légers */
html[data-theme="dark"] .mbp-pros-column {
    background: rgb(var(--mbp-color-accent-rgb) / 0.08) !important;
    border-color: rgb(var(--mbp-color-accent-rgb) / 0.25) !important;
}
html[data-theme="dark"] .mbp-cons-column {
    background: rgba(217, 130, 91, 0.08) !important;
    border-color: rgba(217, 130, 91, 0.25) !important;
}
html[data-theme="dark"] .mbp-pros-list li,
html[data-theme="dark"] .mbp-cons-list li {
    color: var(--mbp-color-text) !important;
}
html[data-theme="dark"] .mbp-pros-title {
    color: var(--mbp-color-accent) !important;
}
html[data-theme="dark"] .mbp-cons-title {
    color: var(--mbp-color-terracotta) !important;
}

/* ==========================================================================
   21. ZOOM AUTOMATIQUE DE SAFARI iOS SUR LES CHAMPS DE SAISIE
   ========================================================================== */

/*
 * Safari iOS zoome la page dès qu'un champ de SAISIE reçoit le focus avec une taille
 * inférieure à 16px, et ne dézoome pas ensuite : le visiteur doit pincer pour revenir.
 * Sur un blog voyage dont une bonne part du trafic est mobile, c'est une friction à
 * chaque recherche et à chaque commentaire.
 *
 * Ne sont visés que les champs de saisie de texte — seuls concernés par le zoom.
 * Les boutons d'envoi (#submit, 12,5px) ne le déclenchent pas et gardent leur taille.
 *
 * Chaque sélecteur est repris à l'identique de sa règle d'origine : la spécificité est
 * donc égale et c'est la position en fin de feuille qui fait gagner celle-ci.
 * Les recherches d'en-tête et du tiroir portent leur taille dans leurs modules CSS.
 * Ne pas déplacer ce bloc plus haut.
 *
 * Vérifié : aucune de ces règles n'est redéclarée à un palier plus étroit, la
 * substitution ne peut donc pas casser une mise en page pensée pour les petits écrans.
 */
@media only screen and (max-width: 768px) {
    .mbp-search-inline-form input[type="text"]{
        font-size: 16px;
    }
}

/* ==========================================================================
   22. GOUTTIÈRE LATÉRALE SOUS 480px (ALIGNEMENT DES SECTIONS MAISON)
   ========================================================================== */

/*
 * Sous 480px, Soledad cesse de contraindre « .container » par un max-width et ajoute
 * à la place 20px de retrait horizontal — mais seulement aux conteneurs qu'il connaît
 * (#footer-section > .container, #widget-area > .container, la zone de contenu). Les
 * sections ajoutées par le thème enfant possèdent leur propre .container, absent de
 * cette liste : elles filaient donc pleine largeur pendant que le fil d'articles et le
 * pied de page restaient à 20px du bord. C'est ce décrochage que l'on lisait comme un
 * « alignement qui varie ».
 *
 * Mesure à 390px avant correction :
 *     héros / thématiques / spotlight    0 → 390   (pleine largeur)
 *     fil d'articles / pied de page     20 → 370   (retrait de 20px)
 *
 * Le pied de page actuel utilise la largeur du conteneur éditorial et ses propres
 * règles dans css/refinements-2026.css ; il n’est pas visé par ce bloc historique.
 *
 * Au-dessus de 479px le défaut n'existe pas, toutes les sections s'alignant via le
 * max-width et les marges automatiques du conteneur (vérifié à 490px : les cinq
 * sections à 5|480). Le palier 479 est imposé par le thème parent — il échappe donc
 * volontairement à l'échelle du thème enfant décrite au §7 ter, sous peine de laisser
 * un intervalle non couvert entre les deux.
 */
@media only screen and (max-width: 479px) {
    .mbp-archive-header-wrap > .container,
.mbp-single-breadcrumb-wrap > .container{
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ==========================================================================
   23. OPTIMISATION ANTI-CLS & DÉFILEMENT FLUIDE (LAZY-LOADING STABLE)
   ========================================================================== */

/* 1. Galeries Gutenberg : reservation de l espace et stabilite des colonnes */
.wp-block-gallery.has-nested-images figure.wp-block-image {
    background-color: var(--mbp-color-surface-soft);
    overflow: hidden;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. Vignettes et modules Penci Lazy (Placeholders 1x1 proteges contre l effondrement) */
.penci_related-thumb,
.penci-image-holder {
    background-color: var(--mbp-color-surface-soft);
    min-height: 80px;
    display: block;
    position: relative;
    overflow: hidden;
}

.penci_related-thumb img,
.penci-image-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3. Defilement naturel sans blocage */
html {
    scroll-behavior: auto;
}