/**
 * Panneau "Ajout au panier", affiché comme contenu du même objet que le
 * bouton engrenage (voir includes/core/frontend.php, assets/css/core.css) :
 * ce fichier ne définit plus que le contenu interne, pas de position ni
 * d'habillage propre.
 */

/* Sans ce reset, "width: 100%" + "padding" sur un bouton/texte du panneau
   (ex. .sticky-add-to-cart, .sticky-out-of-stock) additionne le padding à
   la largeur au lieu de l'inclure dedans, et déborde du panneau. */
.sticky-variation-bar,
.sticky-variation-bar *,
.sticky-variation-bar *::before,
.sticky-variation-bar *::after {
    box-sizing: border-box;
}

/* Le panneau est désormais un simple bloc de contenu affiché à l'intérieur
   du slot partagé #eh-fab-detail (voir includes/core/frontend.php et
   assets/css/core.css) : position, taille et habillage (fond flouté, ombre,
   bordure) sont portés par #eh-fab lui-même, qui EST l'objet visuel unique. */
.sticky-variation-bar {
    width: 100%;

    /* max-height (pas height:100%) : #eh-fab grandit selon son propre contenu
       (height: auto), donc un pourcentage ici ne se résoudrait jamais et la
       zone de défilement plus bas ne saurait jamais quand s'activer. */
    max-height: calc(100vh - 140px);
    min-height: 0;

    /* display: flex est posé par assets/css/core.css (sélecteur par id, plus
       spécifique) : ne pas le redéclarer ici, au risque d'entrer en conflit
       d'ordre de cascade avec la règle qui masque ce panneau par défaut. */
    flex-direction: column;
}

@media (max-width: 1440px) {
    .sticky-variation-bar {
        max-height: calc(100vh - 120px);
    }
}

@media (max-width: 480px) {
    .sticky-variation-bar {
        max-height: calc(100vh - 110px);
    }
}

.sticky-panel-close {
    position: absolute;
    top: 8px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #333;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    flex-shrink: 0;
}

/* border-color/box-shadow explicitement neutralisés : le thème pose une
   règle globale `button:hover` (fond vert, anneau vert en box-shadow) sur
   TOUT <button>, sinon ces deux propriétés-là passaient encore malgré le
   fond/texte déjà surchargés ci-dessus. */
.sticky-panel-close:hover {
    background: rgba(0, 0, 0, 0.12);
    border-color: transparent;
    box-shadow: none;
    color: #333;
}

/* Seule cette zone défile si le contenu dépasse : la croix, elle, reste
   toujours en place et cliquable dans son intégralité. */
.sticky-panel-scroll {
    flex: 1;
    min-height: 0;

    /* Les deux axes doivent être fixés ensemble : sans overflow-x explicite,
       certains navigateurs activent aussi une barre horizontale dès que le
       contenu déborde d'un pixel, même avec le retour à la ligne des boutons. */
    overflow: hidden auto;

    /* Marge droite plus large que les autres côtés : laisse de la place à la
       barre de défilement, pour qu'elle n'arrive pas juste sous la croix de
       fermeture (position: absolute, hors de cette zone qui défile). */
    padding: 20px 20px 16px 16px;
}

/* ========================================
   Grille (pas de flex imbriqué) : seule façon de placer les MÊMES éléments
   (image, nom, sélecteur de variation, bouton) à deux endroits différents
   selon la largeur d'écran, sans dupliquer le contenu ni le JS qui le
   remplit.

   Desktop/tablette : image à gauche (60px), nom + sélecteur de variation
   empilés à droite dans la MÊME colonne (le panneau panier a sa propre
   largeur de 480px, assets/css/core.css [data-detail="sticky-cart"], assez
   pour que 3 variations restent sur une ligne dans cette colonne). 60px
   plutôt que 72px : pour un produit simple (un seul nom, sans variations à
   côté), une image plus haute que le texte laissait un blanc disproportionné.

   Mobile (<=480px, media query plus bas) : le sélecteur de variation
   redescend en pleine largeur, entre la rangée image+nom et le bouton
   d'ajout — la colonne y est trop étroite pour l'accueillir sans qu'il ne
   retombe en colonne faute de place.
   ======================================== */
.sticky-variation-content {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-areas:
        "image name"
        "image variations"
        "cart cart";
    gap: 8px 14px;
    opacity: 0;
    will-change: opacity, transform;
}

.sticky-product-image {
    grid-area: image;
    width: 60px;
    height: 60px;
}

.sticky-product-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

/* Nommées "eh-" (au lieu de "sticky-product-info"/"sticky-product-name") :
   le thème minimog a sa PROPRE barre sticky native (désactivée sur ce site,
   mais son CSS reste chargé globalement) qui utilise EXACTEMENT ces deux
   classes pour ses propres besoins (display:flex, tailles de police fixes,
   etc.) — confirmé en direct sur pureden.fr : le nom du produit
   n'apparaissait plus du tout sur mobile, les règles du thème prenant le
   dessus sur les nôtres. Même principe déjà appliqué à .eh-sticky-var-img
   plus bas dans ce fichier, pour une collision similaire. */
.eh-sticky-product-info {
    grid-area: name;

    /* Centré (pas "start") : pour un produit simple, sans variations pour
       occuper la colonne, un nom centré à côté de l'image évite qu'il ne
       reste collé en haut avec du vide visible en dessous. */
    align-self: center;

    /* min-width: 0 : sans lui, cette cellule de grille refuserait de se
       réduire sous la largeur naturelle du nom du produit, et pourrait
       déborder du panneau. */
    min-width: 0;
}

.eh-sticky-product-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
    font-family: inherit;
}

.sticky-variation-options {
    grid-area: variations;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.sticky-variation-label {
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* !important sur les propriétés de mise en page seulement : le thème/
   WooCommerce applique parfois ses propres règles génériques aux boutons
   (display:block, width:100%...) avec une spécificité ou un ordre de
   chargement qui prend le pas sur les nôtres — même raison que le
   !important déjà posé sur les cases à cocher, assets/css/cookie-consent.css.
   Sans ça, les boutons de variation se retrouvaient empilés en pleine
   largeur au lieu de se ranger en ligne.

   Desktop/tablette : nowrap, la colonne (480px de panneau moins l'image)
   a la place pour 3 variations sur une seule ligne, pas besoin d'un repli
   sur plusieurs lignes. Le wrap ne revient que sur mobile (media query plus
   bas), seul point de rupture où cette largeur ne suffit plus. */
.sticky-variation-buttons {
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 8px;
    width: 100%;
}

/* Produit simple (sans variations, voir syncSimpleProduct, assets/js/sticky-cart.js
   qui retire complètement .sticky-variation-options du DOM) : la zone
   "variations" de la grille disparaît entièrement, pas seulement son
   contenu — sinon la ligne et le row-gap qui l'entourent laissaient un
   blanc entre le nom et le bouton, même sans rien à y afficher. Spécificité
   plus élevée que les règles ci-dessus (et la media query mobile plus bas) :
   gagne sur les deux, pas besoin de la répéter par point de rupture. */
.sticky-variation-bar.simple-product .sticky-variation-content {
    grid-template-areas:
        "image name"
        "cart cart";
}

/* Le sélecteur de variation redescend en pleine largeur, entre la rangée
   image+nom et le bouton d'ajout : la colonne à droite de l'image est ici
   trop étroite pour l'accueillir sans qu'il ne retombe en colonne faute de
   place (voir grid-template-areas plus haut pour la disposition
   desktop/tablette). Cette règle doit rester déclarée APRÈS la règle de
   base .sticky-variation-content ci-dessus : à spécificité égale, c'est
   l'ordre dans le fichier qui décide, pas la media query elle-même. */
@media (max-width: 480px) {
    .sticky-variation-content {
        grid-template-areas:
            "image name"
            "variations variations"
            "cart cart";
    }

    .sticky-variation-options {
        align-self: start;
    }

    /* Seul point de rupture où le wrap revient : la pleine largeur du
       panneau ne suffit plus forcément à garder toutes les variations sur
       une seule ligne sur un petit écran. */
    .sticky-variation-buttons {
        flex-wrap: wrap !important;
    }

    /* Bouton d'ajout plus compact : le padding/la taille de police pensés
       pour le panneau desktop (480px) prenaient trop de place une fois le
       panneau réduit à la largeur de l'écran (confirmé en direct sur
       pureden.fr, capture mobile). */
    .sticky-add-to-cart {
        padding: 10px 14px;
        font-size: 0.875rem;
    }
}

.sticky-variation-btn {
    padding: 6px 10px;
    border-radius: 5px;

    /* Bordure teintée d'encre (comme les boutons du panneau cookies,
       assets/css/cookie-consent.css) plutôt qu'un gris neutre #e0e0e0, pour
       que ce panneau se lise comme le même système que les deux autres. */
    border: 1.5px solid rgba(var(--eh-color-ink-rgb), 0.18);
    background: #fff;
    color: var(--eh-color-ink);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex !important;
    flex-direction: row !important;
    width: auto !important;
    align-items: center;
    gap: 8px;
}

.sticky-var-left {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.sticky-var-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* background/color/box-shadow explicitement repris : sans eux, la règle
   globale `button:hover` du thème (fond vert, anneau vert, texte blanc)
   s'appliquait partiellement, seul border-color étant déjà le nôtre. */
.sticky-variation-btn:hover {
    background: #fff;
    border-color: var(--eh-color-ink);
    box-shadow: none;
    color: var(--eh-color-ink);
}

.sticky-variation-btn.active {
    background: #fff;
    color: var(--eh-color-ink);
    border-color: var(--eh-color-ink);
}

/* Image de variation dans les boutons. Nommée "eh-" (au lieu de
   "sticky-var-img") : le template WooCommerce personnalisé du site
   (single-product/add-to-cart/variable.php) pose la MÊME classe
   "sticky-var-img" sur les vignettes de son propre sélecteur de variation
   affiché sur la fiche produit — deux composants différents qui se
   marchaient dessus sur ce nom, l'un pouvant hériter du dimensionnement de
   l'autre selon la spécificité/l'ordre de chargement. */
.eh-sticky-var-img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 5px;
}

.sticky-var-label {
    font-size: 0.8125rem;
    display: block;
}

.sticky-var-unit-price {
    font-size: 0.625rem;
    font-weight: 400;

    /* Même gris d'encre que la légende du FAB (assets/css/core.css
       .eh-fab-item-label), plutôt qu'un gris neutre #666 propre à ce panneau. */
    color: var(--eh-color-ink-soft);
    display: block;
}

.sticky-variation-btn.active .sticky-var-unit-price {
    color: var(--eh-color-ink);
}

/* Zone bouton d'ajout + message de rupture : dernière zone de la grille,
   toujours en pleine largeur (voir grid-template-areas plus haut). */
.sticky-availability {
    grid-area: cart;
}

/* Réplique le VRAI bouton "Ajouter au panier" du thème minimog (mesuré en
   direct sur pureden.fr, variante "button2" — le style utilisé pour ce
   bouton précis, distinct du bouton vert primaire du thème) : fond gris
   clair au repos, bascule en noir plein au survol, coins à 5px, Work Sans
   (hérité) en 500 — pas le noir plein + coins carrés génériques du noyau,
   qui ne rappelait rien du site. */
.sticky-add-to-cart {
    font-family: inherit;
    width: 100%;
    padding: 13px 16px;
    background: #f2f2f2;
    color: var(--eh-color-ink);
    border: 1px solid #f2f2f2;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.sticky-add-to-cart:hover:not(:disabled) {
    background: var(--eh-color-ink);
    color: #fff;
    border-color: var(--eh-color-ink);

    /* Le thème pose un anneau vert (box-shadow) sur TOUT <button:hover> du
       site : sans ce reset, il se superposait à notre propre bascule noire. */
    box-shadow: none;
}

/* Gris plus sourd que l'état au repos (pas le noir du survol) : un bouton
   désactivé doit se lire comme MOINS présent, pas plus — l'inverse du choix
   précédent, qui rendait "désactivé" plus sombre que "actif". */
.sticky-add-to-cart:disabled {
    background: #eee;
    color: var(--eh-color-ink-soft);
    border-color: #eee;
    cursor: not-allowed;
    opacity: 1;
}

/* Remplace le bouton (masqué) quand le produit/la variation est en rupture.
   Fond/texte teintés d'encre (comme le reste du panneau), pas un gris
   neutre #eee/#666 propre à cet état. */
.sticky-out-of-stock {
    width: 100%;
    padding: 12px 15px;
    border-radius: 5px;
    background: rgba(var(--eh-color-ink-rgb), 0.06);
    color: var(--eh-color-ink-soft);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

/* État de chargement du bouton : même noir que le survol (voir plus haut),
   texte explicitement blanc — le bouton au repos étant désormais clair
   (#f2f2f2), le texte n'hérite plus du blanc qu'il tenait de l'ancien fond
   sombre par défaut. Même chose pour .added ci-dessous. */
.sticky-add-to-cart.loading {
    background: var(--eh-color-ink);
    color: #fff;
    border-color: var(--eh-color-ink);
    cursor: wait;
    pointer-events: none;
}

.sticky-add-to-cart .loading-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sticky-add-to-cart .loading-text::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Confirmation brève après un ajout réussi : seul signal explicite si le
   mini-panier n'est pas dans le champ de vision de l'utilisateur. */
.sticky-add-to-cart.added {
    background: #2f6b45;
    color: #fff;
    border-color: #2f6b45;
    cursor: default;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.sticky-price {
    font-weight: 600;
}

/* ========================================
   PRODUITS SIMPLES (sans variations)
   ======================================== */
.sticky-variation-bar.simple-product .sticky-variation-options {
    display: none !important;
}

/* Léger fondu du contenu à l'apparition (le grandissement de l'objet
   partagé lui-même est géré par #eh-fab, assets/css/core.css). */
.sticky-variation-bar.visible .sticky-variation-content {
    animation: contentFade 0.3s ease-out 0.08s both;
}

@keyframes contentFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-variation-bar.visible .sticky-variation-content {
        animation: none;
    }
}

/* Focus clavier visible, cohérent avec les panneaux cookies/accessibilité. */
.sticky-panel-close:focus-visible,
.sticky-variation-btn:focus-visible,
.sticky-add-to-cart:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}