@charset "utf-8";

/* ---------------------------------------------------------*/
/* Web fonts */
/* Note : Assure-toi que les noms de fichiers sur le serveur 
   correspondent exactement (Majuscules/Minuscules) */

@font-face {
    font-family: 'Gotham-Black';
    src: url('webfonts/Gotham/Gotham-Black.woff') format('woff');
}
@font-face {
    font-family: 'Gotham-Bold';
    src: url('webfonts/Gotham/Gotham-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Gotham-Regular';
    src: url('webfonts/Gotham/Gotham-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Gotham-Light';
    src: url('webfonts/Gotham/Gotham-Light.woff') format('woff');
}

@font-face {
    font-family: 'Montserrat-Black';
    src: url('webfonts/Montserrat/Montserrat-Black.ttf') format('ttf');
}
@font-face {
    font-family: 'Montserrat-Bold';
    src: url('webfonts/Montserrat/Montserrat-Bold.ttf') format('ttf');
}
@font-face {
    font-family: 'Montserrat-Regular';
    src: url('webfonts/Montserrat/Montserrat-Regular.ttf') format('ttf');
}
@font-face {
    font-family: 'Montserrat-Light';
    src: url('webfonts/Montserrat/Montserrat-Light.ttf') format('ttf');
}

/* Attention : Éviter les espaces dans les noms de fichiers sur le serveur */
@font-face {
    font-family: 'Adobe Clean';
    src: url('webfonts/AdobeClean/Adobe Clean.ttf') format('ttf');
}
@font-face {
    font-family: 'Adobe Clean';
    src: url('webfonts/AdobeClean/Adobe Clean.ttf') format('ttf');
}
@font-face {
    font-family: 'Adobe Clean';
    src: url('webfonts/AdobeClean/Adobe Clean.ttf') format('ttf');
}

/* ---------------------------------------------------------*/
/* Variables et Base */
:root {
    --text-color-black: #000;
    --text-color-mediumblack: #222;
    --text-color-lightblack: #3b3b3b;
    --text-color-grey: #666;
    --text-color-mediumgrey: #999;
    --text-color-lightgrey: #CCC;
    --text-color-white: #FFF;
    --text-color: #178ad6;
    --text-color2: #6801bd;
    --text-color3: #d0ff00;
    --text-color4: #FCF5C3;
    --text-color5: #FF2740;
    --text-color6: #057bc9;
    --text-color7: #ecfd00;
}

body, td, th {
    font-family: "Montserrat-Regular", Arial, sans-serif;
    font-size: 16px;
    color: #333;
    -webkit-font-smoothing: antialiased;
}

/* Liens */
a { font-size: 16px; line-height: 20px; color: #057bc9; text-decoration: none; }
a:hover { text-decoration: underline; color: #444; }
a.Linkbreak { text-decoration:none; }

/* Titres */
h1 { font-family: "Montserrat-Bold", sans-serif; font-size: 50px; margin: 15px 0; }
h2 { font-family: "Montserrat-Bold", sans-serif; font-size: 40px; }
h3 { font-family: "Montserrat-Bold", sans-serif; font-size: 30px; }

/* Styles de texte */
.text-font1-bold { font-family: "Montserrat-Bold", sans-serif; }
.text-font2-bold { font-family: "Montserrat-Bold", sans-serif; }
.text-font3-light { font-family: "Adobe Clean", sans-serif; }

/* ============================================================
   1. ÉTAT INITIAL (En haut de page) : TOUT EN BLANC
   ============================================================ */

/* Couleur des textes et liens par défaut */
header#navigation4 a, 
header#navigation4 span, 
header#navigation4 li,
header#navigation4 .secondary3 {
    color: #ffffff !important;
    transition: all 0.3s ease;
}

/* Couleur du Logo SVG par défaut */
header#navigation4 .logo svg .cls-1,
header#navigation4 .logo svg path {
    fill: #ffffff !important;
    transition: all 0.3s ease;
}

/* Couleur des icônes de droite (Loupe, Globe) */
header#navigation4 .navigation-side-right svg path {
    fill: #ffffff !important;
}

/* Couleur du Menu Burger (les 3 traits) */
header#navigation4 .bar1, 
header#navigation4 .bar2, 
header#navigation4 .bar3 {
    background-color: #ffffff !important;
}


/* ============================================================
   2. ÉTAT AU SCROLL : TOUT EN NOIR SUR FOND BLANC
   ============================================================ */

/* Le fond devient blanc */
header#navigation4.change, 
header#navigation4.change2 {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Les textes et liens deviennent noirs */
header#navigation4.change a, 
header#navigation4.change span, 
header#navigation4.change li,
header#navigation4.change2 a, 
header#navigation4.change2 span, 
header#navigation4.change2 li {
    color: #000000 !important;
}

/* Le logo devient noir */
header#navigation4.change .logo svg .cls-1,
header#navigation4.change2 .logo svg .cls-1,
header#navigation4.change .logo svg path,
header#navigation4.change2 .logo svg path {
    fill: #000000 !important;
}

/* Les icônes de droite et le burger deviennent noirs */
header#navigation4.change svg path, 
header#navigation4.change2 svg path,
header#navigation4.change .bar1, 
header#navigation4.change .bar2, 
header#navigation4.change .bar3,
header#navigation4.change2 .bar1, 
header#navigation4.change2 .bar2, 
header#navigation4.change2 .bar3 {
    background-color: #000000 !important; /* Pour les barres */
    fill: #000000 !important; /* Pour les SVG */
}


/* ============================================================
   3. CONFIGURATION MOBILE (Centrage et Taille)
   ============================================================ */
/* ============================================================
   CORRECTIONS FINALES MOBILE : CENTRAGE ET ALIGNEMENT
   ============================================================ */
@media screen and (max-width: 768px) {

    /* 1. RÉGLER LE HEADER (La barre parente) */
    header#navigation4 .navigation-wrapper {
        display: flex !important;
        height: 70px !important; /* Hauteur fixe pour éviter les décalages */
        position: relative !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* 2. LE LOGO (Positionnement chirurgical au centre) */
    header#navigation4 .navigation-logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important; /* Centre horizontal et vertical */
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        z-index: 5 !important;
        float: none !important;
    }

    header#navigation4 .logo svg {
        width: 110px !important; /* Taille idéale pour ton logo long */
        height: auto !important;
        display: block !important;
    }

    /* 3. MENU BURGER (Bloqué à gauche) */
    header#navigation4 .navigation-side-left {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        width: auto !important;
    }

    /* 4. ICONES DE DROITE (Recherche + Globe bloqués à droite) */
    header#navigation4 .navigation-side-right {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        width: auto !important;
        display: block !important;
    }

    header#navigation4 .navigation-side-right ul {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 15px !important; /* Espace entre la loupe et le globe */
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* 5. TAILLE DES ICONES SVG */
    .icon_menu_size svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* 6. NETTOYAGE DES TEXTES INUTILES */
    #navigation-top, 
    .navigation-side-right2, 
    .secondary3, 
    .nav-line, 
    .hide-tab-mobile,
    .dropdown-content {
        display: none !important;
    }
}