/* Refonte 2026 : header (voir am-refonte.css pour les variables --am-*) */ /* * Structure : header.php (#am-header, #am-mobile-menu) ; comportement : assets/js/am-header.js. * États posés par le JS sur #am-header : .is-scrolled (page défilée), .is-hidden (défilement vers le bas), * .is-menu-open (menu mobile ouvert). Sur : .am-menu-open (défilement de la page bloqué). * * Le header reste un
: les anciennes règles « header { … } » (inc/header.css) et * « body.page-template-xxx.scrolled header { background } » (inc/page-*.css, page-mission.php) * s'y appliqueraient encore. Elles sont neutralisées par l'id #am-header, dont la spécificité * l'emporte sans !important ; le reste du header est stylé par classes. * * Points de rupture (échelle commune, voir am-refonte.css) : header de la maquette dès 1200 px (docs/specs/header.md §8 ; * mesuré à 1200 px : nav 756 px pour 965 px disponibles à côté du logo, en FR comme en EN) ; burger en dessous, menu en * panneau latéral sur voile de 768 à 1199 px, plein écran sous 768 px ; logo et bandeau réduits sous 480 px. * * Mesures maquette (PSD 1920, calques du groupe Header) : bandeau 99 px ; logo x=82, 253 px de large ; * libellés Poppins SemiBold 20 px espacés de 101 px, centrés 5 px sous le milieu du bandeau ; repère actif 46 × 7 px * collé au bas ; bouton Contact 152 × 49, coins arrondis ~10 px (pas une pilule), bord droit à 96 px du bord. * Fond : rectangle #151D2A ; exporté à 34 % d'opacité sur la photo du hero (découpes PNG alpha 87/255), * d'où l'aspect gris des découpes sur fond blanc. Mode plein = opaque ; mode transparent = voile 34 % de la maquette. * * Fuites de l'ancien thème neutralisées ici sous #am-header / #am-mobile-menu, sans toucher aux anciennes feuilles : * - inc/start.css « .bg-purple, .bg-green, .bg-orange, .bg-orange2 { background-color; color: #fff } », * classes CSS saisies sur les items du menu principal en base (fond coloré derrière chaque libellé) ; * - inc/header.css « header { padding; height: 7.65em } » et « body.scrolled header { background: dégradé } ». */ :root { --am-header-h: 6.1875rem; --am-header-veil: rgba(21, 29, 42, 0.34); --am-header-scrolled: rgba(21, 29, 42, 0.8); /* fond une fois la page défilée, demande du 21/09/2026 */ --am-header-float: 1.8125rem; } @media screen and (max-width: 1199px) { :root { --am-header-h: 4.5rem; --am-header-float: 0px; } } @media screen and (max-width: 479px) { :root { --am-header-h: 4rem; } } /* Utilitaire pour les pages refondues en header plein : réserve la hauteur du header fixe */ .am-header-offset { padding-top: var(--am-header-h); } .am-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /******************* bandeau *******************/ #am-header { z-index: 1000; position: fixed; top: 0; left: 0; right: 0; width: 100%; height: var(--am-header-h); padding: 0; background: var(--am-color-ink); filter: none; color: var(--am-color-white); font-family: var(--am-font-sans); transform: translateY(0); transition: transform var(--am-transition) ease, background-color var(--am-transition) ease, top var(--am-transition) ease; } #am-header.am-header--transparent { top: var(--am-header-float); background: var(--am-header-veil); } #am-header.is-scrolled, #am-header.am-header--transparent.is-scrolled { top: 0; background: var(--am-header-scrolled); } #am-header.is-menu-open, #am-header.am-header--transparent.is-menu-open { top: 0; background: var(--am-color-ink); } #am-header.is-hidden:not(.is-menu-open) { transform: translateY(-100%); } @media (prefers-reduced-motion: reduce) { #am-header { transition: none; } } .am-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--am-space-6); height: 100%; width: 100%; /* Même tunnel que le contenu des pages (.am-container--narrow), décision du 18/09/2026 : la maquette calait le logo à 82 px et le bouton Contact à 96 px des bords. */ max-width: calc(var(--am-container-narrow) + (2 * var(--am-space-page))); margin: 0 auto; padding: 0 var(--am-space-page); } .am-header a:focus-visible, .am-header button:focus-visible, .am-mobile-menu a:focus-visible { outline: var(--am-focus-ring); outline-offset: var(--am-focus-offset); } /******************* logo *******************/ .am-header__logo { display: block; flex: 0 0 auto; line-height: 0; } @media screen and (min-width: 1200px) { /* maquette : logo 22 px sous le haut du bandeau, soit 1 px sous le centrage */ .am-header__logo { margin-top: 0.125rem; } } .am-header__logo-svg { display: block; width: clamp(9.286rem, 12.903vw, 15.456rem); /* maquette (152 px, 13,2vw, 253 px) agrandie de 15 % puis réduite de 15 % (18/09/2026), soit 97,75 % de la maquette */ height: auto; aspect-ratio: 265.6 / 59.3; fill: var(--am-color-white); } /* Petits mobiles : logo réduit avec la largeur d'écran (149 px à 480, 128 px à 375, 120 px au plus petit), raccord sans saut */ @media screen and (max-width: 479px) { .am-header__logo-svg { width: clamp(7.5rem, 31vw, 9.286rem); } } .am-header__logo-svg > path { fill: var(--am-color-pink); } /* * Symbole rose (les deux à la racine du SVG, anneaux concentriques centrés en 29 × 29 du viewBox), décisions du * 18/09/2026 : * - au chargement de l'accueil (body.home, avec html.am-anim) : les deux anneaux font un tour en sens inverse et se * calent dans leur position (remplissage « backwards » seulement : l'animation finie ne bloque pas le survol) ; * - au survol ou au focus du logo, toutes pages : le rond central pivote d'un huitième de tour (sens horaire, léger * rebond) ; l'anneau extérieur, ouvert en haut à droite au repos, fait un tour presque complet en sens inverse * (-315°) et cale son ouverture vers la droite. Retour en place à la sortie (transition, sans à-coup). * Aucun effet si le visiteur a demandé de réduire les animations. */ .am-header__logo-svg > path { transform-box: view-box; transform-origin: 29px 29px; } @keyframes am-logo-spin-cw { from { rotate: -360deg; } to { rotate: 0deg; } } @keyframes am-logo-spin-ccw { from { rotate: 360deg; } to { rotate: 0deg; } } .am-anim .home .am-header__logo-svg > path:nth-of-type(1) { animation: am-logo-spin-cw 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s backwards; } .am-anim .home .am-header__logo-svg > path:nth-of-type(2) { animation: am-logo-spin-ccw 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s backwards; } @media (prefers-reduced-motion: no-preference) { .am-header__logo-svg > path { transition: rotate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .am-header__logo-svg > path:nth-of-type(2) { transition: rotate 1s cubic-bezier(0.25, 0.9, 0.3, 1.06); } .am-header__logo:hover .am-header__logo-svg > path:nth-of-type(1), .am-header__logo:focus-visible .am-header__logo-svg > path:nth-of-type(1) { rotate: 45deg; } .am-header__logo:hover .am-header__logo-svg > path:nth-of-type(2), .am-header__logo:focus-visible .am-header__logo-svg > path:nth-of-type(2) { rotate: -315deg; } } /******************* navigation desktop *******************/ .am-header__nav { height: 100%; } .am-nav { display: flex; align-items: center; /* 101 px entre libellés à 1920, 51 px à 1280 */ --am-nav-gap: clamp(2rem, calc(7.8125vw - 3.0625rem), 6.3125rem); gap: var(--am-nav-gap); height: 100%; margin: 0; /* libellés et bouton 5 px sous le milieu du bandeau, comme en maquette */ padding: 0.625rem 0 0; list-style: none; } #am-header .am-nav > li { display: flex; align-items: center; height: 100%; margin: 0; padding: 0; background: none; color: var(--am-color-white); } .am-nav > li.menu-item > a { position: relative; display: flex; align-items: center; height: 100%; font-size: var(--am-fs-nav); line-height: var(--am-lh-nav); font-weight: var(--am-fw-semibold); color: var(--am-color-white); white-space: nowrap; text-decoration: none; } /* Repère de page : trait blanc centré au bas du bandeau, prévisualisé au survol (maquette : rose, 46 × 7 px ; blanc de 52,4 × 4,4 px, décision du 18/09/2026) */ .am-nav > li.menu-item > a::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 3.275rem; height: 0.275rem; margin-left: -1.6375rem; /* moitié de la largeur : trait centré sous le libellé */ background: var(--am-color-white); transform: scaleX(0); transition: transform var(--am-transition) ease; } .am-nav > li.menu-item > a:hover::after, .am-nav > li.current-menu-item > a::after, .am-nav > li.current-menu-ancestor > a::after, .am-nav > li.menu-item > a[aria-current="page"]::after { transform: scaleX(1); } /* Bouton Contact : 152 × 49, coins arrondis, SemiBold (calque « Contact » de la maquette) */ #am-header .am-nav__cta .am-btn, #am-mobile-menu .am-mobile-menu__cta .am-btn { min-width: 9.5rem; padding: 0.6875rem 1.75rem 0.5625rem; border-radius: 0.625rem; font-weight: var(--am-fw-semibold); line-height: 1.45; } /* Sélecteur de langue (décision client : juste avant Contact), rapproché de ses voisins */ #am-header .am-nav > li.am-nav__lang { margin-left: calc(-0.4 * var(--am-nav-gap)); margin-right: calc(-0.5 * var(--am-nav-gap)); } @media screen and (max-width: 1199px) { .am-header__nav { display: none; } } /******************* sélecteur de langue *******************/ /* Absent de la maquette : discret, plus petit que les libellés, langue courante pleine, l'autre atténuée */ .am-lang { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; font-size: calc(1rem * var(--am-type-scale)); line-height: var(--am-lh-nav); font-weight: var(--am-fw-medium, 500); letter-spacing: 0.02em; } .am-lang__item { display: flex; align-items: center; margin: 0; } .am-lang__item + .am-lang__item::before { content: '/'; margin: 0 0.35em; opacity: 0.5; } .am-lang__item a { color: currentColor; text-decoration: none; opacity: 0.6; transition: opacity var(--am-transition); } .am-lang__item a:hover, .am-lang__item.is-active a { opacity: 1; } .am-lang__item + .am-lang__item::before { opacity: 0.4; } /******************* bouton burger *******************/ .am-header__burger { display: none; position: relative; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; margin-right: -0.5rem; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--am-color-white); cursor: pointer; } @media screen and (max-width: 1199px) { .am-header__burger { display: block; } } .am-header__burger-icon, .am-header__burger-icon::before, .am-header__burger-icon::after { position: absolute; width: 1.75rem; height: 2px; background: currentColor; transition: transform var(--am-transition) ease, background-color var(--am-transition) ease; } .am-header__burger-icon { top: 50%; left: 50%; margin: -1px 0 0 -0.875rem; } .am-header__burger-icon::before, .am-header__burger-icon::after { content: ''; left: 0; } .am-header__burger-icon::before { top: -0.5rem; } .am-header__burger-icon::after { top: 0.5rem; } .am-header__burger[aria-expanded="true"] .am-header__burger-icon { background-color: transparent; } .am-header__burger[aria-expanded="true"] .am-header__burger-icon::before { transform: translateY(0.5rem) rotate(45deg); } .am-header__burger[aria-expanded="true"] .am-header__burger-icon::after { transform: translateY(-0.5rem) rotate(-45deg); } /******************* menu mobile *******************/ /* * Aucune maquette. Reprend le principe de l'ancien menu (.mobile-menu + .mobile-menu-overlay, inc/mobile-menu.css) : * - 768 à 1199 px : panneau de 26 rem qui entre par la droite, sous le bandeau, sur un voile qui couvre la page * (un clic sur le voile ferme le menu) ; * - sous 768 px : panneau plein écran, voile inutile. * Ouverture et fermeture : glissement de 0,35 s (fermeture : .is-closing, posée par am-header.js le temps de * l'animation), aucun si le visiteur a demandé de réduire les animations. * Page bloquée pendant l'ouverture (html.am-menu-open) ; la place de la barre de défilement est gardée * (scrollbar-gutter) pour que la page ne se décale pas. Le panneau défile seul s'il est plus haut que l'écran. */ .am-mobile-menu { z-index: 999; position: fixed; top: 0; right: 0; bottom: 0; width: min(26rem, 100%); padding: calc(var(--am-header-h) + var(--am-space-6)) var(--am-space-7) var(--am-space-8); overflow-y: auto; overscroll-behavior: contain; background: var(--am-color-ink); color: var(--am-color-white); font-family: var(--am-font-sans); text-align: left; } @media screen and (max-width: 767px) { .am-mobile-menu { width: 100%; padding-left: var(--am-space-page); padding-right: var(--am-space-page); } } .am-mobile-menu-overlay { z-index: 998; position: fixed; inset: 0; background: color-mix(in srgb, var(--am-color-ink) 60%, transparent); cursor: pointer; -webkit-tap-highlight-color: transparent; } .am-mobile-menu[hidden], .am-mobile-menu-overlay[hidden] { display: none; } @media screen and (min-width: 1200px) { .am-mobile-menu, .am-mobile-menu-overlay { display: none; } } @media screen and (max-width: 767px) { .am-mobile-menu-overlay { display: none; } } @keyframes am-menu-in { from { transform: translateX(100%); } to { transform: none; } } @keyframes am-menu-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .am-mobile-menu { animation: am-menu-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } .am-mobile-menu-overlay { animation: am-menu-fade 0.35s ease; } .am-mobile-menu.is-closing { animation: am-menu-in 0.25s ease-in reverse both; } .am-mobile-menu-overlay.is-closing { animation: am-menu-fade 0.25s ease-in reverse both; } } html.am-menu-open { overflow: hidden; scrollbar-gutter: stable; } html.am-menu-open body { overflow: hidden; } /* Éléments flottants qui passaient devant le panneau (icône et bandeau de tarteaucitron, z-index maximal) ou à côté (retour en haut de l'ancien thème) : masqués tant que le menu est ouvert ; la page est de toute façon inerte (am-header.js) */ html.am-menu-open #tarteaucitronRoot, html.am-menu-open .back-to-top { visibility: hidden; } .am-mobile-nav, .am-mobile-nav ul { margin: 0; padding: 0; list-style: none; } #am-mobile-menu .am-mobile-nav > li { margin: 0; background: none; color: var(--am-color-white); border-bottom: var(--am-border-line); } /* Liens sur toute la largeur du panneau : cible tactile de la rangée entière */ .am-mobile-nav a { display: block; padding: var(--am-space-4) 0; color: var(--am-color-white); text-decoration: none; } .am-mobile-nav > li > a { position: relative; font-size: var(--am-fs-card-title); line-height: var(--am-lh-card-title); font-weight: var(--am-fw-semibold); } .am-mobile-nav > li.current-menu-item > a::after, .am-mobile-nav > li > a[aria-current="page"]::after { content: ''; position: absolute; left: 0; bottom: var(--am-space-2); width: 2.875rem; height: 0.25rem; background: var(--am-color-pink); } .am-mobile-nav .sub-menu { padding: 0 0 var(--am-space-4) var(--am-space-5); } .am-mobile-nav .sub-menu a { padding: var(--am-space-2) 0; font-size: var(--am-fs-body); line-height: var(--am-lh-body); } .am-mobile-menu__lang, .am-mobile-menu__cta { margin-top: var(--am-space-6); } /* FR / EN au doigt : libellés au corps du texte, zone de 44 px de haut (marge négative : le texte reste aligné à gauche) */ .am-mobile-menu__lang .am-lang { margin: calc(-1 * var(--am-space-3)) 0 0 calc(-1 * var(--am-space-3)); font-size: var(--am-fs-body); } .am-mobile-menu__lang .am-lang__item a { display: inline-block; min-width: 2.75rem; padding: var(--am-space-3); line-height: 1.25rem; text-align: center; } .am-mobile-menu__lang .am-lang__item + .am-lang__item::before { margin: 0; }