@charset "UTF-8"; /* Theme Name: twentytwentyfour-child-prototype Template: twentytwentyfour Description: Thème enfant basé sur Twentytwentyfour, connecté à un design system Figma. Author: Eva Kasal Version: 1.0.0 Text Domain: twentytwentyfour-child */ /* Point d’entrée SCSS Apogei (sera compilé en style.css) */ /* =========================== Tokens globaux Apogei =========================== */ /* * Ce fichier crée des aliases legacy (--apo-*) qui pointent vers : * - Les presets WordPress sémantiques (--wp--preset--color--bg-brand, etc.) * - Les custom properties générées (--apogei--*) * * Sauvegarde : _legacy/_tokens.scss.bak */ :root { /* =========================================== TYPOGRAPHIE =========================================== */ /* Familles de polices (connectées à theme.json) */ --apo-font-heading: var(--wp--preset--font-family--heading); --apo-font-body: var(--wp--preset--font-family--body); /* Tailles de texte (alignées sur theme.json enfant) */ --apo-font-size-body: var(--wp--preset--font-size--body); --apo-font-size-small: var(--wp--preset--font-size--body-sm); --apo-font-size-button: var(--wp--preset--font-size--body-sm); /* =========================================== COULEURS - Nouveaux tokens sémantiques =========================================== */ /* Couleurs brand */ --apo-color-primary: var(--wp--preset--color--bg-brand, #00619B); --apo-color-primary-soft: var(--wp--preset--color--bg-brand-subtle, #e6f0f7); --apo-color-accent: var(--wp--preset--color--bg-accent-green, #76B82A); --apo-color-highlight: var(--wp--preset--color--bg-accent-yellow, #FFC52F); /* Couleurs supplémentaires */ --apo-color-text: var(--wp--preset--color--text-default, #111111); --apo-color-text-secondary: var(--wp--preset--color--text-secondary, #636363); --apo-color-bg: var(--wp--preset--color--bg-default, #f9f9f9); --apo-color-surface: var(--wp--preset--color--bg-surface, #ffffff); /* =========================================== ESPACEMENTS - Aliases vers --apogei--space--* =========================================== */ --apo-space-xs: var(--apogei--space--2xs, 4px); /* 4px */ --apo-space-s: var(--apogei--space--xs, 8px); /* 8px */ --apo-space-m: var(--apogei--space--sm, 12px); /* 12px */ --apo-space-l: var(--apogei--space--md, 16px); /* 16px */ --apo-space-xl: var(--apogei--space--lg, 24px); /* 24px */ /* =========================================== RADIUS - Aliases vers --apogei--radius--* =========================================== */ --apo-radius-xs: 2px; --apo-radius-sm: var(--apogei--radius--sm, 4px); --apo-radius-md: var(--apogei--radius--lg, 8px); --apo-radius-lg: var(--apogei--radius--full, 9999px); /* =========================================== DUREES - Aliases vers --apogei--duration--* =========================================== */ --apo-duration-fast: var(--apogei--duration--normal, 150ms); --apo-duration-normal: var(--apogei--duration--slow, 250ms); /* =========================================== BOUTONS =========================================== */ --apo-button-font-weight: 600; --apo-button-letter-spacing: 0.02em; --apo-button-radius: var(--apogei--radius--md, 6px); --apo-button-padding-y: 0.5rem; --apo-button-padding-x: 1.25rem; } /* Base body */ body { font-family: var(--apo-font-body); font-size: var(--apo-font-size-body); } /* Variantes de thème Apogei * * Utilise les nouveaux tokens sémantiques WordPress * Sauvegarde : _legacy/_themes.scss.bak */ /* Thème 1 : officiel (valeurs = défaut du :root) */ /* Paire 0 : Aptos (défaut) => déjà gérée par theme.json */ .apo-theme-1 { --apo-color-primary: var(--wp--preset--color--bg-brand, #00619B); --apo-color-primary-soft: var(--wp--preset--color--bg-brand-subtle, #e6f0f7); --apo-color-accent: var(--wp--preset--color--bg-accent-green, #76B82A); --apo-color-highlight: var(--wp--preset--color--bg-accent-yellow, #FFC52F); } /* Thème 1 avec paire 1 Nunito / Noto */ .apo-theme-1.apo-font-pair-1 { --apo-font-heading: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --apo-font-body: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Thème 1 avec paire 2 Poppins / Inter */ .apo-theme-1.apo-font-pair-2 { --apo-font-heading: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --apo-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* etc. pour paire 3... */ /* Thème 2 : recrutement (accent magenta) */ .apo-theme-2 { --apo-color-primary: var(--wp--preset--color--bg-brand, #00619B); --apo-color-primary-soft: var(--wp--preset--color--bg-brand-subtle, #e6f0f7); --apo-color-accent: var(--wp--preset--color--bg-accent-magenta, #CC209C); --apo-color-highlight: var(--wp--preset--color--bg-accent-yellow, #FFC52F); } /* Thème 3 : commercial (accent orange) */ .apo-theme-3 { --apo-color-primary: var(--wp--preset--color--bg-brand, #00619B); --apo-color-primary-soft: var(--wp--preset--color--bg-brand-subtle, #e6f0f7); --apo-color-accent: var(--wp--preset--color--bg-accent-orange, #FF841F); --apo-color-highlight: var(--wp--preset--color--bg-accent-cyan, #01C8D8); } /* Tabs Apogei : dans pages Tous etablissements et pages Pôles */ .apogei-tabs, .pole-tabs { margin-top: var(--wp--preset--spacing--20); } .apogei-tabs__list, .pole-tabs__list { display: flex; gap: var(--wp--preset--spacing--20); margin-bottom: var(--wp--preset--spacing--20); } .apogei-tabs__tab, .pole-tabs__tab { position: relative; padding: var(--apo-space-s) 0; background: none; border: none; cursor: pointer; font: inherit; color: var(--apo-color-text-secondary); transition: color var(--apo-duration-fast) ease; } .apogei-tabs__tab::after, .pole-tabs__tab::after { content: ""; position: absolute; left: 0; bottom: -0.15rem; width: 0; height: 2px; background-color: var(--apo-color-primary); transition: width var(--apo-duration-normal) ease; } .apogei-tabs__tab:focus, .pole-tabs__tab:focus { outline: none; } .apogei-tabs__tab:focus-visible, .pole-tabs__tab:focus-visible { outline: 2px solid var(--wp--preset--color--border-focus); outline-offset: 2px; } .apogei-tabs__tab:hover, .apogei-tabs__tab:focus-visible, .pole-tabs__tab:hover, .pole-tabs__tab:focus-visible { color: var(--apo-color-primary); } .apogei-tabs__tab.is-active, .pole-tabs__tab.is-active { color: var(--apo-color-primary); } .apogei-tabs__tab.is-active::after, .pole-tabs__tab.is-active::after { width: 100%; } .apogei-tabs__panel, .pole-tabs__panel { /* layout géré par le contenu interne */ /* layout géré par le contenu interne */ display: none; } .apogei-tabs__panel.is-active, .pole-tabs__panel.is-active { display: block; } /* Variantes Tabs Apogei (classes ajoutées dans l’éditeur) */ .pole-tabs--pills .pole-tabs__tab, .pole-tabs--pills .apogei-tabs__tab, .apogei-tabs--pills .pole-tabs__tab, .apogei-tabs--pills .apogei-tabs__tab { display: inline-flex; align-items: center; gap: var(--apo-space-xs); padding: var(--apo-space-xs) var(--apo-space-l); border-radius: var(--apo-radius-lg); border: 1px solid transparent; } .pole-tabs--pills .pole-tabs__tab::after, .pole-tabs--pills .apogei-tabs__tab::after, .apogei-tabs--pills .pole-tabs__tab::after, .apogei-tabs--pills .apogei-tabs__tab::after { display: none; } .pole-tabs--pills .pole-tabs__tab.is-active, .pole-tabs--pills .apogei-tabs__tab.is-active, .apogei-tabs--pills .pole-tabs__tab.is-active, .apogei-tabs--pills .apogei-tabs__tab.is-active { background-color: var(--apo-color-primary-soft); border-color: var(--apo-color-primary); background: var(--wp--preset--color--bg-brand-subtle); } .pole-tabs__tab.has-icon, .apogei-tabs__tab.has-icon { display: inline-flex; align-items: center; gap: var(--apo-space-xs); } /* Accordéons Apogei */ .apogei-accordion { border-top: 1px solid var(--wp--preset--color--border-default, #ccc); } .apogei-accordion__item + .apogei-accordion__item { border-top: 1px solid var(--wp--preset--color--border-default, #ccc); } .apogei-accordion__button { width: 100%; text-align: left; padding: 0.75rem 1rem; background: transparent; border: none; font: inherit; cursor: pointer; display: flex; align-items: center; justify-content: space-between; } .apogei-accordion__button::after { content: "+"; margin-left: 1rem; transition: transform 0.2s ease; } .apogei-accordion__button[aria-expanded=true]::after { content: "–"; } .apogei-accordion__button:focus { outline: none; } .apogei-accordion__button:focus-visible { outline: 2px solid var(--wp--preset--color--border-focus); outline-offset: 2px; } .apogei-accordion__panel { padding: 0 1rem 1rem; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 1s ease, opacity 1s ease; } .apogei-accordion__panel.is-open { opacity: 1; } .apogei-accordion__panel[hidden] { /* optionnel : visibility:hidden; */ } /* Réduction des animations si prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .apogei-accordion__panel { transition: none; } } /* =========================== Buttons (Apogei) =========================== */ .apogei-button-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--text-default); border: 1px solid var(--wp--preset--color--border-strong); text-decoration: none; } @media (hover: hover) and (pointer: fine) { .apogei-button-outline .wp-block-button__link:hover { background: var(--wp--preset--color--bg-subtle); color: var(--wp--preset--color--text-default); border-color: var(--wp--preset--color--border-strong); } } .apogei-button-outline .wp-block-button__link:focus, .apogei-button-outline .wp-block-button__link:focus-visible { background: var(--wp--preset--color--bg-subtle); color: var(--wp--preset--color--text-default); border-color: var(--wp--preset--color--border-strong); outline: 2px solid var(--wp--preset--color--border-focus); outline-offset: 2px; } /* Gutenberg styles (core/button) */ :root { --apogei-button-radius: var(--apogei--radius--md); --apogei-button-font-weight: 600; --apogei-button-padding-x: var(--apogei--space--sm); --apogei-button-padding-y: var(--apogei--space--xs); --apogei-button-icon-gap: var(--apogei--space--2xs); /* Component tokens: component.button.primary */ --apogei-button-primary-bg: var(--wp--preset--color--bg-brand); --apogei-button-primary-bg-hover: var(--wp--preset--color--interactive-hover); --apogei-button-primary-bg-active: var(--wp--preset--color--interactive-active); --apogei-button-primary-bg-disabled: var(--wp--preset--color--bg-muted); --apogei-button-primary-text: var(--wp--preset--color--text-inverse); --apogei-button-primary-text-disabled: var(--wp--preset--color--text-muted); --apogei-button-primary-border: var(--wp--preset--color--bg-brand); --apogei-button-primary-border-hover: var(--wp--preset--color--interactive-hover); --apogei-button-primary-border-focus: var(--wp--preset--color--border-focus); /* Component tokens: component.button.outline */ --apogei-button-outline-bg: transparent; --apogei-button-outline-bg-hover: var(--wp--preset--color--bg-brand-subtle); --apogei-button-outline-text: var(--wp--preset--color--text-brand); --apogei-button-outline-text-hover: var(--wp--preset--color--text-brand-hover); --apogei-button-outline-border: var(--wp--preset--color--border-brand); /* Component tokens: component.button.ghost (transparent) */ --apogei-button-ghost-bg: transparent; --apogei-button-ghost-bg-hover: var(--wp--preset--color--bg-subtle); --apogei-button-ghost-text: var(--wp--preset--color--text-default); --apogei-button-ghost-text-hover: var(--wp--preset--color--text-brand); /* Component tokens: component.button.secondary (accent-green) */ --apogei-button-accent-green-bg: var(--wp--preset--color--bg-accent-green-light); --apogei-button-accent-green-bg-hover: var(--wp--preset--color--bg-accent-green-light); --apogei-button-accent-green-bg-disabled: var(--wp--preset--color--bg-muted); --apogei-button-accent-green-text: var(--wp--preset--color--text-brand); --apogei-button-accent-green-text-disabled: var(--wp--preset--color--text-muted); --apogei-button-accent-green-border: var(--wp--preset--color--bg-accent-green); /* Component tokens: component.button.outline-accent (framboise) */ --apogei-button-outline-accent-bg: transparent; --apogei-button-outline-accent-bg-hover: var(--wp--preset--color--bg-accent-magenta-subtle); --apogei-button-outline-accent-text: var(--wp--preset--color--bg-accent-magenta); --apogei-button-outline-accent-text-hover: #73014a; --apogei-button-outline-accent-border: var(--wp--preset--color--bg-accent-magenta); --apogei-button-outline-accent-border-hover: #73014a; } .wp-block-button.is-style-apogei-primary .wp-block-button__link, .wp-block-button.is-style-apogei-outline .wp-block-button__link, .wp-block-button.is-style-apogei-transparent .wp-block-button__link, .wp-block-button.is-style-apogei-accent-green .wp-block-button__link, .wp-block-button.is-style-apogei-xl-outline-primary .wp-block-button__link, .wp-block-button.is-style-apogei-outline-accent .wp-block-button__link { border-radius: var(--apogei-button-radius); border-style: solid; border-width: 1px; font-weight: var(--apogei-button-font-weight); padding: var(--apogei-button-padding-y) var(--apogei-button-padding-x); text-decoration: none; display: inline-flex; align-items: center; gap: var(--apogei-button-icon-gap); } .wp-block-button__link iconify-icon { font-size: 1em; } .wp-block-button.is-style-apogei-primary .wp-block-button__link { background: var(--apogei-button-primary-bg); color: var(--apogei-button-primary-text); border-color: var(--apogei-button-primary-border); } .wp-block-button.is-style-apogei-outline .wp-block-button__link, .wp-block-button.is-style-apogei-xl-outline-primary .wp-block-button__link { background: var(--apogei-button-outline-bg); color: var(--apogei-button-outline-text); border-color: var(--apogei-button-outline-border); } .wp-block-button.is-style-apogei-transparent .wp-block-button__link { background: var(--apogei-button-ghost-bg); color: var(--apogei-button-ghost-text); border-color: transparent; } .wp-block-button.is-style-apogei-accent-green .wp-block-button__link { background: var(--apogei-button-accent-green-bg); color: var(--apogei-button-accent-green-text); border-color: var(--apogei-button-accent-green-border); } .wp-block-button.is-style-apogei-outline-accent .wp-block-button__link { background: var(--apogei-button-outline-accent-bg); color: var(--apogei-button-outline-accent-text); border-color: var(--apogei-button-outline-accent-border); } @media (hover: hover) and (pointer: fine) { .wp-block-button.is-style-apogei-primary .wp-block-button__link:hover { background: var(--apogei-button-primary-bg-hover); color: var(--apogei-button-primary-text); border-color: var(--apogei-button-primary-border-hover); } .wp-block-button.is-style-apogei-outline .wp-block-button__link:hover, .wp-block-button.is-style-apogei-xl-outline-primary .wp-block-button__link:hover { background: var(--apogei-button-outline-bg-hover); color: var(--apogei-button-outline-text-hover); border-color: var(--apogei-button-outline-border); } .wp-block-button.is-style-apogei-transparent .wp-block-button__link:hover { background: var(--apogei-button-ghost-bg-hover); color: var(--apogei-button-ghost-text-hover); } .wp-block-button.is-style-apogei-accent-green .wp-block-button__link:hover { background: var(--apogei-button-accent-green-bg-hover); color: var(--apogei-button-accent-green-text); } .wp-block-button.is-style-apogei-outline-accent .wp-block-button__link:hover { background: var(--apogei-button-outline-accent-bg-hover); color: var(--apogei-button-outline-accent-text-hover); border-color: var(--apogei-button-outline-accent-border-hover); } } .wp-block-button.is-style-apogei-primary .wp-block-button__link:focus, .wp-block-button.is-style-apogei-primary .wp-block-button__link:focus-visible, .wp-block-button.is-style-apogei-outline .wp-block-button__link:focus, .wp-block-button.is-style-apogei-outline .wp-block-button__link:focus-visible, .wp-block-button.is-style-apogei-xl-outline-primary .wp-block-button__link:focus, .wp-block-button.is-style-apogei-xl-outline-primary .wp-block-button__link:focus-visible, .wp-block-button.is-style-apogei-transparent .wp-block-button__link:focus, .wp-block-button.is-style-apogei-transparent .wp-block-button__link:focus-visible, .wp-block-button.is-style-apogei-accent-green .wp-block-button__link:focus, .wp-block-button.is-style-apogei-accent-green .wp-block-button__link:focus-visible, .wp-block-button.is-style-apogei-outline-accent .wp-block-button__link:focus, .wp-block-button.is-style-apogei-outline-accent .wp-block-button__link:focus-visible { outline: 2px solid var(--apogei-button-primary-border-focus); outline-offset: 2px; } .wp-block-button.is-style-apogei-primary .wp-block-button__link:active { background: var(--apogei-button-primary-bg-active); color: var(--apogei-button-primary-text); } .wp-block-button.is-style-apogei-primary .wp-block-button__link[aria-disabled=true], .wp-block-button.is-style-apogei-primary .wp-block-button__link.is-disabled, .wp-block-button.is-style-apogei-primary .wp-block-button__link:disabled, .wp-block-button.is-style-apogei-outline .wp-block-button__link[aria-disabled=true], .wp-block-button.is-style-apogei-outline .wp-block-button__link.is-disabled, .wp-block-button.is-style-apogei-outline .wp-block-button__link:disabled, .wp-block-button.is-style-apogei-xl-outline-primary .wp-block-button__link[aria-disabled=true], .wp-block-button.is-style-apogei-xl-outline-primary .wp-block-button__link.is-disabled, .wp-block-button.is-style-apogei-xl-outline-primary .wp-block-button__link:disabled, .wp-block-button.is-style-apogei-transparent .wp-block-button__link[aria-disabled=true], .wp-block-button.is-style-apogei-transparent .wp-block-button__link.is-disabled, .wp-block-button.is-style-apogei-transparent .wp-block-button__link:disabled, .wp-block-button.is-style-apogei-accent-green .wp-block-button__link[aria-disabled=true], .wp-block-button.is-style-apogei-accent-green .wp-block-button__link.is-disabled, .wp-block-button.is-style-apogei-accent-green .wp-block-button__link:disabled, .wp-block-button.is-style-apogei-outline-accent .wp-block-button__link[aria-disabled=true], .wp-block-button.is-style-apogei-outline-accent .wp-block-button__link.is-disabled, .wp-block-button.is-style-apogei-outline-accent .wp-block-button__link:disabled { cursor: not-allowed; pointer-events: none; } .wp-block-button.is-style-apogei-primary .wp-block-button__link[aria-disabled=true], .wp-block-button.is-style-apogei-primary .wp-block-button__link.is-disabled, .wp-block-button.is-style-apogei-primary .wp-block-button__link:disabled { background: var(--apogei-button-primary-bg-disabled); color: var(--apogei-button-primary-text-disabled); border-color: var(--apogei-button-primary-bg-disabled); } .wp-block-button.is-style-apogei-outline .wp-block-button__link[aria-disabled=true], .wp-block-button.is-style-apogei-outline .wp-block-button__link.is-disabled, .wp-block-button.is-style-apogei-outline .wp-block-button__link:disabled, .wp-block-button.is-style-apogei-xl-outline-primary .wp-block-button__link[aria-disabled=true], .wp-block-button.is-style-apogei-xl-outline-primary .wp-block-button__link.is-disabled, .wp-block-button.is-style-apogei-xl-outline-primary .wp-block-button__link:disabled { background: var(--apogei-button-primary-bg-disabled); color: var(--apogei-button-primary-text-disabled); border-color: var(--wp--preset--color--border-muted); } .wp-block-button.is-style-apogei-transparent .wp-block-button__link[aria-disabled=true], .wp-block-button.is-style-apogei-transparent .wp-block-button__link.is-disabled, .wp-block-button.is-style-apogei-transparent .wp-block-button__link:disabled { background: transparent; color: var(--apogei-button-primary-text-disabled); border-color: transparent; } .wp-block-button.is-style-apogei-accent-green .wp-block-button__link[aria-disabled=true], .wp-block-button.is-style-apogei-accent-green .wp-block-button__link.is-disabled, .wp-block-button.is-style-apogei-accent-green .wp-block-button__link:disabled { background: var(--apogei-button-accent-green-bg-disabled); color: var(--apogei-button-accent-green-text-disabled); border-color: var(--apogei-button-accent-green-bg-disabled); } .wp-block-button.is-style-apogei-outline-accent .wp-block-button__link[aria-disabled=true], .wp-block-button.is-style-apogei-outline-accent .wp-block-button__link.is-disabled, .wp-block-button.is-style-apogei-outline-accent .wp-block-button__link:disabled { background: var(--apogei-button-primary-bg-disabled); color: var(--apogei-button-primary-text-disabled); border-color: var(--wp--preset--color--border-muted); } .apogei-icon, iconify-icon { display: inline-flex; width: 1em; height: 1em; font-size: 1em; color: currentColor; flex-shrink: 0; vertical-align: -0.125em; } .apogei-icon svg { width: 1em; height: 1em; } /* Cards Pôles Apogei */ .apogei-pole__cards { display: grid; gap: var(--apo-space-m); } @media (min-width: 768px) { .apogei-pole__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .apogei-card-etablissement { border: 1px solid var(--wp--preset--color--border-default); border-radius: var(--apo-radius-sm); background: var(--wp--preset--color--bg-surface); overflow: hidden; display: flex; flex-direction: column; min-height: 420px; max-height: 420px; --card-image-height: 150px; position: relative; --card-footer-height: 59px; --card-footer-padding: 24px; --card-content-padding-top: 24px; /* Optionnel : petit spacing interne générique */ } .apogei-card-etablissement__image-link { display: block; height: var(--card-image-height); max-height: var(--card-image-height); overflow: hidden; transition: max-height 240ms ease, opacity 240ms ease, transform 240ms ease; } .apogei-card-etablissement__image { display: block; width: 100%; height: 100%; object-fit: cover; } .apogei-card-etablissement__content { padding: var(--card-content-padding-top) 24px 24px; display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; padding-bottom: calc(var(--card-footer-height) + var(--card-footer-padding)); transition: padding-top 240ms ease; } .apogei-card-etablissement__content h3 { font-family: var(--wp--preset--font-family--heading); line-height: 1.1; color: var(--wp--preset--color--text-default); margin: 10px 0 4px; font-size: var(--wp--preset--font-size--h-4); font-weight: 500; } .apogei-card-etablissement__excerpt { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-4px); transition: max-height 240ms ease, opacity 240ms ease, transform 240ms ease; } .apogei-card-etablissement__meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; transition: max-height 240ms ease, opacity 240ms ease, transform 240ms ease; } .apogei-card-etablissement__meta-item { display: flex; align-items: center; gap: 8px; font-size: var(--wp--preset--font-size--body); line-height: 1.45; color: var(--wp--preset--color--text-secondary); } .apogei-card-etablissement__meta-item .apogei-icon { font-size: var(--wp--preset--font-size--body-sm); line-height: 1; color: var(--wp--preset--color--text-secondary); } .apogei-card-etablissement__footer { margin-top: auto; padding-top: 24px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; width: 100%; position: absolute; right: var(--card-footer-padding); bottom: var(--card-footer-padding); width: auto; padding-top: 0; } .apogei-card-etablissement__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--wp--preset--color--border-strong); border-radius: var(--apo-radius-sm); font-size: var(--wp--preset--font-size--body-sm); font-weight: 600; line-height: 1.55; color: var(--wp--preset--color--text-default); text-decoration: none; } .apogei-card-etablissement__cta:focus-visible { outline: 2px solid var(--wp--preset--color--border-focus); outline-offset: 2px; } .apogei-card-etablissement__content p { font-size: var(--wp--preset--font-size--body); line-height: 1.55; color: var(--wp--preset--color--text-secondary); } @media (hover: hover) and (pointer: fine) { .apogei-card-etablissement--has-excerpt:hover .apogei-card-etablissement__image-link, .apogei-card-etablissement--has-excerpt:focus-within .apogei-card-etablissement__image-link { max-height: 0; opacity: 0; transform: translateY(-8px); } .apogei-card-etablissement--has-excerpt:hover .apogei-card-etablissement__excerpt, .apogei-card-etablissement--has-excerpt:focus-within .apogei-card-etablissement__excerpt { max-height: 200px; opacity: 1; transform: translateY(0); } .apogei-card-etablissement--has-excerpt:hover .apogei-card-etablissement__meta, .apogei-card-etablissement--has-excerpt:focus-within .apogei-card-etablissement__meta { max-height: 0; opacity: 0; transform: translateY(-4px); overflow: hidden; } .apogei-card-etablissement--has-excerpt:hover .apogei-card-etablissement__content, .apogei-card-etablissement--has-excerpt:focus-within .apogei-card-etablissement__content { --card-content-padding-top: 3rem; } } .apogei-card-etablissement__content > * + * { margin-top: var(--apo-space-xs); } /* === Desktop : méga menu primary (≥ 1200px) === */ /* Sauvegarde : _legacy/_menu-mega.scss.bak */ @media (min-width: 1200px) { .mega-menu-wrapper-eva { background-image: linear-gradient(to right, var(--wp--preset--color--bg-accent-green, #76b82a) 50%, var(--wp--preset--color--bg-brand, #00619B) 50%); } #mega-menu-wrap-primary { background: transparent; } #mega-menu-wrap-primary #mega-menu-primary.mega-menu { display: flex; flex-wrap: nowrap; align-items: stretch; background: transparent; } /* Découvrir 50 % vert */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-decouvrir { flex: 0 0 50%; max-width: 50%; background-color: var(--wp--preset--color--bg-accent-green, #76b82a); } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-decouvrir > a.mega-menu-link { display: flex; align-items: center; justify-content: center; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); white-space: nowrap; color: var(--wp--preset--color--text-default, #111111); background-color: transparent; } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-decouvrir > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-decouvrir > a.mega-menu-link:focus { background-color: var(--wp--preset--color--bg-accent-green, #76b82a); color: var(--wp--preset--color--text-default, #111111); } /* Panneau Découvrir : vert */ #mega-menu-wrap-primary li.mega-menu-item-decouvrir > ul.mega-sub-menu { width: 100%; max-width: none; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); background-color: var(--wp--preset--color--bg-accent-green, #76b82a) !important; color: var(--wp--preset--color--text-default, #111111); } #mega-menu-wrap-primary li.mega-menu-item-decouvrir > ul.mega-sub-menu a.mega-menu-link { color: var(--wp--preset--color--text-default, #111111) !important; background-color: transparent; } #mega-menu-wrap-primary li.mega-menu-item-decouvrir > ul.mega-sub-menu a.mega-menu-link:hover, #mega-menu-wrap-primary li.mega-menu-item-decouvrir > ul.mega-sub-menu a.mega-menu-link:focus { color: var(--wp--preset--color--text-default, #111111) !important; text-decoration: underline; background-color: transparent; } /* Agir 50 % bleu */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-agir { flex: 0 0 50%; max-width: 50%; background-color: var(--wp--preset--color--bg-brand, #00619B); } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-agir > a.mega-menu-link { display: flex; align-items: center; justify-content: center; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); white-space: nowrap; color: var(--wp--preset--color--text-inverse, #ffffff); background-color: transparent; } /* Pas de gris foncé au hover pour Agir */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-agir > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-agir > a.mega-menu-link:focus { background-color: var(--wp--preset--color--bg-brand, #00619B); color: var(--wp--preset--color--text-inverse, #ffffff) !important; } /* Panneau Agir : bleu */ #mega-menu-wrap-primary li.mega-menu-item-agir > ul.mega-sub-menu { width: 100%; max-width: none; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); background-color: var(--wp--preset--color--bg-brand, #00619B) !important; color: var(--wp--preset--color--text-inverse, #ffffff) !important; } #mega-menu-wrap-primary li.mega-menu-item-agir > ul.mega-sub-menu a.mega-menu-link { color: var(--wp--preset--color--text-inverse, #ffffff) !important; background-color: transparent; } #mega-menu-wrap-primary li.mega-menu-item-agir > ul.mega-sub-menu a.mega-menu-link:hover, #mega-menu-wrap-primary li.mega-menu-item-agir > ul.mega-sub-menu a.mega-menu-link:focus { color: #ffffff !important; text-decoration: underline; background-color: transparent; } /* Neutraliser d'éventuels autres items de niveau 1 */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(.mega-menu-item-decouvrir):not(.mega-menu-item-agir) { background: transparent; } /* Forcer le texte Agir en blanc dans tous les états "repos" */ #mega-menu-wrap-primary #mega-menu-primary.mega-menu > li.mega-menu-item-agir.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary.mega-menu > li.mega-menu-item-agir.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary.mega-menu > li.mega-menu-item-agir.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary.mega-menu > li.mega-menu-item-agir.mega-toggle-on > a.mega-menu-link { color: var(--wp--preset--color--text-inverse, #ffffff); } } /* === Tablette / mobile : Max Mega Menu (≤ 1199px) === */ @media (max-width: 1199px) { /* 1. Barre toggle Max Mega Menu (celle de ton thème) */ #mega-menu-wrap-primary .mega-menu-toggle { background-color: transparent; /* vert Découvrir */ color: var(--wp--preset--color--text-default, #111111); border: none; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10); display: flex; align-items: center; justify-content: space-between; } #mega-menu-wrap-primary .mega-menu-toggle span, #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-label { color: inherit; } /* 2. Fond du panneau mobile (mobile_background_*) */ #mega-menu-wrap-primary .mega-menu { background: transparent; /* on enlève le gris du thème */ } /* 3. Découvrir : bande + panneau verts */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-decouvrir { background-color: var(--wp--preset--color--bg-accent-green, #76b82a); } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-decouvrir > a.mega-menu-link { display: block; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10); background-color: var(--wp--preset--color--bg-accent-green, #76b82a) !important; color: var(--wp--preset--color--text-default, #111111); } #mega-menu-wrap-primary li.mega-menu-item-decouvrir > ul.mega-sub-menu { background-color: var(--wp--preset--color--bg-accent-green, #76b82a); color: var(--wp--preset--color--text-default, #111111); padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); box-shadow: none; width: 100%; max-width: none; } #mega-menu-wrap-primary li.mega-menu-item-decouvrir > ul.mega-sub-menu a.mega-menu-link { color: var(--wp--preset--color--text-default, #111111); background: transparent; } /* 4. Agir : bande + panneau bleus */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-agir { background-color: var(--wp--preset--color--bg-brand, #00619B); } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-agir > a.mega-menu-link { display: block; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10); background-color: var(--wp--preset--color--bg-brand, #00619B) !important; color: var(--wp--preset--color--text-inverse, #ffffff) !important; } #mega-menu-wrap-primary li.mega-menu-item-agir > ul.mega-sub-menu { background-color: var(--wp--preset--color--bg-brand, #00619B); color: var(--wp--preset--color--text-inverse, #ffffff) !important; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); box-shadow: none; width: 100%; max-width: none; } #mega-menu-wrap-primary li.mega-menu-item-agir > ul.mega-sub-menu a.mega-menu-link { color: var(--wp--preset--color--text-inverse, #ffffff) !important; background: transparent; } /* 5. Aucun autre item avec fond gris */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(.mega-menu-item-decouvrir):not(.mega-menu-item-agir) { background: transparent; } /* 6. Wrapper EVA sans gradient en mobile */ .mega-menu-wrapper-eva { background-image: none; background-color: transparent; } #mega-menu-wrap-primary .mega-menu-primary-off-canvas { background-color: transparent; /* ou #76b82a/#00619b selon la zone */ } } @media only screen and (max-width: 768px) { #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary { background-color: transparent; } } :root { --apo-header-height: 5rem; --apo-header-mega-slot: 5.5rem; --apo-header-align-inset: max( var(--wp--preset--spacing--20, 1.5rem), calc( (100vw - min(100vw, var(--wp--style--global--wide-size, 1280px))) / 2 + var(--wp--preset--spacing--20, 1.5rem) ) ); } header.wp-block-template-part { position: sticky; top: 0; z-index: var(--apogei--z--sticky, 1100); margin-block-end: 0; } .apogei-header { background-color: var(--wp--preset--color--bg-surface, #ffffff); border-bottom: 1px solid var(--wp--preset--color--border-default, #e5e5e5); --apo-color-accent: var(--wp--preset--color--bg-accent-green, #76B82A); --apo-color-primary: var(--wp--preset--color--bg-brand, #00619B); height: var(--apo-header-height, 5rem); display: flex; align-items: stretch; } .apogei-header.is-menu-open { z-index: var(--apogei--z--overlay, 1300); } .apogei-header__inner { display: flex; justify-content: space-between; align-items: center; flex: 1; align-self: stretch; width: 100%; max-width: var(--wp--style--global--wide-size, 1280px); margin: 0 auto; padding: 0 var(--wp--preset--spacing--20, 1.5rem); } @media (min-width: 64.0625rem) { .apogei-header__inner { padding-right: calc(var(--wp--preset--spacing--20, 1.5rem) + var(--apogei--space--sm, 0.75rem)); } } @media (max-width: 64rem) { .apogei-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; position: relative; z-index: 2; background-color: var(--wp--preset--color--bg-surface, #ffffff); } } .apogei-header__logo { display: flex; align-items: center; text-decoration: none; } .apogei-header__logo img { height: 2.5em; width: auto; max-width: none; display: block; } @media (max-width: 64rem) { .apogei-header__logo { grid-column: 2; justify-self: center; } } .apogei-header__toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 0.25rem; width: 2.75rem; height: 2.75rem; background: none; border: none; cursor: pointer; padding: var(--apogei--space--xs, 0.5rem); } @media (max-width: 64rem) { .apogei-header__toggle { display: flex; grid-column: 1; justify-self: start; } } .apogei-header__toggle-bar { display: block; width: 1rem; height: 0.125rem; background-color: var(--wp--preset--color--text-default, #111111); border-radius: var(--apogei--radius--full, 9999px); transition: transform var(--apogei--duration--slow, 250ms) var(--apogei--easing--default, ease), opacity var(--apogei--duration--slow, 250ms) var(--apogei--easing--default, ease); } .apogei-header.is-menu-open .apogei-header__toggle-bar:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); } .apogei-header.is-menu-open .apogei-header__toggle-bar:nth-child(2) { opacity: 0; } .apogei-header.is-menu-open .apogei-header__toggle-bar:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); } .apogei-header__nav { display: flex; align-items: center; } @media (min-width: 64.0625rem) { .apogei-header__nav { align-self: stretch; align-items: stretch; } } @media (max-width: 64rem) { .apogei-header__nav { position: fixed; top: 5rem; left: 0; right: 0; height: calc(100vh - 5rem); height: calc(100dvh - 5rem); background-color: var(--wp--preset--color--bg-surface, #ffffff); transform: translateX(-100%); visibility: hidden; transition: transform var(--apogei--duration--slower, 350ms) var(--apogei--easing--default, ease), visibility 0s linear var(--apogei--duration--slower, 350ms); z-index: 1; padding: var(--apogei--space--xs, 0.5rem) var(--wp--preset--spacing--20, 1.5rem); display: flex; flex-direction: column; align-items: normal; box-shadow: none; overflow-y: auto; -webkit-overflow-scrolling: touch; } .apogei-header__nav.is-open { transform: translateX(0); visibility: visible; transition: transform var(--apogei--duration--slower, 350ms) var(--apogei--easing--default, ease), visibility 0s linear 0s; } } .apogei-header__close { display: none; } .apogei-header__links { display: flex; gap: var(--apogei--space--xl, 2rem); list-style: none; margin: 0; padding: 0; } .apogei-header__links a { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--wp--preset--font-size--body-sm, 0.875rem); line-height: 1.2; color: var(--wp--preset--color--text-default, #111111); padding: var(--apogei--space--2xs, 0.25rem) var(--apogei--space--xs, 0.5rem) var(--apogei--space--xs, 0.5rem); position: relative; text-decoration: none; transition: color var(--apogei--duration--slow, 250ms) var(--apogei--easing--default, ease); } .apogei-header__links a::after { content: ""; position: absolute; left: var(--apogei--space--xs, 0.5rem); right: var(--apogei--space--xs, 0.5rem); bottom: 0; height: 0.125rem; background-color: var(--apo-color-accent); border-radius: var(--apogei--radius--full, 9999px); transform: translateY(0.375rem); opacity: 0; transition: transform var(--apogei--duration--slow, 250ms) var(--apogei--easing--default, ease), opacity var(--apogei--duration--slow, 250ms) var(--apogei--easing--default, ease); } .apogei-header__links a:hover::after, .apogei-header__links a:focus-visible::after, .apogei-header__links a[aria-current=page]::after { transform: translateY(0); opacity: 1; } .apogei-header__links .apogei-header__link-inner { display: inline-flex; flex-direction: column; align-items: center; gap: var(--apogei--space--2xs, 0.25rem); } .apogei-header__links .apogei-header__link-icon { width: 0.9375rem; height: 0.9375rem; color: currentcolor; transition: color var(--apogei--duration--slow, 250ms) var(--apogei--easing--default, ease); } .apogei-header__links .apogei-header__link-text { transition: color var(--apogei--duration--slow, 250ms) var(--apogei--easing--default, ease); } @media (min-width: 64.0625rem) { .apogei-header__links > .menu-item-has-children > .apogei-header__item-row > a.apogei-header__icon-link, .apogei-header__links > li > a.apogei-header__icon-link { flex-direction: column; gap: 0.125rem; justify-content: center; } .apogei-header__links > li:not(.menu-item-has-children).current-menu-item > a, .apogei-header__links > li:not(.menu-item-has-children) > a[aria-current=page], .apogei-header__links > li.current-menu-item > .apogei-header__item-row > a, .apogei-header__links > li.current-menu-ancestor > .apogei-header__item-row > a { color: var(--wp--preset--color--text-default, #111111); font-weight: 600; } .apogei-header__links > li:not(.menu-item-has-children).current-menu-item > a::after, .apogei-header__links > li:not(.menu-item-has-children) > a[aria-current=page]::after, .apogei-header__links > li.current-menu-item > .apogei-header__item-row > a::after, .apogei-header__links > li.current-menu-ancestor > .apogei-header__item-row > a::after { transform: translateY(0); opacity: 1; } .apogei-header__links > li:not(.menu-item-has-children).current-menu-item > a .apogei-header__icon-link-icon, .apogei-header__links > li:not(.menu-item-has-children) > a[aria-current=page] .apogei-header__icon-link-icon, .apogei-header__links > li.current-menu-item > .apogei-header__item-row > a .apogei-header__icon-link-icon, .apogei-header__links > li.current-menu-ancestor > .apogei-header__item-row > a .apogei-header__icon-link-icon { color: var(--wp--preset--color--text-default, #111111); } } @media (max-width: 64rem) { .apogei-header__links { flex-direction: column; gap: 0; } .apogei-header__links .apogei-header__item-row > a { flex: 1; justify-content: flex-start; } .apogei-header__links li { border-bottom: 1px solid var(--wp--preset--color--border-subtle, #f3f3f3); } .apogei-header__links a { display: flex; justify-content: flex-start; padding: var(--apogei--space--md, 1rem) 0; padding-left: var(--apogei--space--xs, 0.5rem); font-size: 1rem; border-left: 3px solid transparent; } .apogei-header__links a::after { display: none; } .apogei-header__links a[aria-current=page] { border-left-color: var(--apo-color-accent); } .apogei-header__links > li.menu-item-has-children.current-menu-ancestor > .apogei-header__item-row > a { border-left-color: var(--apo-color-accent); } .apogei-header__links > li.menu-item-has-children.current-menu-ancestor > .apogei-header__item-row > a .apogei-header__link-text, .apogei-header__links > li.menu-item-has-children.current-menu-ancestor > .apogei-header__item-row > a.apogei-header__icon-link .apogei-header__link-text { color: var(--wp--preset--color--bg-accent-green-light, #c5d97f); font-weight: 700; } .apogei-header__links > li.menu-item-has-children.current-menu-ancestor > .apogei-header__item-row > a.apogei-header__icon-link .apogei-header__icon-link-icon { color: var(--wp--preset--color--bg-accent-green-light, #c5d97f); } .apogei-header__links > li.menu-item-has-children.current-menu-item:not(.current-menu-ancestor) > .apogei-header__item-row > a .apogei-header__link-text, .apogei-header__links > li.menu-item-has-children.current-menu-item:not(.current-menu-ancestor) > .apogei-header__item-row > a.apogei-header__icon-link .apogei-header__link-text { color: var(--wp--preset--color--bg-accent-green-light, #c5d97f); font-weight: 700; } .apogei-header__links > li.menu-item-has-children.current-menu-item:not(.current-menu-ancestor) > .apogei-header__item-row > a.apogei-header__icon-link .apogei-header__icon-link-icon { color: var(--wp--preset--color--bg-accent-green-light, #c5d97f); } .apogei-header__links a.apogei-header__icon-link { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--apogei--space--sm, 0.75rem); } } .apogei-header__nav-actions { display: none; } @media (max-width: 64rem) { .apogei-header__nav-actions { display: flex; flex-direction: column; gap: var(--apogei--space--sm, 0.75rem); margin-top: var(--apogei--space--xl, 2rem); } .apogei-header__nav-actions .wp-block-button { width: 100%; } .apogei-header__nav-actions .wp-block-button__link { width: 100%; text-align: center; } } .apogei-header__nav-secondary { display: none; } @media (max-width: 64rem) { .apogei-header__nav-secondary { display: flex; flex-direction: column; gap: 0; padding-top: var(--apogei--space--md, 1rem); } .apogei-header__nav-secondary .apogei-header__icon-link { flex-direction: row; align-items: center; gap: var(--apogei--space--sm, 0.75rem); padding: var(--apogei--space--md, 1rem) 0; padding-left: var(--apogei--space--xs, 0.5rem); font-size: 1rem; border-left: 3px solid transparent; border-bottom: 1px solid var(--wp--preset--color--border-subtle, #f3f3f3); } } .apogei-header__actions { display: flex; align-items: center; gap: var(--apogei--space--sm, 0.75rem); } .apogei-header__actions .apogei-header__icon-link { display: none; } @media (min-width: 64.0625rem) { .apogei-header__actions .apogei-header__icon-link { display: inline-flex; } } @media (max-width: 64rem) { .apogei-header__actions { display: none; } } .apogei-header__icon-link { display: inline-flex; flex-direction: column; align-items: center; gap: 0.125rem; font-weight: 600; font-size: var(--wp--preset--font-size--body-sm, 0.875rem); line-height: 1.2; color: var(--wp--preset--color--text-default, #111111); text-decoration: none; white-space: nowrap; transition: color var(--apogei--duration--slow, 250ms) var(--apogei--easing--default, ease); } .apogei-header__icon-link:hover, .apogei-header__icon-link:focus-visible { color: var(--apo-color-primary); } .apogei-header__icon-link-icon { width: 1rem; height: 1rem; color: currentcolor; flex-shrink: 0; } .apogei-header__item-row { display: flex; align-items: center; justify-content: space-between; gap: var(--apogei--space--xs, 0.5rem); width: 100%; } @media (min-width: 64.0625rem) { .apogei-header__item-row { width: auto; justify-content: flex-start; } } .apogei-header__sub-toggle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.75rem; min-height: 2.75rem; margin: 0; padding: 0; border: none; background: transparent; color: var(--wp--preset--color--text-default, #111111); cursor: pointer; border-radius: var(--apogei--radius--sm, 0.25rem); } .apogei-header__sub-toggle:focus-visible { outline: 2px solid var(--apo-color-primary); outline-offset: 2px; } @media (min-width: 64.0625rem) { .apogei-header__sub-toggle { display: none; } } .apogei-header__sub-toggle-chevron { display: flex; align-items: center; justify-content: center; transition: transform var(--apogei--duration--slow, 250ms) var(--apogei--easing--default, ease); } .apogei-header__links > .menu-item-has-children.is-submenu-open > .apogei-header__item-row .apogei-header__sub-toggle-chevron { transform: rotate(180deg); } @media (min-width: 64.0625rem) { .apogei-header__links { align-items: stretch; height: 100%; } .apogei-header__links > li:not(.menu-item-has-children) { display: flex; align-items: stretch; height: 100%; } .apogei-header__links > .menu-item-has-children { display: block; height: 100%; position: static; } .apogei-header__links > li:not(.menu-item-has-children) > a { box-sizing: border-box; align-self: stretch; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; } .apogei-header__links > .menu-item-has-children > .apogei-header__item-row { box-sizing: border-box; height: 100%; min-height: 100%; align-items: stretch; } .apogei-header__links > .menu-item-has-children > .apogei-header__item-row > a { box-sizing: border-box; align-self: stretch; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu { position: fixed; left: 0; right: 0; top: var(--apo-header-height, 5rem); z-index: calc(var(--apogei--z--sticky, 1100) + 5); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0; max-width: none; width: 100%; margin: 0; padding: calc(var(--apogei--space--sm, 0.75rem) + var(--apogei--space--2xs, 0.25rem)) var(--apo-header-align-inset) var(--apogei--space--sm, 0.75rem) var(--apo-header-align-inset); margin-top: calc(-1 * var(--apogei--space--2xs, 0.25rem)); list-style: none; background-color: var(--wp--preset--color--bg-brand, #00619b); box-shadow: 0 var(--apogei--space--2xs, 0.25rem) var(--apogei--space--xs, 0.5rem) rgba(0, 0, 0, 0.08); max-height: var(--apo-header-mega-slot, 5.5rem); overflow-x: auto; overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--apogei--duration--slow, 250ms) var(--apogei--easing--default, ease), visibility 0s linear var(--apogei--duration--slow, 250ms); } .apogei-header__links > .menu-item-has-children:hover > .apogei-header__submenu, .apogei-header__links > .menu-item-has-children:focus-within > .apogei-header__submenu { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--apogei--duration--slow, 250ms) var(--apogei--easing--default, ease), visibility 0s linear 0s; } .apogei-header__links > .menu-item-has-children:hover > .apogei-header__item-row > a, .apogei-header__links > .menu-item-has-children:focus-within > .apogei-header__item-row > a { background-color: var(--wp--preset--color--bg-brand, #00619b); color: var(--wp--preset--color--text-inverse, #ffffff); border-radius: var(--apogei--radius--sm, 0.25rem) var(--apogei--radius--sm, 0.25rem) 0 0; } .apogei-header__links > .menu-item-has-children:hover > .apogei-header__item-row > a::after, .apogei-header__links > .menu-item-has-children:focus-within > .apogei-header__item-row > a::after { opacity: 0; } .apogei-header__links > .menu-item-has-children.current-menu-ancestor:hover > .apogei-header__item-row > a .apogei-header__link-text, .apogei-header__links > .menu-item-has-children.current-menu-ancestor:focus-within > .apogei-header__item-row > a .apogei-header__link-text, .apogei-header__links > .menu-item-has-children.current-menu-item:hover > .apogei-header__item-row > a .apogei-header__link-text, .apogei-header__links > .menu-item-has-children.current-menu-item:focus-within > .apogei-header__item-row > a .apogei-header__link-text { color: var(--wp--preset--color--bg-accent-green-light, #c5d97f); } .apogei-header__links > .menu-item-has-children.current-menu-ancestor:hover > .apogei-header__item-row > a .apogei-header__icon-link-icon, .apogei-header__links > .menu-item-has-children.current-menu-ancestor:focus-within > .apogei-header__item-row > a .apogei-header__icon-link-icon, .apogei-header__links > .menu-item-has-children.current-menu-item:hover > .apogei-header__item-row > a .apogei-header__icon-link-icon, .apogei-header__links > .menu-item-has-children.current-menu-item:focus-within > .apogei-header__item-row > a .apogei-header__icon-link-icon { color: var(--wp--preset--color--bg-accent-green-light, #c5d97f); } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu > li { flex: 0 0 auto; box-sizing: border-box; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 var(--apogei--space--md, 1rem); border-right: 1px solid color-mix(in srgb, var(--wp--preset--color--text-inverse, #ffffff) 40%, transparent); } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu > li:first-child { justify-content: flex-start; padding-left: 0; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu > li:last-child { border-right: none; padding-right: 0; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a { display: inline-flex; align-items: center; justify-content: center; padding: var(--apogei--space--2xs, 0.25rem) var(--apogei--space--sm, 0.75rem); font-weight: 600; font-size: var(--wp--preset--font-size--body-sm, 0.875rem); text-decoration: none; white-space: nowrap; text-align: center; transition: color var(--apogei--duration--slow, 250ms) var(--apogei--easing--default, ease); } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a::after { display: none; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a:not([aria-current=page]):not(.is-apogei-hash-active) { color: var(--wp--preset--color--text-inverse, #ffffff); } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a[aria-current=page], .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a.is-apogei-hash-active { color: var(--wp--preset--color--bg-accent-green-light, #c5d97f); } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a .apogei-header__submenu-link-text { transition: color var(--apogei--duration--slow, 250ms) var(--apogei--easing--default, ease); } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a:not([aria-current=page]):not(.is-apogei-hash-active) .apogei-header__submenu-link-text { color: var(--wp--preset--color--text-inverse, #ffffff); } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a:hover .apogei-header__submenu-link-text, .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a:focus-visible .apogei-header__submenu-link-text { color: inherit; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a[aria-current=page] .apogei-header__submenu-link-text, .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a.is-apogei-hash-active .apogei-header__submenu-link-text { color: var(--wp--preset--color--bg-accent-green-light, #c5d97f); font-weight: 700; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a:not([aria-current=page]):not(.is-apogei-hash-active) .apogei-header__submenu-badge-label { color: var(--wp--preset--color--text-inverse, #ffffff); } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a[aria-current=page] .apogei-header__submenu-badge-label, .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a.is-apogei-hash-active .apogei-header__submenu-badge-label { color: var(--wp--preset--color--bg-accent-green-light, #c5d97f); font-weight: 700; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu > li:first-child a { justify-content: flex-start; text-align: start; padding-left: 0; padding-right: var(--apogei--space--sm, 0.75rem); } } @media (max-width: 64rem) { .apogei-header__links > .menu-item-has-children > .apogei-header__submenu { display: none; width: 100%; margin: 0; padding: 0 0 var(--apogei--space--sm, 0.75rem); padding-left: var(--apogei--space--md, 1rem); list-style: none; border-bottom: 1px solid var(--wp--preset--color--border-subtle, #f3f3f3); background-color: var(--wp--preset--color--bg-surface, #ffffff); } .apogei-header__links > .menu-item-has-children.is-submenu-open > .apogei-header__submenu { display: block; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu > li { border-bottom: 1px solid var(--wp--preset--color--border-subtle, #f3f3f3); } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu > li:last-child { border-bottom: none; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a { display: flex; padding: var(--apogei--space--sm, 0.75rem) 0; padding-left: var(--apogei--space--xs, 0.5rem); font-size: 0.9375rem; font-weight: 500; color: var(--wp--preset--color--text-default, #111111); text-decoration: none; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a::after { display: none; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a[aria-current=page], .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a.is-apogei-hash-active { border-left: none; padding-left: var(--apogei--space--xs, 0.5rem); } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a[aria-current=page] .apogei-header__submenu-link-text, .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a.is-apogei-hash-active .apogei-header__submenu-link-text { color: var(--wp--preset--color--bg-accent-green-light, #c5d97f); font-weight: 700; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a[aria-current=page] .apogei-header__submenu-badge-label, .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a.is-apogei-hash-active .apogei-header__submenu-badge-label { color: var(--wp--preset--color--bg-accent-green-light, #c5d97f); font-weight: 700; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a:not([aria-current=page]):not(.is-apogei-hash-active) .apogei-header__submenu-link-text { color: var(--wp--preset--color--text-default, #111111); font-weight: 500; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a:not([aria-current=page]):not(.is-apogei-hash-active) .apogei-header__submenu-badge-label { color: var(--wp--preset--color--text-default, #111111); font-weight: 500; } .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a:hover .apogei-header__submenu-link-text, .apogei-header__links > .menu-item-has-children > .apogei-header__submenu a:focus-visible .apogei-header__submenu-link-text { color: var(--wp--preset--color--text-default, #111111); } } .apogei-header__links .apogei-header__submenu a.apogei-header__submenu-link--offres { gap: var(--apo-space-xs, 0.5rem); align-items: center; white-space: nowrap; } .apogei-header__links .apogei-header__submenu a.apogei-header__submenu-link--offres .apogei-header__submenu-badge-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; font-size: 0.75rem; font-weight: 600; line-height: 1; color: var(--wp--preset--color--text-inverse, #ffffff); background-color: var(--wp--preset--color--bg-accent-green, #76b82a); border: 1px solid var(--wp--preset--color--bg-accent-green, #76b82a); border-radius: var(--apogei--radius--full, 9999px); flex-shrink: 0; } .apogei-header__links .apogei-header__submenu a.apogei-header__submenu-link--offres .apogei-header__submenu-badge-label { font-weight: 600; } .apogei-header__overlay { display: none; position: fixed; top: var(--apo-header-height, 5rem); left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 1; pointer-events: auto; } .apogei-header.is-menu-open .apogei-header__overlay { display: block; } @media (prefers-reduced-motion: reduce) { .apogei-header .apogei-header__nav, .apogei-header .apogei-header__toggle-bar, .apogei-header .apogei-header__links a::after, .apogei-header .apogei-header__link-icon, .apogei-header .apogei-header__icon-link, .apogei-header .apogei-header__sub-toggle-chevron, .apogei-header__links > .menu-item-has-children > .apogei-header__submenu { transition-duration: 0.01ms; } } /* Menu des filtres de pôles Apogei */ .apogei-pole-menu { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); justify-content: center; padding: var(--wp--preset--spacing--10) 0; /* Réinitialiser la liste du bloc Navigation */ } .apogei-pole-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); } .apogei-pole-menu { /* Liens d'onglets */ } .apogei-pole-menu a { position: relative; display: inline-block; padding: var(--apo-space-xs) 0; text-decoration: none; /*color: var(--wp--preset--color--brand-blue-500);*/ color: var(--apo-color-primary); /* Ligne de base (invisible) */ } .apogei-pole-menu a::after { content: ""; position: absolute; left: 0; bottom: -0.15rem; width: 0; height: 2px; /*background-color: var(--wp--preset--color--brand-blue-500);*/ background-color: var(--apo-color-primary); transition: width var(--apo-duration-normal) ease; } .apogei-pole-menu a:focus { outline: none; } .apogei-pole-menu a:focus-visible { outline: 2px solid var(--wp--preset--color--border-focus); outline-offset: 2px; } .apogei-pole-menu a { /* Hover : prévisualisation de la ligne */ } .apogei-pole-menu a:hover::after, .apogei-pole-menu a:focus-visible::after { width: 100%; } .apogei-pole-menu { /* Onglet actif (page courante) : texte plus fort + underline pleine largeur */ } .apogei-pole-menu .current-menu-item > a, .apogei-pole-menu a[aria-current=page] { font-weight: 600; /*color: var(--wp--preset--color--brand-blue-500);*/ /*color: red;*/ color: var(--apo-color-primary); } .apogei-pole-menu .current-menu-item > a::after, .apogei-pole-menu a[aria-current=page]::after { width: 100%; } /* .apogei-pole-menu a::after, .pole-tabs__tab::after { background-color: red !important; } */ /* =========================================== Breadcrumb – Fil d'Ariane =========================================== */ :root { --apo-breadcrumb-sticky-height: calc( var(--apo-space-m, 12px) * 2 + 1.25 * var(--wp--preset--font-size--body-sm, 0.875rem) + 1px ); } /* Ancres : laisser le titre visible sous header + fil d’Ariane fixe */ #offres, #carrieres-stories__header, #carrieres-benefits__header, #agir-hero-title, #agir-section-donateurs, #agir-section-stories, #agir-section-types-dons, #agir-section-adherents, #agir-section-benevoles, #agir-section-entreprises, #apogei-listing, #apogei-listing-tabs { scroll-margin-top: calc(var(--apo-header-height, 5rem) + var(--apo-breadcrumb-sticky-height) + var(--wp--preset--spacing--40, 2.25rem)); } /* Réserve la hauteur du fil : le