.mask{background: rgba(0,0,0,.74)}
.mask-alt{background: rgba(0, 0, 0, 0.3)}
.banner-gradient{background: linear-gradient(180deg, #3BA7FF 15.56%, #0056A6 77.58%);}
.bg-gradient-gray{background: linear-gradient(90deg, var(--gray-color), #fff);}

.shadow{box-shadow: 3px 4px 11px 2px rgba(0, 0, 0, 0.22);}
.shadow-alt{box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .1);}
.shadow-alt-2{box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .2);}

.font-galada{font-family: galada;}
.text-shadow{text-shadow: 0px 4px 4px rgba(0, 0, 0, .25);}
.text-shadow-white{text-shadow: 0px 0px 2px rgba(255, 255, 255, .75);}

.blur{filter: blur(2px)}
.transparent{opacity: 0.65}
.transparent-alt{opacity: 0.07}
.transparent-alt-2{opacity: 0.44}
.transparent-alt-3{opacity: 0.17}

.font-63{font-size: 3.28125vw}
.font-48{font-size: 2.5vw}
.font-43{font-size: 2.2395833vw}
.font-28{font-size: 1.4583333vw}
.font-25{font-size: 1.3020833vw}
.font-12{font-size: 0.625vw}
@media(max-width:768px){
    .font-28{font-size: 12pt}
    .font-12{font-size: 8pt}
}

.xright-half-alt{transform: translateX(-50%);}
.xleft-half-alt{transform: translateX(50%);}
.ytop-half-alt{transform: translateY(50%);}
.ybottom-half-alt{transform: translateY(-50%);}

#productsMenus{display: none;}
#productsMenus.opened{display: block; animation: show-alt 1s}

.os-slider-btn > i{
    min-width: var(--slide-dot-size);
    width: var(--slide-dot-size);
    height: var(--slide-dot-size);
    border: var(--2px) solid white
}
@media(max-width:768px){
    .os-slider-btn > i{
        min-width: 15px;
        width: 15px;
        height: 15px;
    }
}
#testimonies .os-slider-btn > i{border-color: var(--success-color)}
.os-slider-btn.active > i{background: transparent}

.product:not(.half-10){
    width: 11.875vw;
    min-width: 120px;
}
.product figure{height: 11.875vw; min-height: 150px}

.os-increment:active, .os-decrement:active{background-color: rgba(201, 201, 201,1);}
.os-increment:active *, .os-decrement:active *{transform: scale(.75);}
.addproduct:active{background-color: #0056A6;}
.addproduct img{transform: scale(1); transition: all .5s}
.addproduct:active img{transform: scale(.8)}

#basketCounter{
    width: 1.1458333vw;
    height: 1.1458333vw;
    font-size: .6770833vw;
}
@media(max-width:768px){
    #basketCounter{
        width: 20px;
        height: 20px;
        font-size: 8px;
    }
}
@keyframes animBasket{
	from{transform: rotate(15deg); transform-origin: 50% 0%;}
	50%{transform: rotate(-15deg); transform-origin: 50% 0%;}
	to{transform: rotate(0deg); transform-origin: 50% 0%;}
}

#basketIcon.animate{
    transform-origin: 50% 0%;
    animation: animBasket 1s;
}


@media(max-width:768px){
    #basket{
        width: calc(100% - var(--content-margin));
        height: calc(100vh - var(--header-height));
    }
    #basket > div{height: 100%;}
}

/* MODIFICATION : Réduction de la largeur du panier en desktop */
#basket {
    top: var(--header-height);
    width: 22vw; /* Réduit de 27.0729167vw à 22vw */
    min-width: 320px; /* Réduit de 350px à 320px */
    min-height: 450px;
    display: none;
}

/* OPTIONNEL : Ajustement des tailles de police si nécessaire */
@media(min-width: 769px){
    .font-12{font-size: 0.55vw} /* Légère réduction si le texte paraît trop grand */
}

@media(max-width: 768px){
    #basket{
        width: calc(100% - var(--content-margin));
        height: calc(100vh - var(--header-height));
    }
}
#basket.opened {display: block;}

/* Assurez-vous que le conteneur interne utilise 100% de cette hauteur */
#basket > div{
    max-height: calc(100vh - var(--header-height));
    height: 100%; /* S'assurer qu'il prend 100% du parent #basket */
    /* Assurez-vous d'avoir display: flex; flex-direction: column; si ce n'est pas dans vos classes de framework */
}
#caddy {
    max-height: 100%;
    overflow: auto;
}

#loginPopup, #signupPopup{display: none;}
#loginPopup.opened, #signupPopup.opened{display: block;}

.os-search::-webkit-input-placeholder{color: white; opacity: 1;}
.os-search::-moz-placeholder{color: white; opacity: 1;}
.os-search::-ms-input-placeholder{color: white; opacity: 1;}
.os-search::placeholder{color: white; opacity: 1;}

.yt-preview{width: 56.5625vw; height: 31.6145vw}
.flickr-frame, .youtube-frame, #article .slide-box{height: 31.6145vw;}
.video figure{height: 14.25vw}
.video i.fa{opacity: .65; transform: scale(1); transition: all .5s}
.video:hover i.fa{opacity: 1; transform: scale(1.05); }

.recipe figure{animation: rotateRecipe 30s infinite; transition-timing-function: ease-out;}
@keyframes rotateRecipe{
	from{transform: rotate(0deg); transform-origin: 50% 50%;}
	to{transform: rotate(360deg); transform-origin: 50% 50%;}
}

textarea{height: 12vw}
.cooform label{
    font-size: var(--h4-size);
    font-weight: 500;
    display: block;
    color: var(--gray-color-alt);
    margin-top: var(--10px);
    margin-bottom: var(--8px);
}

.cooform input:not(.fill),
.cooform textarea,
.cooform select{
    border-radius: var(--8px);
    background: unset;
    font-size: var(--h4-size);
    color: var(--success-color-alt);
    width: 100%;
    border: solid var(--3px) var(--success-color-alt);
    padding: var(--10px) var(--15px);
}
@media(max-width:768px){
    .cooform input:not(.fill),
    .cooform textarea,
    .cooform select{
        border-radius: var(--5px);
        border-width: 1px;
        padding: var(--7px) var(--15px);
    }

    /* Le filtre reste déroulant sur mobile */
    .content > .bg-white.htop {
        display: block;
    }
    
    /* Section Catégories - 2 par ligne avec détection automatique de longueur */
    #categories {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
 
    #tags {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    #tags > div {
        width: 50% !important;
        display: flex;
    }
}

.cooformAlt input:not(.fill),
.cooformAlt textarea,
.cooformAlt select{
    font-size: var(--p-size);
    border: var(--1px) solid var(--black-color-alt);
    width: 100%;
    background: none;
    border-radius: 0;
    padding: var(--5px) var(--15px);
    margin-top: var(--3px);
    margin-bottom: var(--10px);
}

.check-btn{
    display: inline-block;
    width: 40px;
    height: 16px;
    border-radius: 8px;
    background: #ccc;
    position: relative;
}
input[type='checkbox']:checked + .check-btn{background: rgba(59,167,255,.5);}

.check-btn::before{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gray-color);
    position: absolute;
    left: -2px;
    top: -2px;
    content: "";
    transition: all .3s;
}
input[type='checkbox']:checked + .check-btn::before{
    background: #3BA7FF; /* Bleu vif */
    left: 22px;
}




/* Ajoutez ces styles à la fin de votre fichier CSS */

@media(min-width: 769px) {
    /* Layout principal - Sidebar à gauche, produits à droite */
    .content > .bg-white.htop {
        display: flex;
        flex-direction: row;
        gap: 2vw;
        padding-left: 1vw;
        padding-right: 1vw;
    }
    
    /* Container du filtre (sidebar) */
    .content > .bg-white.htop > div:first-child {
        width: 25%;
        min-width: 50px;
        position: sticky;
        top: calc(var(--header-height) + 20px);
        align-self: flex-start;
        height: fit-content;
        max-height: calc(100vh - var(--header-height) - 40px);
        overflow-y: visible; /* Retirer le scroll */
    }

   
    
    /* Afficher le formulaire de filtre par défaut sur desktop */
    #filter.hide {
        display: block !important;
        padding: 20px;
        background: var(--gray-color);
       
      
    }
    
    /* Cacher le bouton "Filtre" sur desktop */
    .os-click.flex.row.space.middle.success.bold.upper.h2[data-target="#filter"] {
        display: none;
    }
    
    /* Container des produits */
    #products {
        width: 75%;
        flex-grow: 1;
        margin-top: 0 !important;
    }
    
    /* 5 produits par ligne */
    #products .product {
        width: calc(20% - 16px) !important;
       
    }
    
   
    
   
    
    
    
   /* Section Catégories - 2 par ligne avec détection automatique de longueur */
    #categories {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
       
    }
       #basket{
        width: calc(100% - var(--content-margin));
        height: calc(100vh - var(--header-height));
    }
    #basket > div{height: 100%;}
    
   #basketCounter{
        width: 20px;
        height: 20px;
        font-size: 8px;
    }
    

    #basketCounter{
    width: 1.1458333vw;
    height: 1.1458333vw;
    font-size: .6770833vw;
}
}


#tags {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

#tags > div {
    width: 50% !important;
    display: flex;
   
}



/* =========================================
   REGLES GLOBALES (Pour éviter le double header)
   ========================================= */

/* Par défaut (Desktop), on cache TOUS les éléments mobiles */
.mobile-only, 
.mobile-only-img, 
.mobile-menu-trigger, 
.mobile-user-icon {
    display: none !important;
}

/* On s'assure que les éléments desktop sont visibles */
.desktop-only, 
.desktop-only-img,
.desktop-auth {
    display: flex !important; /* ou block selon besoin */
}

/* Style du bouton "Nos catégories" desktop */
.os-click[data-target="#productsMenus"] {
    cursor: pointer;
    transition: all 0.3s ease;
}

.os-click[data-target="#productsMenus"]:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ==========================================================================
   1. RÈGLES GLOBALES (DESKTOP PAR DÉFAUT)
   ========================================================================== */

/* --- Nettoyage Desktop (Pour éviter les doublons) --- */
/* On cache strictement tout ce qui appartient au mobile */
.mobile-only, 
.mobile-only-img, 
.mobile-menu-trigger, 
.mobile-user-icon {
    display: none !important;
}

/* On affiche les éléments desktop */
.desktop-only, 
.desktop-only-img,
.desktop-auth {
    display: flex !important;
}

/* --- Fix Espacement Desktop (Panier collé) --- */
/* Ajoute de l'espace entre le bloc "Se connecter/S'inscrire" et le Panier */
.desktop-auth {
    margin-right: 25px; /* Espace confortable */
}





/* ==========================================================================
   VERSION MOBILE (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- VISIBILITÉ ÉLÉMENTS ------------------------------------------ */
    .desktop-only,
    .desktop-only-img,
    .desktop-auth {
        display: none !important;
    }

    .mobile-only,
    .mobile-only-img,
    .mobile-menu-trigger,
    .mobile-user-icon {
        display: flex !important;
    }

   

    /* Logo */
    .logo-link {
        flex: 0 0 auto;
        margin-right: 4px !important; /* un peu plus d'air qu'avant */
    }

    .logo-link img {
        height: 34px !important; /* légèrement plus petit pour harmonie */
    }

    /* --- ZONE RECHERCHE ----------------------------------------------- */
    .search-group-container {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 !important;
        margin-right: 6px !important; /* espace avant icônes droite */
    }

    .search-container {
        background: transparent !important;
        height: 34px !important;
        margin: 0 4px 0 0 !important;
        position: relative;
        display: flex;
        align-items: stretch;
    }

    /* Burger menu */
    .mobile-menu-trigger {
        width: 34px;
        min-width: 34px;
        height: 100%;
        background: #fff !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        padding: 0;
    }

    .mobile-menu-trigger i {
        color: #000 !important;
        font-size: 18px;
    }

    /* Input recherche */
    #search {
        flex: 1 1 auto;
        min-width: 0;
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        background: transparent !important;
        padding: 0 6px !important;
        color: white !important;
        font-size: 14px !important;
        outline: none;
    }

    #search::placeholder {
        color: rgba(255, 255, 255, 0.75);
    }

    /* Bouton loupe (priorité très haute) */
    .os-search-btn {
        z-index: 105 !important;
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        margin: 1px !important;
        background-color: var(--warning-color) !important;
        border-radius: 4px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        pointer-events: auto !important;
    }

    /* --- ZONE ICÔNES DROITE ------------------------------------------- */
    .icons-group {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px !important;
        position: relative;
        z-index: 100 !important;
    }

    /* Icône utilisateur (priorité > panier) */
    .mobile-user-icon {
        z-index: 104 !important;
        position: relative;
        width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        cursor: pointer;
    }

    .mobile-user-icon i {
        font-size: 26px !important;
        color: white !important;
    }

    /* Panier (zone cliquable réduite) */
    .cart-container {
        z-index: 103 !important;
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cart-container > span.os-click {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
    }

    .cart-container figure {
        width: 28px !important;
        height: 28px !important;
    }

    #basketCounter {
        width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
        top: -4px;
        right: -4px;
    }

    /* --- POPUP PANIER ------------------------------------------------- */
    #basket {
        position: fixed !important;
        inset: var(--header-height) 0 0 0 !important;
        width: 100% !important;
        height: calc(100% - var(--header-height)) !important;
        z-index: 9999 !important;          /* très haut, mais après ouverture */
       
        display: none !important;
        pointer-events: none !important;   /* ← important : empêche les clics fantômes */
    }

    #basket.opened,
    #basket.show {
        display: block !important;
        pointer-events: auto !important;
    }

    #basket > div {
        
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        display: flex;
        flex-direction: column;
        pointer-events: auto !important;
    }

    #caddy {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- CORRECTION CONNEXION (popup) -------------------------------- */
    #loginPopup.anim-show {
        display: none !important;
    }

    #loginPopup.opened {
        display: block !important;
    }
}

@media (max-width: 768px) {

    /* On force la priorité absolue pour éviter tout chevauchement */
    .os-search-btn,
    .mobile-user-icon,
    .mobile-user-icon *,
    .os-search-btn * {
        z-index: 9999 !important;
        pointer-events: auto !important;
        position: relative;
    }

    /* Le panier et son déclencheur en dessous */
    .cart-container,
    .cart-container > span.os-click {
        z-index: 9000 !important;
    }

    /* Le popup panier reste très haut MAIS n'interfère pas avant clic */
    #basket {
        pointer-events: none !important;
    }
    #basket.opened,
    #basket.show {
        pointer-events: auto !important;
    }
}


/* =========================================
   1. STYLE DESKTOP (Fix du texte fouilli)
   ========================================= */

#categories-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;       
    justify-content: center;
}

.category-card {
    display: flex;         /* On passe la carte en flexbox colonne */
    flex-direction: column;
    width: 8.2vw;          /* Largeur d'origine (desktop) */
    max-width: 160px;
    margin-bottom: 15px;   
    /* On s'assure que le contenu qui dépasse est caché */
    overflow: hidden;      
}

/* Image Desktop */
.category-card icon {
    display: block;
    position: relative;
    width: 100%;
    height: 8vw;           /* Hauteur fixe pour l'image */
    min-height: 80px;
}

/* TEXTE Desktop : C'est ici qu'on corrige le "fouilli" */
.category-card > div {
    /* On annule le h100 qui posait problème */
    height: auto !important; 
    flex: 1;               /* Prend l'espace restant proprement */
    display: flex;
    align-items: center;   /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    padding: 5px 2px;      /* Un peu d'espace */
}

/* On ajuste la taille du texte pour qu'il rentre */
.category-card span {
    line-height: 1.2;
    display: block;
}

/* =========================================
   2. STYLE MOBILE (Jusqu'à 768px)
   ========================================= */

@media (max-width: 768px) {
    
    /* --- LE CONTENEUR SLIDER (Correction du scroll bloqué) --- */
    #categories-container {
        display: flex;
        flex-wrap: nowrap !important;       
        overflow-x: auto !important;
        justify-content: flex-start !important; /* Force le début à gauche */
        
        /* NOUVELLE METHODE pour "libérer les côtés" sans casser le scroll */
        width: 100vw;  /* Largeur de l'écran */
        
        /* Cette formule magique annule les marges du parent pour toucher les bords */
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        
        /* Espace interne pour que le premier et dernier item ne collent pas trop */
        padding-left: 15px; 
        padding-right: 15px; 
        
        padding-bottom: 20px; 
        
        /* Fluidité */
        -webkit-overflow-scrolling: touch; 
        -ms-overflow-style: none;  
        scrollbar-width: none;  
    }
    
    /* Cache la barre de scroll */
    #categories-container::-webkit-scrollbar {
        display: none; 
    }

    /* --- IMPORTANT : CACHER LE SAUT DE LIGNE --- */
    /* Il y a un <br> dans votre HTML après le 10ème item qui casse le slider */
    #categories-container br {
        display: none;
    }

    /* ... (Gardez le reste du code pour .category-card comme avant) ... */
     /* --- LES CARTES (Plus grandes) --- */
    .category-card {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;         
        
        /* CHANGEMENT ICI : On passe de 28vw à 40vw */
        width: 40vw !important; 
        /* On augmente la limite max pour les grands téléphones */
        max-width: 180px;       
        
        margin-right: 15px;     
        margin-bottom: 0px;     
        
        background-color: var(--gray-color) !important; 
        border-radius: 10px;    
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
        overflow: hidden; 
    }

    /* --- L'IMAGE (Plus haute pour correspondre à la largeur) --- */
    .category-card icon {
        width: 100%;
        
        /* CHANGEMENT ICI : On passe de 20vw à 30vw */
        height: 30vw;           
        min-height: 110px; /* On augmente la taille minimale */
        
        background: #fff;
        display: block;
        border-radius: 0 !important;
    }
    
    /* --- LE TEXTE --- */
    .category-card > div {
        height: auto !important;
        min-height: 50px; /* Un peu plus d'espace vertical */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
    }

    .category-card span {
        font-size: 13px; /* Texte légèrement plus grand aussi */
        line-height: 1.2;
        white-space: normal; 
        text-align: center;
        font-weight: 500; /* Un peu plus gras pour la lisibilité */
    }
}



/* ==========================================================================
   CORRECTIFS FINAUX (Header, Recherche, Panier)
   ========================================================================== */

/* ----------------------------------------------------------
   1. FIX DESKTOP (Écrans > 768px)
   ---------------------------------------------------------- */
@media (min-width: 769px) {
    
    /* Corrige la barre de recherche "trop longue" */
    .search-container {
        width: 100% !important;
        max-width: 450px !important; /* Limite la largeur pour que la loupe reste à sa place */
    }

    /* Force l'input à remplir l'espace disponible dans la barre limitée */
    #search {
        flex: 1 !important;
        width: auto !important;
    }

    /* Décolle le bouton Panier du bouton S'inscrire */
    .desktop-auth {
        margin-right: 35px !important; /* Espace ajouté ici */
    }
}

/* ----------------------------------------------------------
   2. FIX MOBILE (Écrans <= 768px)
   ---------------------------------------------------------- */
@media (max-width: 768px) {

    /* --- LOGO & RECHERCHE --- */
    
    /* Réduit la marge du logo pour donner de la place à la recherche */
    .logo-link {
        margin-right: 5px !important;
    }

    /* Le groupe de recherche prend TOUT l'espace disponible */
    .search-group-container {
        flex: 1 !important; /* Indispensable */
        padding: 0 !important;
        margin-right: 8px !important; /* Petit espace avant le bonhomme */
        min-width: 0 !important; /* Permet au flex de réduire si besoin */
    }

    /* La barre blanche */
    .search-container {
        width: 150px !important;
        margin: 0 !important;
    }

    /* L'INPUT : C'est ici qu'on l'élargit au maximum */
    #search {
        width: 35px !important; /* Astuce CSS : démarre à 0... */
        flex-grow: 1 !important; /* ... et grandit pour remplir tout le vide */
        min-width: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* --- PANIER & ICONES --- */

    /* Groupe icônes droite */
    .icons-group {
        gap: 10px !important;
        padding-left: 0 !important;
    }

    /* STABILITÉ DU PANIER (Empêche la fermeture auto) */
    #basket {
        position: fixed !important;
        top: 60px !important; /* Hauteur du header */
        left: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 60px) !important;
        
        /* Z-INDEX MAXIMUM : Passe au-dessus de tout le reste */
        z-index: 2147483647 !important; 
        
        background: rgba(0,0,0,0.5) !important; /* Fond sombre */
        display: none;
    }

    /* Quand il est ouvert */
    #basket.opened {
        display: block !important;
    }

    /* La boite blanche du panier */
    #basket > div {
        background: #fff !important;
        width: 100% !important;
        height: 100% !important;
        display: flex;
        flex-direction: column;
        pointer-events: auto !important; /* Capture les clics pour éviter la fermeture */
    }
    
    
}


/* ==========================================================================
   CORRECTION DES HAUTEURS EN DESKTOP
   ========================================================================== */

@media (min-width: 769px) {
    /* ----------------------------------------------------------
       FIX HAUTEUR UNIFORME POUR TOUS LES ÉLÉMENTS DU HEADER
       ---------------------------------------------------------- */
   
    
    .hheight {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }
    
    /* 2. LOGO - Même hauteur que le header */
    .logo-link,
    .logo-link figure {
        height: 100% !important;
        display: flex;
        align-items: center;
    }
    
    .desktop-only-img {
        height: 40px !important;
        width: auto !important;
        max-height: 100% !important;
        object-fit: contain;
    }
    
    /* 3. BOUTON "NOS CATÉGORIES" - Même hauteur */
    .os-click[data-target="#productsMenus"] {
        height: 40px !important;
    }
    
    /* 4. BARRE DE RECHERCHE - Même hauteur */
    .search-container {
        height: 40px !important;
    }
    
    /* Input recherche */
    #search {
        height: 100% !important;
        padding: 0 15px !important;
        font-size: 14px !important;
    }
    
    /* Bouton loupe */
    .os-search-btn {
        height: 34px !important;
        width: 34px !important;
        margin: 3px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 5. BOUTONS AUTHENTIFICATION - Même hauteur */
    .desktop-auth {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        margin-right: 25px !important;
    }
    
    .desktop-auth a {
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 25px !important;
        font-size: 14px !important;
        border-radius: 4px !important;
    }
    
    /* 6. PANIER - Même hauteur */
    .cart-container {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .cart-container figure {
        width: 30px !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #basketCounter {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
    }
  
    
    
    
    /* =========================================
       CORRECTION : EXCLURE LE MODAL DES RÈGLES DE HAUTEUR
       ========================================= */
    /* Exclure spécifiquement le modal panier des règles de hauteur */
    #basket,
    #basket *,
    #basket .hheight,
    #basket .relative,
    #basket > div,
    #basket > div > * {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
}





/* ==========================================================================
   OPTIMISATION MOBILE (Garder les réglages existants)
   ========================================================================== */



/* ==========================================================================
   RÈGLES SUPPLÉMENTAIRES POUR L'ALIGNEMENT
   ========================================================================== */



/* Logo */
.logo-link {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Zone de recherche */
.search-group-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Zone icônes droite */
.icons-group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
}


/* =========================================
   MENU CATÉGORIES MOBILE - 2 COLONNES AVEC POINTS
   ========================================= */

@media (max-width: 768px) {
    /* Conteneur principal du menu */
    #productsMenus {
        position: fixed !important;
        top: 60px !important; /* Ajustez selon la hauteur de votre header */
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 60px) !important;
        background: #fff !important;
        z-index: 9999 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-y: auto !important;
        display: none !important;
    }
    
    #productsMenus.opened {
        display: block !important;
    }
    
    /* Conteneur interne - Structure en 2 colonnes */
    #productsMenus > div {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Deux colonnes égales */
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        box-shadow: none !important;
        margin: 0 !important;
        background: transparent !important;
        align-items: start !important;
        justify-content: start !important;
    }
    
    /* Style des liens catégories */
    #productsMenus a {
        display: flex !important;
        align-items: center !important;
        padding: 12px 8px !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        text-decoration: none !important;
        min-height: 50px;
        width: 100% !important;
        border-bottom: 1px solid #f0f0f0 !important;
        transition: all 0.2s ease !important;
    }
    
    /* Colonne gauche (première moitié des catégories) */
    #productsMenus a:nth-child(-n+10) {
        grid-column: 1 !important;
        border-right: 1px solid #f0f0f0 !important;
    }
    
    /* Colonne droite (deuxième moitié des catégories) */
    #productsMenus a:nth-child(n+11) {
        grid-column: 2 !important;
    }
    
    /* Cacher les icônes/images d'origine */
    #productsMenus a icon,
    #productsMenus a icon i,
    #productsMenus a img {
        display: none !important;
    }
    
    /* Points numérotés */
    #productsMenus a::before {
        content: "" !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 24px !important;
        width: 24px !important;
        height: 24px !important;
        background: #3BA7FF !important; /* Bleu vif */
        color: white !important;
        border-radius: 50% !important;
        font-size: 11px !important;
        font-weight: bold !important;
        margin-right: 10px !important;
        flex-shrink: 0 !important;
        font-family: Arial, sans-serif !important;
    }
    
    /* Numérotation automatique - Colonne gauche (1-10) */
    #productsMenus a:nth-child(1)::before { content: "1" !important; background: #3BA7FF !important; }
    #productsMenus a:nth-child(2)::before { content: "2" !important; background: #2980b9 !important; }
    #productsMenus a:nth-child(3)::before { content: "3" !important; background: #0056A6 !important; }
    #productsMenus a:nth-child(4)::before { content: "4" !important; background: #3498db !important; }
    #productsMenus a:nth-child(5)::before { content: "5" !important; background: #1f618d !important; }
    #productsMenus a:nth-child(6)::before { content: "6" !important; background: #3BA7FF !important; }
    #productsMenus a:nth-child(7)::before { content: "7" !important; background: #2980b9 !important; }
    #productsMenus a:nth-child(8)::before { content: "8" !important; background: #0056A6 !important; }
    #productsMenus a:nth-child(9)::before { content: "9" !important; background: #3498db !important; }
    #productsMenus a:nth-child(10)::before { content: "10" !important; background: #1f618d !important; }
    
    /* Numérotation automatique - Colonne droite (11-20) */
    #productsMenus a:nth-child(11)::before { content: "11" !important; background: #3BA7FF !important; }
    #productsMenus a:nth-child(12)::before { content: "12" !important; background: #2980b9 !important; }
    #productsMenus a:nth-child(13)::before { content: "13" !important; background: #0056A6 !important; }
    #productsMenus a:nth-child(14)::before { content: "14" !important; background: #3498db !important; }
    #productsMenus a:nth-child(15)::before { content: "15" !important; background: #1f618d !important; }
    #productsMenus a:nth-child(16)::before { content: "16" !important; background: #3BA7FF !important; }
    #productsMenus a:nth-child(17)::before { content: "17" !important; background: #2980b9 !important; }
    #productsMenus a:nth-child(18)::before { content: "18" !important; background: #0056A6 !important; }
    #productsMenus a:nth-child(19)::before { content: "19" !important; background: #3498db !important; }
    #productsMenus a:nth-child(20)::before { content: "20" !important; background: #1f618d !important; }
    
    /* Style du texte des catégories */
    #productsMenus a span {
        font-size: 13px !important;
        color: #2c3e50 !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        flex: 1 !important;
    }
    
    /* Effet au survol */
    #productsMenus a:hover {
        background-color: #f8f9fa !important;
        padding-left: 12px !important;
    }
    
    #productsMenus a:hover::before {
        transform: scale(1.1);
        transition: transform 0.2s ease;
    }
}
/* =========================================
   ANIMATION D'OUVERTURE
   ========================================= */

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

@media (max-width: 768px) {
    #productsMenus.opened a {
        animation: fadeInUp 0.3s ease forwards;
        opacity: 0;
    }
    
    /* Délai progressif pour l'animation */
    #productsMenus a:nth-child(1) { animation-delay: 0.05s; }
    #productsMenus a:nth-child(2) { animation-delay: 0.1s; }
    #productsMenus a:nth-child(3) { animation-delay: 0.15s; }
    #productsMenus a:nth-child(4) { animation-delay: 0.2s; }
    #productsMenus a:nth-child(5) { animation-delay: 0.25s; }
    #productsMenus a:nth-child(6) { animation-delay: 0.3s; }
    #productsMenus a:nth-child(7) { animation-delay: 0.35s; }
    #productsMenus a:nth-child(8) { animation-delay: 0.4s; }
    #productsMenus a:nth-child(9) { animation-delay: 0.45s; }
    #productsMenus a:nth-child(10) { animation-delay: 0.5s; }
    #productsMenus a:nth-child(11) { animation-delay: 0.55s; }
    #productsMenus a:nth-child(12) { animation-delay: 0.6s; }
    #productsMenus a:nth-child(13) { animation-delay: 0.65s; }
    #productsMenus a:nth-child(14) { animation-delay: 0.7s; }
    #productsMenus a:nth-child(15) { animation-delay: 0.75s; }
    #productsMenus a:nth-child(16) { animation-delay: 0.8s; }
    #productsMenus a:nth-child(17) { animation-delay: 0.85s; }
    #productsMenus a:nth-child(18) { animation-delay: 0.9s; }
    #productsMenus a:nth-child(19) { animation-delay: 0.95s; }
    #productsMenus a:nth-child(20) { animation-delay: 1s; }
}

/* =========================================
   RÈGLES DE SÛRETÉ
   ========================================= */

/* S'assurer que les anciens styles sont écrasés en mobile */
@media (max-width: 768px) {
    #productsMenus a.scale-hover,
    #productsMenus a.hoverflow,
    #productsMenus a.transition,
    #productsMenus a.bg-gray,
    #productsMenus a.middle,
    #productsMenus a.hz-10,
    #productsMenus a.vt-15,
    #productsMenus a.radius-40 {
        all: unset !important;
        display: flex !important;
        align-items: center !important;
        padding: 12px 8px !important;
        width: 100% !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    /* Cacher absolument tous les éléments icon */
    #productsMenus icon,
    #productsMenus .icon,
    #productsMenus i.fill,
    #productsMenus img.contain {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}


/* ==========================================================================
   CORRECTIONS SPÉCIFIQUES POUR LES PRODUITS
   ========================================================================== */

/* DESKTOP - Correction taille icônes */
@media (min-width: 769px) {
    #products .product > div:last-child > div {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: nowrap;
    }
    
    .os-increment,
    .os-decrement {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .quantity {
        width: 50px !important;
        height: 32px !important;
        font-size: 14px;
        padding: 0 5px;
    }
    
    .addproduct {
        width: 40px !important;
        min-width: 40px !important;
        height: 32px !important;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .addproduct i.fill {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .addproduct img {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain;
    }
}

 @media (max-width: 768px) {
    /* =========================================
       FOOTER (bg-success-alt) - Mobile
       ========================================= */

    /* Conteneur principal */
    .bg-success-alt.gpadding.vt-60-in {
        padding-top: 25px !important; /* Réduire vt-60-in */
        padding-bottom: 25px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        text-align: center;
    }
    
    /* Logo */
    .bg-success-alt figure.hheight {
        height: 80px !important; /* Taille fixe pour le logo */
        margin-top: 10px !important; /* Réduire vt-15-in */
    }
    
    /* Texte de copyright */
    .bg-success-alt p.white.medium.p {
        font-size: 12px !important;
    }

    /* Icônes Réseaux Sociaux */
    .bg-success-alt .flex.row.middle.white.h2.top-20 {
        font-size: 20px !important; /* Réduire la taille des icônes (h2 -> 20px) */
        
        justify-content: center !important;
    }
   
    /* Conteneurs des listes de liens */
    .bg-success-alt .flex.col.center {
        width: 100% !important;
        margin-top: 10px;
    }

    /* Listes de liens (Blog, Vidéos, etc.) */
    .bg-success-alt ul.list {
        /* Permettre l'enveloppement sur plusieurs lignes */
        flex-wrap: wrap !important; 
        justify-content: center !important;
        margin-top: 15px !important; /* Réduire top-40 */
        margin-bottom: 15px;
        padding: 0 5px;
    }
    
    /* Liens individuels */
    .bg-success-alt ul.list li {
        display: flex;
        align-items: center;
        margin-bottom: 5px; /* Pour gérer l'espacement vertical lors de l'enveloppement */
        flex-shrink: 0;
    }

    /* Texte des liens */
    .bg-success-alt ul.list a.iblock {
        font-size: 14px !important; /* Réduire la taille (h4 -> 14px) */
        padding: 0 8px !important; /* Réduire hz-15-in */
        line-height: 1.2;
    }
    
    /* Points séparateurs */
    .bg-success-alt ul.list i.iblock.circle {
        margin: 0 4px; /* Réduire l'espace autour du point */
    }
}

    /* Contenu du slider */
    #testimonies .fill.hoverflow.vt-40-in {
        /* Suppression de la marge verticale desktop (vt-40-in) */
        padding-top: 15px !important;
        padding-bottom: 0 !important;
    }

    /* Texte du témoignage (P) */
    #testimonies p.medium.h5 {
        font-size: 14px !important;
        line-height: 1.5 !important;
        text-align: left !important;
        padding-right: 15px; /* Pour que le texte n'aille pas sous l'apostrophe */
    }

    /* Bloc Auteur */
    #testimonies .flex.col.top-30 {
        margin-top: 15px !important;
        align-items: flex-start !important; /* Aligner à gauche */
    }
    #testimonies h3.upper.h3 {
        font-size: 16px !important;
        line-height: 1.2;
    }
    #testimonies .flex.col.top-30 span {
        font-size: 13px !important;
    }

    /* Points de navigation */
    #testimonies .w100.bottom.left {
        padding-top: 15px !important; /* Remplace vt-40-in */
        padding-bottom: 0 !important;
    }
    /* S'assurer que les points sont au-dessus de tout */
    #testimonies .w100.bottom.left {
        z-index: 10;
    }
    
    #testimonies .os-slider-btn > i {
        width: 10px !important;
        height: 10px !important;
    }
    
    /* =========================================
   NETTOYAGE THÈME ANANAS – mobile (2).css
   ========================================= */

/* Panier mobile – fond et accents */
@media (max-width: 768px) {
    #basket {
        background: #FFF8E1 !important; /* Jaune très clair ananas pour le fond */
    }
    
    #basket .bg-success-alt,
    #basket .bg-success {
        background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
    }
    
    #basket .bg-warning {
        background-color: #FFEB3B !important; /* Jaune vif pour les totaux */
    }
}

/* Boutons + et - quantité en mobile */
.os-increment, .os-decrement {
    background-color: #FFF !important;
    color: white !important;
}

.os-increment:active, .os-decrement:active {
    background-color: #FFF !important;
}

/* Bouton Ajouter au panier (addproduct) */
.addproduct {
    background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
}

.addproduct:active {
    background: #FF8C00 !important;
}

/* Input quantité */
.quantity {
    background: #FFFACD !important; /* Jaune cassé très clair */
    border: 1px solid #FFB733 !important;
}

/* Tous les .bg-success / .bg-success-alt / .bg-error en mobile */
.bg-success,
.bg-success-alt,
.bg-error,
.banner-gradient {
    background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
}

/* Texte success (prix, titres, etc.) */
.success,
.bold.success,
span.success {
    color: #FFB733 !important;
}

/* Checkboxes et bordures success */
input[type='checkbox']:checked + .check-btn {
    background: rgba(255, 183, 51, 0.5) !important;
}

input[type='checkbox']:checked + .check-btn::before {
    background: #FFB733 !important;
}

/* Panier counter (le petit cercle) */
#basketCounter {
    background: #FF8C00 !important;
    color: white !important;
}

/* Sécurité : icônes et liens */
.mobile-user-icon i,
.cart-container figure img {
    filter: brightness(0) invert(1) hue-rotate(30deg) saturate(5) !important; /* rend les icônes blanches/orange */
}