/* ==========================================================================
   Base: tokens, themes, type, components shared by every page
   Shape rule: interactive controls are pills, media and cards use --r-media / --r-card.
   ========================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alex Brush';
  src: url('../fonts/alex-brush.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Inline SVG icon sprite: present in the DOM, never laid out */
.sprite { position: absolute; }

:root {
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Alex Brush', 'Snell Roundhand', cursive;


  --gutter: clamp(20px, 5vw, 56px);
  --wrap: min(1240px, calc(100% - 2 * var(--gutter)));
  --r-media: 18px;
  --r-card: 22px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Night tokens here; html[data-theme='day'] (the default in the markup) overrides them */
  color-scheme: dark;
  --bg: #0a1d2a;
  --bg-2: #102a3c;
  --text: #f6efe2;
  --text-2: rgba(246, 239, 226, 0.76);
  --line: rgba(246, 239, 226, 0.16);
  --art: #f6efe2;
  --accent: #f6efe2;
  --on-accent: #0a1d2a;
  --shadow: rgba(2, 10, 16, 0.55);
  --spot-a: rgba(246, 239, 226, 0.62);
  --spot-b: rgba(242, 163, 182, 0.7);
  --spot-c: rgba(132, 192, 222, 0.62);
  --spot-d: rgba(232, 190, 104, 0.88);
}

html[data-theme='day'] {
  color-scheme: light;
  --bg: #fbf7ef;
  --bg-2: #f1eadc;
  --text: #0f3a52;
  --text-2: rgba(15, 58, 82, 0.8);
  --line: rgba(15, 58, 82, 0.18);
  --art: #1b5a7a;
  --accent: #1b5a7a;
  --on-accent: #fbf7ef;
  --shadow: rgba(15, 58, 82, 0.22);
  --spot-a: rgba(27, 90, 122, 0.42);
  --spot-b: rgba(236, 120, 150, 0.7);
  --spot-c: rgba(86, 160, 200, 0.62);
  --spot-d: rgba(206, 156, 60, 0.85);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

html.modal-open { overflow: hidden; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, p { margin: 0; }

h1 {
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.1rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Hand-drawn illustrations recoloured by the theme through their alpha channel */
.art {
  display: block;
  background: var(--art);
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
  transition: background-color 0.3s ease;
}
.art-ball-flowers { --src: url('../../images/disco-fleurs.png'); aspect-ratio: 746 / 1031; }
.art-ball { --src: url('../../images/disco.png'); aspect-ratio: 523 / 652; }
.art-dinos { --src: url('../../images/dinos.png'); aspect-ratio: 513 / 531; }

.icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 28px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { transform: translateY(-2px); }

.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid var(--line);
  transition: border-color 0.25s ease, gap 0.3s var(--ease);
}
.link-arrow:hover { border-color: var(--accent); gap: 12px; }

/* ---------- Zip downloads: size up front, then "en cours" / "lancé" while locked ---------- */
.zip-size { font-weight: 500; opacity: 0.7; font-variant-numeric: tabular-nums; }
.zip-spin {
  width: 1.05em;
  height: 1.05em;
  margin: 0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  flex: none;
}
[data-zip][aria-disabled] { cursor: progress; }
.btn-primary[aria-disabled]:hover { transform: none; }
.link-arrow[aria-disabled]:hover { gap: 8px; }
.link-arrow[data-zip][aria-disabled] { border-color: var(--accent); }
/* A quiet note set apart from the links: tinted block, same radius as the media */
.zip-hint { flex-basis: 100%; }
.zip-note {
  display: grid;
  gap: 6px;
  width: fit-content;
  max-width: min(100%, 52ch);
  margin-top: 6px;
  padding: 14px 18px;
  border-radius: var(--r-media);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.5;
}.zip-retry {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Floating dock (section nav + theme switch) ---------- */
.dock {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 14px 40px var(--shadow);
  transform: translateX(-50%);
}

.dock a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: var(--text-2);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dock a { padding: 0 16px; }
.dock a:hover { color: var(--text); }
.dock a.is-active { background: var(--accent); color: var(--on-accent); }

.l-short { display: none; }

@media (max-width: 640px) {
  .dock a { padding: 0 11px; font-size: 0.8rem; }
  .l-long { display: none; }
  .l-short { display: inline; }
}

@media (prefers-reduced-transparency: reduce) {
  .dock { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Media tiles (shared by every grid) ---------- */
.tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--bg-2);
  border-radius: var(--r-media);
  cursor: pointer;
  isolation: isolate;
}

.tile > img,
.tile > video,
.tile .layer {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.tile:hover > img,
.tile:hover > video,
.tile:hover .layer { transform: scale(1.04); }

/* Blur-up: the small thumbnail is on screen immediately, the sharp photo fades in over it */
.tile .layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease, transform 0.9s var(--ease); }
.tile .layer.is-ready { opacity: 1; }

.tile .badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(10, 29, 42, 0.78);
  color: #f6efe2;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* ---------- Disco-ball reflections ---------- */
/* Ambient mirror-ball reflections, generated by lights.js */
.lights-pivot { position: absolute; width: 0; height: 0; }

.spot {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: var(--round);
  box-shadow: 0 0 calc(var(--s) * 0.5) calc(var(--s) * 0.05) currentColor;
  transform: translate(var(--x), var(--y)) rotate(var(--a));
  opacity: 0;
}
.spot.a { background: var(--spot-a); color: var(--spot-a); }
.spot.b { background: var(--spot-b); color: var(--spot-b); }
.spot.c { background: var(--spot-c); color: var(--spot-c); }
.spot.d { background: var(--spot-d); color: var(--spot-d); }

/* Full-page light show (click on a disco ball) */
.show {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}
.show .lights-pivot { position: absolute; }

/* ---------- Viewer (native <dialog>) ---------- */
.viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f6efe2;
  overflow: hidden;
}
.viewer::backdrop {
  background: rgba(4, 12, 18, 0.93);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.viewer[open] { display: grid; grid-template-rows: auto 1fr; animation: viewer-in 0.3s ease both; }

.viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) clamp(14px, 3vw, 28px) 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.viewer-bar .group { display: flex; align-items: center; gap: 8px; }

.viewer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 46px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(246, 239, 226, 0.22);
  border-radius: 999px;
  background: rgba(246, 239, 226, 0.08);
  color: #f6efe2;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s var(--ease);
}
.viewer-btn:hover { background: rgba(246, 239, 226, 0.18); }
.viewer-btn:active { transform: scale(0.96); }

.viewer-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 clamp(8px, 7vw, 96px) max(16px, env(safe-area-inset-bottom));
}

.viewer-media {
  max-width: 100%;
  max-height: calc(100dvh - 120px);
  width: auto;
  height: auto;
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
}
.viewer-media.is-loading { opacity: 0; }

.viewer-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}
.viewer-nav.prev { left: clamp(8px, 2vw, 24px); }
.viewer-nav.next { right: clamp(8px, 2vw, 24px); }

@media (max-width: 640px) {
  .viewer-nav { display: none; }
  .viewer-stage { padding-inline: 8px; }
}

@keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Motion primitives (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from { opacity: 0; translate: 0 36px; }
    to { opacity: 1; translate: 0 0; }
  }

  @keyframes sway {
    0%    { rotate: -5deg;   animation-timing-function: ease-in-out; }
    12.5% { rotate: 4.4deg;  animation-timing-function: ease-in-out; }
    25%   { rotate: -3.8deg; animation-timing-function: ease-in-out; }
    37.5% { rotate: 3deg;    animation-timing-function: ease-in-out; }
    50%   { rotate: -2.2deg; animation-timing-function: ease-in-out; }
    62.5% { rotate: 2.8deg;  animation-timing-function: ease-in-out; }
    75%   { rotate: -3.8deg; animation-timing-function: ease-in-out; }
    87.5% { rotate: 4.6deg;  animation-timing-function: ease-in-out; }
    100%  { rotate: -5deg; }
  }

  /* Disco-ball reflections (ambient on the home hero, full-page show on click) */
  @keyframes orbit { to { rotate: 360deg; } }
  @keyframes twinkle {
    0%, 100% { opacity: 0; scale: 0.4; }
    50% { opacity: var(--peak, 0.85); scale: 1; }
  }
  @keyframes show-fade { 0% { opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes flash { from { opacity: 0.3; scale: 0.7; } to { opacity: 1; scale: 1.12; } }
  .lights-pivot { animation: orbit 150s linear infinite; }
  .spot { animation: twinkle var(--t) ease-in-out var(--d) infinite; }
  .show { animation: show-fade 7s ease both; }
  .show .lights-pivot { animation: orbit 7s linear both; }
  .show .spot { opacity: 1; animation: flash var(--t) ease-in-out var(--d) infinite alternate; }

  /* Zip in progress: the ring turns and the link's underline runs like a loading bar */
  @keyframes zip-line { from { background-position: -40% 100%; } to { background-position: 140% 100%; } }
  .zip-spin { animation: orbit 0.9s linear infinite; }
  .link-arrow[data-zip][data-state='busy'] {
    /* The bar is drawn over the (transparent) border itself, on top of a faint track */
    border-color: transparent;
    background:
      linear-gradient(var(--accent), var(--accent)) no-repeat,
      linear-gradient(var(--line), var(--line)) 0 100% / 100% 1.5px no-repeat;
    background-size: 30% 1.5px, 100% 1.5px;
    background-origin: border-box;
    animation: zip-line 1.3s ease-in-out infinite;
  }
  @keyframes zip-hint { from { opacity: 0; translate: 0 -6px; } }
  .zip-hint { animation: zip-hint 0.4s var(--ease) both; }

  /* Elements enter as they scroll into view, driven by scroll position (no JS, no listeners) */
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
  }
}

/* Theme switch: the whole page cross-fades in 0.3s (View Transitions; plain colour transitions elsewhere) */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.3s; animation-timing-function: ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}