/* Héros : bande « Notre but », voile du pied, amorçage de l’entrée, en-tête compact et navigation active. */

/* Amorçage. Le script d’une ligne de <head> pose motion-boot avant le premier rendu :
   le héros attend sa chorégraphie (motion.js) au lieu d’être peint, masqué, puis animé.
   Repli visible à 2,5 s si le module ne s’exécute pas, et dès qu’un contrôle a le focus. */
.motion-boot .hero-content { opacity: 0; animation: hero-boot-fallback 1ms 2.5s forwards; }
.motion-boot .hero-content:focus-within { opacity: 1; animation: none; }
@keyframes hero-boot-fallback { to { opacity: 1; } }

/* Bande « Notre but » : dans le héros, au premier défilement, sur le fond animé. */
.hero-goal {
  --goal-pad: clamp(64px, 7vw, 120px);
  --goal-gap: clamp(24px, 2.6vw, 44px);
  --goal-statement: clamp(26px, 2.7vw, 46px);
  position: relative;
  isolation: isolate;
  padding: var(--goal-pad) calc(var(--gutter) - 12px) calc(var(--goal-pad) * .9);
}
/* Voile local : contraste stable sur le shader animé, sans backdrop-filter. Il naît
   sous les actions du héros et s’éteint avant le récit, sans bord visible. */
.hero-goal::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: calc(var(--goal-pad) * -1) 0 0;
  background: linear-gradient(180deg, #0f0e1700 0, #0f0e178f calc(var(--goal-pad) * 1.7), #0f0e178f calc(100% - var(--goal-pad) * .75), #0f0e1700 100%);
  pointer-events: none;
}
.hero-goal-head {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 10fr);
  column-gap: var(--goal-gap);
  align-items: start;
}
/* Même étiquette mono que .hero-kicker et .opening-label, centrée sur la première ligne de l’énoncé. */
.hero-goal-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: calc(var(--goal-statement) * 1.16);
  margin: 0;
  font: 400 11px/1.5 'JetBrains Mono', monospace;
  letter-spacing: .035em;
  color: var(--paper);
}
.hero-goal-label i { flex: none; width: 7px; height: 7px; background: var(--sand); }
.hero-goal-statement {
  max-width: 24em;
  margin: 0;
  font: 400 var(--goal-statement)/1.16 Figtree, Arial, sans-serif;
  letter-spacing: -.025em;
  color: var(--paper);
  text-wrap: pretty;
}
/* Les piliers s’alignent sur l’énoncé : un seul axe de lecture. */
.hero-goal-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--goal-gap);
  margin: clamp(48px, 5.4vw, 88px) 0 0 calc((100% - var(--goal-gap)) / 6 + var(--goal-gap));
  padding: 0;
  list-style: none;
}
.hero-goal-pillar { min-width: 0; }
.hero-goal-rule {
  position: relative;
  display: block;
  height: 1px;
  margin-bottom: clamp(18px, 1.7vw, 26px);
  background: #f4f3ee4d;
  transform-origin: left center;
}
.hero-goal-rule::before { content: ''; position: absolute; left: 0; top: -1px; width: 40px; height: 2px; background: var(--sand); }
.hero-goal-pillar h3 {
  margin: 0 0 10px;
  font: 600 clamp(18px, 1.4vw, 21px)/1.25 Figtree, Arial, sans-serif;
  letter-spacing: -.012em;
  color: var(--paper);
}
.hero-goal-pillar p { max-width: 34ch; margin: 0; font-size: clamp(15px, 1.1vw, 16px); line-height: 1.55; color: var(--paper); }
@media (max-width: 1199px) {
  .hero-goal-head { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .hero-goal-label { min-height: 0; }
  .hero-goal-pillars { margin-left: 0; }
}
@media (max-width: 850px) {
  .hero-goal-pillars { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero-goal-pillar p { max-width: 46ch; }
}
@media (max-width: 600px) {
  .hero-goal { padding-inline: 20px; }
  .hero-goal-pillar p { font-size: 16px; }
}
/* Voile local du pied du héros : sous 1200 px, la description remonte dans la poche
   claire du shader. Il suit le texte (le voile collant .atmosphere-shade, à hauteur
   d’écran, ne le peut pas), déborde sur les côtés, rogné par .opening { overflow: clip },
   et se fond en bas dans celui de .hero-goal::before : aucune arête visible. */
@media (max-width: 1199px) {
  /* Le pied, positionné, se peindrait au-dessus du titre : le titre reste devant son voile. */
  .hero h1 { position: relative; z-index: 1; }
  .hero-footer { position: relative; isolation: isolate; }
  .hero-footer::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -40px -100vw -64px;
    background: linear-gradient(180deg, #0f0e1700 0, #0f0e1773 40px, #0f0e1773 calc(100% - 40px), #0f0e1700 100%);
    pointer-events: none;
  }
}
@media print {
  .hero-goal::before, .hero-footer::before { display: none; }
  .hero-goal-label, .hero-goal-statement, .hero-goal-pillar :is(h3, p) { color: var(--ink); }
  .hero-goal-rule { background: #0f0e1740; }
}

/* En-tête compact. data-header n’existe qu’une fois site-header.js initialisé :
   sans JavaScript, l’en-tête garde sa position absolue d’origine. */
:root {
  --header-top: 32px;
  --header-condensed-top: 16px;
  --header-height: 60px;
  --header-clearance: 96px;
}
html { scroll-padding-top: var(--header-clearance); }
.header { top: var(--header-top); }
.header[data-header] { position: fixed; z-index: 30; }
/* Surface « verre Encre » : lisible sur Paper comme sur le fond sombre. */
.header::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -8px max(8px, calc(var(--gutter) - 20px));
  border: 1px solid #d6cef024;
  border-radius: 16px;
  background: #0f0e17d6;
  box-shadow: 0 14px 36px #0f0e1724;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  opacity: 0;
  pointer-events: none;
}
.header .brand { width: auto; padding-right: 16px; transform-origin: left center; }
.header:is([data-header="condensed"], [data-header="hidden"]) { translate: 0 calc(var(--header-condensed-top) - var(--header-top)); }
.header:is([data-header="condensed"], [data-header="hidden"])::before { opacity: 1; }
.header:is([data-header="condensed"], [data-header="hidden"]) .brand { scale: .86; }
/* Le masquage emporte aussi l’ombre portée de la surface (environ 50 px sous elle). */
.header[data-header="hidden"] { translate: 0 calc(-100% - var(--header-top) - 64px); }
/* Garde-fou CSS : un focus clavier rappelle l’en-tête même avant la prochaine image. */
.header[data-header="hidden"]:has(:focus-visible) { translate: 0 calc(var(--header-condensed-top) - var(--header-top)); }

/* Navigation de bureau : quatre liens, la marque et le contact sur une ligne de 851 à 1440 px. */
.desktop-nav a, .header-contact { white-space: nowrap; }
/* Le passage de flèche (interactions.js) est rogné par le conteneur de l’icône, quelle
   que soit la préférence de mouvement. Passé en grille, ce conteneur ne fixe plus la
   hauteur de ligne du bouton : la hauteur de l’en-tête est portée explicitement, et le
   contenu reste centré. */
.header-contact { min-height: var(--header-height); }
.header-contact > span { display: inline-grid; overflow: hidden; vertical-align: middle; }
@media (min-width: 851px) and (max-width: 1100px) {
  .header { gap: 10px; }
  .desktop-nav { gap: 18px; padding-inline: 16px; }
  .header-contact { padding-inline: 14px; }
}
/* Sous 920 px, le contact ne tient plus avec une marge sûre : l’action reste dans le héros. */
@media (min-width: 851px) and (max-width: 919px) {
  .header-contact { display: none; }
}

/* Section en cours : soulignement Iris de 2 px, sans graisse (pas de saut de largeur).
   Le trait existe hors de toute media query ; seule sa transition dépend de la préférence. */
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--iris);
  scale: 0 1;
  transform-origin: left center;
  transition: none;
}
.desktop-nav a[aria-current="true"]::after, .desktop-nav a:focus-visible::after { scale: 1 1; }
/* Sur la pastille Paper, l’anneau Lumière manquerait de contraste : Iris (4,75:1). */
.desktop-nav a:focus-visible { outline-color: var(--iris); }
@media (hover: hover) and (pointer: fine) {
  .desktop-nav a:not([aria-current="true"]):hover::after { scale: 1 1; opacity: .45; }
}
.mobile-menu a[aria-current="true"] {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--light);
  text-underline-offset: 7px;
}

@media (max-width: 850px) {
  :root { --header-top: 25px; }
  /* Le menu suit l’en-tête : position fixe, juste sous sa surface. */
  .header[data-header] + .mobile-menu {
    position: fixed;
    top: calc(var(--header-top) + var(--header-height) + 12px);
    inset-inline: max(8px, calc(var(--gutter) - 20px));
    border-radius: 16px;
    max-height: calc(100vh - var(--header-top) - var(--header-height) - 24px);
    max-height: calc(100dvh - var(--header-top) - var(--header-height) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .header[data-header="condensed"] + .mobile-menu { top: calc(var(--header-condensed-top) + var(--header-height) + 16px); }
}
@media (max-width: 600px) {
  :root { --header-top: 24px; --header-height: 44px; --header-clearance: 80px; }
}

@media (prefers-reduced-motion: no-preference) {
  .header[data-header] { transition: translate var(--duration-panel) var(--ease-standard); }
  .header[data-header="hidden"] { transition-duration: var(--duration-ui); transition-timing-function: var(--ease-exit); }
  .header::before { transition: opacity var(--duration-panel) var(--ease-standard); }
  .header .brand { transition: scale var(--duration-panel) var(--ease-standard); }
  .header[data-header] + .mobile-menu { transition: top var(--duration-panel) var(--ease-standard); }
  .desktop-nav a::after { transition: scale var(--duration-ui) var(--ease-standard), opacity var(--duration-feedback) var(--ease-standard); }
  .header-contact { transition: background-color var(--duration-feedback) var(--ease-standard), border-color var(--duration-feedback) var(--ease-standard); }
}
/* Survol du contact : la surface passe en Relief, comme le retour de couleur des autres CTA. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .header-contact:hover { background-color: var(--depth); border-color: #d6cef066; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-boot .hero-content { opacity: 1; animation: none; }
}
@media print {
  .motion-boot .hero-content { opacity: 1; animation: none; }
  .header[data-header] { position: absolute; translate: none; }
  .header::before { display: none; }
  .header .brand { scale: none; }
}

/* Objet du héros : la flèche de la marque en modules de verre profond (hero-object.js).
   Sans JavaScript, il occupe une zone par défaut ancrée sur le premier écran (svh), pas sur
   .hero, qui contient aussi « Notre but » ; le script la remplace par la zone libre mesurée.
   Il reste sous le texte (z-index 2 < 3). */
.hero-object { position: absolute; z-index: 2; pointer-events: none; right: calc(var(--gutter) - 12px); top: 46vh; top: 46svh; width: min(28vw, 520px); height: min(26svh, 440px); }
.hero-object-fallback, .hero-object-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-object-fallback { padding: 12%; }
/* Avec JavaScript, rien n’apparaît avant la mesure : pas de saut à l’arrivée du placement. */
.js .hero-object:not(.is-placed) { visibility: hidden; }
/* Le verre remplace le dessin dès que le rendu WebGL existe ; le dessin revient si le contexte est perdu. */
.hero-object.has-webgl:not(.is-context-lost) .hero-object-fallback { display: none; }
/* Sans mesure (pas de JavaScript), un petit écran ou une fenêtre basse n’a pas de zone sûre. */
@media (max-width: 850px), (max-height: 640px) { .hero-object:not(.is-placed) { display: none; } }
@media print { .hero-object { display: none; } }