/* ============================================ SSIAD - Header ============================================ */ :root { --ssiad-primary: #1a2980; --ssiad-primary-fg: #ffffff; } /* Empêche le panneau mobile off-canvas (position: fixed + translateX) d'élargir la largeur scrollable de la page quand il est fermé. On utilise "clip" plutôt que "hidden" : "hidden" force le navigateur à calculer overflow-y:auto sur (règle CSS d'interaction overflow-x/y), ce qui transforme en conteneur de scroll à part entière — les éléments position:fixed (menu mobile, overlay) sont alors comptés dans sa hauteur scrollable même translatés hors écran, créant un espace blanc sous le footer. "clip" bloque le débordement horizontal sans créer ce conteneur de scroll. */ html { overflow-x: clip; /* Le header change de hauteur en scrollant (padding/logo qui rétrécissent). Sans ça, le navigateur choisit un élément sous le header comme point d'ancrage et ajuste lui-même scrollY pour compenser ce mouvement — ce qui redéclenche l'event scroll, re-bascule .is-scrolled, et boucle en agrandissement/rétrécissement continu juste avant le haut de page. overflow-anchor sur le header seul ne suffit pas : il faut le désactiver globalement, pas juste sur l'élément qui bouge. */ overflow-anchor: none; } .ssiad-header { position: sticky; top: 0; z-index: 100; background: var(--ssiad-primary); border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: 0 4px 12px rgba(0,0,0,.1); transition: box-shadow 0.3s, background 0.3s; /* Sans ça, le navigateur essaie de compenser le changement de hauteur du header (padding/logo qui rétrécissent en scrollant) en ajustant lui-même scrollY ("scroll anchoring") — ce qui redéclenche l'event scroll, re-bascule .is-scrolled, et boucle en agrandissement/ rétrécissement continu juste avant le haut de la page. */ overflow-anchor: none; } /* Ajoutée en JS quand on scroll > 8px — imite l'effet "compact + blur" du React */ .ssiad-header.is-scrolled { background: rgba(26,41,128,.95); backdrop-filter: blur(16px); box-shadow: 0 8px 30px -12px rgba(26,41,128,.4); } .ssiad-header__inner { max-width: 1280px; margin: 0 auto; padding: .75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; transition: padding 0.3s; } .ssiad-header.is-scrolled .ssiad-header__inner { padding-top: .5rem; padding-bottom: .5rem; } /* ─── Logo ─── */ .ssiad-header__brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex-shrink: 0; } .ssiad-header__logo-box { background: #fff; border-radius: .75rem; padding: .35rem; box-shadow: 0 2px 6px rgba(0,0,0,.08); display: flex; transition: transform 0.3s; } .ssiad-header__brand:hover .ssiad-header__logo-box { transform: scale(1.05); } .ssiad-header__logo { height: 4.5rem; width: auto; display: block; transition: height 0.3s; } .ssiad-header.is-scrolled .ssiad-header__logo { height: 3rem; } .ssiad-header__brand-text { display: none; } .ssiad-header__brand-name { display: block; font-size: .85rem; font-weight: 600; color: var(--ssiad-primary-fg); letter-spacing: .02em; } .ssiad-header__brand-sub { display: block; font-size: .75rem; color: rgba(255,255,255,.8); } /* ─── Nav desktop ─── */ .ssiad-header__nav { display: none; align-items: center; gap: .25rem; } .ssiad-header__nav-link { position: relative; padding: .5rem .75rem; font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.75); text-decoration: none; border-radius: .375rem; transition: color 0.2s, background 0.2s; } .ssiad-header__nav-link:hover { color: #fff; background: rgba(255,255,255,.1); } .ssiad-header__nav-link.is-active { color: #fff; background: rgba(255,255,255,.15); font-weight: 600; } .ssiad-header__nav-link.is-active:hover { color: #fff; background: rgba(255,255,255,.15); } /* ─── Téléphone desktop ─── */ .ssiad-header__tel { display: none; align-items: center; gap: .5rem; background: #fff; color: var(--ssiad-primary); padding: .5rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 600; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; flex-shrink: 0; } .ssiad-header__tel:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,.15); } /* ─── Burger mobile ─── */ .ssiad-header__burger { display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #fff; padding: .5rem; border-radius: .375rem; cursor: pointer; transition: background 0.2s; } .ssiad-header__burger:hover { background: rgba(255,255,255,.1); } /* ─── Panneau mobile (off-canvas) ─── */ .ssiad-mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 98; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .ssiad-mobile-overlay.is-open { opacity: 1; pointer-events: auto; } .ssiad-mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 18rem; max-width: 85vw; background: var(--ssiad-primary); z-index: 99; display: flex; flex-direction: column; gap: .5rem; padding: 4.5rem 1.25rem 1.5rem; transform: translateX(100%); transition: transform 0.3s ease; box-shadow: -8px 0 24px rgba(0,0,0,.2); } .ssiad-mobile-menu.is-open { transform: translateX(0); } .ssiad-mobile-menu__link { padding: .85rem 1rem; font-size: 1rem; font-weight: 500; color: rgba(255,255,255,.8); text-decoration: none; border-radius: .5rem; transition: background 0.2s, color 0.2s; } .ssiad-mobile-menu__link:hover, .ssiad-mobile-menu__link.is-active { background: rgba(255,255,255,.15); color: #fff; } .ssiad-mobile-menu__link.is-active { font-weight: 600; } .ssiad-mobile-menu__tel { margin-top: 1rem; display: flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.15); color: #fff; padding: .85rem 1rem; border-radius: .5rem; text-decoration: none; font-weight: 500; } /* ─── Responsive : dès la tablette on affiche le menu desktop ─── */ @media (min-width: 768px) { .ssiad-header__brand-text { display: block; } .ssiad-header__nav { display: flex; } .ssiad-header__tel { display: flex; } .ssiad-header__burger { display: none; } }