/* =========================
   Layout principal produits
   ========================= */
.products {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.products-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* À partir de la tablette : sidebar gauche */
@media (min-width: 769px) {
    .products-layout {
        display: grid;
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
        align-items: flex-start;
        gap: 2rem;
    }
}

/* =========================
   En-tête + tri + devise
   ========================= */
.products__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.products__title {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
}

.currency-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.currency-toggle__label {
    font-size: 0.9rem;
    margin-right: 0.25rem;
    color: #555;
}

.currency-toggle__btn {
    width: 70px;
    height: auto;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    cursor: pointer;
}

/* bouton “non sélectionné” plus pâle */
.currency-toggle__btn--inactive {
    opacity: 0.4;
    filter: grayscale(0.1);
}

/* bouton “actif” */
.currency-toggle__btn--active {
    opacity: 1;
}

.products__controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.products__sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.products__sort-label {
    font-size: 0.95rem;
}

.products__sort-select {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #ccc;
    font-size: 0.95rem;
}

/* =========================
   Sidebar / filtres
   ========================= */
.products-filters {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 1.25rem 1rem;
}

.products-filters__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

/* Mobile : léger fond pour séparer le menu du reste */
@media (max-width: 768px) {
    .products-filters {
        border-radius: 0.75rem;
    }
}

/* =========================
   MENU STRUCTURE
   ========================= */
.menu__container {
    width: 100%;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.menu__group {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 0.5rem;
}

    .menu__group:last-child {
        border-bottom: none;
    }

.menu__group-header {
    margin-bottom: 0.25rem;
    position: relative;
    padding-right: 1.4rem; /* espace pour la flèche */
}

.menu__group-label {
    font-weight: 600;
}

/* Liens principaux */
.menu__link,
.menu__link-subgroup {
    display: inline-block;
    padding: 0.25rem 0;
    font-size: 0.95rem;
    text-decoration: none;
    color: #222;
}

    .menu__link:hover,
    .menu__link-subgroup:hover {
        color: var(--logoRed, #d41f26);
    }

/* Sous-menus */
.submenu {
    list-style: none;
    margin: 0.25rem 0 0.25rem 0;
    padding-left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.submenu--inner {
    margin-top: 0.25rem;
    padding-left: 0.75rem;
}

/* Liens de sous-catégorie */
.menu__sublink {
    display: inline-block;
    font-size: 0.9rem;
    text-decoration: none;
    color: #555;
    padding: 0.18rem 0;
}

    .menu__sublink:hover {
        color: var(--logoRed, #d41f26);
    }

/* Sous-groupes (Whisky, Parfums femmes/hommes, etc.) */
.menu__subgroup {
    margin-top: 0.25rem;
}

/* =========================
   Accordéon menu produits
   ========================= */

/* Sous-menus fermés par défaut */
.menu .submenu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease, padding 0.25s ease;
}

    /* Sous-menus de 2e niveau (whisky, parfums, etc.) */
    .menu .submenu.submenu--inner {
        padding-left: 1.5rem;
    }

/* Groupe ouvert (niveau 1) */
.menu__group.menu__group--open > .submenu {
    max-height: 800px;
    opacity: 1;
    transform: translateY(0);
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}

/* Sous-groupe ouvert (niveau 2) */
.menu__subgroup.menu__subgroup--open > .submenu {
    max-height: 600px;
    opacity: 1;
    transform: translateY(0);
    padding-top: 0.25rem;
    padding-bottom: 0.35rem;
}

/* Entêtes avec flèche alignée à droite */
.menu__group-toggle,
.menu__subgroup-toggle {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0.25rem;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .menu__group-toggle i,
    .menu__subgroup-toggle i {
        font-size: 0.85rem;
        color: #444;
        transition: transform 0.25s ease, color 0.18s ease;
    }

/* Survol : petit fond + flèche rouge */
.menu__group-header:hover,
.menu__subgroup:hover {
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 0.4rem;
}

    .menu__group-header:hover .menu__group-toggle i,
    .menu__subgroup:hover .menu__subgroup-toggle i {
        color: var(--logoRed, #d41f26);
    }

/* Rotation flèche quand le groupe est ouvert */
.menu__group.menu__group--open .menu__group-toggle i {
    transform: rotate(90deg);
}

/* Rotation flèche pour les sous-groupes ouverts */
.menu__subgroup.menu__subgroup--open .menu__subgroup-toggle i {
    transform: rotate(90deg);
}

.menu__subgroup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-right: 1.4rem; /* espace pour la flèche */
    border-radius: 0.4rem;
}

    .menu__subgroup-header:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }

/* =========================
   Grille de produits
   ========================= */

/* Grille de produits */
.products-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}



/***** Grille selon tes 3 paliers *****/
/* 769px à 1199px : 2 colonnes */
@media (min-width: 769px) and (max-width: 1199px) {
    .products-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

/* 1200px+ : 3 colonnes */
@media (min-width: 1200px) {
    .products-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}
/* Carte produit (scope: liste produits) */
.products-list .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    /* Transition douce pour le hover */
    transition: box-shadow 0.18s ease-out, border-color 0.18s ease-out, background-color 0.18s ease-out;
}
.products-list .product-card:focus-within {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        border-color: rgba(0, 0, 0, 0.12);
    }

/* Hover : pas de “lift” (pas de translateY), juste un polish léger */
@media (hover:hover) {
    .products-list .product-card:hover {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        border-color: rgba(0, 0, 0, 0.12);
    }
}
.product-card--link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.products-list .product-card__image-wrapper {
    width: 100%;
    padding: 1rem;
    text-align: center;
}
.products-list .product-card__image {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}
.products-list .product-card__body {
    padding: 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 auto;
}
.products-list .product-card__title {
    font-size: 1rem;
    margin: 0 0 0.25rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.3em * 2);
}
.product-card__title a {
        color: inherit;
        text-decoration: none;
    }

        .product-card__title a:hover {
            text-decoration: underline;
        }
.products-list .product-card__format {
    font-size: 0.95rem;
    color: #555;
    margin: 0 0 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.2em;
}
/* --- Prix dans la liste (Products.aspx) --- */
.products-list .product-card__price {
    margin-top: 0.35rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    line-height: 1.25;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
}
/* prix régulier affiché seul (pas de promo) */
.products-list .product-card__price-regular {
    font-size: 1.0rem;
    font-weight: 700;
    color: #d41f26;
}

/* prix régulier barré quand il y a un spécial */
.products-list .product-card__price-regular--old {
    font-size: 1.0rem;
    font-weight: 600;
    color: #333;
    text-decoration: line-through;
    opacity: 0.7;
    margin-right: 0.35rem;
}

/* libellé "Spécial :" */
.products-list .product-card__price-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #d41f26;
    margin-right: 0.2rem;
}

/* prix spécial (rouge, mis en avant) */
.products-list .product-card__price-special {
    font-size: 1.0rem;
    font-weight: 700;
    color: #d41f26;
}

/* ligne "Du ... au ..." */
.products-list .product-card__price-dates {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.1rem;
    flex: 0 0 100%;
    width: 100%;
}
/* --- Statut / En stock --- */
.products-list .product-card__inventory {
    min-height: 1.2em;
    margin-top: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #058c41;
}

/* Bloc actions dans la carte */
.products-list .product-card__actions {
    display: flex;
    min-height: 6.25rem; /* ajuste au besoin (ex: 5.75rem à 7rem) */
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

    /* Au cas où le conteneur serait présent mais vide */
    .products-list .product-card__actions:empty {
        min-height: 6.25rem;
    }

/* Mobile : actions bien alignées */
@media (max-width: 575.98px) {
.products-list .product-card__actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
}

.product-qty__controls {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    overflow: hidden;
    background-color: #fff;
}

.product-qty__btn {
    border: none;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    background: none;
    font-size: 1.1rem;
    line-height: 1;
    min-width: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .product-qty__btn:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }

.product-qty__input {
    width: 2.6rem;
    text-align: center;
    border: none;
    outline: none;
    font-size: 0.95rem;
}

    .product-qty__input:focus {
        outline: none;
    }

/* Bouton “Ajouter au panier” dans la carte */
.btn.btn--addtocart {
    font-size: 0.9rem;
    padding: 0.45rem 0.9rem;
}

/* =========================
   Bouton Ajouter au panier large
   ========================= */
.product-addtocart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #d41f26, #a80e12);
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

    .product-addtocart:hover {
        filter: brightness(1.05);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }

    .product-addtocart:focus-visible {
        outline: 3px solid #000;
        outline-offset: 3px;
    }

/* =========================
   Bouton "Afficher plus"
   ========================= */
.products__more {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.btn.btn--showmore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.70rem 1.35rem 0.70rem 3.35rem; /* place pour l’icône à gauche */
    border-radius: 999px;
    background-color: #fff;
    color: var(--logoRed, #d41f26);
    border: 2px solid rgba(212, 31, 38, 0.90);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    /* Icône (fonctionne aussi si c’est un <input>) */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%0A%20%20%3Ccircle%20cx%3D%2716%27%20cy%3D%2716%27%20r%3D%2714%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23d41f26%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M16%2011v10%27%20stroke%3D%27%23d41f26%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M12.5%2018.5%2016%2022l3.5-3.5%27%20fill%3D%27none%27%20stroke%3D%27%23d41f26%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%0A%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: 1.05rem 50%;
    background-size: 1.95rem 1.95rem;
    box-shadow: none;
    filter: none;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, background-image 160ms ease;
    -webkit-appearance: none;
    appearance: none;
}

@media (hover:hover) {
    .btn.btn--showmore:hover {
        background-color: rgba(212, 31, 38, 0.06);
        border-color: rgba(212, 31, 38, 1);
        box-shadow: 0 10px 22px rgba(0,0,0,0.10);
        filter: none;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%0A%20%20%3Ccircle%20cx%3D%2716%27%20cy%3D%2716%27%20r%3D%2714%27%20fill%3D%27%23d41f26%27%20stroke%3D%27%23d41f26%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M16%2011v10%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M12.5%2018.5%2016%2022l3.5-3.5%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%0A%3C%2Fsvg%3E");
    }
}

.btn.btn--showmore:focus-visible {
    outline: 3px solid rgba(212, 31, 38, 0.45);
    outline-offset: 3px;
}

/* =========================
   Loader à trois points
   ========================= */
.products-loader {
    display: none; /* sera mis à flex en JS */
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    gap: 0.3rem;
}

.products-loader__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--logoRed, #d41f26);
    animation: dotPulse 0.8s infinite ease-in-out;
    opacity: 0.4;
}

    .products-loader__dot:nth-child(2) {
        animation-delay: 0.15s;
    }

    .products-loader__dot:nth-child(3) {
        animation-delay: 0.30s;
    }

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.3;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}
/* Focus visible sur le contrôle quantité */
.products-list .product-qty__controls:focus-within {
    border-color: rgba(212, 31, 38, 0.55);
    box-shadow: 0 0 0 3px rgba(212, 31, 38, 0.18);
}

/* Header layout polish (Products.aspx) */
@media (min-width: 769px) {
    .products__header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .products__controls {
        justify-content: flex-end;
        gap: 1rem;
    }
}

/* Select / inputs : focus visible cohérent */
.products__sort-select:focus-visible,
.menu__link:focus-visible,
.menu__group-toggle:focus-visible,
.menu__subgroup-toggle:focus-visible {
    outline: 3px solid rgba(212, 31, 38, 0.45);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .products-list .product-card,
    .product-addtocart,
    .btn.btn--showmore,
    .menu__submenu,
    .menu__subgroup-list {
        transition: none !important;
        animation: none !important;
    }
}