/* ============================================================================ * style-custom.css — Child theme Prime FSE / LPO Vendée * * Ce fichier ne contient QUE les règles qu'on ne peut pas exprimer via * theme.json ou les blocs natifs. Chaque bloc est précédé d'un commentaire * justifiant pourquoi on ne passe pas par les voies natives. * ========================================================================== */ /* --- Wide size fluide : cap à 1600px sur grand écran, 90vw fluide ----------- * Pourquoi du CSS : theme.json a `wideSize: "1600px"` fixe (pour stabilité * de l'UI Mise en page du Site Editor, qui n'accepte pas proprement un * `clamp()` dans son input — risque d'écrasement par le slider). On surcharge * ici la variable CSS générée à partir de theme.json pour avoir un * comportement adaptatif : * - viewport ≥ 1882 px : 1600 px (cap) * - viewport 1294 – 1882 px : 85vw fluide (~15 % de marge totale) * - viewport ≤ 1294 px : 1100 px (cappé par viewport en pratique) * Sur MacBook 14" (viewport ~1512 px) : ~1285 px, marges ~113 px / côté. * Sur Full HD (1920 px) : 1600 px capé, marges ~160 px / côté. * Sur 27" 4K (2560 px) : 1600 px capé, marges ~480 px / côté. * -------------------------------------------------------------------------- */ :root { --wp--style--global--wide-size: clamp(1100px, 85vw, 1600px); } /* --- Content size élargi sur grand écran ----------------------------------- * Le contentSize (largeur des paragraphes, titres et textes courants) reste * à 760 px par défaut (theme.json) — confort de lecture standard avec ~80 * caractères par ligne. Sur très grand écran, on l'élargit progressivement * pour ne pas avoir d'énormes marges vides autour d'une bande de texte fine. * * Le contentSize reste à 760 px sous 1700 px de viewport (laptop, MacBook * 14", écran standard) pour préserver la lecture confort. Au-delà : * - 1700–2200 px : 900 px * - ≥ 2200 px : 1000 px * On reste sous 1100 px max — au-delà, la lecture devient inconfortable. * -------------------------------------------------------------------------- */ @media (min-width: 1700px) { :root { --wp--style--global--content-size: 900px; } } @media (min-width: 2200px) { :root { --wp--style--global--content-size: 1000px; } } /* --- Header pill : overlay au-dessus du hero --------------------------------- * Pourquoi du CSS ici : theme.json n'expose ni `position` ni `z-index`. * Sans ces propriétés, le hero qui a un `margin-top` négatif viendrait * passer PAR-DESSUS le header (puisqu'il vient après dans le DOM). * On ancre donc le wrapper template-part `
` * (généré automatiquement par WP autour de parts/header.html) avec un * `position: relative` + z-index élevé pour qu'il reste visible au-dessus * du hero. C'est le comportement Landscape : le pill flotte, le hero plein * écran passe en arrière-plan. * -------------------------------------------------------------------------- */ header.wp-block-template-part { position: relative; z-index: 20; } /* === Glassmorphisme — block styles « glass » et « glass-dark » ============== * Pourquoi du CSS ici : theme.json n'expose pas la propriété backdrop-filter * (flou d'arrière-plan). C'est l'unique recours pour obtenir l'effet « verre * dépoli ». On enregistre deux block styles via register_block_style() dans * functions.php (sur core/group, core/cover, core/column, core/columns) puis * on attache ces règles CSS via la classe générée par Gutenberg. * * Usage en éditeur : Styles → sélectionner « Verre » ou « Verre sombre ». * * Notes : * - `!important` sur le background pour neutraliser un backgroundColor preset * qui serait défini sur le bloc (Gutenberg sérialise sa propre couleur). * - `border` reste subtil pour ne pas casser l'effet vitré. * - `saturate(180%)` ravive les couleurs du fond filtré (sinon ça lave trop). * - Sur navigateurs sans support backdrop-filter (vieux Firefox), le rendu * retombe sur un fond semi-transparent simple — acceptable. * -------------------------------------------------------------------------- */ .is-style-glass, .is-style-glass-dark { -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: var(--wp--preset--shadow--sm); } /* Verre clair — utile sur fond image lumineux ou sur fond clair général */ .is-style-glass { background-color: rgba(255, 255, 255, 0.55) !important; } /* Verre sombre — utile sur fond image foncé ou sur section colorée (bleu LPO, par exemple). Texte forcé en clair pour rester lisible. Pour les descendants H1-H6 et liens, on doit utiliser `!important` sinon les règles `styles.elements.h1` du theme.json (qui imposent color = lpo-ink) gagnent la spécificité. */ .is-style-glass-dark { background-color: rgba(25, 25, 25, 0.45) !important; color: var(--wp--preset--color--lpo-paper); border-color: rgba(255, 255, 255, 0.08); } .is-style-glass-dark, .is-style-glass-dark :is(p, li, span, strong, em, a, h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--lpo-paper) !important; } /* --- Glass appliqué à core/button ------------------------------------------- * Particularité du bloc Button : la classe `is-style-X` est posée sur le * wrapper `
`, pas sur le `` * qui porte le visuel (background, padding, radius). Il faut donc : * 1. neutraliser les règles globales `.is-style-glass*` sur le wrapper * (sinon il hérite d'une bordure et d'un blur invisibles mais qui * peuvent générer un fantôme de stacking context) * 2. réappliquer l'effet glass sur le `__link` lui-même * -------------------------------------------------------------------------- */ .wp-block-button.is-style-glass, .wp-block-button.is-style-glass-dark { -webkit-backdrop-filter: none; backdrop-filter: none; border: none; box-shadow: none; background-color: transparent !important; } .wp-block-button.is-style-glass > .wp-block-button__link, .wp-block-button.is-style-glass-dark > .wp-block-button__link { -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: var(--wp--preset--shadow--sm); } .wp-block-button.is-style-glass > .wp-block-button__link { background-color: rgba(255, 255, 255, 0.55) !important; } .wp-block-button.is-style-glass-dark > .wp-block-button__link { background-color: rgba(25, 25, 25, 0.45) !important; color: var(--wp--preset--color--lpo-paper) !important; border-color: rgba(255, 255, 255, 0.18); } /* === Block styles « section avec fond illustré » ============================ * Trois variantes pour remplacer le fond crème uni des sections alternées : * - section-topo : motif SVG topographique tileable (lignes ondulées) * - section-carte-rouge : photo "carte rouge" (médiathèque ID 175) opacifiée * - section-carte-papier: photo "cartes papier" (médiathèque ID 176) opacifiée * * Pour les 2 photos : on superpose l'image via un pseudo-élément ::before en * `position:absolute; opacity: 0.12` plutôt que `background-image` direct * sur le bloc — c'est le seul moyen d'avoir un vrai contrôle d'opacité sur * l'image (les blend-modes donnent des résultats imprévisibles selon le * fichier source). `isolation: isolate` crée un stacking context pour que * le z-index négatif du pseudo reste contenu, et `overflow: hidden` évite * que l'image dépasse sur les sections voisines. * -------------------------------------------------------------------------- */ /* Base commune : isolation + overflow pour les sections à fond illustré */ .is-style-section-carte-rouge, .is-style-section-carte-papier { position: relative; isolation: isolate; overflow: hidden; background-color: var(--wp--preset--color--lpo-warm-50); } .is-style-section-carte-rouge::before, .is-style-section-carte-papier::before { content: ""; position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.12; pointer-events: none; } /* Carte rouge — fichier dans le theme (assets/images/patterns/carte-rouge.jpg). Pour changer l'image : remplacer le fichier en gardant le même nom. */ .is-style-section-carte-rouge::before { background-image: url('images/patterns/carte-rouge.jpg'); } /* Cartes papier — fichier dans le theme (assets/images/patterns/carte-papier.jpg). */ .is-style-section-carte-papier::before { background-image: url('images/patterns/carte-papier.jpg'); } /* Motif topographique — fichier vectoriel SVG du theme, répété en tile. Couleur de fond `lpo-warm-50` pour rester dans l'esprit crème mais avec un motif ondulé qui évoque les courbes de niveau d'une carte. */ .is-style-section-topo { background-color: var(--wp--preset--color--lpo-warm-50); background-image: url('images/patterns/topographie.svg'); background-repeat: repeat; background-size: 240px 120px; } /* === Block style « Oiseau — Pie-grièche (gauche) » ========================= * Ajoute une 2e couche d'illustration PNG transparente PAR-DESSUS l'image * background du Cover existant. Utile pour superposer une silhouette * d'oiseau "détourée" sur un hero qui a déjà une photo de fond. * * Mécanique : * - Pseudo-élément `::before` du Cover, position absolute, inset 0 * - `background-image` = illustration PNG transparente * - `background-size: contain` + position `left bottom` pour caler en bas-gauche * - z-index intermédiaire : au-dessus de l'image principale et de l'overlay, * EN-DESSOUS de l'inner-container (pour ne pas masquer le H1/boutons) * - `pointer-events: none` pour ne pas bloquer les clics du contenu * * Pour ajouter d'autres oiseaux plus tard : dupliquer le bloc en changeant * juste le `background-image` (ex. `oiseau-mesange-gauche`, etc.). * -------------------------------------------------------------------------- */ .wp-block-cover.is-style-oiseau-piaf-gauche, .wp-block-group.is-style-oiseau-piaf-gauche { position: relative; } /* Force le contenu à passer au-dessus du pseudo-élément */ .wp-block-cover.is-style-oiseau-piaf-gauche > .wp-block-cover__inner-container, .wp-block-group.is-style-oiseau-piaf-gauche > * { position: relative; z-index: 3; } /* Pseudo-élément qui porte l'illustration superposée. `mix-blend-mode: luminosity` fait que l'illustration affiche uniquement sa luminosité, en empruntant la teinte et la saturation du fond — donc le piaf se "fond" dans les couleurs de l'image background. */ .wp-block-cover.is-style-oiseau-piaf-gauche::before, .wp-block-group.is-style-oiseau-piaf-gauche::before { content: ""; position: absolute; left: 0; bottom: 0; top: 0; width: 50%; background-image: url('images/oiseau-piaf-grieche.png'); background-size: contain; background-position: left bottom; background-repeat: no-repeat; pointer-events: none; z-index: 2; mix-blend-mode: luminosity; } /* Sur mobile, on cache l'illustration pour ne pas encombrer le contenu */ @media (max-width: 781px) { .wp-block-cover.is-style-oiseau-piaf-gauche::before, .wp-block-group.is-style-oiseau-piaf-gauche::before { display: none; } } /* === Sous-menus simples du bloc Navigation ================================= * Pourquoi du CSS : WP n'expose pas dans le panneau de bloc Navigation les * propriétés visuelles (radius, marge top, ombre) du conteneur des sous-menus * déroulants. On les surcharge ici pour reproduire le look "rectangle flottant * arrondi" de Landscape — cohérent avec le header pill au-dessus. * * Périmètre : sous-menus simples gérés par WP core * (`.wp-block-navigation__submenu-container`). Les mega menus Ollie Menu * Designer ont leur propre conteneur et ne sont pas affectés. * * Spécificité : on doit DÉPASSER la spécificité du parent Prime FSE qui pose * son propre style sur le sélecteur * `.wp-block-navigation .has-child .wp-block-navigation__submenu-container` * (3 classes = 0,3,0) avec : * - border-radius: 0 0 6px 6px (dropdown "attaché" au parent) * - box-shadow plus diffuse * - padding asymétrique 10px 0 0 10px * * On ne peut pas s'aligner sur 3 classes : Prime FSE charge en réalité DEUX * feuilles (`prime-fse-parent` ET `prime-fse-style` auto-chargée par WP), * et `prime-fse-style` arrive APRÈS notre `primefsechild-custom` dans le * `` — donc en égalité de spécificité, le parent gagne par ordre. * Solution : passer à 4 classes (`.wp-block-navigation-item.has-child` * compte 2 classes sur le même élément). * * Choix esthétiques : * - radius 12px partout : flotte vraiment, look pill arrondi. * - shadow `card` : ombre douce mais bien visible. * - margin-top 8px : détache du parent (sinon il colle, look daté). * - padding 8px symétrique : annule le `10px 0 0 10px` du parent. * - background blanc opaque : lisibilité maximale. * - hover : background lpo-warm-50 + texte lpo-blue, comme Landscape. * -------------------------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container { background-color: var(--wp--preset--color--lpo-paper); border: 1px solid var(--wp--preset--color--lpo-warm-100); border-radius: 12px; box-shadow: var(--wp--preset--shadow--lg); padding: 8px; margin-top: 20px; /* Min-width généreux : les libellés du menu LPO sont parfois longs (« OFFRE D'EMPLOIS, STAGES ET SERVICES CIVIQUES » mesuré à 413px en non-wrap) et en uppercase 15px + letter-spacing 0.04em, ils s'enroulent vite. 360px laisse ~316px utiles après padding interne (container 8+8 + content 14+14) : les libellés courts/moyens passent sur 1 ligne, les plus longs tiennent en 2 lignes avec de l'air. Le bloc Navigation core n'expose aucun réglage de largeur de sous-menu dans Gutenberg — d'où le CSS. */ min-width: 360px; /* Le sous-menu doit flotter au-dessus du hero plein écran qui suit le header. Le header pill a z-index 20 (cf. règle plus haut), on monte le sous-menu au-dessus de tout stacking context concurrent. */ z-index: 50; } /* WP core (feuille `wp-block-navigation`) réimpose `min-width: 200px` sur le * sous-menu, mais UNIQUEMENT dans ses états visibles — au survol (desktop) * et à l'ouverture au clic (toggle `aria-expanded="true"`) — via deux * sélecteurs à spécificité (0,5,0). C'est précisément au moment où le menu * s'affiche que notre `min-width` de base (0,4,0, ci-dessus) se fait écraser : * on ne voit jamais le 360px. On repasse devant en montant à (0,6,0) — on * reprend les mêmes états visibles en ajoutant `.wp-block-navigation-item` * (une classe de plus, sur le même
  • ). Si une future version de core * change ces sélecteurs, c'est ici qu'il faudra réaligner. */ .wp-block-navigation .wp-block-navigation-item.has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container, .wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { min-width: 360px; } /* Le thème parent Prime FSE ajoute un séparateur 1px gris sous chaque LI * du sous-menu via `.wp-block-navigation .has-child li::after` (position * absolute, bottom 0, left/right 20px, bg rgba(14,14,14,0.2)). Cette * border colle visuellement au bg du hover (le `__content` du hover prend * toute la hauteur du LI). On la supprime — le rythme visuel des items * est déjà donné par leur padding + le hover crème, et le séparateur * apparaîtrait aussi sous le dernier item (moche). */ .wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item::after, .wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container li::after { display: none; } /* Pont invisible entre l'item parent et le sous-menu. * Sans ce pont, quand la souris descend du label parent vers le sous-menu, * elle traverse les 20px de `margin-top` qui sont HORS de la bounding box * du LI parent → le `:hover` se perd → le sous-menu se referme avant que * la souris ne l'atteigne. Le ::before couvre exactement cette zone, en * tant que descendant du sous-menu (lui-même descendant du LI parent), * il maintient le `:hover` actif sur toute la chaîne. * IMPORTANT : la `height` du pont doit toujours égaler le `margin-top` du * sous-menu. Si tu changes l'un, change l'autre. */ .wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container::before { content: ""; position: absolute; /* R43 (18/09/2026) : le pont part du bord INTÉRIEUR du panneau, qui a 1px de bordure. Avec 20px pour 20px de marge, il restait une bande de 1px non couverte juste sous l'entrée : en passant vite on la sautait, en passant lentement (trackpad) le survol s'y perdait et le panneau se refermait. 24px = marge 20 + bordure 1 + 3 de recouvrement sur l'entrée (sans effet, c'est déjà la zone survolée). */ top: -24px; left: 0; right: 0; height: 24px; /* Pas de background : le pont reste invisible, on veut seulement capturer le pointeur. */ } /* R43 — volets latéraux (niveau 2 → 3, ex. Nos actions › Informer › Presse) : ils s'ouvrent À DROITE de l'entrée, avec `margin-left: 4px` (règle plus bas) + 1px de bordure. Le pont hérité ci-dessus se plaçait AU-DESSUS du volet, donc à côté du problème : il restait un trou vertical de 5px entre l'entrée et son volet. On le remet sur le flanc gauche, sur toute la hauteur du volet. 16px = marge 4 + bordure 1 + recouvrement sur le padding du panneau parent. IMPORTANT : si `margin-left` du volet change, élargir ce pont d'autant. */ .wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container::before { top: 0; bottom: 0; left: -16px; right: auto; width: 16px; height: auto; } /* Le menu mobile (overlay) n'a ni survol ni volets flottants : pas de pont. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container::before { display: none; } /* === R43 (18/09/2026) — TOLÉRANCE DE SURVOL DES SOUS-MENUS (desktop) ========== * Problème : en visant directement un item du volet (ex. Nos actions › Informer › * Presse), la souris part en DIAGONALE, sort de « Informer » par le bas et traverse * du vide avant d'atteindre le volet, qui se refermait aussitôt. Au trackpad, c'était * inutilisable. Trois mesures, en CSS pur : * * 1. DÉLAI DE FERMETURE (0,34 s). Le cœur ferme un sous-menu avec `width:0; height:0`, * propriétés qui ne savent pas attendre. On les neutralise et on ferme à la place par * `visibility` + `transform: scale(0)`, qui acceptent un `transition-delay`. * `scale(0)` (et non un simple `visibility:hidden`) pour qu'un volet fermé ne crée * aucun débordement horizontal de la page. * 2. PAS DE DÉLAI ENTRE VOISINS : dès qu'une autre entrée du même niveau est survolée, * les autres panneaux se ferment tout de suite — sinon deux volets se superposent. * 3. ZONE DE RATTRAPAGE sous la DERNIÈRE entrée d'un panneau (là où il n'y a rien à * survoler d'autre) : tant que la souris descend vers le volet, elle reste « dedans ». * * Limite connue : une diagonale qui part d'une entrée du MILIEU croise les entrées * voisines, qui prennent légitimement la main. Seul un script (« triangle de sécurité ») * sait trancher ce cas ; le geste horizontal puis vertical, lui, fonctionne partout. * Hors périmètre : mega menus Ollie (autre balisage) et menu mobile (overlay). * -------------------------------------------------------------------------- */ @media (min-width: 1100px) and (hover: hover) { .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container { width: auto; height: auto; overflow: visible; min-width: 360px; transform: scale(0); transform-origin: 0 0; transition: opacity 0.12s linear 0.22s, visibility 0s linear 0.34s, transform 0s linear 0.34s; } /* États ouverts (survol, clic sur le chevron, clavier) : immédiats. */ .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container, .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container, .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container { transform: none; transition: opacity 0.1s linear 0s, visibility 0s linear 0s, transform 0s linear 0s; } /* 2. Une entrée voisine est survolée : les autres ferment sans attendre. */ .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) :is(.wp-block-navigation__container, .wp-block-navigation__submenu-container):has(> li:hover) > .wp-block-navigation-item.has-child:not(:hover):not(:focus-within) > .wp-block-navigation__submenu-container { transition-delay: 0s, 0s, 0s; transition-duration: 0s, 0s, 0s; } /* 3. Zone de rattrapage sous la dernière entrée (volet latéral uniquement). Le volet démarre 8px au-dessus de son entrée, haute d'environ 44px : la zone commence donc à 52px. */ .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .wp-block-navigation-item.has-child:last-child > .wp-block-navigation__submenu-container::after { content: ""; position: absolute; top: 52px; bottom: 0; right: 100%; width: 360px; } } /* === R62 (21/09/2026) — DERNIER NIVEAU DU MENU : À PLAT, PAS EN VOLET (desktop) =========== * Un troisième volet latéral sort de l écran (vu sur Nos actions › Agriculture et biodiversité › * Ferme en fête › Bilan : le volet partait à 1 460 px du bord gauche). Le bloc Navigation du cœur * ne sait pas détecter un débordement ni ouvrir à gauche. À cette profondeur, les entrées sont * peu nombreuses (1 à 3) : on les affiche donc en liste indentée, TOUJOURS visible, sous leur * entrée parente, dans le panneau lui-même. Rien à viser à la souris, et lisible au tactile. * Profondeur visée : un conteneur de sous-menu imbriqué dans DEUX autres (barre › panneau › * volet › ICI). Les deux premiers niveaux gardent leurs volets. Menu mobile : non concerné. * Spécificité : on reprend le sélecteur de R43 avec un niveau de conteneur en plus. * -------------------------------------------------------------------------- */ @media (min-width: 1100px) { .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child:not(.open-always) { flex-wrap: wrap; } .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container, .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child:not(.open-always):hover > .wp-block-navigation__submenu-container, .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child:not(.open-always):focus-within > .wp-block-navigation__submenu-container { position: static; flex: 1 1 calc(100% - 14px); /* 14px = la marge gauche, sinon la liste dépasse du panneau */ box-sizing: border-box; width: auto; height: auto; min-width: 0; overflow: visible; visibility: visible; opacity: 1; transform: none; transition: none; margin: 0 0 6px 14px; padding: 0 0 0 6px; background: transparent; border: 0; border-left: 2px solid var(--wp--preset--color--lpo-warm-100); border-radius: 0; box-shadow: none; } /* Ni pont de survol ni zone de rattrapage : il n y a plus de volet à rejoindre. */ .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container::before, .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container::after { display: none; } /* Plus rien à ouvrir : le chevron disparaît. */ .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-icon { display: none; } /* Entrées un ton en dessous de leur parente. */ .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding-top: 6px; padding-bottom: 6px; font-size: 0.93em; font-weight: 500; } } /* Items du sous-menu : padding confortable + radius interne pour que le hover reste dans le rectangle arrondi (sinon le hover déborde aux coins). */ .wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 14px; border-radius: 8px; color: var(--wp--preset--color--lpo-ink); transition: background-color 0.15s ease, color 0.15s ease; } /* Le `__content` est en `display: flex` (pour aligner le chevron à droite * sur les items qui ont un sous-sous-menu). Conséquence : `text-wrap` posé * sur lui ne s'applique PAS au texte des enfants. Le texte réel est dans * `.wp-block-navigation-item__label` (span enfant du ), c'est là qu'il * faut équilibrer le wrapping. * * `text-wrap: balance` répartit les mots harmonieusement quand le libellé * wrap — au lieu d'une ligne 1 longue et une ligne 2 courte, on obtient * deux lignes de longueur proche. Supporté Chrome 114+, Safari 17.4+, * Firefox 121+. Fallback gracieux : wrapping classique. */ .wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__label { text-wrap: balance; } .wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus { background-color: var(--wp--preset--color--lpo-warm-50); color: var(--wp--preset--color--lpo-blue); } /* Sous-sous-menu (niveau 3+) : on remonte légèrement et on décale à droite pour ne pas chevaucher le parent. WP positionne déjà en absolute, on ajuste uniquement margin-top et l'offset latéral. */ .wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { margin-top: -8px; margin-left: 4px; } /* Chevron d'ouverture du sous-menu : un poil d'espace pour ne pas qu'il colle au libellé. */ .wp-block-navigation .wp-block-navigation__submenu-icon { padding-left: 4px; } /* === Mise en avant d'un parcours dans le menu ============================== * Classe utilitaire `lpo-menu-accent`, a poser sur une entree de navigation * depuis l'editeur (panneau « Avancé » > classes CSS additionnelles). Elle * pose un fond « Bleu grand large » (charte) et un texte blanc, pour signaler un * chemin prioritaire (avant le 02/09 : simple bleu LPO gras). * Posee aujourd'hui sur le parcours vers le benevolat : « Adhérer à la LPO », * « Être bénévole de la LPO Vendée », « Actions bénévoles de la LPO85 ». * * Specificite : les items de sous-menu sont deja colores en `lpo-ink` par la * regle du dropdown plus haut (0,4,0) ; on monte donc a (0,5,0) pour la battre * dans les deux contextes (barre principale et sous-menu). * -------------------------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation-item.lpo-menu-accent > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.lpo-menu-accent > .wp-block-navigation-item__content { /* 02/09 (R14) : fond « Bleu grand large » de la charte (jeton lpo-grand-large, #006982, Pantone 7469 C) et texte blanc, a la place du simple bleu LPO gras. Le padding 10px 14px et le radius 8px viennent deja de la regle des items de sous-menu : la classe ne fait que remplir la boite. */ background-color: var(--wp--preset--color--lpo-grand-large); color: var(--wp--preset--color--lpo-paper); font-weight: 700; } /* Survol/focus : la regle generique du sous-menu (0,5,1) eclaircit le fond ; sur un fond plein on passe au bleu LPO pour garder du contraste avec le texte blanc. */ .wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item.lpo-menu-accent > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item.lpo-menu-accent > .wp-block-navigation-item__content:focus, .wp-block-navigation .wp-block-navigation-item.lpo-menu-accent > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.lpo-menu-accent > .wp-block-navigation-item__content:focus-visible { background-color: var(--wp--preset--color--lpo-blue); color: var(--wp--preset--color--lpo-paper); } /* === Bascule hamburger anticipée (≤ 1023px) ================================ * Problème : la barre de menu (6 entrées + logo + bouton « Mon espace ») * a besoin d'environ 1468px pour tenir sur une seule ligne. Avec le pill en * `clamp(1100px, 85vw, 1600px)`, elle ne tient inline qu'au-dessus de * ~1700px de viewport → en dessous, elle wrappe sur plusieurs lignes. * * Le hamburger natif de WP (overlay plein écran) ne s'active lui qu'en * dessous de 600px, via deux règles core dans `@media (min-width: 600px)` : * - cache le bouton hamburger : `.…-open:not(.always-shown)` (0,2,0) * - affiche le menu inline : `.…container:not(.hidden-by-default):not(.is-menu-open)` (0,3,0) * * On relève ce seuil à 1100px (ajusté 03/08 : pill bloqué à 1100px de large en dessous) : sur tablette + mobile on bascule sur * l'overlay (qui supprime tout wrap), au-dessus de 1024px la barre inline * reste. On surcharge les deux règles core dans la plage 600 → 1023.98px, * sans `!important`, en dépassant leur spécificité. L'état `.is-menu-open` * n'est jamais ciblé → l'overlay s'ouvre normalement au clic à ces largeurs * (vérifié : le mécanisme overlay n'est pas borné par un min-width). * -------------------------------------------------------------------------- */ @media (min-width: 600px) and (max-width: 1099.98px) { /* Réafficher le bouton hamburger (0,3,0 > core 0,2,0). */ .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } /* Masquer le menu inline tant qu'il n'est pas ouvert en overlay (0,5,0 > core 0,3,0). */ .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } /* === Aplatissement des sous-menus dans l'overlay mobile ==================== * Dans l'overlay plein écran (`.is-menu-open`), nos sous-menus héritent du * style « carte flottante » conçu pour le dropdown desktop (radius, ombre, * min-width 360, marge top + pont ::before) — empilés dans l'overlay, ça * donne des cartes incohérentes. On les remet à plat : pleine largeur, pas * d'ombre/bordure/radius, légère indentation pour matérialiser la hiérarchie. * * Spécificité : on préfixe par `.wp-block-navigation` pour atteindre (0,6,0) * et, placé après, ce bloc gagne aussi sur l'override min-width (0,6,0) du * dropdown desktop, qui pourrait sinon réimposer 360px sur les sous-menus * dont le toggle est `aria-expanded="true"` dans l'overlay. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container { position: static; box-shadow: none; border: none; border-radius: 0; background: transparent; min-width: 0; margin-top: 0; padding: 0 0 0 12px; } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container::before { display: none; /* pas de pont invisible dans l'overlay */ } /* === MON ESPACE (plugin elito-mon-espace) ================================= * Habillage des onglets (bloc elito/nav), de la zone de rendu (elito/outlet), * des formulaires et des messages. 100% tokens theme.json LPO : aucune valeur * en dur (couleurs/espacements/ombres/radius viennent des presets du child). * Le plugin reste sans présentation ; tout le style vit ici, côté thème. */ /* Barre au-dessus des onglets : Tableau de bord (gauche) + Déconnexion (droite). */ .mespace-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--wp--preset--spacing--small); margin-bottom: var(--wp--preset--spacing--small); } .mespace-bar__left { display: flex; align-items: center; gap: var(--wp--preset--spacing--small); flex-wrap: wrap; } .mespace-bar__home, .mespace-bar__admin, .mespace-bar__logout { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-family: var(--wp--preset--font-family--sora); font-weight: 600; font-size: var(--wp--preset--font-size--small); text-decoration: none; color: var(--wp--preset--color--lpo-warm-700); transition: background-color 0.15s ease, color 0.15s ease; } .mespace-bar__home:hover, .mespace-bar__logout:hover { color: var(--wp--preset--color--lpo-blue); background: var(--wp--preset--color--lpo-warm-50); } /* Bouton admin : bordé bleu pour le distinguer comme une action. */ .mespace-bar__admin { border: 1px solid var(--wp--preset--color--lpo-blue); color: var(--wp--preset--color--lpo-blue); } .mespace-bar__admin:hover { background: var(--wp--preset--color--lpo-blue); color: var(--wp--preset--color--lpo-paper); } .mespace-bar .mespace-ic { flex: none; } /* Onglets : pills horizontales scrollables, actif = bleu LPO plein. */ .mespace-nav__list { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--small); list-style: none; margin: 0 0 var(--wp--preset--spacing--normal); padding: 0; } .mespace-nav__item { margin: 0; } .mespace-tab { display: inline-block; padding: 10px 22px; border-radius: 999px; background: var(--wp--preset--color--lpo-warm-100); color: var(--wp--preset--color--lpo-ink); font-family: var(--wp--preset--font-family--sora); font-weight: 600; font-size: var(--wp--preset--font-size--small); letter-spacing: 0.02em; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .mespace-tab:hover, .mespace-tab:focus-visible { background: var(--wp--preset--color--lpo-warm-50); box-shadow: var(--wp--preset--shadow--pill); } .mespace-tab.is-active { background: var(--wp--preset--color--lpo-blue); color: var(--wp--preset--color--lpo-paper); box-shadow: var(--wp--preset--shadow--glow-blue); } /* Onglets réservés aux gestionnaires/admins : teinte orange pour distinguer * d'un coup d'œil ce qui s'adresse aux admins (vs aux membres). * Ajouter ici le slug de tout nouvel onglet admin (classe mespace-tab--{slug}). */ .mespace-tab--documents, .mespace-tab--admin-benevolat { color: var(--wp--preset--color--lpo-orange); box-shadow: inset 0 0 0 1px var(--wp--preset--color--lpo-orange); } .mespace-tab--documents:hover, .mespace-tab--documents:focus-visible, .mespace-tab--admin-benevolat:hover, .mespace-tab--admin-benevolat:focus-visible { background: color-mix(in srgb, var(--wp--preset--color--lpo-orange) 14%, var(--wp--preset--color--lpo-warm-50)); } .mespace-tab--documents.is-active, .mespace-tab--admin-benevolat.is-active { background: var(--wp--preset--color--lpo-orange); color: var(--wp--preset--color--lpo-paper); box-shadow: none; } /* Conteneur dashboard : padding vertical (insensible au margin-collapsing du * thème) pour garantir l'air en haut et en bas, sans coller header/footer. */ .mespace-dashboard { padding-block: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--section-tight); } /* Zone de rendu de la section courante : panneau crème qui porte des cartes. */ .mespace-outlet { background: var(--wp--preset--color--lpo-warm-50); border-radius: 16px; box-shadow: var(--wp--preset--shadow--card); padding: var(--wp--preset--spacing--medium); } /* Accueil rendu « nu » : pas de panneau crème, la page gère ses propres fonds. */ .mespace-outlet--bare { background: none; box-shadow: none; padding: 0; } /* Carte blanche posée sur le panneau crème (ex. « Mon profil », « Mes infos »). */ .mespace-card { background: var(--wp--preset--color--lpo-paper); border-radius: 14px; box-shadow: var(--wp--preset--shadow--sm); padding: var(--wp--preset--spacing--normal); } .mespace-card + .mespace-card { margin-top: var(--wp--preset--spacing--medium); } .mespace-card > :first-child { margin-top: 0; } .mespace-card > :last-child { margin-bottom: 0; } .mespace-card h2 { margin-bottom: var(--wp--preset--spacing--small); } /* Grille de cartes vers les sections (bloc « Cartes de l'espace »). */ .mespace-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--wp--preset--spacing--medium); } /* Espace entre le message de bienvenue (carte) et la grille de cartes. */ .mespace-card + .mespace-cards, .wp-block-group + .mespace-cards { margin-top: var(--wp--preset--spacing--normal); } /* Placeholder d'aperçu des blocs dynamiques dans l'éditeur. */ .mespace-editor-ph { border: 1px dashed var(--wp--preset--color--lpo-warm-300, #a8a095); border-radius: 12px; padding: var(--wp--preset--spacing--normal); text-align: center; background: var(--wp--preset--color--lpo-warm-50, #f7f4ee); } .mespace-editor-ph__title { display: block; font-family: var(--wp--preset--font-family--lpo); font-size: var(--wp--preset--font-size--medium); } .mespace-editor-ph__desc { margin: 6px 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--lpo-warm-700); } .mespace-section-card { display: flex; flex-direction: column; gap: 8px; background: var(--wp--preset--color--lpo-paper); border-radius: 14px; border-top: 3px solid var(--wp--preset--color--lpo-blue); box-shadow: var(--wp--preset--shadow--card); padding: var(--wp--preset--spacing--normal); text-decoration: none; color: var(--wp--preset--color--lpo-ink); transition: box-shadow 0.15s ease, transform 0.05s ease; } .mespace-section-card:hover { box-shadow: var(--wp--preset--shadow--lg); transform: translateY(-2px); } .mespace-section-card__title { font-family: var(--wp--preset--font-family--lpo); font-weight: 700; font-size: var(--wp--preset--font-size--large); line-height: 1.15; } .mespace-section-card__desc { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--lpo-warm-700); } .mespace-section-card__more { margin-top: auto; font-family: var(--wp--preset--font-family--sora); font-weight: 600; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--lpo-blue); } .mespace-section-card__more::after { content: " →"; } /* Formulaires : champs empilés, libellés en Sora. */ .mespace-form { margin: 0; } .mespace-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--wp--preset--spacing--medium); } .mespace-field > label, .mespace-field > legend { font-family: var(--wp--preset--font-family--sora); font-weight: 600; font-size: var(--wp--preset--font-size--small); } .mespace-form input[type="text"], .mespace-form input[type="email"], .mespace-form input[type="password"] { width: 100%; max-width: 460px; padding: 10px 14px; border: 1px solid var(--wp--preset--color--lpo-warm-100); border-radius: 10px; background: var(--wp--preset--color--lpo-paper); font-size: var(--wp--preset--font-size--normal); } .mespace-form input:focus { outline: none; border-color: var(--wp--preset--color--lpo-blue); box-shadow: var(--wp--preset--shadow--glow-blue); } .mespace-hint { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--lpo-warm-700); } .mespace-optin, .mespace-form fieldset { border: 1px solid var(--wp--preset--color--lpo-warm-100); border-radius: 12px; padding: var(--wp--preset--spacing--medium); } .mespace-radio { display: block; margin: 4px 0; } /* Boutons des formulaires du plugin : pill conforme au thème (comme core/button). */ .mespace-actions .wp-element-button { display: inline-block; border: 0; border-radius: 999px; padding: 14px 28px; background: var(--wp--preset--color--lpo-blue); color: var(--wp--preset--color--lpo-paper); font-family: var(--wp--preset--font-family--sora); font-weight: 700; font-size: var(--wp--preset--font-size--normal); line-height: 1; cursor: pointer; transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } .mespace-actions .wp-element-button:hover { background: var(--wp--preset--color--lpo-ink); box-shadow: var(--wp--preset--shadow--md); } .mespace-actions .wp-element-button:active { transform: translateY(1px); } /* Conseil mot de passe robuste (page réinitialisation). */ .mespace-pw-tip { background: var(--wp--preset--color--lpo-warm-100); border-radius: 10px; padding: 10px 14px; margin: 0 0 var(--wp--preset--spacing--medium); } /* === Connexion : message de bienvenue + carte habillant wp_login_form ====== */ .mespace-login { max-width: 440px; margin-inline: auto; /* L'air vertical est porté par .mespace-dashboard (padding, anti-collapsing). */ } /* Avec panneau de bienvenue : passage en deux colonnes, plus large. */ .mespace-login.has-welcome { max-width: 980px; } .mespace-login__layout { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--wp--preset--spacing--normal); } .mespace-login.has-welcome .mespace-login__card, .mespace-login.has-welcome .mespace-login__welcome { flex: 1 1 360px; } /* Panneau de bienvenue : bloc bleu LPO, texte clair. */ .mespace-login__welcome { background: var(--wp--preset--color--lpo-blue); color: var(--wp--preset--color--lpo-paper); border-radius: 18px; box-shadow: var(--wp--preset--shadow--panel); padding: var(--wp--preset--spacing--large); } .mespace-login__welcome > :first-child { margin-top: 0; } .mespace-login__welcome > :last-child { margin-bottom: 0; } .mespace-login__welcome strong { font-family: var(--wp--preset--font-family--lpo); font-weight: 700; font-size: var(--wp--preset--font-size--large); line-height: 1.2; display: inline-block; margin-bottom: 4px; } .mespace-login__welcome a { color: var(--wp--preset--color--lpo-paper); text-decoration: underline; } .mespace-login__card { background: var(--wp--preset--color--lpo-paper); border-radius: 18px; border-top: 4px solid var(--wp--preset--color--lpo-blue); box-shadow: var(--wp--preset--shadow--panel); padding: var(--wp--preset--spacing--large); } .mespace-login__title { margin: 0 0 6px; font-family: var(--wp--preset--font-family--lpo); font-weight: 900; font-size: var(--wp--preset--font-size--big); color: var(--wp--preset--color--lpo-ink); } .mespace-login__intro { margin: 0 0 var(--wp--preset--spacing--normal); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--lpo-warm-700); } /* Champs du formulaire natif (#loginform) */ .mespace-login #loginform p { margin: 0 0 var(--wp--preset--spacing--medium); } .mespace-login #loginform label { display: block; margin-bottom: 6px; font-family: var(--wp--preset--font-family--sora); font-weight: 600; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--lpo-ink); } .mespace-login #loginform input.input, .mespace-login #loginform input[type="text"], .mespace-login #loginform input[type="password"] { width: 100%; padding: 11px 14px; border: 1px solid var(--wp--preset--color--lpo-warm-100); border-radius: 10px; background: var(--wp--preset--color--lpo-warm-50); font-size: var(--wp--preset--font-size--normal); box-sizing: border-box; } .mespace-login #loginform input.input:focus, .mespace-login #loginform input[type="password"]:focus { outline: none; border-color: var(--wp--preset--color--lpo-blue); background: var(--wp--preset--color--lpo-paper); box-shadow: var(--wp--preset--shadow--glow-blue); } /* « Se souvenir de moi » : case + libellé en ligne, discret */ .mespace-login #loginform .login-remember label { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--wp--preset--color--lpo-warm-700); } .mespace-login #loginform .login-remember input { margin: 0; } /* Bouton : pill bleu LPO pleine largeur */ .mespace-login #loginform .login-submit { margin-bottom: 0; } .mespace-login #loginform #wp-submit { width: 100%; padding: 13px 28px; border: 0; border-radius: 999px; background: var(--wp--preset--color--lpo-blue); color: var(--wp--preset--color--lpo-paper); font-family: var(--wp--preset--font-family--sora); font-weight: 700; font-size: var(--wp--preset--font-size--normal); letter-spacing: 0.02em; cursor: pointer; transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } .mespace-login #loginform #wp-submit:hover { background: var(--wp--preset--color--lpo-ink); box-shadow: var(--wp--preset--shadow--md); } .mespace-login #loginform #wp-submit:active { transform: translateY(1px); } /* Lien mot de passe oublié, centré et discret */ .mespace-lostpassword { margin: var(--wp--preset--spacing--medium) 0 0; text-align: center; font-size: var(--wp--preset--font-size--small); } /* CTA inscription sous le formulaire de connexion */ .mespace-login__register { margin-top: var(--wp--preset--spacing--medium); padding-top: var(--wp--preset--spacing--medium); border-top: 1px solid var(--wp--preset--color--lpo-warm-100); text-align: center; } .mespace-login__register p { margin: 0 0 var(--wp--preset--spacing--small); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--lpo-warm-700); } .mespace-btn-secondary { display: inline-block; padding: 11px 24px; border-radius: 999px; background: var(--wp--preset--color--lpo-orange); color: var(--wp--preset--color--lpo-paper); font-family: var(--wp--preset--font-family--sora); font-weight: 700; text-decoration: none; transition: background-color 0.15s ease; } .mespace-btn-secondary:hover { background: var(--wp--preset--color--lpo-ink); } /* === Inscription ========================================================== */ .mespace-register { max-width: 640px; margin-inline: auto; background: var(--wp--preset--color--lpo-warm-50); border-radius: 18px; border-top: 4px solid var(--wp--preset--color--lpo-blue); box-shadow: var(--wp--preset--shadow--panel); padding: var(--wp--preset--spacing--large); } .mespace-register__title { margin: 0 0 var(--wp--preset--spacing--normal); font-family: var(--wp--preset--font-family--lpo); font-weight: 900; font-size: var(--wp--preset--font-size--big); color: var(--wp--preset--color--lpo-ink); } .mespace-register__back { margin: var(--wp--preset--spacing--normal) 0 0; text-align: center; font-size: var(--wp--preset--font-size--small); } /* Honeypot : invisible pour les humains, présent pour les bots. */ .mespace-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* Messages (PRG). */ .mespace-notice { margin: 0 0 var(--wp--preset--spacing--normal); padding: 12px 18px; border-radius: 10px; font-size: var(--wp--preset--font-size--small); } .mespace-notice--success { background: rgba(0, 135, 205, 0.10); color: var(--wp--preset--color--lpo-warm-700); } .mespace-notice--error { background: rgba(245, 95, 25, 0.12); color: var(--wp--preset--color--lpo-warm-700); } .mespace-notice--info { background: var(--wp--preset--color--lpo-warm-100); color: var(--wp--preset--color--lpo-warm-700); } /* lpo-footer-menu-hover — Menu du footer : blanc par défaut (réglage du bloc), survol/focus en « Footer light blue » (palette). Scopé au footer uniquement, le menu du header n est pas concerné. */ footer.wp-block-template-part .wp-block-navigation a:hover, footer.wp-block-template-part .wp-block-navigation a:focus-visible { color: var(--wp--preset--color--footer-light-blue) !important; } /* lpo-header-menu-fluid — Menu du header : jamais de passage à la ligne. La police (clamp posé sur le bloc nav) et le gap ci-dessous se compressent proportionnellement avec le viewport ; les libellés et le bouton restent insécables. Scopé au pill du header uniquement. */ /* ⚠️ `:not(.lpo-megamenu__mois)` : la nav des 12 mois du mega menu vit elle aussi DANS `.lpo-header-pill`. Sans l'exclusion, ce `gap !important` (prevu pour serrer la barre du header) ecrasait le gap de sa grille et etalait les mois sur toute la hauteur du panneau. L'exclusion porte sur le UL et NON sur le nav : la nav du mega menu est imbriquee dans la nav principale, qui resterait un ancetre valide. Meme exclusion pour `.is-style-lpo-liste` (menu des secteurs, R7 02/09). */ .lpo-header-pill nav.wp-block-navigation ul.wp-block-navigation__container:not(.lpo-megamenu__mois):not(.is-style-lpo-liste) { flex-wrap: nowrap !important; gap: clamp(7px, 1vw, 18px) !important; } .lpo-header-pill .wp-block-navigation-item__label, .lpo-header-pill .wp-block-button__link { white-space: nowrap; } /* lpo-header-logo-fluid — logo du header : 122px de base, plancher 100px. Le conteneur logo et le bouton sont exclus de la compression flex (sinon max-width:100% + shrink écrasent le logo). */ .lpo-header-pill > .wp-block-group:first-child, .lpo-header-pill .wp-block-site-logo, .lpo-header-pill .wp-block-buttons { flex-shrink: 0; } .lpo-header-pill .wp-block-site-logo img { width: clamp(110px, 12.5vw - 40px, 140px) !important; max-width: none !important; height: auto !important; } /* lpo-header-menu-fluid (suite) — le toggle du mega menu reste sur une ligne (libellé + chevron insécables, comme les autres items). ⚠️ `white-space: nowrap` UNIQUEMENT sur le toggle : pose sur `.wp-block-ollie-mega-menu` (le
  • qui contient AUSSI le panneau), il etait herite par tout le contenu du mega menu — titres d'events, legendes, libelles — qui refusaient alors de passer a la ligne et debordaient sur la colonne voisine. */ .lpo-header-pill .wp-block-ollie-mega-menu { flex-wrap: nowrap; } .lpo-header-pill .wp-block-ollie-mega-menu__toggle { white-space: nowrap; flex-wrap: nowrap; } /* lpo-header-pill élargi — le pill seul dépasse un peu la wide-size globale (88vw au lieu de 85vw) pour absorber logo/menu dans la bande 1200-1300px où la wide-size est figée à son plancher de 1100px. */ .lpo-header-pill.alignwide { max-width: clamp(1100px, 88vw, 1600px); } /* === MEGA MENU « Nos RDV » (Ollie Menu Designer) =========================== * Contenu : template part `dropdown-menu` (post wp_template_part en BASE, pas * un fichier du thème) — 4 colonnes : prochains RDV (widget EM) / les mois / * les secteurs géographiques / l'affiche de l'année + CTA. * * Pourquoi du CSS : ni le bloc Navigation ni le bloc Catégories n'exposent de * mise en grille ni de style de liste dans l'éditeur. Tout le reste (couleurs, * arrondis, espacements, largeurs de colonnes) est piloté depuis l'éditeur et * ne doit PAS être surchargé ici. * * Scope : `.lpo-megamenu` (classe posée sur le Group racine du template part). * -------------------------------------------------------------------------- */ /* Le style de bloc `is-style-glass` du theme impose `background-color: rgba(255,255,255,.55) !important` — la valeur posee sur le bloc dans l'editeur (#fffffff0) ne passait donc jamais, et le hero defilait sous le panneau au point de gener la lecture. On remonte l'opacite ici ; le `!important` est obligatoire pour repasser devant le style de bloc. */ .lpo-megamenu.is-style-glass { background-color: rgba(255, 255, 255, 0.92) !important; } /* Le panneau doit rester lisible même quand une colonne est très haute : les colonnes s'alignent en haut et ne s'étirent pas les unes sur les autres. */ .lpo-megamenu .wp-block-columns { align-items: flex-start; } /* --- Appel a l'action en pied de colonne ----------------------------------- * Un bouton pill orange par colonne, TOUS alignes sur la meme ligne en bas du * panneau quelle que soit la hauteur du contenu au-dessus. * Le bloc Colonne n'expose pas de layout flex dans l'editeur : on passe la * colonne en colonne flex et on pousse le dernier bloc vers le bas. */ .lpo-megamenu .wp-block-column { display: flex; flex-direction: column; } .lpo-megamenu .lpo-megamenu__cta { margin-top: auto; padding-top: var(--wp--preset--spacing--medium); } /* Le libelle peut passer sur deux lignes (« Voir la page des secteurs → ») : on garde les boutons a la meme hauteur et le texte centre. */ .lpo-megamenu .lpo-megamenu__cta .wp-block-button__link { display: flex; align-items: center; justify-content: center; min-height: 44px; text-align: center; line-height: 1.2; transition: background-color 0.15s ease, color 0.15s ease; } /* Boutons en contour : au survol ils se remplissent, pour que l'etat actif soit lisible (un simple changement de teinte sur du contour se voit mal). ⚠️ `!important` NECESSAIRE : les classes de palette generees par WordPress (`.has-lpo-paper-background-color`, `.has-lpo-orange-color`) portent elles-memes un `!important` — sans lui, le survol etait simplement sans effet. */ .lpo-megamenu .lpo-megamenu__cta .wp-block-button__link:hover, .lpo-megamenu .lpo-megamenu__cta .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--lpo-orange) !important; color: var(--wp--preset--color--lpo-paper) !important; } /* --- Colonne 1 : widget « Prochains rendez-vous » (Events Manager) --------- * Le bloc `events-manager/events` sort toujours un `

    ` de titre ; on le * blanchit par un espace dans l'éditeur (le bloc ignore une chaîne vide et * remet son titre par défaut). Reste un h3 vide à masquer. */ .lpo-megamenu .wp-block-events-manager__title { display: none; } /* Items du widget : EM les rend déjà en rangée « pastille date | infos ». On resserre l'interligne pour tenir 4 RDV sans allonger le panneau. ⚠️ Si les items repassent un jour en pile (pastille pleine largeur au-dessus du titre), le coupable est le CSS legacy de `lpo-events-front/css/event-list.css` qui forçait `flex-direction:column` sur `.em.em-list-widget .em-item` — cf. le commentaire dans ce fichier. */ .lpo-megamenu .em.em-list-widget { gap: 10px; } .lpo-megamenu .em.em-list-widget .em-item-name { line-height: 1.25; } /* Le lien de titre sort en bleu accent EM, en graisse normale : peu lisible sur le fond clair du panneau. On le passe en bleu nuit + gras. `!important` : la feuille pixelbones d'EM colore ses liens avec le sien. */ /* Le widget EM est rendu par le plugin, pas par un bloc : sa typo ne se regle pas dans l'editeur. On lui donne la meme que la grille des mois — la famille « LPO », seule a monter jusqu'a 900 (LPO Black) ; la police de texte du theme plafonne beaucoup plus bas et les titres restaient mous. */ .lpo-megamenu .em.em-list-widget .em-item-name a { color: var(--wp--preset--color--lpo-night) !important; font-family: var(--wp--preset--font-family--lpo); font-weight: 900; font-size: 15px; letter-spacing: -0.01em; } .lpo-megamenu .em.em-list-widget .em-item-name a:hover, .lpo-megamenu .em.em-list-widget .em-item-name a:focus-visible { color: var(--wp--preset--color--lpo-blue) !important; /* soulignement retiré en R45 : le survol passe par le fond de la ligne */ } /* EM pose `flex-wrap:nowrap` sur l'item et ne remet pas `min-width:0` sur le bloc d'infos : un titre long ne peut alors pas passer sous sa largeur de contenu minimale et deborde sur la colonne voisine. */ .lpo-megamenu .em.em-list-widget .em-item-info { min-width: 0; } .lpo-megamenu .em.em-list-widget .em-item-name a { overflow-wrap: anywhere; } /* Les events sans lieu renseigne sortent quand meme la ligne « lieu » : un picto epingle suivi d'un vide. On masque la ligne entiere. */ .lpo-megamenu .em.em-list-widget .em-item-meta-line:has(> span:last-child:empty) { display: none; } /* --- Colonne 2 : les 12 mois en grille ------------------------------------- * Le bloc Navigation ne propose que « horizontal » ou « vertical » ; une liste * verticale de 12 mois fait 12 lignes et déséquilibre tout le panneau. On passe * son conteneur en grille 2 colonnes (6 lignes), en neutralisant le flex vertical * posé par le bloc. */ .lpo-megamenu__mois ul.wp-block-navigation__container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; } .lpo-megamenu__mois .wp-block-navigation-item { margin: 0; display: flex; /* pour que la case remplisse toute la cellule de la grille */ } /* Cases carrees a bordure grise : `aspect-ratio: 1` garde le carre quelle que soit la largeur de la colonne, le flex centre le libelle sur 1 ou 2 lignes. */ .lpo-megamenu__mois .wp-block-navigation-item__content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; padding: 4px; border: 1px solid var(--wp--preset--color--lpo-warm-100); border-radius: 10px; /* Gris clair opaque (jeton `color-6` de la palette) : le blanc plein etait trop dur, et le blanc translucide laissait trop remonter le verre du panneau. Le gris neutre pose les 12 cases sans les faire briller. */ background-color: var(--wp--preset--color--color-6); color: var(--wp--preset--color--lpo-ink); text-align: center; text-decoration: none; line-height: 1.15; font-size: 13px; /* Le retour a la ligne avant l'annee NE se fait PAS en CSS : le libelle est une seule chaine « Mois AAAA ». Essai infructueux avec `word-spacing:100vw` (l'espace geant faisait exploser la largeur min-content du span, les libelles sortaient des cases). Le `
    ` est donc pose dans les LIBELLES du menu 414921 — WordPress passe les labels de navigation-link dans `wp_kses_post()`, qui autorise `
    `. */ transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .lpo-megamenu__mois .wp-block-navigation-item__label { display: block; min-width: 0; } /* Sur un fond gris, le survol doit ECLAIRCIR : passer au creme aurait donne deux teintes proches et illisibles. La case s'allume en blanc, cerclee de bleu. */ .lpo-megamenu__mois .wp-block-navigation-item__content:hover, .lpo-megamenu__mois .wp-block-navigation-item__content:focus-visible { background-color: var(--wp--preset--color--lpo-paper); border-color: var(--wp--preset--color--lpo-blue); color: var(--wp--preset--color--lpo-blue); } /* --- Colonne 3 : secteurs géographiques (bloc Catégories) ------------------ * Le bloc sort un `