/* shared/site-chrome.css — EN-TÊTE (nav) et PIED DE PAGE communs à tout le site vitrine.
   Le markup vient de shared/site-chrome.js (une seule source). Sur la home, l'en-tête est animé par le scroll (variable --p,
   voir new/new.css et new/new.js) ; partout ailleurs (html.fp-static) il est dans son état final : logotype 150 px, nav visible, fond blanc + filet. */
:root { --nav-h: 72px; --p: 0; }

a:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: 4px; }

/* ===== EN-TÊTE ===== */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 20;
  pointer-events: none;
}
.site-head::before { /* fond blanc + filet : une fois l'animation terminée (le contenu défile dessous) */
  content: "";
  position: absolute; inset: 0;
  background: var(--blanc-focal);
  border-bottom: 1px solid var(--gris-tres-clair);
  opacity: 0;
  transition: opacity .2s var(--focal-snap);
}
.at-end .site-head::before { opacity: 1; }

.wordmark {
  position: fixed;
  z-index: 21;
  pointer-events: none;
  top: calc(24px + 3px * var(--p));   /* 24 px au départ ; 27 px en nav (logo de 18 px centré dans 72) */
  left: var(--margin);
  /* span(4) : 4 colonnes + 3 gouttières */
  width: calc((100% - 2 * var(--margin) - 5 * var(--gutter)) / 6 * 4 + 3 * var(--gutter));
  line-height: 0;
  transform-origin: left top;
  /* 1 -> --logo-scale (150 px de large en nav), proportionnel au scroll */
  transform: scale(calc(1 + (var(--logo-scale, .19) - 1) * var(--p)));
}
.wordmark img { display: block; width: 100%; height: auto; }
/* Nav qui part avec le contenu : décalage vertical piloté par le scroll (shared/site-chrome.js), propriété `translate` pour ne pas toucher au `transform` (échelle) du logotype */
.site-head, .wordmark { translate: 0 var(--nav-shift, 0px); }
.nav-held .site-head, .nav-held .wordmark { transition: translate .35s var(--focal-snap); } /* retour en douceur quand on entre dans une section qui garde la nav visible */
.nav-on .wordmark a { pointer-events: auto; }

.nav {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--nav-h);
  padding: 0 var(--margin);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  font-size: 14px;
  opacity: clamp(0, calc((var(--p) - .6) / .4), 1); /* apparaît sur la fin du scroll */
  visibility: hidden;
}
.nav-on .nav { visibility: visible; }
.nav-on .nav a { pointer-events: auto; }
.n-real { grid-column: 4 / 5; }
.n-plat { grid-column: 5 / 6; }
.n-about { grid-column: 6 / 7; }


/* ===== État statique (toutes les pages sauf la home) ===== */
.fp-static body { padding-top: var(--nav-h); }
.fp-static .site-head::before { opacity: 1; }
.fp-static .wordmark { width: 150px; top: 27px; transform: none; pointer-events: auto; }
.fp-static .nav { opacity: 1; visibility: visible; }
.fp-static .nav a { pointer-events: auto; }
.nav a, .wordmark a { color: inherit; text-decoration: none; }
.nav a:hover, .nav a:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.nav a[aria-current="page"] { font-weight: 500; }
.fp-static .site-head, .fp-static .wordmark { font-family: var(--font-primary); }

/* ===== PIED DE PAGE : infos sur la grille 6 col, logotype XL, filet + mentions ===== */
.foot { position: relative; margin: 0 var(--margin); padding: calc(var(--u) / 2) 0 calc(var(--u) / 2); font-size: 14px; }
.foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--gris-tres-clair); }
.foot-info, .foot-bottom { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--gutter); }
.foot-info > div { display: flex; flex-direction: column; line-height: 22px; }
.f-label { font-size: 12px; color: var(--gris-moyen); line-height: 24px; }
.foot a { color: var(--noir-focal); text-decoration: none; }
.foot a:hover, .foot a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.f-contact { grid-column: 1 / 3; }
.f-time { grid-column: 4 / 5; }
.f-follow { grid-column: 5 / 6; }
.f-links { grid-column: 6 / 7; }
.f-clock { margin-left: 12px; font-variant-numeric: tabular-nums; }
.foot-brand { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--gutter); align-items: end; margin: var(--u) 0 0; }
.foot-logo { display: block; grid-column: 1 / 4; width: 100%; height: auto; filter: url(#fp-emboss); } /* logotype en Blanc Focal avec ombre interne (embossé) : filtre SVG défini dans site-chrome.js */
.f-copy { grid-column: 6 / 7; font-size: 12px; color: var(--gris-moyen); text-align: left; line-height: 1; }

/* ===== MOBILE ===== */
@media (max-width: 767px) {
  .foot-info { row-gap: var(--space-m); }
  .f-contact { grid-column: 1 / 7; }
  .f-time { grid-column: 1 / 7; }
  .f-follow { grid-column: 1 / 4; }
  .f-links { grid-column: 4 / 7; }
  .foot-brand { grid-template-columns: 1fr; row-gap: var(--space-xs); margin-top: var(--u); }
  .foot-logo, .f-copy { grid-column: 1; }
  .nav { display: flex; justify-content: flex-end; gap: var(--space-s); } /* mobile : les 3 liens à droite du logotype */
  .fp-static .wordmark { width: 120px; top: 29px; }
}