@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-v33-latin-variable.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/assets/fonts/libre-franklin-v20-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --papier: #e3d8c2;      /* le papier de l'affiche, en aplat */
  --papier-clair: #ece4d3;
  --encre: #1b1712;
  --gris: #5c5245;
  --rouge: #e41624;       /* le rouge du titre */
  --rouge-texte: #b5101c; /* le même, assombri pour le petit texte */
  --titrage: "EB Garamond", Garamond, "Times New Roman", serif;
  --labeur: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --gouttiere: clamp(1rem, 4vw, 4.5rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--labeur);
  font-size: 1.0625rem;
  line-height: 1.5;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; border-radius: 4px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------
   La scène : titre au centre, collage autour
   --------------------------------------------------------------- */
.scene {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 12svh var(--gouttiere) 16svh;
  isolation: isolate;
}
.titre {
  margin: 0;
  width: min(64vw, 860px);
  z-index: 2;
  transform: translate3d(0, calc(var(--defile, 0) * -18svh), 0) scale(calc(1 - var(--defile, 0) * .12));
  pointer-events: none;
}
.titre img { width: 100%; filter: drop-shadow(0 .3rem .6rem rgb(60 30 10 / .18)); }
.baseline {
  margin: 1.2rem 0 0;
  z-index: 2;
  font-size: clamp(.8rem, 1.6vw, 1rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  opacity: calc(1 - var(--defile, 0) * 2.2);
}

.collage { position: absolute; inset: 0; z-index: 1; }
/* Position, largeur (en vw), inclinaison, profondeur de parallaxe, rang d'arrivée */
.piece:nth-child(1) { --x: -1%; --y: -2%; --w: 30; --r: -4deg; --d: .9;  --i: 0; } /* fleur d'oranger */
.piece:nth-child(2) { --x: 74%; --y: 9%;  --w: 19; --r: 6deg;  --d: 1.4; --i: 1; } /* âne */
.piece:nth-child(3) { --x: 7%;  --y: 42%; --w: 9;  --r: -8deg; --d: 1.8; --i: 2; } /* cerf */
.piece:nth-child(4) { --x: 15%; --y: 53%; --w: 20; --r: 3deg;  --d: 1.1; --i: 3; } /* singe */
.piece:nth-child(5) { --x: -3%; --b: -.1; --w: 38; --r: -2deg; --d: .7;  --i: 4; } /* branche de citrons */
.piece:nth-child(6) { --x: 79%; --b: -.2; --w: 22; --r: 0deg;  --d: 1.2; --i: 5; } /* dame */

/* La branche et la dame sont coupées en bas : elles sortent par le bas de
   l'écran, leur coupe avec. On peut les déplacer, mais leur remontée est
   bornée (festival.js) pour que la coupe ne se montre jamais ; elles se
   balancent depuis leur base. */
.piece.bas { top: auto; bottom: calc(var(--b) * var(--w) * 1vw); } /* --b : part de la largeur de la pièce cachée sous le bord */
.piece:nth-child(6) { z-index: 2; } /* la dame passe devant le citron, à toutes les tailles */
.piece.bas .tenue { transform-origin: 50% 100%; }
.piece.bas .tenue img { transform-origin: 50% 100%; }
.piece:nth-child(7) { --x: 63%; --y: 76%; --w: 22; --r: -5deg; --d: .8;  --i: 6; } /* citron pelé */
.piece {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--w) * 1vw);
  /* éloignement au défilement (--fx, --fy calculés en JS) + parallaxe du pointeur */
  transform: translate3d(
    calc(var(--fx, 0) * var(--defile, 0) * 1px + var(--px, 0) * var(--d) * 1px),
    calc(var(--fy, 0) * var(--defile, 0) * 1px + var(--py, 0) * var(--d) * 1px),
    0);
  will-change: transform;
}
.tenue {
  /* déplacement à la main (--mx, --my) et balancement (--ba) */
  transform: translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), 0) rotate(calc(var(--r) + var(--ba, 0) * 1deg));
  transform-origin: 50% 0;
}
.tenue img {
  width: 100%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  filter: drop-shadow(0 .25rem .35rem rgb(60 30 10 / .22));
  transition: filter .25s ease, scale .25s ease;
  animation: souffle calc(5s + var(--i) * .7s) ease-in-out calc(var(--i) * -1.3s) infinite alternate;
}
.piece.tenue-en-main { z-index: 5; }
.piece.tenue-en-main img {
  cursor: grabbing;
  scale: 1.06;
  filter: drop-shadow(0 1.6rem 1.4rem rgb(60 30 10 / .28));
  animation-play-state: paused;
}

/* Les pièces respirent, comme une marionnette au repos */
@keyframes souffle {
  from { translate: 0 0;      rotate: -.8deg; }
  to   { translate: 0 -.5rem; rotate: .8deg; }
}

/* Arrivée : chaque pièce est posée puis collée */
/* Arrivée en CSS seul : pas d'attente du script, donc pas de clignotement */
.piece .tenue img {
  animation:
    pose .9s cubic-bezier(.2, .9, .25, 1.15) calc(.25s + var(--i) * .13s) backwards,
    souffle calc(5s + var(--i) * .7s) ease-in-out calc(1.2s + var(--i) * .13s) infinite alternate;
}
@keyframes pose {
  0%   { opacity: 0; scale: 1.35; rotate: 9deg; filter: drop-shadow(0 2.4rem 1.8rem rgb(60 30 10 / .3)); }
  60%  { opacity: 1; }
  100% { opacity: 1; scale: 1; rotate: 0deg; filter: drop-shadow(0 .25rem .35rem rgb(60 30 10 / .22)); }
}
.titre img { animation: tampon .7s cubic-bezier(.3, 1.4, .5, 1) 1.15s both; }
.baseline { animation: apparait .8s ease 1.6s both; }
@keyframes tampon { from { opacity: 0; scale: 1.12; } to { opacity: 1; scale: 1; } }
@keyframes apparait { from { opacity: 0; translate: 0 .5rem; } to { opacity: 1; translate: 0 0; } }

.indice {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.6rem;
  width: max-content;
  margin: 0 auto;
  z-index: 3;
  padding: .35rem .8rem;
  border-radius: 4px;
  background: rgb(255 255 255 / .55);
  backdrop-filter: blur(6px);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: opacity .5s ease;
}
.indice { animation: apparait .8s ease 2.4s both; }
.indice.vu { animation: none; opacity: 0; }

.descendre {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  translate: -50% 0;
  z-index: 3;
  padding: .6rem 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.descendre span { display: inline-block; animation: rebond 1.8s ease-in-out infinite; }
@keyframes rebond { 50% { translate: 0 .3rem; } }

/* ---------------------------------------------------------------
   Les dates
   --------------------------------------------------------------- */
main { position: relative; z-index: 2; }
.dates { padding: clamp(3rem, 10vw, 8rem) var(--gouttiere) clamp(2rem, 6vw, 5rem); }
.weekends {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1240px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(3rem, 8vw, 6rem);
}
.weekend { text-align: center; }
.weekend p { margin: 0; }
.jours {
  font-family: var(--titrage);
  font-weight: 500;
  font-size: clamp(6rem, 19vw, 13rem);
  line-height: .85;
  color: var(--rouge);
  font-variant-numeric: lining-nums;
  letter-spacing: -.02em;
}
.tiret { margin: 0 .04em; font-weight: 400; }
.mois {
  margin-top: .9rem !important;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ville {
  margin-top: .2rem !important;
  font-family: var(--titrage);
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1.1;
}

/* Apparition au défilement */
.js .revele { opacity: 0; translate: 0 2.5rem; transition: opacity .9s ease, translate .9s cubic-bezier(.2, .8, .2, 1); }
.js .revele.vu { opacity: 1; translate: 0 0; }
.js .weekend.revele:nth-child(2) { transition-delay: .15s; }

/* ---------------------------------------------------------------
   Le programme
   --------------------------------------------------------------- */
.programme {
  padding: clamp(2rem, 6vw, 5rem) var(--gouttiere) clamp(4rem, 10vw, 8rem);
  text-align: center;
}
.programme h2 {
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  font-family: var(--titrage);
  font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.15;
}
.trio {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1240px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.trio li { max-width: 22rem; margin-inline: auto; }
.trio h3 {
  margin: 0 0 .6rem;
  font-family: var(--titrage);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  color: var(--rouge-texte);
}
.trio h3::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin: 0 auto 1rem;
  background: var(--rouge);
}
.trio p { margin: 0; color: var(--gris); }

/* ---------------------------------------------------------------
   Pied de page
   --------------------------------------------------------------- */
.pied {
  position: relative;
  z-index: 2;
  padding: clamp(2.5rem, 6vw, 4rem) var(--gouttiere) 3rem;
  background: var(--papier-clair);
  border-top: 3px solid var(--rouge);
  text-align: center;
}
.porteur { margin: 0 0 2rem; font-family: var(--titrage); font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
.porteur a { text-decoration-color: var(--rouge); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.porteur a:hover { color: var(--rouge-texte); }
.soutien { margin: 0 0 1rem; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
}
.logos img { height: clamp(3.2rem, 7vw, 4.5rem); width: auto; }

/* ---------------------------------------------------------------
   Écrans étroits (portrait) : le collage se resserre en haut et en bas
   --------------------------------------------------------------- */
@media (max-aspect-ratio: 4/5) {
  .scene { padding-block: 22svh 24svh; }
  .titre { width: 92vw; }
  .piece:nth-child(1) { --x: -8%;  --y: 1%;   --w: 52; }
  .piece:nth-child(2) { --x: 58%;  --y: 2%;   --w: 40; }
  .piece:nth-child(3) { --x: 5%;   --y: 67%;  --w: 13; }
  .piece:nth-child(4) { --x: 22%;  --y: 68%;  --w: 30; }
  .baseline .nowrap { display: block; }
  .baseline .sep { display: none; }
  .piece:nth-child(5) { --x: -12%; --b: -.08; --w: 62; }
  .piece:nth-child(6) { --x: 63%;  --b: -.26; --w: 33; z-index: 1; }
  .piece:nth-child(7) { --x: 52%;  --y: 16%;  --w: 44; --r: 8deg; }
  .indice { position: relative; bottom: auto; margin-top: 1.4rem; z-index: 3; }
}

/* Écran peu haut (téléphone couché) : le message gênerait le sous-titre */
@media (max-height: 560px) and (min-aspect-ratio: 4/5) {
  .indice { display: none; }
}

/* ---------------------------------------------------------------
   Moins de mouvement demandé : tout est posé d'emblée, rien ne bouge seul
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .piece .tenue img, .titre img, .baseline, .indice, .js .revele { opacity: 1 !important; translate: none !important; animation: none !important; }
  .indice.vu { opacity: 0 !important; }
  .tenue img, .descendre span { animation: none !important; }
  .js .revele { transition: none; }
}