/* =============================================================
   BIO THEME MOBILE — tout le mobile dans un seul fichier
   - Bottom nav (Accueil / Rayons / Panier / Compte)
   - Header simplifié (logo + search)
   - Safe area iOS (encoche + home indicator)
   - Touch targets ≥ 44px (WCAG)
   - Anti-zoom iOS sur inputs (font-size 16px)
   - Sticky ATC (page produit)
   =============================================================

   ┌─────────────────────────────────────────────────────────────┐
   │ PATTERN STICKY BOTTOM CTA — pour ajouter un nouveau sticky  │
   └─────────────────────────────────────────────────────────────┘

   Système adaptatif : la hauteur RÉELLE du bottom nav est mesurée
   au runtime par bio-theme-mobile.js (fonction initBottomBarMeasure)
   et exposée sur `:root` via deux variables CSS :

     --bio-bottom-bar-h      Hauteur exacte du nav (avec safe-area iOS)
                             ex: 88px sur iPhone X, 54px sur Android sans
                             safe-area, 0 si pas de nav.

     --bio-sticky-cta-bottom Position bottom recommandée pour un sticky
                             CTA juste au-dessus du nav, avec 12px de
                             buffer visuel. = bio-bottom-bar-h + 12px.

   ── AJOUTER UN NOUVEAU STICKY CTA ────────────────────────────

   Exemple : un bouton "Acheter en 1 clic" sticky bottom sur la page produit.

       .mon-nouveau-cta {
           position: fixed;
           left: 0; right: 0;
           bottom: var(--bio-sticky-cta-bottom);   ← utilise la var, point.
           z-index: 9989;                          ← SOUS le nav (9998)
           background: #fff;
           padding: 12px;
       }

   Ne PAS faire :
     - `bottom: calc(54px + env(safe-area-inset-bottom) + 12px)` (magic numbers)
     - `bottom: 60px` (hardcoded)
     - `z-index: 9999` (au-dessus du nav — hack qui fait passer le CTA
       par-dessus la barre quand le nav apparaît au scroll)

   ── EMPILER PLUSIEURS STICKY CTA ─────────────────────────────

   Si tu as déjà un CTA principal et tu veux empiler un 2e au-dessus
   (ex: banner promo au-dessus du bouton commander) :

       .second-cta {
           position: fixed;
           bottom: calc(var(--bio-sticky-cta-bottom) + 60px);
                                                   ↑ height du 1er CTA
       }

   Ou plus propre, expose chaque hauteur en var :
       :root { --cta-commander-h: 78px; }
       .promo-banner { bottom: calc(var(--bio-sticky-cta-bottom) + var(--cta-commander-h)); }

   ── PADDING-BOTTOM DU CONTENU DE PAGE ────────────────────────

   Pour qu'un élément en bas de page ne soit pas masqué par les sticky :

       .ma-page {
           padding-bottom: calc(var(--bio-bottom-bar-h) + CTA_HEIGHT + 20px);
       }

   Sur mobile (≤900px), le body a déjà `padding-bottom: var(--bio-bottom-bar-h)`
   pour laisser place au nav — tu ne dois PAS recompter ça. Ajoute juste la
   hauteur de TES sticky au-dessus.

   ── ÇA MARCHE SUR QUEL DEVICE ? ──────────────────────────────

   La mesure runtime adapte automatiquement à :
     ✓ iPhone X+ (safe-area ~34px)         ✓ iPhone Plus (DPR 2.625, subpixel)
     ✓ iPhone SE / 8 (pas de safe-area)    ✓ Android avec barre système
     ✓ Android gesture nav                 ✓ Tablettes en mobile breakpoint
     ✓ PWA standalone (display-mode)       ✓ WP admin bar
     ✓ Barre Safari mobile dynamique       ✓ Rotation portrait↔paysage

   Fallback CSS-only si JS désactivé (anciens Android Firefox, NoScript) :
   --bio-bottom-bar-h utilise calc(var(--bio-app-nav-h) + env(safe-area-inset-bottom)).
   Marche aussi, mais peut subpixel-overlap sur DPR non-entier.

   ============================================================= */

/* =====================================================
   CSS VARIABLES & SAFE AREA
   ===================================================== */
:root {
    /* Hauteur de la zone INTERACTIVE (icônes + labels) du bottom nav.
       Resserrée à 54px (vs 60 avant) pour matcher les apps iOS modernes
       (Instagram ~49, Spotify ~52, App Store ~50). La safe-area du home
       indicator s'ajoute en plus — JAMAIS d'icônes dans cette zone (Apple HIG). */
    --bio-app-nav-h: 54px;

    /* Safe areas iOS — nécessitent viewport-fit=cover dans <meta viewport>
       (déjà défini dans biomonde-core.php:663). */
    --bio-safe-bottom: env(safe-area-inset-bottom, 0px);
    --bio-safe-top:    env(safe-area-inset-top, 0px);
    --bio-safe-left:   env(safe-area-inset-left, 0px);
    --bio-safe-right:  env(safe-area-inset-right, 0px);

    /* Hauteur RÉELLE du bottom nav mesurée au runtime par JS (bio-theme-mobile.js
       fonction initBottomBarMeasure). Mise à jour via ResizeObserver à chaque
       changement (rotation, browser chrome dynamique, etc.).

       Sans JS, fallback sur le calcul théorique (var ci-dessus + safe-area).
       Avec JS, --bio-bottom-bar-h = Math.ceil(nav.getBoundingClientRect().height).

       Voir le bloc commentaire en haut de ce fichier pour le pattern d'ajout
       de nouveaux sticky CTA. */
    --bio-bottom-bar-h: calc(var(--bio-app-nav-h, 54px) + env(safe-area-inset-bottom, 0px));

    /* Var dérivée : position bottom recommandée pour un sticky CTA juste
       au-dessus du nav (12px de buffer visuel). Les futurs ajouts de sticky
       n'ont qu'à faire `bottom: var(--bio-sticky-cta-bottom)`. */
    --bio-sticky-cta-bottom: calc(var(--bio-bottom-bar-h) + 12px);

    /* Hauteur de la WP admin bar — initialisée à 0 par défaut, surchargée
       en CSS quand le body a la classe `.admin-bar`. Centralise l'offset pour TOUS
       les éléments fixed/sticky.

       ⚠️ COMPORTEMENT MOBILE DIFFÉRENT (piège WP) :
       - Desktop (≥783px) : #wpadminbar est `position: fixed` → reste en haut au scroll
         → on offset les sticky de 32px pour ne pas être recouverts.
       - Mobile (≤782px)  : #wpadminbar est `position: absolute` (WP core default) → scroll AVEC la page
         → on NE DOIT PAS offset le sticky (sinon trou de 46px qui apparaît au scroll).
         html { margin-top: 46px } injecté par WP place déjà le body sous l'admin bar
         en flux normal, donc le sticky top: 0 fonctionne correctement.

       → --bio-admin-bar-h reste à 0 sur mobile, même avec .admin-bar. */
    --bio-admin-bar-h: 0px;
}
.admin-bar { --bio-admin-bar-h: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar { --bio-admin-bar-h: 0px; } /* admin bar absolute → pas d'offset */
}

/* =====================================================
   BOTTOM NAV
   ===================================================== */
.bio-app-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Hauteur totale = zone interactive (54px) + safe-area iOS (home indicator).
       La safe-area est peinte en blanc (continuité visuelle) mais ne contient AUCUN
       élément cliquable (interdit Apple HIG : gesture conflict). */
    height: calc(var(--bio-app-nav-h, 54px) + var(--bio-safe-bottom, 0px));
    padding-bottom: var(--bio-safe-bottom, 0px);
    background: #fff;
    border-top: 1px solid rgba(60, 48, 43, 0.08);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
    z-index: var(--bio-z-bottomnav, 9998);
    -webkit-transform: translateZ(0); transform: translateZ(0); /* hint GPU */
}
/* NOTE (audit) : la classe .bio-appnav--hidden était du dead code — aucun JS ne la posait.
   On retire la règle. Si le hide-on-scroll est ré-activé un jour, il faudra :
   1) Câbler le toggle JS dans bio-theme-mobile.js (scroll handler avec rAF + add/remove classList)
   2) Réintégrer une règle .bio-app-nav.bio-appnav--hidden { transform: translateY(100%); transition: transform .25s ease } */

.bio-appnav-item {
    -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    gap: 3px; /* resserré 4→3 pour densifier dans les 54px */
    /* height: 100% donnerait toute la hauteur (incluant safe-area paint).
       On limite à la zone INTERACTIVE pour que les icônes restent centrées
       au-dessus du home indicator, pas dans la safe-area. */
    height: var(--bio-app-nav-h, 54px);
    min-height: 44px; /* WCAG touch target — toujours respecté car 54 ≥ 44 */
    color: var(--bio-text-cats, #999);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    position: relative; /* pour l'indicateur actif ::before */
    -webkit-transition: color 0.15s, opacity 0.15s;
    transition: color 0.15s, opacity 0.15s;
}
button.bio-appnav-item,
button.bio-appnav-item:focus,
button.bio-appnav-item:focus-visible,
button.bio-appnav-item:hover {
    color: var(--bio-text-cats, #999) !important;
    border: 0 !important;
    background: transparent !important;
    outline: 0;
    box-shadow: none !important;
}
.bio-appnav-item:active { opacity: 0.6; }
.bio-appnav-item:focus-visible { outline: 2px dashed var(--bio-h-accent, #8CB93F); outline-offset: -2px; }

.bio-appnav-item .bio-appnav-icon {
    width: 22px;
    height: 22px;
    -webkit-flex-shrink: 0; flex-shrink: 0;
    -webkit-transition: stroke-width 0.2s;
    transition: stroke-width 0.2s;
}
.bio-appnav-item svg { border: 0 !important; outline: 0 !important; }

/* Page active (liens) — indicateur visuel renforcé : couleur + pill au-dessus de l'icône.
   Le pill est un ::before positionné en haut du nav item, créant un repère visuel
   immédiat (pattern App Store / Spotify). */
/* L'accent brut sur blanc plafonne à 2:1 en 10 px. On l'assombrit de 40 % : le libellé
   reste la couleur du thème quel que soit l'accent choisi, mais devient lisible.
   La 1re déclaration sert de repli aux navigateurs sans color-mix(). */
.bio-appnav--active {
    color: var(--bio-green-dark, #687a00) !important;
    color: color-mix(in srgb, var(--bio-h-accent, #8CB93F) 60%, #000) !important;
}
.bio-appnav--active .bio-appnav-icon { stroke-width: 2.5; }
.bio-appnav--active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--bio-h-accent, #8CB93F);
    border-radius: 0 0 3px 3px;
}

/* Cart wrap + badge */
.bio-appnav-cart-wrap {
    position: relative;
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
}
.bio-appnav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--bio-h-accent, #8CB93F);
    color: #fff;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    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;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* =====================================================
   STICKY ATC (page produit) — refonte DA cream/brown/green
   - Mobile : barre pleine largeur, fond cream blurred, anim slide-up
   - Desktop : pill flottant en bas-droite (cohérent toasts)
   ===================================================== */
.bio-sticky-atc {
    display: none;
    position: fixed;
    left: 12px;
    right: 12px;
    /* Utilise la var dérivée --bio-sticky-cta-bottom (= bio-bottom-bar-h + 12px).
       Voir le bloc doc en haut du fichier pour le pattern. */
    bottom: var(--bio-sticky-cta-bottom);
    padding: 10px 12px 10px 16px;
    /* Repli (WebView/Safari sans backdrop-filter) : fond quasi opaque à 0.96
       → texte toujours lisible sans l'effet verre. Ne JAMAIS descendre <0.92. */
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border: 1px solid rgba(var(--bio-brown-rgb), 0.10);
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(60, 48, 43, 0.14), 0 1px 3px rgba(60, 48, 43, 0.06);
    /* z-index 9997 : SOUS le bottom nav (9998). Pas de hack z-index — comme l'ATC est
       maintenant TOUJOURS positionné au-dessus du nav grâce à --bio-bottom-bar-h
       mesuré exactement (Math.ceil), les bounding boxes ne se chevauchent jamais.
       Si elles touchaient (cas impossible désormais), c'est le nav qui passerait au-dessus
       — comportement attendu : la nav prioritaire ne doit jamais être masquée. */
    z-index: var(--bio-z-stickyatc, 9997);
    -webkit-transform: translateY(calc(100% + 30px));
    transform: translateY(calc(100% + 30px));
    opacity: 0;
    -webkit-transition: transform 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.2s ease;
    transition: transform 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.2s ease;

    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    gap: 12px;
    min-height: 56px;
}
.bio-sticky-atc.is-visible {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}
.bio-satc-main {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    min-width: 0;
    -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;
    padding-left: 4px;
    gap: 3px;
}
.bio-satc-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--bio-brown, #5D4037);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    letter-spacing: -0.005em;
    -ms-flex: 0 1 auto; flex: 0 1 auto;
    min-width: 0;
}
/* v2.53.45 — Nom + variété (vrac) sur la MÊME ligne → barre compacte (2 lignes max, pas 3) */
.bio-satc-titleline {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline;
    gap: 6px; min-width: 0;
}
.bio-satc-variety {
    -ms-flex: 0 1 auto; flex: 0 1 auto; min-width: 0;
    font-size: 12px; font-weight: 600; color: var(--bio-brown, #5D4037); opacity: 0.6;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
.bio-satc-variety::before { content: "·"; margin-right: 5px; opacity: 0.85; }
.bio-satc-price {
    font-size: 19px;
    font-weight: 900;
    color: var(--bio-green, #8CB93F);
    margin-top: 0;
    line-height: 1.05;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* v2.53.43 — Enrichissement sticky : note/avis (preuve sociale), dispo, promo (-% + barré). */
.bio-satc-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; margin-top: 1px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.bio-satc-rating {
    -webkit-appearance: none; appearance: none;
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    gap: 2px; background: transparent; border: 0; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--bio-brown, #5D4037); line-height: 1;
}
.bio-satc-stars { color: #f5a623; font-size: 12px; margin-right: 1px; }
.bio-satc-rcount { color: var(--bio-text-muted, #8a7a6e); font-weight: 600; margin-left: 1px; }
.bio-satc-rating:hover .bio-satc-rval { text-decoration: underline; }
.bio-satc-stock { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--bio-green-dark, #6BA032); white-space: nowrap; }
.bio-satc-stock i { font-size: 9px; }
.bio-satc-price-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; gap: 7px; margin-top: 2px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.bio-satc-price-row .bio-satc-price { margin-top: 0; }
.bio-satc-regular { font-size: 12px; font-weight: 600; color: var(--bio-text-muted, #8a7a6e); text-decoration: line-through; }
.bio-satc-regular .woocommerce-Price-amount { color: inherit; }
.bio-satc-discount { font-size: 11px; font-weight: 800; color: #fff; background: #e2483d; padding: 1px 6px; border-radius: 6px; line-height: 1.4; letter-spacing: 0.2px; }

/* v2.53.45 — Refonte sticky : bloc prix PROMINENT (à droite) + ancres (remplissent le vide façon La Fourche) */
.bio-satc-price-block {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    -ms-flex: 0 0 auto; flex: 0 0 auto; text-align: right; gap: 1px;
}
.bio-satc-price-block .bio-satc-regular { font-size: 11px; }
.bio-satc-price-block .bio-satc-discount { font-size: 10.5px; }
/* Ancres : masquées sur mobile (la barre pleine largeur n'a pas de vide) ; affichées desktop. */
.bio-satc-tabs { display: none; }
.bio-satc-tab {
    -webkit-appearance: none; appearance: none;
    -ms-flex: 0 0 auto; flex: 0 0 auto;
    background: transparent !important; border: 0 !important; padding: 0 !important;
    color: var(--bio-green-dark, #6BA032) !important;
    font-family: inherit; font-size: 11.5px; font-weight: 700; line-height: 1;
    cursor: pointer; white-space: nowrap; position: relative;
    -webkit-tap-highlight-color: transparent;
}
.bio-satc-tab:hover { text-decoration: underline; -webkit-text-decoration-color: currentColor; text-underline-offset: 2px; }
.bio-satc-tab:not(:last-child) { margin-right: 13px; }
.bio-satc-tab:not(:last-child)::after { content: "·"; position: absolute; right: -9px; color: rgba(60, 48, 43, 0.32); font-weight: 700; }

/* Desktop ≥901 : on affiche les ancres (remplissent le vide) + prix encore plus gros */
@media (min-width: 901px) {
    .bio-satc-tabs {
        display: -webkit-box; display: -ms-flexbox; display: flex;
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        -ms-flex-wrap: nowrap; flex-wrap: nowrap;
        min-width: 0; overflow: hidden;
        /* Si les ancres dépassent (produit à 6 onglets sur barre 680px), fondu propre
           à droite plutôt qu'une coupe brutale contre le bloc prix. */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
    }
    .bio-satc-meta { -ms-flex-wrap: nowrap; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
    .bio-satc-price { font-size: 21px; }
    .bio-satc-price-block { margin: 0 4px 0 12px; }
}

/* v2.53.44 — Stepper poids (vrac) dans le sticky : boutons − / + ronds.
   !important sur fond/couleur/bordure pour battre le style global button:not([class*=elementor]) (fond brun). */
.bio-satc-step {
    -webkit-appearance: none; appearance: none;
    -ms-flex: 0 0 auto; flex: 0 0 auto;
    width: 26px !important; height: 26px !important; min-height: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(60, 48, 43, 0.2) !important;
    background: #fff !important;
    color: var(--bio-brown, #5D4037) !important;
    font-size: 17px; font-weight: 700; line-height: 1;
    cursor: pointer;
    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;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: background-color .15s, -webkit-transform .1s; transition: background-color .15s, transform .1s;
}
.bio-satc-step:hover { background: var(--bio-cream, #f9f7f2) !important; }
.bio-satc-step:active { -webkit-transform: scale(0.92); transform: scale(0.92); }
.bio-satc-step:focus-visible { outline: 2px solid var(--bio-green, #8CB93F); outline-offset: 1px; }
.bio-satc-stepper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; -ms-flex: 0 0 auto; flex: 0 0 auto; }
.bio-satc-step-val { min-width: 44px; text-align: center; font-size: 12.5px; font-weight: 800; color: var(--bio-brown, #5D4037); line-height: 1; font-variant-numeric: tabular-nums; }
.bio-satc-has-step .bio-satc-price { white-space: nowrap; }
@media (min-width: 901px) {
    .bio-satc-stepper { gap: 8px; margin: 0 4px; }
    .bio-satc-step { width: 30px !important; height: 30px !important; }
    .bio-satc-step-val { font-size: 13px; min-width: 50px; }
}
/* Bouton "Ajouter" — pill vert plein, design soft moderne.
   Hex direct + !important pour battre le var(--bio-h-accent) du theme builder
   (qui peut être surchargé en marron par l'utilisateur). */
.bio-satc-btn {
    -ms-flex-negative: 0; flex-shrink: 0;
    background: var(--bio-green, #8CB93F) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 11px 22px 11px 18px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer;
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    gap: 9px;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    font-family: 'Quicksand', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow:
        0 6px 18px rgba(var(--bio-green-rgb), 0.42),
        0 2px 5px rgba(var(--bio-green-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    -webkit-transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    line-height: 1;
    white-space: nowrap;
}
.bio-satc-btn:hover {
    background: #7AA635 !important; /* green un cran plus foncé, pas brown */
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    box-shadow:
        0 8px 24px rgba(var(--bio-green-rgb), 0.50),
        0 2px 6px rgba(var(--bio-green-rgb), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.bio-satc-btn:active { -webkit-transform: scale(0.96); transform: scale(0.96); }
.bio-satc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(var(--bio-green-rgb), 0.45) !important; }
/* SVG icone : taille et stroke nets */
.bio-satc-btn svg {
    width: 17px !important;
    height: 17px !important;
    stroke-width: 2.4 !important;
    flex-shrink: 0;
}
.bio-satc-btn i { font-size: 14px; }

/* Vignette produit : masquée par défaut → la barre mobile reste strictement inchangée.
   Elle n'apparaît que sur desktop (média query ci-dessous) pour la barre centrée. */
.bio-satc-thumb { display: none; }

/* =====================================================
   v2.53.45 — STICKY MOBILE (≤ 900px) : mise en page 2 lignes
   Ligne 1 : [nom + variété + dispo]  ······  [PRIX prominent]
   Ligne 2 : [stepper poids si vrac]  ······  [    Ajouter    ]
   Corrige l'écrasement du nom (réduit à ~25px) quand prix + stepper +
   bouton se disputaient une seule ligne en vrac sur 390px.
   Vérifié live @390px : nom ~231px (lisible), aucun overflow. Le bouton
   grandit pour remplir la ligne 2 → grand CTA pouce-friendly.
   (Ancres masquées sur mobile : barre pleine largeur, pas de vide.)
   ===================================================== */
@media (max-width: 900px) {
    .bio-sticky-atc {
        -ms-flex-wrap: wrap; flex-wrap: wrap;
        row-gap: 8px;
        border-radius: 22px;     /* plus de capsule 999px quand la barre fait 2 lignes */
        padding: 9px 16px 10px;
        min-height: 0;
    }
    .bio-satc-main { -webkit-box-flex: 1; -ms-flex: 1 1 58%; flex: 1 1 58%; }
    .bio-satc-price-block { -ms-flex: 0 1 auto; flex: 0 1 auto; margin: 0; }
    .bio-satc-stepper { -ms-flex: 0 0 auto; flex: 0 0 auto; }
    .bio-satc-btn {
        -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto !important;
        -ms-flex-negative: 1; flex-shrink: 1;
    }
}

/* Desktop (≥ 901px) : barre CENTRÉE en bas façon "checkout" (placement validé client,
   v2.51.49). Remplace l'ancien pill bas-droite (zone widget chat / masquait le contenu).
   Mise en page : [vignette] [nom + variété + prix] ......... [bouton Ajouter], centrée. */
@media (min-width: 901px) {
    .bio-sticky-atc {
        left: 50%;
        right: auto;
        bottom: calc(22px + var(--bio-safe-bottom, 0px));
        /* Repli Safari < 13.4 (pas de min()) : largeur fixe + max-width borné.
           Les navigateurs modernes écrasent avec min() à la ligne suivante. */
        width: 680px;
        max-width: calc(100vw - 48px);
        width: min(680px, calc(100vw - 48px));
        padding: 12px 16px 12px 14px;
        border-radius: 18px;
        gap: 16px;
        /* On combine le centrage horizontal (translateX -50%) avec l'anim slide-up :
           ces transforms surchargent ceux des règles de base/.is-visible plus haut. */
        -webkit-transform: translateX(-50%) translateY(calc(100% + 40px));
        transform: translateX(-50%) translateY(calc(100% + 40px));
    }
    .bio-sticky-atc.is-visible {
        -webkit-transform: translateX(-50%) translateY(0);
        transform: translateX(-50%) translateY(0);
    }
    .bio-satc-thumb {
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 12px;
        -o-object-fit: cover;
        object-fit: cover;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        border: 1px solid rgba(var(--bio-brown-rgb), 0.10);
        background: #fff;
    }
}

/* =====================================================
   REPLI `gap` FLEXBOX — iOS Safari < 14.1 (iPhone 6/6s/7 sur iOS 12-14.0)
   `gap` en conteneur flex n'est supporté qu'à partir de Safari 14.1.
   Sur la cible matérielle ancienne, le gap est ignoré → le bottom nav et la
   barre ATC se tassent. On restitue l'espacement via margin sur les enfants,
   UNIQUEMENT là où gap manque (les navigateurs modernes ignorent ce bloc et
   gardent `gap`). Même pattern de repli que bio-theme.css.
   (gap en GRID = OK Safari 10.1, non concerné ici.)
   ===================================================== */
@supports not (gap: 1px) {
    /* Bottom nav : item en colonne (icône au-dessus du label), gap 3px */
    .bio-appnav-item > * + * { margin-top: 3px; }

    /* Barre ATC : conteneur en ligne, gap 12px entre les blocs */
    .bio-sticky-atc > * + * { margin-left: 12px; }

    /* Bloc principal (nom/prix) en colonne, gap 3px */
    .bio-satc-main > * + * { margin-top: 3px; }

    /* Ligne titre (nom + variété), gap 6px */
    .bio-satc-titleline > * + * { margin-left: 6px; }

    /* Méta (note + dispo + promo), ligne avec wrap, gap 8px */
    .bio-satc-meta > * + * { margin-left: 8px; }

    /* Note (étoiles + valeur), gap 2px */
    .bio-satc-rating > * + * { margin-left: 2px; }

    /* Dispo (icône + texte), gap 3px */
    .bio-satc-stock > * + * { margin-left: 3px; }

    /* Ligne prix (prix + barré + remise), wrap, gap 7px */
    .bio-satc-price-row > * + * { margin-left: 7px; }

    /* Bloc prix en colonne, gap 1px */
    .bio-satc-price-block > * + * { margin-top: 1px; }

    /* Stepper poids (− / valeur / +), gap 6px */
    .bio-satc-stepper > * + * { margin-left: 6px; }

    /* Bouton "Ajouter" : icône SVG puis libellé, gap 9px */
    .bio-satc-btn > * + * { margin-left: 9px; }
}

/* =====================================================
   MOBILE BREAKPOINT (≤ 900px)
   ===================================================== */
@media (max-width: 900px) {

    /* ---- Bottom nav visible + body padding pour ne pas le chevaucher ---- */
    .bio-app-nav { display: -webkit-box; display: -ms-flexbox; display: flex; }
    /* Padding aligné sur la hauteur RÉELLE du nav mesurée au runtime par JS
       (--bio-bottom-bar-h dans bio-theme-mobile.js). Adapte automatiquement à
       chaque device peu importe la safe-area iOS ou la WP admin bar. */
    body {
        padding-bottom: var(--bio-bottom-bar-h) !important;
    }

    /* ---- Header mobile : logo + search uniquement ---- */
    .bio-theme-header-inner { padding: 0 14px; }
    .bio-theme-row-top {
        gap: 12px;
        min-height: 56px;
        padding: 8px 0;
        -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
    }
    .bio-theme-slot-logo    { -ms-flex: 0 0 auto; flex: 0 0 auto; }
    .bio-theme-logo-text    { display: none; }
    .bio-theme-logo-img     { max-height: 38px !important; }
    .bio-theme-slot-search  { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }

    /* Cache compte/panier du header (présents dans le bottom nav) */
    .bio-theme-slot-actions,
    .bio-theme-slot-actions-left { display: none !important; }

    /* Row rayons : on garde dans le DOM (le drawer mobile en dépend)
       mais on rétracte à 0 visuellement. Le bouton hamburger redondant est caché.
       Le drawer .bio-mega-dropdown est en position:fixed donc s'affiche partout. */
    .bio-theme-row-nav {
        min-height: 0;
        height: 0;
        padding: 0;
        margin: 0;
        border: 0;
        overflow: visible; /* le drawer fixed peut sortir */
    }
    .bio-theme-row-nav .bio-rayons-bar,
    .bio-theme-row-nav .bio-mobile-view .bio-mega-btn { display: none !important; }

    /* Layouts spécifiques : aussi simplifiés */
    .layout-compact .bio-theme-slot-rayons { display: none !important; }
    .layout-centered .bio-theme-row-centered { display: flex; gap: 12px; }
    .layout-centered .bio-theme-row-search   { padding: 0; }
    .layout-centered .bio-theme-slot-search-wide { width: 100%; max-width: none; }

    /* ===== Disposition libre (layout-custom) sur mobile ===== */

    /* Ligne du haut : flex-wrap pour que la recherche puisse passer en 2e ligne */
    .layout-custom .bio-theme-row-top {
        display: -webkit-box; display: -ms-flexbox; display: flex;
        -webkit-flex-wrap: wrap !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important;
        gap: var(--bio-h-row-gap, 12px) !important;
    }
    /* Ligne du bas (nav) en disposition libre : override du retract h:0
       pour s'afficher normalement quand elle porte des éléments. */
    .layout-custom .bio-theme-row-nav.has-items {
        height: auto;
        min-height: 40px;
        padding: 6px 0;
        margin-top: var(--bio-h-rows-gap-t, -14px);
        overflow: visible;
        display: -webkit-box; display: -ms-flexbox; display: flex;
        -webkit-flex-wrap: wrap !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important;
        gap: var(--bio-h-row-gap, 12px) !important;
    }
    /* Zones : pas de wrap interne, l'espacement suit la variable globale */
    .layout-custom .bio-theme-zone {
        -webkit-flex-wrap: nowrap !important; -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important;
        gap: var(--bio-h-row-gap, 12px) !important;
    }
    /* Ordre mobile : gauche → droite → centre (la recherche en centre passe en 2e ligne) */
    .layout-custom .bio-theme-zone-left {
        -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;
    }
    .layout-custom .bio-theme-zone-right {
        -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;
    }
    .layout-custom .bio-theme-zone-center {
        -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3;
    }
    /* Recherche au centre : pleine largeur, 2e ligne */
    .layout-custom .bio-theme-zone-center.has-search {
        -webkit-box-flex: 1; -ms-flex: 1 0 100% !important; flex: 1 0 100% !important;
        width: 100% !important;
        margin-top: 8px;
    }
    /* Recherche dans la zone droite : la zone s'étire à côté du logo */
    .layout-custom .bio-theme-zone-right.has-search {
        -webkit-box-flex: 1; -ms-flex: 1 1 0% !important; flex: 1 1 0% !important;
    }
    /* Si la zone droite est masquée ou vide sur mobile, la recherche au centre
       remonte à côté du logo (même ligne) et s'étire sur la largeur restante. */
    .layout-custom:has(.bio-theme-zone-right.is-empty) .bio-theme-zone-center.has-search,
    .layout-custom:has(.bio-theme-zone-right.bio-hide-mobile) .bio-theme-zone-center.has-search {
        -webkit-box-flex: 1; -ms-flex: 1 1 0% !important; flex: 1 1 0% !important;
        width: auto !important;
        margin-top: 0 !important;
        -webkit-box-ordinal-group: 3; -ms-flex-order: 2 !important; order: 2 !important;
    }

    /* Cache le libellé texte du compte sur mobile pour rester compact (garder uniquement l'icône ronde) */
    .bio-theme-account-label {
        display: none !important;
    }

    /* ---- Search bar mobile : font-size 16px pour bloquer le zoom iOS Safari ---- */
    .bio-theme-search-fallback,
    .bio-theme-search .bio-search-input {
        height: 42px !important;
        font-size: 16px !important; /* CRITIQUE : iOS zoome si < 16px */
    }
    /* Cercle loupe réajusté au champ 42px → 30px = 6px de marge égale partout
       (sinon le bouton 36px/40px déborde dans un champ raccourci). */
    .bio-theme-search .bio-search-submit {
        width: 30px !important;
        height: 30px !important;
        right: 6px !important;
    }
    /* La loupe est le seul element vraiment sous-dimensionne du site au doigt : 30x30 pour une
       cible recommandee a 44px. On ne grossit PAS le bouton (le header est calibre au pixel) :
       on etend uniquement sa zone sensible avec un pseudo-element centre. Le rendu est
       identique, la cible fait 44px. Le SVG interne est deja en pointer-events:none, il ne
       vole donc pas le clic. */
    .bio-theme-search .bio-search-submit::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
    }
    .bio-theme-search-fallback {
        padding-left: 16px;
    }
    .bio-theme-search-fallback input[type="search"] {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .bio-theme-header-inner { padding: 0 12px; }
    .bio-theme-logo-img { max-height: 34px !important; }
    .bio-appnav-item { font-size: 10px; gap: 2px; }
    .bio-appnav-item .bio-appnav-icon { width: 20px; height: 20px; }
    /* Marge entre lignes spécifique mobile (indépendante de la tablette) */
    .layout-custom .bio-theme-row-nav.has-items {
        margin-top: var(--bio-h-rows-gap-m, -14px);
    }
}

/* =====================================================
   PETITS POLISH
   ===================================================== */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bio-app-nav,
    .bio-sticky-atc,
    .bio-appnav-item,
    .bio-satc-btn {
        -webkit-transition: none !important;
        transition: none !important;
    }
}

/* iOS standalone (PWA-like) — padding top safe area */
@media all and (display-mode: standalone) {
    body { padding-top: var(--bio-safe-top, 0px); }
}

/* Anti subpixel-gap entre WP admin bar et header sticky :
   sur certains DPR (devicePixelRatio non-entier comme 2.625 sur Pixel/iPhone Plus),
   le rendu webkit peut laisser un trait de 0.5-1px entre la admin bar (fixed) et le header
   (sticky avec top calculé). On force le GPU compositing du header + on s'assure que
   la position sticky est exactement à la valeur de la admin bar — pas de marge. */
@media screen and (max-width: 900px) {
    .bio-theme-header.is-sticky {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }
    /* Quand l'admin bar est affichée, on supprime tout margin/border-top potentiel
       sur le header qui pourrait créer un trait visible. */
    body.admin-bar .bio-theme-header {
        margin-top: 0 !important;
        border-top: 0 !important;
    }
}