/* ─────────────────────────────────────────────────────────────
   nav.css — le menu du haut, en une seule feuille.

   Chargée par lib/partials/header.php lui-même, donc TOUJOURS présente
   quand le menu l'est — quelle que soit la feuille de base de la page.
   Le site a deux feuilles concurrentes (style.css 29 pages / top.css 15,
   jamais les deux) ; plutôt que de les fusionner, le partial apporte son
   style avec lui. Chargée après elles → elle gagne à spécificité égale.

   --c-ocre-deep et --c-ink-mute n'existent que dans top.css : toujours
   passer un fallback, sinon la déclaration est ignorée sur style.css.
   ───────────────────────────────────────────────────────────── */

/* ── Les trois conventions d'état actif du site, réconciliées ──
   is-active (partial), is-current (beaux-arts), active (cinéma,
   citations, lire, chocokun — n'avait AUCUNE règle : 8 pages sans
   état actif visible). Elles rendent toutes pareil désormais. */
.site-nav a.is-active,
.site-nav a.is-current,
.site-nav a.active {
    color: var(--c-navy);
    font-weight: 500;
    position: relative;
}
.site-nav a.is-active::after,
.site-nav a.is-current::after,
.site-nav a.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--c-ocre);
}

/* ── Ce qui manquait à style.css (repris de top.css) ── */
/* « ? » dans un rond — entrée Aide/Guides (2026-08-08). */
.site-nav a.site-nav-aide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    padding: 0;
}
.site-nav a.site-nav-aide.is-active::after { display: none; }
.site-nav a.site-nav-aide.is-active,
.site-nav a.site-nav-aide:hover {
    background: var(--c-navy);
    border-color: var(--c-navy);
    color: var(--c-paper) !important;
}

.site-nav-fr {
    font-family: var(--serif);
    font-size: 1.05rem;
    letter-spacing: 0;
    color: var(--c-ocre-deep, #8C6F35) !important;
}
.site-nav-fr:hover { color: var(--c-navy) !important; }
.site-nav-fr.is-active::after { display: none; }

/* .site-nav-logout retiré le 17/07 : top.js ne l'injecte plus (le lien vit dans
   /mypage.php). Le style est parti avec le markup — plus rien ne le porte. */

.login-flash {
    position: fixed; left: 50%; bottom: 28px;
    transform: translate(-50%, 16px);
    z-index: 1000;
    background: #2e6e46; color: #fff;
    padding: 13px 26px; border-radius: 100px;
    font-size: .9rem; font-weight: 600;
    box-shadow: 0 10px 30px -8px rgba(0,0,0,.45);
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}
.login-flash.is-in { opacity: 1; transform: translate(-50%, 0); }

/* ── Panneaux déroulants ──
   Deux niveaux MAXIMUM, jamais trois : les entrées d'un panneau sont
   toutes au même rang, atteignables en un seul survol. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { display: inline-flex; align-items: center; gap: 5px; }

.nav-caret {
    width: 0; height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    opacity: .45;
    transition: transform .18s ease, opacity .18s ease;
    flex: none;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { opacity: .9; transform: rotate(180deg); }

.nav-panel {
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%) translateY(6px);
    z-index: 60;
    display: flex;
    gap: 34px;
    padding: 22px 26px;
    background: var(--c-paper, #FAF8F3);
    border: 1px solid var(--c-rule);
    border-radius: 3px;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
/* Le survol doit survivre au trajet souris item → panneau (les 6px). */
.nav-panel::before {
    content: '';
    position: absolute;
    top: -8px; left: 0; right: 0;
    height: 8px;
}
.nav-item:hover > .nav-panel,
.nav-item:focus-within > .nav-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-col { min-width: 176px; }
.nav-col-title {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: .82rem;
    color: var(--c-ocre);
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--c-rule);
    white-space: nowrap;
}
.site-nav .nav-col a {
    display: block;
    padding: 7px 0;
    font-size: .88rem;
    color: var(--c-navy);
    line-height: 1.35;
}
.site-nav .nav-col a em {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: .76rem;
    color: var(--c-ink-soft);
    margin-top: 1px;
}
.site-nav .nav-col a:hover { color: var(--c-ocre); }
.site-nav .nav-col a:hover em { color: var(--c-ocre); }
.site-nav .nav-col a.is-active { font-weight: 700; }
.site-nav .nav-col a.is-active::after { display: none; }

/* ── Mobile ──
   Pas d'accordéon : le hamburger déplie tout, à plat et indenté.
   Un menu au doigt ne doit jamais demander deux gestes pour lire une
   entrée. Le breakpoint 880px est celui de style.css/top.css, et il est
   aussi écrit en dur dans top.js (matchMedia 881px) — les trois doivent
   bouger ensemble.

   Exception 'mobile' => 'hub' (17/07, cf. lib/nav.php) : la règle ci-dessus
   valait à trois entrées ; 文化の案内人 en a huit, et le menu mobile était
   devenu un mur d'une vingtaine de lignes. Ces panneaux-là ne se déplient
   plus : la section mène à sa page-hub, qui porte les mêmes liens en mieux.
   On garde « un seul geste », on perd le mur. */
@media (max-width: 880px) {
    .nav-item { display: block; }
    .nav-item > a { display: block; }
    .nav-caret { display: none; }

    .nav-item-hub .nav-panel { display: none; }
    /* Le chevron reprend du service sur les seules entrées-hub : il annonce
       « ceci mène à un choix », sinon l'entrée ment sur sa destination. */
    .nav-item-hub .nav-caret {
        display: inline-block;
        transform: rotate(-90deg);
        margin-left: 6px;
        opacity: .5;
    }

    .nav-panel {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: block;
        padding: 2px 0 8px 14px;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .nav-panel::before { display: none; }
    .nav-col { min-width: 0; padding-top: 6px; }
    .nav-col-title { border-bottom: 0; padding-bottom: 2px; margin-bottom: 0; }
    .site-nav .nav-col a { padding: 10px 4px; border-bottom: 1px solid var(--c-rule); }
    .site-nav .nav-col a:last-child { border-bottom: 0; }
}