/* JEWLY — ANNÉE ZÉRO — Tokens CSS
   Source : Direction artistique & design system, v1.1 (18 août 2026), chapitre 13.
   Copié tel quel, sans ajout — voir instruction chapitre 0. */

:root{
  /* ---- Couleur ---- */
  --sol:        #03101F;   /* fond de page */
  --navy:       #051937;   /* surface */
  --navy-2:     #0A2A52;   /* filets, surfaces surélevées */
  --lime:       #C8F02F;   /* système : lisible, actionnable, focus */
  --rose:       #FF2D95;   /* artiste : nom, voix, photo */
  --blanc:      #FFFFFF;
  --gris:       #A9BBD4;   /* secondaire, version EN */
  --gris-2:     #8FA3BE;   /* tertiaire, mentions */

  /* ---- Typographie ---- */
  --f-titre:    "Anton", Impact, sans-serif;
  --f-texte:    "Instrument Sans", Helvetica, Arial, sans-serif;

  /* ---- Structure ---- */
  --contenu:    1180px;
  --gouttiere:  clamp(18px, 4vw, 54px);
  --filet:      2px solid var(--navy-2);
  --focus:      3px solid var(--lime);

  /* ---- Espacement ---- */
  --e-1: 4px;  --e-2: 8px;   --e-3: 12px;  --e-4: 16px;  --e-5: 24px;
  --e-6: 32px; --e-7: 48px;  --e-8: 64px;  --e-9: 96px;  --e-10: 128px;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--sol);
  color: var(--blanc);
  font-family: var(--f-texte);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.62;
  font-synthesis: none;              /* interdit les fausses graisses */
  -webkit-font-smoothing: antialiased;
}

:focus-visible{ outline: var(--focus); outline-offset: 3px; }

.wrap{ max-width: var(--contenu); margin-inline: auto; padding-inline: var(--gouttiere); }

/* ---- Les cinq styles ---- */

.t-titre{
  font-family: var(--f-titre); font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(38px, 7.4vw, 92px);
  line-height: 1;                     /* plancher accents capitales */
  letter-spacing: 0; margin: 0;
}
.t-titre--une-ligne{ line-height: .92; }

.t-section{
  font-family: var(--f-titre); font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.02; letter-spacing: .005em; margin: 0;
}

.t-surtitre{
  font-family: var(--f-texte); font-weight: 600;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .22em; line-height: 1.4;
  color: var(--lime); margin: 0;
}

.t-texte{
  font-family: var(--f-texte); font-weight: 400;
  font-size: 16.5px; line-height: 1.62;
  max-width: 64ch; margin: 0;
}

.t-donnee{
  font-family: var(--f-texte); font-weight: 500;
  font-size: 12.5px; letter-spacing: .06em;
  color: var(--gris); margin: 0;
}

/* ---- Verrouillages ---- */
.t-texte, .t-surtitre, .t-donnee{ font-stretch: 100%; }  /* jamais condensé */

/* ---- Duotones ---- */
.duo{ position: relative; overflow: hidden; }
.duo img{ display: block; width: 100%; filter: grayscale(1) contrast(1.35); }
.duo::after{ content: ""; position: absolute; inset: 0; mix-blend-mode: screen; }
.duo--700::after { background: linear-gradient(140deg, #03101F, #2E5C9E); }
.duo--zero::after{ background: linear-gradient(140deg, #03101F, #C8F02F); }
.duo--voix::after{ background: linear-gradient(140deg, #03101F, #FF2D95); }
.duo--monde img{ filter: none; }
.duo--monde::after{ display: none; }

/* ---- Mouvement ---- */
@media (prefers-reduced-motion: no-preference){
  a, button{ transition: opacity .16s ease; }
}
a:hover, button:hover{ opacity: .84; }