/* ----------GLOBAL---------- */
@media (max-width: 1024px) {
    html {
        overflow-x: hidden;
    }
}

body {
    font-family: 'Open Sans', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #FEFEFE;
    overflow-x: hidden;
}

@font-face {
    font-family: "Halo Handletter";
    src: url("fonts/HaloHandletter.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "AmaticSC-Bold";
    src: url("fonts/AmaticSC-Bold.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Titres principaux du menu header en majuscule */
.menu > ul > li.submenu-container > a {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.filter-group-nouveautes .filter-option.is-zero {
    display: none !important;
}


/* ----------ALL BACKGROUND DECORATION---------- */
.header-search::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-image: url('img/logo-berbere.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 200%;
    opacity: 0.17;
    z-index: -1;
    pointer-events: none;
}

.container {
    max-width: 1400px;
    margin: auto;
    padding: 0 40px;
}

/* ----------HEADER---------- */
.header {
    position: sticky;
    top: 0;
    width: 100%;
    background: #fefefc;
    z-index: 1000;
    transition: background 0.2s ease;
}

.header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(to right, #ae7c3a00, #6f5338, #ae7c3a00);
}

.header.search-overlay-open {
    background: transparent;
}

.header.search-overlay-open::after {
    opacity: 0;
}

.header.search-overlay-open .header-container> :not(.header-search-overlay) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.header-container {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(320px, 1fr);
    align-items: center;
    padding: 1px 20px;
}

.header.scrolled {
    backdrop-filter: blur(10px);
    background: rgba(254, 252, 253, 0.6);
}

.header.search-overlay-open.scrolled {
    background: transparent;
    backdrop-filter: none;
}

.header.scrolled .social-icons {
    background: rgba(255, 252, 247, 0.2);
}

/* ----------LOGO---------- */
.logo {
    position: relative;
    transform: translateX(clamp(0px, 3vw, 48px));
}

.logo a {
    position: relative;
    z-index: 1;
    display: inline-block;
}

.logo img:first-child {
    height: 130px;
    width: auto;
    transition: transform 0.3s ease;
}

.logo img:first-child:hover {
    transform: scale(1.02);
    cursor: pointer;
}

.logo-words {
    position: absolute;
    top: 50%;
    left: calc(40% + 2px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: none;
    white-space: nowrap;
}

.logo-words::before {
    content: "";
    position: absolute;
    left: -10px;
    right: -8px;
    bottom: -13px;
    height: 1px;
    background: linear-gradient(90deg, rgba(174, 123, 58, 0), rgba(174, 123, 58, 0.78), rgba(174, 123, 58, 0));
    background-size: 210% 100%;
    background-position: 0 50%;
    opacity: 0.7;
    animation: logoWordsSheen 10s ease-in-out infinite;
}

.logo-words::after {
    content: "\2665";
    position: absolute;
    right: -5px;
    bottom: 6px;
    font-size: 11px;
    line-height: 1;
    color: #6f5338;
    text-shadow: 0 0 5px rgba(174, 123, 58, 0.24);
}

.logo-words span {
    font-family: "Halo Handletter", "Cormorant Garamond", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #6f5338;
    text-transform: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.logo-hover-hint {
    position: absolute;
    top: calc(50% + 59.4px);
    left: calc(34% + 5px);
    transform: translateY(-50%) translateX(-4px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.logo:hover .logo-hover-hint {
    opacity: 0;
}

.logo a:hover + .logo-words ~ .logo-hover-hint {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.logo-hover-arrow {
    font-size: 23px;
    color: #3A3A3A;
    display: inline-block;
    transform: rotate(-15deg) translateY(-7px);
}

.logo-hover-text {
    display: inline-flex;
    align-items: center;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #3A3A3A;
    background: linear-gradient(to right, rgba(174, 124, 58, 0.22) 0%, rgba(174, 124, 58, 0.12) 45%, rgba(174, 124, 58, 0) 100%);
    border-radius: 8px 0 0 8px;
    padding-left: 7px;
    text-transform: uppercase;
}

.logo-hover-letter {
    opacity: 1;
}

.logo-hover-space {
    width: 0.35em;
}

/* ----------MENU---------- */
.menu {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-self: center;
}

.menu > ul {
    display: contents;
}

.menu > ul > li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu a {
    position: relative;
    text-decoration: none;
    color: #3A3A3A;
    font-family: 'Manrope', 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding-bottom: 5px;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Les liens principaux du menu en majuscule — géré en haut du fichier */

.menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    background: #AE7B3A;
    transition: width 0.3s ease;
    height: 3px;
}

.menu a:hover::after {
    width: 100%;
}

.menu a:hover {
    color: #AE7B3A;
    animation: rainbow-text 5s linear infinite;
}

@keyframes rainbow-text {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

/* ----------SUBMENU - DROPDOWN STYLE---------- */
.submenu-container {
    position: relative;
}


.submenu {
    display: block;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    min-width: 180px;
    padding: 12px 0;
    background: #ffffff;
    border: 1px solid #000000;
    border-top: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 999;
    border-radius: 0 0 2px 2px;
    overflow: hidden;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
    transition: none;
}

/* MEGA MENU MODE FEMME */
.submenu-mega {
    min-width: 700px;
    max-width: 900px;
    padding: 32px 36px 28px 36px;
    display: flex;
    gap: 48px;
    background: #fff;
    border-radius: 0 0 2px 2px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.13);
        border: 1px solid #000000;
    border-top: none;
}

.submenu-mega-col {
    display: flex;
    flex-direction: column;
    min-width: 180px;
    gap: 2px;
}

.submenu-mega-title {
    font-size: 1.08em;
    font-weight: 700;
    color: #AE7B3A;
    margin-bottom: 10px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    background: none;
    border: none;
    padding: 0;
}

.submenu-mega-title--link {
    cursor: pointer;
}

.submenu-mega-title--link:hover {
    color: #8f632f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.submenu-mega-title--link:focus-visible {
    outline: 2px solid rgba(174, 123, 58, 0.55);
    outline-offset: 2px;
}

.submenu-mega .submenu-mega-col a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    font-size: 13px;
    font-weight: 400;
    color: #3A3A3A;
    padding: 7px 0 7px 0;
    background: none;
    border: none;
    transition: color 0.18s, background 0.18s, padding 0.18s;
    text-decoration: none;
}

.submenu-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    align-self: center;
    display: block;
    opacity: 0.8;
    transition: opacity 0.18s;
}

.submenu-mega .submenu-mega-col a:hover .submenu-icon {
    opacity: 0.9;
}

.submenu-mega .submenu-mega-col a:hover {
    color: #AE7B3A;
    background: #f8f2ed;
    padding-left: 10px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 900px) {
    .submenu-mega {
        min-width: 0;
        max-width: 98vw;
        padding: 18px 6vw 18px 6vw;
        gap: 18px;
    }
    .submenu-mega-col {
        min-width: 120px;
    }
}

.submenu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #AE7B3A;
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

.submenu-container:hover .submenu::before,
.submenu-container:focus-within .submenu::before {
    animation: submenu-border-reveal 0.13s ease forwards, rainbow-text 5s linear infinite;
}

@keyframes submenu-border-reveal {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.submenu-inner {
    display: flex;
    flex-direction: column;
}

/* Colonne du mega menu */
.submenu-col {
    display: none;
}

.submenu-col-title {
    display: none;
}

.submenu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 400;
    color: #3A3A3A;
    text-decoration: none;
    background: transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.submenu a::after {
    display: none;
}

.submenu a:hover {
    color: #AE7B3A;
    background: rgb(248, 242, 237);
    padding-left: 21px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    animation: none;
}

/* Lien "Voir tout" mis en avant */
.submenu a.voir-tout {
    font-weight: 700;
    font-size: 13px;
    color: #AE7B3A;
    margin-top: 0;
}

.submenu a.voir-tout:hover {
    text-decoration: underline;
}

/* Image promo dans le mega menu */
.submenu-promo {
    display: none;
}

/* Ouverture */
.submenu-container:hover .submenu,
.submenu-container:focus-within .submenu {
    visibility: visible;
    pointer-events: auto;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.22s ease-out;
}

/* Séparateur vertical entre colonnes */
.submenu-divider {
    width: 1px;
    background: #f0ece7;
    align-self: stretch;
    flex-shrink: 0;
}

/* ----------SEARCH HEADER OVERLAY---------- */
.header-search {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 136.5px;
    background: #FDFEFC;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

.header-search.scrolled {
    backdrop-filter: blur(10px);
    background: rgba(254, 252, 253, 0.9);
}

.header-search::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    /* en bas de la section */
    width: 100%;
    height: 1.5px;
    background: linear-gradient(to right, #ae7c3a00, #ae7c3a, #ae7c3a00);
}

/* ===== DÉCORATIONS BERBÈRES — CÔTÉS GAUCHE & DROITE ===== */

.search-berber-left,
.search-berber-right {
    position: absolute;
    top: 0;
    height: 100%;
    width: 40%;
    max-width: 420px;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.search-berber-left {
    left: 0;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 40%, rgba(0,0,0,0.28) 72%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 40%, rgba(0,0,0,0.28) 72%, rgba(0,0,0,0) 100%);
}

.search-berber-right {
    right: 0;
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 40%, rgba(0,0,0,0.28) 72%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to left, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 40%, rgba(0,0,0,0.28) 72%, rgba(0,0,0,0) 100%);
}

/* Motif géométrique amazigh — double couche pour effet textile */
.search-berber-left::before,
.search-berber-right::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpolygon points='40,6 74,40 40,74 6,40' fill='none' stroke='%23AE7B3A' stroke-width='1.5' opacity='0.44'/%3E%3Cpolygon points='40,22 58,40 40,58 22,40' fill='none' stroke='%23AE7B3A' stroke-width='0.9' opacity='0.28'/%3E%3Cline x1='40' y1='22' x2='40' y2='58' stroke='%23AE7B3A' stroke-width='0.7' opacity='0.22'/%3E%3Cline x1='22' y1='40' x2='58' y2='40' stroke='%23AE7B3A' stroke-width='0.7' opacity='0.22'/%3E%3Cpolygon points='40,31 49,40 40,49 31,40' fill='%23AE7B3A' opacity='0.18'/%3E%3Ccircle cx='40' cy='6' r='2.5' fill='%23AE7B3A' opacity='0.52'/%3E%3Ccircle cx='74' cy='40' r='2.5' fill='%23AE7B3A' opacity='0.52'/%3E%3Ccircle cx='40' cy='74' r='2.5' fill='%23AE7B3A' opacity='0.52'/%3E%3Ccircle cx='6' cy='40' r='2.5' fill='%23AE7B3A' opacity='0.52'/%3E%3Cpolygon points='0,0 18,0 0,18' fill='%23AE7B3A' opacity='0.1'/%3E%3Cpolygon points='80,0 62,0 80,18' fill='%23AE7B3A' opacity='0.1'/%3E%3Cpolygon points='0,80 18,80 0,62' fill='%23AE7B3A' opacity='0.1'/%3E%3Cpolygon points='80,80 62,80 80,62' fill='%23AE7B3A' opacity='0.1'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpolygon points='20,3 37,20 20,37 3,20' fill='none' stroke='%23C4934A' stroke-width='0.8' opacity='0.3'/%3E%3Cpolygon points='20,12 28,20 20,28 12,20' fill='%23AE7B3A' opacity='0.13'/%3E%3C/svg%3E");
    background-size: 80px 80px, 40px 40px;
    background-repeat: repeat, repeat;
}

/* Frange triangulaire extérieure — liseré textile amazigh */
.search-berber-left::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24'%3E%3Cpolygon points='0,0 12,12 0,24' fill='%23AE7B3A' opacity='0.62'/%3E%3Cpolygon points='2,4 9,12 2,20' fill='%23FDFEFC' opacity='0.58'/%3E%3C/svg%3E");
    background-size: 12px 24px;
    background-repeat: repeat-y;
    animation: berberFringeShimmer 4s ease-in-out infinite;
}

.search-berber-right::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24'%3E%3Cpolygon points='12,0 0,12 12,24' fill='%23AE7B3A' opacity='0.62'/%3E%3Cpolygon points='10,4 3,12 10,20' fill='%23FDFEFC' opacity='0.58'/%3E%3C/svg%3E");
    background-size: 12px 24px;
    background-repeat: repeat-y;
    animation: berberFringeShimmer 4s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes berberFringeShimmer {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}

@media (max-width: 900px) {
    .search-berber-left,
    .search-berber-right {
        display: none;
    }
}

.header-search.active {
    transform: translateY(0);
}

.header-search input {
    max-width: 50%;
    /* responsive sur mobile */
    width: 350px;
    font-size: 16px;
    border: 2px solid #AE7B3A;
    /* Ajout d'un encadré */
    border-radius: 4px;
    /* Coins arrondis */
    outline: none;
    padding: 10px 10px 10px 35px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(174, 123, 58, 0.08);
    /* Légère ombre */
    transition: border-color 0.2s;
    animation: rainbow-border 5s linear infinite;
    margin-left: 50px;
}

.header-search input:focus {
    border-color: #191919;
    /* Couleur différente au focus */
}

@keyframes rainbow-border {
    0% {
        border-color: #AE7B3A;
        box-shadow: 0 0 8px 0 #AE7B3A;
    }

    20% {
        border-color: #E94F37;
        box-shadow: 0 0 8px 0 #E94F37;
    }

    40% {
        border-color: #FFD700;
        box-shadow: 0 0 8px 0 #FFD700;
    }

    60% {
        border-color: #3AAFA9;
        box-shadow: 0 0 8px 0 #3AAFA9;
    }

    80% {
        border-color: #6A4C93;
        box-shadow: 0 0 8px 0 #6A4C93;
    }

    100% {
        border-color: #AE7B3A;
        box-shadow: 0 0 8px 0 #AE7B3A;
    }
}

/* ICONS OVERLAY */

.search-icon-input {
    position: absolute;
    left: calc(50% + 166px);
    width: 22px;
    height: 22px;
    padding: 4px;
    box-sizing: content-box;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.75;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform-origin: center;
}

.search-icon-input:hover {
    opacity: 0.9;
    animation: search-icon-hover 0.45s ease;
    transform: scale(1.05);
}

.search-icon-input:active {
    transform: scale(0.96);
}

@keyframes search-icon-hover {
    0% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.12) rotate(-8deg);
    }

    100% {
        transform: scale(1.05) rotate(0deg);
    }
}

.search-close {
    width: 30px;
    margin-right: 10px;
    cursor: pointer;
}

/* OVERLAY SOMBRE LORSQUE QU'ON CLIQUE SUR RECHERCHER */

.header-search-overlay {
    position: fixed;
    will-change: opacity;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 3000;
}

/* ACTIF */

.header-search-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ANIMATION DESCENTE */

.header-search-overlay.active .header-search {

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

/* INPUT */

.search-close {
    width: 30px;
    font-size: 26px;
    height: 30px;
    background: #FDFEFC;
    border: 1px solid rgba(122, 92, 62, 0.16);
    cursor: pointer;
    margin-left: 10px;
    color: #3A3A3A;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.search-close:hover {
    color: #AE7B3A;
    background: rgba(255, 248, 239, 0.92);
    border-color: rgba(174, 123, 58, 0.32);
    transform: rotate(90deg);
}

.search-toggle {
    display: flex;
    align-items: center;
    align-self: center;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-bottom: 0;
}

.icon-toggle:hover {
    opacity: 0.9;
}

/* ----------BURGER MENU---------- */
.burger {
    display: none;
    /* caché par défaut */
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    transition: transform 0.24s ease, background-color 0.24s ease;
    z-index: 1001;
    /* devant le menu */
}

.burger span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #454545;
    border-radius: 2px;
    transform-origin: center;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, background-color 0.2s ease;
}

.burger:hover {
    background-color: rgba(174, 123, 58, 0.08);
}

.burger:active {
    transform: scale(0.94);
}

/* Menu mobile */
.menu.mobile {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #FEFCFD;
    flex-direction: column;
    gap: 20px;
    padding: 15px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.menu.mobile a {
    font-size: 20px;
    padding: 10px 0;
}

/* burger actif => croix */
.burger.active {
    transform: rotate(0deg);
}

.burger.active span {
    background-color: #AE7B3A;
}

.burger.active span:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
}

.burger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.burger.active span:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
}

.burger:hover.active span {
    background-color: #8f632f;
}

@media (prefers-reduced-motion: reduce) {
    .burger,
    .burger span {
        transition: none;
    }
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .header {
        min-height: 92px;
    }

    .header-container {
        grid-template-columns: 1fr auto;
        padding: 0 14px;
        min-height: 92px;
    }

    .logo {
        justify-self: start;
        transform: none;
    }

    .logo img:first-child {
        height: 96px;
    }

    .logo-words {
        left: calc(40% + 1px);
    }

    .logo-words span {
        font-size: 19px;
    }

    .menu {
        display: none;
        /* cache menu desktop */
    }

    .social-icons {
        display: none;
    }

    .icons {
        gap: 4px;
    }

    .icon-wrapper {
        width: 34px;
        height: 34px;
    }

    .radial-icon {
        width: 23px;
        height: 23px;
    }

    .radial-icon-cart {
        width: 25px;
        height: 25px;
    }

    .radial-icon-account {
        width: 24px;
        height: 24px;
    }

    .burger {
        display: flex;
        width: 25px;
        height: 20px;
        margin-left: 2px;
    }

    .burger.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
    .burger.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

    .menu.mobile .submenu-container {
        width: 100%;
    }

    .menu.mobile .submenu {
        position: static;
        transform: none;
        clip-path: none;
        min-width: 0;
        max-height: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        overflow: hidden;
        border: 0;
        box-shadow: none;
        padding: 0;
        transition: max-height 0.25s ease, padding 0.25s ease;
    }

    .menu.mobile .submenu::before {
        display: none;
    }

    .menu.mobile .submenu-mega {
        display: block;
        max-width: 100%;
        padding: 0;
        border-radius: 0;
    }

    .menu.mobile .submenu-mega-col {
        min-width: 0;
        gap: 0;
    }

    .menu.mobile .submenu-mega-title {
        margin: 10px 0 6px;
        font-size: 0.95rem;
    }

    .menu.mobile .submenu-divider {
        display: none;
    }

    .menu.mobile .submenu-container.is-open .submenu {
        max-height: 70vh;
        padding: 8px 0 2px;
        overflow-y: auto;
    }
}

@media (max-width: 768px) {
    .header {
        min-height: 78px;
    }

    .header-container {
        padding: 0 10px;
        min-height: 78px;
    }

    .header::after {
        height: 1px;
    }

    .logo img:first-child {
        height: 76px;
    }

    .logo-words,
    .logo-hover-hint {
        display: none;
    }

    .icons {
        gap: 2px;
    }

    .icon-wrapper {
        width: 31px;
        height: 31px;
    }

    .radial-icon {
        width: 21px;
        height: 21px;
    }

    .radial-icon-cart {
        width: 23px;
        height: 23px;
        margin-top: 0;
    }

    .radial-icon-account {
        width: 22px;
        height: 22px;
    }

    .cart-count {
        top: -4px;
        right: -4px;
        width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .burger {
        width: 23px;
        height: 18px;
    }

    .burger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .burger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

@media (max-width: 480px) {
    .header {
        min-height: 68px;
    }

    .header-container {
        padding: 0 8px;
        min-height: 68px;
    }

    .logo img:first-child {
        height: 64px;
    }

    .icons {
        gap: 1px;
    }

    .icon-wrapper {
        width: 29px;
        height: 29px;
    }

    .radial-icon {
        width: 19px;
        height: 19px;
    }

    .radial-icon-cart,
    .radial-icon-account {
        width: 20px;
        height: 20px;
    }

    .burger {
        width: 21px;
        height: 16px;
    }

    .burger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .burger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ----------ICONS HEADER---------- */
.icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    justify-self: end;
}

/* Boutons / liens */
.icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Images */
.icon-wrapper img {
    display: block;
    width: 20px;
    transition: transform 0.2s ease;
}

.icon-wrapper:focus-visible img,
.icon-wrapper:focus-visible .radial-icon {
    transform: scale(1.05);
}

.icon-wrapper.is-clicked img,
.icon-wrapper.is-clicked .radial-icon {
    transform: scale(1.05);
    animation: iconCtaShake 0.28s ease;
}

@keyframes iconCtaShake {
    0% {
        transform: scale(1.05) translateX(0) rotate(0deg);
    }

    35% {
        transform: scale(1.05) translateX(-0.5px) rotate(-1.6deg);
    }

    65% {
        transform: scale(1.05) translateX(0.5px) rotate(1.3deg);
    }

    100% {
        transform: scale(1.05) translateX(0) rotate(0deg);
    }
}

/* Gestion icône hover (outline → filled) */
.icon-hover {
    position: absolute;
    opacity: 0;
}

.icon-wrapper:hover .icon-hover,
.icon-wrapper:focus .icon-hover {
    opacity: 1;
}

.icon-wrapper:hover .icon-default,
.icon-wrapper:focus .icon-default {
    opacity: 0;
}

.radial-icon {
    width: 25px;
    height: 25px;
    display: block;
}

.radial-icon-cart {
    width: 28px;
    height: 28px;
    margin-top: 2px;
}

.radial-icon-account {
    width: 27px;
    height: 27px;
    margin-left: 1px;
}

.radial-icon-outline {
    fill: none;
    stroke: #3a3a3a;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.22s ease;
}

.radial-icon-fill {
    fill: #3a3a3a;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.icon-wrapper:hover .radial-icon-fill,
.icon-wrapper:focus-visible .radial-icon-fill,
.icon-wrapper.is-active .radial-icon-fill,
.icon-wrapper.is-clicked .radial-icon-fill {
    transform: scale(1);
}

.icon-wrapper:hover .radial-icon-outline,
.icon-wrapper:focus-visible .radial-icon-outline,
.icon-wrapper.is-active .radial-icon-outline,
.icon-wrapper.is-clicked .radial-icon-outline {
    stroke: #3a3a3a;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* FOCUS PROPRE (clavier / télécommande) */
.icon-wrapper:focus {
    outline: 3px solid black;
    outline-offset: 3px;
    border-radius: 4px;
}

.icon-wrapper:active,
.icon-wrapper.is-active {
    background: rgba(174, 123, 58, 0.18);
    box-shadow: 0 0 0 3px rgba(174, 123, 58, 0.18);
}

/* Badge panier */
.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 12px;
}

/* ----------PANNEAUX LATÉRAUX (FAVORIS, COMPTE, PANIER)---------- */
.side-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.side-panel-overlay.active {
    opacity: 1;
    visibility: visible;
}

.side-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 95vw;
    height: 100vh;
    background: #FDFEFC;
    z-index: 2001;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.14);
    font-family: 'Open Sans', Arial, sans-serif;
}

.side-panel.active {
    transform: translateX(0);
}

.side-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #f0ece7;
    flex-shrink: 0;
}

.side-panel-title {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #3A3A3A;
    letter-spacing: 0.5px;
}

.side-panel-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 252, 247, 0.72);
    border: 1px solid rgba(122, 92, 62, 0.16);
    cursor: pointer;
    color: #3A3A3A;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.side-panel-close:hover {
    color: #AE7B3A;
    background: rgba(255, 248, 239, 0.92);
    border-color: rgba(174, 123, 58, 0.32);
    transform: rotate(90deg);
}

.side-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.side-panel-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding: 50px 0;
}

.side-panel-empty-state p {
    font-size: 15px;
    color: #888;
    margin: 0;
}

.favorite-heart {
    color: #c8b49a;
    transform-origin: center;
    animation: favoriteHeartBeat 1.9s ease-in-out infinite;
}

.favorite-heart path {
    stroke: currentColor;
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
    animation: favoriteHeartDraw 1s ease forwards, favoriteHeartGlow 1.9s ease-in-out infinite 1s;
}

@keyframes favoriteHeartDraw {
    from {
        stroke-dashoffset: 64;
        opacity: 0.6;
    }

    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes favoriteHeartBeat {

    0%,
    100% {
        transform: scale(1);
    }

    22% {
        transform: scale(1.07);
    }

    42% {
        transform: scale(0.98);
    }

    62% {
        transform: scale(1.05);
    }
}

@keyframes favoriteHeartGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 0 rgba(200, 180, 154, 0));
    }

    35% {
        filter: drop-shadow(0 0 6px rgba(200, 180, 154, 0.45));
    }
}

.side-panel-btn {
    display: block;
    width: 100%;
    padding: 13px 20px;
    background: #3A3A3A;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    border: 2px solid #3A3A3A;
    border-radius: 2px;
    cursor: pointer;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.side-panel-btn:hover {
    background: #AE7B3A;
    border-color: #AE7B3A;
}

.side-panel-btn-outline {
    background: transparent;
    color: #3A3A3A;
    margin-top: 10px;
}

.side-panel-btn-outline:hover {
    background: #3A3A3A;
    color: #fff;
}

/* FORMULAIRE CONNEXION */
.side-panel-form {
    display: flex;
    flex-direction: column;
}

.side-panel-form label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
    margin-top: 18px;
    margin-bottom: 6px;
}

.side-panel-form input {
    width: 100%;
    padding: 11px 14px;
    font-size: 15px;
    border: 1px solid #ddd;
    border-radius: 2px;
    outline: none;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    transition: border-color 0.2s ease;
}

.side-panel-form input:focus {
    border-color: #AE7B3A;
    box-shadow: 0 0 0 2px rgba(174, 123, 58, 0.15);
}

.side-panel-link-small {
    font-size: 13px;
    color: #aaa;
    text-decoration: none;
    text-align: right;
    margin-top: 8px;
    margin-bottom: 20px;
    transition: color 0.2s ease;
}

.side-panel-link-small:hover {
    color: #AE7B3A;
}

.side-panel-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 18px;
    color: #ccc;
    font-size: 13px;
}

.side-panel-separator::before,
.side-panel-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #f0ece7;
}

.side-panel-links {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #f0ece7;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.side-panel-links a {
    font-size: 14px;
    color: #888;
    text-decoration: none;
    padding: 5px 0;
    transition: color 0.2s ease;
}

.side-panel-links a:hover {
    color: #AE7B3A;
}

/* MINI PANIER */
.side-panel-footer {
    padding: 20px 24px;
    border-top: 1px solid #f0ece7;
    flex-shrink: 0;
}

.side-panel-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #3A3A3A;
}

.side-panel-cart-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.side-panel-cart-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.side-panel-cart-item img {
    width: 72px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.side-panel-cart-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.side-panel-cart-name {
    font-size: 14px;
    font-weight: 600;
    color: #3A3A3A;
}

.side-panel-cart-qty,
.side-panel-cart-price {
    font-size: 13px;
    color: #888;
}

.side-panel-cart-price {
    color: #AE7B3A;
    font-weight: 600;
}

/* PANIER COUNT */
.icons a {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #AE7B3A;
    color: white;
    font-size: 12px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

/* Badge caché */
.cart-count.hidden {
    display: none;
}

/* Animation ajout produit */
.cart-count.bump {
    animation: cartBump 0.35s ease;
}

@keyframes cartBump {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }

}

/* ICONS RESEAUX SOCIAUX */
.social-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    margin-left: 22px;
    padding: 5px 10px;
    border: 1px solid rgba(122, 92, 62, 0.4);
    border-radius: 999px;
    background: rgba(255, 252, 247, 0.68);
}

.social-icons::after {
    content: "";
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, -6px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 4;
    font-family: "Halo Handletter", "Cormorant Garamond", serif;
    font-size: 23px;
    color: #6f5338;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(174,123,58,0.08);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.social-icons:has(a[aria-label="Instagram"]:hover)::after,
.social-icons:has(a[aria-label="Instagram"]:focus-visible)::after {
    content: "Suivez-nous sur Instagram";
    opacity: 1;
    transform: translate(-50%, 0);
}

.social-icons:has(a[aria-label="Facebook"]:hover)::after,
.social-icons:has(a[aria-label="Facebook"]:focus-visible)::after {
    content: "Suivez-nous sur Facebook";
    opacity: 1;
    transform: translate(-50%, 0);
}

.social-follow-text {
    font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
    font-size: 20px;
    line-height: 1;
    color: #7a5c3e;
    letter-spacing: 0.2px;
    margin-right: 2px;
    white-space: nowrap;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    position: relative;
}

.social-icons img {
    width: 22px;
    height: 22px;
    cursor: pointer;
    opacity: 1;
    transition: transform 0.2s ease, opacity 0.2s ease;
    pointer-events: none;
}

.social-icons .icon-default,
.social-icons .icon-hover {
    position: absolute;
    inset: 0;
    margin: auto;
}

.social-icons .icon-hover {
    opacity: 1;
    visibility: hidden;
    z-index: 1;
}

.social-icons .icon-default {
    opacity: 1;
    visibility: visible;
}

.social-icons a:hover img,
.social-icons a:focus-visible img {
    transform: scale(1.05);
    opacity: 1;
}

.social-icons a:hover .icon-hover,
.social-icons a:focus-visible .icon-hover {
    opacity: 1;
    visibility: visible;
}


@media (max-width: 1280px) {
    .social-icons {
        margin-left: 14px;
        padding: 5px 8px;
        gap: 6px;
    }

    .social-follow-text {
        font-size: 17px;
    }

    .social-icons a {
        width: 30px;
        height: 30px;
    }

    .social-icons::after {
        font-size: 1.3rem;
    }

    .social-icons a::after {
        font-size: 1.3rem;
    }
}

/* ----------CAROUSEL---------- */
.carousel {
    width: 100%;
    height: 70vh;
    max-height: 900px;
    position: relative;
    overflow: hidden;
}

.carousel-container {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0);
    touch-action: pan-y;

}

.carousel-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: translateZ(0);
    opacity: 0;
    transition: opacity 0.8s ease, box-shadow 0.5s ease;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
}

.carousel-slide.active {
    opacity: 1;
    transform: translateZ(0);
}

.carousel-slide.active.zoom-in img {
    animation: carouselImageZoomIn 8s linear forwards;
}

.carousel-slide.active.zoom-out img {
    animation: carouselImageZoomOut 8s linear forwards;
}

@keyframes carouselImageZoomIn {

    from {
        transform: scale(1.02);
    }

    to {
        transform: scale(1.05);
    }

}

@keyframes carouselImageZoomOut {

    from {
        transform: scale(1.05);
    }

    to {
        transform: scale(1.02);
    }

}

.carousel-slide.active .slide-content {
    animation: textReveal 0.9s ease forwards;
}

.carousel-flash {

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: white;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s ease;

    z-index: 3;

}

.carousel-flash.active {

    animation: flashEffect 0.8s ease;

}

@keyframes flashEffect {

    0% {
        opacity: 0;
    }

    40% {
        opacity: 0.15;
    }

    100% {
        opacity: 0;
    }

}

@keyframes textReveal {

    from {
        opacity: 0;
        transform: translate(-50%, -30%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

}

.carousel-slide::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.45));
}

.slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #FEFCFD;
    z-index: 2;
    opacity: 0;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
}

.slide-content img {
      filter: 
    drop-shadow(3px 0 0 black)
    drop-shadow(-1px 0 0 black)
    drop-shadow(0 1px 0 black)
    drop-shadow(0 -1px 0 black);
}

.slide-content h2 {
    font-family: AmaticSC-Bold, "Open Sans", Arial, sans-serif;
    font-size: 140px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: -7px;
    word-spacing: 20px; 
    text-shadow:
        -0.7px 0 currentColor,
        -1.3px 0 currentColor;
    color: #efefefd6;
    filter:
        drop-shadow(3.5px 0 0 rgb(16, 16, 16))
        drop-shadow(0px 0 0 rgb(16, 16, 16))
        drop-shadow(-2px 2px 0 rgb(16, 16, 16))
        drop-shadow(0px -1px 0 rgb(16, 16, 16));
}

.slide-content p {
    font-family: "Open Sans", sans-serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.5px;
    max-width: 700px;
    margin: auto;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
}

.slide-content,
.slide-content h2,
.slide-content p {
    user-select: text;
    -webkit-user-select: text;
}

.slide-content-banner {
    display: block;
    width: min(92vw, 860px);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
}

/* texte animé */
.carousel-slide.active .slide-content {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}

/* FLÈCHES CAROUSEL */
.prev,
.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: none;
    font-size: 18px;
    color: #bbb;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.prev {
    left: 25px;
}

.next {
    right: 25px;
}

.prev:hover,
.next:hover {
    background: #ae7c3a88;
    transform: translateY(-50%) scale(1.15);
}

@media (max-width: 1024px) {
    .carousel {
        height: 50vh;
    }

    .carousel-container {
        overflow: hidden;
    }

    .carousel-slide {
        opacity: 1;
        will-change: transform;
        transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .carousel-slide img {
        transform: none;
    }

    .carousel-slide.active.zoom-in img,
    .carousel-slide.active.zoom-out img {
        animation: none;
    }

    .slide-content h2 {
        font-size: clamp(100px, 5.1vw, 52px);
        margin-bottom: 8px;
        letter-spacing: -4px;
        white-space: nowrap;
        word-spacing: 10px; 
    }

    .slide-content p {
        font-size: clamp(18px, 1.9vw, 18px);
        max-width: 82vw;
        line-height: 1.45;
    }

    .carousel-slide:first-child .slide-content-banner {
        width: min(114vw, 920px);
        max-width: none;
    }
}

@media (max-width: 768px) {
    .carousel {
        height: 42vh;
    }

    .slide-content h2 {
        font-size: 60px;
        margin-bottom: 6px;
    }

    .slide-content p {
        font-size: clamp(13px, 3.7vw, 16px);
        max-width: 88vw;
    }

    .carousel-slide:first-child .slide-content-banner {
        width: min(130vw, 400px);
    }
}

@media (max-width: 1024px) {
    .carousel .prev,
    .carousel .next {
        display: none;
    }
}

/* DOTS */

.carousel-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.dot {
    position: relative;
    width: 45px;
    height: 6px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    overflow: hidden;
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.dot:hover {
    background: rgba(255, 255, 255, 0.65);
    transform: scale(1.15);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}

/* barre de progression */

.dot::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #fefefe;
    border-radius: 10px;
}

/* animation quand actif */

.dot.active::after {
    animation: dotProgress 8s linear forwards;
}

@keyframes dotProgress {

    from {
        width: 0%;
    }

    to {
        width: 100%;
    }

}

/* ----------INSTANTS DU JARDIN---------- */

.instants-jardin {
    padding: 80px 0;
    background: #FEFEFE;
    position: relative;
}

.instants-container {
    max-width: 1400px;
    margin: auto;
    padding: 0 40px;
}

.instants-header {
    text-align: center;
    margin-bottom: 60px;
}

.instants-title {
    font-family: 'Halo Handletter', cursive;
    font-size: 42px;
    color: #2a2a2a;
    margin: 0 0 12px 0;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.instants-subtitle {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    color: #6f5338;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.instants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.instant-card {
    position: relative;
    padding: 40px;
    background: #fafaf8;
    border: 1px solid #e8e4df;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.instant-card:hover {
    background: #f5f0eb;
    border-color: #ae7c3a;
    transform: translateY(-4px);
}

.instant-card h3 {
    font-family: 'Halo Handletter', cursive;
    font-size: 28px;
    color: #ae7c3a;
    margin: 0 0 12px 0;
    font-weight: 400;
}

.instant-card p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    color: #5a5a5a;
    margin: 0;
    line-height: 1.6;
}

.instant-decoration {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    opacity: 0.08;
    pointer-events: none;
}

.instant-card-1 .instant-decoration {
    background: linear-gradient(135deg, #ae7c3a 25%, transparent 25%, transparent 75%, #ae7c3a 75%, #ae7c3a),
                linear-gradient(135deg, #ae7c3a 25%, transparent 25%, transparent 75%, #ae7c3a 75%, #ae7c3a);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

.instant-card-2 .instant-decoration {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #6f5338;
}

.instant-card-3 .instant-decoration {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(45deg, #ae7c3a 25%, transparent 25%, transparent 75%, #ae7c3a 75%, #ae7c3a),
                linear-gradient(-45deg, #ae7c3a 25%, transparent 25%, transparent 75%, #ae7c3a 75%, #ae7c3a);
    background-size: 30px 30px;
}

.instant-card-4 .instant-decoration {
    border-radius: 50%;
    background: #ae7c3a;
}

.instants-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #d4c8c0, transparent);
    margin: 40px 0;
}

/* Animation au scroll */
@media (prefers-reduced-motion: no-preference) {
    .instant-card {
        animation: fadeInUp 0.6s ease forwards;
        opacity: 0;
    }

    .instant-card:nth-child(1) { animation-delay: 0.1s; }
    .instant-card:nth-child(2) { animation-delay: 0.2s; }
    .instant-card:nth-child(3) { animation-delay: 0.3s; }
    .instant-card:nth-child(4) { animation-delay: 0.4s; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .instants-jardin {
        padding: 60px 0;
    }

    .instants-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .instant-card {
        height: 240px;
        padding: 30px;
    }

    .instants-title {
        font-size: 36px;
    }
}

@media (max-width: 640px) {
    .instants-jardin {
        padding: 40px 0;
    }

    .instants-container {
        padding: 0 20px;
    }

    .instants-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .instants-header {
        margin-bottom: 40px;
    }

    .instants-title {
        font-size: 28px;
    }

    .instants-subtitle {
        font-size: 13px;
    }

    .instant-card {
        height: auto;
        min-height: 200px;
    }
}

/* ----------PHILOSOPHIE---------- */

.gift-card-content .baner-deco {
    width: 25%;
    position: absolute;
    top: 25%;
    transform: translateY(-50%);
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
}

.gift-card-content .baner-deco img {
    width: 100%;
    height: auto;
    display: block;
}

.gift-card-content .baner-deco.left {
    left: 0;
    transform: translate(-61%, -50%);
}

.gift-card-content .baner-deco.right {
    right: 0;
    transform: translate(61%, -50%) scaleX(-1);
}

@media (max-width: 1024px) {
    .gift-card-content .baner-deco {
        width: 10%;
    }
}

@media (max-width: 768px) {
    .gift-card-content .baner-deco {
        display: none;
    }
}

.philosophie {
    --philosophie-bg-opacity: 0.7;
    background: #FEFEFE;
    padding: 88px 20px 19px;
    text-align: center;
    position: relative;
    overflow: visible;
    z-index: 1;
}

.philosophie::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-image: url('img/logo-berbere.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
    opacity: 0.06;
    z-index: 1;
    pointer-events: none;
}

.philosophie::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('img/background-philosophie.png');
    background-repeat: no-repeat;
    background-position: center top 10px;
    background-size: 100% auto;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transform: translateY(16px) scale(1.035);
    transform-origin: center top;
    will-change: transform, opacity;
    transition: opacity 1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

body.philosophie-entered .philosophie::after {
    opacity: var(--philosophie-bg-opacity);
    transform: translateY(0) scale(1);
}

.philosophie-container {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: auto;
}

.philosophie h2 {
    font-family: "Open Sans", sans-serif;
    font-size: 48px;
    font-weight: 700;
    margin-top: -28px;
    margin-bottom: 40px;
    color: #454545;
    opacity: 0;
    transform: translateX(-26px);
    clip-path: inset(0 100% 0 0);
    filter: blur(3px);
    will-change: transform, opacity, clip-path, filter;
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), clip-path 0.75s cubic-bezier(0.22, 1, 0.36, 1), filter 0.75s ease;
}

.philosophie p {
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #000000;
    line-height: 1.6;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(24px);
    clip-path: inset(0 0 100% 0);
    filter: blur(2px);
    will-change: transform, opacity, clip-path, filter;
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), clip-path 0.65s cubic-bezier(0.22, 1, 0.36, 1), filter 0.65s ease;
}

body.philosophie-entered .philosophie h2 {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    filter: blur(0);
    transition-delay: 0.08s;
}

body.philosophie-entered .philosophie p {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    filter: blur(0);
}

@supports not (clip-path: inset(0 0 100% 0)) {
    .philosophie h2,
    .philosophie p {
        clip-path: none;
        filter: none;
        will-change: transform, opacity;
    }

    body.philosophie-entered .philosophie h2,
    body.philosophie-entered .philosophie p {
        clip-path: none;
        filter: none;
    }
}

body.philosophie-entered .philosophie p:nth-of-type(1) {
    transition-delay: 0.2s;
}

body.philosophie-entered .philosophie p:nth-of-type(2) {
    transition-delay: 0.33s;
}

body.philosophie-entered .philosophie p:nth-of-type(3) {
    transition-delay: 0.46s;
}

body.philosophie-entered .philosophie p:nth-of-type(4) {
    transition-delay: 0.59s;
}

body.philosophie-entered .philosophie p:nth-of-type(5) {
    transition-delay: 0.72s;
}

@media (prefers-reduced-motion: reduce) {
    .philosophie::after,
    body.philosophie-entered .philosophie::after {
        opacity: var(--philosophie-bg-opacity);
        transform: none;
        will-change: auto;
        transition: none;
    }

    .philosophie h2,
    .philosophie p,
    body.philosophie-entered .philosophie h2,
    body.philosophie-entered .philosophie p {
        opacity: 1;
        transform: none;
        clip-path: none;
        filter: none;
        will-change: auto;
        transition: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .philosophie h2 {
        font-size: 40px;
        margin-top: -18px;
        margin-bottom: 26px;
    }

    .philosophie p {
        font-size: 16px;
        line-height: 1.55;
        max-width: 72ch;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ----------CAROUSEL PHILOSOPHIE SIDE IMAGES---------- */
.philosophie-side {
    position: absolute;
    top: 100%;
    transform: translateY(-120%);
    width: 260px;
    height: 400px;
    opacity: 0.9;
    z-index: 2;
}

.philosophie-side.left {
    left: calc(50% - 890px);
}

.philosophie-side.right {
    right: calc(50% - 890px);
}

.photo-stack {
    position: relative;
    width: 100%;
    height: 100%;
    animation: photoScroll 12s ease-in-out infinite;
}

.photo-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.55s ease, box-shadow 0.55s ease, opacity 0.55s ease;
}

.photo-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(0.9) brightness(1.03);
}

.photo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255, 252, 248, 0.2), rgba(255, 252, 248, 0.14));
}

.photo-card-back {
    z-index: 0;
    opacity: 0.58;
}

.photo-card-middle {
    z-index: 1;
    opacity: 0.8;
}

.photo-card:hover,
.photo-card:focus-visible {
    opacity: 1;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
}

.photo-card:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.75);
    outline-offset: 4px;
}

.philosophie-side.left .photo-card-back {
    transform: translate(-66px, -60px) rotate(-12deg) scale(0.97);
}

.philosophie-side.left .photo-card-middle {
    transform: translate(60px, 52px) rotate(10deg) scale(0.985);
}

.philosophie-side.right .photo-card-back {
    transform: translate(66px, -60px) rotate(12deg) scale(0.97);
}

.philosophie-side.right .photo-card-middle {
    transform: translate(-60px, 52px) rotate(-10deg) scale(0.985);
}

.photo-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    z-index: 2;
    border: 1px solid rgba(174, 123, 58, 0.42);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(253, 254, 252, 0.65) inset;
    transition: opacity 1.25s ease, transform 5.6s ease;
    pointer-events: none;
}

.photo-slide.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    cursor: zoom-in;
}

@keyframes photoScroll {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }

    100% {
        transform: translateY(0);
    }

}

/* ----------CAROUSEL DES MARQUES---------- */
.brands-carousel-shell {
    --brands-motion-duration: 30s;
    position: relative;
    width: 48%;
    margin: 4em auto;
}

.brands-carousel-shell::before,
.brands-carousel-shell::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    background: url('img/amazigh.png') center/contain no-repeat;
    transform: translateY(-50%);
    transform-origin: center;
    animation: spinAmazighUp var(--brands-motion-duration) linear infinite;
    opacity: 0.9;
    pointer-events: none;
}

@keyframes spinAmazighUp {
    from {
        transform: translateY(-50%) rotate(0deg);
    }

    to {
        transform: translateY(-50%) rotate(-360deg);
    }
}

.brands-carousel-shell::before {
    left: -56px;
}

.brands-carousel-shell::after {
    right: -56px;
    animation-direction: reverse;
}

.brands-carousel-vertical {
    --brands-point-size: 14px;
    --brands-border-color: rgba(191, 171, 152, 0.388);
    overflow: hidden;
    height: 3em;
    width: 100%;
    margin: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    clip-path: polygon(var(--brands-point-size) 0,
            calc(100% - var(--brands-point-size)) 0,
            100% 50%,
            calc(100% - var(--brands-point-size)) 100%,
            var(--brands-point-size) 100%,
            0 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.25s ease;
}

.brands-carousel-vertical::before,
.brands-carousel-vertical::after {
    content: "";
    position: absolute;
    pointer-events: none;
    clip-path: inherit;
}

.brands-carousel-vertical::before {
    inset: 0;
    background: var(--brands-border-color);
}

.brands-carousel-vertical::after {
    inset: 1px;
    background: #faf6f2;
}

.brands-carousel-vertical:hover {
    --brands-border-color: rgba(122, 92, 62, 0.55);
    box-shadow: 0 0 0 1px rgba(122, 92, 62, 0.28) inset;
}

.brands-carousel-vertical:hover::after {
    background: rgba(122, 92, 62, 0.14);
}

.brands-track-vertical {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    animation: scrollBrandsVertical var(--brands-motion-duration) linear infinite;
    font-family: 'Open Sans', Cali, sans-serif;
    font-size: 1.1em;
    color: #7a5c3e;
    align-items: center;
    gap: 0.5em;
    user-select: none;
}

@keyframes scrollBrandsVertical {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

.brands-track-vertical span {
    white-space: nowrap;
}

@media (max-width: 768px) {

    .brands-carousel-shell::before,
    .brands-carousel-shell::after {
        display: none;
    }
}

.brands-modal-overlay {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 250, 244, 0.14), rgba(255, 250, 244, 0) 34%),
        linear-gradient(rgba(18, 12, 8, 0.6), rgba(18, 12, 8, 0.64));
    display: grid;
    place-items: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    z-index: 5100;
    overflow: hidden;
    isolation: isolate;
    backdrop-filter: blur(7px);
}

.brands-modal-overlay::before,
.brands-modal-overlay::after {
    content: "";
    position: absolute;
    left: 50%;
    pointer-events: none;
}

.brands-modal-overlay::before {
    top: 50%;
    width: min(720px, calc(100vw - 56px));
    height: min(520px, calc(100vh - 64px));
    transform: translate(-50%, -50%) scale(0.92);
    background:
        linear-gradient(90deg, rgba(194, 167, 132, 0.09) 0 1px, transparent 1px),
        linear-gradient(rgba(194, 167, 132, 0.09) 0 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0;
    transition: transform 0.45s ease, opacity 0.35s ease;
    z-index: -1;
}

.brands-modal-overlay::after {
    bottom: calc(50% - 180px);
    width: 2px;
    height: 160px;
    transform: translateX(-50%) scaleY(0);
    transform-origin: bottom;
    background: linear-gradient(180deg,
            rgba(194, 167, 132, 0),
            rgba(194, 167, 132, 0.8) 40%,
            rgba(194, 167, 132, 0));
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    z-index: -1;
}

.brands-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.brands-modal-overlay.is-open::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
}

.brands-modal-overlay.is-open::after {
    transform: translateX(-50%) scaleY(1);
    opacity: 0.75;
}

.brands-modal {
    width: min(620px, 92vw);
    max-height: min(74vh, 760px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.985), rgba(248, 241, 232, 0.97)),
        linear-gradient(90deg, rgba(122, 92, 62, 0.05) 0 1px, transparent 1px),
        linear-gradient(rgba(122, 92, 62, 0.05) 0 1px, transparent 1px),
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 46%);
    background-size: auto, 22px 22px, 22px 22px, auto;
    border: 3px solid rgba(122, 92, 62, 0.2);
    border-radius: 0;
    box-shadow: 0 28px 80px rgba(14, 8, 4, 0.28);
    position: relative;
    padding: 20px 20px 18px;
    font-family: 'Open Sans', Arial, sans-serif;
    opacity: 0;
    transform: translateY(54px) scale(0.88);
    transform-origin: center bottom;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, box-shadow 0.35s ease;
    clip-path: polygon(18px 0,
            calc(100% - 18px) 0,
            100% 18px,
            100% calc(100% - 18px),
            calc(100% - 18px) 100%,
            18px 100%,
            0 calc(100% - 18px),
            0 18px);
    isolation: isolate;
}

.brands-modal::before,
.brands-modal::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.brands-modal::before {
    inset: 8px;
    border: 1px solid rgba(122, 92, 62, 0.16);
    clip-path: polygon(12px 0,
            calc(100% - 12px) 0,
            100% 12px,
            100% calc(100% - 12px),
            calc(100% - 12px) 100%,
            12px 100%,
            0 calc(100% - 12px),
            0 12px);
    z-index: -1;
}

.brands-modal::after {
    top: 16px;
    left: 50%;
    width: 236px;
    height: 20px;
    transform: translateX(-50%);
    background:
        url('img/amazigh.png'),
        url('img/amazigh.png'),
        linear-gradient(135deg, transparent 0 31%, rgba(122, 92, 62, 0.22) 31% 35%, transparent 35% 65%, rgba(122, 92, 62, 0.22) 65% 69%, transparent 69% 100%),
        linear-gradient(45deg, transparent 0 31%, rgba(122, 92, 62, 0.22) 31% 35%, transparent 35% 65%, rgba(122, 92, 62, 0.22) 65% 69%, transparent 69% 100%);
    background-position: left 10px center, right 10px center, center, center;
    background-size: 18px 18px, 18px 18px, 44px 18px, 44px 18px;
    background-repeat: no-repeat, no-repeat, repeat-x, repeat-x;
    opacity: 0.75;
}

.brands-modal-overlay.is-open .brands-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Corps scrollable de la modale — scrollbar cachée */
.brands-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.brands-modal-body::-webkit-scrollbar {
    display: none;
}

/* Boutons de scroll flèches */
.brands-modal-scroll-controls {
    position: absolute;
    right: 18px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.brands-modal-scroll-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 252, 247, 0.88);
    border: 1px solid rgba(122, 92, 62, 0.24);
    cursor: pointer;
    color: #6f5338;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
    backdrop-filter: blur(4px);
}

.brands-modal-scroll-btn:hover {
    background: rgba(207, 175, 138, 0.9);
    color: #3f2f20;
    border-color: rgba(111, 83, 56, 0.62);
}

.brands-modal-scroll-btn:active {
    background: rgba(161, 128, 92, 0.94);
    color: #fff7ed;
    border-color: rgba(90, 64, 40, 0.75);
}

.brands-modal-scroll-btn.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.brands-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    background: rgba(255, 252, 247, 0.72);
    border: 1px solid rgba(122, 92, 62, 0.16);
    cursor: pointer;
    color: #3A3A3A;
    padding: 8px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
    clip-path: polygon(10px 0,
            calc(100% - 10px) 0,
            100% 10px,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            10px 100%,
            0 calc(100% - 10px),
            0 10px);
}

.brands-modal-close:hover {
    color: #AE7B3A;
    background: rgba(255, 248, 239, 0.92);
    border-color: rgba(174, 123, 58, 0.32);
    transform: rotate(90deg);
}

.brands-modal-head {
    text-align: center;
    margin: 0 0 16px;
    padding: 12px 38px 10px;
}

.brands-modal-head h2 {
    margin: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: clamp(1.1rem, 2vw, 1.38rem);
    font-weight: 700;
    color: #392b1d;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.brands-modal-head p {
    margin: 6px 0 0;
    font-size: 0.76rem;
    color: #776757;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brands-modal-grid {
    list-style: none;
    margin: 0;
    padding: 1px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(122, 92, 62, 0.14);
    clip-path: polygon(14px 0,
            calc(100% - 14px) 0,
            100% 14px,
            100% calc(100% - 14px),
            calc(100% - 14px) 100%,
            14px 100%,
            0 calc(100% - 14px),
            0 14px);
}

.brands-modal-item {
    background: rgba(255, 252, 247, 0.96);
    border: 0;
    padding: 12px 10px;
    min-height: 48px;
    text-align: center;
    font-weight: 700;
    font-size: 0.84rem;
    color: #4a3c2f;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: grid;
    place-items: center;
    user-select: none;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.brands-modal-item:hover {
    background: rgba(243, 234, 224, 0.98);
    color: #2f261d;
    transform: translateY(-1px);
}

@media (max-width: 820px) {
    .brands-modal {
        width: min(540px, 92vw);
        padding: 18px 16px 16px;
    }
}

@media (max-width: 520px) {
    .brands-modal {
        padding: 16px 12px 12px;
    }

    .brands-modal::after {
        width: 180px;
        background-position: left 8px center, right 8px center, center, center;
        background-size: 14px 14px, 14px 14px, 30px 18px, 30px 18px;
    }

    .brands-modal-head {
        padding: 14px 34px 10px;
    }

    .brands-modal-head h2 {
        font-size: 1rem;
        letter-spacing: 0.14em;
    }

    .brands-modal-head p {
        font-size: 0.72rem;
    }

    .brands-modal-grid {
        grid-template-columns: 1fr;
    }
}

/* ----------CATEGORIES---------- */
/* ----------PRODUITS À LA UNE---------- */
.produits-une {
    position: relative;
    padding: clamp(48px, 7vw, 80px) 20px clamp(52px, 8vw, 88px);
    background-color: #1F3A5F;
    background-image:
        repeating-linear-gradient(45deg, rgba(174, 123, 58, 0.04) 0px, rgba(174, 123, 58, 0.04) 1px, transparent 1px, transparent 18px),
        repeating-linear-gradient(-45deg, rgba(174, 123, 58, 0.04) 0px, rgba(174, 123, 58, 0.04) 1px, transparent 1px, transparent 18px);
    overflow: hidden;
}
/* Séparateur berbère haut */
.produits-une::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 22px;
    transform: translateY(-50%);
    background:
        linear-gradient(180deg, rgba(255, 244, 223, 0.42), rgba(154, 107, 49, 0.32)),
        repeating-linear-gradient(90deg,
            rgba(18, 42, 67, 0.96) 0 54px,
            rgba(24, 53, 82, 0.96) 54px 108px),
        repeating-linear-gradient(45deg,
            transparent 0 17px,
            rgba(245, 227, 193, 0.86) 17px 19px,
            transparent 19px 36px),
        repeating-linear-gradient(-45deg,
            transparent 0 17px,
            rgba(245, 227, 193, 0.86) 17px 19px,
            transparent 19px 36px),
        repeating-linear-gradient(90deg,
            transparent 0 24px,
            rgba(232, 196, 134, 0.92) 24px 28px,
            transparent 28px 54px);
    background-blend-mode: screen, normal, normal, normal, normal;
    border-top: 1px solid rgba(255, 241, 214, 0.48);
    box-shadow: 0 4px 10px rgba(15, 29, 44, 0.14);
    pointer-events: none;
    z-index: 2;
}

/* Séparateur berbère bas (couleur alternative) */
.produits-une::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 22px;
    transform: translateY(50%);
    background-image:
        linear-gradient(180deg, rgba(255, 244, 223, 0.42), rgba(154, 107, 49, 0.32)),
        repeating-linear-gradient(90deg,
            rgba(18, 42, 67, 0.96) 0 54px,
            rgba(24, 53, 82, 0.96) 54px 108px),
        repeating-linear-gradient(45deg,
            transparent 0 17px,
            rgba(245, 227, 193, 0.86) 17px 19px,
            transparent 19px 36px),
        repeating-linear-gradient(-45deg,
            transparent 0 17px,
            rgba(245, 227, 193, 0.86) 17px 19px,
            transparent 19px 36px),
        repeating-linear-gradient(90deg,
            transparent 0 24px,
            rgba(232, 196, 134, 0.92) 24px 28px,
            transparent 28px 54px);
    background-blend-mode: screen, normal, normal, normal, normal;
    border-bottom: 1px solid rgba(245, 227, 193, 0.42);
    box-shadow: 0 -4px 10px rgba(15, 29, 44, 0.14);
    pointer-events: none;
    z-index: 2;
}

.produits-une-container {
    position: relative;
    max-width: 2080px;
    margin: 0 auto;
    z-index: 1;
}

/* EN-TÊTE */
.produits-une-header {
    text-align: center;
    margin-bottom: clamp(28px, 4vw, 48px);
}

.produits-une-kicker {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #AE7B3A;
    margin-bottom: 10px;
}

.produits-une-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 600;
    color: #f5efe6;
    margin: 0 0 10px;
    letter-spacing: 0.04em;
}

/* liseré doré sous le titre */
.produits-une-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    background: #AE7B3A;
    margin: 12px auto 0;
}

.produits-une-intro {
    font-family: 'Open Sans', sans-serif;
    font-size: 13.5px;
    color: rgba(245, 239, 230, 0.55);
    margin: 0;
    letter-spacing: 0.02em;
}

/* GRILLE 6 COLONNES */
.produits-une-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

/* CARTE PRODUIT */
.produit-card {
    position: relative;
    background: #161616;
    border: 1px solid rgba(174, 123, 58, 0.14);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.produit-card:hover {
    border-color: rgba(174, 123, 58, 0.55);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* IMAGE WRAP */
.produit-card-img-link {
    display: block;
    text-decoration: none;
}

.produit-card-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #111;
}

.produit-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.produit-card:hover .produit-card-img {
    transform: scale(1.05);
}

/* OVERLAY HOVER */
.produit-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(14, 14, 14, 0.52);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.produit-card:hover .produit-card-overlay {
    opacity: 1;
}

.produit-card-overlay span {
    font-family: 'Open Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #f5efe6;
    border: 1px solid rgba(245, 239, 230, 0.7);
    padding: 8px 18px;
    border-radius: 2px;
    background: rgba(14, 14, 14, 0.4);
    backdrop-filter: blur(4px);
    transform: translateY(6px);
    transition: transform 0.3s ease;
}

.produit-card:hover .produit-card-overlay span {
    transform: translateY(0);
}

/* BADGE */
.produit-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: #AE7B3A;
    color: #fff;
    padding: 4px 9px;
    border-radius: 2px;
    z-index: 2;
}

.produit-card-badge--promo {
    background: #c0392b;
}

/* BOUTON FAVORI */
.produit-card-fav {
    position: absolute;
    top: 10px;
    right: 9px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(245, 239, 230, 0.25);
    background: rgba(14, 14, 14, 0.55);
    color: rgba(245, 239, 230, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    backdrop-filter: blur(4px);
}

.produit-card-fav svg {
    display: block;
    width: 21px;
    height: 21px;
}

.produit-card-fav .radial-icon-outline {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.22s ease;
}

.produit-card-fav .radial-icon-fill {
    fill: currentColor;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.produit-card-fav:hover {
    background: #AE7B3A;
    color: #fff;
    border-color: #AE7B3A;
}

.produit-card-fav:hover .radial-icon-fill,
.produit-card-fav:focus-visible .radial-icon-fill {
    transform: scale(1);
}

.icon-wrapper[data-panel-trigger="panel-favoris"] .radial-icon {
    width: 126px !important;
    height: 26px !important;
}

/* CORPS TEXTE */
.produit-card-body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.produit-card-cat {
    font-family: 'Open Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #AE7B3A;
}

.produit-card-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 600;
    color: #f5efe6;
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.2s ease;
    margin-top: 2px;
}

.produit-card-name:hover {
    color: #AE7B3A;
}

.produit-card-price {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: rgba(245, 239, 230, 0.9);
    margin-top: 6px;
}

/* PIED DE SECTION — CTA */
.produits-une-footer {
    text-align: center;
    margin-top: clamp(28px, 4vw, 44px);
}

.produits-une-cta {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #f5efe6;
    text-decoration: none;
    border: 1px solid rgba(174, 123, 58, 0.6);
    padding: 13px 36px;
    border-radius: 2px;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.produits-une-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #AE7B3A;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.produits-une-cta:hover::before {
    transform: scaleX(1);
}

.produits-une-cta:hover {
    color: #fff;
    border-color: #AE7B3A;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .produits-une-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 540px) {
    .produits-une::before {
        height: 16px;
        background-image:
            linear-gradient(180deg, rgba(247, 229, 198, 0.54), rgba(167, 73, 45, 0.48)),
            repeating-linear-gradient(90deg,
                rgba(20, 43, 68, 0.98) 0 38px,
                rgba(26, 56, 84, 0.98) 38px 76px),
            repeating-linear-gradient(90deg,
                transparent 0 12px,
                rgba(234, 183, 104, 0.93) 12px 14px,
                transparent 14px 24px,
                rgba(234, 183, 104, 0.93) 24px 26px,
                transparent 26px 38px),
            repeating-linear-gradient(45deg,
                transparent 0 7px,
                rgba(249, 236, 214, 0.86) 7px 9px,
                transparent 9px 19px),
            repeating-linear-gradient(-45deg,
                transparent 0 7px,
                rgba(249, 236, 214, 0.86) 7px 9px,
                transparent 9px 19px),
            repeating-linear-gradient(90deg,
                transparent 0 34px,
                rgba(182, 78, 47, 0.82) 34px 38px,
                transparent 38px 72px);
    }

    .produits-une::after {
        height: 16px;
        background-image:
            linear-gradient(180deg, rgba(255, 241, 214, 0.52), rgba(154, 107, 49, 0.42)),
            repeating-linear-gradient(90deg,
                rgba(15, 35, 58, 0.98) 0 38px,
                rgba(25, 53, 84, 0.98) 38px 76px),
            repeating-linear-gradient(90deg,
                transparent 0 12px,
                rgba(232, 196, 134, 0.94) 12px 14px,
                transparent 14px 24px,
                rgba(232, 196, 134, 0.94) 24px 26px,
                transparent 26px 38px),
            repeating-linear-gradient(45deg,
                transparent 0 7px,
                rgba(247, 229, 194, 0.88) 7px 9px,
                transparent 9px 19px),
            repeating-linear-gradient(-45deg,
                transparent 0 7px,
                rgba(247, 229, 194, 0.88) 7px 9px,
                transparent 9px 19px),
            repeating-linear-gradient(90deg,
                transparent 0 34px,
                rgba(171, 120, 59, 0.82) 34px 38px,
                transparent 38px 72px);
    }

    .produits-une-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .produit-card-body {
        padding: 10px 12px 14px;
    }

    .produit-card-name {
        font-size: 14px;
    }

    .produit-card-price {
        font-size: 13px;
    }

    .produits-une-cta {
        width: 100%;
        text-align: center;
    }
}

/* ----------CATEGORIES---------- */
.categories {
    padding: 20px 20px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.card {
    background: white;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: #333;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card h2 {
    padding: 15px;
}

.card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    color: #AE7B3A;
    background-color: #191919;
    font-weight: bolder;
}

.card:hover img {
    transform: scale(1.05);
}

.gift-card-section {
    margin-top: 34px;
    padding: clamp(22px, 3vw, 36px);
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: visible;
    border-radius: 14px;
    background: linear-gradient(140deg, #f7f2ea 0%, #efe2d0 100%);
    border: 1px solid rgba(111, 83, 56, 0.2);
}

.gift-card-content {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
    color: #3a3a3a;
}

.gift-card-kicker {
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    font-weight: 700;
    color: #6f5338;
}

.gift-card-content h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 600;
    line-height: 1.1;
}

.gift-doodle {
    position: relative;
    width: 18px;
    height: 14px;
    border: 2px solid rgba(111, 83, 56, 0.85);
    border-radius: 2px;
    flex: 0 0 auto;
}

.gift-doodle::before,
.gift-doodle::after {
    content: "";
    position: absolute;
    background: rgba(111, 83, 56, 0.85);
}

.gift-doodle::before {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.gift-doodle::after {
    width: 10px;
    height: 2px;
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
    box-shadow: -4px 0 0 0 rgba(111, 83, 56, 0.85), 4px 0 0 0 rgba(111, 83, 56, 0.85);
}

.gift-card-content p {
    margin: 12px auto 0;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.5;
}

.gift-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding: 12px 26px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fefefe;
    background: #6f5338;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
    transition: transform 0.25s ease, background 0.25s ease;
}

.gift-card-btn:hover {
    transform: translateY(-2px);
    background: #ae7b3a;
}

@media (max-width: 640px) {
    .gift-card-section {
        margin-top: 26px;
        padding: 20px 16px;
    }

    .gift-card-content h3 {
        gap: 10px;
    }

    .gift-doodle {
        width: 14px;
        height: 11px;
    }

    .gift-card-btn {
        width: 100%;
    }
}

/* ----------WIDGET CONTACT VERTICAL---------- */
.contact-widget {
    position: fixed;
    left: 0;
    top: 54%;
    transform: translateY(-50%);
    z-index: 95;
}

.contact-widget-toggle {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #3A3A3A;
    border-left: 0;
    border-radius: 0 5px 5px 0;
    background: #F5E9DA;
    color: #3A3A3A;
    padding: 11px 5px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.contact-widget-toggle:hover,
.contact-widget.is-open .contact-widget-toggle {
    color: #FEFEFE;
    background: #AE7B3A;
    border-color: #AE7B3A;
}

.contact-widget-panel {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    padding: 8px 10px;
    background: #FEFEFE;
    border: 1px solid rgba(58, 58, 58, 0.22);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.contact-widget.is-open .contact-widget-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.contact-widget-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(58, 58, 58, 0.858);
    color: #3A3A3A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #FEFEFE;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.contact-widget-icon img {
    width: 35px;
    height: 35px;
}

.contact-widget-icon:hover {
    color: #AE7B3A;
    border-color: #AE7B3A;
    background: #fbf6ef;
}

.contact-widget-icon:focus-visible,
.contact-widget-toggle:focus-visible {
    outline: 2px solid #AE7B3A;
    outline-offset: 2px;
}

@media (max-width: 700px) {
    .contact-widget {
        top: auto;
        bottom: 92px;
        transform: none;
    }

    .contact-widget-toggle {
        writing-mode: horizontal-tb;
        text-orientation: initial;
        border-left: 1px solid #3A3A3A;
        border-radius: 0 6px 6px 0;
        padding: 8px 10px;
    }

    .contact-widget-panel {
        top: auto;
        bottom: 0;
        transform: translateX(-8px);
    }

    .contact-widget.is-open .contact-widget-panel {
        transform: translateX(0);
    }
}

.contact-widget-label {
    display: inline-block;
    transform: rotate(180deg);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .contact-widget-label {
        transform: none;
    }
}

/* ----------GOOGLE REVIEWS---------- */
.shopping-express {
    --sx-accent: #ae7b3a;
    --sx-ink: #2f2924;
    --sx-soft: #f8f3ec;
    --sx-line: rgba(111, 83, 56, 0.28);
    position: relative;
    padding: 84px 20px;
    background:
        radial-gradient(circle at 12% 20%, rgba(174, 123, 58, 0.13), transparent 38%),
        radial-gradient(circle at 88% 78%, rgba(122, 92, 62, 0.1), transparent 42%),
        linear-gradient(160deg, #fffdfa, #faf4ee 58%, #fdf9f5);
}

.shopping-express::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(45deg, rgba(174, 123, 58, 0.05) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(-45deg, rgba(174, 123, 58, 0.04) 0 1px, transparent 1px 26px);
}

.shopping-express-container {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(320px, 1.05fr) minmax(320px, 1fr);
    gap: 36px;
    align-items: center;
}

.shopping-express-copy {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--sx-line);
    border-radius: 18px;
    box-shadow: 0 16px 30px rgba(59, 43, 27, 0.1);
    padding: 34px 30px;
}

.shopping-express-kicker {
    margin: 0 0 10px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #7b5d40;
}

.shopping-express-copy h2 {
    margin: 0;
    color: var(--sx-ink);
    font-family: 'Bodoni Moda', serif;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.03;
}

.shopping-express-intro {
    margin: 14px 0 18px;
    color: #564739;
    font-size: 16px;
    line-height: 1.65;
}

.shopping-express-points {
    margin: 0;
    padding-left: 18px;
    color: #4c3f32;
    display: grid;
    gap: 8px;
    font-size: 15px;
    line-height: 1.55;
}

.shopping-express-cta {
    display: inline-flex;
    margin-top: 22px;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid #8f6a45;
    background: #433124;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.shopping-express-cta:hover {
    transform: translateY(-2px);
    background: #5a4130;
    box-shadow: 0 10px 18px rgba(61, 42, 25, 0.22);
}

.shopping-express-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.shopping-thumb {
    display: block;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(111, 83, 56, 0.3);
    background: var(--sx-soft);
    aspect-ratio: 1 / 1;
    box-shadow: 0 8px 18px rgba(61, 43, 27, 0.13);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.shopping-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 18, 11, 0.28), rgba(26, 18, 11, 0));
    opacity: 0.7;
    transition: opacity 0.24s ease;
}

.shopping-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
    transition: transform 0.28s ease;
}

.shopping-thumb:hover {
    transform: translateY(-4px);
    border-color: rgba(174, 123, 58, 0.72);
    box-shadow: 0 12px 22px rgba(61, 43, 27, 0.2);
}

.shopping-thumb:hover img {
    transform: scale(1.06);
}

.shopping-thumb:hover::after {
    opacity: 0.3;
}

@media (max-width: 1024px) {
    .shopping-express {
        padding: 68px 16px;
    }

    .shopping-express-container {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .shopping-express-copy {
        padding: 28px 22px;
    }
}

@media (max-width: 640px) {
    .shopping-express {
        padding: 54px 14px;
    }

    .shopping-express-copy h2 {
        font-size: clamp(30px, 9vw, 40px);
    }

    .shopping-express-intro {
        font-size: 15px;
    }

    .shopping-express-points {
        font-size: 14px;
    }

    .shopping-express-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.google-reviews {
    --gr-accent: #5f7b73;
    --gr-text: #2d3a38;
    --gr-soft: #eef4f2;
    --gr-line: rgba(64, 96, 88, 0.28);
    position: relative;
    padding: 78px 20px;
    background:
        radial-gradient(circle at 12% 18%, rgba(95, 123, 115, 0.17), transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(95, 123, 115, 0.13), transparent 40%),
        linear-gradient(145deg, #fbfdfc, #f1f6f4 62%, #f8fbfa);
    overflow: hidden;
}

.google-reviews::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(95, 123, 115, 0.08) 0 1px, transparent 1px 21px),
        repeating-linear-gradient(-45deg, rgba(95, 123, 115, 0.06) 0 1px, transparent 1px 23px);
    opacity: 0.38;
    pointer-events: none;
}

.google-reviews-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.google-reviews-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 30px;
}

.google-reviews-kicker {
    display: inline-block;
    margin: 0 0 12px;
    padding: 7px 14px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gr-accent);
    border: 1px solid var(--gr-line);
    background: rgba(255, 252, 247, 0.82);
}

.google-reviews-head h2 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    color: var(--gr-text);
    font-size: clamp(34px, 4.2vw, 52px);
    line-height: 1.06;
}

.google-reviews-intro {
    margin: 14px auto 0;
    color: #5b4c3b;
    font-size: 17px;
    line-height: 1.6;
    max-width: 650px;
}

.google-rating-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin: 0 auto 34px;
    padding: 16px 22px;
    max-width: 820px;
    border: 1px solid rgba(122, 92, 62, 0.3);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 249, 241, 0.86));
    box-shadow: 0 14px 30px rgba(41, 25, 8, 0.09);
}

.google-rating-score {
    font-family: "Source Sans 3", "Open Sans", sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: #292929;
}

.google-rating-stars {
    color: #e8a63d;
    letter-spacing: 0.18em;
    font-size: 17px;
    text-shadow: 0 3px 8px rgba(232, 166, 61, 0.22);
}

.google-rating-count {
    color: #5f5243;
    font-size: 14px;
    letter-spacing: 0.03em;
}

.google-rating-link {
    text-decoration: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 16px;
    background: linear-gradient(120deg, #3a3a3a, #1f1f1f);
    border: 1px solid #1f1f1f;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.google-rating-link:hover {
    background: linear-gradient(120deg, #ae7b3a, #906432);
    border-color: #906432;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(122, 92, 62, 0.28);
}

.google-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.google-review-card {
    position: relative;
    padding: 22px 20px 20px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(122, 92, 62, 0.26);
    box-shadow: 0 12px 26px rgba(58, 36, 12, 0.09);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.google-review-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(174, 123, 58, 0.78), transparent);
}

.google-review-card:hover {
    transform: translateY(-6px);
    border-color: rgba(122, 92, 62, 0.42);
    box-shadow: 0 18px 32px rgba(58, 36, 12, 0.16);
}

.google-review-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.google-review-card-head strong {
    color: var(--gr-text);
    font-size: 15px;
    letter-spacing: 0.02em;
}

.google-review-card-head span {
    color: #e8a63d;
    font-size: 12px;
    letter-spacing: 0.13em;
    text-shadow: 0 2px 6px rgba(232, 166, 61, 0.25);
}

.google-review-card p {
    margin: 0;
    color: #4a3f31;
    font-size: 15px;
    line-height: 1.65;
}

.google-review-meta {
    display: inline-block;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(122, 92, 62, 0.3);
    color: #7a5c3e;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 960px) {
    .google-reviews {
        padding: 64px 18px;
    }

    .google-reviews-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .google-reviews {
        padding: 52px 14px;
    }

    .google-reviews-head h2 {
        font-size: clamp(29px, 8vw, 38px);
    }

    .google-reviews-intro {
        font-size: 15px;
    }

    .google-rating-strip {
        gap: 10px;
        padding: 14px;
    }

    .google-rating-score {
        font-size: 30px;
    }

    .google-rating-stars {
        font-size: 15px;
        letter-spacing: 0.12em;
    }

    .google-reviews-grid {
        grid-template-columns: 1fr;
    }

    .google-rating-link {
        width: 100%;
        text-align: center;
    }
}

/* ----------NEWSLETTER---------- */

.newsletter {
    background: #FEFEFE;
    padding: 90px 20px;
    display: flex;
    justify-content: center;
}

.newsletter-container {
    max-width: 800px;
    width: 100%;
    text-align: center;
}

.newsletter h2 {
    color: #3A3A3A;
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: 200;
}

.newsletter-box {
    display: flex;
    align-items: center;
    background: #FEFEFE;
    height: 44px;
    border-radius: 4px;
    max-width: 480px;
    margin: auto;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
}

.newsletter-box input {
    flex: 1;
    border: none;
    padding: 0px 14px;
    font-size: 15px;
    background: transparent;
    color: rgb(0, 0, 0);
    outline: none;
    height: 100%;
    line-height: 46px;
    box-sizing: border-box
}

.newsletter-box input:focus {
    background: rgba(174, 123, 58, 0.05);
    /* couleur de focus légère, toute la hauteur */
    outline: none;
    /* supprime le contour bleu par défaut */
}

.newsletter-box input::placeholder {
    color: #888888ba;
    padding-left: 8px;
}

/* effet focus */
.newsletter-box:focus-within {
    box-shadow:
        0 0 0 1px #3A3A3A,
        0 10px 30px rgba(0, 0, 0, 0.5);
}

/* BOUTON */
.newsletter-btn {
    width: 48px;
    height: 58px;
    border: none;
    background: #3A3A3A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* flèche */
.newsletter-arrow {
    width: 24px;
    height: 24px;
    transition: transform 0.25s ease;
}

.newsletter-btn:hover {
    background: #3a3a3adb;
    transform: translateX(3px);
}

.newsletter-btn:hover .newsletter-arrow {
    transform: translateX(0px);
}

/* message succès */
.newsletter-success {
    display: none;
    margin-top: 50px;
    color: #4CAF50;
    font-size: 20px;
    font-weight: 600;
    animation: successPop 0.6s ease;
}

@keyframes successPop {

    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* CONTENEUR CONFETTIS */

.newsletter-container {
    position: relative;
}

/* zone des fleurs limitée à la box */

.flower-confetti {
    position: absolute;
    top: 135%;
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    height: 120px;
    pointer-events: none;
    overflow: visible;

}

/* fleurs */

.petal {

    position: absolute;

    pointer-events: none;

    animation: petalFall ease-out forwards;

}

/* chute naturelle */

@keyframes petalFall {

    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(160px) rotate(360deg);
        opacity: 0;
    }

}

.flower-icon {
    position: absolute;
    width: 22px;
    height: 22px;
    opacity: 0;
    transform: scale(0) rotate(0deg);
    transition: all .5s ease;
}

.arrow-up {
    position: absolute;
    width: 22px;
    height: 22px;
    transition: all .4s ease;
}

/* transformation fleur */

#scrollTopBtn.flower-active .arrow-up {
    opacity: 0;
    transform: scale(0);
}

#scrollTopBtn.flower-active .flower-icon {
    opacity: 1;
    transform: scale(1) rotate(360deg);
}

/* INFO CAROUSEL */
.info-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf6f2;

    padding: 10px 0;
    margin: 0;
    position: relative;
}

.info-carousel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, #7a5c3e, transparent);
    opacity: 0.5;
}

.info-carousel-track-wrapper {
    overflow: hidden;
    width: 100%;
    max-width: 500px;
    text-align: center;
}

.info-carousel-track span {
    display: inline-block;
    min-width: 100%;
    font-size: 1rem;
    color: #7a5c3e;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.info-carousel-track.fade-out span {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.info-carousel-track.fade-in span {
    opacity: 1;
    transition: opacity 0.15s ease;
}

.info-carousel-prev,
.info-carousel-next {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #888;
    cursor: pointer;
    padding: 0 15px;
    transition: color 0.2s;
}

.info-carousel-prev:hover,
.info-carousel-next:hover {
    color: #222;
}

/* FOOTER */
footer {
    position: relative;
    background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
    color: #FEFEFE;
    padding: 56px 32px 0;
    overflow: hidden;
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(to right, #ae7c3a00, #ae7b3a, #ae7c3a00);
    z-index: 1;
}

footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(45deg, rgba(174, 123, 58, 0.04) 0 1px, transparent 1px 16px),
        repeating-linear-gradient(-45deg, rgba(174, 123, 58, 0.02) 0 1px, transparent 1px 20px);
    pointer-events: none;
}

.footer-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: 40px;
    max-width: 1400px;
    margin: auto;
    position: relative;
    z-index: 2;
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start;
    align-self: start;
    justify-self: start;
    margin-left: clamp(72px, 2vw, 34px);
}

.footer-left strong {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #AE7B3A;
    margin-bottom: 8px;
}

.footer-left div {
    font-size: 14px;
    line-height: 1.6;
    color: #d0d0d0;
}

.footer-left a {
    color: #AE7B3A;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
    font-weight: 600;
}

.footer-left a:hover {
    color: #c9923e;
    text-decoration: underline;
}

.horaires {
    display: grid;
    grid-template-columns: 45px auto;
    row-gap: 6px;
    color: #555;
}

.horaires .jour {
    color: #888;
    font-weight: 600;
}

.footer-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 0 20px;
    position: relative;
    justify-self: center;
    align-self: center;
}

.footer-center::before,
.footer-center::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background: url('img/amazigh.png') center/contain no-repeat;
    opacity: 0.4;
}

.footer-center::before {
    top: -64px;
    left: 50%;
    transform: translateX(-50%);
}

.footer-center::after {
    bottom: -64px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.footer-center h3 {
    font-family: "Halo Handletter", "Cormorant Garamond", serif;
    font-size: 28px;
    color: #AE7B3A;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.footer-center p {
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #888;
    margin: 0;
}

.footer-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(300px, 100%);
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    align-self: start;
    justify-self: end;
    margin-right: clamp(12px, 2.4vw, 40px);
}

.footer-right strong {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #AE7B3A;
    display: block;
    margin-bottom: 8px;
}

/* Libellé social dans le footer */
.footer-social-label {
    font-family: "Halo Handletter", "Cormorant Garamond", serif;
    font-size: 24px;
    color: #AE7B3A;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin: 0;
    text-shadow: 0 2px 8px rgba(174,123,58,0.08);
    user-select: none;
}

.footer-right.social-icons-footer {
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.social-icons-footer {
    display: flex;
    align-items: center;
    gap: 14px;
}

.social-icons-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(174, 123, 58, 0.12);
    border: 1px solid rgba(174, 123, 58, 0.28);
    border-radius: 50%;
    transition: all 0.2s ease;
    text-decoration: none;
}

.social-icons-footer a:hover {
    background: rgba(174, 123, 58, 0.24);
    border-color: rgba(174, 123, 58, 0.6);
}

.social-icons-footer img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: filter 0.2s ease;
}

.footer-brand-mark {
    width: min(220px, 100%);
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(174, 123, 58, 0.22);
    display: flex;
    justify-content: center;
    align-self: center;
}

.footer-brand-mark img {
    width: min(280px, 110%);
    height: auto;
    opacity: 0.94;
    filter: drop-shadow(0 8px 18px rgba(174, 123, 58, 0.18));
    transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
}

.footer-legal {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 32px auto 0;
    padding-top: 16px;
    padding-bottom: 16px;
    border-top: 1px solid rgba(174, 123, 58, 0.2);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 22px;
}

.footer-legal a {
    position: relative;
    color: rgba(254, 254, 254, 0.76);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.footer-legal a:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -13px;
    width: 1px;
    height: 12px;
    background: rgba(174, 123, 58, 0.35);
    transform: translateY(-50%);
}

.footer-legal a:hover {
    color: #AE7B3A;
}

@media (max-width: 1024px) {
    footer {
        padding: 44px 24px 0;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-center::before,
    .footer-center::after {
        display: none;
    }

    .footer-right {
        align-items: center;
        text-align: center;
    }

    .footer-brand-mark {
        align-self: center;
    }

    .footer-social-label {
        font-size: 1.3rem;
    }

    .footer-legal {
        margin-top: 26px;
        gap: 10px 18px;
    }
}

@media (max-width: 640px) {
    .footer-legal {
        margin-top: 22px;
        padding-top: 14px;
        padding-bottom: 14px;
        gap: 10px 0;
        flex-direction: column;
    }

    .footer-legal a {
        font-size: 11px;
        letter-spacing: 0.12em;
    }

    .footer-legal a:not(:last-child)::after {
        display: none;
    }
}

/* BOUTON RETOUR EN HAUT */
#scrollTopBtn {
    position: fixed;
    bottom: 200px;
    right: 25px;
    width: 60px;
    height: 60px;
    border: none;
    background: #AE7B3A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(30px) scale(.9);
    transition: all .35s cubic-bezier(.25, .8, .25, 1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25),
        0 0 0 4px rgba(255, 255, 255, 0.05);
    z-index: 1000;
}

#scrollTopBtn.show {
    opacity: 0.9;
    transform: translateY(0) scale(1);
}

#scrollTopBtn:hover {
    background: #C48A43;
    transform: translateY(-3px) scale(1.05);
}

.arrow-up {
    position: absolute;
    width: 22px;
    height: 22px;
}

.progress-ring {
    position: absolute;
    transform: rotate(-90deg);
}

.progress-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 3;
}

.progress-ring-circle {
    fill: none;
    stroke: white;
    stroke-width: 3;
    stroke-dasharray: 163;
    stroke-dashoffset: 163;
}

/* ============= RESPONSIVE ============ */
@media (max-width:768px) {
    .philosophie {
        --philosophie-bg-opacity: 0.2;
        padding-top: 72px;
    }

    .philosophie::after {
        background-size: 230% auto;
    }

    .carousel {
        height: 50vh;
    }

    .header-container {
        flex-direction: row;
    }

    .menu {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .search-container {
        flex-direction: column;
    }

    #search-input,
    #search-button {
        width: 100%;
        padding: 12px;
    }
}

@media (min-width: 1025px) and (max-height: 1080px) {
    .carousel {
        height: 60vh;
    }
}

@media (max-width: 1200px) {
    .philosophie-side {
        display: none;
    }
}

/* CATALOG PAGE */
.catalog-page {
    max-width: 1400px;
    margin: 8px auto 48px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    align-items: start;
}

.catalog-content {
    grid-column: 2;
    grid-row: 1;
}

.catalog-content h1 {
    margin-bottom: 8px;
}

.catalog-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.product-card {
    position: relative;
    min-height: 160px;
    border: 1px solid #ece7df;
    padding: 0;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.product-card:focus-visible {
    outline: 2px solid #ae7b3a;
    outline-offset: 3px;
}

.product-card-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.88);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(4px);
}

.product-card-fav svg path {
    stroke: #6d5741;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.product-card-fav:hover {
    background: #fff;
    transform: scale(1.12);
}

.product-card-fav:hover svg path,
.product-card-fav.is-active svg path {
    fill: #c4a882;
    stroke: #c4a882;
}

.product-card-img-wrap {
    display: grid;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f5f0ea;
}

.product-card-img {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.1s ease, transform 2.4s ease;
}

.product-card-img-hover {
    opacity: 0;
    transform: scale(1.04);
}

.product-card:hover .product-card-img:not(.product-card-img-hover) {
    opacity: 0;
    transform: scale(1.01);
}

.product-card:hover .product-card-img-hover {
    opacity: 1;
    transform: scale(1);
}

.product-card strong,
.product-card span {
    display: block;
    padding: 10px 14px 0;
}

.product-card span {
    padding-bottom: 14px;
    color: #6d5741;
    font-size: 0.85em;
}

.product-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.product-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.product-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.22);
}

.product-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(1220px, 100%);
    background: #ffffff;
    border: 1px solid #d8d8d8;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.14);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    max-height: calc(100vh - 28px);
    overflow: auto;
}

.product-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: rgba(255, 252, 247, 0.72);
    border: 1px solid rgba(122, 92, 62, 0.16);
    cursor: pointer;
    color: #3A3A3A;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.product-modal-close:hover {
    color: #AE7B3A;
    background: rgba(255, 248, 239, 0.92);
    border-color: rgba(174, 123, 58, 0.32);
    transform: rotate(90deg);
}

.product-modal-media {
    background: #f3f3f3;
    min-height: 720px;
    padding: 18px;
}

.product-modal-media-layout {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 14px;
    height: 100%;
}

.product-modal-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-modal-thumb {
    width: 74px;
    height: 90px;
    border: 1px solid #f3f3f3;
    background: #fff;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.product-modal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-modal-thumb.is-active {
    border-width: 2px;
    border-color: #212121;
}

.product-modal-thumb:hover {
    border-color: #4d4d4d;
}

.product-modal-main-image-wrap {
    background: #fff;
    border: 1px solid #d0d0d0;
    min-height: 580px;
    overflow: hidden;
    cursor: zoom-in;
}

.product-modal-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-modal-main-image-wrap.is-zooming {
    cursor: zoom-in;
}

.product-modal-content {
    padding: 30px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-modal-headline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.product-modal-kicker {
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2c2c2c;
    background: #dddddd;
    padding: 6px 10px;
    font-weight: 700;
}

.product-modal-stock {
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2c2c2c;
    background: #00cd26;
    padding: 6px 10px;
    font-weight: 700;
    margin-right: auto;
}

/* ETAT STOCK DU PRODUIT */
.product-modal-content h2 {
    margin: 0;
    font-size: 2.05rem;
    line-height: 1.05;
}

.product-modal-price {
    margin: 2px 0 0;
    color: #1f1f1f;
    font-weight: 700;
    font-size: 1.25rem;
}

.product-modal-meta {
    margin: 0;
    color: #666;
    font-size: 0.94rem;
}

.product-modal-sku {
    margin: -4px 0 0;
    color: #7a7a7a;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-modal-description {
    margin: 2px 0 0;
    color: #2c2c2c;
    line-height: 1.5;
}

.product-modal-highlights {
    margin: 0;
    padding: 0 0 0 18px;
    color: #303030;
    display: grid;
    gap: 5px;
}

.product-modal-extra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.product-modal-info-box {
    border: 1px solid #dcdcdc;
    background: #fff;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.product-modal-info-box strong {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #242424;
}

.product-modal-info-box span {
    color: #555;
    font-size: 0.88rem;
}

.product-modal-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.product-modal-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #cfcfcf;
    height: 44px;
}

.product-modal-qty button {
    width: 42px;
    height: 100%;
    border: 0;
    background: #f4f4f4;
    color: #2b2b2b;
    font-size: 1.2rem;
    cursor: pointer;
}

.product-modal-qty input {
    width: 56px;
    height: 100%;
    border: 0;
    text-align: center;
    font-weight: 700;
    color: #202020;
    background: #fff;
}

.product-modal-add {
    border: 0;
    background: #222;
    color: #fff;
    height: 44px;
    min-width: 315px;
    padding: 0 28px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.2s ease;
}

.product-modal-add:hover,
.product-modal-add:focus-visible {
    background: #AE7B3A;
}

.product-modal-add.is-added {
    background: #4a4a4a;
}

.product-modal-fav {
    width: 44px;
    height: 44px;
    border: 1px solid #cfcfcf;
    background: #fff;
    color: #3a3a3a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.product-modal-fav svg {
    width: 30px;
    height: 30px;
}

.product-modal-fav:hover,
.product-modal-fav[aria-pressed="true"] {
    background: #fff6ee;
    border-color: #c4a882;
    color: #b38349;
}

html.product-modal-open,
body.product-modal-open {
    overscroll-behavior: none;
}

.product-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.product-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.product-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: #fff;
}

.product-lightbox-dialog {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    max-height: none;
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 20px;
    background: #fff;
    border: 0;
    padding: 24px;
    box-sizing: border-box;
}

.product-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    background: rgba(255, 252, 247, 0.72);
    border: 1px solid rgba(122, 92, 62, 0.16);
    cursor: pointer;
    color: #3A3A3A;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    z-index: 2;
}

.product-lightbox-close:hover {
    color: #AE7B3A;
    background: rgba(255, 248, 239, 0.92);
    border-color: rgba(174, 123, 58, 0.32);
    transform: rotate(90deg);
}

.product-lightbox-thumbs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding-right: 6px;
}

.product-lightbox-thumb {
    width: 110px;
    height: 138px;
    border: 2px solid #ffffff;
    background: #fff;
    padding: 0;
    cursor: pointer;
}

.product-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-lightbox-thumb.is-active {
    border-color: #212121;
}

.product-lightbox-main {
    min-height: 100%;
    background: #fff;
    overflow: hidden;
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-lightbox-main img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    object-fit: contain;
    display: block;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.18s ease;
    user-select: none;
}

.product-lightbox-main.is-zooming {
    cursor: zoom-out;
}

@media (max-width: 760px) {
    .product-lightbox-dialog {
        grid-template-columns: 1fr;
        height: 100vh;
        padding: 64px 16px 16px;
    }

    .product-lightbox-thumbs {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        order: 2;
        padding-right: 0;
    }

    .product-lightbox-thumb {
        width: 84px;
        height: 108px;
        flex: 0 0 auto;
    }

    .product-lightbox-main {
        min-height: 58vh;
    }
}

@media (max-width: 860px) {
    .product-modal-dialog {
        grid-template-columns: 1fr;
    }

    .product-modal-media {
        min-height: 340px;
    }

    .product-modal-media-layout {
        grid-template-columns: 1fr;
    }

    .product-modal-thumbs {
        flex-direction: row;
        overflow-x: auto;
        order: 2;
    }

    .product-modal-thumb {
        width: 66px;
        height: 84px;
        flex: 0 0 auto;
    }

    .product-modal-main-image-wrap {
        min-height: 320px;
    }

    .product-modal-content h2 {
        font-size: 1.5rem;
    }

    .product-modal-extra {
        grid-template-columns: 1fr;
    }
}

.catalog-filters {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 8px;
    max-height: calc(100vh - 16px);
    overflow: auto;
    border: 1px solid #ddd2c4;
    border-radius: 2px;
    padding: 14px 14px 10px;
    background: linear-gradient(180deg, #fffdfa, #fff9f2);
    box-shadow: 0 8px 24px rgba(31, 22, 13, 0.08);
}

.catalog-filters.is-empty {
    display: none !important;
}

.catalog-results {
    margin: 4px 0 14px;
    font-size: 0.95rem;
    color: #6d5741;
}

.catalog-reset {
    width: 100%;
    margin-bottom: 12px;
    border: 1px solid #d8c6b3;
    background: #fff;
    color: #5a4531;
    padding: 9px 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.catalog-reset:hover {
    background: #f8efe4;
    border-color: #c9ae93;
}

.filter-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    color: #3a3128;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.filter-option:hover {
    background: #f5ede3;
    color: #8b5e2c;
}

.filter-option input {
    accent-color: #ae7b3a;
}

.filter-option span {
    color: #8b7762;
    font-size: 0.88em;
}

.filter-option [data-filter-count],
.filter-option [data-category-count] {
    justify-self: end;
    color: #8b7762;
    font-size: 0.88em;
}

.filter-option.is-zero {
    display: none !important;
}

.product-card[hidden] {
    display: none;
}

.catalog-empty {
    margin-top: 14px;
    padding: 14px;
    border: 1px dashed #d7c3ad;
    border-radius: 8px;
    color: #7a5c3e;
    background: #fff8ef;
}

.catalog-filters h2 {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4d3d2d;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9dfd3;
}

.filter-group {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #efe5d8;
}

.filter-group:has(.filter-option:nth-of-type(6)) {
    max-height: 255px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}

.filter-group:has(.filter-option:nth-of-type(6))::-webkit-scrollbar {
    width: 6px;
}

.filter-group:has(.filter-option:nth-of-type(6))::-webkit-scrollbar-thumb {
    background: rgba(174, 123, 58, 0.35);
    border-radius: 999px;
}

.filter-group h3 {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6d5741;
}

.filter-group a {
    display: block;
    padding: 7px 8px;
    text-decoration: none;
    color: #3a3128;
    border-radius: 6px;
    line-height: 1.2;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.filter-group a:hover {
    text-decoration: none;
    background: #f5ede3;
    color: #8b5e2c;
    transform: translateX(2px);
}

@media (max-width: 1024px) {
    .catalog-page {
        grid-template-columns: 1fr;
    }

    .catalog-content,
    .catalog-filters {
        grid-column: auto;
        grid-row: auto;
    }

    .catalog-filters {
        position: static;
        max-height: none;
    }

    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .catalog-grid {
        grid-template-columns: 1fr;
    }
}

/* EVENTS PAGE */
.events-page {
    --events-bg-top: #fffbf6;
    --events-bg-bottom: #f5ece2;
    --events-accent: #ae7b3a;
    --events-accent-soft: rgba(174, 123, 58, 0.16);
    --events-dark: #2f2216;
    max-width: 1240px;
    margin: 0 auto 56px;
    padding: 28px 20px 0;
    display: grid;
    gap: 28px;
}

.events-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 44px);
    background:
        linear-gradient(130deg, var(--events-bg-top) 0%, var(--events-bg-bottom) 70%),
        repeating-linear-gradient(45deg, rgba(122, 92, 62, 0.05) 0 1px, transparent 1px 20px),
        repeating-linear-gradient(-45deg, rgba(122, 92, 62, 0.04) 0 1px, transparent 1px 24px);
    border: 1px solid rgba(122, 92, 62, 0.2);
    box-shadow: 0 20px 44px rgba(44, 27, 10, 0.1);
    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
}

.events-hero::before,
.events-hero::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    background: url('img/amazigh.png') center/contain no-repeat;
    opacity: 0.12;
    pointer-events: none;
}

.events-hero::before {
    top: -28px;
    right: -22px;
}

.events-hero::after {
    bottom: -32px;
    left: -24px;
}

.events-kicker {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: #7a5c3e;
}

.events-hero h1 {
    margin: 10px 0 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.08;
    color: var(--events-dark);
}

.events-intro {
    margin: 14px 0 0;
    max-width: 860px;
    font-size: 17px;
    line-height: 1.75;
    color: #4a3a29;
}

.events-tags {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.events-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 13px;
    border: 1px solid rgba(122, 92, 62, 0.3);
    background: rgba(255, 255, 255, 0.58);
    color: #4d3822;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.event-card {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    padding: 20px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(252, 245, 236, 0.95));
    border: 1px solid rgba(122, 92, 62, 0.26);
    box-shadow: 0 10px 24px rgba(58, 36, 12, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    animation: eventsCardReveal 0.55s ease both;
}

.event-card:nth-child(2) { animation-delay: 0.08s; }
.event-card:nth-child(3) { animation-delay: 0.12s; }
.event-card:nth-child(4) { animation-delay: 0.16s; }
.event-card:nth-child(5) { animation-delay: 0.2s; }
.event-card:nth-child(6) { animation-delay: 0.24s; }

.event-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(174, 123, 58, 0.9), transparent);
}

.event-card:hover {
    transform: translateY(-4px);
    border-color: rgba(122, 92, 62, 0.45);
    box-shadow: 0 16px 30px rgba(58, 36, 12, 0.15);
}

.event-meta {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7c6248;
    font-weight: 700;
}

.event-card h2 {
    margin: 10px 0 10px;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.52rem;
    line-height: 1.2;
    color: #2f2216;
}

.event-card p {
    margin: 0;
    color: #4e3d2d;
    line-height: 1.65;
    font-size: 14.5px;
}

.event-card ul {
    margin: 12px 0 0;
    padding-left: 18px;
    color: #5a4531;
    display: grid;
    gap: 6px;
    font-size: 14px;
}

.event-card-featured {
    grid-column: span 2;
    background:
        radial-gradient(circle at 12% 12%, rgba(174, 123, 58, 0.2), transparent 44%),
        linear-gradient(160deg, #fffaf5, #f6ebdf);
}

.event-card-outline {
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(246, 237, 227, 0.94));
    border-style: dashed;
}

.event-samakeup-layout {
    display: flex;
    align-items: center;
    gap: 14px;
}

.event-samakeup-logo {
    width: 72px;
    height: auto;
    flex-shrink: 0;
}

.events-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    padding: 22px;
    border: 1px solid rgba(122, 92, 62, 0.24);
    background: linear-gradient(90deg, rgba(255, 252, 248, 0.94), rgba(247, 237, 226, 0.94));
}

.events-cta h2 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: 2rem;
    color: #322416;
}

.events-cta p {
    margin: 8px 0 0;
    color: #4f3c2a;
    font-size: 15px;
}

.events-cta-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.events-cta-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    min-height: 44px;
    padding: 0 16px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(120deg, #3a3a3a, #171717);
    border: 1px solid #1f1f1f;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.events-cta-actions a:hover {
    background: linear-gradient(120deg, #ae7b3a, #8e6434);
    border-color: #8e6434;
    transform: translateY(-2px);
    box-shadow: 0 10px 18px rgba(122, 92, 62, 0.2);
}

@keyframes eventsCardReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

@media (max-width: 1024px) {
    .events-grid {
        grid-template-columns: 1fr 1fr;
    }

    .event-card-featured {
        grid-column: span 2;
    }

    .events-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 680px) {
    .events-page {
        padding: 22px 14px 0;
    }

    .events-intro {
        font-size: 15px;
    }

    .events-grid {
        grid-template-columns: 1fr;
    }

    .event-card,
    .event-card-featured {
        grid-column: auto;
    }

    .events-cta h2 {
        font-size: 1.6rem;
    }

    .events-cta-actions {
        width: 100%;
    }

    .events-cta-actions a {
        flex: 1;
        min-width: 0;
    }
}

body.photo-lightbox-open {
    overflow: hidden;
}

.photo-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(0px);
    transition: opacity 0.3s ease, visibility 0.3s ease, backdrop-filter 0.3s ease;
    z-index: 5000;
}

.photo-lightbox-overlay.is-open {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(4px);
}

.photo-lightbox-overlay.image-focus {
    backdrop-filter: blur(8px);
}

.photo-lightbox-dialog {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-lightbox-image {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: min(92vw, 1200px);
    max-height: 88vh;
    object-fit: contain;

    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    transform: scale(0.96);
    transition: transform 0.3s ease;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.photo-lightbox-image.is-dragging {
    cursor: grabbing;
}

.photo-lightbox-image:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.78);
    outline-offset: 6px;
}

.photo-lightbox-image.is-slide-next {
    animation: lightboxSlideFromRight 0.3s ease;
}

.photo-lightbox-image.is-slide-prev {
    animation: lightboxSlideFromLeft 0.3s ease;
}

@keyframes lightboxSlideFromRight {
    from {
        transform: translateX(34px) scale(0.97);
        opacity: 0.5;
    }

    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes lightboxSlideFromLeft {
    from {
        transform: translateX(-34px) scale(0.97);
        opacity: 0.5;
    }

    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.photo-lightbox-overlay.is-open .photo-lightbox-image {
    transform: scale(1);
}

.photo-lightbox-nav {
    border: 1px solid rgba(255, 255, 255, 0.32);
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    font-size: 24px;
    color: #bbb;
    background: rgba(18, 18, 18, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.photo-lightbox-nav.prev {
    left: 82px;
}

.photo-lightbox-nav.next {
    right: 82px;
}

.photo-lightbox-dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 6;
    padding: 6px 10px;
    border-radius: 999px;
    background: none;
    backdrop-filter: none;
    pointer-events: auto;
}

.photo-lightbox-dot {
    width: 7px;
    height: 7px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.photo-lightbox-dot:hover {
    background: rgba(255, 255, 255, 0.72);
}

.photo-lightbox-dot.is-active {
    background: #fefcfd;
    transform: scale(1.25);
}

.photo-lightbox-nav:hover {
    background: #ae7c3a88;
    transform: translateY(-50%) scale(1.1);
}

@media (max-width: 768px) {
    .photo-lightbox-nav {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .photo-lightbox-nav.prev {
        left: 2px;
    }

    .photo-lightbox-nav.next {
        right: 2px;
    }
}