/* ==========================================================================
   Base elements + page scaffolding (typography defaults, container, header,
   footer). Component-level pieces live in components.css.
   ========================================================================== */

/* --- Base typography ---------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--surface-page);
  background-image: var(--sheen-top);
  background-repeat: no-repeat;
  background-size: 100% 100vh;   /* keep the sheen a top "light source", not stretched down a long page */
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { color: var(--text-secondary); }

a {
  color: var(--link);
  transition: color var(--transition-fast);
}
a:hover { color: var(--link-hover); }

strong { font-weight: 600; color: var(--text-primary); }
em { font-style: italic; }

/* Visible, on-brand focus ring for keyboard users */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --- Skip link (a11y) --------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: var(--z-overlay);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-dark);
  color: var(--text-on-dark);
  border-radius: var(--radius-md);
  transition: top var(--transition-base);
}
.skip-link:focus {
  top: var(--space-2);
  color: var(--text-on-dark);
}

/* --- Layout primitives -------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow { max-width: var(--container-narrow); }

.section {
  padding-block: var(--section-gap);
}

.section--raised {
  background-color: var(--surface-raised);
  background-image: var(--sheen-top);
  background-repeat: no-repeat;
}

.section--dark {
  background-color: var(--surface-dark);
  background-image: var(--vignette), var(--sheen-top-strong);
  background-repeat: no-repeat;
  color: var(--text-on-dark);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--text-on-dark); }
.section--dark p { color: color-mix(in srgb, var(--text-on-dark) 82%, transparent); }

/* Eyebrow label — small-caps gold rule used above section titles */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}
.section--dark .eyebrow { color: var(--color-gold-soft); }

/* Decorative short rule (an opera-programme flourish) */
.rule {
  width: 56px;
  height: 2px;
  border: 0;
  background: var(--color-gold);
  margin-block: var(--space-3);
}
.rule--center { margin-inline: auto; }

/* ==========================================================================
   Site header / navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--surface-page) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--hairline) solid var(--border-hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-height);   /* the token the sticky sub-nav and the mobile nav offset both read */
  /* Full-bleed header: the element also carries .container, so it would
     otherwise be capped at 1120px and centred. Around 1024px the six links plus
     the FR/EN toggle nearly filled that box and the wordmark ended up crowded
     against the tabs. Releasing the cap pins the name to the left edge. */
  max-width: none;
}

.brand {
  font-family: var(--font-wordmark);
  /* Parisienne sits very small on the em — at --text-xl it read about two
     thirds the size of the serif it replaced. This is the optical match, not a
     whim. Weight stays 400: the family ships one weight, so asking for bold
     only gets a smeared synthetic emboldening. */
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
  /* Scripts carry their flourishes below the baseline; a little extra leading
     stops the descender of the É being clipped by the header's edge. */
  line-height: 1.4;
  color: var(--text-primary);
  white-space: nowrap;
}
.brand:hover { color: var(--text-accent); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav__link {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  padding-block: var(--space-1);
  /* A nav item must never wrap: "Presse & Médias" broke onto three lines
     around 1024px and dragged the header's height with it. */
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--text-accent); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Language toggle */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lang-toggle__btn {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.lang-toggle__btn[aria-pressed="true"] {
  background: var(--color-burgundy);
  color: var(--text-on-dark);
}

/* Mobile nav toggle — hidden on desktop */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}
.nav-toggle svg { width: 24px; height: 24px; }

/* ==========================================================================
   Site footer
   ========================================================================== */
.site-footer {
  background-color: var(--surface-dark);
  background-image: var(--sheen-top);
  background-repeat: no-repeat;
  color: var(--text-on-dark);
  padding-block: var(--space-6) var(--space-4);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}
.site-footer__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-on-dark);
}
.site-footer__tagline {
  color: color-mix(in srgb, var(--text-on-dark) 70%, transparent);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}
.site-footer__bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--hairline) solid color-mix(in srgb, var(--text-on-dark) 18%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--text-on-dark) 55%, transparent);
}
/* The footer's small print sets 12.6px text, which gave the "Contact" link a
   16px-tall tap target. Padding lifts it to 24px without changing how it looks. */
.site-footer__bottom a {
  display: inline-block;
  padding-block: 4px;
}

/* The three legal links (mentions légales · confidentialité · contact).
   A flex row rather than separators typed into the markup: at 320px the group
   wraps onto its own line, and a wrapped "·" stranded at the end of a line is
   the classic small-print ugliness. The gap also keeps the 24px tap targets
   from touching each other, which WCAG 2.5.8 asks for. */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

/* ==========================================================================
   Responsive: collapse nav on smaller screens
   --------------------------------------------------------------------------
   1080px, not the 820px used for content layout elsewhere. Measured: the six
   uppercase links plus the FR/EN toggle need 844px, and the wordmark another
   ~165px — so the bar needs ~1130px before it stops being cramped. Below 820px
   it was previously letting "Presse & Médias" wrap onto three lines, which
   dragged the header's height with it.

   ⚠ Only the NAV moves to 1080. The content breakpoints in components.css
   (.about, .roles, .bio-grid, .teach, .duo, .contact-grid…) stay at 820px —
   they are about column widths, not about this bar.
   ========================================================================== */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface-page);
    border-bottom: var(--hairline) solid var(--border-hairline);
    padding: var(--space-2) var(--container-pad) var(--space-4);
    box-shadow: var(--shadow-md);
    /* The panel is `fixed`, so it does NOT scroll with the page: anything past
       the bottom of the screen would be unreachable. In landscape on a phone
       (~360px tall) the six links + language toggle are 458px — Contact and the
       FR/EN buttons fell off. Cap the panel to the space under the header and
       let it scroll itself. `dvh` follows the browser's collapsing toolbars;
       the `vh` line above it is the fallback for older browsers. */
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;   /* don't scroll the page behind the menu */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), transform var(--transition-base),
      visibility var(--transition-base);
  }
  .nav[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__link {
    display: block;
    padding-block: var(--space-2);
    border-bottom: var(--hairline) solid var(--border-hairline);
    font-size: var(--text-base);
  }
  .nav__link::after { display: none; }
  .lang-toggle { margin-top: var(--space-3); align-self: flex-start; }
}

/* Just above the collapse point the bar fits, but only just. Tightening the
   gaps buys back ~96px so 1081–1240px doesn't read as cramped. */
@media (min-width: 1081px) and (max-width: 1240px) {
  .nav,
  .nav__list { gap: var(--space-3); }
}

/* --- Centred nav, wordmark left -------------------------------------------
   Three columns with the nav in the middle one: the empty third column mirrors
   the first, which is what actually centres the nav on the page rather than
   just placing it after the brand.

   The threshold is measured, not chosen. The wordmark is 197px and the nav
   844px, so a true centre *fits* from 1334px — but at that width the gap
   between the name and "Accueil" is only ~27px and it reads as cramped. 1366
   (a standard laptop width) leaves ~40px and is the point where it actually
   looks centred rather than merely being centred.

   Below it the mirror column cannot exist without the nav colliding with the
   name, so the layout falls back to the flex/space-between above — brand left,
   nav right, which is the previous design and perfectly good — until the
   hamburger takes over at 1080. Re-measure if a nav item is added or the
   wordmark's size changes. */
@media (min-width: 1366px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .brand { grid-column: 1; justify-self: start; }
  .nav { grid-column: 2; justify-self: center; }
}