/* Couleurs de la DA du plugin (FAB + panneaux panier/cookies/accessibilité),
   reprises du thème Beleco de jozzbeauty.com (theme.json — inspecté en direct
   sur la fiche produit) plutôt que de la palette neutre générique du hub :
   --eh-color-ink = noir du thème (--wp--preset--color--foreground),
   --eh-color-accent = rose terracotta de marque (--wp--preset--color--accent),
   --eh-color-surface = fond crème du thème (--wp--preset--color--background),
   au lieu d'un blanc pur générique.

   --eh-color-ink-soft n'est PAS le gris du thème tel quel
   (--wp--preset--color--primary: #999999) : sur le fond crème du plugin,
   #999999 ne passe pas le contraste AA (2,75:1) pour un petit texte (légendes
   du FAB, ~10px) — #6e6e6e conserve la même intention (gris discret) tout en
   passant AA (4,92:1). Même logique pour --eh-color-accent-deep : la teinte
   de marque elle-même (#d38377) ne passe pas non plus le contraste texte
   (2,78:1) sur fond crème — une version plus soutenue de la même teinte
   (4,7:1) est utilisée partout où l'accent porte du texte ou un état
   fonctionnel (prix, interrupteur "activé"), l'accent clair restant réservé
   aux usages décoratifs (filet de la pastille de couleur).

   Restent en variables CSS (pas de valeurs figées) : réglables sans toucher
   au CSS via Engagement Hub > Couleurs (includes/core/admin-menu.php), qui
   injecte une surcharge de :root en style inline (includes/core/frontend.php)
   si besoin de s'écarter de ces valeurs de marque. --eh-color-ink-rgb/-accent-rgb
   (triplets R,G,B) sont nécessaires à côté des hex : les usages en
   rgba(..., alpha) ci-dessous ne peuvent pas convertir un hex eux-mêmes. Ce
   fichier charge sur toutes les pages (includes/core/frontend.php), donc ces
   variables sont toujours définies avant que sticky-cart.css/cookie-consent.css/
   accessibility.css ne les utilisent. */
:root {
    --eh-color-ink: #000;
    --eh-color-ink-rgb: 0, 0, 0;
    --eh-color-ink-soft: #6e6e6e;
    --eh-color-accent: #d38377;
    --eh-color-accent-rgb: 211, 131, 119;
    --eh-color-accent-deep: #a85c50;
    --eh-color-surface: #fcfbf6;
}

/* Lien d'évitement vers le FAB (includes/core/frontend.php) : invisible tant
   qu'il n'a pas le focus clavier, comme tout skip-link standard. Cible le
   bouton engrenage lui-même, pas seulement le conteneur, pour que le focus
   atterrisse directement sur un élément activable. */
.eh-skip-link {
    position: fixed;
    top: -100px;
    left: 12px;
    z-index: 999999;
    background: #111;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.875rem;
    font-family: sans-serif;
    transition: top 0.2s ease;
}

.eh-skip-link:focus {
    top: 12px;
}

/* Engagement Hub - Bouton flottant (FAB), unifié en un seul objet qui
   grandit à travers 3 états (voir assets/js/core.js pour la machine à états) :
   1. fermé   : petit cercle avec l'engrenage
   2. menu    : le MÊME élément s'agrandit pour révéler le choix des icônes
   3. détail  : le MÊME élément s'agrandit encore pour le contenu du module
   Il n'y a plus deux blocs séparés (engrenage + panneau) : #eh-fab EST le
   panneau, à chaque état. */
.eh-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999997;
    font-family: sans-serif;

    --eh-scroll: 0;

    width: 48px;
    height: 48px;

    /* Coins carrés dès l'état fermé (pas de cercle) : signature du thème
       Beleco (boutons, vignettes, galerie produit — aucun border-radius nulle
       part sur jozzbeauty.com), conservée dans les 3 états du bouton plutôt
       que de retomber sur un cercle générique. */
    border-radius: 0;

    /* Direction "Ligne" : quasi invisible tant qu'il n'est pas utilisé, un
       simple filet fin plutôt qu'un disque plein — cohérent avec le panneau
       ouvert plus bas (fond crème de marque, bordure fine, aucune ombre dure). */
    background-color: var(--eh-color-surface);
    border: 1.5px solid rgba(var(--eh-color-ink-rgb), 0.55);
    box-shadow: 0 2px 8px rgba(var(--eh-color-ink-rgb), 0.1);
    overflow: hidden;

    /* Durée allongée + courbe plus douce (décélération progressive) qu'un
       simple ease : l'agrandissement de l'objet se voyait comme un
       à-coup trop brusque avec la version précédente, plus courte et vive. */
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                border-radius 0.35s ease,
                background-color 0.35s ease,
                border-color 0.2s ease,
                box-shadow 0.35s ease;
}

/* Réglage admin (Engagement Hub > position du bouton) : évite une collision
   avec un widget tiers (chat, WhatsApp...) déjà logé en bas droite. */
.eh-fab[data-position="left"] {
    right: auto;
    left: 20px;
}

/* Fond crème de marque, un seul filet gris très discret et aucune ombre :
   direction "Ligne", quasi invisible tant qu'il n'est pas utilisé — le plus
   silencieux des partis pris déjà explorés. border-radius déjà à 0 dans les
   3 états (voir .eh-fab ci-dessus), pas besoin de le répéter ici. */
.eh-fab[data-state="menu"],
.eh-fab[data-state="detail"] {
    background-color: var(--eh-color-surface);
    border: 1px solid rgba(var(--eh-color-ink-rgb), 0.12);
    box-shadow: none;
}

/* Largeur intrinsèque (pas une valeur fixe) : le menu ne compte que 3-4
   icônes, autant qu'il s'ajuste à son contenu et reste sur une seule ligne
   (voir flex-wrap: nowrap sur .eh-fab-menu) plutôt que de forcer un retour
   à la ligne au milieu des icônes. Le mobile repasse en wrap plus bas. */
.eh-fab[data-state="menu"] {
    width: max-content;
    height: auto;
    max-height: 320px;
}

.eh-fab[data-state="detail"] {
    width: 340px;
    height: auto;
    max-height: calc(100vh - 140px);
}

/* Largeur adaptée par module affiché en détail (repli 340px ci-dessus).
   Le panier a besoin de plus de place que les autres : avec 3 variations,
   les boutons (vignette + libellé) ne tenaient plus sur une seule ligne et
   retombaient en colonne faute d'espace. */
.eh-fab[data-state="detail"][data-detail="cookie-consent"] { width: 420px; }
.eh-fab[data-state="detail"][data-detail="accessibility"] { width: 320px; }
.eh-fab[data-state="detail"][data-detail="sticky-cart"] { width: 480px; }

/* ============================================================
   État 1 : bouton fermé (engrenage)
   ============================================================ */
.eh-fab-toggle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;

    /* Icône sombre : le bouton fermé est désormais un fond clair (direction
       "Ligne"), plus le disque sombre d'origine sur lequel un glyphe blanc
       se détachait. */
    color: var(--eh-color-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.eh-fab[data-state="menu"] .eh-fab-toggle,
.eh-fab[data-state="detail"] .eh-fab-toggle {
    opacity: 0;
    pointer-events: none;
}

.eh-fab-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(calc(var(--eh-scroll, 0) * 1.8deg));
    transition: transform 0.6s ease;
}

.eh-fab-gear svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* ============================================================
   État 2 : choix des icônes, à l'intérieur du même objet
   ============================================================ */
.eh-fab-menu {
    display: none;

    /* nowrap : toutes les icônes restent sur une seule ligne (le conteneur
       est dimensionné à son contenu, voir width: max-content plus haut).
       Repasse en wrap uniquement sur mobile (media query plus bas), où la
       largeur de l'écran ne permet plus de garder tout aligné. */
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;

    /* width: 100%; */
    height: 100%;
    padding: 10px;
}

.eh-fab[data-state="menu"] .eh-fab-menu {
    display: flex;
}

/* Le bouton n'est plus une bulle : un simple conteneur en colonne (icône +
   légende, voir .eh-fab-item-ring/.eh-fab-item-label), sans fond ni bordure
   propres — direction "Ligne", rien ne doit ajouter de poids visuel autour
   de l'icône elle-même. */
.eh-fab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    background: none;
    border: none;
    padding: 0;
    color: var(--eh-color-ink);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.2s ease, transform 0.2s ease;

    /* Pas de délai par défaut : à la fermeture, les bulles doivent
       disparaître tout de suite, pendant que la boîte se rétrécit. */
}

/* Pas de fond/bordure/ombre ici (contrairement aux directions précédentes) :
   seule la taille du cadre de clic est fixée, l'icône reste nue. */
.eh-fab-item-ring {
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Majuscules + espacement des lettres + graisse 600 : traitement typo des
   libellés de navigation du thème Beleco (menu du site), repris ici pour que
   les légendes du FAB se lisent comme un élément natif du site plutôt qu'un
   ajout générique.

   Pas de max-width : un libellé comme "ACCESSIBILITÉ" en majuscules se
   faisait couper en "…" avec une largeur fixée trop étroite. Se dimensionne
   désormais naturellement à son contenu (white-space: normal, pas de
   troncature possible). */
.eh-fab-item-label {
    font-family: inherit;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: var(--eh-color-ink-soft);
    text-align: center;
    white-space: normal;

    /* Soulignement toujours présent mais transparent par défaut : seule sa
       couleur transitionne au survol (text-decoration-line, lui, ne peut
       pas s'animer). Retour discret plutôt qu'un effet de grossissement. */
    text-decoration-line: underline;
    text-underline-offset: 2px;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.15s ease;
}

.eh-fab-item:hover .eh-fab-item-label {
    text-decoration-color: currentcolor;
}

.eh-fab[data-state="menu"] .eh-fab-item {
    opacity: 1;
    transform: scale(1);

    /* Délai à l'ouverture seulement : le temps que #eh-fab ait fini de
       s'élargir (transition width, ~0.45s) avant de révéler les bulles —
       sinon on voit le réagencement flex en cours de route (les icônes
       passent brièvement à la ligne, verticales, avant de se remettre en
       ligne une fois la largeur finale atteinte). */
    transition-delay: calc(220ms + var(--eh-index, 0) * 40ms);
}

/* Croix de sortie de l'état 2 (choix des icônes), affichée à droite des
   bulles : referme entièrement et retrouve l'engrenage de départ, sans
   devoir cliquer en dehors ou faire Échap. Rien ne se montre tant qu'on ne
   l'utilise pas (ni fond, ni bordure, ni ombre) : seul un cercle discret
   apparaît au survol pour signaler le clic. */
.eh-fab-menu-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--eh-color-ink-soft);
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease, color 0.15s ease;
}

.eh-fab-menu-close:hover {
    background: rgba(var(--eh-color-ink-rgb), 0.06);
    color: var(--eh-color-ink);
}

.eh-fab[data-state="menu"] .eh-fab-menu-close {
    opacity: 1;
    transform: scale(1);
    transition-delay: calc(220ms + var(--eh-index, 0) * 40ms);
}

.eh-fab-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Icônes SVG dessinées maison (voir includes/core/class-eh-module-registry.php) :
   currentColor suit directement la couleur du bouton, sans filtre nécessaire
   et sans dépendre du rendu des emojis selon l'OS/le navigateur. */
.eh-fab-item-icon--svg svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Le tracé du panier (icône du mini-panier WooCommerce, voir
   includes/modules/sticky-cart/module.php) laisse une marge interne bien
   plus généreuse dans son propre viewBox que les icônes maison du hub
   (cookie, accessibilité) : à 18px comme les autres, son dessin réel
   paraissait nettement plus petit. Légèrement agrandi pour compenser, sans
   pour autant toucher la taille des autres icônes. */
.eh-fab-item-icon--svg svg.eh-fab-icon-cart {
    width: 22px;
    height: 22px;
}

/* Repli emoji pour un module qui n'a pas encore d'icône SVG dédiée (ex. la
   flèche "haut de page" ↑, déjà monochrome). grayscale/contraste/luminosité
   reste un compromis : brightness(0) seul écrase tout le détail interne du
   dessin en silhouette noire méconnaissable pour un emoji illustré. */
.eh-fab-item-icon--emoji {
    filter: grayscale(1) contrast(1.3) brightness(0.55);
}

/* ============================================================
   État 3 : contenu détaillé d'un module, injecté dans ce slot
   ============================================================ */
.eh-fab-detail {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.eh-fab[data-state="detail"] .eh-fab-detail {
    display: flex;
    flex-direction: column;
}

/* Un seul module visible à la fois dans le slot détail, celui désigné par
   data-detail sur #eh-fab (voir includes/core/frontend.php pour la liste
   des ids : cookie-consent, sticky-cart, accessibility). */
.eh-fab-detail > * {
    display: none;
}

.eh-fab[data-detail="cookie-consent"] .eh-fab-detail > #bcc-modal-overlay,
.eh-fab[data-detail="sticky-cart"] .eh-fab-detail > #stickyVariationBar,
.eh-fab[data-detail="accessibility"] .eh-fab-detail > #eh-a11y-panel {
    display: flex;
}

/* Écrans laptop : le bouton et ses icônes sont un peu trop imposants tels
   que dimensionnés pour un grand écran, on réduit d'un cran. */
@media (max-width: 1440px) {
    .eh-fab {
        width: 40px;
        height: 40px;
    }

    .eh-fab-gear svg {
        width: 17px;
        height: 17px;
    }

    /* Largeur toujours intrinsèque (width: max-content, règle par défaut) :
       seule la hauteur max diffère à ce point de rupture. */
    .eh-fab[data-state="menu"] {
        max-height: 280px;
    }

    .eh-fab[data-state="detail"] {
        width: 280px;
        max-height: calc(100vh - 120px);
    }

    .eh-fab[data-state="detail"][data-detail="cookie-consent"] { width: 340px; }
    .eh-fab[data-state="detail"][data-detail="accessibility"] { width: 270px; }
    .eh-fab[data-state="detail"][data-detail="sticky-cart"] { width: 400px; }

    .eh-fab-item-ring {
        width: 38px;
        height: 38px;
        font-size: 1.0625rem;
    }
}

@media (max-width: 480px) {
    .eh-fab {
        right: 14px;
        bottom: 14px;
    }

    .eh-fab[data-position="left"] {
        right: auto;
        left: 14px;
    }

    .eh-fab[data-state="menu"],
    .eh-fab[data-state="detail"] {
        width: auto;
        max-width: calc(100vw - 28px);
    }

    /* Seul point de rupture où les icônes reviennent à la ligne : la largeur
       de l'écran ne permet plus de toutes les garder alignées. */
    .eh-fab-menu {
        flex-flow: row wrap;
    }

    .eh-fab[data-state="menu"] {
        max-height: 260px;
    }

    .eh-fab[data-state="detail"] {
        max-height: calc(100vh - 110px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .eh-fab,
    .eh-fab-gear,
    .eh-fab-item,
    .eh-fab-item-ring,
    .eh-fab-menu-close,
    .eh-fab-toggle {
        transition: none;
    }
}

/* Focus clavier visible, cohérent avec le contenu des modules (assets/css/*-cart.css,
   cookie-consent.css, accessibility.css) : couleur unique repérable sur
   fond clair comme sur fond sombre. */
.eh-fab-toggle:focus-visible,
.eh-fab-item:focus-visible,
.eh-fab-menu-close:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Filet de sécurité : certains navigateurs affichent quand même l'anneau de
   focus après un clic souris malgré :focus-visible. La modalité réelle est
   détectée en JS (assets/js/core.js) ; on masque ici l'anneau sur nos
   propres composants seulement (pas sur le reste du site). */
html.eh-mouse-user #eh-fab *:focus-visible {
    outline: none;
}

/* Ces 3 conteneurs (un par module) ne reçoivent le focus programmatique
   qu'en simple point d'entrée clavier (voir focusActiveDetail, assets/js/core.js) :
   pas d'anneau de focus visible sur le conteneur lui-même, les vrais éléments
   interactifs à l'intérieur (boutons, cases à cocher) gardent le leur. */
#bcc-modal-overlay:focus,
#stickyVariationBar:focus,
#eh-a11y-panel:focus {
    outline: none;
}