/* 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;
    border-radius: 50%;

    /* 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 blanc, bordure fine, aucune ombre dure). */
    background-color: #fff;
    border: 1.5px solid rgba(33, 28, 23, 0.55);
    box-shadow: 0 2px 8px rgba(33, 28, 23, 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 (LSG 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;
}

/* Coins carrés (border-radius: 0), fond blanc, 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. */
.eh-fab[data-state="menu"],
.eh-fab[data-state="detail"] {
    border-radius: 0;
    background-color: #fff;
    border: 1px solid rgba(33, 28, 23, 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: #211c17;
    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: #211c17;
    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;
}

.eh-fab-item-label {
    font-family: Cardo, Georgia, serif;
    font-size: 0.6875rem;
    line-height: 1.2;
    color: #6b6058;
    text-align: center;
    max-width: 64px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 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: #6b6058;
    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(33, 28, 23, 0.06);
    color: #211c17;
}

.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;
}

/* 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;
}