/* ==========================================================================
   Poppins auto-hébergée (latin, graisses 300-700, ~8 Ko chacune) —
   zéro dépendance Google Fonts, font-display: swap.
   Régénération : voir ../docs/architecture.md.
   ========================================================================== */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/poppins-300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/poppins-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/poppins-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/poppins-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Choumi Comedy Club — tokens & composants partagés
   SOURCE UNIQUE des design tokens et du composant bouton.
   Consommé par le site (index.html) et par les sandboxes (lecture seule).
   Documentation : ../docs/design-tokens.md — à tenir à jour ensemble.
   ========================================================================== */

:root {
  --bg: #060608;
  --blue: #57b3f2;
  --blue-soft: #6ec0f7;
  --violet: #AA599E;   /* violet du logo (preuve sociale, accents néon) */
  --white: #f5f6f8;
  --grey: #b9bec7;
  --grey-dim: #6d727c;

  --cyan: #4FC8F5;       /* cyan « scène » : onglet actif, focus, accents du calendrier */
  --signal: #FF3D71;     /* rouge signal : badge panier, dates « complet » */
  --encre-bleu: #08131c; /* encre foncée LISIBLE sur fond bleu (texte des boutons) */

  /* Surface sombre partagée : fond du calendrier ET du header scrollé */
  --nuit: #0B0915;

  /* Coins — déclinés depuis le CTA hero (10 px, la référence).
     Jamais de pilule 999px, jamais d'angle vif là où un radius existe. */
  --radius-sm: 8px;   /* petits éléments : badge, flèches de mois, mini-boutons */
  --radius-md: 10px;  /* RÉFÉRENCE : boutons, cases de jour, panier */
  --radius-lg: 22px;  /* grandes cartes : calendrier */

  /* Durées & easings d'animation (voir ../docs/animations.md) */
  --duree-appui: 0.15s;  /* micro-retours (press) */
  --duree-hover: 0.2s;   /* survols */
  --duree-etat: 0.25s;   /* bascules d'état (header scrollé, projecteur…) */
  --ease-rebond: cubic-bezier(0.34, 1.4, 0.64, 1); /* pop badge, wiggle billet */
  --ease-glisse: cubic-bezier(0.32, 0.9, 0.35, 1); /* glissement de sélection */
  --ease-flip: cubic-bezier(0.22, 1, 0.36, 1);     /* sorties FLIP, lifts doux */
}

/* ==========================================================================
   Composant bouton principal — .btn
   Balise : <a href> pour une navigation, <button> pour une action in-page.
   La flèche (svg enfant) est L'EXCLUSIVITÉ du CTA principal du hero :
   tout autre .btn s'écrit sans svg.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--blue);
  color: var(--encre-bleu);
  text-decoration: none;
  font-family: inherit; /* un <button> n'hérite pas de la police tout seul */
  font-size: clamp(11px, 0.63vw, 12px);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: clamp(13px, 0.8vw, 15px) clamp(22px, 1.5vw, 28px);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duree-hover), transform var(--duree-appui);
}
.btn:hover { background: var(--blue-soft); transform: translateY(-1px); }
.btn:active { transform: translateY(0); } /* le bouton se repose sous le clic */
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.btn svg { width: 17px; height: 17px; stroke: var(--encre-bleu); }

/* Format téléphone : SEULE la taille change (hauteur tactile + marge latérale
   fixe). Couleurs, typo, radius ET états (:hover --blue-soft + lift, :active,
   :focus) sont ceux ci-dessus — UNE seule source de vérité pour le bouton,
   ici. La flèche (svg) reste l'exclusivité du CTA du hero. */
@media not all and (min-width: 768px) {
  .btn { min-height: clamp(54px, 14vw, 60px); padding: 0 40px; font-size: clamp(12.5px, 3.5vw, 14px); }
  .btn svg { width: 19px; height: 19px; }
}

/* ==========================================================================
   Composant titre de section — .section-title
   L'échelle typographique du titre du hero (« À ce soir. »), partagée par
   tous les grands titres de section (« Le lieu. », …) : même clamp fluide,
   mêmes tailles aux mêmes largeurs. Le dernier mot + point porte
   <span class="accent"> (bleu). Les marges restent à la charge du contexte.
   ========================================================================== */
.section-title {
  font-size: clamp(56px, 4.3vw, 82px); /* max = taille à 1920, min imposant à 1280 */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--white);
}
.section-title .accent { color: var(--blue); }

/* ==========================================================================
   Composant « Choumi » en LETTRAGE DU LOGO — .choumi-mot
   Rend le mot « Choumi » inline dans un texte via <img class="choumi-mot">
   (le SVG mesure 2689×649 → SANS cette règle il s'affiche à sa taille
   naturelle et casse la mise en page). Hauteur en em : suit la taille du
   texte, calé sur la baseline. Utilisé par le footer et les pages spectacle.
   ========================================================================== */
.choumi-mot { height: 1.08em; width: auto; transform: translateY(0.08em); }

/* ==========================================================================
   Composant séparateur de section — .separateur
   <hr class="separateur"> entre deux sections, sur TOUTES les pages.
   Transition : la section précédente fond vers la couleur du menu
   (--nuit), plateau aéré, puis fondu vers la section suivante. Les fondus
   chevauchent les sections voisines (marges négatives) : l'espace net
   ajouté entre deux sections = le plateau. Zéro JS, pointer-events: none.
   Réglages par variables : --sep-fondu (hauteur de chaque fondu) et
   --sep-plein (plateau couleur menu).
   ========================================================================== */
.separateur {
  --sep-fondu: clamp(80px, 10svh, 120px);
  --sep-plein: clamp(120px, 16svh, 180px); /* respiration généreuse */
  position: relative;
  z-index: 5;
  height: calc(var(--sep-fondu) * 2 + var(--sep-plein));
  margin-block: calc(var(--sep-fondu) * -1); /* les fondus mordent les sections */
  border: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0,
    var(--nuit) var(--sep-fondu),
    var(--nuit) calc(100% - var(--sep-fondu)),
    transparent 100%);
}

/* ==========================================================================
   Apparition du texte pilotée par le SCROLL — .texte-scroll
   Le bloc central d'une section (titre → preuve sociale → bouton) apparaît
   selon la PROGRESSION D'ENTRÉE de la section dans le viewport, pas selon
   un timer : scroll rapide = texte immédiatement en place, scroll lent =
   apparition qui accompagne le geste. Une fois apparu, il RESTE en place
   (verrou .texte-scroll--fixe). Le mapping progression → opacité/12 px est
   appliqué par js/texte-scroll.js (scroll passif + rAF) — UN SEUL chemin,
   identique dans tous les navigateurs (l'animation-timeline native a été
   écartée : support Safari absent et comportement instable constaté).
   Plages d'entrée : titre 25→50 %, preuve 28→53 %, bouton 31→56 %.
   Contrat markup : .texte-scroll sur la section, .texte-scroll__inner sur
   le bloc central (enfants : titre, preuve, ligne totale, bouton).
   ========================================================================== */
.texte-scroll__inner > * {
  opacity: 0;
  /* La translation d'apparition utilise la propriété `translate` (et NON
     `transform`) : ainsi elle ne rentre JAMAIS en conflit avec le `transform`
     du survol des boutons (`.btn:hover { transform: translateY(-1px) }`). Un
     enfant .btn garde donc son lift au survol, à tout instant. */
  translate: 0 12px;
}


/* Verrou : une fois complètement apparu, le texte reste en place
   (pas de re-disparition au scroll arrière). On réinitialise `translate`
   uniquement — surtout PAS `transform`, qui appartient au :hover des boutons. */
.texte-scroll--fixe .texte-scroll__inner > * {
  animation: none;
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  .texte-scroll .texte-scroll__inner > * {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
  }
}