/* ==========================================================================
   PAGE SPECTACLE — styles partagés (template unique, 3 pages)
   UNE seule structure HTML, responsive par media queries (seuil 768 px).
   Desktop : corps en 2 colonnes, bloc réservation STICKY à droite.
   Mobile  : une colonne + barre Total/CTA FIXE en bas (tunnel).
   Tokens, bouton .btn, .choumi-mot : hérités de composants.css (source unique).
   Le CHROME (reset, header, footer, séparateur, onde-guide) est dans chrome.css,
   chargé AVANT ce fichier. Ici : uniquement le tunnel .spectacle-* / .cta-*.
   ========================================================================== */

/* Marge horizontale du site (alignée sur le header/héro) */
.spectacle-marge {
  width: min(1280px, 100% - 2 * clamp(20px, 5vw, 96px));
  margin-inline: auto;
}

/* Le header fixe recouvre le haut : on réserve sa hauteur */
.spectacle-page { padding-top: clamp(72px, 8vw, 92px); }

/* ============ Fil d'ariane ============ */
/* Centré verticalement dans la bande sombre (couleur menu) avant le hero :
   air égal au-dessus (padding page) et en-dessous (padding bas ici). */
.spectacle-ariane {
  padding: clamp(16px, 2vw, 24px) 0 clamp(30px, 4vw, 50px);
  font-size: clamp(12.5px, 0.85vw, 13.5px);
  color: var(--grey);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.spectacle-ariane a { text-decoration: none; color: var(--grey); transition: color var(--duree-hover); }
.spectacle-ariane a:hover { color: var(--white); }
.spectacle-ariane__sep { color: var(--grey-dim); }
.spectacle-ariane__actuel { color: var(--white); }

/* ============ HERO ============ */
.spectacle-hero { position: relative; isolation: isolate; overflow: hidden; }
/* Fond = affiche floutée + assombrie (jamais déformée) */
.spectacle-hero__fond {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  filter: blur(38px) saturate(1.05);
  transform: scale(1.18); /* évite les bords nets du flou */
}
.spectacle-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Le fond violet FOND vers la couleur du menu (--nuit) en haut ET en bas :
     pas de bord net, transition douce avec la bande du fil d'ariane et le corps. */
  background:
    linear-gradient(180deg,
      var(--nuit) 0%,
      rgba(11, 9, 21, 0.55) 15%,
      rgba(11, 9, 21, 0.52) 52%,
      rgba(11, 9, 21, 0.82) 85%,
      var(--nuit) 100%),
    radial-gradient(120% 90% at 20% 15%, rgba(87, 179, 242, 0.10), transparent 55%);
}
.spectacle-hero__inner {
  display: grid;
  /* Largeur de l'affiche bornée À LA FOIS par la largeur (26vw, plafond 340px)
     ET par la HAUTEUR d'écran : une affiche portrait (2:3) ne doit jamais
     déborder sous la ligne de flottaison sur un portable / une fenêtre basse.
     On déduit de 100svh la place déjà prise en haut (header + fil d'ariane +
     marges ≈ 260px), et on convertit la hauteur dispo en largeur (× 2/3).
     → pleine taille sur grand écran, réduction propre sur écran bas.
     Plancher 220px pour ne jamais tomber en timbre-poste. */
  grid-template-columns:
    max(220px, min(clamp(240px, 26vw, 340px), calc((100svh - 260px) * 2 / 3))) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  /* Marges verticales indexées sur la HAUTEUR (vh) : généreuses sur grand
     écran, compactes sur écran bas pour aider l'affiche à tenir dans le cadre. */
  padding: clamp(28px, 5vh, 72px) 0 clamp(32px, 6vh, 80px);
}

/* Affiche nette dans son cadre */
.spectacle-affiche {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 0 1px color-mix(in srgb, var(--white) 8%, transparent);
  background: var(--nuit);
}
.spectacle-affiche img { width: 100%; height: 100%; object-fit: cover; }

/* Colonne texte du hero */
.spectacle-hero__texte { display: flex; flex-direction: column; align-items: flex-start; }
.spectacle-titre {
  font-size: clamp(38px, 4.6vw, 68px); font-weight: 700; line-height: 1.03;
  letter-spacing: -1.4px; color: var(--white);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.28em;
}
.spectacle-titre .choumi-mot { height: 0.82em; transform: translateY(0.02em); }
/* Dernier mot du titre en accent bleu (ex. « Plateau Comédie ») — même motif
   que les titres de section. */
.spectacle-titre .accent { color: var(--blue); }
.spectacle-pitch {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(16px, 1.15vw, 20px); font-weight: 400; color: var(--grey);
  max-width: 44ch;
}
/* Méta-infos (liste d'icônes) */
.spectacle-meta {
  margin-top: clamp(20px, 2.4vw, 30px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(20px, 2.5vw, 36px);
  width: 100%; max-width: 560px;
}
.spectacle-meta li {
  list-style: none; display: flex; align-items: center; gap: 11px;
  font-size: clamp(14px, 0.95vw, 15.5px); color: var(--white);
}
.spectacle-meta svg { width: 20px; height: 20px; flex: none; stroke: var(--blue); fill: none; stroke-width: 1.7; }

/* ============ CORPS (2 colonnes desktop) ============ */
.spectacle-corps {
  display: grid;
  grid-template-columns: 1fr clamp(360px, 40%, 520px);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
  padding: clamp(40px, 5vw, 72px) 0 clamp(80px, 10vw, 130px);
}
/* Pas de min-height forcée : le bloc réservation (sticky) reste épinglé
   UNIQUEMENT quand le texte est plus long que lui (comportement naturel). Si
   le texte est plus court que la carte, tout défile normalement — pas de vide. */
.spectacle-contenu > section + section { margin-top: clamp(34px, 4vw, 54px); }
.spectacle-h2 {
  font-size: clamp(24px, 2vw, 32px); font-weight: 700; letter-spacing: -0.6px;
  margin-bottom: clamp(14px, 1.4vw, 20px);
}
.spectacle-h2 .accent { color: var(--blue); }
.spectacle-contenu p { font-size: clamp(15.5px, 1.05vw, 18px); line-height: 1.62; color: var(--grey); }
.spectacle-contenu p + p { margin-top: 14px; }
.spectacle-infos { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.spectacle-infos li {
  position: relative; padding-left: 22px;
  font-size: clamp(15px, 1vw, 17px); line-height: 1.55; color: var(--grey);
}
.spectacle-infos li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 2px; border-radius: 2px; background: var(--blue);
}

/* ============ BLOC RÉSERVATION (sticky desktop) ============ */
.spectacle-reservation {
  position: sticky; top: clamp(84px, 9vw, 108px);
  min-width: 0; /* colonne de grille : ne pas s'élargir sous le contenu */
  /* Carte COMPACTE, taille NATURELLE, AUCUNE barre de défilement interne. Elle
     se cale au CENTRE de l'écran quand elle se fige (`top` piloté par
     centrerReservation) → prix + CTA visibles, texte de gauche montré à son
     début. Le contenu (dates + tarifs à quantités + total) tient sans scroll. */
  background: color-mix(in srgb, var(--white) 5%, var(--nuit));
  border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 1.6vw, 26px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.spectacle-resa__pied {
  margin-top: clamp(14px, 1.4vw, 18px); padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--white) 9%, transparent);
}
.spectacle-reservation__apartir { font-size: 13px; color: var(--grey); }
.spectacle-reservation__prix {
  font-size: clamp(24px, 2vw, 32px); font-weight: 700; color: var(--white);
  letter-spacing: -0.6px; margin-top: 2px;
}
/* Entête compacte : prix (« À partir de ») à GAUCHE, résumé « 19h00 · Changer »
   à DROITE — la séance choisie y remonte pour gagner de la hauteur. */
.spectacle-resa__entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: clamp(8px, 0.9vw, 12px);
}
.spectacle-resa__prixbloc { min-width: 0; }
.spectacle-resa__resume {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
  background: color-mix(in srgb, var(--white) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 10%, transparent); border-radius: var(--radius-md);
  padding: 4px 6px 4px 13px;
}
.spectacle-resa__resume[hidden] { display: none; }
.spectacle-resume__heure { font-weight: 600; font-size: 15px; color: var(--white); }
.spectacle-bloc { margin-top: clamp(12px, 1.2vw, 16px); }
/* La 1re rangée de la tête (vignettes de dates) colle au haut de la carte. */
.spectacle-resa__tete > .spectacle-bloc:first-child { margin-top: 0; }
.spectacle-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--grey); margin-bottom: 10px; display: block;
}

/* Lien « Changer » (dans le résumé de séance, à droite du prix) */
.spectacle-changer {
  background: none; border: 0; color: var(--blue); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  min-height: 44px; padding: 8px 10px; /* cible tactile ≥ 44 px */
  text-decoration: underline; text-underline-offset: 3px;
}
.spectacle-changer:hover { color: var(--blue-soft); }

/* Vignettes de dates (blocs « jour ») — défilement horizontal */
.spectacle-dates {
  display: flex; gap: 9px; overflow-x: auto;
  /* L'axe vertical est écrêté dès qu'un scroll horizontal existe. Marges
     négatives + padding égal : la bande déborde dans le padding de la carte
     pour laisser respirer le soulèvement + le halo arrondi sur les 4 côtés,
     SANS les couper — et la 1re vignette reste alignée au label. */
  margin: 0 -14px; padding: 10px 14px 7px;
  scroll-snap-type: x proximity; cursor: grab; user-select: none;
  /* Barre de scroll horizontale VISIBLE (fine, bleue) : quand il y a beaucoup
     de dates, on la voit et on la fait glisser — la carte ne s'agrandit pas,
     ce sont les dates qui défilent. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blue) 60%, transparent) transparent;
}
.spectacle-dates::-webkit-scrollbar { height: 7px; }
.spectacle-dates::-webkit-scrollbar-track { background: transparent; }
.spectacle-dates::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--blue) 55%, transparent);
  border-radius: 999px;
}
.spectacle-dates::-webkit-scrollbar-thumb:hover { background: var(--blue); }
.spectacle-dates.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
/* Vignette « calendrier » (direction A) : bandeau mois coloré en tête, gros
   numéro, jour en bas. Relief (léger dégradé + ombre). Au survol : bordure +
   halo bleu, SANS soulèvement — la carte ne bouge pas, donc elle ne sort
   jamais de la bande (qui l'écrête à cause du défilement horizontal) et n'est
   jamais coupée. Bandeau bleu plein + halo arrondi à la sélection. */
.date-card {
  flex: 0 0 auto; scroll-snap-align: start; width: 52px;
  border-radius: 11px; overflow: hidden; cursor: pointer;
  color: inherit; font-family: inherit;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--white) 8%, var(--nuit)),
    color-mix(in srgb, var(--white) 2%, var(--nuit)));
  border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: border-color var(--duree-hover), box-shadow var(--duree-hover);
}
.date-card__head {
  display: block; text-align: center; padding: 4px 3px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  background: color-mix(in srgb, var(--blue) 15%, transparent); color: var(--blue);
}
.date-card__num { display: block; text-align: center; padding-top: 5px; font-size: 19px; font-weight: 700; line-height: 1; color: var(--white); }
.date-card__dow { display: block; text-align: center; padding: 2px 0 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--grey); }
.date-card:hover {
  border-color: color-mix(in srgb, var(--blue) 55%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 12px color-mix(in srgb, var(--blue) 25%, transparent);
}
/* Halo bleu CENTRÉ (0 0 …, sans décalage) : il suit l'arrondi de la vignette
   au lieu d'être tranché en rectangle. */
.date-card.is-sel {
  border-color: var(--blue);
  box-shadow: 0 0 0 1.5px var(--blue), 0 0 13px color-mix(in srgb, var(--blue) 42%, transparent);
}
.date-card.is-sel .date-card__head { background: var(--blue); color: var(--encre-bleu); }
.date-card.is-complet { opacity: 0.4; }
.date-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ============ Flèche « descends pour réserver » (héro spectacle, desktop) ============
   Invite à descendre → au clic défile jusqu'à la carte de réservation ; s'efface
   en fondu dès qu'on scrolle. Ondes « sonar » + petit rebond, dans l'ADN du site. */
.spectacle-fleche {
  position: fixed; z-index: 30;
  /* Position FIXE, identique au pixel au bouton flottant de l'accueil (.cal-fab) :
     24px du coin bas-droit sur TOUS les formats. */
  right: 24px; bottom: calc(24px + env(safe-area-inset-bottom));
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; color: var(--blue);
  border: 1px solid color-mix(in srgb, var(--blue) 42%, transparent);
  background: color-mix(in srgb, var(--blue) 15%, var(--nuit));
  box-shadow: 0 10px 34px color-mix(in srgb, var(--blue) 32%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity 0.4s ease, transform 0.28s ease,
    background var(--duree-hover), border-color var(--duree-hover);
}
.spectacle-fleche svg { width: 24px; height: 24px; animation: spectacle-fleche-rebond 1.9s ease-in-out infinite; }
.spectacle-fleche::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--blue) 50%, transparent);
  animation: spectacle-fleche-sonar 2.2s ease-out infinite;
}
.spectacle-fleche:hover {
  transform: translateY(-3px); border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 26%, var(--nuit));
}
.spectacle-fleche:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* Badge « Réserver » au-dessus de la flèche — même repère que le bouton flottant
   de l'accueil (.cal-fab__badge). */
.spectacle-fleche__badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 3px 10px; border-radius: var(--radius-md);
  background: var(--blue); color: var(--encre-bleu);
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.spectacle-fleche.is-cache { opacity: 0; pointer-events: none; transform: translateY(12px); }
@keyframes spectacle-fleche-rebond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes spectacle-fleche-sonar { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .spectacle-fleche svg, .spectacle-fleche::before { animation: none; }
}

/* Séances du jour — grille COMPACTE 2 colonnes (2 côte à côte, 4 = 2×2) */
/* border-radius = celui des cartes séance : l'onde-guide (::after, inherit) a
   ainsi LES MÊMES coins/contour que le bloc, comme la boîte des tarifs. */
.spectacle-seances { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; border-radius: var(--radius-md); }
.spectacle-seance {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left;
  background: color-mix(in srgb, var(--white) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 10%, transparent); border-radius: var(--radius-md);
  padding: 10px 12px; cursor: pointer; color: inherit; font-family: inherit;
  transition: border-color var(--duree-hover), background var(--duree-hover);
}
.spectacle-seance:only-child { grid-column: 1 / -1; } /* 1 séance = pleine largeur */
.spectacle-seance:hover { border-color: color-mix(in srgb, var(--blue) 55%, transparent); }
.spectacle-seance__heure { font-weight: 600; font-size: 15px; }
.spectacle-seance__apartir { font-size: 12px; color: var(--grey); }
/* Plein tarif barré à côté du prix réduit (effet promo, aguicheur). Le <s>
   fournit le trait ; on l'éclaircit un peu. Même classe partout (source unique). */
.tarif-barre { font-weight: 400; margin-left: 4px; opacity: 0.55; }

.spectacle-promo {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--violet);
  border: 1px solid color-mix(in srgb, var(--violet) 55%, transparent);
  padding: 3px 7px; border-radius: 999px;
}

/* Détail des tarifs de la séance choisie */
/* Tarifs : boîte ARRONDIE, lignes séparées par un mini filet. Son border-radius
   donne À L'ONDE-GUIDE (::after, border-radius:inherit) LES MÊMES COINS. Chaque
   ligne = libellé + prix (à gauche) + sélecteur de QUANTITÉ (à droite) : on
   compose sa commande (p. ex. 1 « avec conso » + 1 « sans »), aucun tarif par
   défaut. */
.spectacle-tarifs {
  display: flex; flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--white) 12%, transparent); border-radius: var(--radius-md);
}
.spectacle-tarif {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 12px; min-height: 48px;
}
/* mini séparateur entre les lignes */
.spectacle-tarif + .spectacle-tarif { border-top: 1px solid color-mix(in srgb, var(--white) 9%, transparent); }
.spectacle-tarif__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.spectacle-tarif__label { font-size: 14px; color: var(--white); font-weight: 500; line-height: 1.22; }
.spectacle-tarif__prix { font-size: 13px; color: var(--grey); font-weight: 600; }
/* ligne active (au moins 1 place) : prix en bleu → repère visuel */
.spectacle-tarif.is-actif .spectacle-tarif__prix { color: var(--blue); }

/* Sélecteur de quantité par tarif (− valeur +) */
.spectacle-qte { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.spectacle-qte__btn {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--white) 22%, transparent); background: transparent; color: var(--white);
  font-size: 19px; line-height: 1; display: grid; place-items: center;
  font-family: inherit; transition: border-color var(--duree-hover), color var(--duree-hover), opacity var(--duree-hover);
}
.spectacle-qte__btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.spectacle-qte__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.spectacle-qte__val { font-size: 16px; font-weight: 700; min-width: 20px; text-align: center; color: var(--white); }

/* Total */
/* Total : dans le pied épinglé — pas de filet ni de marge propres (le pied
   porte déjà son filet séparateur au-dessus). */
.spectacle-total {
  display: flex; align-items: baseline; justify-content: space-between;
}
.spectacle-total__label { font-size: 14px; color: var(--grey); }
.spectacle-total__val { font-size: clamp(22px, 1.8vw, 28px); font-weight: 700; letter-spacing: -0.4px; }

.spectacle-cta { width: 100%; justify-content: center; margin-top: clamp(12px, 1vw, 15px); }
.spectacle-cta[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.spectacle-rassure { margin-top: 9px; font-size: 12px; color: var(--grey); display: flex; align-items: center; justify-content: center; gap: 6px; } /* --grey : contraste AA */
.spectacle-rassure__ic { width: 16px; height: 16px; color: var(--blue); flex-shrink: 0; }

/* Focus clavier visible sur TOUS les contrôles de réservation (anneau bleu du design) */
.spectacle-seance:focus-visible,
.spectacle-qte__btn:focus-visible,
.spectacle-changer:focus-visible,
.spectacle-cta:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--radius-md);
}

/* Mode « à venir » (Poetry) : pas de dates */
.spectacle-avenir { font-size: 14.5px; color: var(--grey); line-height: 1.5; }

/* Récurrence (In English) */
.spectacle-recurrence {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--white); font-weight: 500;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
  padding: 8px 14px; border-radius: 999px;
}

/* ============ Barre mobile (Total + CTA) — cachée en desktop ============ */
.spectacle-barre { display: none; }

/* ============ RESPONSIVE : bascule à 768 px ============ */
@media (max-width: 767.98px) {
  .spectacle-hero__inner {
    grid-template-columns: 1fr;
    justify-items: center; text-align: center;
    gap: clamp(22px, 6vw, 32px);
    padding: clamp(24px, 7vw, 40px) 0 clamp(28px, 8vw, 44px);
  }
  .spectacle-affiche { width: min(240px, 62vw); }
  .spectacle-hero__texte { align-items: center; }
  .spectacle-titre { justify-content: center; }
  .spectacle-pitch { max-width: 34ch; }
  .spectacle-meta {
    grid-template-columns: 1fr; justify-items: start;
    width: max-content; max-width: 100%; margin-inline: auto; gap: 11px;
  }

  .spectacle-corps { grid-template-columns: 1fr; gap: clamp(30px, 8vw, 44px);
    padding-bottom: clamp(36px, 9vw, 52px); }
  /* Réserve d'espace en BAS DE PAGE (après le footer) pour que la barre fixe
     ne masque JAMAIS le bas du footer (mentions légales + copyright). */
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* Réservation : inline dans le flux (plus de sticky ; la barre fixe du bas
     gère le CTA). C'est la page qui défile. */
  .spectacle-reservation { position: static; top: auto; }
  /* Flèche inutile en mobile : la barre fixe « Réserver » est déjà visible. */
  .spectacle-fleche { display: none; }

  /* Barre fixe en bas : Total + CTA toujours visibles */
  .spectacle-barre {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 12px clamp(16px, 5vw, 22px);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--nuit) 96%, black);
    border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    box-shadow: 0 -12px 34px rgba(0,0,0,0.5);
  }
  .spectacle-barre__total { display: flex; flex-direction: column; }
  .spectacle-barre__label { font-size: 11px; color: var(--grey); }
  .spectacle-barre__val { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
  .spectacle-barre .btn { flex: 1; max-width: 60%; justify-content: center; }

}

/* ============ Tablette portrait (768–880) : rester en 1 colonne ============
   À 768px la 2-col serrerait la colonne texte à ~300px (~37 car./ligne, trop
   étroit). On garde 1 colonne : lecture confortable bornée + carte de
   réservation (calendrier) pleine largeur sous le texte, comme une tablette. */
@media (min-width: 768px) and (max-width: 879.98px) {
  .spectacle-corps { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 48px); }
  .spectacle-contenu { max-width: 700px; }
  .spectacle-reservation { position: static; top: auto; max-width: 560px; }
  .spectacle-fleche { display: none; } /* la flèche vers la carte n'a de sens qu'en 2 colonnes */
}

/* ============ Accessibilité mouvement ============ */
@media (prefers-reduced-motion: reduce) {
  .spectacle-hero__fond { filter: blur(38px); transform: scale(1.12); }
}

/* ============ Bouton « Réserver » : billet + survol + animation d'ajout ============
   REPOS : « libellé · billet ». SURVOL : le billet passe À GAUCHE avec un
   séparateur → « billet | libellé » (façon "add to cart"). CLIC : le billet
   glisse au centre, le bouton passe en dégradé BLEU→CYAN « validé » + coche,
   puis la mini-affiche s'envole vers le panier. Couleurs de la marque. */
.spectacle-cta, #spectacleBarreCta { position: relative; overflow: hidden; }
.cta-ico, .cta-check { display: inline-flex; align-items: center; justify-content: center; }
.cta-ico svg, .cta-check svg { width: 20px; height: 20px; display: block; }
.cta-lbl { display: inline-flex; align-items: center; }

/* Repos : libellé (gauche) puis billet (droite). */
.cta-lbl { order: 1; }
.cta-ico { order: 2; transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1); }
.cta-check { position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -13px; width: 26px; height: 26px; opacity: 0; transform: scale(0.4); pointer-events: none; }

/* Survol : billet à gauche + séparateur. */
.spectacle-cta:hover .cta-ico, #spectacleBarreCta:hover .cta-ico { order: 0; transform: scale(1.08); }
.spectacle-cta:hover .cta-lbl::before, #spectacleBarreCta:hover .cta-lbl::before {
  content: ''; display: inline-block; width: 1px; height: 1.15em; margin-right: 12px;
  background: currentColor; opacity: 0.45;
}

/* Clic : ajout au panier. */
.spectacle-cta.cta-adding, #spectacleBarreCta.cta-adding {
  color: transparent !important; pointer-events: none;
  transition: background 220ms ease, box-shadow 220ms ease;
}
.cta-adding .cta-lbl { opacity: 0; }
.cta-adding .cta-lbl::before { display: none; }
.cta-adding .cta-ico {
  position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -13px; width: 26px; height: 26px;
  animation: cta-ico-in 520ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes cta-ico-in {
  0%   { transform: translate(-140px, 0) rotate(-14deg); opacity: 0; }
  55%  { transform: translate(6px, 0) rotate(4deg);      opacity: 1; }
  100% { transform: translate(0, 0) rotate(0);           opacity: 1; }
}
.cta-adding.cta-added { background: linear-gradient(120deg, var(--blue), var(--cyan)) !important; box-shadow: 0 8px 24px rgba(79, 200, 245, 0.38) !important; }
.cta-added .cta-ico { opacity: 0; transition: opacity 120ms ease; }
.cta-added .cta-check { animation: cta-check 260ms cubic-bezier(0.34, 1.5, 0.64, 1) forwards; }
@keyframes cta-check { to { opacity: 1; transform: scale(1); } }

/* Mini-affiche qui s'envole vers le panier + rebond du panier à l'arrivée. */
.vole-panier { position: fixed; z-index: 200; border-radius: 7px; object-fit: cover; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); pointer-events: none; will-change: transform, opacity; }
.cart.cart--recu { animation: cart-recu 520ms cubic-bezier(0.34, 1.5, 0.64, 1); }
@keyframes cart-recu { 0% { transform: scale(1); } 38% { transform: scale(1.3); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .cta-ico { transition: none; }
  .cta-adding .cta-ico { animation: none; transform: translate(0, 0); }
  .cta-added .cta-ico { opacity: 0; }
  .cta-added .cta-check { animation: none; opacity: 1; transform: scale(1); }
  .vole-panier { display: none; }
  .cart.cart--recu { animation: none; }
}