/** Shopify CDN: Minification failed

Line 174:16 Expected ")" to end URL token
Line 181:16 Expected ")" to end URL token

**/
/* --- Styles pour forcer la section personnalisée à être fixe --- */

/* Applique la position fixe au conteneur principal de ta section personnalisée */
/* Tu peux lui donner un ID unique pour le cibler plus précisément si ce n'est pas déjà fait */
/* Exemple : <div id="top-fixed-bar" style="..."> */
#top-fixed-bar { /* Remplace #top-fixed-bar par l'ID de ton div principal si tu lui en as donné un */
    position: fixed !important; /* Force la position fixe */
    top: 0 !important;          /* Colle en haut */
    left: 0 !important;         /* Colle à gauche */
    width: 100% !important;     /* Prend toute la largeur */
    z-index: 99999 !important;  /* Assure que l'élément reste au-dessus de tout */
    background-color: #0a2342 !important; /* Assure que la couleur de fond est bien appliquée */
}

/* --- AJOUT IMPORTANT : Compensation pour le contenu du dessous --- */

/* Mesure la hauteur exacte de ta section fixée. */
/* Tu peux utiliser l'outil d'inspection de ton navigateur pour la mesurer. */
/* Remplace 40px par cette hauteur réelle. */
body {
    padding-top: 95px !important; /* Pousse tout le contenu du body vers le bas */
}

/* --- FIXATION PERMANENTE DU HEADER PRINCIPAL --- */
/* Cible le conteneur principal de ton en-tête Shopify */
/* Mesure la hauteur exacte de ta section personnalisée (#top-fixed-bar). */
/* Remplace "HAUTEUR_BARRE_PERSO_EN_PX" par cette valeur (ex: 40px) */
.header-wrapper,
.section-header {
    position: fixed !important; /* FORCE le header à être fixe en permanence */
    top: 40px !important; /* Positionne-le juste en dessous de ta barre personnalisée */
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important; /* Un z-index juste en dessous de ta barre personnalisée */
    background-color: #0a2342 !important; /* Assure un fond plein pour ne pas voir à travers */
    
    /* DÉSACTIVE LES COMPORTEMENTS STICKY/TRANSITION DU THÈME */
    transition: none !important; 
    transform: none !important; /* Empêche les transformations de défilement du thème */
}


/* --- Global Custom Styles for the Theme --- */

/* --- 1. SLIDESHOW ARROWS --- */
/* Masquer les flèches du diaporama (arrows) */
.slideshow__arrow,
.slider-button.slider-button--prev,
.slider-button.slider-button--next {
    display: none !important;
}

/* Optionnel: Si les contrôles inférieurs (points/nombres) contiennent aussi des flèches que tu veux masquer,
   mais tu veux garder les points/nombres, il faudrait cibler plus précisément si elles ont une classe spécifique */
.slideshow__controls .slider-button {
    display: none !important;
}

/* --- 2. HEADER - DESKTOP ALIGNMENT & MENU-BUTTON HIDDEN --- */
/* Styles pour écrans larges (ordinateurs) uniquement */
@media screen and (min-width: 990px) {
    .header--middle-left {
        display: flex !important; /* Ensure flexbox is active */
        justify-content: flex-start !important; /* KEY CHANGE: Align everything to the very start (left) */
        align-items: center !important; /* Ensure vertical alignment */
        width: 100% !important; /* Take full width */
    }

    .header__heading, /* This is your logo container */
    .header__heading-link {
        margin-right: 0 !important; /* KEY CHANGE: Remove any right margin that pushes content away */
        order: unset !important; /* Ensure no ordering is forcing it away */
    }

    .header__inline-menu, /* This is your main navigation container */
    header nav {
        margin-left: 0 !important; /* KEY CHANGE: Remove any left margin that pushes the menu away */
    }

    .header__inline-menu > ul,
    header nav > ul {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important; /* Ensure individual menu items align left within their container */
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .header__menu-item {
        /* Keep a small spacing between menu items if desired */
        margin-left: 0px !important; /* Add some space BETWEEN menu items */
        margin-right: 0 !important; /* Ensure no unwanted right margin */
        position: relative !important;
    }

    /* Styles pour les SOUS-MENUS - No changes needed here, as they should follow parent alignment */
    .header__inline-menu li ul,
    header nav li ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: white;
        border: 1px solid #eee;
        z-index: 9999;
        min-width: 180px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 10px 0;
        margin-top: 0;
    }
    .header__inline-menu li:hover > ul,
    header nav li:hover > ul {
        display: block;
    }
    .header__inline-menu li ul li,
    header nav li ul li {
        width: 100%;
        padding: 8px 15px;
        margin: 0;
        white-space: nowrap;
        list-style-type: none;
    }
    .header__inline-menu li ul li:hover,
    header nav li ul li:hover {
        background-color: #f5f5f5;
    }
    .header__inline-menu li ul li a,
    header nav li ul li a {
        display: block;
        text-decoration: none;
        color: #333;
    }
}

/* Styles spécifiques pour la page d'accueil sur écrans larges */
@media screen and (min-width: 990px) {
    .template-index .header--middle-left {
        justify-content: flex-start !important; /* KEY CHANGE: Override specific homepage alignment to left */
    }
    .template-index .header__heading,
    .template-index .header__heading-link {
        margin-right: 0 !important; /* Remove unwanted margin */
        order: unset !important; /* Remove unwanted order */
    }
}

/* Ensure menu-button is hidden */
.menu-button {
    display: none !important;
}

/* --- 3. HEADER - MOBILE ALIGNMENT --- */
/* Mobile alignment adjustments */
@media screen and (max-width: 989px) {
    .menu-drawer__menu li {
        justify-content: flex-start !important; /* Align mobile menu items to left */
        text-align: left !important;
    }
}

/* --- 4. FONT OVERRIDES (NOTO SANS DISPLAY) --- */
/* @font-face rules - assuming these font files are correctly uploaded to Shopify Files */
@font-face {
    font-family: 'Noto Sans Display';
    font-style: normal;
    font-weight: 400;
    src: url({{ 'noto-sans-display-vxx-latin-regular.woff2' | file_url }}) format('woff2'); /* Replace with your uploaded file name */
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans Display';
    font-style: normal;
    font-weight: 700;
    src: url({{ 'noto-sans-display-vxx-latin-700.woff2' | file_url }}) format('woff2'); /* Replace with your uploaded file name */
    font-display: swap;
}

/* Rules to apply Noto Sans Display */
.header,
.header * { /* Broad selector for entire header and its children */
    font-family: 'Noto Sans Display', sans-serif !important;
}

/* More specific selectors for header elements, just in case */
.header__heading,
.header__heading-link,
.header__inline-menu,
header nav,
.header__menu-item,
.header__inline-menu li ul li a,
.menu-drawer__menu .list-menu__item,
.menu-drawer__menu .list-menu__item--link,
.menu-drawer__menu li a {
    font-family: 'Noto Sans Display', sans-serif !important;
}


/* --- Masquer et désactiver complètement le lien du compte client --- */
.header__icon--account {
  display: none !important; /* Cache l'élément et le rend non interactif */
}
/* --- Masquer et désactiver complètement le lien du compte client --- */
.header__icon--cart {
  display: none !important; /* Cache l'élément et le rend non interactif */
}
/* --- Réactiver la visibilité de l'icône de recherche (si elle était cachée) --- */
/* Assurez-vous que ces règles ne sont PAS display: none; dans votre custom.css */
/* Si elles le sont, supprimez-les ou commentez-les pour les sélecteurs suivants: */
.header__icon--search,
.header__search {
  /* display: block !important; */ /* Décommentez si besoin pour forcer l'affichage */
  /* visibility: visible !important; */
  /* opacity: 1 !important; */
}
/* La classe .hidden doit être conservée pour les autres usages */

/* --- Stylisation du bouton de recherche en champ de saisie --- */
.header__icon--search,
#Search-In-Modal-1 { /* Cible le bouton/icône et l'input potentiel si rendu directement */
    /* Assurez-vous que l'ID #Search-In-Modal-1 est l'ID correct de votre élément de recherche */
    width: 200px !important; /* Largeur du champ de recherche (ajustez si nécessaire) */
    height: 36px !important; /* Hauteur du champ */
    border: 1px solid #0a2342 !important; /* Bordure légère */
    border-radius: 3px !important; /* Coins légèrement arrondis */
    background-color: #0a2342 !important; /* Fond gris clair */
    padding: 8px 12px !important; /* Remplissage interne */
    box-sizing: border-box !important; /* Inclut padding et border dans la largeur/hauteur */
    display: flex !important; /* Pour centrer le contenu comme le placeholder ou l'icône */
    align-items: center !important;
    justify-content: flex-start !important; /* Aligner le texte à gauche */
    cursor: pointer !important; /* Indique qu'il est cliquable */
    color: #555 !important; /* Couleur du texte/placeholder */
    position: relative !important; /* Pour positionner un placeholder ou une icône à l'intérieur */
}

/* Masquer l'icône SVG de la loupe à l'intérieur si elle est toujours là */
.header__icon--search .icon-search {
    display: none !important;
}

/* Ajouter un placeholder text si l'élément n'est pas un vrai input */
.header__icon--search::before {
    content: "Rechercher..."; /* Texte du placeholder */
    color: #888; /* Couleur du placeholder */
    font-size: 14px; /* Taille de la police du placeholder */
    line-height: 1;
    /* Ajustez la police si elle doit correspondre à votre thème */
    font-family: Noto Sans Display; /* Ou 'Noto Sans Display' si c'est la police de votre header */
}

/* Ajustements pour les écrans plus petits pour réduire la largeur du champ de recherche */
@media screen and (max-width: 990px) {
    .header__icon--search {
        width: 150px !important; /* Largeur réduite sur mobile/tablette */
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    .header__icon--search::before {
        font-size: 12px !important;
    }
}

@media screen and (max-width: 767px) {
    .header__icon--search {
        width: 100% !important; /* Prend toute la largeur disponible sur les plus petits mobiles */
        max-width: 250px !important; /* Largeur max pour ne pas être trop grand */
        margin: 0 auto !important; /* Centrer sur mobile si 100% largeur n'est pas utilisée */
        padding: 5px 8px !important;
        font-size: 11px !important;
    }
    .header__icon--search::before {
        font-size: 11px !important;
    }
}

/* --- Personnalisation des sections Collapsible Content (FAQ / Accordéon) --- */

/* Question - Styles par défaut (Normal State) */
/* Cible la balise <summary> qui est cliquable et contient le titre de la question */
.collapsible-content summary {
    background-color: #FC9432 !important; /* Fond orange pour la question */
    color: #FFFFFF !important; /* Texte blanc pour la question */
    font-weight: bold !important; /* S'assure que le texte est en gras */
    border-radius: 8px !important; /* Coins arrondis pour la question */
    padding: 15px 20px !important; /* Padding de la question */
}

/* Question - Styles au survol (Hover State) */
.collapsible-content summary:hover {
    background-color: #EFEFEF !important; /* Fond gris très clair au survol */
    color: #000000 !important; /* Texte noir au survol */
}

/* Titre de la question (h3 ou autre) à l'intérieur de la summary */
/* Cela s'assure que si le thème applique des styles de couleur différents au h3, ils sont écrasés */
.collapsible-content .accordion__title {
    color: inherit !important; /* Hérite de la couleur du parent <summary> */
}

/* Réponse - Styles par défaut */
/* Cible le contenu de la réponse (le div qui s'ouvre) */
.collapsible-content .accordion__content {
    background-color: #F7E9DB !important; /* Fond orange très pâle pour la réponse */
    color: #000000 !important; /* Texte noir pour la réponse */
    padding: 15px 20px !important; /* Padding de la réponse */
    border-radius: 0 0 8px 8px !important; /* Arrondit seulement les coins inférieurs */
    margin-top: 0 !important; /* Supprime toute marge supérieure entre question et réponse */
    border-top: none !important; /* Supprime la bordure supérieure si elle est dupliquée */
}

/* Styles pour les liens ou paragraphes à l'intérieur de la réponse, s'ils ont des couleurs différentes */
.collapsible-content .accordion__content p,
.collapsible-content .accordion__content a {
    color: #000000 !important; /* S'assure que le texte des paragraphes et liens est noir */
}

/* Ajustement pour le conteneur global de l'accordéon si des bordures indésirables apparaissent */
.collapsible-content .accordion { /* Cible la balise <details> ou son conteneur direct */
    border: none !important; /* Supprime les bordures par défaut du conteneur d'accordéon */
    margin-bottom: 10px !important; /* Ajoute un espace entre les accordéons fermés/ouverts */
}