/* ============================================================
   MENU DU SITE — UN SEUL COMPOSANT POUR LES 33 PAGES
   ------------------------------------------------------------
   Pourquoi ce fichier existe (29/07/2026)
   ---------------------------------------
   Latifa : « je vois encore le menu différent de l'accueil ».
   La cause n'était pas un réglage : il y avait DEUX menus. Les
   mêmes règles étaient recopiées dans `accueil.css` ET dans
   `zellij-ui.css`, et les deux copies avaient divergé. Celle des
   pages internes avait perdu la neutralisation des styles de
   prod — résultat, sur mobile les entrées du menu sortaient en
   pastilles bordeaux sur 3 colonnes, mot par-dessus mot, et le
   fond sombre avait disparu.

   Désormais : UN fichier, chargé par les deux points d'entrée.
     · les 32 pages du build  → `_includes/base.njk`
     · la nouvelle accueil    → `Experiments/…/index.html`
   Modifier le menu = modifier ici, jamais ailleurs.

   ⚠️ NE JAMAIS recopier une de ces règles dans `accueil.css` ou
   `zellij-ui.css` : c'est exactement comme ça que les deux menus
   se sont séparés la première fois.

   Le contrat de balisage (identique des deux côtés)
   -------------------------------------------------
     <button class="menu-toggle" aria-expanded="false"
             aria-controls="site-menu-panel"> … </button>

     <div class="site-menu-overlay" id="site-menu-panel" inert>
       <div class="site-menu-panel" role="dialog" aria-modal="true"> … </div>
     </div>

   Le comportement (ouvrir / fermer / Échap) est dans
   `/js/site-menu.js`, lui aussi partagé.
   ============================================================ */

/* Lien d’évitement — visible uniquement au clavier. Il passe avant le header
   afin d’atteindre le contenu sans parcourir toute la navigation. */
.skip-link {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 400;
  padding: 0.7rem 1rem;
  border-radius: 0.25rem;
  background: var(--plum);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.16s var(--ease);
}

.skip-link:focus {
  top: 1rem;
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   1 · LE BOUTON — deux traits et le mot « Menu »
   ------------------------------------------------------------
   `styles.css` (la prod, qu'on ne touche pas) en fait une
   pastille bordeaux pleine. On remet le bouton discret de
   l'accueil : ce fichier est chargé APRÈS, donc il gagne.
   La COULEUR du libellé, elle, reste au ressort de chaque
   en-tête (clair au-dessus du hero, encre une fois défilé).
   ------------------------------------------------------------ */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  background: none;
}

.menu-toggle-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.menu-toggle-bars i {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}

.menu-toggle:hover .menu-toggle-bars i:first-child {
  transform: translateY(-1px);
}

/* Le mot reste visible même sur petit écran : sans lui, deux
   traits seuls ne disent pas « menu » à une visiteuse pressée.
   (`styles.css` le masquait sous 480 px.) */
.menu-toggle-label {
  display: inline;
}

/* MENU:DEBUT */
/* ------------------------------------------------------------
   2 · L'ÉCRAN DU MENU — le même sur l'accueil et sur toutes les pages (refait le 10/10/2026)
   ------------------------------------------------------------
   Un plan de l'atelier : une règle graduée à gauche, cinq entrées sur une même grille, un seul niveau de lecture.
   Chaque entrée est un titre (qui mène à la page), puis, sur une seule ligne, les pages qui en dépendent.
   À droite sur grand écran, une planche : ce qu'on trouvera derrière l'entrée survolée, avec sa phrase et son numéro.
   Fermé, le menu reste dans la page (les liens restent lisibles par Google) mais il est invisible, inatteignable
   au doigt et retiré du clavier par `inert`.
   ------------------------------------------------------------ */
.site-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: block;
  padding: 0;
  background: var(--plum-deep, #221420);
  color: #fcfaf6;
  /* Le menu défile LUI-MÊME quand il dépasse l'écran ; la page derrière reste immobile. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  pointer-events: none;
  transition: clip-path 0.65s var(--ease, cubic-bezier(0.22, 0.7, 0.25, 1)), visibility 0s 0.65s;
}

.site-menu-overlay.est-ouvert {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  pointer-events: auto;
  transition: clip-path 0.65s var(--ease, cubic-bezier(0.22, 0.7, 0.25, 1));
}

body.menu-open-lock {
  overflow: hidden;
}

/* 🚨 Remise à zéro : `styles.css` (la prod) style les balises nues `nav a` en pastilles bordeaux centrées. */
.site-menu-overlay a {
  display: block;
  min-height: 0;
  justify-content: flex-start;
  align-items: initial;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font-weight: 400;
}

.site-menu-panel {
  width: min(1240px, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(16px, 2.4vw, 30px) clamp(22px, 5vw, 64px) clamp(22px, 3vw, 38px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(40px, 7vw, 120px);
  background: transparent;
  color: inherit;
  border-radius: 0;
  box-shadow: none;
}
/* sans planche (menu anglais) : la liste prend toute la largeur utile */
.site-menu-panel--seule { grid-template-columns: minmax(0, 1fr); }
.site-menu-panel--seule .site-menu-portes { max-width: 760px; }

/* ------------------------------------------------------------
   3 · L'EN-TÊTE DU PANNEAU — le logo blanc et la croix
   ------------------------------------------------------------ */
.site-menu-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.site-menu-logo {
  display: block;
  width: 150px;
  max-width: 48vw;
  height: auto;
}

.site-menu-title {
  display: none;
}

.site-menu-close {
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(252, 250, 246, 0.3);
  border-radius: 50%;
  background: transparent;
  color: #fcfaf6;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease);
}

.site-menu-close:hover,
.site-menu-close:focus-visible {
  background: rgba(252, 250, 246, 0.1);
  border-color: var(--gold, #a18a58);
}

/* ------------------------------------------------------------
   4 · LES ENTRÉES — une règle, un numéro, un titre, une ligne de pages
   ------------------------------------------------------------ */
.site-menu-portes {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  display: block;               /* annule `nav { display:flex }` de la prod (et son centrage) */
  align-items: stretch;
  justify-content: flex-start;
  grid-template-columns: none;
  width: auto;
  gap: 0;
  margin: clamp(14px, 2.6vh, 30px) 0;
  padding-left: 30px;
}
@media (min-width: 901px) {
  /* cinq rangées égales : la liste a la hauteur de la planche, le rythme est régulier */
  .site-menu-portes { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; height: auto; }
  /* rangées de hauteur égale tant qu'elles sont repliées ; une rangée dépliée GRANDIT de la hauteur de ses pages (base : le contenu), elle ne déborde jamais sur la suivante */
  .site-menu-porte { flex: 1 0 auto; align-content: center; width: 100%; min-height: clamp(72px, 9.4vh, 100px); }
}
/* la règle : un trait gradué, comme sur le bord d'une table de travail */
.site-menu-portes::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: repeating-linear-gradient(to bottom, rgba(252, 250, 246, 0.26) 0 1px, transparent 1px 9px);
}

.site-menu-porte {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 48px;
  column-gap: 8px;
  align-items: baseline;
  padding: clamp(10px, 1.7vh, 18px) 0 clamp(10px, 1.7vh, 18px);
  border-top: 1px solid rgba(252, 250, 246, 0.11);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease, ease), transform 0.7s var(--ease, ease);
}
.site-menu-porte:last-child { border-bottom: 1px solid rgba(252, 250, 246, 0.11); }
/* le repère de l'entrée : un trait doré sur la règle, qui s'allonge quand on la regarde */
.site-menu-porte::before {
  content: "";
  position: absolute;
  left: -30px;
  top: calc(clamp(10px, 1.7vh, 18px) + 0.62em);
  width: 14px;
  height: 1px;
  background: var(--gold, #a18a58);
  transition: width 0.5s var(--ease, ease), background 0.3s;
}
.site-menu-porte:hover::before,
.site-menu-porte:focus-within::before { width: 26px; background: var(--rose, #d9a9b4); }

.site-menu-overlay.est-ouvert .site-menu-porte {
  opacity: 1;
  transform: none;
}
.site-menu-overlay.est-ouvert .site-menu-porte:nth-child(2) { transition-delay: 0.05s; }
.site-menu-overlay.est-ouvert .site-menu-porte:nth-child(3) { transition-delay: 0.1s; }
.site-menu-overlay.est-ouvert .site-menu-porte:nth-child(4) { transition-delay: 0.15s; }
.site-menu-overlay.est-ouvert .site-menu-porte:nth-child(5) { transition-delay: 0.2s; }

.site-menu-porte__num {
  grid-column: 1;
  grid-row: 1;
  color: var(--gold, #a18a58);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.site-menu-porte__titre {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  align-items: center;
  color: #fcfaf6;
  font-family: var(--serif);
  font-weight: 420;
  font-size: clamp(2rem, min(3.7vw, 5.4vh), 3.3rem);
  letter-spacing: -0.028em;
  line-height: 1.04;
  transition: color 0.3s var(--ease, ease);
}
.site-menu-porte__titre::after {
  content: "→";
  font-family: var(--sans);
  font-size: 0.5em;
  color: var(--rose, #d9a9b4);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s var(--ease, ease), transform 0.5s var(--ease, ease);
}

.site-menu-porte:hover .site-menu-porte__titre,
.site-menu-porte__titre:hover,
.site-menu-porte__titre:focus-visible {
  background: transparent;
  color: var(--rose, #d9a9b4);
}
.site-menu-porte:hover .site-menu-porte__titre::after,
.site-menu-porte__titre:focus-visible::after { opacity: 1; transform: none; }

.site-menu-porte__desc {
  grid-column: 2;
  grid-row: 2;
  margin: 2px 0 0;
  color: rgba(252, 250, 246, 0.62);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.45;
}

.site-menu-porte__enfants {
  grid-column: 2 / -1;
  grid-row: 3;
  list-style: none;
  margin: 0;
  padding: 0;
  /* les pages de la porte : une ou deux colonnes selon la place, chacune avec son titre et sa phrase */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr));
  column-gap: 30px;
  /* repliées : on ne voit que les titres ; le + de la rangée les déplie (celle de la page où l'on se trouve s'ouvre d'elle-même) */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.55s var(--ease, ease), opacity 0.35s var(--ease, ease), visibility 0s linear 0.55s;
}
.site-menu-porte.est-deplie .site-menu-porte__enfants { max-height: 760px; padding: 2px 0 6px; opacity: 1; visibility: visible; transition-delay: 0s; }
.site-menu-porte__enfants li { min-width: 0; }

/* le + : déplie les pages de la rangée (cercle fin, deux traits) */
.site-menu-porte__plus {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.site-menu-porte__plus i { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(161, 138, 88, 0.7); transition: box-shadow 0.3s, background 0.3s; }
.site-menu-porte__plus i::before, .site-menu-porte__plus i::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--rose, #d9a9b4); }
.site-menu-porte__plus i::before { width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; }
.site-menu-porte__plus i::after { width: 1.5px; height: 12px; margin: -6px 0 0 -0.75px; transition: transform 0.4s var(--ease, ease); }
.site-menu-porte__plus:hover i, .site-menu-porte__plus:focus-visible i { box-shadow: inset 0 0 0 1px var(--rose, #d9a9b4); background: rgba(217, 169, 180, 0.12); }
.site-menu-porte__plus:focus-visible { outline: 2px solid var(--rose, #d9a9b4); outline-offset: 1px; }
.site-menu-porte.est-deplie .site-menu-porte__plus i::after { transform: scaleY(0); }

.site-menu-porte__enfants a {
  display: grid;
  gap: 1px;
  /* la ligne fait ~56 px : plus que la taille d'un doigt. */
  padding: 10px 0;
  color: rgba(252, 250, 246, 0.86);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.3s var(--ease, ease);
}
.site-menu-porte__enfants a b {
  font: 420 1.2rem/1.2 var(--serif);
  letter-spacing: -0.01em;
  color: #fcfaf6;
  transition: color 0.3s var(--ease, ease);
}
.site-menu-porte__enfants a span {
  font: 400 0.84rem/1.4 var(--sans);
  letter-spacing: 0;
  color: rgba(252, 250, 246, 0.64);
}

.site-menu-porte__enfants a:hover,
.site-menu-porte__enfants a:focus-visible {
  background: transparent;
  color: var(--rose, #d9a9b4);
}
.site-menu-porte__enfants a:hover b,
.site-menu-porte__enfants a:focus-visible b { color: var(--rose, #d9a9b4); }

.site-menu-porte__note {
  grid-column: 2;
  grid-row: 2;
  margin: 2px 0 0;
  color: rgba(252, 250, 246, 0.62);
  font-family: var(--sans);
  font-size: 0.95rem;
}

/* La page où l'on se trouve déjà : un point doré après le titre, et une couleur. */
.site-menu-porte__titre[aria-current],
.site-menu-porte__enfants a[aria-current="page"] b {
  color: var(--rose, #d9a9b4);
}

.site-menu-porte__titre[aria-current]::after {
  content: "";
  width: 0.14em;
  height: 0.14em;
  margin-left: 0.1em;
  border-radius: 50%;
  background: var(--gold, #a18a58);
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   4 bis · LA PLANCHE — ce qu'on trouvera derrière l'entrée survolée (grand écran)
   ------------------------------------------------------------ */
.site-menu-apercu {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  width: min(100%, 540px, calc((100vh - 290px) * 2));
  margin: clamp(14px, 2.6vh, 30px) 0;
}

.site-menu-apercu__arche {
  position: relative;
  aspect-ratio: 2 / 1;
  border: 1px solid rgba(161, 138, 88, 0.55);
  overflow: hidden;
  background: #f4f5f7;
  border-radius: 4px;
}
/* les quatre repères de calage, hors de la planche */
.site-menu-apercu::before {
  content: "";
  position: absolute;
  inset: -9px;
  pointer-events: none;
  --m: 14px;
  --c: rgba(161, 138, 88, 0.85);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--m) no-repeat;
}
.site-menu-apercu { position: relative; }
.site-menu-apercu__legendes {
  position: relative;
  height: 4.6em;
  margin-top: 26px;
}
.site-menu-apercu__legendes p {
  position: absolute;
  inset: 0 0 auto 0;
  margin: 0;
  color: rgba(252, 250, 246, 0.78);
  font-family: var(--serif);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.5s var(--ease, ease);
}
.site-menu-apercu__legendes b {
  display: block;
  margin-bottom: 6px;
  color: var(--gold, #a18a58);
  font: 600 11px/1 var(--sans);
  font-style: normal;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.site-menu-apercu figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.55s var(--ease, ease), transform 1s var(--ease, ease);
}

.site-menu-apercu img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-menu-overlay[data-porte="0"] .site-menu-apercu figure[data-porte="0"],
.site-menu-overlay[data-porte="1"] .site-menu-apercu figure[data-porte="1"],
.site-menu-overlay[data-porte="2"] .site-menu-apercu figure[data-porte="2"],
.site-menu-overlay[data-porte="3"] .site-menu-apercu figure[data-porte="3"],
.site-menu-overlay[data-porte="4"] .site-menu-apercu figure[data-porte="4"] {
  opacity: 1;
  transform: none;
}

.site-menu-overlay[data-porte="0"] .site-menu-apercu__legendes p[data-porte="0"],
.site-menu-overlay[data-porte="1"] .site-menu-apercu__legendes p[data-porte="1"],
.site-menu-overlay[data-porte="2"] .site-menu-apercu__legendes p[data-porte="2"],
.site-menu-overlay[data-porte="3"] .site-menu-apercu__legendes p[data-porte="3"],
.site-menu-overlay[data-porte="4"] .site-menu-apercu__legendes p[data-porte="4"] {
  opacity: 1;
}

/* Grand écran : la phrase de chaque entrée vit sous la planche, pas dans la liste (la liste doit tenir sans défiler). */
@media (min-width: 901px) {
  .site-menu-porte__desc {
    display: none;
  }
}

/* ------------------------------------------------------------
   5 · LE PIED DU PANNEAU — la recherche et les réseaux
   ------------------------------------------------------------ */
.site-menu-foot {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(252, 250, 246, 0.12);
}

.site-menu-search {
  flex: 1 1 340px;
  max-width: 520px;
}

.site-menu-search .search-input {
  width: 100%;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(252, 250, 246, 0.3);
  border-radius: 999px;
  background: rgba(252, 250, 246, 0.06);
  color: #fcfaf6;
  font-family: var(--sans);
  font-size: 0.95rem;
}

.site-menu-search .search-input::placeholder {
  color: rgba(252, 250, 246, 0.62);
}

.site-menu-search .search-results {
  max-height: 38vh;
  margin-top: 10px;
  overflow-y: auto;
}

.site-menu-search .search-results a {
  padding: 10px 4px;
  color: #fcfaf6;
}

.site-menu-social {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  min-height: 46px;
  align-items: center;
}

.site-menu-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(252, 250, 246, 0.86);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
}

.site-menu-social a:hover,
.site-menu-social a:focus-visible {
  background: transparent;
  color: var(--rose, #d9a9b4);
}

.site-menu-social svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  opacity: 0.92;
}

/* le bouton de contact : sur téléphone, collé en bas du menu, toujours sous le pouce ; sur grand écran, la porte « Contact » suffit */
.site-menu-cta {
  display: none;
}

/* ------------------------------------------------------------
   6 · PETIT ÉCRAN — une colonne : la planche s'efface, une entrée = un titre et une ligne de pages ; tout tient sans défiler
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .site-menu-panel {
    display: flex;
    flex-direction: column;
    padding: 14px 22px 0;
  }

  .site-menu-apercu {
    display: none;
  }

  .site-menu-portes {
    margin: 10px 0 6px;
    padding-left: 22px;
  }
  .site-menu-portes::before { width: 5px; background: repeating-linear-gradient(to bottom, rgba(252, 250, 246, 0.26) 0 1px, transparent 1px 8px); }

  .site-menu-porte {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 6px;
    padding: 8px 0 8px;
  }
  .site-menu-porte::before { left: -22px; width: 10px; }
  .site-menu-porte:hover::before, .site-menu-porte:focus-within::before { width: 18px; }

  .site-menu-porte__titre {
    font-size: clamp(1.9rem, 8.4vw, 2.5rem);
  }
  .site-menu-porte__desc { margin: 0; font-size: 0.9rem; }
  .site-menu-porte__enfants { grid-template-columns: minmax(0, 1fr); margin-top: 2px; }
  .site-menu-porte__enfants a { padding: 8px 0; }
  .site-menu-porte__enfants a b { font-size: 1.14rem; }
  .site-menu-porte__enfants a span { font-size: 0.82rem; }

  .site-menu-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .site-menu-cta {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: auto -22px 0;
    padding: 22px 22px calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--plum-deep, #221420) 66%, rgba(34, 20, 32, 0));
  }
  .site-menu-overlay .site-menu-cta__lien {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 56px;
    border-radius: 999px;
    background: var(--bordeaux, #7b2c3f);
    color: #fcfaf6;
    font: 600 1rem/1 var(--sans);
    text-align: center;
    text-decoration: none;
    transition: background 0.3s var(--ease, ease);
  }
  .site-menu-overlay .site-menu-cta__lien:hover,
  .site-menu-overlay .site-menu-cta__lien:focus-visible { background: #6a2436; }

  .site-menu-search {
    flex: none;
    width: 100%;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu-overlay,
  .site-menu-porte,
  .site-menu-porte__enfants,
  .site-menu-porte__titre::after,
  .site-menu-apercu figure {
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

/* ------------------------------------------------------------
   7 · LA BARRE DU HAUT — trois entrées, chacune ouvre ses pages (grand écran, 20/10/2026)
   ------------------------------------------------------------
   « Studio », « Éditions » et « Bibliothèque » ne sont plus trois liens muets : chaque entrée s'ouvre sur ses pages, avec la phrase de chacune
   (au survol à la souris, au premier appui du doigt, ou aux touches Entrée et Flèche bas). Un second appui, ou le premier lien du panneau,
   mène à la page de l'entrée ; sans JavaScript, l'entrée reste un lien vers cette page. Le panneau s'ouvre sous la barre, de la même largeur.
   Les règles sont écrites contre celles de `styles.css` (prod), qui imposent leur style à tout lien de la barre.
   ------------------------------------------------------------ */
.nav-item { position: static; display: flex; align-items: center; }
.nav-parent { display: inline-flex; align-items: center; gap: 0.5em; }
.nav-chev { flex: none; width: 0.72em; height: 0.46em; opacity: 0.7; transition: transform 0.35s var(--ease, ease), opacity 0.3s; }
.nav-item.is-open .nav-chev { transform: rotate(180deg); opacity: 1; }

.nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  white-space: normal;
  cursor: default;
  transition: opacity 0.22s var(--ease, ease), transform 0.36s var(--ease, ease), visibility 0s linear 0.36s;
}
.nav-panel:focus { outline: none; }
/* le pont : la souris traverse l'espace entre la barre et le panneau sans le refermer */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-item.is-open > .nav-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }

.nav-panel__in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
  padding: clamp(24px, 2.6vw, 36px) clamp(26px, 3.2vw, 48px);
  border: 1px solid rgba(56, 43, 63, 0.1);
  border-radius: 30px;
  background: #fcfaf6;
  color: var(--ink, #241722);
  box-shadow: 0 46px 90px -42px rgba(56, 43, 63, 0.55), 0 2px 0 rgba(255, 255, 255, 0.7) inset;
  text-align: left;
  letter-spacing: 0;
}
.nav-panel__tete { grid-column: 1; grid-row: 1; }
.nav-panel__liste { grid-column: 2; grid-row: 1 / span 2; }
.nav-panel__lead { margin: 0; max-width: 18ch; font: 420 clamp(1.5rem, 2.1vw, 1.95rem)/1.12 var(--serif); letter-spacing: -0.02em; color: var(--ink, #241722); }
.nav-panel__texte { margin: 12px 0 0; max-width: 34ch; font: 400 0.95rem/1.55 var(--sans); color: var(--ink-soft, #5f4c5a); }
.nav-panel__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; align-content: start; }
.nav-panel__liste li { min-width: 0; }

:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien {
  position: static;
  display: grid !important;
  gap: 3px;
  align-content: start;
  padding: 14px 18px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: var(--ink, #241722) !important;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none !important;
  text-shadow: none;
  transition: background 0.3s var(--ease, ease);
}
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien::after { content: none !important; }
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien b {
  display: inline-flex;
  align-items: center;
  font: 420 1.3rem/1.15 var(--serif);
  letter-spacing: -0.015em;
  color: inherit;
}
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien b::after {
  content: "→";
  margin-left: 0.5em;
  font: 400 0.7em/1 var(--sans);
  color: var(--bordeaux, #7b2c3f);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--ease, ease), transform 0.4s var(--ease, ease);
}
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien span {
  font: 400 0.88rem/1.4 var(--sans);
  letter-spacing: 0;
  color: var(--ink-soft, #5f4c5a);
}
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien:hover,
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien:focus-visible {
  background: rgba(55, 31, 49, 0.06) !important;
  color: var(--bordeaux, #7b2c3f) !important;
}
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien:hover b::after,
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien:focus-visible b::after { opacity: 1; transform: none; }
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien:focus-visible { outline: 2px solid var(--bordeaux, #7b2c3f); outline-offset: -2px; }
/* la page où l'on se trouve : un point doré avant le titre */
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien[aria-current="page"] b::before {
  content: "";
  width: 0.34em;
  height: 0.34em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--gold, #a18a58);
}

:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__cta {
  position: static;
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  align-self: start;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--bordeaux, #7b2c3f) !important;
  color: #fcfaf6 !important;
  font: 600 0.92rem/1 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition: background 0.3s var(--ease, ease), transform 0.4s var(--ease, ease);
}
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__cta::after { content: none !important; }
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__cta:hover,
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__cta:focus-visible { background: #6a2436 !important; color: #fcfaf6 !important; }
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__cta:focus-visible { outline: 2px solid var(--ink, #241722); outline-offset: 3px; }

/* l'entrée où l'on se trouve : le même trait sous le mot que pour une page courante */
:is(.site-header, .nav) .nav-parent[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.42em;
  text-decoration-color: var(--bordeaux, #7b2c3f);
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-chev, :is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien b::after { transition-duration: 0.001ms !important; transition-delay: 0s !important; }
}
/* MENU:FIN */