/* ---------- Introduction : le logo prend vie ---------- */
/* La section est haute : le scroll qu'elle contient pilote le 360° du logo. */
/* Un seul écran : la page défile normalement ; pendant ce premier écran, le logo file vers la barre de menu */
.intro { position: relative; height: 100vh; height: 100svh; background: var(--creme); color: var(--encre); }
.intro__stage { position: relative; height: 100%; overflow: hidden; }
.intro__vol { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.intro.is-3d .intro__canvas { opacity: 1; }

/* Arrière-plan : zoom au trait de l'espace jusqu'à la buvette */
.intro__monde { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.intro__coord {
  position: absolute; left: var(--gutter); bottom: calc(26px + env(safe-area-inset-bottom)); margin: 0;
  font: 500 12px/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-doux);
  opacity: 0; transform: translateY(6px); transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.intro.is-drawn .intro__coord { opacity: .8; transform: none; }
.intro__credits { position: absolute; left: var(--gutter); bottom: calc(8px + env(safe-area-inset-bottom)); font-size: 10px; color: rgba(95, 76, 62, .55); }
.intro__credits a { color: inherit; }
@media (max-width: 560px) {
  .intro__coord { left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); white-space: nowrap; font-size: 10.5px; }
  .intro.is-drawn .intro__coord { transform: translateX(-50%); }
}
.intro__art { position: absolute; pointer-events: none; will-change: opacity, transform; }
.intro__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro__fil path { fill: none; stroke: var(--rouge); stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.intro__titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

.intro__cue {
  position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); margin: 0; transform: translate(-50%, 8px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: 500 12.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-doux);
  opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease); pointer-events: none;
}
.intro__cue i { width: 1.5px; height: 38px; background: linear-gradient(var(--rouge), transparent); animation: intro-cue 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes intro-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.intro.is-ready .intro__cue { opacity: 1; transform: translate(-50%, 0); }
.intro.is-scrolled .intro__cue { opacity: 0; }

.intro__skip {
  position: absolute; right: var(--gutter); bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; color: var(--encre); text-decoration: none; font-size: 14px; font-weight: 500;
  background: rgba(255, 253, 248, .7); border: 1px solid rgba(43, 29, 20, .12);
  opacity: 0; transition: opacity .6s var(--ease), background .2s;
}
.intro.is-live .intro__skip { opacity: .85; }
.intro.is-scrolled .intro__skip { opacity: 0; pointer-events: none; }
.intro__skip:hover { background: var(--blanc); }
@media (max-width: 560px) { .intro__skip { display: none; } }

/* Mouvement réduit : le logo s'affiche tel quel, sans tracé ni rotation */
.reduced-motion .intro { height: 100vh; height: 100svh; }
.reduced-motion .intro__cue, .reduced-motion .intro__canvas { display: none; }
.reduced-motion .intro__vol { position: absolute; }        /* sans animation, le logo défile avec la page */

/* Pendant l'intro, la barre de menu se construit au rythme du logo qui la rejoint.
   --arrivee (0 → 1) est posée par intro.js : c'est la progression du voyage du logo vers le coin. */
.site-header.is-pilote {
  --a: var(--arrivee, 0);
  --fond: clamp(0, (var(--a) - .5) / .42, 1);          /* le fond crème se pose pendant l'approche */
  --filet: clamp(0, (var(--a) - .9) / .1, 1);          /* le filet du bas, tout à la fin */
  --marque: clamp(0, (var(--a) - .965) / .035, 1);     /* le petit logo prend le relais du logo 3D */
  background: rgba(247, 240, 228, calc(.94 * var(--fond)));
  border-bottom-color: rgba(43, 29, 20, calc(.12 * var(--filet)));
  -webkit-backdrop-filter: blur(calc(10px * var(--fond))); backdrop-filter: blur(calc(10px * var(--fond)));
  transition: none;                                     /* suit le scroll, sans retard */
}
.site-header.is-pilote:focus-within { --arrivee: 1 !important; }   /* au clavier, la barre est entière */
.site-header.is-pilote .brand__mark { opacity: var(--marque); }

/* les liens puis le bouton arrivent l'un après l'autre */
.site-header.is-pilote .site-nav li,
.site-header.is-pilote .site-header__cta,
.site-header.is-pilote .site-header__resa {
  --t: clamp(0, (var(--a) - .6 - var(--i, 0) * .06) / .2, 1);
  opacity: var(--t); transform: translateY(calc(-10px * (1 - var(--t))));
}
.site-header.is-pilote .site-nav li:nth-child(2) { --i: 1; }
.site-header.is-pilote .site-nav li:nth-child(3) { --i: 2; }
.site-header.is-pilote .site-nav li:nth-child(4) { --i: 3; }
.site-header.is-pilote .site-nav li:nth-child(5) { --i: 4; }
.site-header.is-pilote .site-header__cta { --i: 4; }
.site-header.is-pilote .site-header__resa { --i: 5; }
.site-header.is-pilote:not(.is-atterri):not(:focus-within) a { pointer-events: none; }

/* à l'atterrissage, le nom se déroule depuis le logo */
.site-header .brand__name { transition: clip-path .9s var(--ease), opacity .5s var(--ease), transform .9s var(--ease); }
.site-header.is-pilote:not(.is-atterri):not(:focus-within) .brand__name { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(-8px); }
.site-header .brand__name { clip-path: inset(0 0 0 0); }

/* En-tête posé sur l'intro : transparent, texte encre, sans la marque (le logo est déjà au centre) */
.site-header[data-state="clear"] { background: transparent; color: var(--encre); }
.site-header[data-state="clear"] .site-nav a:hover { background: rgba(43, 29, 20, .07); }