/* ==========================================================================
   Choumi Comedy Club — styles du site (hero desktop)
   Chargé APRÈS styles/composants.css (tokens + composants partagés).
   Render-blocking volontairement : le loader doit être stylé au 1er rendu.
   Conventions : docs/architecture.md · animations : docs/animations.md
   ========================================================================== */

/* Les design tokens (:root) et le composant bouton .btn vivent dans
   styles/composants.css — ne pas les redéclarer ici. */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ============ LOADER « enseigne néon » SVG ============
   CSS critique : couvre l'écran dès le premier rendu pour masquer le
   chargement réel. Allumage lettre par lettre du logo SVG inline.
   Desktop uniquement. Documenté dans docs/animations.md. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader__fond { position: absolute; inset: 0; background: var(--bg); }

html.loader-actif { overflow: hidden; } /* scroll bloqué pendant le loader */
html.loader-actif .header .logo img { opacity: 0; } /* pas de doublon de logo */

.loader__logo { position: relative; width: min(340px, 38vw); }
.loader__logo svg { width: 100%; height: auto; display: block; }

/* Chaque lettre part « éteinte » (contours à peine visibles) et porte sa
   lueur néon accent — visible seulement une fois allumée */
.loader .letter:not(#letter-i),
.loader #letter-i-stem,
.loader #letter-i-dot,
.loader #choumi-baseline {
  opacity: 0.08;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--blue) 55%, transparent));
  animation: loader-lettre 180ms ease-out forwards;
}
@keyframes loader-lettre { to { opacity: 1; } }

/* Allumage de gauche à droite, « comedy club » en dernier, d'un bloc */
.loader #letter-c      { animation-delay: 120ms; }
.loader #letter-h      { animation-delay: 240ms; }
.loader #letter-o      { animation-name: loader-gresille; animation-duration: 420ms; animation-delay: 360ms; }
.loader #letter-u      { animation-delay: 500ms; }
.loader #letter-m      { animation-delay: 610ms; }
.loader #letter-i-stem { animation-delay: 720ms; }
.loader #letter-i-dot  { animation-delay: 830ms; } /* le point du i, dernier clin d'œil */
.loader #choumi-baseline { animation-delay: 930ms; }

/* Le « o » grésille : 2 accrocs rapides et irréguliers avant la pleine
   lumière — une seule lettre (zone minuscule), contraste limité */
@keyframes loader-gresille {
  0%   { opacity: 0.08; }
  30%  { opacity: 1; }
  45%  { opacity: 0.25; }
  62%  { opacity: 1; }
  76%  { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Phase B : respiration en boucle tant que le site n'est pas prêt */
.loader--respire .loader__logo { animation: loader-respire 2s ease-in-out infinite; }
@keyframes loader-respire {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.85; }
}

/* Phase C : le fond se fond pour révéler le hero pendant le FLIP du logo */
.loader--sortie { pointer-events: none; }
.loader--sortie .loader__fond { opacity: 0; transition: opacity 500ms ease 120ms; }

@media (max-width: 1180px) { .loader { display: none; } } /* mobile : pas de loader */

@media (prefers-reduced-motion: reduce) {
  /* Ni allumage séquentiel ni flicker : logo allumé d'emblée, fondus simples */
  .loader .letter:not(#letter-i),
  .loader #letter-i-stem,
  .loader #letter-i-dot,
  .loader #choumi-baseline { animation: none; opacity: 1; }
  .loader--respire .loader__logo { animation: none; }
}


/* ============ HERO WRAPPER (photo de fond) ============ */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* zoom léger + décalage vers la gauche : le néon « choumi » reste
     visible entre le titre et le calendrier, hors du centre */
  /* Version améliorée par upscale IA (master : Photos/Photo Héro 4K.png) */
  background: url("../Photos/Photo Héro 4K.webp") 100% 42% / 137% auto no-repeat;
  background-color: var(--bg);
}

/* voiles sombres pour la lisibilité (gauche + haut + bas) */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 96%, transparent) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 28%, color-mix(in srgb, var(--bg) 35%, transparent) 55%, color-mix(in srgb, var(--bg) 15%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 85%, transparent) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 22%),
    linear-gradient(0deg, color-mix(in srgb, var(--bg) 75%, transparent) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 25%);
}

/* ============ MENU / HEADER ============ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  /* Hauteur FIXE, identique à TOUTES les pages (mêmes valeurs que spectacle/chrome.css) :
     14 px vertical + inset fluide. Le header ne change plus de taille au scroll
     (« ancré ») ni d'une page à l'autre — seul le FOND apparaît au défilement.
     Contenu plafonné à 1800 px (l'excédent part en marges). */
  padding: 14px max(clamp(48px, 5vw, 96px), calc((100vw - 1800px) / 2));
  border-bottom: 1px solid transparent;
  transition: background var(--duree-etat) ease, border-color var(--duree-etat) ease, box-shadow var(--duree-etat) ease;
}

/* Dès qu'on scrolle : fond sombre premium (verre flouté, pas tout noir) */
.header.is-scrolled {
  /* Exactement la surface du calendrier (token partagé --nuit, opaque,
     sans verre — le calendrier n'en a pas). Voir docs/design-tokens.md. */
  background: var(--nuit);
  border-bottom-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.logo { display: block; line-height: 0; }
.logo img {
  height: clamp(40px, 2.5vw, 48px);
  width: auto;
  aspect-ratio: 2689 / 1001;
  display: block;
  transition: opacity 150ms ease; /* relais croisé avec le loader */
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(26px, 2.2vw, 42px);
  margin-left: auto;
}
.nav a {
  color: var(--white);   /* toujours blanc par défaut (jamais gris) */
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  /* au survol : uniquement le léger lift, comme le panier (aucun changement de couleur) */
  transition: transform 0.24s ease-out;
}
.nav a:hover { transform: translateY(-2px); }
.nav a:active { transform: translateY(0); }
/* Onglet actif : même gras et même bleu que le « comedy club » du logo */
.nav a.is-active { color: var(--cyan); font-weight: 700; }

.header__actions {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.35vw, 26px);
}

.account {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap; /* « Se connecter »/« Mon compte » sur UNE ligne (sinon retour à la ligne en tablette) */
  /* même hover que le panier : léger lift */
  transition: transform 0.24s ease-out, opacity var(--duree-hover) ease-out;
}
.account svg { width: 18px; height: 18px; stroke: var(--white); }
.account:hover { opacity: 0.8; transform: translateY(-2px); }
.account:active { transform: translateY(0); }

/* Bouton panier « billet » (repris de Panier/panier-bouton.html) */
.cart {
  position: relative; width: 40px; height: 40px; padding: 0;
  border-radius: var(--radius-md); background: none; border: 0;
  color: var(--white); cursor: pointer; display: grid; place-items: center;
  transition: transform 0.24s ease-out;
}
.cart:hover { transform: translateY(-2px); }
.cart:active { transform: translateY(0) scale(0.94); }
.cart:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.cart svg.wig { animation: wiggle 420ms var(--ease-rebond); }

/* ---- TABLETTE (768→960) : la nav bureau tient large mais devient serrée ;
   on resserre les écarts pour laisser respirer « Se connecter » sans retour à
   la ligne. MÊMES valeurs que spectacle/chrome.css (header identique partout). ---- */
@media (min-width: 768px) and (max-width: 960px) {
  .nav { gap: clamp(18px, 2.4vw, 26px); }
  .header__actions { gap: 14px; }
}

.cart__badge {
  position: absolute; top: 0; right: -1px; min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: var(--signal); color: #FFFFFF;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  border: 2px solid var(--bg);
}
.cart__badge.pop { animation: pop 380ms var(--ease-rebond) both, ring 720ms ease-out both; }

@keyframes pop { 0% { transform: scale(0); } 62% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent); } 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--signal) 0%, transparent); } }
@keyframes wiggle { 0% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 64% { transform: rotate(6deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .cart__badge.pop, .cart svg.wig { animation: none; } }

/* ============ CONTENU DU HÉRO ============ */
.hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 90px);
  /* Vertical fluide selon la hauteur (laptops 800 px ok) ; horizontal aligné
     sur le header, plafonné à 1800 px de contenu */
  padding: clamp(140px, 19vh, 180px)
           max(clamp(48px, 5vw, 96px), calc((100vw - 1800px) / 2))
           clamp(70px, 12vh, 110px);
  min-height: 100svh;
}

/* Garde-fou : le héro BUREAU a un .hero__content (2 enfants → space-between OK).
   Si le contrôleur responsive a monté le héro MOBILE (enfants à plat, sans
   .hero__content) alors que cette CSS bureau est active, space-between éparpille
   ses enfants et projette le bouton « Réserver » à droite. On l'empile/centre. */
.hero__inner:not(:has(.hero__content)) {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero__content { max-width: clamp(500px, 43vw, 640px); min-width: 0; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(14px, 0.85vw, 16px);
  font-weight: 500;
  margin-bottom: clamp(12px, 0.75vw, 14px);
}
.eyebrow__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
.eyebrow__sep { color: var(--grey-dim); font-weight: 300; }
.eyebrow__time { color: var(--blue); font-weight: 600; }

/* La typo du titre vient du composant partagé .section-title
   (styles/composants.css) ; ici, seulement sa marge dans le hero. */
.hero__title { margin-bottom: clamp(28px, 1.9vw, 36px); }

.hero__cta-row {
  display: flex;
  align-items: center;
  gap: clamp(28px, 2.3vw, 44px);
  margin-bottom: clamp(30px, 2.1vw, 40px);
}

/* Le CTA du hero est le composant partagé .btn (styles/composants.css) —
   seul lui porte la flèche (svg), conformément à docs/design-tokens.md. */

.link-date:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.link-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  text-decoration: none;
  font-size: clamp(13.5px, 0.8vw, 15px);
  font-weight: 400;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,0.55);
  transition: color var(--duree-hover) ease-out, border-color var(--duree-hover) ease-out;
}
.link-date svg { width: 14px; height: 14px; stroke: currentColor; transition: transform var(--duree-hover) ease-out, stroke var(--duree-hover) ease-out; }
.link-date:hover { color: var(--blue); border-color: var(--blue); }
.link-date:hover svg { transform: translateX(5px); stroke: var(--blue); }

.hero__note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--grey);
  font-size: clamp(12.5px, 0.73vw, 14px);
  font-weight: 400;
}
.hero__note svg { width: 20px; height: 20px; stroke: var(--blue); flex-shrink: 0; }

/* ============ CARTE CALENDRIER ============
   Adapté en carte desktop (sans poignée ni drag-to-dismiss). */
.cal {
  /* --nuit, --cyan, --signal héritent des tokens racine (composants.css) ;
     ci-dessous, seule la palette propre au calendrier. */
  --encre: #08222E;
  --texte: #F1EFFA;
  --mist: #9C96AD;
  --subtil: #6E687F;
  --eteint: #4A4560;
  --surface: #17142A;
  --cbord: rgba(241, 239, 250, 0.08);

  /* Dimensions fluides 1280→1920 (largeur 336→440), pilotées par variables */
  --cell: clamp(33px, 2.35vw, 45px); /* cellule jour */
  --navb: clamp(30px, 1.8vw, 36px);  /* boutons de mois */
  --ctah: clamp(42px, 2.4vw, 50px);  /* hauteur du CTA */

  position: relative; /* repère du glissement de sélection (.cal__glide) */
  width: clamp(336px, 23vw, 440px);
  /* Hauteur verrouillée par calcul (6 semaines max + CTA) : constante pour
     un viewport donné, aucune variation d'un mois ou d'une vue à l'autre */
  height: calc(var(--cell) * 6 + var(--navb) + var(--ctah) + 134px);
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: -30px;
  background: var(--nuit);
  border: 1px solid var(--cbord);
  border-radius: var(--radius-lg);
  padding: 16px clamp(16px, 1.2vw, 22px) 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
  color: var(--texte);
}

/* Laptops peu hauts : on resserre le calendrier en priorité, jamais coupé */
@media (max-height: 880px) {
  .cal { --cell: 33px; --navb: 30px; --ctah: 42px; }
}

/* Les deux vues remplissent la carte ; le CTA est épinglé en bas. */
.cal > div { height: 100%; display: flex; flex-direction: column; }
.cal > div[hidden] { display: none; }

.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cal__navb {
  width: var(--navb); height: var(--navb); border-radius: var(--radius-sm); flex: none;
  background: var(--surface); border: 1px solid var(--cbord); color: var(--texte);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: color 0.16s, border-color 0.16s, transform 0.16s;
}
.cal__navb:hover { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.cal__navb:active { transform: scale(0.92); }
.cal__navb[disabled] { opacity: 0.32; pointer-events: none; }
.cal__navb:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cal__title { font-size: clamp(15px, 0.9vw, 17px); font-weight: 600; letter-spacing: -0.01em; text-align: center; flex: 1; }

.cal__weekdays, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__weekdays span { text-align: center; padding: 4px 0 8px; font-size: clamp(9px, 0.55vw, 10.5px); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtil); }
.cal__grid { row-gap: 3px; min-height: calc(var(--cell) * 6 + 15px); align-content: start; } /* espace réservé pour 6 semaines */

.cal__day {
  position: relative; height: var(--cell); border: 0; border-radius: var(--radius-md); background: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 500 clamp(12px, 0.73vw, 14px) 'Poppins', sans-serif; color: var(--texte); cursor: pointer;
  transition: background 0.16s, color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.cal__day:hover:not([disabled]):not(.sel) { background: rgba(241, 239, 250, 0.06); transform: scale(1.08); }
.cal__day:active:not([disabled]) { transform: scale(0.9); }
.cal__day:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.cal__day[disabled] { color: var(--eteint); cursor: default; }
.cal__day .dot { width: 4px; height: 4px; border-radius: 999px; background: transparent; }
.cal__day.avail .dot { background: var(--cyan); box-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 60%, transparent); }
.cal__day.full .dot { background: var(--signal); box-shadow: 0 0 6px color-mix(in srgb, var(--signal) 50%, transparent); }
.cal__day.today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cyan) 45%, transparent); }
.cal__day.sel { background: var(--cyan); color: var(--encre); font-weight: 600; box-shadow: 0 0 22px color-mix(in srgb, var(--cyan) 38%, transparent); }
.cal__day.sel .dot { background: var(--encre); box-shadow: none; }
.cal__day.sel.full { background: var(--surface); color: var(--texte); box-shadow: inset 0 0 0 1.5px var(--signal); }
.cal__day.sel.full .dot { background: var(--signal); }

.cal__legend { display: flex; gap: 16px; margin: 12px 2px; }
.cal__legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--mist); }
.cal__legend i { width: 6px; height: 6px; border-radius: 999px; }
.cal__legend i.dispo { background: var(--cyan); box-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 60%, transparent); }
.cal__legend i.complet { background: var(--signal); }

/* Les CTA du calendrier SONT le composant .btn (identité, hover, états
   dans composants.css) — ici seulement leur géométrie : pleine largeur,
   hauteur pilotée par --ctah, sans padding (le libellé long doit tenir),
   calés en bas de la carte (colonne flex) */
.cal__cta {
  width: 100%; height: var(--ctah);
  justify-content: center;
  padding: 0;
  margin-top: auto;
}
.cal__cta[disabled] { background: var(--surface); color: var(--subtil); cursor: default; }

/* Vue « spectacles du jour » : compacte pour que 4 séances (samedi) tiennent
   dans la carte SANS scroll interne (demande client). overflow reste en secours. */
.cal__rows { flex: 1; min-height: 0; overflow-y: auto; }
.cal__row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--cbord); }
.cal__row:last-child { border-bottom: 0; }
.cal__row .t { width: 46px; flex: none; font-weight: 600; font-size: 12.5px; color: var(--cyan); }
.cal__row .n { flex: 1; min-width: 0; }
.cal__row .n b { display: block; font-weight: 600; font-size: 12.5px; line-height: 1.25; }
.cal__row .n small { display: block; font-size: 10.5px; color: var(--mist); line-height: 1.3; margin-top: 1px; }
/* Plein tarif barré à côté du prix réduit (cohérent avec les pages spectacle). */
.tarif-barre { font-weight: 400; margin-left: 4px; opacity: 0.55; }
/* Variante COMPACTE du composant .btn (elle seule tient dans une rangée) :
   identité et états STRICTEMENT identiques, proportions réduites */
.cal__mini {
  border: 0; border-radius: var(--radius-sm); padding: 8px 12px; flex: none;
  background: var(--blue); color: var(--encre-bleu); font: 700 10px 'Poppins', sans-serif;
  letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer;
  transition: background var(--duree-hover), transform var(--duree-appui);
}
.cal__mini:hover { background: var(--blue-soft); transform: translateY(-1px); }
.cal__mini:active { transform: translateY(0); }
.cal__mini:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Trait qui voyage + allumage du calendrier — déclenchés par « Choisir une
   autre date ». Documentés dans docs/animations.md ; à mettre à jour ensemble. */
.trait-voyage {
  position: fixed;
  inset: 0;
  /* <svg> = élément REMPLACÉ : inset:0 seul ne l'étire pas (taille intrinsèque
     300×150). width/height 100% couvrent le viewport et alignent le tracé sur
     les coordonnées écran. NE PAS retirer (le trait disparaît sinon). */
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 55;
}
.trait-voyage path { fill: none; stroke: var(--blue); stroke-linecap: round; }
.trait-voyage__traine { stroke-width: 2px; opacity: 0.32; } /* la traîne s'estompe derrière */
.trait-voyage__tete {
  stroke-width: 2.5px;
  filter: drop-shadow(0 0 5px var(--blue))
          drop-shadow(0 0 14px color-mix(in srgb, var(--blue) 55%, transparent));
}

/* À l'arrivée du trait : la bordure s'allume vite puis s'estompe (~400 ms) */
@keyframes cal-allume {
  0%   { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 0 0 transparent; }
  25%  { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65),
                     0 0 0 1.5px color-mix(in srgb, var(--blue) 60%, transparent),
                     0 0 36px color-mix(in srgb, var(--blue) 30%, transparent); }
  100% { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 0 0 transparent; }
}
.cal.cal--allume { animation: cal-allume 400ms ease-out; }

/* Glissement de la sélection : une pastille fantôme voyage de l'ancien jour
   au nouveau (220 ms), pendant que le vrai jour sélectionné reste éteint */
.cal__glide {
  position: absolute;
  top: 0; left: 0;
  border-radius: var(--radius-md); /* suit la case de jour */
  background: var(--cyan);
  box-shadow: 0 0 22px color-mix(in srgb, var(--cyan) 38%, transparent);
  pointer-events: none;
  z-index: 2;
}
.cal--glisse .cal__day.sel {
  background: transparent;
  color: var(--texte);
  font-weight: 500;
  box-shadow: none;
}
.cal--glisse .cal__day.sel .dot { background: var(--cyan); box-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 60%, transparent); }

@keyframes cal-day-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 22px color-mix(in srgb, var(--cyan) 38%, transparent); }
  45%  { transform: scale(1.12); box-shadow: 0 0 30px color-mix(in srgb, var(--cyan) 60%, transparent); }
  100% { transform: scale(1);    box-shadow: 0 0 22px color-mix(in srgb, var(--cyan) 38%, transparent); }
}
.cal__day.sel.cal__day--pulse { animation: cal-day-pulse 500ms ease-out 120ms; }

@media (prefers-reduced-motion: reduce) {
  .cal__day, .cal__cta, .cal__navb, .cal__mini { transition: none; }
  .link-date, .link-date svg { transition: none; }
  .link-date:hover svg { transform: none; }
  .trait-voyage { display: none; } /* jamais de trait qui voyage */
  .cal__glide { display: none; }   /* sélection sans glissement */
  .cal__day:hover:not([disabled]):not(.sel) { transform: none; }
  /* Mise en évidence statique brève : bordure bleue sans mouvement,
     retirée par le JS après ~700 ms */
  .cal.cal--allume {
    animation: none;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65),
                0 0 0 2px color-mix(in srgb, var(--blue) 60%, transparent);
  }
  .cal__day.sel.cal__day--pulse { animation: none; }
}

/* Section fantôme sous le héro : permet de scroller pour voir le menu
   s'assombrir — à remplacer par les vraies sections de la landing. */
.apres-hero { height: 80vh; background: var(--bg); }

/* ============ RESPONSIVE (garde-fou) ============ */
@media (max-width: 1180px) {
  .cal { display: none; }
  .hero__inner { justify-content: flex-start; }
}

/* ==========================================================================
   CALENDRIER FLOTTANT — repli en bouton au scroll (≥ 1181 px)
   Quand le héro quitte l'écran, le calendrier se replie dans un bouton
   flottant (icône calendrier + badge « Réserver ») ; au clic il se déplie en
   popover, le calendrier D'ORIGINE y étant DÉPLACÉ (mêmes nœuds → écouteurs et
   état 100 % préservés). Au retour sur le héro il reprend sa place et le bouton
   disparaît. Additif pur : aucune règle existante modifiée. Piloté par js/site.js.
   ========================================================================== */

/* Bouton flottant : masqué par défaut (fondu + glissement) */
.cal-fab {
  position: fixed;
  right: clamp(20px, 2vw, 32px);
  bottom: clamp(20px, 2vw, 32px);
  z-index: 60;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--nuit);
  color: var(--white);
  cursor: pointer;
  /* halo bleu discret : le bouton ressort mieux sur le fond sombre */
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5),
              0 0 22px rgba(87, 179, 242, 0.18),
              inset 0 0 0 1px color-mix(in srgb, var(--white) 10%, transparent);
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  pointer-events: none;
  transition: opacity var(--duree-etat) ease, transform var(--duree-etat) var(--ease-flip),
              box-shadow var(--duree-etat) ease;
}
.cal-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
/* Survol : halo renforcé (le relief 3D — rotateX/rotateY vers le curseur — est
   piloté par le JS, même esprit que shared/affiche-3d). */
.cal-fab.is-visible:hover {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55),
              0 0 32px rgba(87, 179, 242, 0.34),
              inset 0 0 0 1px color-mix(in srgb, var(--white) 16%, transparent);
}
/* Pendant le suivi souris, on coupe la transition du transform (suivi net) ;
   au départ du curseur elle reprend → retour au repos en douceur. */
.cal-fab--suivi { transition: opacity var(--duree-etat) ease, box-shadow var(--duree-etat) ease; }
.cal-fab:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.cal-fab svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Onde « sonar » quand le bouton est visible — attire l'œil, MÊME langage que
   le bouton des cartes spectacle (.spectacles__clic). Rendue derrière l'icône. */
.cal-fab::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.6px solid var(--blue);
  opacity: 0;
  pointer-events: none;
}
.cal-fab.is-visible::before { animation: cal-fab-sonar 2.6s ease-out infinite; }
@keyframes cal-fab-sonar {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.cal-fab__badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 3px 10px; border-radius: var(--radius-md); /* angle du système, jamais de pilule */
  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);
}

/* Popover : le calendrier déplié, ancré au-dessus du bouton (bas-droite) */
.cal-pop {
  position: fixed;
  right: clamp(20px, 2vw, 32px);
  bottom: calc(clamp(20px, 2vw, 32px) + 74px); /* juste au-dessus du bouton (60 + 14) */
  z-index: 62;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity var(--duree-etat) ease, transform var(--duree-etat) var(--ease-flip);
}
.cal-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
/* Le calendrier accueilli dans le popover : on neutralise les réglages propres
   au contexte héro (alignement flex + marge négative). Taille et style conservés. */
.cal-pop .cal { align-self: auto; margin-bottom: 0; }

/* Croix de fermeture — chip posé sur le coin haut-gauche du popover, avec la
   croix « sourire » (le MÊME ✕ que le menu → cohérence sur tout le site). */
.cal-pop__close {
  position: absolute; top: -14px; left: -14px; z-index: 3;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--white) 14%, transparent); border-radius: 50%;
  background: var(--nuit); color: var(--white); cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  transition: background var(--duree-hover) ease, transform var(--duree-appui);
}
.cal-pop__close:hover { background: color-mix(in srgb, var(--white) 8%, var(--nuit)); transform: translateY(-2px); }
.cal-pop__close:active { transform: translateY(0) scale(0.94); }
.cal-pop__close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.cal-pop__close svg { width: 18px; height: 18px; }
/* Le ✕ « sourire » figé dans son état ouvert (barre pivotée + sourire pivoté,
   arc cyan lumineux) — géométrie identique au burger du menu mobile. */
.cal-pop__close .b1 { transform-origin: 12px 12px; transform: translateY(5.5px) rotate(45deg); }
.cal-pop__close .sm {
  transform-origin: 12px 16.8px; transform: translateY(-4.8px) rotate(-45deg);
  stroke: var(--cyan); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cyan) 60%, transparent));
}
/* Onde bleue douce « tu peux refermer ici » autour de la croix (même ADN sonar). */
.cal-pop__close::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  animation: onde-croix 2.6s ease-out infinite;
}
@keyframes onde-croix {
  0%   { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 50%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--cyan) 0%, transparent); }
  100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--cyan) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .cal-pop__close::after { animation: none; } }

/* Mouvement réduit : fondu seul, aucun glissement */
@media (prefers-reduced-motion: reduce) {
  .cal-fab, .cal-fab.is-visible, .cal-pop, .cal-pop.is-open { transform: none; }
  .cal-fab, .cal-pop { transition: opacity var(--duree-etat) ease; }
  .cal-fab::before { animation: none; }
}