/* ==========================================================================
 *  HEADER PÉPITES DÉCOUVERTE (BASE INTACTE + SURCOUCHE MOBILE)
 *  ========================================================================== */

/* --------------------------------------------------------------------------
 *  TON CODE EXACT (AUCUNE MODIFICATION)
 *  -------------------------------------------------------------------------- */
.p-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box; /* LA LIGNE MAGIQUE QUI REGLE LE SCROLL */
    z-index: 50;
    background-color: transparent;
    color: #ffffff;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- LOGO --- */
.p-header__logo a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    text-decoration: none;
    color: inherit;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease;
}

.p-header__logo a:hover {
    opacity: 0.8;
}

.p-header__logo span {
    font-weight: 300;
}

/* La nouvelle classe pour le " // " orange avec un espacement équilibré */
.p-header__separator {
    color: var(--v3-color-brand, #ff6233);
    font-weight: 800;
    display: inline-block; /* Garantit une symétrie parfaite des marges */
    margin: 0 0.4rem; /* Augmente cette valeur (ex: 0.5rem) si tu veux encore plus d'espace */
}

/* --- LOGO --- */
.p-header__logo a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800; /* Extrabold */
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    text-decoration: none;
    color: inherit;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease;
}

.p-header__logo a:hover {
    opacity: 0.8;
}

.p-header__logo span {
    font-weight: 300; /* Light */
}

/* --- NAVIGATION --- */
.p-header__nav {
    display: none; /* Mobile géré plus tard si besoin */
    gap: 2.5rem;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

@media (min-width: 768px) {
    .p-header__nav {
        display: flex;
    }
}

.p-header__link {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem 0;
}

.p-header__link:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* --- MENU DÉROULANT (GLASSMORPHISM) --- */
.p-header__item {
    position: relative;
}

.p-header__icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.p-header__item:hover .p-header__icon {
    transform: rotate(180deg);
}

.p-header__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    min-width: 220px;

    /* L'effet Hyper Design */
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);

    /* Animation d'apparition */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.p-header__item:hover .p-header__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.p-header__dropdown-link {
    padding: 0.75rem 1.25rem;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.p-header__dropdown-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- BOUTON THEME --- */
.p-header__theme-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    padding: 0.75rem;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.p-header__theme-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.p-header__theme-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

/* --------------------------------------------------------------------------
 *  AJOUT DU BOUTON BURGER (Masqué sur Desktop)
 *  -------------------------------------------------------------------------- */
.p-header__burger {
    display: none;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0.5rem;
}

.p-header__burger svg {
    width: 28px;
    height: 28px;
}

/* --------------------------------------------------------------------------
 *  SURCOUCHE STRICTE POUR LE MOBILE (< 768px)
 *  -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .p-header__burger {
        display: block; /* On allume le burger */
        order: 3;
    }

    .p-header__actions {
        order: 2; /* On place le bouton thème au centre */
        margin-left: auto;
        margin-right: 1rem;
    }

    /* Transformation de la nav en menu plein écran */
    .p-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        flex-direction: column;
        padding: 1.5rem 2rem;
        gap: 1.5rem;
        box-shadow: 0 10px 25px rgba(0,0,0,0.3);
        /* display: none; est déjà défini dans ta base, on le garde ! */
    }

    .p-header__nav.is-open {
        display: flex; /* S'active via le JS du burger */
    }

    .p-header__item {
        width: 100%;
    }

    /* Écrase l'effet hover pour le rendre cliquable et statique sur mobile */
    .p-header__dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: none;
        box-shadow: none;
        padding-left: 1rem;
        margin-top: 0.5rem;
        display: none; /* Masqué, sauf si parent a .is-active via JS */
    }

    .p-header__item.is-active .p-header__dropdown {
        display: flex;
    }
}