/* ==================================================================
   En-tête et menu déroulant, PARTAGÉS PAR TOUTES LES PAGES.
   Ces règles vivaient en double dans iev.css et histoires.css, et les
   deux en-têtes avaient fini par diverger : la page « sans photo »
   n'avait plus aucun lien vers le reste du catalogue. Un seul fichier,
   chargé après la feuille de base de la page (les deux définissent les
   mêmes variables de charte, donc les couleurs suivent toutes seules).

   Le menu est un « méga-menu » : au survol d'une entrée, tout le
   rayon s'ouvre en colonnes (par âge, à qui, de quoi ça parle, pour
   quelle occasion). Sans lui, il faut charger une page pour découvrir
   ce qui existe derrière « Pour les enfants ».
   ================================================================== */

.annonce,.promo{background:var(--cta);color:#fff;text-align:center;font-weight:700;
  font-size:14px;padding:10px 16px;letter-spacing:.01em}
.annonce b,.promo b{color:#fff}

header.site{position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.logo{display:flex;align-items:center;gap:11px;white-space:nowrap;
  font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;font-size:23px;color:var(--ink)}
.logo .cube{width:40px;height:40px;border-radius:12px;background:var(--cta);
  display:grid;place-items:center;color:#fff;font-size:15px;letter-spacing:.02em;flex:none}
.logo .vous{color:var(--brand);margin-left:.28em}
.nav-liens{display:flex;align-items:center;gap:24px;font-weight:700;font-size:15px}
.nav-liens a:not(.btn){color:var(--sub)}
.nav-liens a:not(.btn):hover{color:var(--ink)}
/* Sous 820 px la barre ne tient plus : c'est le bouton flottant d'aide et le
   bloc « Tous nos univers » du bas de page qui prennent le relais. */
@media(max-width:820px){.nav-liens a:not(.btn),.nav-liens .nav-cat{display:none}}

/* --- l'entrée de menu --- */
.nav-cat{display:flex;align-items:center;height:70px;position:static}
.nav-cat > a{display:flex;align-items:center;gap:6px}
.nav-cat > a::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);
  opacity:.55;transition:transform .16s ease}
.nav-cat.ouvert > a{color:var(--ink)}
.nav-cat.ouvert > a::after{transform:translateY(1px) rotate(225deg)}

/* --- le panneau : pleine largeur, aligné sur la grille de la page --- */
.nav-menu{position:absolute;left:0;right:0;top:100%;z-index:50;
  background:var(--surface);border-bottom:1px solid var(--line);
  box-shadow:0 26px 48px rgba(43,36,64,.13);padding:30px 0 34px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.nav-cat.ouvert .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-menu-cols{display:grid;gap:26px 34px;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));align-items:start}
.nav-menu-cols h3{font-family:"Baloo 2",system-ui,sans-serif;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin:0 0 13px}
.nav-menu-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nav-menu-cols a{display:block;color:var(--ink);font-weight:600;font-size:14.5px;line-height:1.3}
.nav-menu-cols a:hover{color:var(--brand);text-decoration:underline}
/* Le premier lien, celui qui ouvre le rayon entier : c'est la sortie de
   secours quand aucune sous-entrée ne correspond. */
.nav-menu .nav-tete{font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;
  font-size:17px;color:var(--ink);line-height:1.25}
.nav-menu .nav-tete:hover{color:var(--brand)}
/* Le portrait offert : c'est la porte d'entrée gratuite, elle mérite d'être
   visible depuis n'importe quelle entrée du menu. */
.nav-promo{display:block;background:color-mix(in srgb,var(--brand) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);
  border-radius:18px;padding:16px 18px}
.nav-promo b{display:block;font-family:"Baloo 2",system-ui,sans-serif;font-size:16px;
  color:var(--ink);margin-bottom:4px}
.nav-promo span{color:var(--sub);font-size:13.5px;font-weight:600;line-height:1.4;display:block}
.nav-promo:hover b{color:var(--brand)}

/* --- version compacte : une simple liste, pas de colonnes --- */
.nav-cat.compact{position:relative}
.nav-menu.compact{left:auto;right:auto;width:max-content;max-width:min(92vw,520px);
  border:1px solid var(--line);border-radius:20px;padding:22px 26px;
  margin-left:-22px;box-shadow:0 22px 48px rgba(43,36,64,.16)}
.nav-menu.compact .wrap{max-width:none;padding:0}
.nav-menu.compact .nav-menu-cols{grid-template-columns:1fr;gap:14px}