/* Autonomous Vauban header for phones and tablets. */ .vbm-header, .vbm-overlay { display: none; } @media (max-width: 921px) { :root { --vbm-header-height: 72px; } /* Astra remains untouched on desktop and is fully replaced below its breakpoint. */ #masthead, #ast-mobile-header, #ast-desktop-header { display: none !important; } .vbm-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100002; display: block; width: 100%; height: 72px; border-bottom: 1px solid rgba(27, 49, 69, 0.09); /* Fond OPAQUE (et non plus rgba 0.96 + backdrop-blur). Le header étant sticky, tout le contenu défile dessous ; avec un fond semi-transparent en verre dépoli, les éléments qui glissent sous le header (notamment le pill .vauban-hero__eyebrow) transparaissaient = effet de « chevauchement » disgracieux au scroll. Un fond opaque masque proprement le contenu qui passe dessous, sur toutes les pages. */ background: #ffffff; box-shadow: 0 8px 24px rgba(27, 49, 69, 0.06); } /* Quand le menu est ouvert : épingler le header au viewport via fixed. Sur iOS, overflow:hidden sur ne bloque pas toujours le scroll par inertie, ce qui fait glisser le header sticky hors de l'écran et masque la croix de fermeture. fixed garantit que le header reste visible quelle que soit la position de scroll. */ .vbm-header.vbm-header--open { position: fixed; left: 0; right: 0; width: 100%; } .vbm-header__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1180px; height: 100%; margin: 0 auto; padding: 8px clamp(16px, 4vw, 30px); } .vbm-brand { display: inline-flex; min-width: 0; height: 100%; align-items: center; color: var(--vb-heading, #1b3145); text-decoration: none; } .vbm-brand:hover, .vbm-brand:focus { color: var(--vb-heading, #1b3145); } .vbm-brand:focus-visible { border-radius: 8px; outline: 3px solid rgba(102, 40, 247, 0.22); outline-offset: 3px; } .vbm-brand__logo { display: block; width: auto; max-width: min(210px, 58vw); height: 54px; margin: 0; object-fit: contain; object-position: left center; filter: none !important; } .vbm-brand__name { overflow: hidden; font-family: var(--vb-font-serif, Georgia, serif); font-size: 1.15rem; font-weight: 700; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .vbm-burger { position: relative; z-index: 100002; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; appearance: none; border: 1px solid rgba(102, 40, 247, 0.18); border-radius: 12px; background: rgba(102, 40, 247, 0.08); box-shadow: none; color: var(--vb-heading, #1b3145); line-height: 1; cursor: pointer; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; } .vbm-burger:hover, .vbm-burger:focus, .vbm-burger:active { border-color: rgba(102, 40, 247, 0.34); background: rgba(102, 40, 247, 0.14); box-shadow: none; color: #5420d0; outline: none; } .vbm-burger:focus-visible { outline: 3px solid rgba(102, 40, 247, 0.22); outline-offset: 3px; } .vbm-burger__icon { position: relative; display: grid; width: 24px; height: 24px; place-items: center; } .vbm-burger__icon svg { position: absolute; inset: 0; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 180ms ease, transform 180ms ease; } .vbm-burger__close-icon { opacity: 0; transform: rotate(-30deg) scale(0.75); } .vbm-burger.vbm-burger--open { border-color: transparent; background: var(--vb-primary-gradient, linear-gradient(135deg, #6628f7, #7c3aed)); color: #fff; } .vbm-burger.vbm-burger--open .vbm-burger__menu-icon { opacity: 0; transform: rotate(30deg) scale(0.75); } .vbm-burger.vbm-burger--open .vbm-burger__close-icon { opacity: 1; transform: rotate(0) scale(1); } .vbm-overlay { position: fixed; inset: 0; z-index: 100001; display: flex; padding-top: calc(72px + var(--wp-admin--admin-bar--height, 0px)); background: radial-gradient(circle at 85% 12%, rgba(102, 40, 247, 0.1), transparent 34%), var(--vb-bg, #fff); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity var(--vb-transition, 280ms) var(--vb-ease, ease), transform var(--vb-transition, 280ms) var(--vb-ease, ease), visibility 0s linear var(--vb-transition, 280ms); } .vbm-overlay.vbm-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity var(--vb-transition, 280ms) var(--vb-ease, ease), transform var(--vb-transition, 280ms) var(--vb-ease, ease), visibility 0s; } .vbm-overlay[hidden] { display: none; } .vbm-overlay__inner { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; max-width: 560px; min-height: 100%; margin: 0 auto; padding: 16px clamp(20px, 6vw, 36px) 40px; overflow-y: auto; } .vbm-overlay__body { flex: 1; display: flex; flex-direction: column; justify-content: center; } .vbm-nav__list { margin: 0; padding: 0; list-style: none; } .vbm-nav__item { margin: 0; text-align: center; } .vbm-nav__item + .vbm-nav__item { border-top: 1px solid var(--vb-line, #e5e7eb); } .vbm-nav__link { display: block; padding: 16px 8px; color: var(--vb-heading, #1b3145); font-family: var(--vb-font-serif, Georgia, serif); font-size: clamp(1.4rem, 5vw, 1.9rem); font-weight: 700; line-height: 1.2; text-decoration: none; } .vbm-nav__link:hover, .vbm-nav__link:focus-visible, .vbm-nav__link.is-current { color: var(--vb-primary, #6628f7); } .vbm-cta { margin-top: 30px; text-align: center; } .vbm-cta__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 360px; padding: 15px 24px; border-radius: var(--vb-radius, 12px); background: var(--vb-primary-gradient, linear-gradient(135deg, #6628f7, #7c3aed)); color: #fff; font-family: var(--vb-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-size: 1rem; font-weight: 700; text-decoration: none; } .vbm-cta__btn:hover, .vbm-cta__btn:focus, .vbm-cta__btn:visited { text-decoration: none; } .vbm-scroll-locked { overflow: hidden; } /* Spécificité renforcée (0,2,0) : neutralise les surcharges thème sur les liens du menu mobile (hors wrapper .vauban-vitrine). */ .vbm-header .vbm-brand, .vbm-header .vbm-brand:hover, .vbm-header .vbm-brand:focus { text-decoration: none; } .vbm-overlay .vbm-nav__link, .vbm-overlay .vbm-nav__link:hover, .vbm-overlay .vbm-nav__link:focus-visible, .vbm-overlay .vbm-nav__link.is-current { text-decoration: none; } .vbm-overlay .vbm-cta__btn, .vbm-overlay .vbm-cta__btn:hover, .vbm-overlay .vbm-cta__btn:focus, .vbm-overlay .vbm-cta__btn:visited { text-decoration: none; } /* The old Astra header floated above content; these offsets are no longer needed. */ body.ast-transparent-header .vauban-hero, .vauban-vitrine--ville .vauban-hero, .vauban-vitrine--guides .vauban-hero { padding-top: 0; } /* Legacy top offset (dead space under the menu). The first Elementor container of each vitrine page only existed to push content below the old FIXED Astra header. On phones and tablets that header is replaced by the sticky .vbm-header (which takes its own space in the flow) and the hero already carries its own top padding, so this container is pure empty space. Collapse it whenever it holds NO widget other than a spacer — this matches both the spacer-only pages (accueil, faq, contact, whether the container is e-con-full or e-con-boxed with an .e-con-inner wrapper) and the empty offset containers (qui-sommes-nous, offre-services). A first container that carries real content always has a non-spacer widget, so it is never matched: safe site-wide. */ .elementor > .e-con.e-parent:first-child:not(:has(.elementor-widget:not(.elementor-widget-spacer))) { display: none; } } /* Espacement haut du hero sur mobile/tablette — HARMONISÉ et sobre. Le header du site y est .vbm-header, STICKY et DANS LE FLUX (≠ l'ancien header Astra « fixe » ~100px pour lequel ces dégagements avaient été calibrés à 32–88px) : aucune compensation de header n'est nécessaire, ce padding n'est plus que de l'air esthétique. On l'unifie donc à une valeur réduite et IDENTIQUE sur toutes les pages vitrine, pour supprimer la bande trop grande sous le header signalée sur accueil/ faq/offre (56 px) tout en resserrant les autres (32 px). Cette règle (spécificité 0,2,0, feuille chargée en dernier) prime sur le repli général .vauban-hero__inner à 56 px (@media max-width:600) et sur les anciennes surcharges 88 px par page. Plafond aligné sur 921px (= breakpoint d'activation du vbm-header) pour couvrir la plage 901–921px qui échappait auparavant à cet override. */ @media (max-width: 921px) { .vauban-vitrine--accueil .vauban-hero__inner, .vauban-vitrine--faq .vauban-hero__inner, .vauban-vitrine--offre .vauban-hero__inner, .vauban-vitrine--qui-sommes-nous .vauban-hero__inner, .vauban-vitrine--contact .vauban-hero__inner, .vauban-sim-page .vsp-hero__inner { padding-top: clamp(20px, 5vw, 36px); } } @media (max-width: 544px) { :root { --vbm-header-height: 64px; } .vbm-header { height: 64px; } .vbm-header__inner { padding: 7px 14px; } .vbm-brand__logo { max-width: min(175px, 56vw); height: 48px; } .vbm-burger { width: 42px; min-width: 42px; height: 42px; min-height: 42px; border-radius: 11px; } .vbm-overlay { padding-top: calc(64px + var(--wp-admin--admin-bar--height, 0px)); } .vbm-nav__link { padding: 14px 8px; font-size: clamp(1.25rem, 6.5vw, 1.65rem); } } @media (min-width: 922px) { /* The WordPress custom CSS fixes Astra's desktop header while also forcing .site-content to start at top: 0. Accueil, FAQ and Contact still carried page-specific Elementor spacers (62/71/50px), so the shorter offsets let their content slide under the 70px header. Use the measured header height as the single source of truth and remove those legacy spacers. */ body:has(.vauban-vitrine--accueil) .site-content, body:has(.vauban-vitrine--faq) .site-content, body:has(.vauban-vitrine--contact) .site-content { padding-top: var(--vb-header-h, 70px) !important; } body:has(.vauban-vitrine--accueil) .elementor > .e-con.e-parent:first-child:not(:has(.elementor-widget:not(.elementor-widget-spacer))), body:has(.vauban-vitrine--faq) .elementor > .e-con.e-parent:first-child:not(:has(.elementor-widget:not(.elementor-widget-spacer))), body:has(.vauban-vitrine--contact) .elementor > .e-con.e-parent:first-child:not(:has(.elementor-widget:not(.elementor-widget-spacer))) { display: none; } .vbm-header, .vbm-overlay { display: none !important; } } @media (prefers-reduced-motion: reduce) { .vbm-overlay, .vbm-burger, .vbm-burger__icon svg { transition: none; } }