/* =============================================================
   BIO THEME — Header / Footer / Top bar (rendu PHP)
   Variables CSS injectées par Theme::inject_head_css()
   Compatibilité : Chrome 60+, Safari 12+, Firefox 60+, Edge 79+
   ============================================================= */

/* ============= ACCESSIBILITÉ ============= */
.bio-theme-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: var(--bio-h-accent, #8CB93F);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 8px 0;
    text-decoration: none;
    font-weight: 700;
}
.bio-theme-skip-link:focus {
    left: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}
.bio-theme-main-anchor {
    display: block;
    position: relative;
    /* Permet à #bio-theme-main d'être ciblé sans casser le layout */
    height: 0;
    overflow: hidden;
}
/* Focus visible global pour le module thème */
.bio-theme-header :focus-visible,
.bio-theme-footer :focus-visible,
.bio-theme-topbar :focus-visible {
    outline: 2px solid var(--bio-h-accent, #8CB93F);
    outline-offset: 2px;
    /* pas de border-radius : déformait les boutons ronds du header (icône
       panier 50% → carrée). L'outline suit le radius propre de l'élément.
       fix v2.54.20 */
}

/* ============= TOP BAR ============= */
.bio-theme-topbar {
    background: var(--bio-tb-bg, #3E302B);
    color: var(--bio-tb-text, #fff);
    font-family: var(--bio-font, 'Quicksand', sans-serif);
    font-size: 13px;
    width: 100%;
}
.bio-theme-topbar-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
}
.bio-theme-topbar a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bio-theme-topbar-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0.7;
    -webkit-tap-highlight-color: transparent;
}
.bio-theme-topbar-close:hover { opacity: 1; }

/* ============= HEADER ============= */
.bio-theme-header {
    background: var(--bio-h-bg, #FAF8F3);
    color: var(--bio-h-text, #3E302B);
    font-family: var(--bio-font, 'Quicksand', sans-serif);
    font-size: var(--bio-font-size, 14px);
    width: 100%;
    position: relative;
    z-index: 100;
}
.bio-theme-header.is-sticky { position: sticky; top: 0; }
.bio-theme-header.has-shadow { box-shadow: 0 2px 12px rgba(60, 48, 43, 0.06); }
.bio-theme-header.is-scrolled.has-shadow { box-shadow: 0 4px 20px rgba(60, 48, 43, 0.10); }

.bio-theme-header-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}
/* Garantit que les deux lignes (top + nav) démarrent exactement au même X */
.bio-theme-header-inner > .bio-theme-row { padding-left: 0 !important; padding-right: 0 !important; }
.bio-theme-row-nav > .bio-main-container,
.bio-theme-row-nav .bio-desktop-view,
.bio-theme-row-nav .bio-rayons-bar { padding-left: 0 !important; margin-left: 0 !important; }

/* Lignes (avec fallback flex gap pour Safari ≤14) */
.bio-theme-row {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    gap: var(--bio-h-row-gap, 24px);
    box-sizing: border-box;
}
@supports not (gap: 1px) {
    .bio-theme-row > * + * { margin-left: var(--bio-h-row-gap, 24px); }
}

/* Top row classic / compact (compressé) */
.bio-theme-row-top {
    min-height: 64px;
    padding: var(--bio-h-pad-y, 8px) 0;
}
.layout-compact .bio-theme-row-top { min-height: 56px; }

/* Slots */
.bio-theme-slot { box-sizing: border-box; }
.bio-theme-slot-logo    { -ms-flex: 0 0 auto; flex: 0 0 auto; display: flex; align-items: center; }
.bio-theme-slot-search  {
    -ms-flex: 1 1 auto; flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    padding: 0 32px;   /* Aère la barre par rapport au logo et aux actions */
    box-sizing: border-box;
}
.bio-theme-slot-actions { -ms-flex: 0 0 auto; flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
.bio-theme-slot-rayons  { -ms-flex: 0 0 auto; flex: 0 0 auto; }

/* Layout : centered */
.layout-centered .bio-theme-row-centered {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    padding: var(--bio-h-pad-y, 12px) 0;
}
.layout-centered .bio-theme-slot-actions-left { justify-self: start; }
.layout-centered .bio-theme-slot-logo-center  { justify-self: center; }
.layout-centered .bio-theme-slot-actions       { justify-self: end; }
.layout-centered .bio-theme-row-search {
    padding: 0 0 12px;
    display: flex;
    justify-content: center;
}
.layout-centered .bio-theme-slot-search-wide { width: 100%; max-width: 600px; }

/* Logo */
.bio-theme-logo {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    line-height: 1;
}
.bio-theme-logo-img {
    display: block;
    -o-object-fit: contain; object-fit: contain;
    -o-object-position: left center; object-position: left center; /* cale le contenu visuel à gauche du canvas PNG */
}
/* Logo : aligne le bord gauche pile avec le bouton "Tous les rayons" en-dessous (les deux démarrent à x = header-inner padding) */
.bio-theme-slot-logo .bio-theme-logo { padding-left: 0; margin-left: 0; }
/* Aligne le bord gauche du logo avec le bord gauche du pill "Tous les rayons" (les deux démarrent à x = header-inner padding) */
.bio-theme-slot-logo { margin-left: 0; }
.bio-theme-logo-text {
    font-weight: 700;
    font-size: var(--bio-logo-size, 18px);
    letter-spacing: 0.5px;
    color: inherit;
    white-space: nowrap;
}


/* Recherche maison — dimensionnement du wrapper dans le header.
   (Le style de la barre et du panneau vit dans bio-search.css.) */
.bio-theme-search.bio-search-wrap {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    width: 100%;
    max-width: 820px;
    min-width: 0;
    position: relative;
    box-sizing: border-box;
}

/* Search fallback */
.bio-theme-search-fallback {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    width: 100%;
    max-width: 820px;
    background: #fff;
    border-radius: 50px;
    border: 1.5px solid var(--bio-border-warm, #e8e3dc);
    padding: 4px 4px 4px 20px;
    height: 48px;
    box-sizing: border-box;
    -webkit-transition: border-color 0.2s ease, box-shadow 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bio-theme-search-fallback:hover {
    border-color: var(--bio-green-soft);
}
.bio-theme-search-fallback:focus-within {
    border-color: var(--bio-h-accent, #8CB93F);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(var(--bio-green-rgb), 0.25);
}
.bio-theme-search-fallback input[type="search"] {
    -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 15px;
    color: var(--bio-h-text, #3e302b);
    font-family: inherit;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
}
.bio-theme-search-fallback input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.bio-theme-search-fallback button {
    -ms-flex: 0 0 auto; flex: 0 0 auto;
    background: var(--bio-h-accent, #8CB93F);
    border: 0;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    -webkit-transition: opacity 0.15s; transition: opacity 0.15s;
}
.bio-theme-search-fallback button:hover { opacity: 0.9; }

/* Account */
.bio-theme-account {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--bio-h-text, #3E302B);
    font-weight: var(--bio-font-weight-links, 700);
    font-size: var(--bio-font-size, 14px);
    white-space: nowrap;
    -webkit-transition: opacity 0.15s; transition: opacity 0.15s;
}
.bio-theme-account:hover { opacity: 0.8; }
.bio-theme-account-icon {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 50%;
    -webkit-box-shadow: 0 3px 12px rgba(62, 48, 43, 0.08);
    box-shadow: 0 3px 12px rgba(62, 48, 43, 0.08);
    color: var(--bio-h-accent, #8CB93F);
    position: relative;
}
.bio-theme-account.is-logged-in .bio-theme-account-icon::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: var(--bio-h-accent, #8CB93F);
    border: 2px solid #fff;
    border-radius: 50%;
}
.bio-theme-account-label {
    font-weight: var(--bio-font-weight-links, 700);
    letter-spacing: -0.2px;
}

/* Cart */
.bio-theme-cart {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}

/* Nav row (rayons) — compressé, pas de séparateur visuel */
.bio-theme-row-nav {
    border-top: 0;
    padding: 0 0 2px;
    min-height: 44px;
    margin-top: var(--bio-h-rows-gap, -14px); /* réglable dans Structure & espacements */
}
.bio-theme-row-nav .bio-main-container { width: 100%; }
.layout-compact .bio-theme-row-nav { display: none; } /* rayons sont dans la ligne du haut */

/* ===== Disposition LIBRE (layout-custom) — zones du glisser-déposer =====
   2 lignes × 3 zones (gauche / centre / droite). Chaque zone rend ses
   éléments dans l'ordre composé dans l'éditeur visuel.
   RÈGLE ANTI-TROUS : une zone vide est SORTIE du flux (display:none) —
   sinon elle garde ses deux gaps flex et crée des espacements fantômes.
   L'éditeur les re-matérialise uniquement pendant un glisser. */
.bio-theme-zone {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    gap: var(--bio-h-row-gap, 24px); /* même respiration que les lignes */
    min-width: 0;
    box-sizing: border-box;
}
.bio-theme-zone.is-empty { display: none; }
.layout-custom .bio-theme-row-top { -ms-flex-pack: justify; justify-content: space-between; }
.bio-theme-zone-left   { -ms-flex-pack: start; justify-content: flex-start; }
.bio-theme-zone-center { -ms-flex: 1 1 auto; flex: 1 1 auto; -ms-flex-pack: center; justify-content: center; }
.bio-theme-zone-right  { -ms-flex-pack: end; justify-content: flex-end; }
/* Centre vide masqué : gauche/droite se répartissent naturellement
   (space-between) — pas de « gros vide » au milieu. */
/* La recherche garde sa PLEINE largeur où qu'on la dépose : sa zone devient
   extensible (has-search → flex:1, comme la slot-search du mode classique)
   et la barre s'étire dedans sans plafond. Les voisins de zone (compte,
   panier…) gardent leur taille naturelle (flex:0). */
.bio-theme-zone.has-search { -ms-flex: 1 1 auto; flex: 1 1 auto; }
.bio-theme-zone .bio-search-wrap { -ms-flex: 1 1 auto; flex: 1 1 auto; max-width: none; min-width: 200px; }
/* Sur les tres petits ecrans, ce min-width de 200px depasse la zone qui l'accueille : la barre
   deborde, et sous ~345px le bouton loupe est coupe (5 px manquants a 320px, mesure). Le
   debordement ne se voyait pas car body{overflow-x:clip} le masque : pas de barre horizontale,
   juste du contenu tronque. On rend donc le minimum negociable en dessous de 400px. Regle
   posee JUSTE APRES l'originale et a specificite egale : l'ordre source tranche, quel que
   soit l'ordre de chargement des feuilles. */
@media (max-width: 400px) {
    .bio-theme-zone .bio-search-wrap { min-width: 0; }
}
.bio-theme-zone > *:not(.bio-search-wrap) { -ms-flex: 0 1 auto; flex: 0 1 auto; } /* taille naturelle, peut se compresser si manque de place */
.layout-custom .bio-theme-row-nav .bio-main-container { width: auto; }
/* Ligne du bas : n'existe que si elle contient quelque chose */
.layout-custom .bio-theme-row-nav { display: -ms-flexbox; display: flex; }
.layout-custom .bio-theme-row-nav:not(.has-items) { display: none; }

/* La classe has-items est posée côté serveur : elle sait ce qui est configuré, pas ce
   qui s'affiche vraiment. Sur mobile les rayons et le menu partent dans le tiroir et la
   rangée se retrouve sans aucun descendant visible — mais sa marge négative la laisse
   posée en travers de la rangée du haut, où elle interceptait les appuis sur le bas du
   champ de recherche. Elle ne capte plus rien ; ses enfants restent cliquables. */
.bio-theme-row-nav { pointer-events: none; }
.bio-theme-row-nav > * { pointer-events: auto; }

@media (max-width: 900px) {
    .layout-custom .bio-theme-row-top { flex-wrap: wrap; }
    .layout-custom .bio-theme-zone { -ms-flex-wrap: wrap; flex-wrap: wrap; }
}

/* Visibilité mobile par élément (v2.57.0) — réglée dans l'éditeur visuel.
   Posée sur l'élément lui-même : survit au glisser-déposer entre zones. */
@media (max-width: 900px) {
    .bio-hide-mobile { display: none !important; }
}


/* NOTE : la responsive mobile complète (header simplifié, body padding,
   bottom nav, sticky ATC, anti-zoom iOS, safe areas) est dans
   bio-theme-mobile.css (enqueué juste après celui-ci). */


/* =============================================================
   FOOTER
   ============================================================= */
.bio-theme-footer {
    background: var(--bio-f-bg, #3E302B);
    color: var(--bio-f-text, #FAF8F3);
    font-family: var(--bio-font, 'Quicksand', sans-serif);
    font-size: var(--bio-font-size, 14px);
    line-height: 1.6;
}

.bio-theme-footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--bio-f-pad-y, 64px) 24px 32px;
    display: grid;
    gap: 48px;
    box-sizing: border-box;
}
.bio-theme-footer.footer-cols-4 .bio-theme-footer-inner { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; }
.bio-theme-footer.footer-cols-3 .bio-theme-footer-inner { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.bio-theme-footer.footer-cols-2 .bio-theme-footer-inner { grid-template-columns: 1.3fr 1fr 1fr; }
.bio-theme-footer.footer-cols-1 .bio-theme-footer-inner { grid-template-columns: 1.3fr 1fr; }

/* Version sans bloc de marque (no-brand) */
.bio-theme-footer.footer-cols-4.no-brand .bio-theme-footer-inner { grid-template-columns: 1fr 1fr 1fr 1fr; }
.bio-theme-footer.footer-cols-3.no-brand .bio-theme-footer-inner { grid-template-columns: 1fr 1fr 1fr; }
.bio-theme-footer.footer-cols-2.no-brand .bio-theme-footer-inner { grid-template-columns: 1fr 1fr; }
.bio-theme-footer.footer-cols-1.no-brand .bio-theme-footer-inner { grid-template-columns: 1fr; }
.bio-theme-footer.footer-cols-0.no-brand .bio-theme-footer-inner { display: none; }

.bio-theme-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.bio-theme-footer-logo {
    max-width: 130px;
    max-height: 80px;
    height: auto;
    width: auto;
    object-fit: contain;
}
.bio-theme-footer-about {
    margin: 0;
    color: inherit;
    opacity: 0.85;
    max-width: 300px;
    font-size: 13px;
    line-height: 1.6;
}
.bio-theme-footer-about p { margin: 0 0 8px; }

.bio-theme-footer-cols { display: contents; }
.bio-theme-footer-col-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 20px;
    color: var(--bio-f-accent, #8CB93F);
    position: relative;
    padding-bottom: 10px;
}
.bio-theme-footer-col-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background: var(--bio-f-accent, #8CB93F);
    border-radius: 2px;
}
.bio-theme-footer-col-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bio-theme-footer-col-list li { margin-bottom: 8px; }
.bio-theme-footer-col-list a {
    color: inherit;
    text-decoration: none;
    opacity: 0.75;
    display: inline-flex;
    align-items: center;
    padding: 2px 0;
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.bio-theme-footer-col-list a:hover {
    opacity: 1;
    color: var(--bio-f-accent, #8CB93F);
    transform: translateX(4px);
}
.bio-theme-footer-text-item {
    color: inherit;
    opacity: 0.75;
    display: inline-flex;
    align-items: center;
    padding: 2px 0;
    line-height: 1.4;
}

/* Bas du Footer */
.bio-theme-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.15);
}
.bio-theme-footer-bottom .bio-theme-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    gap: 24px;
}
.bio-theme-footer-payments {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    flex: 1;
}
.bio-payments-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}
.bio-payments-icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.bio-payments-icons .bio-pay-icon {
    width: 38px !important;
    height: 25px !important;
    max-width: 38px !important;
    max-height: 25px !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    flex-shrink: 0 !important;
    opacity: 0.9;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden !important;
}
.bio-payments-icons .bio-pay-icon:hover {
    opacity: 1;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}
.bio-payments-icons .bio-pay-icon svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    margin: 0 !important;
}
.bio-theme-footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    justify-content: flex-end;
}
.bio-theme-footer-copyright {
    font-size: 13px;
    opacity: 0.7;
}
.bio-theme-footer-social {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.bio-theme-footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: var(--bio-f-text, #FAF8F3);
    transition: background 0.15s, transform 0.15s;
}
.bio-theme-footer-social a:hover {
    background: var(--bio-f-accent, #8CB93F);
    color: #fff;
    transform: translateY(-2px);
}

/* Bandeau Prévention Alcool (Intégré) */
.bio-theme-footer-prevention-bar {
    flex: 0 1 520px;
    width: 100%;
    margin: 0 auto;
}
.bio-prevention-container {
    background: var(--bio-cream, #FAF8F3);
    border: 1px solid rgba(62, 48, 43, 0.1);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.bio-prevention-marianne {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border-right: 1px solid rgba(62, 48, 43, 0.15);
    padding-right: 14px;
}
.bio-logo-marianne {
    display: block;
}
.bio-prevention-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: Arial, sans-serif;
    line-height: 1.35;
    text-align: left;
}
.bio-prevention-text strong {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.1px;
    color: var(--bio-brown-dark);
}
.bio-prevention-sub {
    font-size: 10px;
    font-weight: 600;
    color: var(--bio-brown);
}
.bio-prevention-law {
    font-size: 8px;
    font-weight: 700;
    opacity: 0.7;
    text-transform: uppercase;
    color: var(--bio-brown);
    letter-spacing: 0.2px;
}

/* Fallback grid */
@supports not (display: grid) {
    .bio-theme-footer-inner {
        display: block;
    }
    .bio-theme-footer-brand,
    .bio-theme-footer-col {
        margin-bottom: 32px;
    }
}

/* Responsive footer */
@media (max-width: 1024px) {
    .bio-theme-footer[class*="footer-cols-"] .bio-theme-footer-inner {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32px;
    }
    .bio-theme-footer-brand { grid-column: 1 / -1; max-width: 100%; }

    /* Le nombre de colonnes de la grille doit diviser le nombre de colonnes de liens,
       sinon la dernière se retrouve seule sur une ligne. Avec quatre colonnes dans une
       grille de trois, « Contact » tombait à la ligne, tout seul, sous « Boutique ».
       Un 2x2 tient de 601 à 1024 px sans point de rupture supplémentaire : la colonne
       la plus large (l'adresse e-mail, 203 px) ne passerait en quatre colonnes qu'au
       delà de 960 px. */
    .bio-theme-footer.footer-cols-4 .bio-theme-footer-inner,
    .bio-theme-footer.footer-cols-2 .bio-theme-footer-inner { grid-template-columns: 1fr 1fr; }
    .bio-theme-footer.footer-cols-1 .bio-theme-footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .bio-theme-footer[class*="footer-cols-"] .bio-theme-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
    .bio-theme-footer-bottom .bio-theme-footer-inner {
        flex-direction: column;
        gap: 20px;
        padding: 24px 16px;
        text-align: center;
    }
    .bio-theme-footer-payments {
        flex: none;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
    }
    .bio-theme-footer-prevention-bar {
        order: -1;
        flex: none;
    }
    .bio-theme-footer-bottom-right {
        flex: none;
        flex-direction: column;
        gap: 16px;
        justify-content: center;
    }
}
@media (max-width: 600px) {
    .bio-theme-footer[class*="footer-cols-"] .bio-theme-footer-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 48px 20px 32px;
    }
    .bio-theme-footer-brand {
        align-items: center;
        text-align: center;
    }
    .bio-theme-footer-about {
        max-width: 100%;
    }
    .bio-theme-footer-col {
        text-align: center;
    }
    .bio-theme-footer-col-title {
        padding-bottom: 8px;
    }
    .bio-theme-footer-col-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .bio-prevention-container {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding: 14px;
    }
    .bio-prevention-marianne {
        border-right: 0;
        padding-right: 0;
        border-bottom: 1px solid rgba(62, 48, 43, 0.15);
        padding-bottom: 12px;
        width: 100%;
        justify-content: center;
    }
    .bio-prevention-text {
        text-align: center;
    }
}

/* Print-friendly */
@media print {
    .bio-theme-header.is-sticky { position: static !important; }
    .bio-theme-topbar { display: none; }
    .bio-theme-footer-social { display: none; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .bio-theme-header,
    .bio-theme-account,
    .bio-theme-footer-social a {
        -webkit-transition: none !important; transition: none !important;
    }
}

/* =============================================================
   MINI CART — Redesign premium ghost
   Override des styles de biomonde-frontend.css pour s'aligner
   à la DA du thème (header drawer style).
   ============================================================= */

/* Header du panel : blanc, sentence case */
.bio-side-cart-panel .bio-cart-header {
    background: #fff !important;
    border-bottom: 1px solid #f0ede8 !important;
    height: 64px !important;
    padding: 12px 20px !important;
}
.bio-side-cart-panel .header-title {
    font-weight: 700 !important;
    text-transform: none !important;
    font-size: 16px !important;
    color: var(--bio-h-text, #3E302B) !important;
    letter-spacing: -0.2px;
    font-family: var(--bio-font, 'Quicksand', sans-serif);
}

/* Close X : ghost, plus de rotate au hover */
.bio-side-cart-panel .bio-close-btn,
#bio-side-cart .bio-close-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--bio-h-text, #3E302B) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: background-color 0.18s ease !important;
    transition: background-color 0.18s ease !important;
    -webkit-transform: none !important;
    transform: none !important;
}
.bio-side-cart-panel .bio-close-btn:hover,
#bio-side-cart .bio-close-btn:hover {
    background: rgba(60, 48, 43, 0.06) !important;
    color: var(--bio-h-text, #3E302B) !important;
    -webkit-transform: none !important;
    transform: none !important; /* on annule le rotate(90deg) du CSS original */
}
.bio-side-cart-panel .bio-close-btn:active,
#bio-side-cart .bio-close-btn:active {
    background: rgba(60, 48, 43, 0.10) !important;
}
.bio-side-cart-panel .bio-close-btn:focus-visible,
#bio-side-cart .bio-close-btn:focus-visible {
    outline: 2px solid var(--bio-h-accent, #8CB93F) !important;
    outline-offset: 2px;
}

/* Footer actions : pills propres */
.bio-side-cart-panel .bio-action-btn,
#bio-side-cart .bio-action-btn {
    text-transform: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.1px;
    border-width: 1.5px !important;
    -webkit-transition: background 0.18s, color 0.18s, border-color 0.18s !important;
    transition: background 0.18s, color 0.18s, border-color 0.18s !important;
}

/* "Voir le panier" : ghost outlined */
.bio-side-cart-panel .bio-btn-view,
#bio-side-cart .bio-btn-view {
    background: transparent !important;
    border-color: rgba(60, 48, 43, 0.15) !important;
    color: var(--bio-h-text, #3E302B) !important;
}
.bio-side-cart-panel .bio-btn-view:hover,
#bio-side-cart .bio-btn-view:hover {
    background: rgba(60, 48, 43, 0.05) !important;
    border-color: var(--bio-h-text, #3E302B) !important;
    color: var(--bio-h-text, #3E302B) !important;
}

/* "Commander" : accent solid, sans ombre disgracieuse */
.bio-side-cart-panel .bio-btn-checkout,
#bio-side-cart .bio-btn-checkout {
    background: var(--bio-h-accent, #8CB93F) !important;
    border-color: var(--bio-h-accent, #8CB93F) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.bio-side-cart-panel .bio-btn-checkout:hover,
#bio-side-cart .bio-btn-checkout:hover {
    -webkit-filter: brightness(0.94);
    filter: brightness(0.94);
    background: var(--bio-h-accent, #8CB93F) !important;
    border-color: var(--bio-h-accent, #8CB93F) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* "Vider le panier" : lien subtil */
.bio-side-cart-panel .bio-trash-link,
#bio-side-cart .bio-trash-link {
    -webkit-appearance: none !important;
    appearance: none !important;
    text-transform: none !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    color: var(--bio-text-cats, #999) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 6px !important;
    border-radius: 8px !important;
    -webkit-transition: color 0.18s, background-color 0.18s !important;
    transition: color 0.18s, background-color 0.18s !important;
}
.bio-side-cart-panel .bio-trash-link:hover,
#bio-side-cart .bio-trash-link:hover {
    color: var(--bio-red, #e74c3c) !important;
    background: rgba(231, 76, 60, 0.06) !important;
}

/* Compteur dans le header — un peu plus subtle */
.bio-side-cart-panel .bio-header-count-val,
#bio-side-cart #bio-header-count {
    font-weight: 600;
    opacity: 0.6;
}

/* Bouton "Découvrir nos produits" (cart vide) : ghost accent */
.bio-side-cart-panel .bio-empty-cart-msg .bio-empty-cta,
#bio-side-cart .bio-empty-cart-msg .bio-empty-cta {
    background: var(--bio-h-accent, #8CB93F) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    padding: 10px 18px !important;
}
.bio-side-cart-panel .bio-empty-cart-msg .bio-empty-cta:hover,
#bio-side-cart .bio-empty-cart-msg .bio-empty-cta:hover {
    -webkit-filter: brightness(0.94);
    filter: brightness(0.94);
}

/* ===========================================================================
   PERSONNALISATION HEADER v2.55.2 — largeur, fond nav, menu perso, CTA
   =========================================================================== */
/* Largeur max pilotée par le réglage (défaut 1400px) */
.bio-theme-header-inner { max-width: var(--bio-h-maxw, 1400px); }

/* Fond optionnel de la ligne navigation (rayons + menu perso) */
.bio-theme-row-nav { background: var(--bio-h-nav-bg, transparent); border-radius: var(--bio-radius, 10px); }

/* Menu personnalisé du magasin (Apparence > Menus → Header Biomonde) */
.bio-theme-custom-menu { display: flex; align-items: center; min-width: 0; }
.bio-theme-custom-menu-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.bio-theme-custom-menu-list li { margin: 0; }
.bio-theme-custom-menu-list a {
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    border-radius: 50px;
    color: var(--bio-h-text, #3E302B);
    font-weight: var(--bio-font-weight-links, 600);
    font-size: var(--bio-font-size, 14px);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s, color 0.18s;
}
.bio-theme-custom-menu-list a:hover,
.bio-theme-custom-menu-list .current-menu-item a {
    background: var(--bio-h-btn-bg, #F0EBE0);
    color: var(--bio-h-accent, #8CB93F);
}
/* Position "ligne logo" : compression douce si l'espace manque */
.bio-theme-slot-menu { min-width: 0; overflow: hidden; }
.bio-theme-slot-menu .bio-theme-custom-menu-list { flex-wrap: nowrap; }

/* Bouton d'action (CTA) */
.bio-theme-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bio-cta-bg, var(--bio-h-accent, #8CB93F));
    color: var(--bio-cta-color, #fff) !important;
    border: 2px solid var(--bio-cta-bg, var(--bio-h-accent, #8CB93F));
    border-radius: 50px;
    padding: 9px 18px;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: filter 0.18s, background-color 0.18s, color 0.18s;
}
.bio-theme-cta:hover { filter: brightness(0.92); }
.bio-theme-cta.is-outline {
    background: transparent;
    color: var(--bio-cta-bg, var(--bio-h-accent, #8CB93F)) !important;
}
.bio-theme-cta.is-outline:hover {
    background: var(--bio-cta-bg, var(--bio-h-accent, #8CB93F));
    color: var(--bio-cta-color, #fff) !important;
    filter: none;
}
@media (max-width: 900px) {
    /* Le menu perso ne tient pas sur la ligne logo en mobile → masqué là,
       (il reste accessible via la ligne nav si position "nav"). */
    .bio-theme-slot-menu { display: none; }
    .bio-cta-hide-mobile { display: none !important; }
    .bio-theme-cta { padding: 8px 13px; font-size: 12px; }
    .bio-theme-custom-menu-list { gap: 2px; }
    .bio-theme-custom-menu-list a { padding: 7px 10px; font-size: 13px; }
}

/* =============================================================
   DA BIOMONDE — Fiche Produit & Paniers Garnis (Single Product)
   ============================================================= */

/* 1. Titre Produit / Panier Garni */
.single-product .product_title,
.single-product h1.product_title {
    font-family: var(--bio-font, 'Quicksand', sans-serif) !important;
    color: var(--bio-brown-dark, #3E302B) !important;
    font-weight: 700 !important;
}

/* 2. Prix du produit / panier */
.single-product .price,
.single-product p.price,
.single-product .price span.amount,
.single-product .price ins .amount {
    color: var(--bio-green-dark, #6BA032) !important;
    font-family: var(--bio-font, 'Quicksand', sans-serif) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}
.single-product .price ins,
.single-product .price ins *,
.single-product ins {
    text-decoration: none !important;
    border-bottom: none !important;
}
.single-product .price del,
.single-product .price del .amount {
    color: #998B82 !important;
    font-weight: 600 !important;
}

/* 3. Bouton "Ajouter au panier" WooCommerce CTA */
.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button,
.single-product form.cart .button {
    background-color: var(--bio-green, #8CB93F) !important;
    background: var(--bio-green, #8CB93F) !important;
    color: #FFFFFF !important;
    font-family: var(--bio-font, 'Quicksand', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    padding: 12px 28px !important;
    border-radius: var(--bio-radius-pill, 999px) !important;
    border: 1.5px solid var(--bio-green, #8CB93F) !important;
    box-shadow: 0 4px 14px rgba(140, 185, 63, 0.3) !important;
    transition: all 0.2s ease !important;
}
.single-product .single_add_to_cart_button:hover,
.single-product button.single_add_to_cart_button:hover,
.single-product form.cart .button:hover {
    background-color: var(--bio-green-dark, #6BA032) !important;
    background: var(--bio-green-dark, #6BA032) !important;
    border-color: var(--bio-green-dark, #6BA032) !important;
    color: #FFFFFF !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 18px rgba(107, 160, 50, 0.4) !important;
}

/* 4. Pastilles / Badges (En Stock, Code Panier Garni, Promo -10%) */
.single-product .stock,
.single-product .in-stock,
.single-product .badge-stock,
.single-product .wc-badge {
    background-color: #F1F7E6 !important;
    color: var(--bio-green-dark, #6BA032) !important;
    border-radius: var(--bio-radius-pill, 999px) !important;
    font-family: var(--bio-font, 'Quicksand', sans-serif) !important;
    font-weight: 700 !important;
}
.single-product .onsale,
.single-product span.onsale {
    background-color: var(--bio-green, #8CB93F) !important;
    color: #FFFFFF !important;
    font-family: var(--bio-font, 'Quicksand', sans-serif) !important;
    font-weight: 800 !important;
    border-radius: var(--bio-radius-pill, 999px) !important;
}

/* 5. Champ Quantité */
.single-product .quantity input.qty {
    border: 1.5px solid var(--bio-border-warm, #E8E3DC) !important;
    border-radius: var(--bio-radius-pill, 999px) !important;
    font-family: var(--bio-font, 'Quicksand', sans-serif) !important;
    color: var(--bio-brown-dark, #3E302B) !important;
    font-weight: 700 !important;
}
.single-product .quantity input.qty:focus {
    border-color: var(--bio-green, #8CB93F) !important;
    outline: none !important;
}

/* 6. Onglets Description & Avis (Tabs WooCommerce) */
.single-product div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--bio-font, 'Quicksand', sans-serif) !important;
    color: var(--bio-brown-dark, #3E302B) !important;
    font-weight: 700 !important;
}
.single-product div.product .woocommerce-tabs ul.tabs li.active a,
.single-product div.product .woocommerce-tabs ul.tabs li.active {
    color: var(--bio-green-dark, #6BA032) !important;
    border-bottom-color: var(--bio-green, #8CB93F) !important;
}
.single-product div.product .woocommerce-tabs ul.tabs li.active::after,
.single-product div.product .woocommerce-tabs ul.tabs li a::after {
    background: var(--bio-green, #8CB93F) !important;
}

/* 7. Cartes des sous-produits de la composition (Bundle Station) */
.bio-bundle-composition {
    margin-top: 24px !important;
    padding: 24px !important;
    background: #FAF8F5 !important;
    border: 1px solid var(--bio-border-warm, #E8E3DC) !important;
    border-radius: var(--bio-card-radius, 20px) !important;
    color: var(--bio-brown-dark, #3E302B) !important;
}
.bio-bundle-card {
    background: #FFFFFF !important;
    border: 1px solid var(--bio-border-warm, #E8E3DC) !important;
    border-radius: var(--bio-radius-md, 14px) !important;
    color: var(--bio-brown-dark, #3E302B) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.bio-bundle-card:hover {
    border-color: var(--bio-green, #8CB93F) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(62, 48, 43, 0.08) !important;
}
.bio-bundle-card-name {
    font-family: var(--bio-font, 'Quicksand', sans-serif) !important;
    color: var(--bio-brown-dark, #3E302B) !important;
    font-weight: 700 !important;
}
.bio-bundle-card-qty {
    color: var(--bio-green-dark, #6BA032) !important;
    font-weight: 700 !important;
    background: #F1F7E6 !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
}
.bio-bundle-card-price {
    color: var(--bio-brown-dark, #3E302B) !important;
    font-weight: 700 !important;
}

/* 8. Badges de navigation haut de fiche produit (Retour = Blanc, Magasin = Vert pastel, Panier = Vert marque) */
body.single-product .bio-nav-btn {
    background: #FFFFFF !important;
    color: var(--bio-brown-dark, #3E302B) !important;
    border: 1px solid var(--bio-border-warm, #E8E3DC) !important;
}

body.single-product .bio-nav-btn.btn-shop,
body.single-product .bio-nav-btn.is-magasin,
body.single-product a.bio-nav-btn[href*="magasin"] {
    background: #F1F7E6 !important;
    color: var(--bio-green-dark, #6BA032) !important;
    border: 1px solid var(--bio-green-soft, #B8D97A) !important;
}

body.single-product .bio-nav-bundle,
body.single-product .bio-badge-bundle,
body.single-product .badge-panier-garni {
    background: var(--bio-green, #8CB93F) !important;
    color: #FFFFFF !important;
    border: none !important;
}

/* 9. Bouton Hero Homepage "Je fais mes courses" (100% collé à la marge gauche & Token Beige) */
.home .elementor-heading-title,
.home h1.elementor-heading-title,
.home .elementor-widget-heading .elementor-heading-title {
    color: var(--bio-cream, #FAF8F3) !important;
}

.home .elementor-heading-title span,
.home h1 span,
.home .elementor-widget-heading span {
    color: var(--bio-green, #8CB93F) !important;
}

.home .elementor-widget-text-editor,
.home .elementor-widget-text-editor p,
.home .elementor-text-editor {
    color: var(--bio-cream, #FAF8F3) !important;
}

.home .elementor-widget-button,
.home .elementor-widget-button .elementor-widget-container,
.home .elementor-widget-button .elementor-button-wrapper,
.home .elementor-widget-button .elementor-button-container,
.home .elementor-button-wrapper,
.home .elementor-button-container {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: flex-start !important;
}

.home .elementor-button,
.home a.elementor-button,
.home .elementor-button-wrapper a.elementor-button,
.home .elementor-widget-button a.elementor-button-link {
    margin-left: 0 !important;
    margin-right: auto !important;
    align-self: flex-start !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background-color: var(--bio-green, #8CB93F) !important;
    background: var(--bio-green, #8CB93F) !important;
    color: #FFFFFF !important;
    font-family: var(--bio-font, 'Quicksand', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    padding: 14px 32px !important;
    border-radius: var(--bio-radius-pill, 999px) !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(140, 185, 63, 0.35) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.home .elementor-button:hover,
.home a.elementor-button:hover,
.home .elementor-button-wrapper a.elementor-button:hover,
.home .elementor-widget-button a.elementor-button-link:hover {
    background-color: var(--bio-green-dark, #6BA032) !important;
    background: var(--bio-green-dark, #6BA032) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(107, 160, 50, 0.45) !important;
}

/* 10. Mégamenu Header "Tous les rayons" (Beige Discret & Épuré) */
.bio-mega-btn-wrapper .bio-mega-btn,
.bio-mega-btn {
    background: var(--bio-cream, #FAF8F5) !important;
    background-color: var(--bio-cream, #FAF8F5) !important;
    color: var(--bio-brown-dark, #3E302B) !important;
    border: 1px solid var(--bio-border-warm, #E8E3DC) !important;
    border-radius: var(--bio-radius-pill, 999px) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(62, 48, 43, 0.04) !important;
}

.bio-mega-btn-wrapper .bio-mega-btn:hover,
.bio-mega-btn:hover {
    background: #F0EBE0 !important;
    background-color: #F0EBE0 !important;
    border-color: #D8D1C7 !important;
    color: var(--bio-brown-dark, #3E302B) !important;
}

.bio-mega-btn .bio-icon-main,
.bio-mega-btn svg {
    fill: var(--bio-brown-dark, #3E302B) !important;
    color: var(--bio-brown-dark, #3E302B) !important;
    stroke: var(--bio-brown-dark, #3E302B) !important;
}

.bio-col-item:hover,
.bio-col-item.active,
.bio-col1-item.active,
.bio-col1-item:hover,
.bio-col2-item.active .bio-col-link,
.bio-col2-item:hover .bio-col-link,
.bio-col3-item.active .bio-col-link,
.bio-col3-item:hover .bio-col-link {
    background-color: #FAF8F5 !important;
    background: #FAF8F5 !important;
}

.bio-col-item:hover .bio-col-link,
.bio-col-item.active .bio-col-link,
.bio-col1-item.active .bio-col-link,
.bio-col2-item.active .bio-col-link,
.bio-col3-item.active .bio-col-link,
.bio-panel-header-title {
    color: var(--bio-green-dark, #6BA032) !important;
    font-weight: 700 !important;
}

.bio-tout-voir {
    background: #F1F7E6 !important;
    background-color: #F1F7E6 !important;
    color: var(--bio-green-dark, #6BA032) !important;
    border: 1px solid #D4E8B0 !important;
    font-weight: 700 !important;
}

.bio-tout-voir:hover {
    background: var(--bio-green, #8CB93F) !important;
    color: #FFFFFF !important;
    border-color: var(--bio-green, #8CB93F) !important;
}

.bio-col1-item:hover::before,
.bio-col1-item.active::before {
    width: 4px !important;
    background: var(--bio-green, #8CB93F) !important;
}

.bio-3cols-container {
    border-top: 4px solid var(--bio-green, #8CB93F) !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 16px 48px rgba(62, 48, 43, 0.12) !important;
}