/* En-tête : bande brun nuit collée en haut ; mot-marque, menu discret, bouton de simulation toujours visible. */ .site-header { position: sticky; top: 0; z-index: 50; } .site-header__bar { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-height); } .site-header__logo { display: block; flex-shrink: 0; margin-right: auto; } .site-header__logo img { width: auto; height: 1.375rem; /* Le segment de bras dépasse au-dessus des capitales : la boîte du mot est centrée, pas les lettres. On remonte l'image de l'écart (16 % de sa hauteur) pour centrer les capitales. */ translate: 0 -16%; } .site-nav__toggle { display: none; align-items: center; justify-content: center; width: var(--tap-size); height: var(--tap-size); border: 1px solid var(--field-line); border-radius: var(--radius-pill); background: none; color: var(--text-primary); cursor: pointer; } .site-nav__toggle svg { width: 1.25rem; height: 1.25rem; overflow: visible; } /* Les trois barres se croisent en une croix quand le menu est ouvert. */ .site-nav__bar { transform-box: view-box; transform-origin: 12px 12px; transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease-out); } .site-nav__toggle[aria-expanded='true'] .site-nav__bar--top { transform: rotate(45deg) translateY(6px); } .site-nav__toggle[aria-expanded='true'] .site-nav__bar--middle { opacity: 0; } .site-nav__toggle[aria-expanded='true'] .site-nav__bar--bottom { transform: rotate(-45deg) translateY(-6px); } @keyframes nav-item { from { opacity: 0; translate: 0 -0.5rem; } } .site-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); } .site-nav__link { display: inline-flex; align-items: center; min-height: var(--tap-size); padding-inline: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--fw-medium); text-decoration: none; transition: color 0.2s var(--ease-out); } .site-nav__link:hover, .site-nav__link[aria-current='page'] { color: var(--text-primary); } .site-nav__link[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--color-champagne); text-underline-offset: 0.5em; } .site-header__cta, .site-header__demo { flex-shrink: 0; } /* « Showroom à Paris » (David, 27/09/2026) : bouton dans la barre en large, entrée du panneau sous 64rem, seuil du menu repliable (voir la fin du fichier). Sans JS, le menu déplié la porte déjà. */ .site-header__demo { display: none; } .site-header__cta-short { display: none; } /* Logo, bouton et menu tiennent sur une ligne jusqu'à 320 px : libellé court, bouton et écarts resserrés (le mot-marque Monolithe est plus large que l'ancien), logo et bouton réduits sous 360 px. */ @media (max-width: 29.99rem) { .site-header__bar { gap: var(--space-3); } .site-header__cta { padding-inline: var(--space-4); } .site-header__cta-long { display: none; } .site-header__cta-short { display: inline; } .site-header__logo img { height: 1.25rem; } } @media (max-width: 22.49rem) { .site-header__cta { padding-inline: var(--space-3); } .site-header__logo img { height: 1.125rem; } } /* Sans JS, le menu reste affiché (repli en dessous du logo). Le panneau repliable s'arme sur la classe `js` de , posée en ligne dans avant le premier rendu : attendre nav.js (module, donc différé) affichait le menu puis le repliait, et la page remontait d'un bloc (CLS 0,39 sur mobile, 25/09/2026). */ @media (max-width: 63.99rem) { .site-header__bar { flex-wrap: wrap; } .site-nav { order: 3; width: 100%; } /* Avec le panneau armé : logo, bouton de devis, puis le menu dans le coin. */ .js .site-nav { order: 2; width: auto; } .js .site-header__cta { order: 1; } .js .site-nav__toggle { display: inline-flex; } .js .site-nav__list { position: absolute; top: 100%; right: 0; left: 0; display: grid; gap: 0; padding: var(--space-2) var(--gutter) var(--space-5); border-top: 1px solid var(--rule); border-bottom-right-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); background-color: var(--color-night); box-shadow: var(--shadow-plate); } .js .site-nav__list[hidden] { display: none; } /* Le panneau se déroule depuis la barre et s'y replie à la fermeture ; ses liens arrivent l'un après l'autre. nav.js pose `site-header--open` et ne cache le panneau (`hidden`) qu'une fois replié. Le découpage déborde sur les côtés et en bas pour laisser passer l'ombre ; les deux états déclarent leur clip-path : de ou vers `none`, il ne s'animerait pas. */ .js .site-nav__list { clip-path: inset(0 -3rem 100% -3rem); translate: 0 -0.75rem; opacity: 0; } .site-header--open .site-nav__list { clip-path: inset(0 -3rem -4rem -3rem); translate: 0; opacity: 1; } @media (prefers-reduced-motion: no-preference) { .js .site-nav__list { transition: clip-path 0.35s var(--ease-in-out), translate 0.35s var(--ease-in-out), opacity 0.3s var(--ease-in-out); } .site-header--open .site-nav__list { transition-timing-function: var(--ease-out); } .site-header--open .site-nav__list li { animation: nav-item 0.4s var(--ease-out) backwards; animation-delay: calc(0.06s + var(--i, 0) * 0.05s); } } .js .site-nav__link { width: 100%; font-size: var(--text-base); } } @media (min-width: 64rem) { .site-nav { margin-right: auto; } .site-header__demo { display: inline-flex; } .site-nav__item--demo { display: none; } .site-nav__list { gap: var(--space-1) var(--space-5); } } /* De 64 à 72rem, logo, menu et deux boutons ne tiennent sur une ligne qu'avec des écarts resserrés. */ @media (min-width: 64rem) and (max-width: 71.99rem) { .site-header__bar { gap: var(--space-3); } .site-nav__list { gap: var(--space-1); } }