/* ============================================================
   5pm lab — motion v9 « DROIT AU BUT » (2026-08-25)

   Retours Agathe du 2026-08-25, appliqués à la lettre :
   · le COUCHER DE SOLEIL est SUPPRIMÉ (redondant avec les pages,
     aucun contenu neuf — la home s'arrête à la vidéo) ;
   · le RIDEAU D'ENCRE entre les onglets est SUPPRIMÉ (« ça enlève
     de la fluidité, c'est trop redondant ») — on navigue sec ;
   · la PORTE de l'archive est SUPPRIMÉE (« enlever le cadre blanc,
     garder que la suite directement »).

   Il reste deux moteurs, et un seul geste :

   1. LE POWERPOINT (.pdeck) — le scroll vertical fait glisser les
      slides LATÉRALEMENT. TOUTES les rubriques du haut y arrivent
      directement : Bouquets, Abonnements, Ateliers, Mariages, Pro.
   2. L'ARCHIVE (.canvasx) — canevas infini qu'on tire.

   Zéro bibliothèque. Un seul rAF par moteur. Tout composé sur le
   GPU. Sur téléphone et sous prefers-reduced-motion : slides
   empilées verticalement, travelling en carrousel.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1 · LE POWERPOINT (.pdeck)
   Corps haut de N × 100vh ; scène collée ; piste horizontale
   translatée EN CONTINU par js/motion.js (§ pdeck) — un travelling,
   pas une suite de bascules.
   ════════════════════════════════════════════════════════════ */

.pdeck { position: relative; z-index: 2; }

.pdeck__stage {
  position: sticky;
  top: 0;
  height: max(560px, 100vh);
  height: max(560px, 100dvh);
  overflow: hidden;
  background: var(--noir);
}

/* La piste est déplacée par une transformation écrite directement par
   le moteur (pas via une variable CSS : une custom property force une
   recascade de tout le sous-arbre à chaque frame). */
.pdeck__track {
  display: flex;
  height: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Chaque slide = exactement un écran. Les min-height verticaux de
   styles.css sont neutralisés ici : dans un diaporama, une slide ne
   grandit pas, elle cadre.
   `contain` borne le repaint à la slide : sans lui, déplacer la piste
   invalidait les six d'un coup. */
.pdeck__track > .slide {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  contain: layout paint;
  /* UNE SLIDE NE DÉFILE JAMAIS — retour Louis, 2026-08-25 : « certaines
     slides sont trop hautes du coup parfois ça scrolle verticalement, et
     c'est horrible ». Il a raison : dans un diaporama, le seul geste est
     le passage à la suivante. Un défilement interne fait croire que le
     diaporama est bloqué.
     Le contenu n'est pas coupé pour autant : il est MIS À L'ÉCHELLE.
     `js/motion.js` § fit mesure chaque slide et pose `--fit` — exactement
     ce que fait un logiciel de présentation quand la diapositive ne rentre
     pas dans le cadre. */
}
.pdeck__track > .hero { height: 100%; }
.pdeck__track .universe__grid { min-height: 100%; height: 100%; }
.pdeck__track .split__grid { min-height: 100%; height: 100%; }

/* ── LE CENTRAGE, sans rien forcer ──────────────────────────────
   C'est le navigateur qui aligne, pas nous : `proximity` n'agit que
   si le geste se termine DÉJÀ près d'un repère, et jamais pendant le
   mouvement. On ne reprend donc jamais le scroll à l'utilisateur —
   contrairement à l'aimant en JS, retiré. Hors du diaporama il n'y a
   aucun repère : le ciel et le hero restent totalement libres. */
html { scroll-snap-type: y proximity; }
@media (prefers-reduced-motion: reduce) { html { scroll-snap-type: none; } }
/* sur téléphone, le moteur retire les repères : plus rien à aligner */
.pdeck__snap {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-snap-align: start;
  scroll-snap-stop: normal; /* jamais « always » : ça bloquerait un geste ample */
}

/* Micro-parallaxe : le contenu de la slide arrive un peu moins vite
   que son cadre — la profondeur qu'on voit dans la référence.
   UNE seule transformation, sur un seul axe. Le retrait vertical, le
   rétrécissement et le fondu qui s'y ajoutaient ont été retirés : ils
   escamotaient le contenu à chaque passage, alors que dans la référence
   la diapositive qui entre est déjà entièrement lisible. */
.pdeck__track [data-par] {
  transform: translate3d(var(--par, 0px), 0, 0);
  will-change: transform;
}
/* Dans le diaporama, une photographie d'offre est un peu plus basse
   qu'en page longue : c'est autant de hauteur rendue au prix et au
   bouton, qui sont ce qu'on vient chercher. */
.pdeck__track .duo__pic img { aspect-ratio: 16 / 9; }

/* La photographie du split contre-glisse dans son panneau. */
.pdeck__track .split__media { overflow: hidden; }
.pdeck__track .split__media img[data-parallax] {
  width: 114%;
  max-width: none;
  transform: translate3d(var(--px, 0px), 0, 0);
  will-change: transform;
}

/* ── l'appareillage ── */
.pdeck__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  z-index: 40;
  background: rgba(245, 240, 230, 0.12);
}
.pdeck__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--amber);
}
.pdeck__ui {
  position: absolute;
  left: var(--pad-x);
  bottom: 1.3rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.pdeck__count,
.pdeck__hint {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(7, 6, 6, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}
.pdeck__hint { transition: opacity 0.5s var(--ease); }

/* les points de navigation vivent DANS la scène : quand le diaporama
   est passé, ils partent avec lui (en fixed ils flottaient sur le
   footer — un des bugs signalés) */
.pdeck .deck-nav {
  position: absolute;
  right: clamp(0.8rem, 2vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* ── repli vertical : téléphone & reduced-motion ──
   Les mêmes slides, empilées. Aucun moteur, aucun risque. */
@media (max-width: 860px) {
  .pdeck { height: auto !important; }
  .pdeck__stage { position: static; height: auto; overflow: visible; background: none; }
  .pdeck__track { display: block; transform: none !important; }
  .pdeck__track > .slide {
    width: auto; height: auto;
    min-height: max(560px, 100vh);
    overflow: visible;
  }
  .pdeck__track > .hero { height: max(560px, 100svh); }
  .pdeck__track .universe__grid, .pdeck__track .split__grid { height: auto; min-height: 0; }
  .pdeck__track [data-par] { transform: none !important; }
  .pdeck__track .split__media img[data-parallax] { width: 100%; transform: none !important; }
  .pdeck__ui, .pdeck__bar, .pdeck .deck-nav { display: none; }
}
.pdeck--flat { height: auto !important; }
.pdeck--flat .pdeck__stage { position: static; height: auto; overflow: visible; background: none; }
.pdeck--flat .pdeck__track { display: block; transform: none !important; }
.pdeck--flat .pdeck__track > .slide {
  width: auto; height: auto;
  min-height: max(560px, 100vh);
  overflow: visible;
}
.pdeck--flat .pdeck__track > .hero { height: max(560px, 100svh); }
.pdeck--flat .universe__grid, .pdeck--flat .split__grid { height: auto; min-height: 0; }
.pdeck--flat .pdeck__track [data-par] { transform: none !important; }
.pdeck--flat .split__media img[data-parallax] { width: 100%; transform: none !important; }
.pdeck--flat .pdeck__ui, .pdeck--flat .pdeck__bar, .pdeck--flat .deck-nav { display: none; }

/* Le travelling .rail3d (portfolio mariage) a été retiré le
   2026-08-25 : la page Mariages est devenue un diaporama, et sa bande
   de photographies est un simple défilement au doigt (.strip). */

/* ════════════════════════════════════════════════════════════
   2 · L'ARCHIVE (.canvasx) — canevas infini
   ════════════════════════════════════════════════════════════ */

.canvasx {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  cursor: grab;
  touch-action: none;
  overscroll-behavior: none;
}
.canvasx.is-drag { cursor: grabbing; }
.canvasx__plane {
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0);
}
.canvasx__cell {
  position: absolute;
  overflow: hidden;
  background: var(--ceramic);
  border-radius: 3px;
}
.canvasx__cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.5s;
  filter: saturate(0.94);
}
.canvasx__cell:hover img { transform: scale(1.04); filter: saturate(1.06); }
.canvasx__cell figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.7rem 0.8rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(to top, rgba(7, 6, 6, 0.8), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.35s var(--ease);
}
.canvasx__cell:hover figcaption { opacity: 1; transform: none; }

.canvasx__ui {
  position: fixed;
  left: 50%;
  bottom: clamp(1.2rem, 3vw, 2.2rem);
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1.1rem;
  background: rgba(7, 6, 6, 0.78);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
  pointer-events: none;
}
.canvasx__count { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

/* Les « photographies vivantes » (.living), les panneaux d'univers
   (.uni) et leur filtre de brise ont été retirés avec le diaporama de
   la home le 2026-08-25 : plus une seule page ne les utilisait, et le
   filtre SVG qu'ils appelaient (#breeze) n'existe plus dans le HTML. */

/* ── Respect du réglage système ─────────────────────────────── */
/* ── LA VISIONNEUSE DE L'ARCHIVE ─────────────────────────────────────
   Un tirage en grand, le cartel, et c'est tout. Clic ou Échap ferme. */
.archview {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background: rgba(8, 8, 8, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
  cursor: zoom-out;
}
.archview.is-on { opacity: 1; pointer-events: all; }
.archview figure {
  max-width: min(88vw, 1100px);
  max-height: 86vh;
  display: grid;
  gap: 0.9rem;
  transform: scale(0.97);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.archview.is-on figure { transform: none; }
.archview img {
  max-width: 100%;
  max-height: 78vh;
  width: auto; height: auto;
  object-fit: contain;
  margin-inline: auto;
}
.archview figcaption {
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, 0.75);
}
.archview__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f4f4f2;
  border: 1px solid rgba(244, 244, 242, 0.4);
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
}