/* ==================================================================
   CABS2 — feuille de style unique, direction sombre
   1. Variables        2. Base           3. Structure et grille
   4. En-tête          5. Premier écran  6. Lecteur
   7. Contenu          8. Formulaire     9. Pied
   10. Apparitions     11. Responsive    12. Accessibilité, impression

   Toutes les couleurs et les polices sont dans le bloc :root.
   Aucune couleur n'est écrite en dur ailleurs dans le fichier.
   ================================================================== */

/* ---------- 1. Variables ----------------------------------------- */

:root {
  /* Couleurs. Un seul accent, l'ambre, et il ne sert qu'à trois choses :
     les boutons, la partie lue de la forme d'onde, la piste choisie. */
  --c-bg:        #070809;   /* fond général, proche du noir */
  --c-bg-2:      #0C0E0F;   /* bande du lecteur, champs de saisie */
  --c-ink:       #F1EEE8;   /* texte principal */
  --c-dim:       #9A9C9B;   /* texte secondaire */
  --c-dim-2:     #7C807F;   /* crédits, un cran sous le texte secondaire */
  --c-line:      #212426;   /* filets */
  --c-line-up:   #5C6366;   /* filets et éléments actifs non textuels */
  --c-accent:    #FFB000;   /* ambre : accent unique */
  --c-accent-ink:#0A0700;   /* texte posé sur l'ambre */

  /* Polices. Archivo variable pour tout, Newsreader italique
     uniquement pour l'accroche et deux légendes. */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-text:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-quote:   "Newsreader", Georgia, "Times New Roman", serif;

  /* Échelle */
  --t-hero:   clamp(2.5rem, 8.6vw, 7.5rem);
  --t-h2:     clamp(1.35rem, 2.6vw, 1.85rem);
  --t-claim:  clamp(1.15rem, 2.1vw, 1.6rem);
  --t-body:   clamp(1rem, 1.05vw, 1.0625rem);
  --t-small:  0.875rem;

  /* Rythme */
  --space:  clamp(4.5rem, 9vw, 8rem);
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --wrap:   74rem;
  --col:    13rem;          /* colonne des intitulés de section */
  --measure: 60ch;
}

/* ---------- 2. Base ---------------------------------------------- */

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

/* L'attribut hidden doit l'emporter sur un display explicite, sinon les
   éléments masqués par le script restent affichés. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--c-bg);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

h1, h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

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

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3. Structure et grille -------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space);
  border-top: 1px solid var(--c-line);
}

section[id] { scroll-margin-top: 4.5rem; }


/* Intitulé de section à gauche, contenu à droite. La grille est la même
   partout : c'est elle qui tient la page, pas des cadres. */
.grid { display: grid; gap: 2.5rem; }

.section-label {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  color: var(--c-dim);
  margin: 0;
  padding-top: 0.9rem;
  border-top: 2px solid var(--c-accent);
  max-width: 12rem;
}

.grid-body > * + * { margin-top: 3rem; }

/* ---------- 4. En-tête -------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(7, 8, 9, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}

.wordmark { display: flex; align-items: baseline; gap: 0.7rem; text-decoration: none; color: inherit; }

.wordmark-name {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}

/* Le 2 de CABS2 porte l'accent : c'est toute la marque graphique */
.w2 { color: var(--c-accent); }

.wordmark-by {
  font-family: var(--f-quote);
  font-style: italic;
  font-size: var(--t-small);
  color: var(--c-dim);
}

/* ---------- Boutons ----------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--c-accent);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.btn:hover { background: transparent; color: var(--c-accent); }
.btn-small { padding: 0.65rem 1.1rem; font-size: 0.9375rem; }
.btn:disabled { background: var(--c-line-up); border-color: var(--c-line-up); color: var(--c-bg); cursor: not-allowed; }

.link-plain {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-up);
  padding-bottom: 0.2rem;
}
.link-plain:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ---------- 5. Premier écran --------------------------------------- */

/* En mobile le premier écran suit le flux du contenu. Le calage en pleine
   hauteur ne s'applique qu'à partir de la tablette, sinon un vide se creuse
   entre le titre et l'accroche. */
.hero { display: flex; }

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 7vw, 6rem);
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
}

.hero-title { font-size: var(--t-hero); letter-spacing: -0.03em; line-height: 0.92; }

.hero-title .t-1 {
  display: block;
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
}

/* Deuxième ligne plus étroite et plus claire : c'est la hiérarchie de
   l'offre, l'identité sonore d'abord, qui devient la hiérarchie du titre. */
.hero-title .t-2 {
  display: block;
  font-size: 0.6em;
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--c-dim);
  margin-top: 0.12em;
}

.hero-bottom { display: grid; gap: 2.5rem; align-items: end; }

.hero-claim {
  font-family: var(--f-quote);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-claim);
  line-height: 1.42;
  max-width: 46ch;
}
.hero-claim p { margin-bottom: 0.3em; max-width: none; }

.hero-claim-last {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 600;
  color: var(--c-ink);
  margin-top: 0.7em;
  padding-top: 0.7em;
  border-top: 2px solid var(--c-accent);
  display: inline-block;
}

.hero-actions { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }

/* ---------- 6. Lecteur --------------------------------------------- */

.player {
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.player .section-label { margin-bottom: 2.25rem; }

.deck { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.deck.is-video { align-items: start; }
.deck.is-video .deck-play { margin-top: 2.6rem; }

.deck-play {
  width: clamp(3.75rem, 8vw, 5.5rem);
  height: clamp(3.75rem, 8vw, 5.5rem);
  background: transparent;
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background-color 0.16s ease;
}
.deck-play:hover { background: rgba(255, 176, 0, 0.12); }
.deck-play:disabled { border-color: var(--c-line-up); color: var(--c-line-up); cursor: not-allowed; background: transparent; }

/* Triangle, qui devient deux barres pendant la lecture */
.deck-play .ico {
  width: 0; height: 0;
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 1rem;
  border-color: transparent transparent transparent currentColor;
  margin-left: 0.2rem;
}
.is-playing .deck-play { background: var(--c-accent); color: var(--c-accent-ink); }
.is-playing .deck-play .ico {
  width: 1rem; height: 1.15rem;
  border: 0;
  margin-left: 0;
  background: linear-gradient(to right,
    currentColor 0 0.36rem, transparent 0.36rem 0.64rem, currentColor 0.64rem 1rem);
}

.deck-main { min-width: 0; }

.deck-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.deck-title { font-size: var(--t-h2); font-stretch: 112%; }
.deck-meta { font-family: var(--f-quote); font-style: italic; color: var(--c-dim); font-size: var(--t-small); margin: 0; }

/* Forme d'onde. Les hauteurs sont posées par le script :
   calculées depuis le fichier réel en ligne, synthétiques en local. */
.wave {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: clamp(4rem, 9vw, 7.5rem);
  cursor: pointer;
  touch-action: manipulation;
}
.wave i {
  flex: 1 1 0;
  min-width: 1px;
  height: 20%;
  background: var(--c-line-up);
  transition: background-color 0.12s linear;
}
.wave i.on { background: var(--c-accent); }

/* Zone vidéo : même emprise que la forme d'onde, format 16:9.
   Elle prend sa place quand la piste sélectionnée est une vidéo. */
.deck-video { width: 100%; }
.deck-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}
.video-note {
  margin: 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--c-line-up);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--c-dim);
  max-width: none;
}
.video-note a { color: var(--c-accent); }

/* Tête de lecture, uniquement pendant la lecture */
.wave::after {
  content: "";
  position: absolute;
  top: -4px; bottom: -4px;
  left: var(--p, 0%);
  width: 1px;
  background: var(--c-ink);
  opacity: 0;
}
.is-playing .wave::after { opacity: 0.75; }
.is-unavailable .wave { cursor: default; opacity: 0.4; }

.deck-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.7rem;
  font-size: var(--t-small);
  color: var(--c-dim);
}
.deck-time { font-variant-numeric: tabular-nums; }
.deck-state { flex: 1 1 auto; text-align: center; color: var(--c-accent); line-height: 1.4; }
.is-unavailable .deck-state { text-align: left; }

.tracklist {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border-block: 1px solid var(--c-line);
}
.tracklist li { background: var(--c-bg-2); }

/* Une ligne par piste : nom à gauche, fonction à droite. La liste peut
   porter vingt pistes sans devenir un mur de tuiles. */
.track {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.15rem 1.5rem;
  background: none;
  border: 0;
  border-top: 2px solid transparent;
  padding: 1.1rem 0.25rem;
  color: var(--c-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.track:hover { color: var(--c-ink); }
.track-name { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; }
.track-kind { font-size: var(--t-small); text-align: right; }
.track-kind:empty { display: none; }
.track.is-active { color: var(--c-accent); border-top-color: var(--c-accent); }
.track.is-active .track-kind { color: var(--c-dim); }

/* ---------- 7. Contenu ---------------------------------------------- */

.lede {
  font-family: var(--f-quote);
  font-style: italic;
  font-size: var(--t-claim);
  line-height: 1.45;
  color: var(--c-ink);
  max-width: 42ch;
}

.offer h2, .member h2, .buy h2 { font-size: var(--t-h2); margin-bottom: 0.6em; }
.offer p, .member p, .buy p { color: var(--c-dim); }

.member-role {
  font-family: var(--f-quote);
  font-style: italic;
  color: var(--c-accent) !important;
  margin: -0.3em 0 0.8em;
}

.refs { margin: 0; }

.ref {
  display: grid;
  gap: 0.2rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--c-line);
}
.ref:last-child { border-bottom: 1px solid var(--c-line); }
.ref dt { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; }
.ref dd { margin: 0; color: var(--c-dim); max-width: var(--measure); }


/* Crédit secondaire sous une référence : même colonne, un cran en dessous */
.ref-credit {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-small);
  color: var(--c-dim-2);
}

.ref dd a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 0.2em; }

.refs-note { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; }

.buy-price {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--c-accent) !important;
  border-top: 1px solid var(--c-line);
  padding-top: 0.8rem;
  margin-top: 1.2rem;
}

.frame {
  border-left: 2px solid var(--c-line-up);
  padding-left: 1.2rem;
  color: var(--c-dim);
  font-size: var(--t-small);
  line-height: 1.6;
}

/* ---------- 8. Formulaire -------------------------------------------- */

.contact-intro { color: var(--c-dim); }

.form-notice {
  background: rgba(255, 176, 0, 0.1);
  border-left: 2px solid var(--c-accent);
  padding: 0.9rem 1.1rem;
  font-size: var(--t-small);
  line-height: 1.5;
  max-width: none;
}

.form { max-width: 34rem; }
.field { margin-bottom: 1.4rem; }

.field label {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-small);
  margin-bottom: 0.45rem;
}
.field .opt { color: var(--c-dim); }

.field input, .field textarea {
  width: 100%;
  font-family: var(--f-text);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line-up);
  border-radius: 0;
  padding: 0.8rem 0.9rem;
}
.field input:focus, .field textarea:focus { border-color: var(--c-accent); }
.field input:disabled, .field textarea:disabled { color: var(--c-dim); border-color: var(--c-line); }
.field textarea { resize: vertical; }

.gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.btn-submit { margin-top: 0.6rem; }

.contact-mail { font-size: var(--t-small); color: var(--c-dim); }
.contact-mail.is-todo { font-family: var(--f-quote); font-style: italic; }

/* ---------- 9. Pied --------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--c-line);
  padding-block: 3rem 4rem;
  font-size: var(--t-small);
  color: var(--c-dim);
}
.footer-name {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: 1.25rem;
  color: var(--c-ink);
  margin-bottom: 0.6rem;
}
.site-footer p { margin-bottom: 0.3em; }
.footer-legal { font-size: 0.8125rem; margin-top: 0.9rem; }

/* ---------- 10. Apparitions au défilement ------------------------------
   Posées par le script, donc invisibles seulement si le script tourne.
   Sans JavaScript, tout reste affiché.                                  */

.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}

/* ---------- 11. Responsive --------------------------------------------- */

@media (min-width: 46rem) {
  .hero { min-height: 82svh; }
  .hero-inner { justify-content: space-between; }
  .hero-bottom { grid-template-columns: 1fr auto; gap: 3rem; }
  /* s'adapte au nombre de pistes réellement publiées */
  .tracklist { grid-template-columns: repeat(2, 1fr); }
  .track { padding: 1.1rem 1.25rem; }
  .ref { grid-template-columns: 16rem 1fr; gap: 2rem; }
}

@media (min-width: 62rem) {
  .grid { grid-template-columns: var(--col) 1fr; gap: 4.5rem; }
  .section-label { position: sticky; top: 5.5rem; align-self: start; }
  .grid-body > * + * { margin-top: 3.5rem; }
}

/* Sous la tablette, le bouton passe au-dessus pour rendre toute la largeur
   à la forme d'onde, qui est l'élément à voir. */
@media (max-width: 45.99rem) {
  .deck { grid-template-columns: 1fr; gap: 1.1rem; }
  .deck-play { justify-self: start; }
}

@media (max-width: 24rem) {
  .btn { width: 100%; text-align: center; }
  .btn-small { width: auto; }
  .deck { gap: 1rem; }
}

/* ---------- 12. Page d'attente ------------------------------------------
   Affichée à la place de l'accueil tant que le site n'est pas ouvert.
   Même palette, même typographie, rien d'autre que le nom et la ligne. */

body.hold { min-height: 100svh; display: flex; }

.hold-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(3rem, 10vw, 7rem);
  padding-block: clamp(3rem, 8vw, 6rem);
}

.hold-mark {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--c-ink);
}

.hold-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 125%;
  text-transform: uppercase;
  font-size: var(--t-hero);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.hold-title span {
  display: block;
  font-size: 0.6em;
  font-stretch: 100%;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--c-dim);
  margin-top: 0.12em;
}

.hold-contact { font-size: var(--t-small); }
.hold-contact a { color: var(--c-accent); text-underline-offset: 0.25em; }

/* ---------- 13. Page jeu vidéo ------------------------------------------
   Non listée. Une adresse, un lecteur, un contact. Rien d'autre. */

.games-head { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2rem, 5vw, 3rem); }

/* Le logo, en clair sur le fond sombre. Le titre dit déjà le nom,
   l'image est donc décorative et n'est pas annoncée deux fois. */
.games-logo {
  display: block;
  height: clamp(5rem, 9vw, 7rem);
  width: auto;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* Sans paragraphe sous lui, le titre porte seul la tête de page */
.games-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 125%;
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 0;
}
.games-title span {
  display: block;
  font-size: 0.4em;
  font-stretch: 100%;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--c-dim);
  margin-top: 0.4em;
}

/* Sur cette page les intitulés de section ne sont pas en colonne :
   ils coiffent leur bloc, il leur faut donc leur propre respiration. */
body.games .section-label { margin-bottom: 1.8rem; }


/* ---------- 14. Accessibilité et impression ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; }
}

@media print {
  .site-header, .player, .form { display: none; }
  body { background: #fff; color: #000; }
  .hero-title .t-2, .ref dd, .offer p { color: #000; }
}