:root {
  --accent-pistachio: #a3c957;
  --text-cream: #f3eadb;
  --text-orange: #f6a965;
  --bg: #fbfbfa;
  --ink: #161616;
  --muted: #7a7a76;
  --pink: #ff2d95;
  --gap: clamp(10px, 1.6vw, 22px);
  --pad: clamp(18px, 4vw, 56px);
}

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

html { scroll-behavior: smooth; }

/* Le GIF de fond est ajouté par background.js (balise <img> plein écran),
   pour que l'ondulation puisse le déformer. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Vidéo plein écran utilisée uniquement sur la partie 3. */
.partie-3 {
  background: #fff;
}

.page-partie1 {
  background: transparent;
}

.page-partie2 {
  background: linear-gradient(180deg, #795244 0%, #d8c8b8 52%, #702c3d 100%);
}

html:has(> body.page-partie1) { background: #a39de9; }
html:has(> body.page-partie2) {
  background: linear-gradient(180deg, #795244 0%, #d8c8b8 52%, #702c3d 100%);
}
html:has(> body.partie-3) {
  background: #fff;
}

/* Isole les fonds négatifs à la page pour que Safari les garde visibles sous le contenu. */
.page-partie1,
.page-partie2,
.partie-3 { isolation: isolate; }

/* Calques de couleur fixes, prolongés derrière les vidéos de 30vh à chaque extrémité. */
.page-partie2::before,
.partie-3::before {
  content: "";
  position: fixed;
  inset: -30vh 0;
  z-index: -1;
  pointer-events: none;
}

.page-partie2::before {
  background: linear-gradient(180deg, #795244 0%, #d8c8b8 52%, #702c3d 100%);
}

.partie-3::before {
  background: #fff;
}

/* Les fonds restent au-dessus du fond de page Safari, avec le contenu dans un calque supérieur. */
.bg-gif,
.fragment-background,
.video-background { z-index: 0 !important; }

.bg-wave-canvas { z-index: 1 !important; }

.page-partie1 > main,
.page-partie1 > .bottom {
  position: relative;
  z-index: 2;
}

.page-partie1 > main {
  padding-bottom: calc(var(--pad) + 3.5rem);
}

.video-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity .9s ease;
}

/* Les fonds remplissent le viewport de la page ; Safari gère séparément ses zones d’interface. */
.bg-gif,
.bg-wave-canvas,
.fragment-background,
.video-background {
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
}

/* iPhone Safari : étend les fonds derrière les zones de sécurité dès le premier affichage.
   100lvh évite que le fond change de hauteur lorsque les barres Safari se replient au scroll. */
@media (max-width: 520px) {
  .fragment-background,
  .video-background {
    top: calc(env(safe-area-inset-top, 0px) * -1) !important;
    right: 0 !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) * -1) !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100lvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.partie-3 .video-background {
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
  object-position: center calc(50% + 50px);
  opacity: .8;
}

/* Aperçu du GIF de fond à mi-opacité sur la partie 1, y compris le canvas d'ondulation. */
.page-partie1 .bg-gif,
.page-partie1 .bg-wave-canvas { opacity: .5; }

/* Fond vidéo de la page Fragment. */
.page-partie2 {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.fragment-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
  pointer-events: none;
  transition: opacity .9s ease;
}

.page-partie2 > main,
.page-partie2 > .bottom {
  position: relative;
  z-index: 1;
}

.page-partie2 > .topbar { z-index: 20; }

.page-partie2 > main {
  flex: 1;
  padding: 0 0 var(--pad);
}

.grid,
.fragment-field,
.illustration-track {
  width: min(100%, 780px);
  margin-inline: auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.item,
.fragment-tile {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  transition: opacity .3s ease;
}

.illustration-thumb {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.item img,
.fragment-tile img,
.fragment-tile video,
.illustration-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: none;
  object-position: var(--thumb-focus, 50% 50%);
  transform: none;
  opacity: .8;
  transition: opacity .65s cubic-bezier(.16, 1, .3, 1);
}

/* Layout garde exactement le même cadrage au repos et au survol. */
.item img {
  object-fit: none;
  object-position: var(--thumb-focus, 50% 50%);
}

.item:hover img,
.item:focus-visible img,
.fragment-tile:hover img,
.fragment-tile:focus-visible img,
.fragment-tile:hover video,
.fragment-tile:focus-visible video,
.illustration-thumb:hover img,
.illustration-thumb:focus-visible img {
  opacity: 1;
  transform: none;
}

.item:focus-visible,
.fragment-tile:focus-visible,
.illustration-thumb:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.partie-3 > main,
.partie-3 > .bottom {
  position: relative;
  z-index: 1;
}

.partie-3 > .topbar { z-index: 20; }

.partie-3 {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.partie-3 > .illustration-main {
  flex: 1;
  min-height: 0;
  padding: 0 0 var(--pad);
}


/* =========================================
   EN-TÊTE
   ========================================= */

.top {
  padding: var(--pad) var(--pad) 0;
  display: flex;
  flex-direction: column; /* titre en haut, Welcome en dessous */
  align-items: flex-start;
}

/* Titre PXL90 : effets gérés par title.js.
   text-box: trim-end retire seulement l'espace sous les lettres (le titre ne bouge pas). */
.top h1 {
  margin: 0;
  width: calc((100% - (2 * var(--gap))) / 3); /* largeur de la première colonne */
  font-family: "VT323", "Handjet", "DotGothic16", "Noto Sans Arabic", monospace;
  font-weight: 700;
  font-size: clamp(4.4rem, 14vw, 11rem);
  letter-spacing: -0.02em;
  line-height: .9;
  white-space: nowrap;
  color: #fff;
  text-box: trim-end cap alphabetic;
}

.top h1[dir="rtl"] { text-align: left; }
/* Welcome : aligné à gauche (comme le M du titre et l'image 1).
   Sa taille (--welcome-size) est calculée par layout.js : 66 % de la largeur de PXL90 ;
   la valeur de repli ne sert que si le script ne tourne pas.
   text-box: trim-both coupe l'espace au-dessus des majuscules et sous la ligne de base :
   l'écart avec le titre et avec l'image 1 est alors exactement --gap, comme entre les images. */
.top p,
.welcome {
  align-self: flex-start;
  margin: var(--gap) 0;
  padding: 0;
  font-size: var(--welcome-size, clamp(2rem, 6vw, 5rem)); /* calculée par layout.js */
  line-height: 1.15;
  text-align: left;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
  transition: color .25s ease;
}

/* Jaune fluo pendant l'effet de traduction (même teinte que « MP » dans title.js) */
.top .welcome.is-active { color: #f4ff00; }


/* =========================================
   GRILLE DES IMAGES
   ========================================= */

@media (max-width: 900px) {
  .grid,
  .fragment-field,
  .illustration-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top h1 { width: calc((100% - var(--gap)) / 2); }
}

@media (max-width: 520px) {
  .grid,
  .fragment-field,
  .illustration-track { grid-template-columns: 1fr; }
  .grid,
  .fragment-field,
  .illustration-track {
    width: 50%;
    padding-inline: 0;
  }
  .page-partie1 > main { padding-top: var(--pad); }
  .top h1 { width: 100%; }

  /* Accueil mobile : titre et navigation plus lisibles, avec davantage d'air. */
  .home .top h1 { font-size: clamp(13.57rem, 66.9vw, 25.86rem); }
  .home .parts {
    gap: calc(var(--gap) * .9);
    margin-top: calc(var(--gap) * 3);
  }
  .home .parts a { font-size: calc((var(--welcome-size) * 1.521) * 1.8); }
}

.home .top h1 {
  position: relative;
  left: -5px;
  font-size: clamp(7.92rem, 25.2vw, 19.8rem);
}

.home .welcome {
  position: relative;
  left: -3px;
  font-size: calc(var(--welcome-size) * 1.008);
}

.home .parts {
  gap: calc(var(--gap) * .9);
}

.home .parts a {
  font-size: calc((var(--welcome-size, clamp(2rem, 6vw, 5rem)) / 2) * 1.26);
}

.item img {
  opacity: 0;
}

.item img.loaded { opacity: .8; }
.item:hover img,
.item:focus-visible img { opacity: 1; }

/* Une vignette reste masquée tant que son cadrage automatique n'est pas fixé. */
.item img:not(.loaded) { opacity: 0 !important; }

/* Masque aussi une ancienne légende si un navigateur sert encore un script en cache. */
.item-caption { display: none !important; }

/* Voile bleu foncé au repos, qui se dissipe au survol sans déplacer l'image. */
.item::after,
.fragment-tile::after,
.illustration-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(5, 20, 68, .62);
  opacity: 1;
  pointer-events: none;
  transition: opacity .55s ease;
}

.fragment-tile::after { background: rgba(55, 27, 20, .62); }
.illustration-thumb::after { background: rgba(255, 255, 255, .62); }

.item:hover::after,
.item:focus-visible::after,
.fragment-tile:hover::after,
.fragment-tile:focus-visible::after,
.illustration-thumb:hover::after,
.illustration-thumb:focus-visible::after {
  opacity: 0;
}

/* =========================================
   FOCUS
   ========================================= */

.item:focus-visible,
.nav:focus-visible,
.close:focus-visible,
.bottom a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.nav:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .95));
}


/* =========================================
   PIED DE PAGE
   ========================================= */

.bottom {
  padding: calc(var(--pad) * 1.4) var(--pad) var(--pad);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
}

.bottom a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.bottom a:hover { border-bottom-color: var(--ink); }

.bottom .social-link {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 0;
  transition: opacity .2s ease;
}

.bottom .social-icon { transform: scale(1.2); }

.bottom .social-link:hover {
  border: 0;
  color: var(--text-orange);
  opacity: .72;
}

.social-icon { display: block; width: 2rem; height: 2rem; }
.mail-icon,
.instagram-icon { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.instagram-icon .instagram-dot { fill: currentColor; stroke: none; }
.behance-icon { width: 2.45rem; height: 2.05rem; fill: currentColor; }
.behance-icon text { font: 800 34px/1 Arial, sans-serif; letter-spacing: -3px; }

.page-partie1 > .bottom,
.page-partie2 > .bottom,
.partie-3 > .bottom {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: flex-start;
  padding: .35rem var(--pad) max(.35rem, env(safe-area-inset-bottom));
}

.page-partie1 > .bottom .social-link { color: var(--text-cream); }
.page-partie1 > .bottom .social-link:hover { color: var(--text-orange); }

.page-partie2 > .bottom .social-link,
.partie-3 > .bottom .social-link,
.page-partie2 > .topbar .back,
.partie-3 > .topbar .back {
  color: var(--ink);
}

.page-partie2 > .bottom .social-link:hover,
.partie-3 > .bottom .social-link:hover,
.page-partie2 > .topbar .back:hover,
.partie-3 > .topbar .back:hover,
.page-partie2 > .topbar .back:focus-visible,
.partie-3 > .topbar .back:focus-visible {
  color: var(--text-orange);
}

.page-partie2 > main,
.partie-3 > .illustration-main {
  padding-bottom: calc(var(--pad) + 3.5rem);
}


/* =========================================
   VISIONNEUSE
   ========================================= */

dialog {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

dialog[open] {
  display: grid;
  place-items: center;
}

dialog::backdrop { background: rgba(0, 0, 0, .22); }

#viewer[open]::backdrop {
  backdrop-filter: blur(18px);
  background: rgba(0, 0, 0, .22);
}

#viewer.viewer-opening::backdrop {
  animation: viewer-backdrop-in 1s cubic-bezier(.16, 1, .3, 1) both;
}

#viewer.viewer-closing::backdrop {
  animation: viewer-backdrop-out .4s ease both;
}

@keyframes viewer-backdrop-in {
  from { backdrop-filter: blur(0); background: rgba(0, 0, 0, 0); }
  to { backdrop-filter: blur(18px); background: rgba(0, 0, 0, .22); }
}

@keyframes viewer-backdrop-out {
  from { backdrop-filter: blur(18px); background: rgba(0, 0, 0, .22); }
  to { backdrop-filter: blur(0); background: rgba(0, 0, 0, 0); }
}

#viewer-img,
#viewer-video {
  max-width: min(92vw, 1600px);
  max-height: 88vh;
  object-fit: contain;
}

.page-partie1 #viewer-img { max-height: 72vh; }
.page-partie2 #viewer-img,
.page-partie2 #viewer-video { max-height: 88vh; }

.viewer-browser {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(560px, calc(100vw - 5rem));
  padding: .4rem .4rem .5rem;
  transform: translateX(-50%);
  text-align: center;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.viewer-browser p { display: none; }
.viewer-thumbs { display: flex; justify-content: center; gap: .45rem; }
.viewer-thumb {
  position: relative;
  width: clamp(42px, 9vw, 68px);
  height: clamp(38px, 7vh, 56px);
  padding: 2px;
  border: 0;
  background: transparent;
  opacity: .58;
  cursor: pointer;
  transition: opacity .25s ease;
}
.viewer-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.viewer-thumb:hover,
.viewer-thumb.is-current { opacity: 1; }
.viewer-thumb:hover,
.viewer-thumb:focus-visible { transform: none; }
.viewer-thumb:focus-visible { outline: 2px solid var(--text-orange); outline-offset: 3px; }
.viewer-video-thumb::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .9rem;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .8);
}

#viewer-video { display: none; grid-area: 1 / 1; background: #000; }
#viewer.viewer-show-video #viewer-img { display: none; }
#viewer.viewer-show-video #viewer-video { display: block; }

.nav,
.close {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  font: inherit;
  cursor: pointer;
  line-height: 1;
}

.nav {
  top: 50%;
  display: grid;
  width: 14rem;
  height: 6rem;
  place-items: center;
  transform: translateY(-50%);
  font-size: 6rem;
  padding: 0;
  touch-action: manipulation;
}

/* viewer-arrows.js les place au milieu de l'espace disponible autour de l'image. */
.prev { left: 0; }
.next { right: 0; }

.close {
  top: .75rem;
  right: 1.25rem;
  font-size: 2.5rem;
  padding: .5rem;
}


/* =========================================
   VISIONNEUSE — OUVERTURE / FERMETURE
   Deux familles de noms de classes sont gérées
   (opening/visible/closing et viewer-opening/viewer-open/viewer-closing)
   selon les classes posées par les scripts des visionneuses.
   ========================================= */

/* Départ : l'image part de la position du clic */
#viewer.opening,
#viewer.viewer-opening {
  background: transparent;
  transition: background .65s cubic-bezier(.16, 1, .3, 1);
}

#viewer.opening #viewer-img,
#viewer.viewer-opening #viewer-img,
#viewer.opening #viewer-video,
#viewer.viewer-opening #viewer-video {
  opacity: 0;
  transform:
    translate(var(--start-x, var(--click-x, 0px)), var(--start-y, var(--click-y, 0px)))
    scale(.08);
  filter: blur(8px);
  transition: none;
}

/* Arrivée : expansion douce */
#viewer.opening.visible,
#viewer.viewer-opening.viewer-open {
  background: transparent;
}

#viewer.opening.visible #viewer-img,
#viewer.viewer-opening.viewer-open #viewer-img,
#viewer.opening.visible #viewer-video,
#viewer.viewer-opening.viewer-open #viewer-video {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  filter: blur(0);
  transition:
    transform .65s cubic-bezier(.16, 1, .3, 1),
    opacity .5s ease,
    filter .65s ease;
}

/* Fermeture */
#viewer.closing,
#viewer.viewer-closing {
  background: transparent;
  transition: background .4s ease;
}

#viewer.closing #viewer-img,
#viewer.viewer-closing #viewer-img,
#viewer.closing #viewer-video,
#viewer.viewer-closing #viewer-video {
  opacity: 0;
  transform: scale(.96);
  filter: blur(5px);
  transition:
    transform .4s ease,
    opacity .35s ease,
    filter .4s ease;
}

/* Les flèches disparaissent dès que la fermeture est déclenchée. */
#viewer.viewer-closing .nav,
#viewer.viewer-closing .close,
#viewer.viewer-closing .viewer-browser {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}


/* =========================================
   ACCESSIBILITÉ : RÉDUCTION DES ANIMATIONS
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .item img { transition: none; }
  .item::after,
  .fragment-tile::after,
  .illustration-thumb::after { transition: none; }
  #viewer::backdrop { animation: none !important; }

  #viewer,
  #viewer.opening,
  #viewer.viewer-opening,
  #viewer.closing,
  #viewer.viewer-closing {
    transition: none;
  }

  #viewer.opening #viewer-img,
  #viewer.opening.visible #viewer-img,
  #viewer.viewer-opening #viewer-img,
  #viewer.viewer-opening.viewer-open #viewer-img,
  #viewer.closing #viewer-img,
  #viewer.viewer-closing #viewer-img,
  #viewer.opening #viewer-video,
  #viewer.opening.visible #viewer-video,
  #viewer.viewer-opening #viewer-video,
  #viewer.viewer-opening.viewer-open #viewer-video,
  #viewer.closing #viewer-video,
  #viewer.viewer-closing #viewer-video {
    transition: none;
    transform: none;
    filter: none;
    opacity: 1;
  }
}


/* =========================================
   LIENS « PARTIE 1 / 2 / 3 » (page d'accueil) ET LIEN « RETOUR » (autres pages)
   Même police que Welcome, deux fois plus petite.
   Espacement (écarts mesurés entre les lettres, grâce à text-box) :
   - entre les liens : --gap, comme entre PXL90 et Welcome
   - entre Welcome et « partie 1 » : 3 x --gap
   ========================================= */

.parts {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * .5);
  /* + la marge basse de Welcome (--gap) = 3 x --gap */
  margin-top: calc(var(--gap) * 2);
}

.parts a,
.back {
  display: block;
  width: fit-content;
  touch-action: manipulation;
  font-size: calc(var(--welcome-size, clamp(2rem, 6vw, 5rem)) / 2);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-cream);
  text-decoration: none;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
  transition: color .25s ease;
}

.topbar .back { font-size: calc((var(--welcome-size, clamp(2rem, 6vw, 5rem)) / 2) * 1.3); }

.parts a:hover,
.parts a:focus-visible,
.back:hover,
.back:focus-visible { color: var(--text-orange); }

.parts a:focus-visible {
  outline: 2px solid var(--text-orange);
  outline-offset: 4px;
}

.layout-a {
  display: inline-block;
  transform-origin: center;
  transition: transform .55s ease;
}

.parts a:first-child:hover .layout-a,
.parts a:first-child:focus-visible .layout-a {
  transform: perspective(240px) rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .layout-a { transition: none; }
}

.fragment-g-ripple { display: inline-block; }

.parts a:nth-child(2):hover .fragment-g-ripple,
.parts a:nth-child(2):focus-visible .fragment-g-ripple {
  filter: url(#fragment-letter-wave);
}

@media (prefers-reduced-motion: reduce) {
  .parts a:nth-child(2):hover .fragment-g-ripple,
  .parts a:nth-child(2):focus-visible .fragment-g-ripple { filter: none; }
}

.illustration-r {
  display: inline-block;
  transform-origin: center;
  transition: transform .25s ease;
}

.parts a:nth-child(3):hover .illustration-r,
.parts a:nth-child(3):focus-visible .illustration-r {
  transform: rotate(-13.2deg);
}

@media (prefers-reduced-motion: reduce) {
  .illustration-r { transition: none; }
}

.back:focus-visible {
  outline: 2px solid var(--text-orange);
  outline-offset: 4px;
}

/* Barre du haut des autres pages : lien « retour » */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: var(--pad) var(--pad) 0;
  margin-bottom: calc(var(--gap) * 3);
}

/* Le lien retour reste visible pendant le défilement sur les trois pages. */
.page-partie1 > .topbar {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 520px) {
  :root { --mobile-nav-size: clamp(1.5rem, 10vw, 2.6rem); }

  /* Taille identique sur Layout, Fragment et Illustration. */
  .topbar .back { font-size: calc(var(--mobile-nav-size) * 1.3); }
  .home .parts a { font-size: var(--mobile-nav-size); }
}


/* =========================================
   THÈME DE LA PAGE D'ACCUEIL (<body class="home">)
   Fond blanc, textes en gris clair.
   Pendant les animations : PXL90 et Welcome en orange clair, les liens en vert pistache.
   Les autres pages gardent le fond GIF et les textes blancs.
   ========================================= */

.home {
  --home-text: #b4b4b4; /* gris clair */
  --home-orange: var(--text-orange);
  --home-pistachio: var(--accent-pistachio);
  background: #fff;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.home > .bottom { margin-top: auto; }

.home > .top { margin-top: calc(var(--pad) * -.5); }

.home .top h1,
.home .welcome,
.home .parts a,
.home .bottom a {
  color: var(--home-text);
}

.home .top h1 { transition: color .25s ease; }

.home .top h1.is-active,
.home .top .welcome.is-active {
  color: var(--home-orange);
}

.home .parts a:hover,
.home .parts a:focus-visible {
  color: var(--home-orange);
}

.home .parts a:focus-visible { outline-color: var(--home-orange); }

.home .bottom a:hover { border-bottom-color: var(--home-text); }


/* =========================================
   TRANSITION ENTRE LES PAGES (pilotée par transition.js)
   - À la sortie : le contenu s'efface en montant légèrement ; le fond GIF s'efface aussi.
   - À l'arrivée : la page reste cachée le temps que le contenu soit prêt (polices, fond,
     premières images), puis le contenu monte et apparaît par petites touches.
   ========================================= */

:root { --vt-ease: cubic-bezier(.16, 1, .3, 1); }

.bg-gif { transition: opacity .9s ease; }

/* Arrivée : cache le contenu tant que la page n'est pas prête */
html.vt-enter .top,
html.vt-enter .topbar,
html.vt-enter main,
html.vt-enter .bottom,
html.vt-enter .bg-gif { opacity: 0; }
html.vt-enter .video-background { opacity: 0; }
html.vt-enter .fragment-background { opacity: 0; }

/* Arrivée : apparition (la classe vt-reveal est posée par transition.js une fois la page prête) */
html.vt-reveal .topbar,
html.vt-reveal .top > * {
  animation: vt-rise .9s var(--vt-ease) backwards;
}
html.vt-reveal .top > :nth-child(2) { animation-delay: .12s; }
html.vt-reveal .top > :nth-child(3) { animation-delay: .24s; }

html.vt-reveal .item {
  animation: vt-rise-soft .9s var(--vt-ease) backwards;
  animation-delay: calc(.1s + var(--i, 0) * 45ms);
}

html.vt-reveal .fragment-tile {
  animation: vt-rise-soft .9s var(--vt-ease) backwards;
  animation-delay: calc(.1s + var(--i, 0) * 45ms);
}

html.vt-reveal .illustration-thumb {
  animation: vt-rise-soft .9s var(--vt-ease) backwards;
  animation-delay: calc(.1s + var(--i, 0) * 45ms);
}

html.vt-reveal .bottom {
  animation: vt-rise .9s var(--vt-ease) .3s backwards;
}

@keyframes vt-rise {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
}

@keyframes vt-rise-soft {
  from { opacity: 0; transform: translateY(28px); }
}

/* Sortie */
html.vt-leaving .top,
html.vt-leaving .topbar,
html.vt-leaving main,
html.vt-leaving .bottom {
  opacity: 0;
  transform: translateY(-14px);
  filter: blur(6px);
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
}
html.vt-leaving .bg-gif { opacity: 0; transition-duration: .45s; }
html.vt-leaving .video-background { opacity: 0; transition-duration: .45s; }
html.vt-leaving .fragment-background { opacity: 0; transition-duration: .45s; }

@media (prefers-reduced-motion: reduce) {
  html.vt-enter .top,
  html.vt-enter .topbar,
  html.vt-enter main,
  html.vt-enter .bottom,
  html.vt-enter .bg-gif { opacity: 1; }
  html.vt-enter .video-background { opacity: 1; }
  html.vt-enter .fragment-background { opacity: 1; }
  html.vt-reveal .topbar,
  html.vt-reveal .top > *,
  html.vt-reveal .item,
  html.vt-reveal .fragment-tile,
  html.vt-reveal .illustration-thumb,
  html.vt-reveal .bottom { animation: none; }
}