/* ==========================================================================
   Header public — pilule flottante, glassmorphism
   ========================================================================== */
.entete-site {
    position: fixed;
    top: 0.85rem;
    left: 0;
    right: 0;
    margin-inline: auto;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(1280px, calc(100% - 1.6rem));
    padding: 0.55rem 0.55rem 0.55rem 1.4rem;
    border-radius: var(--rayon-pilule);
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--ombre-douce);
    transition: background var(--transition-douce), box-shadow var(--transition-douce);
}

/* Au scroll : la pilule se teinte légèrement, le flou reste actif.
   Les valeurs restent assez opaques pour que le texte du contenu
   ne transparaisse jamais à travers. */
.entete-site.au-scroll {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 250, 244, 0.82));
    border-color: color-mix(in srgb, var(--couleur-primaire) 20%, transparent);
    box-shadow: var(--ombre-flottante);
}
html[data-theme="sombre"] .entete-site.au-scroll {
    background: linear-gradient(135deg, rgba(42, 36, 35, 0.85), rgba(27, 23, 22, 0.82));
    border-color: color-mix(in srgb, var(--couleur-primaire) 28%, transparent);
}

.entete-site__marque {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--couleur-texte);
    text-decoration: none;
    flex-shrink: 0;
}
.entete-site__marque i {
    color: var(--couleur-primaire);
    font-size: 1.15rem;
}

.entete-site__droite {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.entete-site__nav-desktop {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.entete-site__lien {
    position: relative;
    color: var(--couleur-texte-doux);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.94rem;
    transition: color var(--transition-rapide);
}
.entete-site__lien::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--couleur-primaire);
    transition: width var(--transition-douce);
}
.entete-site__lien:hover { color: var(--couleur-texte); }
.entete-site__lien:hover::after { width: 100%; }
.entete-site__lien.actif { color: var(--couleur-primaire); font-weight: 600; }
.entete-site__lien.actif::after { width: 100%; }

/* ==========================================================================
   Bascule de thème
   ========================================================================== */
.bouton-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 1px solid var(--couleur-bordure);
    border-radius: 50%;
    background: var(--surface-bg);
    color: var(--couleur-texte);
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--transition-rapide), border-color var(--transition-rapide), color var(--transition-rapide), transform var(--transition-rapide);
}
.bouton-theme:hover {
    border-color: var(--couleur-primaire);
    color: var(--couleur-primaire);
    transform: translateY(-2px);
}
.bouton-theme__libelle { display: none; }

/* Variante pleine largeur, utilisée dans le tiroir mobile */
.bouton-theme--large {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    margin-top: 0.5rem;
    border-radius: var(--rayon-s);
    font-size: 0.98rem;
    font-weight: 600;
}
.bouton-theme--large .bouton-theme__libelle { display: inline; }

/* ==========================================================================
   Tiroir mobile — frère du header, couvre toute la hauteur d'écran
   ========================================================================== */
.entete-site__tiroir {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    width: min(340px, 86vw);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 5.5rem 1.4rem 2rem;
    background: var(--surface-bg);
    border-left: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-l) 0 0 var(--rayon-l);
    transform: translateX(105%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    overflow-y: auto;
}
/* L'ombre n'apparaît qu'à l'ouverture : sinon elle déborde sur l'écran
   alors que le tiroir est encore hors champ. */
.entete-site__tiroir.ouvert {
    transform: translateX(0);
    box-shadow: -30px 0 70px -20px rgba(33, 28, 27, 0.30);
}

.entete-site__tiroir .entete-site__lien {
    color: var(--couleur-texte);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.95rem 1rem;
    border-radius: var(--rayon-s);
    transition: background var(--transition-rapide), color var(--transition-rapide), padding-left var(--transition-rapide);
}
.entete-site__tiroir .entete-site__lien:hover,
.entete-site__tiroir .entete-site__lien.actif {
    background: var(--champ-bg);
    color: var(--couleur-primaire);
    padding-left: 1.35rem;
}
.entete-site__tiroir .entete-site__lien::after { display: none; }

.entete-site__fermer {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--couleur-bordure);
    border-radius: 50%;
    background: var(--surface-bg);
    color: var(--couleur-texte);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background var(--transition-rapide), transform var(--transition-rapide);
}
.entete-site__fermer:hover {
    background: var(--couleur-erreur);
    color: #fff;
    transform: rotate(90deg);
}

/* Voile assombri sous le tiroir */
.voile-nav {
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(33, 28, 27, 0.35);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.voile-nav.visible { opacity: 1; }

body.nav-ouverte { overflow: hidden; }

/* Burger : mobile uniquement */
.entete-site__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--couleur-primaire) 0%, var(--couleur-primaire-fonce) 100%);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--couleur-primaire) 60%, transparent);
    transition: transform var(--transition-rapide);
}
.entete-site__burger:hover { transform: translateY(-2px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .entete-site__nav-desktop { display: none; }
    .entete-site__theme-desktop { display: none; }
    .entete-site__burger { display: inline-flex; }
}

@media (min-width: 1025px) {
    /* Le tiroir n'existe qu'en mobile : neutralisé en desktop pour qu'il
       ne capte jamais le focus clavier ni ne s'affiche par accident. */
    .entete-site__tiroir { display: none; }
    .voile-nav { display: none; }
}

/* ==========================================================================
   Menu du compte dans le header public
   ========================================================================== */
.entete-site__compte {
    position: relative;
}

.entete-site__avatar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem 0.25rem 0.25rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-pilule);
    background: var(--surface-bg);
    cursor: pointer;
    transition: border-color var(--transition-rapide), transform var(--transition-rapide);
}

.entete-site__avatar:hover {
    border-color: var(--couleur-primaire);
    transform: translateY(-1px);
}

/* Le menu doit passer au-dessus du header flouté */
.entete-site__compte .dropdown-menu {
    z-index: 1080;
}

/* --------------------------------------------------------------------------
   Carte du compte en tête du tiroir mobile
   -------------------------------------------------------------------------- */
.tiroir-compte {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--rayon-m);
    background: var(--surface-bg);
    border: 1px solid var(--couleur-bordure);
}

.tiroir-compte__corps {
    min-width: 0;
}

.tiroir-compte__nom {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

.tiroir-compte__email {
    font-size: 0.8rem;
    color: var(--couleur-texte-doux);
    word-break: break-word;
}

/* ==========================================================================
   Rubriques du menu — bouton et sous-menu déroulant
   ========================================================================== */

/* Le bouton de rubrique reprend l'apparence d'un lien de navigation. */
.entete-site__lien--menu {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.entete-site__lien--menu i {
    font-size: 0.625rem;
    transition: transform var(--transition-rapide);
}

.entete-site__lien--menu[aria-expanded="true"] {
    color: var(--couleur-texte);
}

.entete-site__lien--menu[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Bootstrap fournit le positionnement ; les couleurs viennent de la
   palette, sans quoi le sous-menu resterait blanc en thème sombre. */
.entete-site__sous-menu {
    z-index: 1080;
    min-width: 16.5rem;
    padding: 0.5rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-m);
    background: var(--surface-bg);
    box-shadow: var(--ombre-flottante);
}

.entete-site__sous-menu .dropdown-item {
    padding: 0.625rem 0.875rem;
    border-radius: var(--rayon-s);
    color: var(--couleur-texte);
    font-size: 0.9375rem;
    white-space: normal;
    transition: background var(--transition-rapide), color var(--transition-rapide);
}

.entete-site__sous-menu .dropdown-item:hover,
.entete-site__sous-menu .dropdown-item:focus {
    background: color-mix(in srgb, var(--couleur-primaire) 9%, transparent);
    color: var(--couleur-lien);
}

.entete-site__sous-menu .dropdown-item.actif {
    background: color-mix(in srgb, var(--couleur-primaire) 12%, transparent);
    color: var(--couleur-lien);
    font-weight: 600;
}

/* Entre 1025 et 1200 pixels, six entrées et un bouton tiennent à peine :
   les écarts se resserrent avant que le tiroir mobile ne prenne le relais. */
@media (min-width: 1025px) and (max-width: 1200px) {
    .entete-site__droite { gap: 0.75rem; }
    .entete-site__nav-desktop { gap: 1rem; }
    .entete-site__lien { font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   Rubriques dans le tiroir mobile
   -------------------------------------------------------------------------- */

.tiroir-rubrique summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
}

.tiroir-rubrique summary::-webkit-details-marker {
    display: none;
}

.tiroir-rubrique summary i {
    font-size: 0.75rem;
    color: var(--couleur-texte-doux);
    transition: transform var(--transition-rapide);
}

.tiroir-rubrique[open] summary i {
    transform: rotate(180deg);
}

.tiroir-rubrique__lien {
    display: block;
    margin-left: 1rem;
    padding: 0.7rem 1rem;
    border-left: 2px solid var(--couleur-bordure);
    color: var(--couleur-texte-doux);
    font-size: 0.9688rem;
    text-decoration: none;
    transition: color var(--transition-rapide), border-color var(--transition-rapide);
}

.tiroir-rubrique__lien:hover,
.tiroir-rubrique__lien.actif {
    border-left-color: var(--couleur-primaire);
    color: var(--couleur-lien);
}