/* ===================================================================== Braillard — Header & overlay menu (refonte 2026) ===================================================================== */ .br-header{ position: sticky; top: 0; z-index: 1000; background: transparent; /* TRANSPARENT partout (design d'origine, choix client) */ } /* Note : is-filled reste posée par header.js (état scrollé, cliquabilité) mais ne change plus le fond. En fin de page, le logo du header s'efface (--logo-fade) et le logo entier du footer prend le relais (issue #32) : pas d'overlap. */ .br-header__logo{ opacity: var(--logo-fade, 1); } /* Barre d'admin WordPress (utilisateurs CONNECTÉS) : elle est fixed à top:0 (z 99999) et recouvrait le haut du header sticky (top:0) -> logo masqué. On décale le header sous la barre. AUCUN effet pour les visiteurs (pas de classe admin-bar). */ body.admin-bar .br-header{ top: 32px; } @media screen and (max-width: 782px){ body.admin-bar .br-header{ top: 46px; } } .br-header__inner{ display: flex; align-items: flex-start; justify-content: space-between; padding: 40px clamp(20px, 4vw, 56px); } .br-header__logo{ position: relative; display: inline-flex; align-items: center; line-height: 0; } /* Au scroll : wordmark -> monogramme. Crossfade piloté EN CONTINU par la position de scroll via --scrolled (0 -> 1, posee par header.js). Plus de toggle brutal, plus de visibility:hidden qui coupait le fondu. La courte transition lisse les micro-sauts entre frames de scroll. */ /* Crossfade wordmark -> monogramme piloté par le scroll (--scrolled 0->1). Pas de transition CSS : l'opacité SUIT le scroll (aucun retard/traîne). Courbe raide (×1.6, décalée) -> le wordmark a quasi disparu avant que le monogramme n'apparaisse : plus de moment où les deux sont à 50% (superposition). */ .br-header__logo-full{ width: 448px; max-width: 62vw; height: auto; display: block; opacity: var(--word-op, 1); /* courbe calculée en JS (header.js) */ } .br-header__logo-mono{ position: absolute; left: 0; top: 0; height: 56px; width: 56px; transform-origin: left center; opacity: var(--mono-op, 0); /* courbe calculée en JS (header.js) */ transform: scale(calc(.9 + .1 * var(--scrolled, 0))); transition: filter .25s ease; } /* Sur une section à fond sombre (détecté par header.js) : monogramme inversé → disque BLANC + B noir, lisible sur le noir (le SVG est un disque noir + B blanc). */ .br-header.is-on-dark .br-header__logo-mono{ filter: invert(1); } /* Cliquabilite : on suit l'etat (is-scrolled = pose quand --scrolled > .5) */ .br-header__logo-mono{ pointer-events: none; } .br-header.is-scrolled .br-header__logo-full{ pointer-events: none; } .br-header.is-scrolled .br-header__logo-mono{ pointer-events: auto; } /* Header sticky : sa boite (pleine largeur) recouvrait la nav contextuelle (.br-pagenav, non sticky) qui defile dessous -> les clics etaient interceptes. On rend la boite du header transparente aux clics ; seuls le logo et les actions restent cliquables (l'ancre du logo DOIT etre auto pour naviguer). NB : plus besoin de « trouer » le logo au scroll (ancien clip width:56 qui causait un scintillement du crossfade) : depuis le fond BLANC du header au scroll (is-filled), la sous-nav est masquee, donc le logo ne la recouvre plus. */ .br-header, .br-header__inner{ pointer-events: none; } .br-header__actions, .br-header__logo{ pointer-events: auto; } /* Au scroll, le wordmark passe en opacity:0 mais GARDE sa boîte (448×119) : cette ancre invisible recouvrait le contenu collé dessous (ex. champ de recherche des filtres) et captait les clics -> navigation vers l'accueil. On rend l'ancre click-through au scroll ; seul le monogramme (56×56, pointer-events:auto ci-dessus) reste cliquable, et le clic dessus déclenche quand même la navigation du lien. */ .br-header.is-scrolled .br-header__logo{ pointer-events: none; } .br-header__actions{ display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); } .br-lang{ display: flex; gap: 10px; font-family: var(--br-font-body); font-size: clamp(12px, 0.81vw, 14px); } .br-lang__link{ color: #9a948d; text-decoration: none; } .br-lang__link.is-active{ color: var(--br-black); } .br-iconbtn{ background: none; border: 0; padding: 2px; cursor: pointer; color: var(--br-black); text-decoration: none; line-height: 1; display: inline-flex; font-size: 24px; } .br-menu-toggle{ background: none; border: 0; padding: 2px; cursor: pointer; color: var(--br-black); display: inline-flex; font-size: 24px; } /* ---------- Overlay plein écran ---------- */ .br-overlay{ position: fixed; top: 0; right: 0; bottom: 0; left: clamp(48px, 9.3vw, 161px); /* pas pleine largeur : laisse voir un bout du site à gauche */ --br-menu-indent: clamp(8px, 6.6vw, 114px); /* indent piliers/foot depuis le bord du panneau */ z-index: 1100; background: var(--br-white); box-shadow: -18px 0 50px rgba(0, 0, 0, .16); /* ombre portée sur le bord gauche (sur la bande visible du site) */ display: flex; flex-direction: column; padding: 22px clamp(20px, 4vw, 56px) 56px; visibility: hidden; transform: translateX(100%); /* hors-champ à droite */ transition: transform .5s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .5s; } .br-overlay[data-open="true"]{ /* slide droite → gauche */ visibility: visible; transform: translateX(0); transition: transform .5s cubic-bezier(.16, 1, .3, 1), visibility 0s; } .br-overlay__bar{ display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 1.6vw, 22px); } .br-overlay__icons{ display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); } .br-overlay__main{ flex: 1; min-height: 0; display: flex; align-items: flex-start; padding-top: clamp(20px, 6vh, 90px); padding-left: var(--br-menu-indent); /* aligne les piliers ~left 331/1728 (170px depuis le bord du panneau) */ overflow-y: auto; } .br-pillars{ list-style: none; margin: 0; padding: 0; width: 100%; } /* ---- Niveau 1 : les 4 piliers (Fraunces italique) ---- */ .br-pillars > li{ margin: .04em 0; } .br-pillars > li:nth-child(1){ --c: var(--br-origines); } .br-pillars > li:nth-child(2){ --c: var(--br-dialogues); } .br-pillars > li:nth-child(3){ --c: var(--br-transmissions); } .br-pillars > li:nth-child(4){ --c: var(--br-expertises); } .br-pillars > li > a{ font-family: var(--br-font-display); font-style: italic; font-weight: 300; font-size: clamp(38px, 6.4vw, 80px); line-height: 1.2; text-decoration: none; display: inline-block; color: var(--c); transition: opacity .2s ease; } .br-pillars > li > a:hover{ opacity: .65; } .br-pillars > li.menu-item-has-children > a{ cursor: pointer; } /* Le
  • parent est en display:grid (accordéon) → le , bien qu'inline-block, est ÉTIRÉ sur toute la largeur de la colonne (justify-self:stretch par défaut d'un enfant de grid) : le survol (dépliage) réagissait alors sur toute la largeur du panneau, déroutant. justify-self:start le recale à la largeur du texte → la zone de survol = le libellé du menu, pas tout le panneau. */ .br-pillars li.menu-item-has-children > a{ justify-self: start; } /* ---- Sous-menus (N2 & N3) : accordéon, Inter ---- */ /* Accordéon via grid-template-rows (0fr ↔ 1fr) : hauteur AUTO animée en douceur à l'ouverture ET à la fermeture (pas d'à-coup dû à un max-height surdimensionné). */ .br-pillars li.menu-item-has-children{ display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1); } .br-pillars li.menu-item-has-children.is-open{ grid-template-rows: auto 1fr; } /* Pendant la mesure JS (header.js/animateRows) : rangées pilotées par le CSS ci-dessus, transitions coupées (le fr ne résout correctement QUE sans transition — bug Chrome de transition fr figée). Jamais peint à l'écran. */ .br-pillars.br-menu-measure li{ transition: none !important; } .br-pillars .sub-menu{ list-style: none; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; min-height: 0; opacity: 0; transition: opacity .3s ease; } .br-pillars li.is-open > .sub-menu{ opacity: 1; } /* Niveau 2 — retrait horizontal seul sur le