/** Shopify CDN: Minification failed

Line 33:22 Unexpected "{"
Line 33:31 Expected ":"
Line 33:38 Unexpected "{"
Line 38:19 Unexpected "{"
Line 38:28 Expected ":"
Line 38:67 Unexpected "{"
Line 38:76 Expected ":"
Line 38:83 Unexpected "{"

**/
/* Le conteneur principal du popup */
#filtrePopup {
  display: none; /* Cache par défaut (géré par JavaScript) */
  position: fixed; /* Reste en place même en défilant */
  z-index: 1000; /* Assure qu'il est au-dessus de tout */
  left: 0;
  top: 0;
  width: 100%; /* Pleine largeur */
  height: 100%; /* Pleine hauteur */
  overflow: auto; /* Permet de défiler si le contenu est trop grand */
  background-color: rgba(0,0,0,0.7); /* Fond semi-transparent noir */
}
/* Masquer les boutons de paiement express (Vérifier/Shop Pay) dans le tiroir de panier */
.drawer__footer .additional-checkout-buttons {
    display: none !important;
}
cart-drawer pickeasy-app-widget, #CartDrawer-Checkout{
    display:none !important;
}
/* Masquer le champ de spécification par défaut */
#slicing-specs-field-{{ section.id }} {
    display: none;
}

/* Afficher le champ lorsque la case à cocher PRÉCÉDENTE est cochée */
#slicing-checkbox-{{ section.id }}:checked ~ #slicing-specs-field-{{ section.id }} {
    display: block !important;
}
variant-selects .form__label .form__label-value.plaque {
    display:none;
}
/* Le contenu réel du filtre (la boîte blanche) */
#filtrePopup .modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% du haut et centré horizontalement */
  padding: 40px;
  border: 1px solid #888;
  width: 80%; /* Largeur de la modale */
  max-width: 600px; /* Limite maximale pour les grands écrans */
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}

#filtrePopup .modal-content h3{
    margin-bottom:20px;
}
#filtrePopup .modal-content .filtre-option{
    display:inline-block;
    margin-bottom:10px;
}
#formulaireFiltreEmplacement input[type="radio"] {
    accent-color: #000000; 
    outline: none !important; 
    box-shadow: none !important;
    width: 1.1em;
    height: 1.1em;
}
#formulaireFiltreEmplacement input[type="radio"] {
    border: 1px solid #CCCCCC; /* Bords gris clair au repos */
    /* OU */
    border: none !important; /* Si vous voulez retirer la bordure au repos */
}

#formulaireFiltreEmplacement .btn-appliquer{
    background-color: rgb(208,168,99); 
    border-radius: 4px;
    font-size: 1.4rem;
    text-decoration:none;
    color: var(--color-foreground);
}
#formulaireFiltreEmplacement .btn-fermer{
    text-decoration:underline;
}


/* Animation simple pour l'apparition */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

/* Style des boutons pour plus de clarté */
#filtrePopup button {
    margin-top: 15px;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

.bouton-texte-succursale {
    /* Établir une base d'affichage pour le flux d'icônes */
    display: inline-flex !important; 
    align-items: center !important;
    max-width: none !important; 
    max-height: none !important;
    width: auto !important;
    height: auto !important;
    
    
    /* Marge entre le bouton et les icônes de recherche/compte */
    margin-inline-end: 10px; 
    
    /* Ajouter un espace intérieur pour qu'il ressemble à un bouton */
    padding: 8px 12px;
    
    /* Pour s'assurer qu'il ne s'écrase pas */
    flex-shrink: 0; 

    /* Styles visuels (optionnels) */
    background-color: rgb(208,168,99); /* Exemple de fond pour le différencier */
    border-radius: 4px;
    font-size: 1.4rem;
    text-decoration:none;
    color: var(--color-foreground); /* Assurer une couleur de texte lisible */
}
.header__icons {
    /* IMPORTANT : Forcer le conteneur à utiliser Flexbox et à gérer l'espace */
    display: flex !important;
    /* Aligner tous les éléments sur une ligne */
    align-items: center; 
    /* Permettre aux éléments de se distribuer et de gérer l'espace de manière flexible */
    justify-content: flex-end; 
    
}

.icon-with-text__item .inline-richtext{
    line-height:1.2 !important;
    
}

/* ================================================================= */
/* CONTRÔLE DE LA VISIBILITÉ DU BOUTON D'OUVERTURE (MOBILE/DESKTOP) */
/* ================================================================= */

/* ------------------------------------------------ */
/* RÈGLES DESKTOP (> 768px) */
/* ------------------------------------------------ */

/* Masquer la version FOOTER/MOBILE par défaut (Desktop First) */
.bouton-ouverture-mobile {
    display: none !important;
}

/* ------------------------------------------------ */
/* RÈGLES MOBILE (≤ 768px) */
/* ------------------------------------------------ */

@media screen and (max-width: 768px) {
    
    /* 1. MASQUER LA VERSION HEADER/DESKTOP SUR MOBILE */
    .bouton-ouverture-desktop {
        display: none !important;
    }

    /* 2. AFFICHER ET CENTRER LA VERSION FOOTER/MOBILE */
    .bouton-ouverture-mobile {
        /* On annule le 'display: none' par défaut */
        display: block !important; 
        
        /* Styles de centrage pour le footer */
        width: 90%; 
        max-width: 400px; 
        margin: 20px auto; 
        text-align: center;
        
        /* Assurez-vous que le bouton est au-dessus des autres éléments */
        z-index: 10;
    }

    /* Optionnel : S'assurer que le conteneur du bouton centre bien */
    .footer-action-mobile-wrapper {
        justify-content: center;
        padding: 0 20px;
    }
}


/* ================================================================= */
/* CONTRÔLE DE LA VISIBILITÉ DU BANDEAU INDICATEUR (Bonus UX) */
/* ================================================================= */

/* Nous réintroduisons ici la logique du bandeau indicateur pour l'UX mobile */

/* Desktop: Le bandeau dans le Footer est masqué */
#filtreActifMessage-footer {
    display: none !important;
}

/* Mobile: On inverse */
@media screen and (max-width: 768px) {
   /* 1. MASQUER LA VERSION HEADER/DESKTOP SUR MOBILE */
    
    /* Cibler la combinaison du conteneur parent (header__icons) et notre classe */
    /* Ceci augmente la priorité pour surpasser les règles génériques du thème. */
    .header__icons .bouton-ouverture-desktop {
        display: none !important;
    }
    
    /* Cacher le bouton s'il a aussi la classe header__icon (par précaution) */
    .header__icon.bouton-ouverture-desktop {
        display: none !important;
    }


    /* 2. AFFICHER ET CENTRER LA VERSION FOOTER/MOBILE */
    /* Cette partie ne devrait pas changer */
    .bouton-ouverture-mobile {
        display: block !important; 
        width: 90%; 
        max-width: 400px;
        margin: 20px auto; 
        text-align: center;
        z-index: 10;
    }
    
    /* S'assurer que les deux conteneurs du bandeau indicateur ne se chevauchent pas */
    #filtreActifMessage-header {
        display: none !important;
    }
    #filtreActifMessage-footer {
        display: block !important;
    }
}
/* ================================================================= */
/* MASQUER LA GALERIE PARALLAXE SUR MOBILE (OPTIMISATION UX) */
/* ================================================================= */

/* Cibler tous les écrans jusqu'à une largeur maximale de 768px */
@media screen and (max-width: 768px) {
    
    /* 1. Cible le conteneur principal de la galerie */
    /* Le parallax-gallery contient toutes les images en mouvement */
    .parallax-gallery {
        display: none !important;
        
        /* Vous pouvez aussi cibler le conteneur de la section entière si l'élément .parallax-gallery est difficile à masquer seul */
    }

    /* Optionnel : Si l'élément parallax-gallery est un Custom Element, 
       cibler ses enfants si la règle ci-dessus ne suffit pas. */
    .parallax-gallery .parallax-gallery__container {
        display: none !important;
    }
}
/* --- ÉCRASSER LA HAUTEUR DU CARROUSEL SUR MOBILE --- */

@media screen and (max-width: 768px) {
    
    /* Cible le conteneur du carrousel/slideshow et applique la hauteur.
       Ceci va écraser les styles en ligne (inline styles) ou les calculs JS.
    */
    .splide.slideshow, 
    .slideshow-nested.splide {
        /* Nous utilisons la valeur désirée directement au lieu de la variable */
        height: 450px !important; 
    }

    /* Optionnel : Si l'intérieur du slider doit aussi être forcé */
    .splide__track {
        height: 450px !important;
    }
}