/* =========================================================
   La Traversée — feuille de style
   Polices : Daniel (titres) + Gunny Rewritten (corps)
   ========================================================= */

/* ---------- Polices ---------- */
@font-face {
  font-family: 'Daniel';
  src: url('assets/fonts/daniel-black.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Daniel';
  src: url('assets/fonts/daniel-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gunny';
  src: url('assets/fonts/gunny-rewritten.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  --cream:       #fffdf6;
  --ink:         #1d1d1b;
  --blue:        #3fa9cb;
  --blue-deep:   #2b8fae;
  --green:       #8cbf45;
  --green-soft:  #d9ea9f;
  --blue-soft:   #cdeaf5;
  --blue-dot:    #bfe2f0;

  --maxw: 1180px;
  --pad: clamp(1.2rem, 4vw, 3rem);

  --fs-title: clamp(2.2rem, 5vw, 3.4rem);
  --fs-sub:   clamp(1.3rem, 2.7vw, 1.95rem);
  --fs-body:  clamp(1.18rem, 1.7vw, 1.42rem);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Gunny', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* empêche le scroll horizontal SANS casser position:sticky */
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: clamp(3rem, 8vw, 6rem); }

/* décalage d'ancre pour la nav sticky */
:where(#festival, #programme, #infos, #billetterie) { scroll-margin-top: 70px; }

/* ---------- Titres ---------- */
.title {
  font-family: 'Daniel', cursive;
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 1.05;
  margin: 0 0 .3em;
  letter-spacing: .5px;
}
.subtitle,
.lead {
  font-family: 'Gunny', cursive;
  font-size: var(--fs-sub);
  margin: 0 0 1rem;
}
.lead { font-weight: 400; }

p { margin: 0 0 1rem; }

/* ---------- Bouton « coup de pinceau » vert ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Daniel', cursive;
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  text-decoration: none;
  color: var(--ink);
  padding: 0.85em 2.6em;
  /* le vert n'occupe pas tout le viewBox du SVG : on déborde un peu pour
     que le coup de pinceau passe bien derrière tout le texte */
  background: url("assets/img/bouton.svg") center / 122% 128% no-repeat;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px) rotate(-0.5deg);
  filter: saturate(1.08) brightness(1.02);
}

/* lien souligné en pointillés (ex. « contactez-nous ») */
.link-dotted {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* masqué à l'écran, lu par les lecteurs d'écran (titre « Le Programme ») */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Apparition au scroll (léger, ajouté par JS) ----------
   L'état caché n'est posé que si le JS tourne (classe .reveal) -> si pas de
   JS / mouvement réduit, le contenu reste visible. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   HERO / HEADER (parallax)
   Les 5 calques (ciel, date, terre, lettrage, barque) sont des PNG
   transparents au MÊME canevas 3024x1980, calés en haut -> on les
   empile simplement à l'identique (inset:0). Pas de blend nécessaire.
   ========================================================= */
/* .hero est une PISTE de scroll : sa hauteur (= bannière + distance de
   révélation) est fixée par le JS. La bannière est épinglée (sticky) :
   ciel + terre restent fixes, seul le calque date monte au scroll. */
.hero {
  position: relative;
  width: 100%;
  background: var(--cream);
}

.hero__sticky {
  position: sticky;
  top: 0;
}

.hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3024 / 1980;   /* ratio du canevas des calques */
  overflow: hidden;            /* clippe le texte qui monte */
}

/* tous les calques superposés à l'identique */
.hero__sky,
.hero__date,
.hero__land,
.hero__title,
.hero__boat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;   /* calés en haut */
}

.hero__sky   { z-index: 0; }                             /* ciel (fixe) */
/* la date est une image rognée (texte seul, 3024x1132) : on la cale en haut
   à sa hauteur naturelle (pas de cover, sinon elle serait déformée). */
.hero__date  {
  z-index: 1;
  height: auto;
  bottom: auto;
  object-fit: fill;
  will-change: transform;
}
.hero__land  { z-index: 2; }                             /* berges + eau (fixe) */
.hero__title { z-index: 3; }                             /* lettrage LA TRAVERSÉE */
.hero__boat  { z-index: 4; transform-origin: 50% 66%; animation: tangage 6s ease-in-out infinite; will-change: transform; } /* barque + tangage */

@keyframes tangage {
  0%   { transform: rotate(-2deg); }
  50%  { transform: rotate(2deg); }
  100% { transform: rotate(-2deg); }
}

/* tablette / mobile : pas d'épinglage ni de scroll -> une image header simple
   en format vertical (le calque animé est réservé au desktop). */
.hero__simple { display: none; width: 100%; height: auto; }

@media (max-width: 979px) {
  .hero { height: auto !important; }   /* annule la piste de scroll posée par le JS */
  .hero__sticky { display: none; }
}
@media (min-width: 621px) and (max-width: 979px) {
  .hero__simple--tablet { display: block; }
}
@media (max-width: 620px) {
  .hero__simple--phone { display: block; }
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 253, 246, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.nav__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: .5rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav__brand img { height: 38px; width: auto; }

.nav__menu {
  display: flex;
  align-items: center;
  /* 6 items depuis l'ajout du CTA : gouttière resserrée pour que « Les
     Ateliers » / « Les Spectacles » ne se coupent pas en deux lignes */
  gap: clamp(.9rem, 1.7vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__menu li { white-space: nowrap; }
.nav__menu a {
  font-family: 'Daniel', cursive;
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 3px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.nav__menu a:hover { border-color: var(--blue); color: var(--blue-deep); }

/* CTA « Réserver » : coup de pinceau vert (SVG) derrière le texte.
   Le tracé remplit tout le viewBox 150x45 -> 100% 100% suffit, pas besoin
   de déborder comme sur .btn */
.nav__menu .nav__cta a {
  display: inline-flex;
  align-items: center;
  padding: .45em 1.4em;
  border-bottom: 0;
  background: url("assets/img/reserve_menu.svg") center / 100% 100% no-repeat;
  transition: transform .25s ease, filter .25s ease;
}
.nav__menu .nav__cta a:hover,
.nav__menu .nav__cta a:focus-visible {
  color: var(--ink);
  transform: translateY(-2px) rotate(-.5deg);
  filter: saturate(1.08) brightness(1.02);
}

/* sous 980px (la grille spectacles passe en lignes, nav encore horizontale) :
   on réduit les liens pour qu'ils ne soient plus à l'étroit */
@media (min-width: 861px) and (max-width: 979px) {
  .nav__menu { gap: clamp(0.7rem, 1.8vw, 1.4rem); }
  .nav__menu a { font-size: 1rem; }
  .nav__brand img { height: 30px; }
}

/* tablette / mobile : la nav reste cachée tant qu'elle n'est pas collée en haut.
   Elle est sortie du flux (fixed) et descend dès qu'on a dépassé le header. */
@media (max-width: 979px) {
  .nav {
    position: fixed;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    transition: transform 0.35s ease;
  }
  .nav.is-stuck { transform: translateY(0); }
}

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav__burger span {
  width: 26px; height: 3px;
  background: var(--ink);
  border-radius: 3px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================
   FESTIVAL & GUINGUETTE
   ========================================================= */
.festival__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.festival__visual { margin: 0; }
.festival__visual img { width: 100%; }
.festival__text .lead { color: var(--blue-deep); font-size: 1.8rem; }
/* même taille de corps de texte que les spectacles */
.festival__text p:not(.lead) { font-size: clamp(1.35rem, 2.1vw, 1.72rem); }

/* =========================================================
   LE PROGRAMME — la journée racontée dans l'ordre, en 6 étapes
   ========================================================= */
/* la section ne porte plus de padding propre : c'est chaque .etape qui
   installe son rythme, sinon les blocs à fond (ateliers) ne peuvent pas
   toucher les bords */
.programme { padding-block: 0; }

.etape { position: relative; padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.etape__head { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
/* les titres d'étape ne portent pas la marge basse de .title : l'accroche
   se cale directement dessous, et le bloc entier est espacé par __head */
.etape__head .title { margin-bottom: 0; }
/* horaire manuscrit bleu, au-dessus du titre */
.etape__time {
  font-family: 'Daniel', cursive;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1;
  color: var(--blue);
  margin: 0 0 .15em;
}
.etape__lead {
  font-family: 'Gunny', cursive;
  font-size: var(--fs-sub);
  margin: 0;
}

/* dessin + texte côte à côte (Buvette) */
.etape__duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.etape__visual { margin: 0; }
.etape__visual img { width: 100%; height: auto; mix-blend-mode: darken; }
.etape__text p { font-size: clamp(1.35rem, 2.1vw, 1.72rem); }
.etape__text p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .etape__duo { grid-template-columns: minmax(0, 1fr); }
}

/* Ponctuations : le titre enchaîne directement sur la déambulation, qui se
   termine déjà sur du vide (les cards remontées par marges négatives) */
.etape--ponctuations { padding-top: 0; }

/* les 4 intervenants, sous le dessin */
.ponctuations {
  list-style: none;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
}
.ponctuation img {
  width: 100%;
  aspect-ratio: 515 / 715;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  margin-bottom: .8rem;
}
/* 1.7rem max, pas plus : au-delà « Laurine Granier », le nom le plus long,
   passe sur deux lignes et son intitulé ne s'aligne plus sur les autres */
.ponctuation h4 {
  font-family: 'Daniel', cursive;
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: 1.05;
  margin: 0 0 .15em;
}
.ponctuation__role { margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.ponctuation__role--vert       { color: #459d72; }
.ponctuation__role--bleu       { color: var(--blue); }
.ponctuation__role--turquoise  { color: #3fc1bc; }

/* on tient le rang de 4 jusqu'en tablette : à 2, les portraits deviennent
   trop imposants. Passage en 2×2 sur mobile uniquement */
@media (max-width: 620px) {
  .ponctuations { grid-template-columns: repeat(2, 1fr); }
}

/* Ouverture et Bal : la card est seule dans son bloc, on lui donne de l'air.
   L'Ouverture n'en prend qu'en haut : sous elle, le bloc Buvette installe
   déjà son propre padding. */
.etape--ouverture .spectacles__list { margin-top: 80px; }
.etape--bal .spectacles__list { margin-block: 80px; }

/* ---------- … et les Ateliers (bande verte) ---------- */
/* la bande remonte sur l'étape précédente : son bord déchiré passe derrière
   le dessin de la buvette. Le padding-haut compense pour que le titre, lui,
   ne remonte pas avec — il se rapproche seulement du dessin. */
.etape--ateliers {
  margin-top: calc(-1 * clamp(5rem, 10vw, 9rem));
  padding-top: clamp(6rem, 12vw, 10.5rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
/* bande verte aquarelle (bords déchirés inclus dans le SVG),
   miroir horizontal : passe par un ::before car transform ne s'applique
   pas à un background-image */
.etape--ateliers::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/img/ateliers-bg.svg") center / 100% 100% no-repeat;
  transform: scaleX(-1);
}

.ateliers__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.atelier {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .7rem;
}
.atelier img { height: 110px; width: auto; object-fit: contain; mix-blend-mode: darken; }
.atelier span { font-size: 1.35rem; line-height: 1.25; }
/* zigzag : dans une grille de 3, c'est la vignette du milieu de chaque
   rangée qui descend */
.atelier:nth-child(3n+2) { margin-top: clamp(2rem, 4vw, 3.5rem); }

/* =========================================================
   LES SPECTACLES — cards réparties dans les étapes du programme
   ========================================================= */
/* base (mobile / tablette) : pile en une colonne */
.spectacles__list {
  display: flex;
  flex-direction: column;
  gap: clamp(2.6rem, 7vw, 4rem);
}
.spectacle { position: relative; margin-bottom: clamp(2rem, 4vw, 3.5rem); margin-top: 60px; }
.spectacle__visual { position: relative; margin: 0 0 1rem; }
.spectacle__visual img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
/* les photos portrait gardent leur ratio natif dès la tablette ; en mobile
   (<620px) elles reprennent le crop 3/2 de la règle de base */
@media (min-width: 620px) {
  .etape--ouverture .spectacle__visual img,
  .etape--deambulation .spectacle:nth-child(2) .spectacle__visual img {
    aspect-ratio: 728 / 1097;
  }
  .etape--deambulation .spectacle:nth-child(4) .spectacle__visual img {
    aspect-ratio: 988 / 1324;   /* Nenna */
  }
}

.spectacle__body h4 {
  font-family: 'Daniel', cursive;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  margin: 0 0 .25em;
}
.spectacle__meta { color: var(--blue-deep); font-size: clamp(1.35rem, 2.1vw, 1.72rem); margin-bottom: .6rem; }
/* descriptions des spectacles agrandies (tous formats), sans toucher la ligne compagnie */
.spectacle__body p:not(.spectacle__meta) { font-size: clamp(1.35rem, 2.1vw, 1.72rem); }

/* pastille horaire = tache aquarelle + texte NOIR par-dessus */
.pastille {
  position: absolute;
  top: -38px;
  inset-inline-end: -34px;
  z-index: 2;
  width: clamp(132px, 17vw, 190px);
  height: clamp(132px, 17vw, 190px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink);
  font-family: 'Daniel', cursive;
  line-height: 1;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);     /* libellé plus grand */
  background: center / contain no-repeat;
  transform: rotate(-4deg);
}
.pastille b { font-size: clamp(1.5rem, 2.6vw, 2rem); display: block; }  /* horaire : taille conservée */
.pastille--conte  { background-image: url("assets/img/pastille-conte.svg"); }
.pastille--nenna  { background-image: url("assets/img/pastille-nenna.svg"); }
.pastille--chene  { background-image: url("assets/img/pastille-chene.svg"); }
.pastille--folle  { background-image: url("assets/img/pastille-folle.svg"); }
.pastille--galops { background-image: url("assets/img/pastille-galops.svg"); }
/* PROVISOIRE : le 7e spectacle n'a pas de tache dédiée. On reprend celle de
   La Folle Entreprise (le seul SVG au vert clair de la maquette), retournée
   pour qu'elle ne se lise pas comme un copier-coller. Comme pour le cirque,
   le retournement passe par le ::before afin de laisser le texte droit. */
.pastille--mamemainmon { background-image: none; }
.pastille--mamemainmon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/img/pastille-folle.svg") center / contain no-repeat;
  transform: scaleX(-1);
}
/* la tache chêne est plus large dans la maquette */
.pastille--chene { width: clamp(154px, 20vw, 222px); height: clamp(120px, 16vw, 176px); }

/* Cirque : tache bleu clair, retournée à 180°, placée derrière le texte
   qui lui reste droit et lisible */
.pastille--cirque { background-image: none; }
.pastille--cirque::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/img/pastille-cirque.svg") center / contain no-repeat;
  transform: rotate(180deg);
}

/* ---- DESKTOP ----
   Deux mises en page distinctes selon l'étape :
   - Ouverture / Bal : une seule card, en deux colonnes image + texte.
   - Déambulation : la mosaïque, 5 cards placées à la main dans une grille
     10 colonnes. Le placement est explicite (ligne + colonne) donc aucun
     chevauchement n'est possible ; en contrepartie il dépend de l'ordre du
     DOM, d'où la numérotation commentée ci-dessous. */
@media (min-width: 980px) {
  /* --- card seule (Ouverture, Bal) --- */
  .etape--ouverture .spectacle,
  .etape--bal .spectacle {
    display: grid;
    gap: clamp(1rem, 2.2vw, 2.2rem);
    align-items: center;
    margin-top: 0;
  }
  .etape--ouverture .spectacle { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
  .etape--bal .spectacle       { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr); }
  .etape--ouverture .spectacle__visual,
  .etape--bal .spectacle__visual { margin: 0; }
  .etape--ouverture .pastille,
  .etape--bal .pastille {
    top: -46px; inset-inline-start: -38px; inset-inline-end: auto;
    transform: rotate(4deg);
  }

  /* --- mosaïque de la déambulation --- */
  .etape--deambulation .spectacles__list {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    column-gap: clamp(0.2rem, 0.6vw, 0.6rem);
    row-gap: clamp(2.5rem, 4.5vw, 4rem);
    align-items: start;
  }

  /* 1 — 14h Conte (paysage, colonne droite, rangée 1) */
  .etape--deambulation .spectacle:nth-child(1) { grid-column: 6 / 10; grid-row: 1; }
  .etape--deambulation .spectacle:nth-child(1) .pastille { top: -52px; inset-inline-end: -40px; inset-inline-start: auto; }

  /* 2 — 15h30 La Folle Entreprise (portrait, colonne gauche, descend sous le Conte) */
  .etape--deambulation .spectacle:nth-child(2) {
    grid-column: 1 / 5; grid-row: 1 / 3;
    margin-top: 150px;
  }
  .etape--deambulation .spectacle:nth-child(2) .pastille { top: -52px; inset-inline-end: -40px; inset-inline-start: auto; }

  /* 3 — 17h Performances (rangée 2, droite) */
  .etape--deambulation .spectacle:nth-child(3) { grid-column: 7 / 11; grid-row: 2; margin-top: 120px; }
  .etape--deambulation .spectacle:nth-child(3) .pastille { top: -74px; inset-inline-start: -44px; inset-inline-end: auto; transform: rotate(4deg); }

  /* 4 — 18h Nenna (rangée 3, gauche) */
  .etape--deambulation .spectacle:nth-child(4) { grid-column: 2 / 6; grid-row: 3; margin-top: -300px; }
  .etape--deambulation .spectacle:nth-child(4) .pastille { top: -74px; inset-inline-end: -44px; inset-inline-start: auto; transform: rotate(-4deg); }

  /* Les deux cards portrait de la colonne gauche (Folle, Nenna) : la card
     est large pour que le texte respire, mais la photo reste sur les 3/4 —
     sinon le portrait devient énorme et écrase le reste de la mosaïque. */
  .etape--deambulation .spectacle:nth-child(2),
  .etape--deambulation .spectacle:nth-child(4) {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }
  .etape--deambulation .spectacle:nth-child(2) .spectacle__visual,
  .etape--deambulation .spectacle:nth-child(4) .spectacle__visual { grid-column: 1; }
  .etape--deambulation .spectacle:nth-child(2) .spectacle__body,
  .etape--deambulation .spectacle:nth-child(4) .spectacle__body { grid-column: 1 / -1; }

  /* 5 — 19h Pot de départ (rangée 4, droite) — absent de la maquette */
  .etape--deambulation .spectacle:nth-child(5) { grid-column: 7 / 11; grid-row: 4; margin-top: -500px; }
  .etape--deambulation .spectacle:nth-child(5) .pastille { top: -74px; inset-inline-start: -44px; inset-inline-end: auto; transform: rotate(4deg); }
}

/* ---- TABLETTE (620–979px) : lignes alternées image/texte ----
   L'alternance est comptée à l'intérieur de chaque étape : sans le scope,
   elle repartirait de zéro à chaque bloc et deux cards voisines se
   retrouveraient du même côté. */
@media (min-width: 620px) and (max-width: 979px) {
  .spectacles__list { gap: clamp(2.4rem, 6vw, 4rem); }
  .spectacle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.4rem, 3.5vw, 2.8rem);
    align-items: center;
  }
  .spectacle__visual { margin: 0; }
  .spectacles__list .spectacle:nth-child(even) .spectacle__visual { order: 2; }
  /* pastille au coin extérieur de l'image */
  .pastille { top: -70px; inset-inline-end: -22px; inset-inline-start: auto; transform: rotate(-4deg); }
  .spectacles__list .spectacle:nth-child(even) .pastille { inset-inline-start: -22px; inset-inline-end: auto; transform: rotate(4deg); }
}

/* =========================================================
   INFOS PRATIQUES
   ========================================================= */
.infos__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
.infos .subtitle { color: var(--blue-deep); }
.infos__text p:not(.subtitle) { font-size: clamp(1.35rem, 2.1vw, 1.72rem); }
.infos__map img {
  width: 100%;
  border-radius: 10px;
}

/* =========================================================
   TRANSITIONS entre sections (semis de points aquarelle)
   ========================================================= */
.transition {
  display: block;
  width: 100%;
  height: auto;
  margin-block: clamp(-2rem, -3vw, -1rem);
  pointer-events: none;
}

/* =========================================================
   BILLETTERIE + PIED DE PAGE
   Fond rayé (auvent guinguette) + bandeau d'eau remonté
   ========================================================= */
.billetterie {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
/* bandeau d'eau aquarelle, pleine largeur de la fenêtre, remonté derrière la barque */
.billetterie__water {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  bottom: 0;
  height: 70%;
  background: url("assets/img/billetterie-water.svg") center bottom / 100% 100%
    no-repeat;
}
/* pas de z-index ici : le contenu reste au-dessus (ordre DOM) tout en
   laissant la barque (mix-blend-mode: darken) se fondre dans l'eau */
.billetterie__content { position: relative; }
/* le "Prix libre" est le chapô de la section : plus grand que les métas de spectacle */
.billetterie .spectacle__meta { font-size: var(--fs-sub); }
.billetterie__lead { max-width: 46ch; font-size: clamp(1.35rem, 2.1vw, 1.72rem); }
.billetterie__chapeau { font-weight: 700; color: var(--green); }

.billetterie__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 3.5rem);
}
.billetterie__boat {
  width: min(440px, 58%);
}

.billetterie__footer { margin: 0; font-size: clamp(1.35rem, 2.1vw, 1.72rem); }
.billetterie__assoc { max-width: 52ch; margin-bottom: 1.6rem; }
.billetterie__assoc a { text-decoration: underline; text-decoration-color: var(--blue-deep); }
.billetterie__legal { font-size: 0.8em; color: #4a4a48; margin: 0; }
.billetterie__legal a { text-decoration: underline; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
  .festival__grid,
  .infos__grid { grid-template-columns: 1fr; }
  /* en mobile : l'image (plan) passe SOUS le bloc titre/texte */

  /* wrap : 3 cards par rangée, centrées, toutes alignées par le texte */
  .ateliers__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(1.8rem, 4vw, 2.8rem);
  }
  .atelier { width: 27%; }
  .atelier:nth-child(3n+2) { margin-top: 0; }   /* pas de zigzag en responsive */

  /* nav burger */
  .nav__burger { display: flex; }
  .nav__menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid rgba(0,0,0,.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }
  /* 85vh + scroll : avec le CTA le menu déroulé dépassait 70vh sur les
     petites hauteurs (paysage, vieux téléphones) et se coupait */
  .nav.is-open .nav__menu { max-height: 85vh; overflow-y: auto; }
  .nav__menu li { width: 100%; }
  .nav__menu a {
    display: block;
    padding: .9rem var(--pad);
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .nav__menu a:hover { border-bottom-color: rgba(0,0,0,.06); }
  /* le CTA garde son pinceau (il ne prend pas la barre pleine largeur) :
     c'est le <li> qui porte le rythme vertical et le centrage */
  .nav__cta {
    display: flex;
    justify-content: center;
    padding: .9rem var(--pad);
  }
}

@media (max-width: 620px) {
  /* spectacles : pastille repositionnée et un peu réduite en mobile */
  .pastille {
    width: clamp(92px, 26vw, 120px);
    height: clamp(92px, 26vw, 120px);
    top: -50px;
    inset-inline-start: auto;
    inset-inline-end: 8px;
    transform: rotate(-4deg);
  }

  .atelier { width: 40%; }   /* 2 cards par ligne, dernière centrée */
  .atelier img { height: 88px; }

  .hero__date { width: 84%; }
  .nav__brand img { height: 32px; }

  /* billetterie : barque + bouton empilés et centrés */
  .billetterie__cta { flex-direction: column; align-items: center; text-align: center; }
  .billetterie__boat { width: min(340px, 78%); }
  .billetterie__water { height: 48%; }

  /* festival : image plus haute, plus grande, quasi pleine largeur */
  .festival { padding-top: 0.6rem; }
  .festival__grid { gap: 1.2rem; }
  .festival__visual { margin-inline: calc(-1 * var(--pad)); padding: 10px; }
  .festival__visual img { width: 100%; display: block; }

  /* la pastille Performances (tache large) a besoin d'une boîte plus large */
  .pastille--chene { width: clamp(134px, 36vw, 170px); height: clamp(90px, 24vw, 114px); }
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__boat { animation: none; }
  .hero__date { z-index: 6; transform: none; }  /* date au-dessus, visible directement */
  .hero__sky,
  .hero__land,
  .hero__boat { transform: none !important; }
}