/* ═══════════════════════════════════════════════════════════════════════════
   NONOSPLIT — vitrine. DA REPRISE, PAS RÉINVENTÉE.

   Tout ce qui est ici vient de l'app d'origine (agenda-musique, avant sa
   bascule dans Liive le 02/09/2026), récupéré dans l'historique git :
     • le mot-symbole  « Nono » clair + « Split » bleu, Plus Jakarta Sans 800,
                        approche -0.04em, alignement sur la LIGNE DE BASE
                        (`.nav-brand-nono` / `.nav-brand-split`) ;
     • la palette      son thème sombre (`--pal-dark-*` de src/index.css) ;
     • le bleu marque  #1ec6ff, la couleur du tracé de son favicon guitare.

   ⚠️ Deux bleus, et ils ne sont pas interchangeables :
     --marque  #1ec6ff  le bleu du groupe. Mot-symbole, guitare, filets.
     --accent  #93c5fd  le bleu d'INTERFACE de l'app. Liens, survols.
   Le premier est une identité, le second une convention de lecture. À grande
   taille #93c5fd se délave sur le fond d'encre ; c'est pour ça que le titre
   porte #1ec6ff et pas lui.

   CONTRASTES calculés sur --bg (#0f172a) :
     --text        #f1f5f9   15.9:1
     --text-muted  #94a3b8    6.3:1   texte secondaire, au-dessus de 4.5
     --accent      #93c5fd    9.4:1
     --marque      #1ec6ff    8.3:1   donc utilisable en TEXTE, pas qu'en filet
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  --bg: #0f172a;
  --surface: #1e293b;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --accent: #93c5fd;
  --marque: #1ec6ff;

  --filet: color-mix(in srgb, var(--text) 12%, transparent);
  --filet-fort: color-mix(in srgb, var(--marque) 26%, transparent);

  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad-x: clamp(1.25rem, 6vw, 3rem);
  --mesure: 46rem;
  --ease: cubic-bezier(0.16, 0.68, 0.32, 1);

  /* La zone sûre de l'iPhone. La page n'est pas une app installée, mais elle
     s'ouvre en plein écran depuis Instagram : sans ça le pied passe sous la
     barre d'accueil. */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* Le halo : deux lueurs très basses, comme deux projecteurs de fond de scène.
   C'est la seule concession d'ambiance de la page — elle ne coûte aucun octet
   de plus (pas d'image) et elle disparaît proprement si le navigateur ignore
   les dégradés radiaux. `fixed` : elle ne défile pas, la page glisse dessus. */
.halo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58rem 34rem at 18% -8%, color-mix(in srgb, var(--marque) 13%, transparent), transparent 62%),
    radial-gradient(46rem 30rem at 92% 6%, color-mix(in srgb, #2563eb 16%, transparent), transparent 60%);
}

a { color: var(--accent); }

/* ── Le bandeau ────────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(3.5rem, 14vh, 7rem) var(--pad-x) clamp(2.25rem, 7vh, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  text-align: center;
}

.hero-marque {
  width: clamp(3rem, 11vw, 4rem);
  height: auto;
  color: var(--marque);
  filter: drop-shadow(0 0 1.4rem color-mix(in srgb, var(--marque) 40%, transparent));
}

.hero-nom { margin: 0; }

/* Le mot-symbole. `align-items: baseline` et non `center` : les deux mots sont
   composés d'un bloc, un décalage vertical se verrait immédiatement.
   `white-space: nowrap` — « Nono » et « Split » ne se séparent JAMAIS, même
   dans 320 px de large ; c'est la taille qui cède, pas la ligne. */
.mot {
  display: inline-flex;
  align-items: baseline;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  font-size: clamp(2.75rem, 13vw, 5.5rem);
}

.mot-clair { color: var(--text); }
.mot-accent { color: var(--marque); }

/* La présentation : le SEUL texte de la page qui ne soit pas une donnée. Il
   vient du groupe (`content.json`), il n'est pas écrit ici — et il porte aussi
   la meta description, donc c'est lui qu'on lit sous le lien dans Google.
   Sa couleur est entre le texte et le secondaire : c'est la deuxième chose
   qu'on lit après le nom, elle ne doit pas s'effacer comme une légende.
   `balance` répartit les lignes au lieu d'en laisser une orpheline. */
.hero-presentation {
  margin: 0;
  max-width: 34rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text) 55%, var(--text-muted));
  text-wrap: balance;
}

/* Instagram : icône SEULE, sans le pseudo — le logo se reconnaît, l'écrire à
   côté est une redite (arbitrage du 03/09/2026). Deux conséquences à ne pas
   perdre :
     • le pseudo passe en `aria-label` côté serveur, sinon un lecteur d'écran
       n'annoncerait qu'« Instagram » sans dire de QUI ;
     • la cible reste à 2.75rem = 44 px, le minimum tactile — un bouton d'icône
       qui rétrécit à la taille de son dessin devient impossible à viser. */
.ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: 0.35rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background 0.2s var(--ease), transform 0.2s var(--ease);
}

.ig-icon { width: 1.35rem; height: 1.35rem; flex-shrink: 0; }

.ig:hover,
.ig:focus-visible {
  color: var(--text);
  border-color: var(--filet-fort);
  background: color-mix(in srgb, var(--marque) 10%, transparent);
}

.ig:focus-visible { outline: 2px solid var(--marque); outline-offset: 3px; }

/* ── Les dates ─────────────────────────────────────────────────────────────── */

.dates-bloc {
  flex: 1;
  width: 100%;
  max-width: var(--mesure);
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(3rem, 9vh, 5rem);
}

.dates-titre {
  margin: 0 0 1.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dates {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--filet);
}

/* La ligne : QUAND · QUOI · HEURE.
   ⚠️ `minmax(0, 1fr)` et jamais `1fr` sur la colonne du milieu — `1fr` vaut
   `minmax(auto, 1fr)`, et un nom de salle insécable ferait déborder la grille
   (piège relevé côté Liive le 03/09/2026). */
.date {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 1rem;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--filet);
  transition: background 0.2s var(--ease);
}

.date:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }

/* Le bloc de date, en colonne : jour dit, quantième, mois. Le quantième porte
   tout le poids — c'est ce qu'on cherche du regard dans une liste de dates. */
.date-quand {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  align-self: center;
}

.date-jourdit,
.date-mois {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.date-num {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--marque);
  font-variant-numeric: tabular-nums;
}

.date-corps { min-width: 0; align-self: center; }

.date-lieu {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Le lieu est un lien vers la carte quand on a l'adresse, du texte sinon. Le
   soulignement n'apparaît qu'au survol : dans une liste, dix libellés soulignés
   font un mur. Sur `a` seulement — la version `span` ne doit pas réagir. */
a.date-lieu:hover,
a.date-lieu:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
a.date-lieu:focus-visible { outline: 2px solid var(--marque); outline-offset: 3px; border-radius: 3px; }

.date-detail {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.date-heure {
  align-self: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Une date sans horaire ne laisse pas une cellule vide qui aurait l'air d'un
   oubli : l'élément sort du flux, la ligne n'a plus que deux items et ils se
   placent dans les deux premières colonnes.
   ⚠️ La COLONNE, elle, reste — sa largeur est celle du plus large horaire de
   TOUTE la liste. C'est voulu : les libellés restent alignés d'une ligne à
   l'autre, ce qu'un `auto` par ligne ne donnerait pas. */
.date-heure--vide { display: none; }

.dates-vide {
  margin: 0;
  padding: 1.5rem 0.25rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--filet);
}

/* ── Le pied ───────────────────────────────────────────────────────────────── */

/* Colophon Seiyar — convention de la flotte (cf. comptoir, ftae, anglemort) :
   phrase discrète, centrée, sous un filet. C'est un SITE et non une app
   installée : la règle s'applique ici dans sa forme d'origine (le cas de la
   bande de zone sûre, lui, est celui de Liive). */
.pied {
  padding: 0 var(--pad-x) calc(2rem + var(--safe-bottom));
  text-align: center;
}

.seiyar {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--text-muted) 78%, transparent);
}

.seiyar a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.seiyar a:hover,
.seiyar a:focus-visible { color: var(--marque); }

/* ── Ordinateur ────────────────────────────────────────────────────────────── */
/* Règle transverse 5 de la flotte : un site n'est fini que quand il a été
   ouvert à 1440 px. Ici la page est courte et centrée par nature — il n'y a
   donc rien à réorganiser, seulement à respirer : la colonne de date s'élargit
   pour que le quantième ne soit plus à l'étroit, et le corps monte d'un cran.
   ⚠️ En AJOUT seul, en fin de feuille : rien ne bouge sous 900 px. */
@media (min-width: 900px) {
  .date {
    grid-template-columns: 4.2rem minmax(0, 1fr) auto;
    gap: 0 1.5rem;
    padding: 1.15rem 0.5rem;
  }
  .date-num { font-size: 1.9rem; }
  .date-lieu { font-size: 1.15rem; }
  .date-detail { font-size: 0.88rem; }
  .dates-titre { font-size: 0.82rem; }
  .hero-presentation { font-size: 1.12rem; max-width: 38rem; }
}

/* Un visiteur qui a demandé moins d'animation n'en reçoit aucune. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}