/* vitrine/site.css — direction « galerie lumineuse »
   Palette, structure et noms de classes verrouillés par la spec ; ce fichier
   affine l'échelle typographique, le rythme d'espacement et les ombres.
   Le site est publié comme dossier statique autonome : polices self-hostées
   (vitrine/fonts/, sous-ensemble latin, poids réellement utilisés uniquement),
   aucune requête vers une origine externe. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/fraunces-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/fraunces-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/public-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/public-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/space-grotesk-600.woff2') format('woff2');
}

:root {
  /* Palette verrouillée. */
  --creme: #faf8f4; --encre: #1a1a1a; --accent: #b0483a;
  --gris: #6b675f; --carte: #ffffff; --trait: #e4ded2;

  /* Tokens dérivés (rythme, ombres) — libres, la palette ci-dessus ne change pas. */
  --ombre: 35 26 16; /* rgb components pour ombres teintées chaudes */
  --space-1: .5rem; --space-2: .875rem; --space-3: 1.25rem; --space-4: 2rem;
  --space-5: 3rem; --space-6: 4.5rem; --space-7: 6.5rem; --space-8: 9.5rem;
  --radius-s: 4px; --radius-m: 8px;
  --shadow-sm: 0 6px 20px rgb(var(--ombre) / .08);
  --shadow-md: 0 14px 34px rgb(var(--ombre) / .10);
  --shadow-lg: 0 26px 64px rgb(var(--ombre) / .14);

  --font-affiche: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-texte: 'Public Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-repere: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;

  /* Une seule courbe pour tout le mouvement de la page : départ franc, arrivée
     posée. Le mouvement se lit comme un geste unique plutôt qu'un assortiment
     d'effets. */
  --ease-doux: cubic-bezier(.3, .9, .3, 1);

  /* Coche des légendes, colorée par `mask` : aucune requête, une seule source. */
  --coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8l5.4 5.4L20 6'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

::selection { background: rgb(176 72 58 / .16); }

body {
  margin: 0; background: var(--creme); color: var(--encre);
  font-family: var(--font-texte);
  font-size: 1.0625rem;
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}

/* ---------- Hero ---------- */
/* « Galerie lumineuse » : une lumière chaude tombe du haut du mur sur les
   pièces accrochées. C'est le seul effet d'ambiance de la page — tout le reste
   reste sur le fond crème plat. */
.hero {
  position: relative;
  padding: var(--space-7) 1.5rem var(--space-5); text-align: center; overflow: hidden;
  background: radial-gradient(118% 74% at 50% -12%, rgb(176 72 58 / .075), rgb(176 72 58 / 0) 62%);
}

.hero-kicker {
  font-family: var(--font-repere); letter-spacing: .32em; text-transform: uppercase;
  font-size: .75rem; color: var(--accent); font-weight: 600;
  display: inline-flex; align-items: center; gap: .65em;
}
.hero-kicker::before, .hero-kicker::after { content: ''; width: 1.5rem; height: 1px; background: var(--accent); opacity: .55; }

.hero h1 {
  font-family: var(--font-affiche); font-size: clamp(2.4rem, 6.5vw, 4.75rem); font-weight: 700;
  letter-spacing: -.02em; line-height: .98; margin: var(--space-3) 0 var(--space-3);
}
.hero-sub {
  color: var(--gris); font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.65;
  max-width: 34rem; margin: 0 auto var(--space-6);
  text-wrap: pretty;
}
.hero-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hero-marquee-rail {
  display: flex; gap: 1.25rem; width: max-content;
  animation: marquee-defilement 42s linear infinite;
}
/* Le défilement se fige tant que le curseur est dessus : on peut regarder une
   vignette sans qu'elle s'échappe. */
.hero-marquee:hover .hero-marquee-rail { animation-play-state: paused; }
.hero-marquee-rail img {
  height: 112px; width: auto; border-radius: var(--radius-s); box-shadow: var(--shadow-sm);
  border: 1px solid var(--trait);
}
@keyframes marquee-defilement {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Scènes ---------- */
/* Chaque scène est accrochée comme une pièce dans une galerie : un cartel
   (numéro, métier, département), le titre, l'œuvre, puis la légende. */
.scene { max-width: 66rem; margin: 0 auto; padding: var(--space-6) 1.5rem; position: relative; }
/* Filet de séparation estompé aux deux bouts — même geste que le masque du
   marquee du hero, pour que la page n'ait qu'un vocabulaire. Un trait court
   centré avait été essayé : perdu au milieu du blanc, il se lisait comme un
   accident plutôt que comme une ponctuation. */
.scene + .scene::before, .cta::before {
  content: ''; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 1px;
  background: var(--trait);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}

.scene-meta {
  font-family: var(--font-repere); letter-spacing: .22em; text-transform: uppercase;
  font-size: .75rem; color: var(--accent); font-weight: 600;
  display: inline-flex; align-items: center; gap: .65em;
}
.scene-meta::before { content: ''; width: 1.5rem; height: 1px; background: var(--accent); opacity: .55; }

.scene-titre {
  font-family: var(--font-affiche); font-size: clamp(1.85rem, 3.6vw, 2.85rem); font-weight: 600;
  letter-spacing: -.015em; line-height: 1.08; margin: .5rem 0 var(--space-4);
}

/* Légende de la pièce : les mêmes gains reviennent sur les dix scènes. Traités
   en pastilles, ils criaient la répétition ; traités en légende fine sous
   l'image, ils corroborent la comparaison sans lui voler la vedette. */
.scene-points {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; list-style: none; padding: 0;
  margin: var(--space-3) 0 var(--space-4);
  font-size: .8125rem; color: var(--gris);
}
.scene-points li { display: inline-flex; align-items: center; gap: .5em; }
.scene-points li::before {
  content: ''; width: .72em; height: .72em; flex: none; background: var(--accent);
  -webkit-mask: var(--coche) center / contain no-repeat;
  mask: var(--coche) center / contain no-repeat;
}

.scene-lien { margin: 0; }
.scene-explorer {
  display: inline-flex; align-items: center; gap: .5em;
  color: var(--accent); font-weight: 600; font-size: .95rem; text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
  transition: background-size .35s var(--ease-doux);
}
.scene-explorer::after {
  content: '→'; transition: transform .35s var(--ease-doux);
}
.scene-explorer:hover { background-size: 100% 1px; }
.scene-explorer:hover::after { transform: translateX(.28em); }

/* ---------- Comparateur avant/après ---------- */
.compare {
  position: relative; border-radius: var(--radius-m); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--carte); border: 1px solid var(--trait);
  cursor: ew-resize;
  /* Réserve l'espace aux dimensions des captures desktop-fold (1440x900) : évite
     l'affaissement du bloc tant que les images lazy hors-écran ne sont pas chargées. */
  aspect-ratio: 1440 / 900;
}
/* Les deux calques (avant/après) sont positionnés en superposition plein cadre :
   le gabarit vient de `aspect-ratio` sur .compare, pas de la taille intrinsèque de
   l'image. Nécessaire aussi pour que le lazy-loading natif détecte une zone non
   nulle sur l'image "avant" (une <img> en flux normal avec height:auto reste à
   hauteur 0 tant qu'elle n'est pas chargée, et ne déclenche alors jamais son propre
   chargement — piège classé "bug lazy-images" côté captures). */
.compare-avant, .compare-apres { position: absolute; inset: 0; }
/* `object-position: top` : quand le cadre est plus court que la capture (cas
   mobile ci-dessous), on rogne le bas — le haut de page est ce qui décide. */
.compare-avant img, .compare-apres img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.compare-apres { clip-path: inset(0 0 0 var(--pos, 50%)); }

/* Le balayage d'amorce (site.js) pilote --pos par paliers : la transition rend
   le geste continu. Elle est coupée pendant un drag réel — sinon la poignée
   traînerait derrière le doigt. */
.compare-apres, .compare-poignee {
  transition: clip-path .6s var(--ease-doux), left .6s var(--ease-doux);
}
.compare:active .compare-apres, .compare:active .compare-poignee { transition: none; }

.compare-poignee {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px;
  background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .12), 0 0 18px rgb(0 0 0 / .3);
}
.compare-poignee::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-md);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8l-4 4 4 4M17 8l4 4-4 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 1.15rem;
  transition: transform .3s var(--ease-doux), box-shadow .3s var(--ease-doux);
}
/* La poignée répond au survol puis se raffermit sous le doigt : le curseur
   annonce qu'il se prend en main avant même qu'on l'essaie. */
.compare:hover .compare-poignee::after {
  transform: translate(-50%, -50%) scale(1.08); box-shadow: var(--shadow-lg);
}
.compare:active .compare-poignee::after {
  transform: translate(-50%, -50%) scale(.96); transition: none;
}

/* Le range est transparent : sans cette règle, le focus clavier n'aurait aucun
   rendu visible. On porte l'anneau sur le cadre de la comparaison. */
.compare:has(.compare-range:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

.compare-tag {
  font-family: var(--font-repere); position: absolute; top: .75rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 999px;
}
.compare-tag-avant { left: .75rem; background: rgb(0 0 0 / .55); color: #fff; backdrop-filter: blur(2px); }
.compare-tag-apres { right: .75rem; background: var(--accent); color: #fff; }

.compare-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
  /* `pan-y` et non `none` : le comparateur occupe les deux tiers d'un écran de
     téléphone: avec `none`, un balayage vertical parti de l'image ne faisait
     pas défiler la page (vérifié en touch émulé). Le navigateur garde donc le
     défilement vertical, le curseur garde les gestes horizontaux. */
  touch-action: pan-y;
}

/* ---------- CTA ---------- */
/* Même ponctuation qu'entre deux scènes (filet estompé mutualisé plus haut) :
   la sortie de galerie est une transition, pas une nouvelle section. */
.cta {
  position: relative; text-align: center;
  padding: var(--space-7) 1.5rem var(--space-7);
  max-width: 66rem; margin: 0 auto;
}
.cta h2 {
  font-family: var(--font-affiche); font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.05; margin: 0 0 var(--space-3);
  text-wrap: balance;
}
.cta p { color: var(--gris); font-size: 1.05rem; margin: 0; }
.cta a {
  color: var(--accent); font-weight: 600; text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px;
  transition: background-size .35s var(--ease-doux);
}
.cta a:hover { background-size: 100% 2px; }

/* ---------- Reveals ---------- */
/* `.visible` est posé par l'IntersectionObserver de site.js. Les délais
   ci-dessous mettent les éléments d'une scène en séquence : le cartel, puis le
   titre, puis l'œuvre, puis la légende — l'ordre de lecture, pas un effet. */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .75s var(--ease-doux), transform .75s var(--ease-doux);
  transition-delay: var(--reveal-delai, 0ms);
}
.reveal.visible { opacity: 1; transform: none; }

.hero h1 { --reveal-delai: 90ms; }
.hero-sub { --reveal-delai: 180ms; }
.hero-marquee { --reveal-delai: 300ms; }
.scene-titre { --reveal-delai: 70ms; }
.compare { --reveal-delai: 140ms; }
.scene-points { --reveal-delai: 210ms; }
.scene-lien { --reveal-delai: 260ms; }

@media (max-width: 640px) {
  .hero { padding: var(--space-6) 1.25rem var(--space-4); }
  .scene { padding: var(--space-6) 1.25rem; }
  .scene-points { font-size: .78rem; gap: .35rem 1.1rem; }
  .hero-marquee-rail img { height: 88px; }
  .compare-tag { top: .5rem; font-size: .65rem; padding: .25rem .6rem; }
  .compare-tag-avant { left: .5rem; }
  .compare-tag-apres { right: .5rem; }
  /* La <source> du comparateur bascule sur les captures mobile-fold (390x844) à
     ce palier. Le cadre est volontairement plus court que la capture : à
     390x844, un comparateur au ratio exact remplissait tout l'écran et on ne
     voyait jamais le titre, la comparaison et la légende ensemble. On rogne le
     bas (object-position: top) pour tenir la scène entière dans un écran. */
  .compare { aspect-ratio: 390 / 620; }
  .cta { padding: var(--space-7) 1.25rem var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-marquee-rail { transform: none !important; animation: none !important; }
  /* Le curseur reste manipulable, mais sans interpolation ni amorce (site.js). */
  .compare-apres, .compare-poignee { transition: none; }
  /* Aucun mouvement, y compris les micro-réactions au survol. */
  .compare-poignee::after, .scene-explorer, .scene-explorer::after, .cta a { transition: none; }
  .compare:hover .compare-poignee::after, .compare:active .compare-poignee::after {
    transform: translate(-50%, -50%);
  }
  .scene-explorer:hover::after { transform: none; }
}