/* LE MENU DU SITE (le même sur toutes les pages : l'accueil et la coque) et la marque ALAQ de la barre. Choix de Myriam, 30/09/2026 :
   une seule police, Fredoka — les RUBRIQUES en majuscules, 600 ; leurs PAGES plus petites et moins grasses, 400. Sur ordinateur, une
   rubrique se déplie sous son nom, sa liste aussi large que son contenu ; sous 800 px (la largeur où le menu COMPLET ne tient plus,
   mesurée), le bouton ☰ et un tiroir en ACCORDÉON. Le HTML vient de generateur/menu.mjs, le comportement de rendu/menu.js.
   Ce fichier passe APRÈS base.css et le style de l'accueil : ses !important recouvrent leurs anciens liens de barre (Jost). */

/* ALAQ, dans la barre et le pied : Fredoka aussi */
.brand b, .site-brand { font-family:'Fredoka','Jost',sans-serif !important; font-weight:600 !important; letter-spacing:.3em !important; }

/* ── la barre ── */
:is(.nav-links, .site-links) { gap:26px !important; }
.menu-rubrique { position:relative; display:inline-flex; }
.menu-ouvrir, .menu-lien { display:inline-flex !important; align-items:center; gap:7px; min-height:44px; margin:0; padding:0 !important; border:0; background:none; cursor:pointer;
  font:600 15px/1 'Fredoka','Jost',sans-serif !important; letter-spacing:.06em !important; text-transform:uppercase !important; white-space:nowrap;
  color:#eadcc6 !important; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.menu-ouvrir:hover, .menu-lien:hover, .menu-ouvrir[aria-expanded="true"], .est-ici > .menu-ouvrir, .menu-lien[aria-current="page"] { color:#e9ac52 !important; }
.menu-fleche { width:7px; height:7px; margin-top:-4px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .2s, margin .2s; }
[aria-expanded="true"] > .menu-fleche { transform:rotate(225deg); margin-top:4px; }
:is(.menu-ouvrir, .menu-lien, .menu-liste a, .menu-burger, .menu-tiroir a, .menu-tiroir button):focus-visible { outline:2px solid #e9ac52; outline-offset:3px; border-radius:8px; }

/* la liste d'une rubrique : aussi large que son contenu ; la nuit du site, un filet d'or, aucune ombre */
.menu-liste { position:absolute; top:calc(100% + 8px); left:-14px; z-index:70; width:max-content; max-width:calc(100vw - 24px); margin:0; padding:6px; list-style:none;
  background:#29231d; border:1px solid rgba(214,143,53,.35); border-radius:12px; }
.menu-liste[hidden] { display:none; }
/* ⚠️ le pont : sans lui, la souris qui descend du titre vers la liste traverse 8 px de vide et le menu se referme sous elle (Myriam, 30/09) */
.menu-liste::before { content:''; position:absolute; left:0; right:0; top:-12px; height:12px; }
.menu-liste li { margin:0; padding:0; }
.menu-liste a { display:flex !important; align-items:center; min-height:42px; padding:0 14px !important; border-radius:8px; white-space:nowrap; text-decoration:none;
  font:400 14.5px/1.3 'Fredoka','Jost',sans-serif !important; letter-spacing:.01em !important; text-transform:none !important; color:#e2d3bc !important; }
.menu-liste a:hover { background:rgba(214,143,53,.14); color:#e9ac52 !important; }
.menu-liste a[aria-current="page"] { color:#e9ac52 !important; }
/* une page encore à écrire (un <a> sans adresse) : montrée, plus pâle, sans survol ni main — jamais cliquable */
.menu-liste a.menu-a-venir, .menu-liste a.menu-a-venir:hover { color:#a4937f !important; background:none; cursor:default; }

/* ── le téléphone : le bouton ☰ et son tiroir ── */
.menu-burger { display:none; }
.menu-tiroir[hidden] { display:none; }
@media (max-width:799px) {
  :is(.nav-links, .site-links) :is(.menu-rubrique, .menu-lien) { display:none !important; }
  :is(.nav-links, .site-links) { gap:8px !important; }   /* il ne reste que « Commencer » : l'écart des rubriques n'a plus lieu d'être */
  .menu-burger { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; margin:0 0 0 10px; padding:0; border:0; background:none; cursor:pointer; color:#f1e7d8; -webkit-tap-highlight-color:transparent; }
  .menu-tiroir { position:fixed; left:0; right:0; top:var(--menu-haut, 64px); z-index:70; max-height:calc(100dvh - var(--menu-haut, 64px)); overflow:auto;
    padding:8px 20px 24px; background:#29231d; border-bottom:1px solid rgba(214,143,53,.35); }
}
.menu-burger i, .menu-burger::before, .menu-burger::after { content:''; position:absolute; display:block; width:20px; height:1.5px; background:currentColor; border-radius:2px; transition:transform .2s, opacity .2s; }
.menu-burger::before { transform:translateY(-6px); } .menu-burger::after { transform:translateY(6px); }
.menu-burger[aria-expanded="true"] i { opacity:0; }
.menu-burger[aria-expanded="true"]::before { transform:rotate(45deg); } .menu-burger[aria-expanded="true"]::after { transform:rotate(-45deg); }
/* dans le tiroir : la RUBRIQUE plus grande et plus grasse que ses pages ; elle se déplie au doigt (accordéon) */
.menu-tiroir .rubrique { border-bottom:1px solid rgba(214,143,53,.18); padding:6px 0; }
.menu-tiroir .rubrique:last-child { border-bottom:0; }
.menu-tiroir .titre { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px; margin:0; padding:0; border:0; background:none; cursor:pointer;
  font:600 17px/1.2 'Fredoka','Jost',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#eadcc6; text-decoration:none; text-align:left; }
.menu-tiroir .titre .menu-fleche { margin-right:4px; }
.menu-tiroir .pages { margin:0; padding:0 0 6px; list-style:none; }
.menu-tiroir .pages[hidden] { display:none; }
.menu-tiroir .pages a { display:flex; align-items:center; min-height:44px; padding:0 0 0 16px; border-radius:8px; color:#d8c8b0; text-decoration:none; font:400 16px/1.3 'Fredoka','Jost',sans-serif; }
.menu-tiroir :is(.pages a, a.titre):hover, .menu-tiroir [aria-current="page"], .menu-tiroir .pages a[aria-current="page"] { color:#e9ac52; }   /* ⚠️ la page ouverte : « .pages a » l'emportait (plus précis), elle n'était jamais dorée */
.menu-tiroir .pages a.menu-a-venir, .menu-tiroir .pages a.menu-a-venir:hover { color:#a4937f; cursor:default; }

/* au téléphone, le LOGO SEUL mène à l'accueil, sur toutes les pages (Myriam, 30/09 : « c'est suffisant ») — le mot ALAQ quitte la
   barre, jamais le pied ; le lien garde son nom pour les lecteurs d'écran (aria-label) */
@media (max-width:799px) { .nav-inner .brand b, .site-nav-inner .site-brand-mot { display:none; } }   /* le seuil du ☰ */
@media print { .menu-burger, .menu-tiroir, .menu-liste { display:none !important; } }
@media (prefers-reduced-motion:reduce) { .menu-fleche, .menu-burger::before, .menu-burger::after, .menu-burger i { transition:none !important; } }