/* ==========================================================================
   Snapzone · Design system web — COUCHE « SITE VITRINE »
   --------------------------------------------------------------------------
   Ce que l'app n'a pas : conteneurs, sections, titres display fluides, hero,
   voiles photo, texture carte, apparitions au scroll.
   Toutes les valeurs viennent de semantic.css.

   Points de rupture du site (les variables CSS ne marchent pas dans
   @media : ces valeurs sont écrites en clair, et seulement celles-ci) :
     640px  = petite tablette    900px = navigation desktop    1200px = large
   ========================================================================== */

/* ── Mise en page ───────────────────────────────────────────────────────── */
.sz-container {
  width: 100%;
  max-width: calc(var(--layout-max) + 2 * var(--spacing-gutter));
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

.sz-container--narrow { max-width: calc(var(--layout-narrow) + 2 * var(--spacing-gutter)); }

.sz-section {
  position: relative;
  padding-block: var(--spacing-section);
  background-color: var(--color-bg);
}

.sz-section--raised { background-color: var(--color-bg-raised); }
.sz-section--deep { background-color: var(--color-bg-deep); }

/* Texture carte : fond par défaut d'une section sans photo (blanc, 4–8 %). */
.sz-section--map::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/map-pattern.png") center / 640px repeat;
  opacity: 0.06;
  pointer-events: none;
}

.sz-section--map > * { position: relative; }

/* Grilles de contenu : colonnes qui se replient seules. */
.sz-grid {
  display: grid;
  gap: var(--spacing-card);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.sz-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.sz-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.sz-split {
  display: grid;
  gap: var(--spacing-wide);
  align-items: center;
}

@media (min-width: 900px) {
  .sz-split { grid-template-columns: 1fr 1fr; }
  .sz-split--media-first > :first-child { order: -1; }
}

.sz-stack { display: grid; gap: var(--spacing-cluster); }
.sz-stack--flow { gap: var(--spacing-flow); }
.sz-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-cluster); }

/* ── Typographie ────────────────────────────────────────────────────────── */
/* Display : accroches et titres de section. Archivo Black Italic, capitales. */
.sz-display-lg,
.sz-display-md,
.sz-display-sm {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 900;
  font-style: italic;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-content);
  text-wrap: balance;
}

.sz-display-lg { font-size: var(--text-display-lg); }
.sz-display-md { font-size: var(--text-display-md); }
.sz-display-sm { font-size: var(--text-display-sm); }

/* Le mot ou la ligne qui porte l'élan, en jaune. Une seule fois par écran. */
.sz-accent { color: var(--color-action); }

/* Titre de lieu : Black Italic, casse normale. */
.sz-place {
  margin: 0;
  font-weight: 900;
  font-style: italic;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
  text-transform: none;
}

.sz-lead {
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-content-muted);
  max-width: 62ch;
}

.sz-text-muted { color: var(--color-content-muted); }

/* Méta : « JAPON · 5.2K PARTIES » — mono, capitales, séparateur « · ». */
.sz-meta {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-content-muted);
}

/* Donnée : chrono, score, compteur. Jaune pour chrono et score, sinon blanc ou cyan. */
.sz-data {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: var(--text-data);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-content);
}

.sz-data--action { color: var(--color-action); }
.sz-data--instrument { color: var(--color-instrument-text); }

/* ── En-tête de section : eyebrow → titre → chapô ───────────────────────── */
.sz-section-head {
  display: grid;
  gap: var(--spacing-cluster);
  max-width: 820px;
  margin-bottom: var(--spacing-block);
}

.sz-section-head--tight { margin-bottom: var(--spacing-flow); }

.sz-section-head--center {
  margin-inline: auto;
  justify-items: center;
  text-align: center; /* centré : seulement pour une célébration ou un appel final */
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.sz-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(92svh, 880px);
  padding-block: calc(var(--header-height) + var(--spacing-wide)) var(--spacing-wide);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-bg);
}

.sz-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sz-hero__content { display: grid; gap: var(--spacing-flow); max-width: 760px; }

/* ── Voiles photo : obligatoires dès qu'un texte passe sur une image ───── */
.sz-veil { position: relative; isolation: isolate; }

.sz-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.sz-veil--bottom::after { background: var(--gradient-veil-bottom); } /* texte en bas */
.sz-veil--side::after { background: var(--gradient-veil-side); } /* texte à gauche */
.sz-veil--full::after { background: var(--gradient-veil-full); } /* texte ou logo centré */

/* ── Halo : lumière d'une seule couleur derrière l'élément à valoriser ─── */
.sz-halo { position: relative; isolation: isolate; }

.sz-halo::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: var(--gradient-halo-action);
  pointer-events: none;
}

.sz-halo--instrument::before { background: var(--gradient-halo-instrument); }

/* ── Média de section (photo, capture d'écran de l'app) ─────────────────── */
.sz-media {
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-media);
  background: var(--color-surface);
}

.sz-media > img,
.sz-media > video { width: 100%; height: 100%; object-fit: cover; }

/* ── Apparition au scroll (une fois, sobre) ─────────────────────────────── */
/* Le JS du site ajoute déjà .is-visible via IntersectionObserver. */
.sz-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-reveal) var(--ease-standard),
    transform var(--duration-reveal) var(--ease-standard);
}

.sz-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sz-reveal { opacity: 1; transform: none; }
}

/* ── Navigation du site ─────────────────────────────────────────────────── */
.sz-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-content-muted);
}

.sz-nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  height: 2px;
  background: var(--color-instrument);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-standard) var(--ease-standard);
}

.sz-nav-link:hover,
.sz-nav-link[aria-current="true"],
.sz-nav-link.is-active { color: var(--color-content); }

.sz-nav-link:hover::after,
.sz-nav-link[aria-current="true"]::after,
.sz-nav-link.is-active::after { transform: scaleX(1); }

.sz-site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  min-height: var(--header-height);
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration-standard) var(--ease-standard), border-color var(--duration-standard) var(--ease-standard);
}

.sz-site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  background-color: var(--color-overlay-deep);
}

.sz-site-footer {
  padding-block: var(--spacing-wide);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-deep);
  color: var(--color-content-subtle);
  font-size: var(--text-small);
}