* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        body {
            background-color: rgb(15, 15, 15);
            color: #e0e0e0;
            overflow-x: hidden;

        }

/* Navigation */
header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 15px 20px;
    z-index: 1000;
    display: flex;
    justify-content: space-between; /* Garde l'espacement entre logo et nav */
    align-items: center;
    background-color: rgba(15, 15, 15, 0); /* Déplacé ici pour consistance */
}

.logo {
    display: flex; /* Utilise flex pour aligner l'image */
    align-items: center; /* Centre verticalement l'image */
    text-decoration: none; /* Supprime le soulignement par défaut */
    max-width: fit-content; /* Limite la largeur au contenu (l'image) */
    padding: 0; /* Supprime tout padding inutile */
    margin: 0; /* Supprime toute marge */
}

.logo img {
    width: 200px; /* Définit une taille fixe pour le logo (ajuste selon tes besoins, ex. 150px au lieu de 50%) */
    height: auto; /* Maintient les proportions */
    vertical-align: middle; /* Garde l'alignement vertical */
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Assure que nav et language-switcher sont à droite */
    flex-grow: 1; /* Remplit l'espace restant */
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0 20px 0 0; /* Espacement à droite avant le language-switcher */
}

nav ul li a {
    font-family: 'Barlow Semi Condensed', sans-serif; 
    font-weight: 400;
    font-size: 13px;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase; 
    text-decoration: none;
    position: relative;
    transition: color 0.3s;
}

nav ul li a::after {
    content: '';
    position: absolute;
    width: 0; /* Initialement zéro */
    height: 2px;
    background-color: #fff;
    bottom: -4px; /* Décalage pour espacer la ligne sur PC */
    left: 0; /* Début à gauche du texte */
    transition: width 0.3s ease-in-out;
}

nav ul li a:hover::after {
    width: 100%; /* S'étend sur la largeur du texte */
}

nav ul li a.active::after {
    width: 0; /* Pas de soulignement pour la page active */
}

nav ul li a.active {
    color: #888; /* Grise la page active */
}

/* Mobile Navigation */
.menu-toggle {
    display: none;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.language-switcher {
    position: relative;
    margin-left: 20px; /* Espacement entre nav et language-switcher */
}

.current-language {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.language-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: rgba(15, 15, 15, 0.9);
    border-radius: 3px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding: 5px;
    z-index: 1001;
}

.lang-btn {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 3px;
    transition: background-color 0.3s;
}

.lang-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Media Query pour mobile */
/* Ajout du style pour le spacer */
.spacer {
    flex-grow: 1; /* Remplit l'espace entre logo et menu-toggle */
    opacity: 0; /* Invisible */
    pointer-events: none; /* Non interactif */
}

/* Media Query pour mobile */
@media (max-width: 768px) {
    .nav-container {
        list-style: none;
        display: flex;
        gap: 10px;
        margin: 0;
        align-items: center;
        position: static; /* Réinitialise le contexte */
        justify-content: flex-end; /* Garde language-switcher à droite */
    }
    
    nav {
        position: static; /* Pas de contexte intermédiaire */
    }

    nav ul {
        position: absolute;
        top: 100%; /* Juste en dessous du header */
        left: 0 !important; /* Force l'ancrage à gauche par rapport au header */
        background-color: rgba(15, 15, 15, 0);
        flex-direction: column;
        padding: 10px 0;
        margin: 0;
        display: flex;
        opacity: 0;
        visibility: hidden;
        height: 0;
        transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out, visibility 0s linear 0.3s;
        overflow: hidden;
        width: 100%;
        max-width: 250px;
        box-sizing: border-box;
        z-index: 1001;
        transform: translateX(0); /* Réinitialise tout décalage */
    }

    nav ul.active {
        opacity: 1;
        visibility: visible;
        height: auto;
        transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out, visibility 0s linear 0s;
    }

    nav ul.closing {
        opacity: 0;
        height: 0;
        visibility: hidden;
    }

    nav ul li {
        width: 100%;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    nav ul.active li {
        opacity: 1;
        transform: translateY(0);
    }

    nav ul.active li:nth-child(1) { transition-delay: 0.1s; }
    nav ul.active li:nth-child(2) { transition-delay: 0.2s; }
    nav ul.active li:nth-child(3) { transition-delay: 0.3s; }
    nav ul.active li:nth-child(4) { transition-delay: 0.4s; }
    nav ul.active li:nth-child(5) { transition-delay: 0.5s; }

    nav ul li:nth-child(1) { transition-delay: 0.4s; }
    nav ul li:nth-child(2) { transition-delay: 0.3s; }
    nav ul li:nth-child(3) { transition-delay: 0.2s; }
    nav ul li:nth-child(4) { transition-delay: 0.1s; }
    nav ul li:nth-child(5) { transition-delay: 0s; }

    nav ul li a {
        font-weight: 500;
        font-size: 13px;
        display: inline-block; /* Utilise la largeur du contenu */
        padding: 5px 20px;
        position: relative;
        box-sizing: border-box;
    }

    nav ul li a::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        background-color: #fff;
        bottom: -2px;
        left: 20px; /* Débute au début du texte */
        transition: width 0.3s ease-in-out;
    }

    nav ul li a:hover::after {
        width: 60%; /* S'étend sur la largeur du texte */
    }

    nav ul li a.active::after {
        width: 0;
    }

    nav ul li a.active {
        color: #888;
    }

    .menu-toggle {
        display: block;
        font-size: 24px;
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        padding: 5px;
        position: absolute; /* Positionnement précis */
        right: 60px; /* Positionne avant language-switcher */
        top: 50%;
        transform: translateY(-50%); /* Centre verticalement */
    }

    .language-switcher {
        margin: 0;
        position: absolute;
        right: 20px; /* Ancre à droite avec un décalage fixe */
        top: 50%;
        transform: translateY(-50%);
    }

    .current-language {
        font-size: 12px;
    }

    .language-menu {
        gap: 3px;
        right: 0;
    }

    .lang-btn {
        font-size: 11px;
        padding: 3px 8px;
    }
}

/* Styles pour desktop */
@media (min-width: 769px) {
    .modal { justify-content: center; align-items: center; }
    .modal-content { display: flex; justify-content: center; align-items: center; }
    .close { display: block; }
    .arrow { display: block; }
}

/* Style spécifique pour le lien de consentement de Termly */
    .termly-display-preferences {
        font-size: 14.5px !important; /* Force la taille du texte */
        color: #868686 !important;
        font-weight: 300 !important;
    text-transform: none; 
}
.privacy{
    font-size: 14.5px !important; /* Force la taille du texte */
        color: #868686 !important;
        font-weight: 300 !important;
    text-transform: none; 
}