/* ============================================================ 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) ------------------------------------------------- Le comportement (ouvrir / fermer / Échap) est dans `/js/site-menu.js`, lui aussi partagé. ============================================================ */ /* ------------------------------------------------------------ 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; } /* ------------------------------------------------------------ 2 · L'ÉCRAN DU MENU — fermé par défaut, sans JavaScript ------------------------------------------------------------ Fermé, il est encore dans la page (les liens restent lisibles par Google) mais invisible, inatteignable au doigt et retiré du clavier par l'attribut `inert` que pose le script. L'ouverture se fait au `clip-path` : le voile prune descend du haut. C'est le geste de l'accueil, validé en capture. ------------------------------------------------------------ */ .site-menu-overlay { position: fixed; inset: 0; z-index: 300; display: block; padding: clamp(28px, 5vw, 72px) clamp(22px, 7vw, 110px); /* Fond vert olive, demande de Latifa le 29/07 : le prune profond etait trop sombre et « ne donnait pas envie ». L'olive de la charte est plus lumineux tout en gardant le texte clair parfaitement lisible. */ background: var(--olive); color: #f7f1f5; border-radius: 0; /* Le menu est plus haut que l'écran dès qu'on liste tout le site : il doit défiler LUI-MÊME, à toutes les tailles. Sans ça il reste immobile. `overscroll-behavior: contain` empêche la page derrière de partir quand on arrive en bas de la liste. */ 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.7s var(--ease), visibility 0s 0.7s; } .site-menu-overlay.est-ouvert { clip-path: inset(0 0 0 0); visibility: visible; pointer-events: auto; transition: clip-path 0.7s var(--ease); } /* Pendant que le menu est ouvert, la page derrière ne bouge plus. */ body.menu-open-lock { overflow: hidden; } .site-menu-panel { width: min(1180px, 100%); max-height: none; margin: 0 auto; overflow: visible; padding: 0; background: transparent; color: #f7f1f5; border-radius: 0; box-shadow: none; } /* ------------------------------------------------------------ 3 · L'EN-TÊTE DU PANNEAU — le logo blanc et la croix ------------------------------------------------------------ */ .site-menu-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 74px; } .site-menu-logo { display: block; width: min(290px, 55vw); height: auto; object-fit: contain; } /* Le logo dit déjà « Zellij Studio » : le mot « Menu » ferait doublon. */ .site-menu-title { display: none; } .site-menu-close { flex: none; width: 52px; height: 52px; border: 1px solid rgba(217, 169, 180, 0.45); border-radius: 50%; background: transparent; color: #f7f1f5; font-size: 36px; line-height: 1; cursor: pointer; box-shadow: none; } /* ------------------------------------------------------------ 4 · LES 4 PORTES ET LEURS SOUS-PAGES ------------------------------------------------------------ Refait le 29/07 : le menu montre l'ARBRE du site au lieu de le mettre à plat. Une porte = un numéro doré, un grand titre qui mène à la page mère, et dessous ses pages filles en petit. Les portes sans fille (Commencer, le Kit) portent une phrase courte à la place, pour que la colonne ne fasse pas de trou. 🚨 `.site-menu-portes` est un `