/* ============================================================
   UN MIRACLE POUR NOËL — Socle du site
   Tokens, ciel d'hiver, neige, nav et guirlande, boutons,
   primitives de texte, entrées au scroll, pied de page.

   LA LOI DE LA PAGE (héritée de Trenkil) :
   le texte ne floute jamais. Ce qui entre arrive posé —
   translation + opacité. Le flou n'est permis qu'à la lumière
   (aurore, halos, lune) : c'est de la profondeur.

   LA THÈSE DU SITE : la nuit de Noël s'illumine à mesure
   qu'on avance. Chaque fenêtre allumée est un enfant gâté ;
   chaque ampoule de la guirlande, un pas de plus vers Noël.
   ============================================================ */

:root {
  --night: #060918;
  --night-2: #0A1030;
  --night-3: #121A44;
  --scene-fade: clamp(160px, 18vw, 240px);
  --ink: #F8F5EE;
  --ink-soft: rgba(248, 245, 238, 0.74);
  --ink-mute: rgba(248, 245, 238, 0.64);
  --line: rgba(248, 245, 238, 0.12);
  --line-strong: rgba(248, 245, 238, 0.24);

  --gold: #F3C873;
  --gold-deep: #D9A441;
  --candle: #FFB067;
  --red: #D93A4B;
  --red-deep: #A8243A;
  --fir: #1E6B52;
  --fir-light: #3FAE84;
  --ice: #BFD8FF;
  --paper: #FBF6EC;
  --kraft: #E9DCC4;
  --ink-dark: #1B1A2E;
  --ink-dark-mu: rgba(27, 26, 46, 0.58);

  --grad-cta: linear-gradient(135deg, #FBE3A6 0%, #F3C873 38%, #E9A24E 100%);
  --grad-gold-text: linear-gradient(100deg, #F3C873 0%, #FFF1CC 18%, #F3C873 36%, #E9A24E 70%, #F3C873 100%);

  /* Les trois intentions de mouvement — chaque animation en choisit UNE. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);     /* ce qui s'installe */
  --snap: cubic-bezier(0.22, 1.28, 0.36, 1); /* ce qui se POSE */
  --gather: cubic-bezier(0.55, 0, 0.15, 1);  /* ce qui part rejoindre sa place */

  --nav-h: 76px;
  --wrap: 1180px;
  --wood: #37251F;
  --wood-light: #6E4E36;
  --paper-shadow: 0 24px 60px -25px rgba(0, 0, 0, .55);
  --reading-scale: 1;
  --reading-edge: 16px;
  --reading-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* clip (et non hidden) : coupe le débordement sans casser les scènes épinglées (sticky). */
html { scroll-behavior: auto; overflow-x: clip; }
html.intro { overflow: hidden; }

body {
  background: var(--night);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

::selection { background: rgba(243, 200, 115, 0.32); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: var(--nav-h); }
sup { font-size: 0.62em; line-height: 0; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.center { text-align: center; }
.ink { color: var(--ink); }
.gold { color: var(--gold); }

/* ------------------------------------------------------------
   LE CIEL D'HIVER — fixe, sous tout le reste.
   Bleu nuit profond, aurore boréale qui respire, étoiles qui
   scintillent (générées par le JS, une à une).
   ------------------------------------------------------------ */
.sky {
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(120% 70% at 50% 120%, rgba(63, 91, 190, 0.28) 0%, rgba(6, 9, 24, 0) 60%),
    linear-gradient(180deg, #03050F 0%, #060918 38%, #0A1030 72%, #121A44 100%);
  overflow: hidden;
}

.sky__aurora { position: absolute; inset: -10% -20% 40%; opacity: .55; }
.sky__aurora i {
  position: absolute; border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  /* Une lumière stable accompagne la lecture. */
}
.sky__aurora i:nth-child(1) {
  width: 70vw; height: 22vw; left: -6vw; top: 10%;
  background: linear-gradient(90deg, rgba(63, 174, 132, 0) 0%, rgba(63, 174, 132, .55) 40%, rgba(110, 220, 190, .3) 70%, rgba(63, 174, 132, 0) 100%);
  transform: rotate(-8deg);
}
.sky__aurora i:nth-child(2) {
  width: 60vw; height: 18vw; right: -8vw; top: 4%;
  background: linear-gradient(90deg, rgba(120, 90, 220, 0) 0%, rgba(120, 90, 220, .45) 50%, rgba(120, 90, 220, 0) 100%);
  transform: rotate(10deg);
  animation-duration: 32s; animation-delay: -9s;
}
.sky__aurora i:nth-child(3) {
  width: 50vw; height: 14vw; left: 30vw; top: 26%;
  background: linear-gradient(90deg, rgba(191, 216, 255, 0) 0%, rgba(191, 216, 255, .3) 50%, rgba(191, 216, 255, 0) 100%);
  transform: rotate(-4deg);
  animation-duration: 38s; animation-delay: -18s;
}
@keyframes aurora {
  0% { translate: 0 0; scale: 1 1; opacity: .7; }
  50% { opacity: 1; }
  100% { translate: 6vw 3vh; scale: 1.18 .82; opacity: .6; }
}

.sky__stars {
  position: absolute; inset: 0 0 30% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}
@media (max-width: 600px) {
  :root { --scene-fade: clamp(80px, 24vw, 120px); }
}
.sky__stars i {
  position: absolute; width: var(--s, 2px); height: var(--s, 2px);
  left: var(--x); top: var(--y);
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, .8);
  opacity: var(--o, .7);
  /* Étoiles fixes : aucun scintillement derrière les textes. */
  animation-delay: var(--dl, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: var(--o, .7); transform: scale(1); }
  50% { opacity: .15; transform: scale(.6); }
}

/* Neige locale et célébration ponctuelle ; aucune réaction au pointeur global. */
.snow { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.dust { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; pointer-events: none; }

/* Le grain — pellicule : il saute (steps), il ne glisse pas. */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Grain immobile, comme le papier. */
}
/* Le grain saute par la position du motif : l'élément reste dans l'écran. */
@keyframes grain {
  0% { background-position: 0 0; } 20% { background-position: -40px 30px; }
  40% { background-position: 30px -50px; } 60% { background-position: -20px -10px; }
  80% { background-position: 50px 40px; } 100% { background-position: 0 0; }
}

/* ------------------------------------------------------------
   LE RIDEAU D'INTRO
   ------------------------------------------------------------ */
.curtain { display: none; }
.curtain:focus { outline: none; }
html.intro .curtain {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 20px 76px; gap: 0;
  background: radial-gradient(ellipse at 50% 44%, #15263A 0%, #090F21 42%, #030711 80%);
  transition: opacity .7s var(--ease);
}
html.intro .curtain.out { opacity: 0; }
.curtain__globe { width: min(430px, 82vw, 48svh); flex: 0 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: 50%; visibility: hidden; }
.curtain__globe:active { cursor: grabbing; }
.curtain__globe:focus-visible { outline-offset: -24px; border-radius: 50%; }
.globe { position: relative; display: block; width: 100%; transform: rotate(var(--globe-tilt, 0deg)); transform-origin: 50% 85%; }
/* D-061 : fond, intérieur et verre en calques superposés ; le zoom ne redessine jamais le verre agrandi. */
.globe svg { overflow: visible; }
.globe__back { width: 100%; height: auto; }
.globe__front { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Le cercle du verre (centre 240, 203 ; rayon 172) dans le repère 480 × 440.
   isolation : Safari découpe ainsi les calques animés par l'arrondi. */
.globe__inside { position: absolute; left: 14.1667%; top: 7.0455%; width: 71.6667%; height: 78.1818%; border-radius: 50%; overflow: hidden; isolation: isolate; }
.globe__foreground, .globe__snow { position: absolute; inset: 0; width: 100%; height: 100%; }
.curtain:not(.is-shaking) .globe { transition: transform .3s var(--ease); }
.globe__light { opacity: 0; transition: opacity .25s var(--ease); }
.globe__light.is-lit { opacity: 1; }
.snowflake { fill: #F1F0E7; stroke: none; opacity: .85; }
.snowflake--crystal { fill: none; stroke: #F1F0E7; stroke-width: .85; stroke-linecap: round; stroke-linejoin: round; }
.snowflake--settled { opacity: .65; }
.globe__presents { opacity: 1; }
.curtain__line {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: clamp(1.4rem, 3.2vw, 2.15rem); color: var(--paper); text-align: center;
}
.curtain__hint { max-width: 440px; margin-top: 14px; font-size: .8rem; line-height: 1.7; color: var(--ink-soft); text-align: center; text-wrap: balance; }
.curtain__motion { min-height: 44px; padding: 10px 22px; margin-top: 12px; font-size: .85rem; font-weight: 600; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; background: rgba(243, 200, 115, .1); transition: background .18s var(--ease), color .18s var(--ease); }
.curtain__motion:active { background: rgba(243, 200, 115, .22); }
.curtain__motion[aria-pressed="true"] { color: var(--paper); border-color: var(--line-strong); background: transparent; }
.curtain__motion:disabled { opacity: .7; cursor: wait; }
.curtain__status { min-height: 2.8em; max-width: 420px; margin-top: 8px; font-size: .72rem; line-height: 1.4; color: var(--gold); text-align: center; }
.curtain__skip {
  position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; translate: -50% 0;
  min-height: 44px; padding: 10px 20px; white-space: nowrap;
  border: 1px solid rgba(243, 200, 115, .24); border-radius: 30px;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.curtain__skip span { color: var(--gold); margin-left: 12px; }
.curtain__skip:hover, .curtain__skip:focus-visible { color: var(--paper); border-color: var(--gold); }
@keyframes intro-arrive { from { opacity: 1; } to { opacity: 0; } }

/* D-037 — commande sonore accessible avant le geste et pendant la traversée. */
.sound-tools { position: fixed; right: max(16px, env(safe-area-inset-right)); z-index: 55; display: grid; justify-items: end; max-width: min(300px, calc(100vw - 32px)); }
.sound-tools--intro { position: absolute; top: max(16px, env(safe-area-inset-top)); z-index: 5; }
.sound-tools--page { position: relative; right: auto; flex: none; }
.sound-tools--page .sound-toggle { width: 48px; height: 48px; padding: 10px; white-space: nowrap; }
.sound-tools--page [data-sound-label] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sound-tools--page .sound-status { position: absolute; top: 100%; right: 0; width: min(300px, calc(100vw - 32px)); }
html.intro .sound-tools--page { display: none; }
.sound-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--gold); border-radius: 28px; background: var(--night); color: var(--ink); font-size: .8rem; line-height: 1.4; box-shadow: var(--reading-shadow); transition: border-color .18s var(--ease), color .18s var(--ease); }
.sound-toggle[hidden] { display: none; }
.sound-toggle__icon { width: 22px; height: 22px; flex: none; color: var(--gold); }
.sound-toggle__mute { display: none; }
.sound-toggle.is-muted .sound-toggle__waves { display: none; }
.sound-toggle.is-muted .sound-toggle__mute { display: block; }
.sound-toggle:hover { color: var(--gold); }
.sound-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.sound-toggle--panel { margin-bottom: 8px; }
.sound-status { font-size: .75rem; line-height: 1.5; color: var(--ink); }
.sound-tools .sound-status:not(:empty) { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: var(--night); border: 1px solid var(--line-strong); }
.reading-contrast .sound-toggle { box-shadow: none; border-width: 2px; }
.motion-paused .sound-toggle { transition: none; }
@media (prefers-reduced-motion: reduce) { .sound-toggle { transition: none; } }

/* D-018 — le même village derrière le verre et sur l'accueil. */
html.intro .curtain { background: none; isolation: isolate; overflow: clip; }
.curtain::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 44%, #15263A 0%, #090F21 42%, #030711 80%);
}
/* D-051 : un voile commun révèle toute la composition sans fondus superposés. */
.curtain::after {
  content: ''; position: absolute; inset: 0; z-index: 10;
  background: var(--night); pointer-events: none;
}
.curtain:not(.world-ready) > * { visibility: hidden; }
.curtain.world-ready::after { animation: intro-arrive 4s var(--ease) both; }
.curtain__globe, .curtain__line, .curtain__hint, .curtain__motion, .curtain__status { position: relative; }
.curtain__globe { z-index: 2; transform-origin: 50% 46.136%; }
.curtain__skip { z-index: 4; background: rgba(6, 9, 24, .72); }
.globe-world {
  position: absolute; inset: 0; pointer-events: none; visibility: hidden;
  clip-path: circle(var(--portal-r, 0px) at var(--portal-x, 50%) var(--portal-y, 40%));
  background: radial-gradient(ellipse at 15% 15%, #183631 0%, transparent 55%),
    radial-gradient(ellipse at 95% 10%, #29203E 0%, transparent 50%),
    linear-gradient(#080E1D, #0A1030);
}
.world-ready .globe-world, .world-ready .curtain__globe {
  visibility: visible;
}
.world-ready .globe__night, .world-ready .globe__fallback { opacity: 0; }
.globe-world .globe-world__layer {
  position: absolute; left: var(--layer-x); top: var(--layer-y);
  right: auto; bottom: auto; width: var(--layer-w); height: var(--layer-h);
  transform-origin: 0 0; translate: none; transition: none;
  transform: translate(var(--layer-dx), var(--layer-dy)) scale(var(--layer-scale));
}
.globe-world .win, .globe-world .treelight { transition-duration: .25s; }
.globe-world .city--front .win.lit { filter: none; }
.is-entering::before { animation: portal-backdrop var(--journey-duration) linear both; }
.is-entering .globe-world { animation: portal-open var(--journey-duration) linear both; }
.is-entering .globe-world__layer {
  animation: portal-land calc(var(--journey-duration) * .7) var(--gather) calc(var(--journey-duration) * .1) both;
  will-change: transform;
}
.is-entering .curtain__globe { animation: portal-glass var(--journey-duration) linear both; will-change: transform; }
.is-entering .globe__foreground { animation: portal-foreground var(--journey-duration) linear both; }
.is-entering .globe__snow { animation: portal-snow var(--journey-duration) var(--ease) both; }
.is-entering .curtain__line, .is-entering .curtain__hint,
.is-entering .curtain__motion, .is-entering .curtain__status {
  opacity: 0; transition: opacity .25s var(--ease); pointer-events: none;
}
.is-entering .curtain__line { animation: none; }
.globe-world::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 222, 164, .12) 48%, rgba(243, 200, 115, .04) 53%, transparent 63%);
  pointer-events: none;
}
.is-entering .globe-world::after { animation: portal-reflection var(--journey-duration) var(--ease) both; }
@keyframes portal-land { to { transform: none; } }
@keyframes portal-backdrop { 0%, 60% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes portal-open {
  0%, 10% { clip-path: circle(var(--portal-r) at var(--portal-x) var(--portal-y)); opacity: 1; animation-timing-function: var(--gather); }
  70% { clip-path: circle(var(--portal-end) at var(--portal-x) var(--portal-y)); opacity: 1; }
  80% { clip-path: circle(var(--portal-end) at var(--portal-x) var(--portal-y)); opacity: 1; animation-timing-function: var(--ease); }
  90%, 100% { clip-path: circle(var(--portal-end) at var(--portal-x) var(--portal-y)); opacity: 0; }
}
@keyframes portal-glass {
  0%, 10% { transform: scale(1); opacity: 1; animation-timing-function: var(--gather); }
  55% { opacity: 1; }
  70% { transform: scale(var(--glass-scale)); opacity: 0; }
  100% { transform: scale(var(--glass-scale)); opacity: 0; }
}
@keyframes portal-foreground { 0%, 10% { transform: translateY(0); animation-timing-function: var(--gather); } 55%, 100% { transform: translateY(81.395%); } }
@keyframes portal-snow { from { transform: scale(1) translateY(0); opacity: 1; } to { transform: scale(1.25) translateY(6.395%); opacity: 0; } }
@keyframes portal-reflection {
  0%, 45% { opacity: 0; transform: translateX(-30%); }
  60% { opacity: 1; }
  80%, 100% { opacity: 0; transform: translateX(30%); }
}
@media (max-width: 600px) {
  .is-entering .globe__snow { animation-name: portal-snow-mobile; }
  .globe-world .moon__glow { opacity: .6; }
}
@keyframes portal-snow-mobile { to { transform: translateY(3.488%); opacity: 0; } }
@media (max-width: 600px) {
  .globe__detail { display: none; }
  .curtain__line { max-width: 290px; }
  .curtain__hint { max-width: 310px; font-size: .75rem; }
}
@media (max-height: 600px) {
  .curtain__globe { width: min(230px, 38svh); }
  .curtain__hint { margin-top: 4px; }
  .curtain__motion { margin-top: 0; }
  .curtain__line { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.intro { overflow: clip; }
  html.intro .curtain { display: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------
   NAV — transparente en haut, verre au scroll.
   ------------------------------------------------------------ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(6, 9, 24, 0.66);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--line);
}
.nav__inner {
  height: var(--nav-h);
  width: min(1320px, 100% - 40px); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; white-space: nowrap; }
.nav__brand svg { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(243, 200, 115, .35)); transition: transform .6s var(--snap); }
.nav__brand:hover svg { transform: rotate(-8deg) scale(1.08); }
.nav__brand em { font-weight: 400; font-size: 1.12em; color: var(--gold); }
.nav__links { display: flex; gap: 6px; }
.nav__link {
  position: relative; padding: 8px 12px; border-radius: 999px;
  font-size: .9rem; color: var(--ink-soft); text-decoration: none;
  transition: color .3s, background .3s;
}
.nav__link:hover { color: var(--ink); background: rgba(248, 245, 238, .06); }
.nav__link.is-active { color: var(--gold); }
.nav__right { display: flex; align-items: center; gap: 12px; }

.countdown {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(243, 200, 115, .3);
  background: rgba(243, 200, 115, .07);
  font-family: 'Outfit', sans-serif; font-size: .86rem; color: var(--gold);
  white-space: nowrap;
}
.countdown svg { width: 12px; height: 12px; margin-right: 3px; }
.countdown b { font-weight: 600; }

.nav__burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; }
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  position: absolute; left: 50%; width: 18px; height: 1.6px; background: var(--ink); border-radius: 2px; translate: -50% 0;
  transition: transform .4s var(--ease), opacity .3s;
}
.nav__burger span { top: 50%; }
.nav__burger span::before { content: ''; top: -6px; }
.nav__burger span::after { content: ''; top: 6px; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* La guirlande : la barre de progression, en ampoules. */
.garland { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) - 6px); height: 24px; pointer-events: none; }
.garland svg { width: 100%; height: 100%; overflow: visible; }
.garland .wire, .footer__lights .wire { fill: none; stroke: rgba(248, 245, 238, .18); stroke-width: 1; }
.garland .bulb, .footer__lights .bulb { transition: fill .5s, filter .5s; fill: rgba(248, 245, 238, .12); }
.garland .bulb.on, .footer__lights .bulb.on { filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor); fill: currentColor; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 45;
  padding: calc(var(--nav-h) + 24px) 24px 32px;
  background: rgba(6, 9, 24, .96);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__links { display: grid; gap: 4px; }
.mobile-menu__links a {
  display: grid; grid-template-columns: 34px 1fr; column-gap: 8px;
  padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none;
  opacity: 0; transform: translateY(12px);
  animation: rise .6s var(--ease) forwards;
}
.mobile-menu__links a:nth-child(2) { animation-delay: .05s; } .mobile-menu__links a:nth-child(3) { animation-delay: .1s; }
.mobile-menu__links a:nth-child(4) { animation-delay: .15s; } .mobile-menu__links a:nth-child(5) { animation-delay: .2s; }
.mobile-menu__links a:nth-child(6) { animation-delay: .25s; }
.mobile-menu__num { grid-row: span 2; font-family: 'Outfit'; font-size: .78rem; color: var(--gold); padding-top: 6px; }
.mobile-menu__dest { font-family: 'Outfit'; font-size: 1.5rem; font-weight: 500; }
.mobile-menu__mot { color: var(--ink-mute); font-size: 1.05rem; }
.mobile-menu__pied { display: grid; gap: 16px; justify-items: start; padding-top: 24px; }
.mobile-menu__slogan { color: var(--ink-soft); font-size: 1.2rem; }

/* ------------------------------------------------------------
   BOUTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s, color .3s;
}
.btn--cta {
  position: relative; overflow: hidden; isolation: isolate;
  color: #2A1606; background: var(--grad-cta);
  box-shadow: 0 0 0 1px rgba(255, 241, 204, .5) inset, 0 10px 34px -8px rgba(243, 200, 115, .6), 0 0 60px -10px rgba(243, 200, 115, .5);
}
/* Le reflet qui passe, comme sur une boule de Noël. */
.btn--cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 48%, transparent 66%);
  translate: -120% 0;
  animation: none;
}
@keyframes sheen { 0% { translate: -120% 0; } 22%, 100% { translate: 120% 0; } }
.btn--cta:hover::after { animation: sheen .8s var(--ease) 1; }
.btn--cta:hover { box-shadow: 0 0 0 1px rgba(255, 241, 204, .7) inset, 0 16px 44px -8px rgba(243, 200, 115, .8), 0 0 90px -10px rgba(243, 200, 115, .7); }
.btn--cta svg { width: 16px; height: 16px; }
.btn--ghost { color: var(--ink-soft); border: 1px solid var(--line-strong); }
.btn--ghost:hover { color: var(--ink); border-color: rgba(248, 245, 238, .45); background: rgba(248, 245, 238, .04); }
.btn--nav { padding: 10px 20px; font-size: .9rem; }
.btn--xl { padding: 20px 38px; font-size: 1.12rem; }
.btn__msg { width: 22px !important; height: 22px !important; }

/* D-039 — annoncer Facebook puis Messenger au plus près de l’action. */
.flocon-action, .atelier__action.flocon-action {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  min-width: 0; max-width: 26rem; text-align: left;
}
.hero__ctas.hero__ctas--flocon { align-items: flex-start; }
.flocon-action .flocon-hint {
  margin: 0; color: var(--ink-soft);
  font-size: calc(.875rem * var(--reading-scale)); line-height: 1.5;
  overflow-wrap: anywhere;
}
/* D-046 — aide centrée sur le bouton, décor localement apaisé. */
.hero__ctas--flocon > .flocon-action {
  position: relative; isolation: isolate; align-items: stretch;
  width: max-content; max-width: 100%; text-align: center;
}
.hero__ctas--flocon > .flocon-action::before {
  content: ''; position: absolute; inset: -24px -40px -36px; z-index: -1;
  background: radial-gradient(ellipse, rgba(6, 9, 24, .88) 0%, rgba(6, 9, 24, .72) 38%, rgba(6, 9, 24, 0) 72%);
  pointer-events: none;
}
.flocon-action .flocon-hint--signature {
  width: 0; min-width: 100%;
  font-size: calc(.8125rem * var(--reading-scale));
}
.flocon-hint--signature > .flocon-hint__destination,
.flocon-hint--signature > .flocon-hint__next {
  display: block; font-weight: 400;
}
.flocon-hint--signature > .flocon-hint__next { margin-top: 3px; }
.flocon-hint__new-tab {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.btn[data-lien] { min-height: 48px; white-space: normal; }
.btn[data-lien] > span[aria-hidden] { flex-shrink: 0; }
@media (max-width: 600px) {
  .flocon-action, .atelier__action.flocon-action { width: 100%; max-width: none; }
  .flocon-action > .btn { width: 100%; }
  .hero__ctas--flocon > .flocon-action { width: 100%; max-width: none; }
}

/* ------------------------------------------------------------
   TEXTE
   ------------------------------------------------------------ */
.serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Outfit', sans-serif; font-size: .78rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(243, 200, 115, .82);
}
.eyebrow svg { width: 12px; height: 12px; color: var(--gold); }

.h2 {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.9rem); line-height: 1.04; letter-spacing: -.03em;
  margin-top: 16px;
}
.h2 .serif { font-size: 1.1em; letter-spacing: -.01em; }

.lead { font-size: clamp(1.04rem, 1.4vw, 1.18rem); color: var(--ink-soft); max-width: 560px; margin-top: 20px; }
.center .lead { margin-inline: auto; }

.note { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--ink-mute); margin-top: 22px; max-width: 520px; }
.note svg { flex: none; width: 13px; height: 13px; margin-top: 5px; color: var(--gold); }

/* Le doré qui scintille : un reflet passe sur les mots magiques. */
.shimmer {
  background: var(--grad-gold-text); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-position: 35% 0;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ------------------------------------------------------------
   SECTIONS & ENTRÉES AU SCROLL
   ------------------------------------------------------------ */
main { position: relative; z-index: 1; overflow-x: clip; }
.section { padding: clamp(96px, 14vw, 170px) 0; position: relative; }
.section__head { max-width: 760px; }
.section__head.center { margin-inline: auto; }

.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js .settle { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity 1.1s var(--ease), transform 1.2s var(--snap); transition-delay: var(--d, 0s); }
.js .settle.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   PIED DE PAGE — une guirlande qui se balance.
   ------------------------------------------------------------ */
.footer { position: relative; z-index: 1; padding: 90px 0 36px; background: linear-gradient(180deg, rgba(3, 5, 15, 0) 0%, #03050F 40%); }
.footer__lights { position: absolute; top: 0; left: 0; right: 0; height: 60px; }
.footer__lights svg { width: 100%; height: 100%; overflow: visible; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.footer__brand svg { width: 46px; height: 46px; margin-bottom: 14px; }
.footer__name { font-family: 'Outfit'; font-weight: 600; font-size: 1.3rem; }
.footer__name em { color: var(--gold); font-size: 1.12em; }
.footer__sig { color: var(--ink-mute); font-size: .92rem; margin-top: 8px; max-width: 280px; }
.footer__tag { margin-top: 14px; font-family: 'Outfit'; color: var(--gold); font-size: .9rem; }
.footer__col { display: grid; gap: 10px; align-content: start; }
.footer__col h4 { font-family: 'Outfit'; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin-bottom: 6px; }
.footer__col a { color: var(--ink-soft); text-decoration: none; font-size: .94rem; transition: color .3s; overflow-wrap: anywhere; }
.footer__col a:hover { color: var(--gold); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; font-size: .84rem; color: var(--ink-mute); }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (min-width: 1181px) and (max-width: 1500px) {
  .nav__brand span, .nav__right .motion-toggle span { display: none; }
}
@media (max-width: 1180px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-block; }
}
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .wrap { width: calc(100% - 32px); }
  .nav__brand span { display: none; }
  .nav__inner { width: calc(100% - 24px); gap: 8px; }
  .nav__right { gap: 6px; }
  .nav__right > * { flex-shrink: 0; }
  .countdown { display: none; }
  .btn--nav { padding: 9px 16px; font-size: .84rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .nav__right { gap: 4px; }
  .btn--nav { padding-inline: 10px; font-size: .8rem; }
  .btn--nav > [aria-hidden] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .settle { opacity: 1; transform: none; }
}

/* D-012 — le mouvement reste un choix, disponible dès la navigation. */
[hidden] { display: none !important; }
.menu-open { overflow-y: hidden; }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 40px; padding: 8px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 24px; font-family: 'Outfit', sans-serif; font-size: .8rem; }
.motion-toggle svg { width: 16px; height: 16px; }
.motion-toggle[aria-pressed="true"] { color: var(--gold); background: rgba(243, 200, 115, .08); border-color: var(--gold-deep); }
.motion-toggle:disabled { cursor: default; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
html.motion-paused { scroll-behavior: auto; }
.motion-paused .reveal, .motion-paused .settle { opacity: 1; transform: none; }
.motion-paused .snow, .motion-paused .dust { display: none; }
@media (max-width: 1180px) { .motion-toggle span { display: none; } }
@media (prefers-reduced-motion: reduce) { .snow, .dust { display: none; } }