/* =========================================================
   EN-TÊTE DU SITE : logo, menu principal, recherche, connexion
   et menu déroulant sur smartphone / tablette.
   Chargé après main.css (voir templates/base.html).
   ========================================================= */

.site-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.site-logo {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    flex-shrink: 0;
    white-space: nowrap;
}
.site-logo span { color: var(--color-accent); font-size: .7em; margin-left: 4px; }

/* Bloc menu + recherche : sur grand écran, ses éléments s'alignent
   directement dans la barre ; sur petit écran, il devient le panneau
   déroulant ouvert par le bouton ☰. */
.site-menu {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 24px;
}
.main-nav { flex: 1 1 auto; min-width: 0; }
.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: clamp(16px, 2vw, 34px);
    margin: 0;
    padding: 0;
}
.main-nav a {
    color: #f1e9e9;
    text-decoration: none;
    font-size: 1.02rem;
    letter-spacing: .02em;
    position: relative;
    padding: 6px 0;
    white-space: nowrap;
}
.main-nav a::after {
    content: "";
    position: absolute; left: 0; bottom: -4px;
    width: 0; height: 2px; background: var(--color-accent);
    transition: width var(--transition-medium);
}
.main-nav a:hover::after { width: 100%; }

.site-search { display: flex; align-items: center; flex-shrink: 0; }
.site-search input {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px 0 0 20px;
    padding: 6px 12px;
    color: #fff;
    width: 130px;
    font: inherit;
    font-size: .9rem;
    -webkit-appearance: none;
    appearance: none;
}
.site-search input::placeholder { color: #cbb; }
.site-search button {
    border: 1px solid rgba(255,255,255,.25);
    border-left: none;
    background: rgba(255,255,255,.1);
    color: #fff;
    border-radius: 0 20px 20px 0;
    padding: 6px 12px;
    cursor: pointer;
    font-size: .9rem;
}

/* Bouton ☰ (petit écran uniquement), transformé en ✕ quand le menu est ouvert */
.nav-toggle {
    display: none;
    flex-shrink: 0;
    width: 44px; height: 44px;
    padding: 10px;
    margin-right: -10px;
    background: none; border: 0; cursor: pointer;
}
.nav-toggle span {
    display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0;
    transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Zone connexion / déconnexion dans l'en-tête */
.auth-nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.auth-nav__user {
    color: #f1e9e9; font-size: .85rem;
    max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-nav__logout-form { margin: 0; }
.auth-nav__link {
    background: none;
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .85rem;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background .2s ease;
}
.auth-nav__link:hover { background: rgba(255,255,255,.12); }

/* Écrans moyens : on gagne de la place en masquant le nom de l'utilisateur */
@media (max-width: 1300px) {
    .auth-nav__user { display: none; }
}

/* Tablettes et smartphones : menu déroulant */
@media (max-width: 1100px) {
    .site-header__inner { padding: 10px 20px; gap: 12px; }
    .site-logo { font-size: 1.25rem; }

    .site-menu {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 20px 20px;
        background: var(--color-dark);
        border-top: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 12px 24px rgba(0,0,0,.25);
        max-height: calc(100vh - 64px);
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
    }
    .site-menu.is-open { display: flex; }

    .main-nav ul { flex-direction: column; gap: 0; }
    .main-nav li + li { border-top: 1px solid rgba(255,255,255,.08); }
    .main-nav a { display: block; padding: 14px 4px; font-size: 1.05rem; }
    .main-nav a::after { display: none; }

    .site-search { margin-top: 14px; align-items: stretch; }
    .site-search input { flex: 1; width: auto; min-width: 0; padding: 10px 14px; font-size: 1rem; }
    .site-search button { padding: 10px 16px; }

    .auth-nav { margin-left: auto; }
    .nav-toggle { display: block; }
}

@media (max-width: 380px) {
    .site-header__inner { padding: 10px 14px; gap: 8px; }
    .site-logo { font-size: 1.1rem; }
    .auth-nav__link { padding: 5px 10px; font-size: .8rem; }
}
@media (max-width: 340px) {
    .site-logo span { display: none; }
}

/* Neutralise les anciennes règles « menu mobile » de main.css (versions
   antérieures), qui ciblaient directement .main-nav et .site-search. */
@media (max-width: 1100px) {
    .site-menu .main-nav {
        position: static; display: block;
        top: auto; left: auto; right: auto;
        background: none;
    }
    .site-menu .main-nav ul { padding: 0; }
    .site-menu .site-search { display: flex; }
}

/* =========================================================
   SOUS-MENUS DÉROULANTS du menu principal
   (templates/includes/menu_principal.html, static/js/scroll-effects.js)
   Grand écran : liste flottante ouverte au survol ou par le bouton ▾.
   Petit écran : accordéon dans le panneau mobile.
   ========================================================= */
.main-nav__item { position: relative; }
.main-nav__parent { display: flex; align-items: center; gap: 2px; }

/* Bouton ▾ seul (élément avec lien) ou titre cliquable (élément sans lien) */
.main-nav__deplier {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    background: none;
    border: 0;
    color: #f1e9e9;
    font: inherit;
    font-size: 1.02rem;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: pointer;
}
.main-nav__deplier::after {
    content: "";
    width: .42em; height: .42em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-30%) rotate(45deg);
    transition: transform .2s ease;
}
.main-nav__deplier:hover { color: var(--color-accent); }
.main-nav__item.is-open > .main-nav__parent .main-nav__deplier::after {
    transform: translateY(20%) rotate(-135deg);
}

/* Rubrique en cours (ex : on est dans l'application théâtre) */
.main-nav__item.is-actif > .main-nav__parent > a::after { width: 100%; }

.main-nav ul.main-nav__sous-menu {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    left: -18px;
    z-index: 60;
    flex-direction: column;
    gap: 0;
    min-width: 210px;
    margin: 0;
    padding: 8px 0;
    background: rgba(26, 20, 20, .97);
    border-top: 2px solid var(--color-accent);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .3);
}
/* Pont invisible entre l'élément et sa liste : le survol ne se perd pas */
.main-nav__sous-menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -16px; height: 16px;
}
.main-nav__sous-menu a {
    display: block;
    padding: 9px 20px;
    font-size: .95rem;
    transition: background .2s ease, color .2s ease;
}
.main-nav__sous-menu a::after { display: none; }
.main-nav__sous-menu a:hover,
.main-nav__sous-menu a:focus-visible,
.main-nav__sous-menu a[aria-current="page"] {
    background: rgba(255, 255, 255, .07);
    color: var(--color-accent);
}

.main-nav__item--parent.is-open > .main-nav__sous-menu { display: flex; }
@media (min-width: 1101px) {
    /* Aligne les éléments simples et ceux qui portent un bouton ▾ */
    .main-nav > ul { align-items: center; }
}
@media (min-width: 1101px) and (hover: hover) {
    .main-nav__item--parent:hover > .main-nav__sous-menu { display: flex; }
}

/* Panneau mobile : sous-menus en accordéon */
@media (max-width: 1100px) {
    .main-nav__parent { justify-content: space-between; }
    .main-nav__parent > a { flex: 1; }
    .main-nav__deplier {
        justify-content: center;
        min-width: 44px;
        padding: 14px 4px;
        font-size: 1.05rem;
    }
    .main-nav__deplier--titre { flex: 1; justify-content: space-between; text-align: left; }

    .main-nav ul.main-nav__sous-menu {
        position: static;
        min-width: 0;
        margin: 0 0 12px 4px;
        padding: 0 0 0 12px;
        background: none;
        border-top: 0;
        border-left: 2px solid var(--color-accent);
        border-radius: 0;
        box-shadow: none;
    }
    .main-nav__sous-menu::before { display: none; }
    .main-nav .main-nav__sous-menu li + li { border-top: 0; }
    .main-nav .main-nav__sous-menu a { padding: 10px 12px; font-size: 1rem; }
}