/* ==========================================================================
   Choumi Comedy Club MOBILE — composants partagés
   Chargé APRÈS shared/tokens.css : surcharge les tailles desktop des
   composants (.btn, .section-title) avec les valeurs mobiles historiques
   du hero (vérifiées au pixel), et ajoute le langage de section mobile
   (.section-gap / .section-surface). Documentation : ../README.md.
   ========================================================================== */

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

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

/* ==========================================================================
   .btn — le composant bouton (base + états + hover + TAILLE MOBILE) est
   défini à UN SEUL endroit : sites/desktop/styles/composants.css (la taille
   téléphone y vit sous @media not all and (min-width: 768px), soit 768 exclu). Rien ici : aucun doublon,
   aucune surcharge — le mobile hérite du composant unique tel quel.
   ========================================================================== */

/* ==========================================================================
   .section-title — échelle mobile du titre de section
   (hero « À ce soir. », « Le lieu. », « Les spectacles. » : exactement ceci)
   Coefficient calibré sur le MOT LE PLUS LONG du système (« spectacles. »,
   insécable) : il doit tenir dans une surface de section avec ses marges et
   son padding sur un écran de 375 px — 15.5vw le faisait déborder.
   ========================================================================== */
.section-title {
  font-size: clamp(46px, 14.2vw, 64px);
  line-height: 1.04;
}
/* Petits téléphones (≤360px) : plancher abaissé pour que le mot le plus long
   (« spectacles. ») ne soit jamais coupé par la surface de section. */
@media (max-width: 360px) {
  .section-title { font-size: clamp(37px, 12.8vw, 64px); }
}

/* ==========================================================================
   Langage de section mobile — .section-gap / .section-surface
   Même vocabulaire que le séparateur desktop : respiration sombre entre
   les sections + surface de section couleur menu (--nuit, la surface du
   calendrier et du header scrollé), coins arrondis token, marge latérale.
   Toutes les futures sections mobiles l'utilisent.
   ========================================================================== */
.section-gap {
  height: clamp(64px, 6svh, 96px); /* la respiration entre deux sections */
  border: 0;
  pointer-events: none;
}
.section-surface {
  background: var(--nuit);
  border-radius: var(--radius-lg);
  margin-inline: clamp(16px, 4vw, 20px);
  /* clip (pas hidden) : ne crée PAS de scroll container — indispensable
     pour que la timeline view() de .texte-scroll suive le scroll de page */
  overflow: clip;
}