/* ===================================================================== menu-code-overrides.css — Adaptations Sentis du module Osmo --------------------------------------------------------------------- Le module original (menu-code.css) est conçu pour un fond SOMBRE. Sentis a un fond clair (--color-bg: #f4f4f4). Ce fichier surcharge uniquement les règles qui doivent être adaptées au thème — il NE modifie PAS menu-code.css (cf. AGENTS.md > Règle 0b). Chargé APRÈS menu-code.css (cf. functions.php). Schéma cible (« design perfect » Osmo sur thème clair) : ┌──────────────────────────────────────────────────────────────┐ │ Top bar (header) : couleur sombre quand fermé → animée vers │ │ couleur claire par le JS quand le menu s'ouvre. │ ├──────────────────────────────────────────────────────────────┤ │ Drawer : TRANSPARENT (comme dans Osmo). Le fond sombre vient │ │ du qui est en couleur sombre dans global.css. Quand │ │ [data-main] glisse à gauche, le body sombre se révèle à │ │ droite et fait office de bg du drawer. │ │ Items : color claire (override ci-dessous). │ │ Frame blanc 1em en HAUT (Osmo) ; bottom collapsé (cf. demande│ │ utilisateur — collé au BG). │ └──────────────────────────────────────────────────────────────┘ ===================================================================== */ /* --------------------------------------------------------------------- 1. Top bar — logo + toggle visibles sur fond clair quand menu fermé --------------------------------------------------------------------- menu-code.css ligne 12 → color: #fff (intented for dark page). Le JS lit getComputedStyle(toggleBtn).color AU PREMIER PAINT pour le "closedColor", puis anime vers getComputedStyle(menuEl).color ("openColor") quand le menu ouvre. Donc : - on met header.color = var(--color-fg) → toggle/logo sombres = visibles - on met menu.color = var(--color-bg) → toggle anime vers clair quand le menu ouvre (où il est devant le drawer sombre). --------------------------------------------------------------------- */ .underlay-nav__header { color: var(--color-fg); } /* --------------------------------------------------------------------- 2. Drawer — items en couleur claire --------------------------------------------------------------------- PAS de background-color ici ! Le drawer reste transparent comme dans l'original Osmo. Le bg sombre vient du (cf. global.css). On override juste la `color` pour que les items soient lisibles sur le bg sombre du body. Le JS lit cette valeur pour openColor du toggle. --------------------------------------------------------------------- */ .underlay-nav__menu { color: var(--color-bg); } /* Lien "courant" (.w--current) — display:flex pour aligner correctement le contenu (le module Osmo ne le fait pas par défaut). */ .underlay-nav__link-large.w--current { display: flex; } /* --------------------------------------------------------------------- 3. Espacement entre items du menu principal --------------------------------------------------------------------- menu-code.css ne met pas de gap sur la liste large → items collés. On ajoute 1em entre chaque

. La liste `.is--small` (socials/quick links) a déjà son propre gap dans menu-code.css → non touchée. --------------------------------------------------------------------- */ .underlay-nav__list:not(.is--small) { gap: 1em; } /* --------------------------------------------------------------------- 4. Border de l'overlay — couleur sombre + bottom collapsé --------------------------------------------------------------------- - menu-code.css ligne 222 → background-color: #fff (frame blanc). On le passe en sombre (#111) pour matcher le drawer (bg du body). - Le radial-gradient des corners doit fader vers la MÊME couleur que le border, sinon raccord visible. On override les 2 gradients. - Demande utilisateur : garder le 1em pour le top, le bottom doit être collé au BG (pas de barre en bas du drawer). On cible le border-row du bas via :last-child et on collapse son contenu. --------------------------------------------------------------------- */ .underlay-nav__border { background-color: #111111; } .underlay-nav__corner { background-image: radial-gradient(circle farthest-side at 0 100%, #fff0 99%, #111111); } .underlay-nav__corner.is--bottom { background-image: radial-gradient(circle farthest-side at 0 0, #fff0 99%, #111111); } .underlay-nav__border-row:last-child .underlay-nav__border { height: 0; } /* Le corner du bas n'a plus de sens sans son border → on le neutralise. (Sans ça, il resterait un carré 2em flottant dans le coin.) */ .underlay-nav__corner.is--bottom { display: none; } /* --------------------------------------------------------------------- 5. Alignement sur les colonnes du site --------------------------------------------------------------------- On aligne : - La barre du haut (logo + bouton Menu) → padding-inline = padding du container site (col 1 left ↔ col 10 right). - Le bg orange du lien `.w--current` à l'intérieur du drawer → s'arrête à column 10 right (au lieu de "déborder" à 2em du bord viewport comme dans le module Osmo). ⚠ On NE TOUCHE PAS à `.underlay-nav__borders` : le corner Osmo est conçu pour s'attacher pile à la jointure du drawer (right edge du border-row = right edge de l'overlay = bord droit du viewport). Ajouter du padding ici crée un gap visible entre le corner et le drawer ("barre chelou" flottant au milieu de l'écran). --------------------------------------------------------------------- */ .underlay-nav__container { padding-inline: var(--container-padding-inline); } /* `.underlay-nav__inner` (contenu du drawer) — on remplace le padding-right de 2em par var(--container-padding-inline) pour que le bg orange du lien `.w--current` (et tout autre contenu du drawer) s'arrête exactement au right edge de la column 10. On garde padding-left à 2em (Osmo) et padding-top à 7.5em pour respecter l'espace sous la barre du haut. `overflow: hidden` (override de `overflow: auto` du module Osmo) : pendant l'animation d'ouverture, les large items sont translatés `xPercent: 25` et les small items `yPercent: 100`. Ces translations créent un overflow temporaire dans le drawer → le navigateur affiche une scrollbar pendant toute la durée du tween (~0.7s), même si le contenu final tient dans le viewport. En forçant `hidden`, on supprime cet artefact visuel sans impact fonctionnel (le contenu du menu est dimensionné pour tenir dans le drawer aux breakpoints supportés). */ .underlay-nav__inner { padding-right: var(--container-padding-inline); overflow: hidden; } /* --------------------------------------------------------------------- 6. Logo Sentis — adaptation du wrapper après remplacement du SVG par --------------------------------------------------------------------- Le module Osmo applique `mix-blend-mode: multiply` sur `.underlay-nav__logo` (line 31 de menu-code.css). C'était pertinent pour le SVG monochrome (`fill="currentColor"`) qui devait se fondre dans le header : sur fond clair, le black du logo restait black ; sur fond sombre, il devenait invisible — mais comme la couleur du logo était `currentColor`, elle suivait `header.color` (animé par le JS Osmo). Avec un couleur (texte navy + icône bicolore), `multiply` produit un rendu sale (le navy se mélange à tout ce qui passe derrière). On désactive le blend-mode → le logo s'affiche tel quel. `aspect-ratio` réservé pour éviter le CLS pendant le chargement de l'image (Lighthouse / Core Web Vitals). 600/217 ≈ 2.7649. --------------------------------------------------------------------- */ .underlay-nav__logo { mix-blend-mode: normal; width: 8em; } .sentis-menu-logo { display: block; width: 100%; height: auto; aspect-ratio: 600 / 217; } /* Quand le menu s'ouvre, le header passe sur fond sombre (drawer + body). Le logo Sentis ayant du texte navy/black, il deviendrait illisible → on l'invert pour afficher la version "claire" du logo (texte clair + icône inversée). `hue-rotate(180deg)` annule la rotation des teintes produite par `invert(1)` → le bleu de l'icône reste bleu (au lieu de passer en orange). Transition synchronisée avec le tween color du header par le JS Osmo (~0.6s). */ .underlay-nav__logo .sentis-menu-logo { transition: filter 0.6s ease; } body[data-menu-status="open"] .underlay-nav__logo .sentis-menu-logo, body:has([data-underlay-nav-toggle][aria-expanded="true"]) .underlay-nav__logo .sentis-menu-logo { filter: invert(1) hue-rotate(180deg); } /* --------------------------------------------------------------------- 7. Lien "page courante" dans le drawer — couleurs du design system --------------------------------------------------------------------- Le module Osmo natif (menu-code.css ligne 144) hardcode : .underlay-nav__link-large.w--current { color: #ededed; background-color: #f85931; } = un orange (#f85931) avec texte gris clair. C'est hors design system (couleur en dur, pas de variable) et incompatible avec notre palette `--color-primary` (lavande clair `#e8eaff`). Override : - bg → `var(--color-primary)` (= la couleur du site, plus de orange hardcodé qui sortait du nulle part). - color → `var(--color-fg)` (noir) : `--color-primary` étant clair, un texte gris/blanc serait illisible. --------------------------------------------------------------------- */ .underlay-nav__link-large.w--current { background-color: var(--color-primary); color: var(--color-fg); }