/* ══════════════════════════════════════════════════════════════════════════
   CRUSHENDO · NOUVELLE DIRECTION ARTISTIQUE (14/08/2026)

   Cette feuille ne fait que REPEINDRE le site. Elle se charge après site.css
   et n'en réécrit aucune règle : elle les recouvre. Le balisage, les liens,
   les scripts, le formulaire, la redirection des QR codes et la bascule du
   jour du lancement sont strictement inchangés.

   Pour revenir au style précédent : retirer la ligne <link> qui appelle ce
   fichier dans index.html. Rien d'autre à défaire.

   Ce qu'elle transpose, c'est la direction de la carte de partage Soundprint :
   Fraunces en héros, JetBrains Mono en murmures, alternance crème / noir
   profond. La scène du vinyle et les captures d'écran ne bougent pas, ce sont
   elles qui font la signature du site.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Les jetons ──────────────────────────────────────────────────────────
   Le crème d'origine tirait vers le beige. On remonte la luminosité en
   gardant une pointe de chaleur, pour ne pas tomber dans le blanc clinique. */
:root{
  --paper:#FFFEFC;
  --paper-2:#F5F1E8;
  --f-body:'Schibsted Grotesk','Inter',-apple-system,system-ui,sans-serif;
  --nuit-a:#0E0D0B;
  --nuit-b:#060606;
  --carte-nuit:#141210;
  --filet-nuit:rgba(245,230,211,.12);
}

body{
  font-size:17px;
  line-height:1.62;
}

/* ── 2. Les titres ──────────────────────────────────────────────────────────
   Un cran plus gras et plus serré qu'avant. Le réglage optique bas calme les
   terminaisons trop tranchantes de Fraunces : il vient du héros, on l'étend
   à tous les titres pour que la page parle d'une seule voix. */
.display,h1,h2{
  font-weight:600;
  letter-spacing:-.022em;
  line-height:.95;
  text-wrap:balance;
  font-optical-sizing:none;
  font-variation-settings:'opsz' 38;
}
h3{
  font-weight:600;
  letter-spacing:-.018em;
  line-height:1.12;
  font-optical-sizing:none;
  font-variation-settings:'opsz' 38;
}

/* ── 3. Les murmures ────────────────────────────────────────────────────────
   Le point rond devient le point médian de la carte de partage, et la chasse
   s'ouvre : c'est ce détail qui change le plus la sensation de la page. */
.kicker{
  font-size:11.5px;
  letter-spacing:.32em;
  gap:11px;
}
.kicker::before{
  content:"·";
  width:auto; height:auto;
  border-radius:0;
  background:none;
  color:var(--crush);
  font-size:20px;
  line-height:0;
}

/* ── 4. Les boutons ─────────────────────────────────────────────────────────
   Plus hauts, plus posés. Le survol soulève légèrement. */
.btn{
  height:54px;
  padding:0 30px;
  font-size:16px;
  font-weight:500;
  transition:background .15s, transform .15s, border-color .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn.sm{height:40px; padding:0 20px; font-size:14px}
.btn.lg{height:58px; font-size:17px}
@media (prefers-reduced-motion:reduce){
  .btn:hover{transform:none}
}

/* ── 5. La respiration ──────────────────────────────────────────────────── */
section{padding:88px 0}
@media (min-width:720px){ section{padding:118px 0} }

/* ── 6. L'en-tête ───────────────────────────────────────────────────────────
   Le fond suit le nouveau crème, sinon une barre beige flotte au-dessus d'une
   page blanche. */
.site-header{
  background:rgba(255,254,252,.86);
  border-bottom-color:rgba(26,22,18,.10);
}
.site-header .row{height:72px}
.site-header nav a{
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.site-header nav a:hover{color:var(--crush)}
.brand .wordmark{font-weight:600; font-size:22px}
.brand .vinyl-mark{width:32px; height:32px}

/* ── 7. Le héros ────────────────────────────────────────────────────────────
   Presque inchangé : c'était déjà la bonne page. On élargit juste l'accroche
   et on aère la date. */
.hero .lede{font-size:19px; max-width:34ch; margin-top:24px}
.hero .cta-row{margin-top:34px; gap:22px}
.cd-date{
  margin-top:32px;
  font-family:var(--f-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-44);
}
.launch-date{
  font-weight:500;
  font-size:clamp(21px,2.3vw,26px);
  margin-top:6px;
}
.hero-link{
  font-family:var(--f-body);
  font-size:16px;
}

/* ── 8. Le concept passe en nuit ────────────────────────────────────────────
   C'est le seul vrai changement de rythme de la page : la bande des trois
   piliers était crème, elle devient noire. Le site alterne alors clair, nuit,
   clair, nuit, comme les deux faces de la carte de partage. */
.pillars{
  background:linear-gradient(180deg,var(--nuit-a),var(--nuit-b));
  color:var(--cream);
}
.pillars h2,.pillars h2 .eyebrow{color:var(--cream)}
.pillars .lede{color:rgba(245,230,211,.64)}
.pillars .kicker{color:rgba(245,230,211,.62)}
.pillar{
  background:var(--carte-nuit);
  border:1px solid var(--filet-nuit);
  border-radius:var(--r-lg);
  padding:34px 30px;
}
.pillar h3{color:var(--cream); font-size:27px}
.pillar p{color:rgba(245,230,211,.62); font-size:15.5px; line-height:1.6}

/* ── 9. Les quatre étapes ───────────────────────────────────────────────── */
.step h3{font-size:21px}
.step p{font-size:15px; line-height:1.58}

/* ── 10. La bande festival ──────────────────────────────────────────────────
   Elle était déjà noire. On aligne juste ses filets et ses arrondis sur ceux
   des piliers, pour que les deux nuits se ressemblent. */
.festival{background:linear-gradient(180deg,var(--nuit-a),var(--nuit-b))}
.festival p{font-size:17.5px; line-height:1.6}
.poster{border-radius:var(--r-lg)}

/* ── 11. Le lancement ───────────────────────────────────────────────────────
   Le dégradé d'origine tirait vers le beige soutenu. On le calme pour rester
   dans la même lumière que le reste. */
.launch{
  background:radial-gradient(120% 90% at 50% 0%,#FFFDF8 0%,var(--paper-2) 62%,var(--paper-2) 100%);
  border-top-color:rgba(26,22,18,.10);
}

/* Le chronomètre est masqué tant qu'aucune date ferme n'est annoncée : il
   descendait encore vers le 17 août, ce qui contredisait « fin août ». Le
   balisage et son script restent en place, intacts, prêts à resservir le jour
   où une date sera fixée. Il suffira de retirer ces deux lignes. */
.launch .cd{display:none}

/* ── 12. Le pied de page ────────────────────────────────────────────────── */
.footer{background:linear-gradient(180deg,var(--nuit-a),var(--nuit-b))}
.footer .brand-block .wordmark{font-weight:600}

/* ── 13. Le focus ───────────────────────────────────────────────────────────
   Visible partout, y compris sur les bandes noires. */
.btn:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible{
  outline:3px solid rgba(230,57,70,.34);
  outline-offset:2px;
}