/** Shopify CDN: Minification failed

Line 353:0 Unexpected "{"
Line 353:1 Expected identifier but found "%"
Line 355:0 Unexpected "{"
Line 355:1 Expected identifier but found "%"
Line 357:0 Unexpected "{"
Line 357:1 Expected identifier but found "%"
Line 359:0 Unexpected "{"
Line 359:1 Expected identifier but found "%"

**/



/* =========================================================
0. LE TUEUR DE Z-INDEX (Désactive le bouclier à 2 milliards du header)
========================================================= */
[id^="shopify-section-sections"][id$="__header"],
.shopify-section-header-sticky,
.scrolled-past-header {
z-index: 100 !important;
}

/* =========================================================
0. BRIDER LE Z-INDEX DU HEADER (Laisse passer les pop-ups)
========================================================= */
.shopify-section-group-header-group,
#shopify-section-header,
.section-header,
sticky-header {
z-index: 200 !important;
}
/* Le header laisse ses menus recevoir les clics au-dela de sa hauteur.
   Le clip global des sections, combine a will-change: transform, peut
   afficher le tiroir tout en envoyant les clics a la page situee dessous. */
.shopify-section.section-header {
    overflow: visible !important;
}

/* =========================================================
1. GESTION DE LA LARGEUR (Finies les marges énormes)
========================================================= */
.header-wrapper .page-width {
max-width: 100% !important;
padding-left: 3rem !important; /* ~30px de marge à gauche */
padding-right: 3rem !important; /* ~30px de marge à droite */
}

@media screen and (max-width: 989px) {
.header-wrapper .page-width {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
}

/* =========================================================
2. TYPOGRAPHIE ET BOUTON CTA
========================================================= */
.list-menu__item--link,
.list-menu__item span,
.header__menu-item span,
.mega-menu__link {
text-transform: uppercase !important;
letter-spacing: 0.05em;
}

@media screen and (min-width: 990px) {
/* Ajustement de la taille du logo sur ordinateur */
.header__heading-logo {
    width: 150px !important; /* Change 250px par la taille que tu souhaites */
    height: auto !important;
    max-width: 100% !important;
}

.header__inline-menu--left .list-menu {
    align-items: center !important;
}

/* Bouton Créer ma composition */
.header__inline-menu--left .list-menu > li:first-child a {
    background-color: #211414 !important;
    border-radius: 0px !important;
    padding: 0.8rem 1.5rem !important;
    margin-right: 1rem !important;
    transition: transform 0.2s ease, background-color 0.2s ease;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
}

.header__inline-menu--left .list-menu > li:first-child a span {
    color: #ffffff !important;
    font-weight: inherit !important;
}

.header__inline-menu--left .list-menu > li:first-child a:hover {
    background-color: #402727 !important;
    transform: scale(0.98);
    color: #ffffff !important;
}

/* =========================================================
3. LE MEGA MENU AU SURVOL (HOVER) ET STYLISÉ
========================================================= */
header-menu {
    display: block;
}

header-menu details {
    position: static !important;
}

/* 1. On "encage" la zone d'action strictement autour du mot */
header-menu details > summary {
    position: relative !important;
}

/* 2. Le pont invisible (Réduit et contrôlé) */
header-menu details > summary::after {
    content: '';
    position: absolute;
    width: 100%; /* Maintenant, c'est 100% du mot, pas de l'écran */
    height: 15px; /* On réduit la hauteur de 30px à 15px */
    bottom: -15px; /* On le colle juste en dessous du mot */
    left: 0;
    z-index: 10;
}

/* 0. Anti-clignotement (FOUC) au chargement */
header-menu details:not([open]):not(:hover) .mega-menu__content {
    display: none !important;
}

/* 1. Configuration par défaut du Mega Menu (FERMÉ) */
.mega-menu__content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb;
    /* ON GARDE TON OMBRE GÉANTE POUR LE VOILE NOIR */
    box-shadow: 0 100vh 0 100vh rgba(0, 0, 0, 0.4) !important;
    padding: 3rem 0 4rem 0 !important;
    z-index: 45;
    /* On le garde dans la page, mais on le rend transparent et inactif */
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    /* TRANSITION DE FERMETURE : 0.1s d'inertie (délai) + 0.5s de disparition douce */
    transition: opacity 0.5s ease 0.1s, visibility 0.5s ease 0.1s !important;
}

/* 2. Ouverture au Survol (OUVERT) */
header-menu details:hover .mega-menu__content,
header-menu details.is-hovered .mega-menu__content {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    /* TRANSITION D'OUVERTURE : rapide et immédiate (0s de délai) */
    transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s !important;
}

/* --- VOILE NOIR TRANSPARENT SOUS LE MENU --- */
.mega-menu__content::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: calc(-50vw + 50%) !important; /* S'assure que le voile touche bien les bords de l'écran */
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important;
    pointer-events: none !important;
    z-index: 10 !important; /* MODIFIÉ : Passe au-dessus du site, mais reste sous le menu grâce au top: 100% */
}

/* Layout 2 colonnes */
.mega-menu__wrapper {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    width: 100%;
}

.mega-menu__links-col {
    flex: 0 0 auto;
}

.mega-menu__list {
    display: flex !important;
    gap: 6rem !important;
    justify-content: flex-start;
}

/* --- L'ARME ANTI BASE.CSS POUR LES TEXTES --- */
/* Titre des colonnes Niveau 2 (ex: BOUCLES D'OREILLES) -> PLUS EPAIS */
#DesktopMegaMenu .mega-menu__link--level-2 {
    font-weight: 500 !important;
    color: #a89482 !important;
    font-size: 14px !important;
    margin-bottom: 1.5rem !important;
    display: block !important;
    text-decoration: none !important;
}

/* Liens Niveau 3 (ex: Créoles) -> MINUSCULE (majuscule gérée dans Shopify) & PLUS FIN */
#DesktopMegaMenu .mega-menu__list .list-unstyled li {
    margin-bottom: 0.8rem !important;
}

#DesktopMegaMenu .mega-menu__list .list-unstyled li a.mega-menu__link {
    color: #333333 !important;
    font-size: 12px !important;
    font-weight: 400 !important; /* 400 = Normal, 500 = Medium, 300 = Light */
    text-transform: none !important; /* Laisse Shopify gérer les majuscules/minuscules */
    letter-spacing: normal !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
}

#DesktopMegaMenu .mega-menu__list .list-unstyled li a:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

/* =========================================================
4. LE SLIDER D'IMAGES BLINDÉ (Droite)
========================================================= */
.mega-menu__slider-col {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
}

#MegaMenuSlider {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    padding: 0 5px;
}

#MegaMenuSlider::-webkit-scrollbar {
    display: none;
}

/* Le conteneur parent (Structure par Couches) */
.mega-slide-wrapper {
    position: relative !important;
    flex: 0 0 calc(33.333% - 1rem);
    aspect-ratio: 1/1 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease !important;
    scroll-snap-align: start;
}

.mega-slide-wrapper:hover {
    transform: translateY(-5px) !important;
}

/* Couche 1: L'image */
.mega-slide-wrapper img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
    display: block !important;
}

/* Couche 2: Le Voile Noir */
.mega-slide-wrapper .mega-slide-veil {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    /* Le dégradé reste totalement transparent jusqu'à 70% de l'image, puis s'assombrit vers le bas */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.7) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    display: block !important;
}

/* Couche 3: Le Texte Blanc */
.mega-slide-wrapper .mega-slide-text {
    position: absolute !important;
    bottom: 15px !important;
    left: 15px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 13px !important; /* <-- MODIFIÉ : Passage à 14px */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    z-index: 3 !important;
    pointer-events: none !important;
    margin: 0 !important;
}

/* Couche 4: Le Lien Cliquable Invisible */
.mega-slide-wrapper .mega-slide-link {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 10 !important;
    display: block !important;
}

/* Flèches Slider */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    color: #211414;
    transition: background 0.2s, transform 0.2s;
}

.slider-btn:hover { background: #f9f9f9; transform: translateY(-50%) scale(1.05); }
.slider-btn.prev-btn { left: -18px; }
.slider-btn.next-btn { right: -18px; }
}

/* =========================================================
    5. AUTRES STYLES NATIFS (Panier forcé en blanc)
    ========================================================= */
#cart-icon-bubble .cart-count-bubble,
#cart-icon-bubble .cart-count-bubble span,
#cart-icon-bubble .cart-count-bubble span[aria-hidden="true"] { 
color: #ffffff !important; 
-webkit-text-fill-color: #ffffff !important; /* Force le blanc même sur Safari/iOS */
}

header-drawer { justify-self: start; margin-left: -1.2rem; }

{%- if section.settings.sticky_header_type == 'reduce-logo-size' -%}
.scrolled-past-header .header__heading-logo-wrapper { width: 75%; }
{%- endif -%}

{%- if section.settings.menu_type_desktop != "drawer" -%}
@media screen and (min-width: 990px) { header-drawer { display: none; } }
{%- endif -%}

.menu-drawer-container { display: flex; }
.list-menu { list-style: none; padding: 0; margin: 0; }
.list-menu--inline { display: inline-flex; flex-wrap: wrap; }
summary.list-menu__item { padding-right: 2.7rem; }
.list-menu__item { display: flex; align-items: center; line-height: calc(1 + 0.3 / var(--font-body-scale)); }
.list-menu__item--link { text-decoration: none; padding-bottom: 1rem; padding-top: 1rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); }

@media screen and (min-width: 750px) { .list-menu__item--link { padding-bottom: 0.5rem; padding-top: 0.5rem; } }

.header-wrapper .header__icon, .header-wrapper .header__icon--summary { width: 3rem !important; height: 3rem !important; padding: 0 !important; }
.header__left-icons { gap: 0.5rem; }
.header-wrapper .svg-wrapper svg, .header-wrapper .header__icon svg, .menu-drawer-container summary svg { height: 15px !important; width: auto !important; overflow: visible !important; }
.cart-count-bubble span[aria-hidden="true"] { color: #ffffff !important; }

body.theme-cart-blur #MainContent, body.theme-cart-blur .section-header, body.theme-cart-blur footer { filter: blur(8px); -webkit-filter: blur(8px); transition: filter 0.3s ease-in-out; pointer-events: none; }

/* On remet l'original exact : */
/* 1. On GARDE overflow: hidden pour cacher le blanc à droite et bloquer l'écran */
/* 2. On RETIRE "height: 100vh" car c'est LUI l'unique responsable du saut à zéro sur iPhone */
html.theme-cart-lock, html.theme-cart-lock body { 
overflow: hidden !important; 
overscroll-behavior: none !important; 
}

body.theme-cart-blur::after { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); z-index: 50; pointer-events: none; transition: opacity 0.3s ease; }

@media screen and (min-width: 990px) {
.header--middle-center { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 2rem; }
.header__inline-menu--left { justify-self: start; }
.header__heading { justify-self: center; }
.header__right-section { justify-self: end; display: flex; align-items: center; gap: 1.5rem; }
}


/* =========================================================
    6. TOP BAR MOBILE (Sous-menu horizontal)
    ========================================================= */
/* =========================================================
    6. TOP BAR MOBILE (Sous-menu horizontal)
   ========================================================= */
.mobile-top-bar {
    /* 👇 1. Fond blanc transparent à 90% pour laisser passer le flou 👇 */
    background-color: rgba(255, 255, 255, 0.9) !important; 

    /* 👇 2. L'effet de flou derrière la barre 👇 */
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important; /* Indispensable Safari/iOS */

    /* 👇 3. L'OMBRE DOUCE COMPATIBLE iOS 👇 */
    -webkit-box-shadow: 0 10px 15px -6px rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 15px -6px rgba(0, 0, 0, 0.1) !important;

    /* On garde ta bordure très fine en dessous si tu l'aimes, 
       sinon tu peux la supprimer vu qu'il y a l'ombre maintenant */
    border-bottom: 1px solid rgba(204, 205, 207, 0.3) !important; 
    
    width: 100%;

    /* 👇 BARRE STICKY OPTIMISÉE 👇 */
    position: sticky !important;
    top: 0px !important; 
    z-index: 40 !important;
    transition: top 0.25s ease-in-out !important;
}

@media screen and (min-width: 990px) {
.mobile-top-bar {
    display: none !important;
}
}

.mobile-top-bar__inner {
display: flex;
align-items: center;
overflow-x: auto; /* Active le scroll horizontal */
overflow-y: hidden;
-webkit-overflow-scrolling: touch; /* Défilement fluide sur iPhone */
scrollbar-width: none; /* Masque la barre de défilement (Firefox) */
-ms-overflow-style: none; /* Masque la barre de défilement (IE/Edge) */
padding: 0.6rem 1.2rem;
white-space: nowrap; /* Empêche le texte de passer à la ligne */
}

/* Masque la barre de défilement sur les navigateurs Webkit (Chrome/Safari) */
.mobile-top-bar__inner::-webkit-scrollbar {
display: none;
}

.mobile-top-bar__link {
color: #333333 !important;
font-size: 1rem !important; /* Ajuste la taille si besoin */
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
text-decoration: none !important;
flex-shrink: 0; /* Empêche les liens de s'écraser */
}

/* Le séparateur | */
.mobile-top-bar__separator {
color: #a89482 !important; /* J'ai mis la couleur beige/dorée pour faire joli, tu peux changer pour #ccc si tu préfères gris */
margin: 0 1.8rem !important; /* L'espace de chaque côté du séparateur */
font-size: 1.2rem !important;
flex-shrink: 0;
}

/* =========================================================
    7. ANIMATION FLUIDE DU SCROLL MOBILE
    ========================================================= */
@media screen and (max-width: 989px) {
.section-header {
    position: sticky !important;
    top: 0 !important;
    transition: transform 0.3s ease-out !important;
    will-change: transform;
}
}



/* Correction Icônes Burger/Croix sans casser l'alignement */
.header__icon--menu > span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__icon--menu .icon-hamburger {
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    /* On s'assure que l'icône apparaît instantanément */
    transition: opacity 0.1s ease; 
}

.header__icon--menu > span > svg:not(.icon-hamburger) {
    display: none;
    width: 1.8rem;
    height: 1.8rem;
}

/* CORRECTION : On cible .menu-opening au lieu de juste [open]. 
    Dès que le menu commence à se fermer (.menu-opening disparait), 
    le burger revient INSTANTANÉMENT. */
details[open].menu-opening.menu-drawer-container .header__icon--menu .icon-hamburger {
    display: none;
}

details[open].menu-opening.menu-drawer-container .header__icon--menu > span > svg:not(.icon-hamburger) {
    display: block;
}


/* --- 1. GESTION DE LA LARGEUR, DE LA HAUTEUR ET DU VOILE --- */
/* --- 1. GESTION DE LA LARGEUR, DE LA HAUTEUR ET DU VOILE --- */
.menu-drawer {
    width: 90vw !important;
    max-width: 450px !important; 
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 2147483647 !important;
    overflow: visible !important; 
}

/* 1. ON DÉSACTIVE LE VOILE NATIF (Celui qui cause les freezes) */
/* 1. ON FORCE LE VOILE NATIF À ÊTRE FIXE ET FLOU */
.menu-drawer-container > summary::before {
    content: '';
    position: fixed !important; /* Fixe le voile à l'écran */
    top: var(--menu-overlay-top, 85px) !important; /* Commence sous le header */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important; /* L'effet flou */
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 45 !important; /* Au-dessus du sous-menu (qui est à 40) mais sous le tiroir */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    opacity: 0 !important;
    visibility: hidden !important;
    /* La transition de 0.3s pour la fluidité */
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* 2. LE VOILE APPARAÎT EN DOUCEUR (Seulement quand menu-opening est là) */
details[open].menu-opening.menu-drawer-container > summary::before {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. ON BLOQUE LE SCROLL SANS LE SAUT FANTÔME */
html.menu-mobile-locked, html.menu-mobile-locked body {
    overflow-y: clip !important; /* clip remplace hidden pour éviter le saut */
    height: auto !important; /* Enlève le 100vh responsable du saut */
    overscroll-behavior: none !important;
}
/* --- 4. ANIMATION DES FLÈCHES DE FERMETURE (SWIPE) --- */

/* On s'assure que le conteneur parent prend bien 100% de la hauteur pour que le top:50% marche */
.menu-drawer__inner-container {
    height: 100%;
    position: relative; /* CRUCIAL : C'est ce qui permet au absolute des flèches de bien se placer */
}

.menu-slide-hint {
    position: absolute; 
    top: 45%; /* Retour au 50% classique, qui marchera grâce au relative au-dessus */
    right: -50px; /* DÉCALAGE : On les pousse encore plus à droite (hors du menu) */
    transform: translateY(-50%);
    width: 40px; 
    height: 100px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    pointer-events: none; 
    z-index: 2147483647;
    animation: menu-pulse-horizontal 1.5s infinite ease-in-out;
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Rend les flèches visibles uniquement quand le menu est ouvert */
details[open] .menu-slide-hint { 
    opacity: 1; 
    visibility: visible;
}

.menu-slide-hint svg {
    width: 22px; /* Un peu plus petit pour faire plus fin */
    height: 22px;
    stroke: #ffffff !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

@keyframes menu-pulse-horizontal {
    0%, 100% { transform: translate(0, -50%); }
    /* L'animation va de 0 (droite) à -15px (gauche), sans jamais repasser dans les positifs, donc ça ne touchera pas le menu */
    50% { transform: translate(-15px, -50%); } 
}
/* =========================================================
    TYPOGRAPHIE DU MENU MOBILE (Forcée contre base.css)
    ========================================================= */
/* 1. LIENS DE NIVEAU 1 UNIQUEMENT (Forcés avec notre classe custom) */
#menu-drawer#menu-drawer#menu-drawer#menu-drawer .custom-lvl-1 {
    font-family: inherit !important; /* Dégage la police Helvetica imposée par le thème */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    /* 👇 MODIFIE LA TAILLE ET L'ÉPAISSEUR ICI 👇 */
    font-size: 1.2rem !important; /* Taille du texte */
    font-weight: 700 !important;  /* Épaisseur (400, 500, 600...) */
    color: #000000 !important;
    text-decoration: none !important; /* Supprime le soulignement natif éventuel */
    line-height: 1.2 !important;
}

/* 2. BOUTON "RETOUR EN ARRIÈRE" (Avec fond gris) */
#menu-drawer .menu-drawer__close-button {
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background-color: #f7f7f7 !important; /* Fond gris très clair */
    width: 100% !important; /* Pour que le fond gris prenne toute la largeur */
    margin-bottom: 1rem !important; /* Crée un petit espace sous le bouton */
    /* 👇 MODIFIE LA TAILLE ET L'ÉPAISSEUR ICI 👇 */
    font-size: 1.1rem !important; /* Taille du texte du bouton retour */
    font-weight: 300 !important;  /* Épaisseur du texte */
    color: #333333 !important;
}

/* Optionnel : Ajuster la flèche SVG du bouton retour pour l'aligner */
#menu-drawer .menu-drawer__close-button .svg-wrapper {
    margin-right: 1rem !important;
}

/* 3. LIENS DE NIVEAU 2 ET 3 (Les sous-catégories) */
#menu-drawer .menu-drawer__submenu .menu-drawer__menu-item {
    text-transform: none !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    font-size: 1.2rem !important; 
    color: #333333 !important;
    text-transform: uppercase !important;
}

/* =========================================================
    4. GESTION DES FLÈCHES (Taille et Épaisseur)
    ========================================================= */

/* Cible TOUTES les flèches du menu mobile (pour aller aux sous-menus) */
#menu-drawer .menu-drawer__menu-item .svg-wrapper svg {
    /* 👇 Modifie la taille globale de la flèche ici 👇 */
    width: 1.2rem !important; 
    height: auto !important;
    
    /* 👇 Modifie l'épaisseur du trait ici (par défaut c'est souvent 1.5 ou 2) 👇 */
    stroke-width: 1px !important; 
}

/* Cible SPÉCIFIQUEMENT la flèche du bouton "Retour en arrière" */
#menu-drawer .menu-drawer__close-button .svg-wrapper svg {
    /* Tu peux la faire un poil plus grande ou plus petite que les autres ici */
    width: 1.3rem !important; 
    height: auto !important;
    
    /* Épaisseur du trait de la flèche de retour */
    stroke-width: 1px !important; 
}

/* =========================================================
    5. AJUSTEMENT DES ESPACEMENTS (Marges à 15px / 1.5rem)
    ========================================================= */

/* 1. Supprime les gros espaces natifs en haut et en bas du tiroir */
#menu-drawer .menu-drawer__inner-container,
#menu-drawer .menu-drawer__navigation-container,
#menu-drawer .menu-drawer__navigation {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Réduit l'espace gauche/droite des liens normaux (de 30px à 15px) */
#menu-drawer .menu-drawer__menu-item {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* 3. Ajuste aussi l'espace pour le bouton "Retour en arrière" */
#menu-drawer .menu-drawer__close-button {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* 4. Ajuste les éléments du bas (compte, réseaux sociaux, etc.) */
#menu-drawer .menu-drawer__utility-links {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    /* 👇 On enlève les 8rem ! On ne garde que l'encoche iPhone si besoin 👇 */
    padding-bottom: env(safe-area-inset-bottom) !important; 
    /* 👇 On désactive le fond gris natif de Shopify qui englobait tout 👇 */
    background-color: transparent !important; 
}

/* Style forcé de tes réseaux sociaux en noir */
.custom-mobile-socials {
    display: flex;
    align-items: center;
    gap: 1.5rem;

}

.custom-mobile-socials a {
    color: #000000 !important; 
    display: flex;
}

.custom-mobile-socials .svg-wrapper svg {
    width: 24px !important; 
    height: 24px !important;
    fill: #000000 !important;
}

/* 👇 LE NOUVEAU BANDEAU GRIS SEULEMENT POUR LA CONNEXION 👇 */
#menu-drawer .custom-login-banner {
    background-color: #f7f7f7 !important; /* Le fond gris clair */
    margin-left: -1.5rem !important; /* Étire à gauche pour coller au bord de l'écran */
    margin-right: -1.5rem !important; /* Étire à droite pour coller au bord de l'écran */
    padding: 1.5rem !important; /* Épaisseur du bandeau */
    display: flex !important;
    align-items: center !important;
    color: #333333 !important;
    text-transform: uppercase !important; /* Typographie cohérente avec ton menu */
    letter-spacing: 0.05em !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;
}

/* =========================================================
    6. LIGNE DE SÉPARATION ET MENU SECONDAIRE
    ========================================================= */

/* Ligne grise claire avec 15px de marge sur les côtés et 20px en haut/bas */
/* Ligne grise claire blindée contre base.css */
#menu-drawer .custom-mobile-separator {
    display: block !important;
    width: calc(100% - 3rem) !important; /* Prend toute la largeur moins les marges (1.5rem x 2) */
    height: 1px !important;
    min-height: 1px !important; /* Force la hauteur même si la div est vide */
    background-color: #e5e5e5 !important; 
    margin: 2rem 0rem !important; 
    border: none !important;
}

/* Style du menu secondaire (menu-droite) : Un peu moins gras */
#menu-drawer#menu-drawer#menu-drawer#menu-drawer .custom-lvl-1-secondary {
    font-family: inherit !important; 
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 1.2rem !important; /* Même taille que le menu du haut */
    font-weight: 500 !important;  /* 👇 MOINS GRAS ICI (500 au lieu de 700) 👇 */
    color: #000000 !important;
    text-decoration: none !important; 
    line-height: 1.2 !important;
}

/* =========================================================
    7. GRILLE D'IMAGES MOBILE (Sous le Menu Droite)
    ========================================================= */
.mobile-grid-container {
    margin-top: 2.5rem; /* Espace pour séparer la grille du menu au-dessus */
    margin-bottom: 2rem;
}

.mobile-mega-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crée 2 colonnes parfaitement égales */
    gap: 1rem; /* Espace de 10px/15px entre chaque image */
    padding: 0 1.5rem; /* Respecte les marges du reste du menu (15px de chaque côté) */
}

.mobile-mega-grid-item {
    position: relative !important;
    aspect-ratio: 1/1 !important; /* Garde les images parfaitement carrées */
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* Couche 1: L'image */
.mobile-mega-grid-item img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
    display: block !important;
}

/* Couche 2: Le Voile Noir (Dégradé) */
.mobile-mega-grid-item .mega-slide-veil {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    display: block !important;
}

/* Couche 3: Le Texte Blanc */
.mobile-mega-grid-item .mega-slide-text {
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    color: #ffffff !important;
    font-family: inherit !important;
    -webkit-text-fill-color: #ffffff !important; 
    font-weight: 600 !important;
    font-size: 1.1rem !important; 
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    z-index: 3 !important;
    pointer-events: none !important;
    margin: 0 !important;
}

/* Couche 4: Le Lien cliquable par dessus tout */
.mobile-mega-grid-item .mega-slide-link {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 10 !important;
    display: block !important;
}

/* =========================================================
    8. GESTION DU SCROLL ET BUTÉES (Anti-tremblement)
    ========================================================= */
#menu-drawer .menu-drawer__inner-container {
    overflow-y: auto !important;
    overscroll-behavior-y: none !important; /* Empêche le rebond élastique (butées) */
    -webkit-overflow-scrolling: touch !important; /* Scroll fluide sur iPhone */
}

/* =========================================================
    CORRECTION DU SWIPE : Rendre la sidebar "solide"
    ========================================================= */
#menu-drawer {
    /* Force le navigateur à ignorer le swipe horizontal (laisse le JS faire) */
    touch-action: pan-y !important; 
}

#menu-drawer .menu-drawer__inner-container,
#menu-drawer .menu-drawer__navigation-container {
    /* Empêche le contenu de "flotter" ou scroller horizontalement */
    overflow-x: hidden !important; 
}

#menu-drawer img, #menu-drawer a {
    /* Empêche l'effet de "glisser-déposer" d'une image sous le doigt */
    -webkit-user-drag: none !important;
    user-select: none !important;
}

/* =========================================================
    MASQUER LA GRILLE LORS DE L'OUVERTURE D'UN SOUS-MENU
    ========================================================= */



/* 2. Transition ultra-rapide pour synchroniser avec la fermeture */
.mobile-grid-container {
    /* On accélère la transition à 0.1s */
    transition: opacity 0.1s ease, visibility 0.1s ease;
}

/* AJOUT : Force la disparition immédiate quand le menu principal n'est plus "ouvert" */
details#Details-menu-drawer-container:not([open]) .mobile-grid-container {
    display: none !important;
    opacity: 0 !important;
}

.mobile-mega-grid-item .placeholder-svg { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background-color: #f4f4f4; }

/* =========================================================
    9. NOUVEAU QUADRILLAGE NIVEAU 2 & 3 (Menu Principal)
    ========================================================= */
.menu-drawer__grid-submenu {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Crée 2 colonnes égales */
    gap: 2rem 1.5rem !important; /* Espacement vertical (2rem) et horizontal (1.5rem) */
    padding: 1rem 1.5rem 3rem 1.5rem !important;
}

.menu-drawer__grid-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Titre de niveau 2 (ex: Boucles d'oreilles) - Similaire au Desktop */
.menu-drawer__grid-title {
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    color: #a89482 !important; /* Couleur beige typique de ton thème */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 1.2rem !important;
    text-decoration: none !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    display: block !important;
    width: 100%;
}

.menu-drawer__grid-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

.menu-drawer__grid-links li {
    margin-bottom: 0.8rem !important;
}

/* Liens de niveau 3 (ex: Créoles) */
.menu-drawer__grid-link {
    font-weight: 400 !important;
    font-size: 1.2rem !important;
    color: #333333 !important;
    text-transform: none !important;
    text-decoration: none !important;
    padding: 0 !important;
    display: block !important;
}

/* =========================================================
    10. CORRECTION DU SCROLL COUPE DANS LES SOUS-MENUS
    ========================================================= */
#menu-drawer .menu-drawer__inner-submenu {
    /* Ajoute un grand espace vide en bas pour pouvoir scroller jusqu'à la dernière image */
    padding-bottom: max(10rem, env(safe-area-inset-bottom) + 6rem) !important; 
    overflow-y: auto !important;
    height: 100% !important;
}

@media screen and (min-width: 990px) {
  /* Crée un pont invisible entre le lien du menu et le contenu déroulant */
  header-menu summary::after {
    content: "";
    position: absolute;
    bottom: -30px; /* Ajuste cette valeur selon l'espacement de ton header */
    left: 0;
    width: 100%;
    height: 30px;
    background: transparent;
    z-index: 1;
  }
}

/* =========================================================
   Ajustement de la HAUTEUR du Header principal (Mobile)
   ========================================================= */
@media screen and (max-width: 989px) {
    .header {
        /* 👇 Augmente ou diminue ces valeurs pour ajuster la hauteur 👇 */
        padding-top: 0px !important; 
        padding-bottom: 5px !important; 
    }
}