/* Fonts hub (Anton/Inter Tight/JetBrains/Source Serif) : chargées par le HEAD du hub
   uniquement (headExtra) — plus d'@import ici pour ne pas alourdir les 294 fiches,
   qui utilisent les fonts self-hosted Cabinet Grotesk + General Sans. */

/* ============================================================
   BOUYON — FICHES ARTISTE · SKIN « NÉON LAGON » (maquette B v3,
   validée Terry 2026-07-10 — remplace la direction « RIDDIM »)
   ------------------------------------------------------------
   Ambiance chromatique scroll-linked : la teinte de fond (--amb-h)
   voyage à la descente (bleu nuit → lagon → violet → rouge nuit →
   bleu), pilotée par bouyon-fiche-ambient.js. Les surfaces sont
   translucides et SUIVENT l'ambiance. Chaque artiste garde sa
   couleur signature --sig-h (accents, barre de progression).
   Le corail reste RÉSERVÉ aux boutons de conversion TIITII NBA.

   Display = Cabinet Grotesk · corps = General Sans (self-hosted).
   L'@import Google Fonts ci-dessus ne sert plus que le HUB
   (.artist-index) — les fiches ne référencent plus ces familles.
   ============================================================ */

/* ── Tokens globaux (neutres, indépendants de la teinte) ────── */
:root {
  /* Coral = conversion TIITII NBA UNIQUEMENT (endcard + retour promo). */
  --coral: #ff6b6b;
  --coral-soft: rgba(255, 107, 107, 0.85);
  --coral-ink: #2a0d0d;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 56px);
  --r: 16px;
  --r-sm: 13px;
  /* easing doux, jamais élastique/bounce (anti-IA Impeccable) */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Repli neutre quand --sig-h est absent (hub, header générique). */
  --bg: #0c0e12;
  --bg-2: #12151b;
  --text: #f2f3f5;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
::selection { background: var(--sig, #0887f8); color: #06080c; }

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* Helpers conservés (compat) */
.display { font-family: "Anton", "Oswald", "Impact", sans-serif; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.96; }
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 11px; }

/* ============================================================
   SYSTÈME DE COULEUR PAR ARTISTE — le cœur de RIDDIM
   ------------------------------------------------------------
   PUNCH UNIFORME : S/L calibrés pour que TOUTE teinte (jaune ~55,
   vert ~120, cyan ~190, bleu ~220) rende un accent vif et lisible
   sur fond sombre. Aucune fiche ne paraît plus terne qu'une autre.
   La page entière hérite de ces variables via .artist-page[style=--sig-h].
   ============================================================ */
/* Fonts fonderie SELF-HOSTED (CSP font-src 'self') — skin « Néon Lagon »
   des fiches (maquette B v3, Terry 2026-07-10). Le hub ne référence pas ces
   familles : les woff2 ne sont téléchargés que sur les fiches. */
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/assets/fonts/cabinet-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/general-sans.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

.artist-page {
  /* Accent signature PAR artiste (formule maquette : 78% 62%). */
  --sig: hsl(var(--sig-h) 78% 62%);
  --sig-deep: hsl(var(--sig-h) 70% 48%);
  --sig-soft: hsl(var(--sig-h) 85% 74%);
  --sig-glass: hsl(var(--sig-h) 60% 60% / 0.12);
  --sig-line: hsl(var(--sig-h) 55% 55% / 0.4);
  /* Accent utilitaire lagon (liens, eyebrows) — jamais sur un bouton d'action. */
  --aqua: #38e1d4;

  /* Ambiance chromatique (teinte pilotée au scroll par bouyon-fiche-ambient.js :
     bleu nuit 222 → lagon 188 → violet 264 → rouge nuit 336 → bleu 210).
     Sans JS / reduced-motion : bleu nuit statique. */
  --amb-h: 222;
  --amb-h2: 200;
  --amb-s: 52%;

  /* Fond + surfaces translucides qui SUIVENT l'ambiance (jamais #000). */
  --ink: hsl(var(--amb-h) 45% 7%);
  --ink-2: hsl(var(--amb-h) 30% 16% / 0.55);
  --ink-3: hsl(var(--amb-h) 30% 13% / 0.68);
  --ink-card: hsl(var(--amb-h) 34% 11% / 0.68);
  --hair: hsl(var(--amb-h) 38% 22% / 0.55);
  --hair-strong: hsl(var(--amb-h) 38% 22% / 0.85);

  /* Texte Néon Lagon — contrastes ≥ 4.5:1 sur toutes les surfaces (L ≤ 17%). */
  --txt: #dee6f5;
  --txt-mute: #b6c4dd;
  --txt-faint: #9aabc9;

  background: var(--ink);
  color: var(--txt);
  font-family: "General Sans", "Inter Tight", system-ui, sans-serif;
  line-height: 1.6;
}
/* Le contenu passe au-dessus de la couche d'ambiance (z-index 0). */
.artist-page > * { position: relative; z-index: 1; }
/* Couche d'ambiance fixe : z-index 0 = au-dessus du fond opaque de la page,
   sous le contenu. (Un z-index négatif serait peint sous les fonds opaques
   de html/body, donc invisible ici.) */
.artist-page .artist-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% -12%, hsl(var(--amb-h) var(--amb-s) 17% / 0.6), transparent 58%),
    radial-gradient(150% 100% at 50% 118%, hsl(var(--amb-h2) var(--amb-s) 15% / 0.55), transparent 60%),
    linear-gradient(180deg, hsl(var(--amb-h) var(--amb-s) 9%), hsl(var(--amb-h2) var(--amb-s) 7%));
}

/* Repli si --sig-h absent (sécurité) : bleu de marque. */
.artist-page:not([style*="--sig-h"]) { --sig-h: 210; }

/* ============================================================
   DÉCOR DE FOND — le portrait de l'artiste en très grand
   (direction choisie par Terry le 2026-08-14, parmi quatre montées sur la
   vraie fiche : halos de club, portrait, sérigraphie, ondes)

   Chaque fiche a un fond qui n'appartient qu'à elle : sa propre pochette,
   floutée et saturée, qui dérive très lentement. Les 46 fiches sans portrait
   ne posent pas `--cover` et retombent sur le seul fond d'ambiance — un fond
   uni dans la teinte de l'artiste, jamais un trou.
   ============================================================ */
.artist-page--tabs .artist-ambient::before {
  content: "";
  position: absolute; inset: -8%;
  background-image: var(--cover, none);
  background-size: cover;
  background-position: 50% 22%;
  filter: blur(30px) saturate(1.8) brightness(.85) contrast(1.1);
  transform: scale(1.06);
  animation: fond-portrait 50s var(--ease) infinite alternate;
}
/* Le voile : c'est lui qui rend le texte lisible par-dessus une photo. Il
   descend du transparent vers l'opaque, donc le haut garde l'image et le bas
   protège la lecture. */
.artist-page--tabs .artist-ambient::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 22% 18%, hsl(var(--sig-h) 90% 55% / .34), transparent 62%),
    linear-gradient(180deg, hsl(var(--amb-h) 45% 6% / .34), hsl(var(--amb-h) 45% 5% / .72));
}
@keyframes fond-portrait {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.16) translate3d(-2%, -3%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .artist-page--tabs .artist-ambient::before { animation: none; }
}

/* ── Containers ─────────────────────────────────────────────── */
.artist-index, .artist-page { width: 100%; margin: 0; padding: 0; }

/* labels « kicker » réutilisables (eyebrow de section). Hub = version mono. */
.artist-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}
/* Fiches (Néon Lagon) : eyebrow lagon en General Sans, 13px. */
.artist-page .artist-eyebrow {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--aqua);
}

/* ============================================================
   SKIP LINK (a11y — PRÉSERVÉ)
   ============================================================ */
.skip-link {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden; z-index: -1;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  position: fixed; left: 12px; top: 12px; z-index: 1000;
  width: auto; height: auto; padding: 8px 17px; overflow: visible;
  border-radius: 8px;
  background: var(--sig, #0887f8); color: #06080c;
  outline: 2px solid var(--txt, #fff); outline-offset: 2px;
}

/* Focus visible global — clavier (a11y). */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--sig-soft, #6fc0ff);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   BREADCRUMB + SÉLECTEUR DE LANGUE (markup FIXE — comportement préservé)
   Skin Néon Lagon compact : 13px sentence case, pilules translucides
   d'ambiance. Corail RETIRÉ du retour « TIITII NBA » (réservé à
   l'action d'écoute) → pilule aqua discrète.
   ============================================================ */
.artist-breadcrumb {
  /* Au-dessus de la couche d'ambiance des fiches (fixed, z-index 0). */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 6px;
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin: 0 auto;
  padding: 8px 0 0;
  color: var(--txt-faint, #9aabc9);
  font-family: "General Sans", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  /* Retrait horizontal d'une étape : les liens le portent, l'étape courante
     d'un fil en liste aussi (sans lui, le chevron qui la précède la colle). */
  --fil-retrait: 5px;
}
.artist-breadcrumb a {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--fil-retrait);
  color: var(--txt-faint, #9aabc9);
  transition: color 0.2s var(--ease);
}
.artist-breadcrumb a:hover,
.artist-breadcrumb a:focus-visible { color: var(--aqua, #38e1d4); outline: none; }
.artist-breadcrumb a:focus-visible {
  outline: 2px solid var(--aqua, #38e1d4); outline-offset: 2px; border-radius: 4px;
}
.artist-breadcrumb [aria-current="page"] { color: var(--txt, #dee6f5); font-weight: 600; }
/* Séparateurs › et fil courant UNIQUEMENT (enfants directs) : un `span`
   descendant matcherait aussi le coachmark .bouyon-mode-hint injecté dans
   le toggle, et sa spécificité (0,1,1) écraserait les couleurs du toast. */
.artist-breadcrumb > span:not(.artist-mode-toggle):not(.artist-breadcrumb__lang) {
  margin: 0 3px;
  color: var(--txt-faint, #9aabc9);
}

/* Fil en liste ordonnée (Actus : nav > ol > li, le motif WAI-ARIA du fil
   d'Ariane). Les règles ci-dessus ne rangent que des <a>/<span> enfants
   directs : sans ce bloc, l'<ol> gardait les styles du navigateur, numéros
   « 1. 2. 3. », retrait et une étape par ligne (vu par Terry le 2026-09-22,
   présent depuis la création des Actus). Aucune valeur nouvelle : les écarts
   reprennent le gap de la barre, le chevron hérite de sa couleur. La liste
   prend la place libre : l'anneau du jeu reste au bout de la même rangée. */
.artist-breadcrumb ol {
  display: flex;
  flex: 1;
  align-items: center;
  gap: inherit;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.artist-breadcrumb li {
  display: flex;
  align-items: center;
  gap: inherit;
  flex: none;
}
/* Chevron entre deux étapes, tu pour les lecteurs d'écran (texte de
   remplacement vide) ; un navigateur qui ignore cette syntaxe garde le premier. */
.artist-breadcrumb li:not(:last-child)::after {
  content: "›";
  content: "›" / "";
}
/* L'étape courante (le titre, repris en H1 juste dessous) se termine en « … »
   plutôt que d'ouvrir une deuxième ligne sur mobile. */
.artist-breadcrumb li[aria-current="page"] {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  padding-inline: var(--fil-retrait);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Sélecteur FR/EN (drapeaux) — comportement & a11y conservés. */
.artist-breadcrumb__lang {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.artist-breadcrumb__lang span { margin: 0; }
.artist-lang-current,
.artist-lang-alt {
  display: inline-flex;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid hsl(var(--amb-h, 222) 38% 26% / 0.9);
}
.artist-lang-current svg,
.artist-lang-alt svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.artist-lang-current { box-shadow: 0 0 0 2px rgba(56, 225, 212, 0.55); }
.artist-lang-alt { opacity: 0.5; transition: opacity 0.2s var(--ease); }
.artist-lang-alt:hover,
.artist-lang-alt:focus-visible { opacity: 1; outline: none; }

/* Boutons « Retour » (TIITII NBA + Hub Bouyon) : pilules fines translucides
   qui suivent l'ambiance (--amb-h posé sur :root par bouyon-fiche-ambient.js ;
   repli 222 sans JS / sur le hub). */
.artist-breadcrumb__back {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 17px !important;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid hsl(var(--amb-h, 222) 38% 22% / 0.85);
  background: hsl(var(--amb-h, 222) 34% 11% / 0.68);
  color: var(--txt, #dee6f5) !important;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.artist-breadcrumb__back:hover,
.artist-breadcrumb__back:focus-visible {
  color: var(--aqua, #38e1d4) !important;
  border-color: rgba(56, 225, 212, 0.5);
}

/* « Retour au site TIITII NBA » (href="/") : signalé en aqua (outline),
   PAS en corail — le corail reste réservé aux boutons d'écoute. */
.artist-breadcrumb__back[href="/"] {
  border-color: rgba(56, 225, 212, 0.45);
  color: var(--aqua, #38e1d4) !important;
}
.artist-breadcrumb__back[href="/"]:hover,
.artist-breadcrumb__back[href="/"]:focus-visible {
  border-color: var(--aqua, #38e1d4);
  color: var(--aqua, #38e1d4) !important;
}
.artist-breadcrumb__back-arrow {
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
}

/* Déclencheur recherche (bouyon-search.js le monte DANS le breadcrumb sur
   fiches + hub artistes) : même pilule fine que le reste de la rangée.
   Les chapitres (topbar) gardent le style de bouyon-search.css. */
.artist-breadcrumb .bouyon-search-trigger {
  min-height: 38px;
  padding: 8px 17px;
  border-radius: 999px;
  border: 1px solid hsl(var(--amb-h, 222) 38% 22% / 0.85);
  background: hsl(var(--amb-h, 222) 34% 11% / 0.68);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--txt-faint, #9aabc9);
}
.artist-breadcrumb .bouyon-search-trigger:hover,
.artist-breadcrumb .bouyon-search-trigger:focus-visible {
  color: var(--aqua, #38e1d4);
  border-color: rgba(56, 225, 212, 0.5);
  background: hsl(var(--amb-h, 222) 34% 11% / 0.68);
}

/* Mobile : l'en-tête tient en 2 rangées fines — le fil textuel
   « Artistes › Nom » (redondant avec les pilules retour + le
   BreadcrumbList JSON-LD) est masqué visuellement ≤ 560px. */
@media (max-width: 560px) {
  .artist-breadcrumb > a:not(.artist-breadcrumb__back),
  .artist-breadcrumb > span:not(.artist-mode-toggle):not(.artist-breadcrumb__lang) { display: none; }
}

/* ============================================================
   HÉROS « réponse d'abord » (maquette B v3) — 100 % typographique.
   Eyebrow lagon → nom géant Cabinet Grotesk → kicker rôle · origine ·
   période → summary en réponse directe → pilules role_tags.
   ============================================================ */
.artist-hero {
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin: 0 auto;
  padding: clamp(26px, 7vw, 80px) 0 clamp(26px, 4vw, 35px);
}
.artist-hero h1 {
  margin: 8px 0 5px;
  font-family: "Cabinet Grotesk", "General Sans", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 13vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--txt);
  overflow-wrap: anywhere;
}
.artist-hero__kicker {
  margin: 0 0 17px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--txt-faint);
}
.artist-hero__answer {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(18px, 4.6vw, 21px);
  line-height: 1.55;
  color: var(--txt);
}

/* Pastille playlist du premier écran (2026-07-31).
   Le carrousel playlist tombe à ~1,87 écran de scroll sur mobile et ne recevait
   aucun clic. Cette pastille tient sur une ligne sous le kicker, donc dans le
   premier écran. Discrète par défaut, corail sur l'action seulement. */
.fiche-plpill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -8px 0 17px;
  /* 9px vertical : porte la cible tactile à 45px de haut (seuil 44px). */
  padding: 8px 8px 8px 17px;
  max-width: 100%;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--ink-card);
  color: var(--txt-mute);
  font-size: 13.5px;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
/* Variante avec la bande de pochettes : le mouvement accroche l'œil dans le
   premier écran, là où le grand carrousel (1,7 écran) n'est jamais atteint. */
.fiche-plpill--strip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: min(100%, 360px);
  padding: 8px 8px 8px 8px;
  border-radius: 15px;
  border-color: var(--sig-line);
}
.fiche-plpill__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fiche-plpill--strip .fiche-plpill__txt {
  flex: 1;
}
.fiche-plpill__strip {
  display: flex;
  gap: 5px;
  width: max-content;
  animation: plpill-slide 26s linear infinite;
}
/* Le masque évite la coupe nette : la bande semble sortir du cadre. */
.fiche-plpill--strip {
  overflow: hidden;
}
.fiche-plpill__strip img {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  object-fit: cover;
  flex: none;
}
.fiche-plpill:hover .fiche-plpill__strip {
  animation-play-state: paused;
}
@keyframes plpill-slide {
  to {
    transform: translateX(calc(-50% - 2.5px));
  }
}
.fiche-plpill__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sig);
  box-shadow: 0 0 0 0 var(--sig-glass);
  animation: fiche-plpill-pulse 2.4s var(--ease) infinite;
}
.fiche-plpill__txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fiche-plpill__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--coral);
  color: var(--coral-ink);
  font-weight: 600;
  font-size: 12.5px;
}
.fiche-plpill:hover,
.fiche-plpill:focus-visible {
  border-color: var(--sig-line);
  background: var(--sig-glass);
}
.fiche-plpill:focus-visible {
  outline: 2px solid var(--sig);
  outline-offset: 2px;
}
@keyframes fiche-plpill-pulse {
  0%,
  100% { box-shadow: 0 0 0 0 var(--sig-glass); }
  50% { box-shadow: 0 0 0 5px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  /* On coupe le mouvement, pas le contenu : les pochettes restent visibles,
     simplement figées (cf leçon du 2026-07-15 sur le cadeau playlist). */
  .fiche-plpill__dot { animation: none; }
  .fiche-plpill__strip { animation: none; }
}

/* Tags (role_tags) — pilules discrètes sur surface d'ambiance. */
.artist-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 17px;
}
.artist-tags span {
  padding: 7px 8px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  color: var(--txt-faint);
  background: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

/* ============================================================
   BANDE IDENTITÉ — .artist-strip / .artist-facts (5 cellules)
   Rôle · Origine · Période · Genres · Territoires.
   Cartes vivantes (valeur en couleur signature) ; 5→2→1 col.
   ============================================================ */
.artist-strip {
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin: 0 auto;
  padding: 0 0 clamp(17px, 3vw, 26px);
}
.artist-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.artist-facts div {
  padding: 17px;
  border: 1px solid var(--hair-strong);
  border-radius: 16px;
  background: var(--ink-card);
  display: grid;
  gap: 6px;
  align-content: start;
}
.artist-facts dt {
  margin: 0;
  color: var(--sig);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.artist-facts dd {
  margin: 0;
  color: var(--txt);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

/* ============================================================
   PLATEFORMES (Écouter & suivre) — .artist-platforms / .artist-platform
   Spotify = vert de marque (priorité écoute) ; reste = RIDDIM. ≥44px.
   ============================================================ */
.artist-platforms__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.artist-platform {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  padding: 0 17px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  color: var(--txt);
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  background: var(--ink-2);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.artist-platform::after {
  content: "↗";
  font-size: 14px;
  color: var(--txt-faint);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.artist-platform:hover,
.artist-platform:active {
  border-color: var(--aqua);
  transform: translateY(-1px);
}
.artist-platform:hover::after,
.artist-platform:active::after { color: var(--aqua); transform: translateX(3px); }
.artist-platform:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }

/* Spotify en vert de marque, bien visible (priorité écoute). */
.artist-platform[href*="open.spotify.com"] {
  background: #1db954;
  border-color: #1db954;
  color: #06120a;
  font-weight: 700;
}
.artist-platform[href*="open.spotify.com"]::after { color: #06120a; }
.artist-platform[href*="open.spotify.com"]:hover,
.artist-platform[href*="open.spotify.com"]:active {
  background: #1ed760;
  border-color: #1ed760;
  color: #06120a;
}
.artist-platform[href*="open.spotify.com"]:hover::after,
.artist-platform[href*="open.spotify.com"]:active::after { color: #06120a; }

/* ============================================================
   SECTION SHELL — .artist-section + > h2 (éditorial maquette :
   titres Cabinet Grotesk 800, sentence case, rythme aéré).
   ============================================================ */
.artist-section {
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin: 0 auto;
  padding: clamp(35px, 6vw, 53px) 0 8px;
}
.artist-section > h2 {
  margin: 0 0 17px;
  font-family: "Cabinet Grotesk", "General Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.4;
  color: var(--txt);
}
/* Ligne d'appui sous un H2 de section : un fait, pas du jargon de navigation. */
.artist-section__note {
  margin: -8px 0 17px;
  font-size: 14.5px;
  color: var(--txt-faint, #9aabc9);
}

/* ============================================================
   « POURQUOI CETTE FICHE COMPTE » — .artist-section--why
   Lead éditorial sur surface d'ambiance, règle 2px lagon (utilitaire).
   ============================================================ */
.artist-section--why p {
  margin: 0;
  max-width: 64ch;
  padding: 26px 17px;
  border: 1px solid var(--hair-strong);
  border-left: 2px solid var(--aqua);
  border-radius: 16px;
  background: var(--ink-card);
  font-size: 17px;
  line-height: 1.65;
  color: var(--txt);
}

/* ============================================================
   CORPS NARRATIF — .artist-section--body.bouyon-chapter
   Stylé par bouyon-chapter.css : on N'INTERVIENT PAS en profondeur,
   on assure juste l'intégration du conteneur (largeur, respiration).
   Ne PAS toucher .bouyon-chapter__h2 / __p.
   ============================================================ */
.artist-section--body.bouyon-chapter {
  /* conteneur seulement — couleur/typo internes restent à l'autre fichier. */
  background: transparent;
}

/* ============================================================
   TIMELINE — rangées éditoriales « fait » (maquette : border-top,
   année en tag signature, texte en clair).
   ============================================================ */
.artist-timeline {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.artist-timeline li {
  padding: 17px 0;
  border-top: 1px solid var(--hair-strong);
}
.artist-timeline time {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sig);
}
.artist-timeline p {
  margin: 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--txt);
}
.artist-timeline p b { color: var(--txt); font-weight: 700; }

/* ============================================================
   FICHE À ONGLETS — .artist-page--tabs (choix Terry 2026-08-14)
   La fiche tient dans UN écran : en-tête et barre d'appels fixes, seul le
   panneau change. Remplace la pile de 14,8 écrans dont le 2e CTA tombait à
   14,67 écrans, jamais atteint (scroll moyen des fiches : 0 %).

   ⚠️ Le masquage des panneaux est conditionné à `.is-tabbed`, posée par
   bouyon-fiche-tabs.js. Sans JS, aucune de ces règles ne s'applique : la
   fiche reste la page complète, toutes sections dépliées. Ne JAMAIS masquer
   un panneau hors de ce préfixe — ce serait rendre du contenu invisible aux
   robots et aux navigateurs sans JS.
   ============================================================ */
/* Le verrou de hauteur vit sur la RACINE, pas sur <main> : le fil d'Ariane est
   au-dessus de <main>, donc un main à 100dvh rendait la page plus haute que
   l'écran de la hauteur exacte du fil d'Ariane — un scroll résiduel de quelques
   dizaines de pixels, précisément ce que la disposition doit supprimer.
   100dvh et pas 100vh : sur mobile, la barre d'URL rétractable fait mentir vh
   et coupe la barre d'appels. */
html.is-tabbed,
html.is-tabbed body { height: 100dvh; overflow: hidden; }
html.is-tabbed body { display: flex; flex-direction: column; margin: 0; }
html.is-tabbed .artist-breadcrumb { flex: 0 0 auto; }
.is-tabbed .artist-page--tabs {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* référence de placement de la barre d'appels, en absolute juste en dessous */
  position: relative;
}

/* ── En-tête : portrait + identité + trois chiffres ── */
.artist-top {
  display: grid;
  grid-template-columns: clamp(96px, 13vw, 168px) 1fr;
  gap: clamp(17px, 2.4vw, 26px);
  align-items: end;
  padding: clamp(8px, 2vw, 26px) var(--pad) 0;
}
.artist-top__pf {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--hair-strong);
  background: linear-gradient(160deg, hsl(var(--sig-h) 55% 22%), hsl(var(--sig-h) 45% 8%));
}
.artist-top__pf img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;
  filter: grayscale(.2) contrast(1.12);
}
/* Sans portrait : le nom en plaque typographique, dans la teinte de l'artiste.
   Parti pris graphique — jamais un cadre vide (46 fiches sur 147). */
.artist-top__plate {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 8%;
  font-family: 'Cabinet Grotesk', 'Anton', sans-serif;
  font-size: clamp(15px, 2.6vw, 30px); font-weight: 800;
  line-height: .92; text-transform: uppercase; text-align: center;
  color: transparent; -webkit-text-stroke: 1px hsl(var(--sig-h) 80% 72% / .6);
}
.artist-top__k {
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: hsl(var(--sig-h) 85% 74%); margin: 0 0 6px;
}
.artist-top__h {
  font-family: 'Cabinet Grotesk', 'Anton', sans-serif; font-weight: 800;
  font-size: clamp(34px, 6vw, 74px);
  line-height: .98; text-transform: uppercase; margin: 0;
}
.artist-top__kicker { color: var(--soft); font-size: 15px; margin: 5px 0 0; }
/* Plan lecture 24/08 : la réponse au premier écran. Trois lignes max — le CSS
   coupe, l'onglet « La bio » continue (toboggan de Sugarman). */
.artist-top__lede {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.artist-top__facts { display: flex; gap: clamp(17px, 2.6vw, 26px); flex-wrap: wrap; margin-top: 8px; }
.artist-top__facts b {
  display: block; font-family: 'Cabinet Grotesk', 'Anton', sans-serif;
  font-weight: 800; font-size: 23px; line-height: 1; color: hsl(var(--sig-h) 80% 66%);
}
.artist-top__facts span {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .46);
}

/* ── La barre d'onglets ──
   Masquée tant que le script n'a pas pris la main : des boutons qui n'ouvrent
   rien seraient pires que pas de boutons du tout. */
.artist-tabs { display: none; }
.is-tabbed .artist-tabs {
  display: flex;
  /* La fiche en mode onglets est une colonne flex a hauteur d'ecran : sans
     ceci, la barre est le seul enfant compressible et se fait ecraser a 19 px
     (padding 17 + 2 px de contenu) des que la fenetre est basse — onglets
     coupes, constat Terry du 24/08 sur les captures. Mesure : 19 px a 800 px
     de haut, 24 px sur mobile 812, 67 px une fois incompressible. */
  flex-shrink: 0;
  gap: 3px;
  padding: clamp(8px, 2vw, 17px) var(--pad) 0;
  border-bottom: 1px solid var(--hair);
  overflow-x: auto;
  scrollbar-width: none;
  /* référence de position de l'indicateur glissant */
  position: relative;
}
.is-tabbed .artist-tabs::-webkit-scrollbar { display: none; }
.artist-tabs button {
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  padding: 8px 17px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s var(--ease), text-shadow .25s var(--ease), transform .25s var(--ease);
  /* Entrée en cascade au chargement : --tab-i porte le rang du bouton, posé par
     le template. Ce qui bouge est ce qu'on regarde — une barre qui s'installe
     désigne l'endroit où l'on choisit. */
  animation: artist-tab-in .5s var(--ease) both;
  animation-delay: calc(var(--tab-i, 0) * 55ms);
}
@keyframes artist-tab-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
.artist-tabs button:hover {
  color: var(--text);
  text-shadow: 0 0 18px hsl(var(--sig-h) 85% 70% / .55);
}
/* L'onglet ouvert : blanc franc + halo dans la teinte de l'artiste. */
.artist-tabs button[aria-selected="true"] {
  color: #fff;
  text-shadow: 0 0 22px hsl(var(--sig-h) 90% 72% / .75);
}
.artist-tabs button:focus-visible { outline: 2px solid hsl(var(--sig-h) 85% 70%); outline-offset: -3px; }

/* L'indicateur GLISSE d'un onglet à l'autre au lieu de sauter : c'est le
   mouvement qui relie les deux positions, donc l'œil suit au lieu de rechercher.
   Sa position vient du script (largeur + décalage réels du bouton actif). */
.artist-tabs__glider {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: var(--glider-w, 0);
  transform: translateX(var(--glider-x, 0));
  background: linear-gradient(90deg,
    hsl(var(--sig-h) 85% 66%), hsl(var(--sig-h) 95% 78%), hsl(var(--sig-h) 85% 66%));
  border-radius: 2px;
  box-shadow: 0 0 16px 1px hsl(var(--sig-h) 90% 65% / .8);
  transition: transform .42s var(--ease), width .42s var(--ease);
  pointer-events: none;
  opacity: 0;
}
.artist-tabs__glider.is-placed { opacity: 1; }

/* Le cadeau annoncé sur l'onglet d'accueil : ce qu'on gagne au bout du quiz,
   visible avant même de le commencer. */
.artist-tabs__ico {
  display: inline-block;
  margin-right: 6px;
  font-size: 13px;
  animation: artist-tab-ico 2.6s var(--ease) infinite;
}
@keyframes artist-tab-ico {
  0%, 88%, 100% { transform: none; }
  92% { transform: rotate(-11deg) scale(1.14); }
  96% { transform: rotate(9deg) scale(1.14); }
}

/* ── ONGLETS « SETLIST » (forme choisie par Terry le 2026-08-14, parmi trois
   montées sur la vraie fiche : pavé plein, typo creuse, setlist) ──
   Chaque onglet porte son rang, comme une piste sur une pochette. Le numéro est
   dans la teinte de l'artiste et grossit sur l'onglet ouvert : le repère n'est
   plus une ligne sous un mot, c'est un chiffre. Une barre de texte qui s'allume
   reste le motif de tout le monde — donc neutre par construction. */
.artist-tabs { counter-reset: tab-n; gap: 0; align-items: stretch; }
.artist-tabs button {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 17px 17px;
  border-left: 1px solid var(--hair);
}
.artist-tabs button:first-of-type { border-left: 0; }
.artist-tabs button::before {
  content: "0" counter(tab-n);
  counter-increment: tab-n;
  font-family: 'Cabinet Grotesk', 'Anton', sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  /* Mesuré : à 62 % de clarté et 55 % d'opacité, le numéro tombait à 2,59 de
     contraste sur le panneau — sous le minimum de 3 pour du gras de 20 px. */
  color: hsl(var(--sig-h) 85% 74% / .88);
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.artist-tabs button[aria-selected="true"]::before {
  color: hsl(var(--sig-h) 92% 70%);
  transform: scale(1.35);
  text-shadow: 0 0 20px hsl(var(--sig-h) 90% 62% / .9);
}
.artist-tabs button[aria-selected="true"] { background: hsl(var(--sig-h) 70% 50% / .12); }
.artist-tabs__glider { height: 3px; }
/* Le libellé court des onglets ne sert que sur écran étroit. */
.artist-tabs__s { display: none; }

/* ============================================================
   REPÈRES DE LECTURE DANS LE TEXTE
   Les titres d'œuvres et les années prennent la couleur de l'artiste : l'œil
   saute de repère en repère au lieu de tout lire, et un paragraphe cesse d'être
   un bloc uniforme. Deux marques, pas trois — surligner partout revient à ne
   rien surligner.
   Pas de dégradé sur le texte ni de halo lourd : ce sont des motifs que le
   contrôle Impeccable rejette, et qui rendent la lecture PLUS fatigante.
   ============================================================ */
.k-oeuvre,
.k-annee {
  /* Chaque repère s'allume à son tour quand le panneau s'ouvre (--k-i porte son
     rang), puis garde sa couleur. Un allumage général d'un seul coup ferait un
     flash — l'inverse du repos recherché. */
  animation: k-allume .55s var(--ease) both;
  animation-delay: calc(.18s + var(--k-i, 0) * .07s);
}
.k-oeuvre {
  color: hsl(var(--sig-h) 88% 80%);
  font-weight: 600;
}
.k-annee {
  color: hsl(var(--sig-h) 75% 76%);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* Une pastille très discrète : elle isole la date sans faire de tache. */
  background: hsl(var(--sig-h) 70% 55% / .13);
  border-radius: 5px;
  padding: 0 5px;
  margin: 0 -1px;
}
@keyframes k-allume {
  from { color: inherit; background-color: transparent; }
}
/* Dans un lien ou un titre, aucune marque : la couleur y voudrait dire autre
   chose (« cliquable »), et deux sens pour une même couleur, c'est un sens de
   moins. */
.artist-pane a .k-oeuvre,
.artist-pane a .k-annee,
.artist-pane h2 .k-oeuvre,
.artist-pane h2 .k-annee {
  color: inherit; background: none; padding: 0; font-weight: inherit; animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .k-oeuvre, .k-annee { animation: none; }
}

/* Accroche du panneau d'accueil : dit pourquoi un quiz s'ouvre avant la fiche. */
.artist-pane__hook {
  font-family: 'Cabinet Grotesk', 'Anton', sans-serif;
  font-weight: 800;
  font-size: clamp(21px, 2.6vw, 31px);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 17px;
  color: var(--text);
  text-shadow: 0 0 30px hsl(var(--sig-h) 90% 70% / .35);
}

/* L'en-tête et la barre d'onglets laissent aussi passer le décor : ils n'ont
   pas de fond propre, seul le panneau en pose un (translucide). */
.is-tabbed .artist-top,
.is-tabbed .artist-tabs { position: relative; z-index: 1; }

/* ── Les panneaux ── */
.is-tabbed .artist-panes {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* TRANSLUCIDE, jamais opaque : le décor de fond vit derrière (.artist-ambient,
     en position fixe) et un panneau plein le masquait entièrement — la fiche
     paraissait éteinte alors que le fond était bien là. La teinte suit
     l'ambiance, donc le panneau change de couleur avec l'onglet. */
  background: hsl(var(--amb-h) 42% 8% / .55);
  padding: clamp(17px, 2.4vw, 26px) var(--pad) 107px;
}
.is-tabbed .artist-pane { display: none; }
.is-tabbed .artist-pane.is-on { display: block; animation: artist-pane-in .38s var(--ease); }
.is-tabbed .artist-pane:focus-visible { outline: none; }
@keyframes artist-pane-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}
/* Dans un panneau, la première section n'a plus besoin de sa marge haute :
   l'onglet fait déjà la séparation. */
.is-tabbed .artist-pane > :first-child { margin-top: 0; }
/* ── Confort de lecture dans les panneaux ──
   Trois réglages, et le troisième est le plus important :
   · la MESURE (largeur de ligne) plafonnée à 64 caractères — au-delà, l'œil
     perd le début de la ligne suivante en revenant à la ligne ;
   · l'interligne à 1,68, parce qu'une ligne longue a besoin de plus d'air ;
   · un vrai BLANC entre paragraphes (1,05em), qui donne au regard des points
     de repos. Sans lui, quatre paragraphes ressemblent encore à un pavé. */
.is-tabbed .artist-pane p {
  max-width: 64ch;
  line-height: 1.68;
  margin: 0 0 1.05em;
}
.artist-lede {
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--text);
  max-width: 60ch;
  margin: 0 0 1.1em;
}
/* Le premier paragraphe porte l'accroche : il est légèrement plus grand et
   plus clair que la suite, c'est lui qui donne envie de lire le reste. */
.artist-lede + .artist-lede { font-size: 17px; color: var(--soft); }
.is-tabbed .artist-pane .artist-section--why p { color: var(--soft); }
/* Un titre de section ne doit pas coller au paragraphe qui le précède. */
.is-tabbed .artist-pane h2 { margin-top: 1.6em; }
.is-tabbed .artist-pane > :first-child,
.is-tabbed .artist-pane > section:first-child h2 { margin-top: 0; }

/* ── Barre d'appels fixe ──
   Deux appels, visibles sur les six onglets. Posée en `absolute` dans la page
   plein écran (donc jamais par-dessus le pied de page d'une fiche dépliée sans
   JS, où elle reste dans le flux). */
.artist-actionbar {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: center; align-items: center;
  padding: 17px var(--pad) 17px;
}
.is-tabbed .artist-actionbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  /* Le fondu devient opaque tôt (28 %) : plus doux, le texte qui passe dessous
     restait à demi lisible sous les boutons — une ligne mangée à moitié se
     remarque plus qu'une coupure franche. */
  background: linear-gradient(transparent, hsl(var(--amb-h, 220) 30% 5% / .99) 28%);
  pointer-events: none;
}
.is-tabbed .artist-actionbar > * { pointer-events: auto; }
.artist-actionbar__btn {
  position: relative;
  overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 17px 26px; border-radius: 999px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  border: 1px solid var(--hair-strong); color: var(--text);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.artist-actionbar__btn:hover { transform: translateY(-2px); border-color: hsl(var(--sig-h) 80% 62%); }
.artist-actionbar__btn--p {
  background: hsl(var(--sig-h) 80% 62%); color: #12060a; border-color: transparent;
  /* Le halo respire : ce sont les deux seuls appels de la fiche, ils doivent
     vivre sans qu'on ait à les survoler. */
  /* L'état de repos vaut le 0 % de la respiration : quand la veille arrête la
     boucle en fin de cycle (pause-animations.js), rien ne saute. */
  filter: drop-shadow(0 8px 12px hsl(var(--sig-h) 85% 60% / .55));
  animation: cta-souffle 4.4s var(--ease) infinite;
}
.artist-actionbar__btn--p:hover { box-shadow: 0 14px 34px -12px hsl(var(--sig-h) 80% 62%); }

/* ── Les deux appels s'animent seuls ──
   Un reflet traverse le bouton, en boucle. Les deux ne partent PAS en même
   temps (1,4 s d'écart) : simultanés, ils clignoteraient ensemble et l'œil
   lirait un défaut d'affichage plutôt qu'une invitation. */
.artist-actionbar__btn::after {
  content: "";
  position: absolute;
  top: -60%; bottom: -60%;
  left: -35%;
  width: 26%;
  background: linear-gradient(100deg,
    transparent, hsl(0 0% 100% / .42), transparent);
  transform: skewX(-18deg) translateX(0);
  animation: cta-reflet 4.4s var(--ease) infinite;
  pointer-events: none;
}
.artist-actionbar__btn:last-child::after { animation-delay: 1.4s; }
.artist-actionbar__btn:not(.artist-actionbar__btn--p)::after {
  /* Sur le bouton sombre, un blanc à 42 % passerait pour un défaut : le reflet
     y prend la teinte de l'artiste, plus discret et plus juste. */
  background: linear-gradient(100deg,
    transparent, hsl(var(--sig-h) 90% 72% / .3), transparent);
}
@keyframes cta-reflet {
  0% { transform: skewX(-18deg) translateX(0); }
  /* Le reflet traverse en 1 s, puis plus rien pendant 3,4 s : c'est le SILENCE
     entre deux passages qui fait qu'on le remarque encore au dixième. */
  24%, 100% { transform: skewX(-18deg) translateX(560%); }
}
/* Le halo respire en `filter`, pas en `box-shadow` : une ombre animée en
   box-shadow se repeint sur le processeur à chaque image (mesuré le 02/09/2026 :
   250 ms de travail par 5 s de repos, les deux tiers de ce que coûte une fiche
   qu'on ne touche pas). Le filtre, lui, s'anime sur le compositeur. Mêmes
   valeurs perçues : l'ombre suit la silhouette du bouton, qui est pleine. */
@keyframes cta-souffle {
  0%, 100% { filter: drop-shadow(0 8px 12px hsl(var(--sig-h) 85% 60% / .55)); }
  50% { filter: drop-shadow(0 12px 20px hsl(var(--sig-h) 90% 64% / .8)); }
}

/* Version courte des libellés : uniquement sur écran étroit (voir plus bas). */
.artist-actionbar__short { display: none; }

/* ── Écran étroit ──
   Mesuré sur 812 px de haut avant réglage : fil d'Ariane 97 + en-tête 253 +
   onglets 55 + barre d'appels 137 ne laissaient que 271 px de contenu lisible,
   soit un tiers de l'écran. Tout ce bloc sert à récupérer cette place. */
@media (max-width: 640px) {
  html.is-tabbed .artist-breadcrumb {
    padding-top: 8px; padding-bottom: 8px; gap: 7px;
    font-size: 12.5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  html.is-tabbed .artist-breadcrumb::-webkit-scrollbar { display: none; }
  html.is-tabbed .artist-breadcrumb > * { flex: 0 0 auto; }

  .artist-top { grid-template-columns: 74px 1fr; gap: 8px; align-items: center; padding-top: 8px; }
  .artist-top__h { font-size: 31px; }
  .artist-top__k { font-size: 11px; letter-spacing: .18em; margin-bottom: 3px; }
  .artist-top__kicker { font-size: 12.5px; margin-top: 3px; }
  .artist-top__lede { font-size: 13.5px; margin-top: 6px; }
  /* Les trois chiffres sur UNE ligne : à trois par ligne ils repassaient à la
     ligne et l'en-tête gagnait 60 px. */
  .artist-top__facts { gap: 17px; margin-top: 7px; flex-wrap: nowrap; }
  .artist-top__facts b { font-size: 16px; }
  .artist-top__facts span { font-size: 11px; letter-spacing: .1em; }

  /* ── Les six onglets tiennent dans la largeur, avec leur NOM ──
     À 375 px, « 01 Le pari · 02 Le portrait · … » déborde de 27 px et trois
     onglets restent hors écran. Premier essai : ne garder que les numéros sur
     les onglets fermés. Rejeté par Terry, et il a raison — un numéro seul
     n'annonce rien, le visiteur ne peut pas savoir ce qu'il y a derrière.
     Ce sont donc les NUMÉROS qui s'effacent sur petit écran, et les noms qui
     restent, en version courte (« Pari », « Portrait »…) écrite à la main dans
     chaque langue — jamais un libellé long amputé par le CSS (leçon L81). */
  .artist-tabs button::before { display: none; }
  .artist-tabs__l { display: none; }
  .artist-tabs__s { display: inline; }
  /* Mesuré à 375 px : 402 px de contenu pour 375 de large, soit 27 px qui
     restaient dehors. Le padding de la barre et celui des boutons rendent
     46 px — les six onglets tiennent, avec de la marge pour les libellés
     anglais, plus longs. */
  .is-tabbed .artist-tabs { padding-left: 8px; padding-right: 8px; }
  .artist-tabs button { padding: 8px 6px; font-size: 12.5px; gap: 3px; letter-spacing: -.01em; }
  /* L'icône cadeau reste : c'est l'appel de la fiche. */
  .artist-tabs__ico { margin-right: 3px; font-size: 12px; }

  /* Sur 375 px, le corps à 18,5 px ne tenait que 40 caractères par ligne : le
     texte devenait une colonne étroite et interminable. */
  .is-tabbed .artist-pane p { line-height: 1.6; font-size: 16px; }
  .artist-lede { font-size: 16.5px; line-height: 1.55; }
  .artist-lede + .artist-lede { font-size: 15.5px; }
  .is-tabbed .artist-panes { padding-left: 17px; padding-right: 17px; }

  /* Cinq elements au lieu de trois depuis le 02/09 (les deux fleches de
     navigation) : l'ecart et les marges internes se resserrent, et le mot
     PARTAGER cede la place a sa seule icone. Mesure : 390 px d'ecran pour
     377 px de contenu. */
  .artist-actionbar { flex-wrap: nowrap; gap: 5px; padding: 8px 6px; }
  .artist-actionbar__btn {
    padding: 8px 12px; font-size: 13.5px; gap: 6px;
    min-width: 0; white-space: nowrap;
  }
  .artist-actionbar .bouyon-chapter__partage-mot { display: none; }
  .artist-actionbar .bouyon-chapter__partage { padding: 0 11px; }
  .artist-actionbar__long { display: none; }
  .artist-actionbar__short { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .is-tabbed .artist-pane.is-on { animation: none; }
  .artist-tabs button { animation: none; }
  .artist-tabs__ico { animation: none; }
  .artist-actionbar__btn::after,
  .artist-actionbar__btn--p { animation: none; }
  /* L'indicateur reste, mais il se pose au lieu de glisser : c'est un repère,
     pas une décoration — le supprimer retirerait l'information. */
  .artist-tabs__glider { transition: none; }
  .artist-actionbar__btn:hover { transform: none; }
}

/* ============================================================
   PAROLES — .artist-lyrics (fiche TIITII NBA uniquement)
   Grille de puces plutôt qu'une liste en colonne : 17 titres en pile
   feraient une colonne interminable au milieu de la fiche. auto-fill garde
   une seule colonne sur mobile sans media query.
   ============================================================ */
.artist-lyrics__list {
  list-style: none;
  margin: 17px 0 17px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.artist-lyrics__list a {
  display: block;
  padding: 8px 8px;
  border: 1px solid var(--hair-strong);
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
  transition: border-color .2s, transform .2s;
}
.artist-lyrics__list a:hover {
  border-color: currentColor;
  transform: translateY(-2px);
}
.artist-lyrics__all { font-weight: 600; }

/* ============================================================
   SORTIES — .artist-works (rangées éditoriales, cohérentes timeline)
   ============================================================ */
/* Grille de titres avec vignette. Chaque titre porte sa propre teinte (--w-h,
   tirée de son nom), donc la grille se lit comme un mur de pochettes — c'est ce
   qui donne de la couleur à une section qui n'était qu'une liste de lignes. */
.artist-works {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 8px;
}
.artist-works article {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 8px 17px;
  border: 1px solid var(--hair);
  border-top: 1px solid var(--hair);
  border-radius: var(--r-sm);
  background: hsl(var(--amb-h) 35% 12% / .45);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.artist-works article:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--w-h, var(--sig-h)) 80% 62% / .6);
}
.artist-work__cover {
  flex: 0 0 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-family: 'Cabinet Grotesk', 'Anton', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.02em;
  color: hsl(var(--w-h) 92% 88%);
  background: linear-gradient(145deg,
    hsl(var(--w-h) 62% 42%), hsl(var(--w-h) 72% 22%));
  box-shadow: inset 0 1px 0 hsl(var(--w-h) 90% 80% / .28);
}
.artist-work__txt { min-width: 0; }
@media (max-width: 640px) {
  .artist-works { grid-template-columns: 1fr; }
  .artist-work__cover { flex-basis: 46px; height: 46px; font-size: 17px; }
}
/* Scopé works + collabs : bat la couleur générique des p de section
   (spécificité 0,2,0 > 0,1,1) — l'année reste en couleur signature. */
.artist-works .artist-work__year,
.artist-collabs .artist-work__year {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sig);
}
.artist-works h3 {
  margin: 0 0 5px;
  font-family: "Cabinet Grotesk", "General Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(19px, 4.6vw, 24px);
  line-height: 1.25;
  color: var(--txt);
}
.artist-works p {
  margin: 0;
  max-width: 62ch;
  color: var(--txt-faint);
  font-size: 16px;
  line-height: 1.55;
}

/* ============================================================
   COLLABORATIONS — .artist-collabs (mêmes rangées + pilules artistes)
   ============================================================ */
.artist-collabs { margin-top: 6px; }
.artist-collabs article {
  padding: 17px 0;
  border-top: 1px solid var(--hair-strong);
}
.artist-collabs h3 {
  margin: 0 0 8px;
  font-family: "Cabinet Grotesk", "General Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(19px, 4.6vw, 24px);
  line-height: 1.25;
  color: var(--txt);
}

/* ============================================================
   MEMBRES (groupes) — rangées éditoriales
   ============================================================ */
.artist-members {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.artist-members li {
  padding: 17px 0;
  border-top: 1px solid var(--hair-strong);
  font-size: 17px;
  line-height: 1.5;
  color: var(--txt);
}
.artist-members li strong { font-weight: 700; }
.artist-member__role {
  margin-left: 8px;
  font-size: 14px;
  color: var(--txt-faint);
}

/* ============================================================
   LIENS (chapitres + artistes liés) — .artist-links / --compact
   Chapitres = pilules « chapter ». Compact = liens d'artistes collab.
   ============================================================ */
.artist-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
}
.artist-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 17px;
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  color: var(--aqua);
  background: var(--ink-2);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.artist-links a::after {
  content: "→";
  font-size: 16px;
  color: var(--txt-faint);
}
.artist-links a:hover,
.artist-links a:focus-visible {
  border-color: var(--aqua);
  transform: translateY(-1px);
  outline: none;
}
/* Compact = liens d'artistes (sous une collab) : pilules sobres en ligne. */
.artist-links--compact { gap: 8px; margin-top: 8px; }
.artist-links--compact a {
  min-height: 40px;
  padding: 8px 17px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: var(--ink-2);
  font-weight: 600;
  font-size: 14px;
  color: var(--aqua);
}
.artist-links--compact a::after { content: none; }
.artist-links--compact a:hover,
.artist-links--compact a:focus-visible {
  border-color: var(--aqua);
  transform: translateY(-1px);
}

/* ============================================================
   SOURCES — .artist-section--sources / .artist-sources (ol numérotée)
   ============================================================ */
.artist-sources {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.artist-sources li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: clamp(8px, 2vw, 17px);
  padding: 17px 0;
  border-top: 1px solid var(--hair-strong);
}
.artist-source__num {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  color: var(--sig);
  align-self: start;
}
.artist-source__body { display: grid; gap: 5px; }
.artist-sources strong {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: var(--txt);
}
.artist-sources p {
  margin: 0;
  color: var(--txt-faint);
  font-size: 14px;
  line-height: 1.55;
}
.artist-sources a {
  display: inline-block;
  margin-top: 5px;
  padding: 5px 0;
  overflow-wrap: anywhere;
  color: var(--aqua);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease);
}
.artist-sources a:hover { color: var(--txt); }
.artist-sources a:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; border-radius: 2px; }

/* ============================================================
   FICHES LIÉES (compact) — .artist-grid--compact / .artist-card
   Cartes vivantes : monogramme déco en filigrane, hover signature.
   Utilisé en bas de fiche ET dans le hub (cf section HUB plus bas).
   ============================================================ */
.artist-grid--compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 26px;
}

/* Carte artiste « Cartes complètes » — markup FIXE :
   <article.artist-card><a> __top (mono + nb sorties) · __body (nom + rôle) ·
   __facts (île + période) · __genres · __cta </a></article>.
   Tout est visible d'emblée (aucun flip). Chaque carte porte son --sig-h inline
   (depuis le slug) → dérive SA couleur, sur fiche (tintée) comme sur le hub. */
.artist-card {
  --sig: hsl(var(--sig-h, 210) 85% 60%);
  --sig-soft: hsl(var(--sig-h, 210) 90% 78%);
  --sig-glass: hsl(var(--sig-h, 210) 85% 60% / 0.14);
  --sig-line: hsl(var(--sig-h, 210) 78% 58% / 0.42);
  --sig-ink: hsl(var(--sig-h, 210) 44% 10%);
  min-width: 0;
}
/* HUB : couleur d'accent UNIFORME (bleu de marque, comme les filtres) — on
   neutralise la teinte-par-artiste (--sig-h inline) ici. La couleur par
   artiste reste vivante sur les FICHES (.artist-page) et les profils liés. */
.artist-index .artist-card {
  /* neutralise le hue inline par artiste (monogramme + fond tinté) */
  --sig-h: 208 !important;
  --sig: #2f93e8;
  --sig-deep: #1f6fbf;
  --sig-soft: #7fc2ff;
  --sig-glass: rgba(47, 147, 232, 0.13);
  --sig-line: rgba(47, 147, 232, 0.32);
  --sig-ink: hsl(210 44% 10%);
}
.artist-card a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  height: 100%;
  padding: 17px 17px 17px;
  border: 1px solid var(--hair-strong, rgba(255, 255, 255, 0.16));
  border-radius: 16px;
  /* aplat sombre TINTÉ de la teinte (jamais #000), pas un dégradé mou. */
  background: linear-gradient(165deg, hsl(var(--sig-h, 210) 42% 14% / 0.55), var(--ink-card, #12151b) 62%);
  color: var(--txt, #f2f3f5);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 38px -22px rgba(0, 0, 0, 0.8);
  transition: border-color 0.26s var(--ease), transform 0.26s var(--ease), box-shadow 0.26s var(--ease);
}
/* rail couleur signature en haut (repère RIDDIM). */
.artist-card a::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--sig);
  opacity: 0.9;
}
/* halo d'angle discret de la teinte (jamais un glow néon net). */
.artist-card a::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(var(--sig-h, 210) 70% 52% / 0.13), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.artist-card a:hover,
.artist-card a:focus-visible {
  border-color: hsl(var(--sig-h, 210) 45% 42%);
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 26px 46px -22px rgba(0, 0, 0, 0.85);
  outline: none;
}
.artist-card a:focus-visible { outline: 3px solid var(--sig-soft); outline-offset: 3px; }

/* ── Top : monogramme + nombre de sorties (chiffre-vedette) ── */
.artist-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.artist-card__mark {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(150deg, hsl(var(--sig-h, 210) 55% 26%), hsl(var(--sig-h, 210) 50% 17%));
  border: 1px solid hsl(var(--sig-h, 210) 50% 40% / 0.6);
  box-shadow: inset 0 1px 0 hsl(var(--sig-h, 210) 80% 70% / 0.25);
  color: hsl(var(--sig-h, 210) 92% 88%);
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 0.22s var(--ease);
}
.artist-card a:hover .artist-card__mark,
.artist-card a:focus-visible .artist-card__mark { transform: scale(1.05); }
.artist-card__works {
  flex: 0 0 auto;
  text-align: right;
  line-height: 1;
}
.artist-card__works-n {
  display: block;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 0.9;
  letter-spacing: 0;
  color: var(--sig-soft);
}
.artist-card__works-l {
  display: block;
  margin-top: 3px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--txt-faint, rgba(238, 244, 251, 0.5));
}

/* ── Body : nom + rôle (kind) ── */
.artist-card__body { min-width: 0; width: 100%; margin-top: 8px; }
.artist-card h2,
.artist-card h3 {
  margin: 0;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(19px, 4.4vw, 23px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--txt, #f2f3f5);
  overflow-wrap: anywhere;
}
.artist-card__kind {
  margin: 6px 0 0;
  color: var(--txt-mute, rgba(238, 244, 251, 0.74));
  font-family: "Inter Tight", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ── Facts : île (+ pastille) + période ── */
.artist-card__facts {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--hair, rgba(210, 226, 245, 0.12));
  display: grid;
  gap: 6px;
}
.artist-card__fact {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.artist-card__fact dt {
  flex: 0 0 auto;
  width: 50px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-faint, rgba(238, 244, 251, 0.5));
}
.artist-card__fact dd {
  margin: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter Tight", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--txt, #f2f3f5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.artist-card__pin {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: hsl(var(--pin-h, 210) 62% 56%);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* ── Genres : puces (max 3) ── */
.artist-card__genres {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 0;
}
.artist-card__genre {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: hsl(var(--sig-h, 210) 35% 85%);
  background: hsl(var(--sig-h, 210) 45% 22% / 0.5);
  border: 1px solid hsl(var(--sig-h, 210) 45% 38% / 0.45);
  border-radius: 999px;
  padding: 5px 8px;
  white-space: nowrap;
}

/* ── CTA : repère « Fiche → » en pied de carte ──
   margin-top:auto le colle en bas → CTAs alignés sur une même rangée même si
   une carte est plus courte (pas de période, pas de genres). Le mini-gap au-
   dessus est porté par le padding-top + le filet, pas par une marge. */
.artist-card__cta {
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid var(--hair, rgba(210, 226, 245, 0.12));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sig-soft);
}
.artist-card__arrow { transition: transform 0.2s var(--ease); }
.artist-card a:hover .artist-card__arrow,
.artist-card a:focus-visible .artist-card__arrow { transform: translateX(3px); }

/* ============================================================
   ENDCARD TIITII NBA — coral RÉSERVÉ conversion (jamais la teinte artiste)
   ============================================================ */
.artist-endcard {
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin: clamp(26px, 5vw, 53px) auto clamp(35px, 7vw, 62px);
  padding: clamp(26px, 5vw, 35px) clamp(17px, 4vw, 35px);
  border: 1px solid var(--hair-strong);
  border-radius: 20px;
  background: var(--ink-card);
  text-align: left;
}
.artist-endcard__autre a { display: inline-block; padding: 5px 0; }
.artist-endcard__eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--aqua);
}
.artist-endcard__title {
  margin: 0 0 17px;
  max-width: 30ch;
  font-family: "Cabinet Grotesk", "General Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 5.4vw, 32px);
  line-height: 1.3;
  color: var(--txt);
}
.artist-endcard__title em { font-style: normal; color: var(--aqua); }
.artist-endcard__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 17px 26px;
  border-radius: 12px;
  background: var(--coral);
  color: var(--coral-ink);
  font-weight: 700;
  font-size: 17px;
  transition: transform 0.2s var(--ease);
}
.artist-endcard__cta:hover,
.artist-endcard__cta:focus-visible {
  transform: translateY(-2px);
  outline: none;
}
.artist-endcard__cta:active { transform: scale(0.97); }
.artist-endcard__cta span { transition: transform 0.2s var(--ease); }
.artist-endcard__cta:hover span,
.artist-endcard__cta:focus-visible span { transform: translateX(4px); }

/* Pont éditorial HAUT de fiche (funnel blog → single du moment).
   Placé juste après les cartes méta = le point de conversion le plus HAUT.
   Le scroll moyen mesuré des fiches SEO est ~0% : le lecteur trouve « âge/bio »
   en haut et repart, donc les CTA du bas ne sont jamais vus. Ce pont compact
   (horizontal, pas un mur) tend la main vers TIITII NBA dans le 1er tiers de page. */
.artist-bridge {
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin: clamp(17px, 3vw, 26px) auto clamp(17px, 4vw, 26px);
  display: flex;
  align-items: center;
  gap: clamp(8px, 3vw, 17px);
  padding: 17px;
  border: 1px solid var(--sig-line);
  border-radius: 16px;
  background: var(--ink-card);
}
/* `display:flex` (auteur) bat la règle UA [hidden]{display:none} : sans ce
   garde-fou, le CTA pont « hidden » (dévoilé par bouyon-fiche-pari.js à la
   1re réponse) serait visible d'entrée. */
.artist-bridge[hidden] { display: none; }
.artist-bridge__copy { flex: 1; min-width: 0; }
.artist-bridge__eyebrow {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--aqua);
}
.artist-bridge__text {
  margin: 0;
  color: var(--txt);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}
.artist-bridge__text em { font-style: normal; color: var(--aqua); }
.artist-bridge__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 17px 26px;
  border-radius: 12px;
  background: var(--coral);
  color: var(--coral-ink);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.artist-bridge__cta:hover {
  transform: translateY(-2px);
}
.artist-bridge__cta:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.artist-bridge__cta span { transition: transform 0.2s var(--ease); }
.artist-bridge__cta:hover span,
.artist-bridge__cta:focus-visible span { transform: translateX(4px); }
@media (max-width: 520px) {
  .artist-bridge { flex-wrap: wrap; }
  .artist-bridge__cta { width: 100%; justify-content: center; }
}
/* CTA pont enrichi (maquette B v3, 2026-07-10) : dévoilé par JS après la 1re
   réponse du quiz. Photo TIITII NBA ronde + entrée « pop » + balayage lumineux
   périodique sur le bouton corail + anneau sonar. transform/opacity UNIQUEMENT
   (budget perf) — tout est coupé sous prefers-reduced-motion. */
.artist-bridge__face {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  border: 2px solid hsl(var(--sig-h) 55% 55% / 0.4);
}
/* Vignette « now playing » : pochette réelle + vinyle qui tourne en continu +
   égaliseur + badge photo. Animation autoplay visuelle (jamais d'audio),
   figée sous prefers-reduced-motion. Réutilisée par les 3 CTA (bridges + final). */
.np {
  position: relative;
  flex: none;
  display: inline-block;
}
.np--sm { width: 62px; height: 62px; }
.np--lg { width: 92px; height: 92px; }
.np__vinyl {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 86%;
  height: 86%;
  transform: translate(-32%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #05070c 20%, transparent 21%),
    repeating-radial-gradient(circle at center, #171d2b 0 1.5px, #080b13 1.5px 3px);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.7);
  animation: npSpin 3.6s linear infinite;
}
.np__cover {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 11px;
  object-fit: cover;
  border: 1px solid hsl(var(--amb-h, 222) 40% 34% / 0.6);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.65);
}
.np__face {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 38%;
  height: 38%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  border: 2px solid var(--ink-card);
}
.np__eq {
  position: absolute;
  left: 5px;
  bottom: 5px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 15px;
  padding: 2px 3px;
  border-radius: 4px;
  background: rgba(5, 8, 15, 0.72);
}
.np__eq i {
  width: 2.5px;
  border-radius: 1px;
  background: var(--aqua);
  transform-origin: 50% 100%;
  animation: npEq 0.85s ease-in-out infinite;
}
.np__eq i:nth-child(1) { height: 6px; animation-delay: 0s; }
.np__eq i:nth-child(2) { height: 11px; animation-delay: 0.18s; }
.np__eq i:nth-child(3) { height: 8px; animation-delay: 0.36s; }
.np__eq i:nth-child(4) { height: 13px; animation-delay: 0.12s; }
@keyframes npSpin { to { transform: translate(-32%, -50%) rotate(360deg); } }
@keyframes npEq {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .np__vinyl { animation: none; }
  .np__eq i { animation: none; transform: scaleY(0.75); }
}
.artist-bridge--pari {
  border-left-color: var(--sig, var(--coral));
  animation: artistCtaIn 0.6s var(--ease) both;
}
@keyframes artistCtaIn {
  0% { opacity: 0; transform: translateY(22px) scale(0.965); }
  62% { opacity: 1; transform: translateY(-2px) scale(1.004); }
  100% { opacity: 1; transform: none; }
}
/* Anneau sonar : wrapper dédié pour ne pas clipper l'anneau (le bouton
   lui-même passe en overflow:hidden pour contenir le balayage lumineux). */
.artist-bridge__ping {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.artist-bridge__ping::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  border: 2px solid var(--coral);
  opacity: 0;
  pointer-events: none;
  animation: artistCtaPing 2.8s var(--ease) infinite 0.6s;
}
@keyframes artistCtaPing {
  0% { transform: scale(0.98); opacity: 0.75; }
  55%, 100% { transform: scale(1.08); opacity: 0; }
}
.artist-bridge--live .artist-bridge__cta {
  position: relative;
  overflow: hidden;
}
/* Balayage lumineux périodique (transform only, jamais de glow diffus). */
.artist-bridge--live .artist-bridge__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.38) 50%, transparent 68%);
  transform: translateX(-140%) skewX(-16deg);
  animation: artistCtaShine 3.4s var(--ease) infinite 1.1s;
}
@keyframes artistCtaShine {
  0% { transform: translateX(-140%) skewX(-16deg); }
  45%, 100% { transform: translateX(140%) skewX(-16deg); }
}
.artist-bridge--live .artist-bridge__cta:active { transform: scale(0.97); }
@media (max-width: 520px) {
  .artist-bridge__ping,
  .artist-bridge--live .artist-bridge__cta { width: 100%; }
  .artist-bridge--live .artist-bridge__cta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .artist-bridge--pari { animation: none; }
  .artist-bridge--live .artist-bridge__cta::after { animation: none; }
  .artist-bridge__ping::before { display: none; }
}

/* Pont éditorial mid-fiche (funnel blog → single du moment) : même langage
   que l'endcard mais compact — un repère, pas un mur, pour ne pas doubler
   le bloc final en taille. */
.artist-endcard--bridge {
  margin: clamp(17px, 4vw, 35px) auto;
  padding: clamp(17px, 3.5vw, 26px) clamp(17px, 4vw, 26px);
}
.artist-endcard--bridge .artist-endcard__title {
  max-width: 34ch;
  font-size: clamp(20px, 4vw, 30px);
  margin-bottom: 17px;
}
.artist-endcard--bridge .artist-endcard__cta { min-height: 48px; padding: 0 26px; }

/* ============================================================
   « LE PARI » — quiz auto-généré des fiches (concept B, 2026-07-02).
   Cartes teintées par la signature de l'artiste (--sig), bonne
   réponse en vert, mauvaise en coral. Rendu hidden sans JS.
   ============================================================ */
.artist-pari {
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin: clamp(17px, 4vw, 26px) auto;
  padding: 26px 17px;
  border-radius: 16px;
  border: 1px solid var(--sig-line);
  background: var(--ink-card);
}
.artist-pari__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sig);
  margin-bottom: 8px;
}
.artist-pari__q {
  margin: 0 0 17px;
  font-family: "Cabinet Grotesk", "General Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(19px, 5vw, 24px);
  line-height: 1.35;
  color: var(--txt);
}
.artist-pari__opts { display: grid; gap: 8px; }
.artist-pari__opt {
  appearance: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  min-height: 52px;
  padding: 17px 17px;
  border-radius: 12px;
  background: var(--ink-2);
  border: 1px solid var(--hair-strong);
  color: var(--txt);
  font: inherit;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  transition: transform 0.15s var(--ease), border-color 0.2s, background 0.2s;
}
.artist-pari__opt:not([disabled]):hover { border-color: var(--sig-line); transform: translateY(-1px); }
.artist-pari__opt:active { transform: scale(0.98); }
.artist-pari__opt:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }
.artist-pari.done .artist-pari__opt { pointer-events: none; opacity: 0.45; }
.artist-pari.done .artist-pari__opt.good {
  opacity: 1;
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.13);
  color: #4ade80;
}
.artist-pari.done .artist-pari__opt.bad {
  opacity: 1;
  border-color: var(--coral);
  background: rgba(255, 107, 107, 0.1);
  color: var(--coral);
}
.artist-pari__reveal {
  display: none;
  margin-top: 17px;
  padding: 17px 17px;
  border-radius: 12px;
  background: var(--ink-2);
  /* Règle 2px gauche = parti-pris éditorial du design system Bouyon (pas 3px+). */
  border-left: 2px solid #4ade80;
  font-size: 15px;
  line-height: 1.55;
  color: #cfe9d8;
}
.artist-pari.done .artist-pari__reveal { display: block; }

/* Progression « endowed » du parcours (maquette B v3) : promesse + barre de
   segments. Le 1er segment est rempli au rendu (fait offert), chaque réponse
   avance la barre, le verdict remplit le segment bonus. Remplace l'ancien HUD
   flottant à flammes. transform only (scaleX, origin gauche). */
.artist-pari-progress {
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin: clamp(17px, 4vw, 26px) auto;
  padding: 17px 17px 17px;
  border: 1px solid var(--hair-strong);
  border-radius: 16px;
  background: hsl(var(--amb-h, 222) 34% 11% / 0.68);
}
.artist-pari-progress__promise {
  margin: 0 0 17px;
  font-family: "Cabinet Grotesk", "General Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(19px, 5vw, 24px);
  line-height: 1.35;
  color: var(--txt);
}
.artist-pari-progress__bar { display: flex; gap: 5px; }
.pari-seg {
  flex: 1;
  height: 9px;
  border-radius: 5px;
  overflow: hidden;
  background: hsl(var(--amb-h, 222) 30% 18%);
}
.pari-seg::before {
  content: "";
  display: block;
  height: 100%;
  background: hsl(var(--sig-h) 78% 62%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ease);
}
.pari-seg.is-done::before { transform: scaleX(1); }
.artist-pari-progress__count {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--txt-faint);
}
.artist-pari-progress__count b { color: var(--sig); }

.artist-endcard--verdict { text-align: center; }
.artist-pari__score-final {
  margin: 0;
  font-family: "Cabinet Grotesk", "General Sans", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 16vw, 76px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sig);
}
.artist-pari__score-final small { font-size: 0.45em; font-weight: 700; color: var(--txt-faint); }
.artist-endcard__title--verdict { max-width: none; font-size: clamp(20px, 4.5vw, 28px); margin-bottom: 17px; }

/* Partage du score — action secondaire : le bouton d'écoute reste le geste principal. */
.artist-endcard__share {
  display: inline-block;
  margin-top: 17px;
  padding: 8px 26px;
  border: 1px solid var(--sig);
  border-radius: 999px;
  background: transparent;
  color: var(--sig);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.artist-endcard__share:hover,
.artist-endcard__share:focus-visible {
  background: var(--sig);
  color: var(--bg, #0d0f14);
}

/* Bandeau affiché à celui qui arrive par un lien partagé, au-dessus du quiz. */
.artist-pari__challenge {
  margin: 0 0 17px;
  padding: 8px 17px;
  border-left: 3px solid var(--sig);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--sig) 8%, transparent);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .artist-pari__opt, .pari-seg::before { transition: none; }
}

/* ============================================================
   HUB ARTISTES (.artist-index) — repli NEUTRE (pas de --sig-h ici)
   Restyle RIDDIM mais PRÉSERVE la logique de filtre (.is-active,
   [aria-pressed], data-filter).
   ============================================================ */

/* Tokens neutres pour le hub (teinte bleu de marque). */
.artist-index {
  --sig: #2f93e8;
  --sig-deep: #1f6fbf;
  --sig-soft: #7fc2ff;
  --sig-glass: rgba(47, 147, 232, 0.13);
  --sig-line: rgba(47, 147, 232, 0.32);
  --ink: #0c0e12;
  --ink-2: #12151b;
  --ink-3: #161a21;
  --ink-card: #14171d;
  --hair: rgba(210, 226, 245, 0.12);
  --hair-strong: rgba(210, 226, 245, 0.22);
  --txt: #eef4fb;
  --txt-mute: rgba(238, 244, 251, 0.74);
  --txt-faint: rgba(238, 244, 251, 0.5);
  background: var(--ink);
  color: var(--txt);
  background-image:
    radial-gradient(120% 70% at 80% -10%, rgba(47, 147, 232, 0.16), transparent 55%);
  background-attachment: fixed;
}

.artist-index__hero {
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin: 0 auto;
  padding: clamp(35px, 7vw, 71px) 0 clamp(26px, 4vw, 35px);
}
.artist-index__hero p.artist-eyebrow {
  margin: 0 0 26px;
  color: var(--sig-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.artist-index__hero p.artist-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--sig);
  display: inline-block;
}
.artist-index__hero h1 {
  margin: 0;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(52px, 11vw, 132px);
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--txt);
  max-width: 16ch;
}
.artist-index__hero p:not(.artist-eyebrow):not(.artist-index__stats) {
  max-width: 62ch;
  margin: 26px 0 0;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.55;
  font-weight: 400;
  color: var(--txt-mute);
}

/* Ligne de stats du hero : N artistes · N territoires · De {min} à {max}.
   Chiffres en couleur signature du hub ; séparateurs = points discrets. */
.artist-index__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 8px;
  margin: 26px 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--txt-faint);
}
.artist-index__stat { display: inline-flex; align-items: center; gap: 7px; }
.artist-index__stat b {
  font-weight: 700;
  font-size: 14px;
  color: var(--sig-soft);
}
.artist-index__stat-sep {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sig-line);
}

.artist-index__note {
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin: 0 auto;
  padding: 17px 26px;
  border: 1px solid var(--sig-line);
  border-left: 3px solid var(--sig);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-3));
}
.artist-index__note p {
  margin: 0;
  max-width: 70ch;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--txt-mute);
}

/* ── Filtre du hub (logique PRÉSERVÉE) ──────────────────────── */
.artist-filter {
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin: clamp(26px, 4vw, 35px) auto 0;
  display: grid;
  gap: 17px;
}
.artist-filter__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.artist-filter__legend {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-faint);
}
.artist-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.artist-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 17px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ink-2), var(--ink-card));
  color: var(--txt-mute);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.artist-filter__chip:hover {
  border-color: var(--sig);
  color: var(--txt);
  transform: translateY(-1px);
}
/* État actif (classe .is-active ET aria-pressed="true" — préservés). */
.artist-filter__chip.is-active,
.artist-filter__chip[aria-pressed="true"] {
  background: var(--sig);
  border-color: var(--sig);
  color: #06121f;
}
.artist-filter__chip:focus-visible { outline: 3px solid var(--sig-soft); outline-offset: 3px; }
.artist-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--sig-glass);
  color: var(--sig-soft);
  font-size: 11px;
  font-weight: 700;
}
.artist-filter__chip.is-active .artist-filter__count,
.artist-filter__chip[aria-pressed="true"] .artist-filter__count {
  background: rgba(6, 18, 31, 0.28);
  color: #06121f;
}
.artist-filter__status {
  margin: 2px 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--txt-faint);
}

/* ── Grille principale du hub (« Cartes complètes ») ─────────────
   Cartes denses mais lisibles : 2 colonnes en mobile, 3 puis 4 ensuite
   (progression du modèle « Cartes complètes »). align-items:stretch (défaut)
   + .artist-card a{height:100%} → cartes d'égale hauteur par rangée. */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin: clamp(26px, 4vw, 35px) auto clamp(53px, 8vw, 80px);
}
/* Progression des colonnes du mur du hub (modèle « Cartes complètes »). */
@media (min-width: 560px) {
  .artist-grid { gap: 17px; }
}
@media (min-width: 760px) {
  .artist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .artist-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
}
/* iPhone 14 (390) = 2 colonnes (fidèle à la maquette validée, page ~2× plus
   courte). 1 colonne réservée aux très petits écrans (≤360px) pour rester
   lisible sans débordement. */
@media (max-width: 360px) {
  .artist-grid { grid-template-columns: 1fr; }
}

/* la grille --compact (fiches liées) garde sa propre largeur/contexte. */
.artist-index .artist-grid--compact,
.artist-section .artist-grid--compact { width: auto; margin-left: 0; margin-right: 0; }

/* ============================================================
   ANIMATIONS — reveal SOBRE au chargement, 100 % CSS, SANS JS.
   Le contenu est VISIBLE par défaut (aucun opacity:0 résiduel).
   On déclenche un fondu/montée léger via animation à l'affichage ;
   si l'anim est coupée (reduced-motion), le défaut reste visible.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .artist-hero,
  .artist-section { animation: artist-rise 0.6s var(--ease) both; }
}
@keyframes artist-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* prefers-reduced-motion : on coupe TOUT mouvement, contenu visible. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   RESPONSIVE — mobile-first parfait à 390px ET 360px.
   Desktop ≥760 / ≥1024 : héros 2 colonnes, grilles élargies.
   ============================================================ */

/* ≥ 600px : la bande identité passe à 3 colonnes intermédiaires. */
@media (min-width: 600px) {
  .artist-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .artist-platforms__links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .artist-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≥ 760px : passage « desktop » — bande identité en 5 colonnes. */
@media (min-width: 760px) {
  .artist-hero { padding: clamp(53px, 6vw, 80px) 0 clamp(35px, 4vw, 53px); }
  .artist-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .artist-platforms__links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .artist-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .artist-filter__row { grid-template-columns: auto 1fr; align-items: center; gap: 17px; }
}

/* ≥ 1024px : respiration verticale accrue. */
@media (min-width: 1024px) {
  .artist-section { padding: clamp(35px, 5vw, 62px) 0 8px; }
}

/* ≤ 760px : la grille « fiches liées » repasse à 2 colonnes (le hub reste en
   mur dense auto-fill, géré directement par .artist-grid). */
@media (max-width: 759px) {
  .artist-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≤ 560px : compaction fine + filets tactiles. */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .artist-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .artist-platforms__links { grid-template-columns: 1fr; }
  .artist-members { grid-template-columns: 1fr; }
  /* Deux colonnes, comme l'annuaire : depuis que ces cartes portent une photo
     en fond, une seule colonne donnait des vignettes de 505px de haut avec un
     grand vide au milieu (correctif Terry 2026-07-27). */
  .artist-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .artist-sources li { grid-template-columns: 40px 1fr; gap: 8px; }
  /* liens texte du fil d'Ariane = cibles tactiles ≥44px (fil en liste des Actus compris). */
  .artist-breadcrumb > a,
  .artist-breadcrumb li > a { min-height: 44px; }
  .artist-lang-current,
  .artist-lang-alt { width: 34px; height: 24px; }
}

/* ≤ 400px (iPhone 14 = 390 / petits Android = 360) : aucun débordement.
   On serre la gouttière et on borne les gros titres. */
@media (max-width: 400px) {
  :root { --pad: 16px; }
  .artist-hero h1 { font-size: clamp(44px, 14vw, 60px); }
  .artist-index__hero h1 { font-size: clamp(46px, 13vw, 66px); }
  .artist-facts dd { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════
   MODE EXPRESS (lecture rapide) — toggle ⚡/📖 + masquage
   Même système que les chapitres : body[data-mode] piloté par
   bouyon-chapter-reading-mode.js (défaut « rapide » sur mobile).
   ═══════════════════════════════════════════════════ */

/* Masque le récit long, les collaborations et les sources en lecture rapide. */
body[data-mode="rapide"] .deep-only { display: none; }

/* Toggle dans le fil d'Ariane — HORS .artist-page → couleurs fixes (pas de --sig ici). */
.artist-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  position: relative; /* ancre du coachmark pédagogique .bouyon-mode-hint */
}
.artist-mode-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 8px;
  min-height: 38px;
  border: 1px solid hsl(var(--amb-h, 222) 38% 22% / 0.85);
  border-radius: 999px;
  background: hsl(var(--amb-h, 222) 34% 11% / 0.68);
  color: var(--txt-faint, #9aabc9);
  font-family: "General Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.artist-mode-toggle button:hover { color: var(--aqua, #38e1d4); border-color: rgba(56, 225, 212, 0.5); }
.artist-mode-toggle button.is-active { background: #38e1d4; border-color: #38e1d4; color: #06201d; }
.artist-mode-toggle button:focus-visible { outline: 2px solid #38e1d4; outline-offset: 2px; }

/* Bandeau « version express » + CTA — DANS .artist-page → --sig disponible. */
.artist-readmore {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 17px;
  padding: 17px clamp(26px, 5vw, 53px);
  border-bottom: 1px solid var(--hair-strong, rgba(255, 255, 255, 0.18));
  background: var(--ink-2, #12151b);
}
body[data-mode="rapide"] .artist-readmore { display: flex; }
.artist-readmore__note {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-faint, rgba(242, 243, 245, 0.66));
}
.artist-readmore__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px 17px;
  min-height: 48px;
  border: 1px solid var(--hair-strong, rgba(255, 255, 255, 0.22));
  border-radius: 12px;
  background: var(--ink-2, #12151b);
  color: var(--aqua, #38e1d4);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.artist-readmore__btn:hover { transform: translateY(-1px); border-color: var(--aqua, #38e1d4); }
.artist-readmore__btn:focus-visible { outline: 2px solid var(--aqua, #38e1d4); outline-offset: 3px; }

@media (max-width: 560px) {
  .artist-mode-toggle button { min-height: 44px; }
  .artist-readmore { padding: 17px 17px; }
  .artist-readmore__btn { width: 100%; margin-left: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .artist-mode-toggle button,
  .artist-readmore__btn { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   COACHMARK PÉDAGOGIQUE — « passe en mode rapide ⚡ »
   Injecté en JS (bouyon-chapter-reading-mode.js → initReadingModeHint),
   ancré au toggle .artist-mode-toggle (position:relative ci-dessus).
   Une seule fois par visiteur (localStorage bouyon.modeHintSeen).
   ⚠️ Bloc dupliqué (adapté à la palette fiche) depuis src/styles/bouyon-chapter.css
      (où il est ancré à .bouyon-chapter__mode-toggle) — garder les deux synchronisés.
   Palette fiche : surfaces --ink-*, hairlines --hair-*, texte --txt-*,
   accent bleu fixe #2f93e8 (le breadcrumb est hors scope --sig).
   ════════════════════════════════════════════════════════════════ */
.bouyon-mode-hint {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  z-index: 60;
  background: hsl(var(--amb-h, 222) 34% 11% / 0.97);
  color: var(--txt, #dee6f5);
  border: 1px solid hsl(var(--amb-h, 222) 38% 26% / 0.9);
  border-radius: 12px;
  padding: 17px 17px 17px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 14px 34px -16px rgba(0, 0, 0, 0.85);
  font-family: "General Sans", system-ui, sans-serif;
  text-transform: none;
  letter-spacing: normal;
  /* caché par défaut */
  opacity: 0;
  transform: translateY(-7px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 0.42s;
}
.bouyon-mode-hint.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s;
}
/* connecteur vers le bouton ⚡ */
.bouyon-mode-hint::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 34px;
  width: 12px;
  height: 12px;
  background: hsl(var(--amb-h, 222) 34% 11%);
  border-left: 1px solid hsl(var(--amb-h, 222) 38% 26% / 0.9);
  border-top: 1px solid hsl(var(--amb-h, 222) 38% 26% / 0.9);
  transform: rotate(45deg);
  border-top-left-radius: 3px;
}
/* Mobile : le toggle est dans un fil d'Ariane étroit aligné à droite → le
   coachmark ancré déborderait l'écran. On le passe en bandeau fixe en bas,
   centré, qui ne sort jamais du viewport (et le connecteur n'a plus de cible). */
@media (max-width: 560px) {
  .bouyon-mode-hint {
    position: fixed;
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    transform: translateY(10px);
  }
  .bouyon-mode-hint.is-open { transform: translateY(0); }
  .bouyon-mode-hint::before { display: none; }
}
.bouyon-mode-hint__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.bouyon-mode-hint__bolt {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  background: rgba(56, 225, 212, 0.14);
  color: var(--aqua, #38e1d4);
  animation: bouyon-mode-hint-pulse 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
@keyframes bouyon-mode-hint-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.bouyon-mode-hint__text {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--txt, #dee6f5);
}
.bouyon-mode-hint__text b {
  display: block;
  font-weight: 700;
}
.bouyon-mode-hint__sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--txt-mute, rgba(238, 244, 251, 0.74));
}
.bouyon-mode-hint__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--txt-mute, rgba(238, 244, 251, 0.74));
  font-size: 17px;
  line-height: 1;
  border-radius: 7px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.bouyon-mode-hint__close:hover { color: var(--txt, #dee6f5); background: rgba(255, 255, 255, 0.06); }
.bouyon-mode-hint__close:focus-visible { outline: 2px solid var(--aqua, #38e1d4); outline-offset: 1px; }
/* barre de décompte avant auto-fermeture (informatif) */
.bouyon-mode-hint__timer {
  margin-top: 8px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.bouyon-mode-hint__timer i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  background: rgba(56, 225, 212, 0.7);
  transform: scaleX(0);
}
.bouyon-mode-hint.is-open .bouyon-mode-hint__timer i {
  animation: bouyon-mode-hint-countdown 6s linear forwards;
}
@keyframes bouyon-mode-hint-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
/* léger appel d'attention sur le bouton ⚡ tant que le coachmark est ouvert */
.artist-mode-toggle.is-cued button[data-reading-mode="rapide"] {
  box-shadow: 0 0 0 2px rgba(56, 225, 212, 0.6);
}
/* prefers-reduced-motion → apparition simple, sans mouvement, toujours dismissable */
.bouyon-mode-hint--no-motion,
.bouyon-mode-hint--no-motion.is-open { transform: none; }
.bouyon-mode-hint--no-motion {
  transition: opacity 0.25s linear, visibility 0s linear 0.25s;
}
.bouyon-mode-hint--no-motion.is-open {
  transition: opacity 0.25s linear, visibility 0s;
}
.bouyon-mode-hint--no-motion .bouyon-mode-hint__bolt { animation: none; }
.bouyon-mode-hint--no-motion.is-open .bouyon-mode-hint__timer i { animation: none; transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .bouyon-mode-hint,
  .bouyon-mode-hint.is-open { transform: none; }
  .bouyon-mode-hint { transition: opacity 0.25s linear, visibility 0s linear 0.25s; }
  .bouyon-mode-hint.is-open { transition: opacity 0.25s linear, visibility 0s; }
  .bouyon-mode-hint__bolt { animation: none; }
  .bouyon-mode-hint.is-open .bouyon-mode-hint__timer i { animation: none; transform: scaleX(0); }
}
@media (max-width: 430px) {
  .bouyon-mode-hint { max-width: calc(100vw - 24px); }
}

/* ============================================================
   FAQ — .artist-faq (réponses directes, miroir du JSON-LD FAQPage)
   ============================================================ */
.artist-faq__item {
  padding: 17px 0;
  border-top: 1px solid var(--hair-strong);
}
.artist-faq__item:last-child {
  border-bottom: 1px solid var(--hair-strong);
}
.artist-faq__q {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--txt);
}
.artist-faq__a {
  margin: 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--txt-faint);
}

/* ── Carrousel CTA « playlist » : les pochettes de Bouyon New Waves défilent en boucle
   (auto-play visuel). Covers injectées par le template, rafraîchies par
   scripts/build-bouyon-playlist-covers.mjs. Placé sous le bridge, garde le cadeau. ── */
.fiche-plcaro {
  display: block;
  margin: 17px 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.fiche-plcaro:focus-visible { outline: 2px solid var(--aqua, #38e1d4); outline-offset: 2px; }
.fiche-plcaro__strip {
  display: flex;
  gap: 8px;
  width: max-content;
  padding: 17px 8px;
  animation: plcaro-slide 30s linear infinite;
}
.fiche-plcaro:hover .fiche-plcaro__strip { animation-play-state: paused; }
.fiche-plcaro__strip img {
  width: 84px; height: 84px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42);
  flex: none;
}
.fiche-plcaro__foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 17px 17px 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fiche-plcaro__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fiche-plcaro__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--aqua, #38e1d4);
}
.fiche-plcaro__title {
  font-family: "Anton", "Oswald", sans-serif;
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 1;
  font-size: 19px; color: var(--txt, #f2f4f8);
}
/* CTA pleine largeur + légère pulsation : c'est LUI qu'on doit voir et cliquer,
   pas juste regarder les pochettes défiler. */
.fiche-plcaro__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  font-family: "Anton", "Oswald", sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 19px;
  background: var(--coral, #ff6b6b); color: var(--coral-ink, #2a0d0d);
  border-radius: 14px; padding: 17px 17px 17px;
  box-shadow: 0 8px 24px -10px rgba(255, 107, 107, 0.55);
  transition: transform 0.2s, box-shadow 0.2s;
  animation: plcaro-nudge 2.6s ease-in-out infinite;
}
.fiche-plcaro__cta svg { width: 17px; height: 17px; }
.fiche-plcaro:hover .fiche-plcaro__cta,
.fiche-plcaro:focus-visible .fiche-plcaro__cta {
  transform: translateY(-1px); animation-play-state: paused;
  box-shadow: 0 12px 30px -10px rgba(255, 107, 107, 0.75);
}
@keyframes plcaro-slide { to { transform: translateX(calc(-50% - 5px)); } }
@keyframes plcaro-nudge { 0%, 82%, 100% { transform: scale(1); } 90% { transform: scale(1.025); } }

/* ── « X est dans cette playlist » (Terry 2026-07-28) ─────────────────
   L'info la plus convaincante de la fiche vivait en eyebrow 10,5 px mono :
   invisible. Elle passe en bandeau plein format au-dessus des pochettes,
   à la couleur signature de l'artiste (--sig-h, déjà portée par la page),
   avec un point « live » qui bat et un balayage lumineux périodique.
   Le mouvement reste sur place : aucune anim ne déplace la mise en page. */
.fiche-plcaro--mine { border-color: hsl(var(--sig-h) 78% 62% / 0.38); }
.fiche-plcaro__badge {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 17px;
  overflow: hidden;
  background: linear-gradient(90deg, hsl(var(--sig-h) 78% 62% / 0.26), hsl(var(--sig-h) 78% 62% / 0.05));
  border-bottom: 1px solid hsl(var(--sig-h) 78% 62% / 0.3);
  animation: plcaro-badge-in 0.5s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
}
.fiche-plcaro__badge b {
  font-family: "Anton", "Oswald", sans-serif;
  font-weight: 400; font-size: 14.5px;
  letter-spacing: 0.045em; text-transform: uppercase; line-height: 1.15;
  color: var(--txt, #f2f4f8);
}
.fiche-plcaro__dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: hsl(var(--sig-h) 78% 62%);
  animation: plcaro-dot 2.2s ease-out infinite;
}
/* Balayage : capte le regard sans jamais pousser le contenu. */
.fiche-plcaro__badge::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: plcaro-shine 5s ease-in-out 1.4s infinite;
  pointer-events: none;
}
@keyframes plcaro-badge-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@keyframes plcaro-dot {
  0% { box-shadow: 0 0 0 0 hsl(var(--sig-h) 78% 62% / 0.65); }
  70% { box-shadow: 0 0 0 10px hsl(var(--sig-h) 78% 62% / 0); }
  100% { box-shadow: 0 0 0 0 hsl(var(--sig-h) 78% 62% / 0); }
}
@keyframes plcaro-shine { 0%, 60% { left: -45%; } 100% { left: 145%; } }

@media (max-width: 460px) {
  .fiche-plcaro__strip img { width: 72px; height: 72px; }
  .fiche-plcaro__cta { font-size: 17px; padding: 17px 17px 8px; }
  .fiche-plcaro__badge b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .fiche-plcaro__strip { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .fiche-plcaro__cta { animation: none; }
  .fiche-plcaro__badge, .fiche-plcaro__dot { animation: none; }
  .fiche-plcaro__badge::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   ANNUAIRE « LA VAGUE » — la photo porte la carte (choix Terry 2026-07-25)
   Portée : l'annuaire ET les cartes « Dans le même cercle » (.artist-grid--compact),
   qui affichent la même photo et doivent donc partager le même cadrage.
   Correctif Terry 2026-07-27 : sans lui, l'image de ces cartes restait dans le
   flux, non recadrée, et étirait la carte à 689px de haut.
   Photos auto-hébergées : /assets/artists/<slug>.jpg (fetch-artist-covers.mjs).
   ═══════════════════════════════════════════════════════════════════ */

:is(.artist-index, .artist-grid--compact) .artist-card a {
  /* Format fixe : toutes les cartes ont le même gabarit, avec ou sans photo.
     Sans ça, la hauteur de ligne est dictée par la fiche au texte le plus long
     et les cartes sans photo se retrouvent avec un grand vide en bas. */
  aspect-ratio: 1 / 1.1;
  min-height: 0;
  height: auto;
  padding: 17px 17px 8px;
  justify-content: flex-end;
  /* perspective portée par le parent : l'inclinaison au survol (GSAP) reste
     nette au lieu d'aplatir la carte. */
  transform-style: preserve-3d;
}
/* Le rail de couleur et le halo d'angle appartiennent au rendu « fiche liée ».
   Sur l'annuaire, la photo (ou le dégradé d'île) porte seule l'identité. */
:is(.artist-index, .artist-grid--compact) .artist-card a::before,
:is(.artist-index, .artist-grid--compact) .artist-card a::after { display: none; }

/* Visuel de fond : photo plein cadre, ou pastille d'initiales si absente. */
:is(.artist-index, .artist-grid--compact) .artist-card__visual {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
  border-radius: inherit;
}
:is(.artist-index, .artist-grid--compact) .artist-card__photo {
  position: absolute;
  /* débord vertical : laisse la place au léger glissement de parallaxe. */
  inset: -9% 0;
  width: 100%;
  height: 118%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
  transition: filter 0.4s var(--ease);
  will-change: transform;
}
:is(.artist-index, .artist-grid--compact) .artist-card a:hover .artist-card__photo { filter: saturate(1.1) contrast(1.05); }

/* Voile : garantit la lisibilité du nom quelle que soit la photo. */
:is(.artist-index, .artist-grid--compact) .artist-card__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 8, 11, 0.62) 0%, rgba(6, 8, 11, 0.12) 30%, rgba(6, 8, 11, 0.9) 78%, rgba(6, 8, 11, 0.97) 100%);
}
/* Lueur qui suit le pointeur (position injectée en --mx/--my par le JS). */
:is(.artist-index, .artist-grid--compact) .artist-card__glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), hsl(var(--pin-h, 208) 92% 62% / 0.24), transparent 62%);
  transition: opacity 0.32s var(--ease);
}
:is(.artist-index, .artist-grid--compact) .artist-card a:hover .artist-card__glow { opacity: 1; }

/* Sans photo : dégradé de l'île + initiales en filigrane, même surface. */
:is(.artist-index, .artist-grid--compact) .artist-card:not(.artist-card--photo) .artist-card__visual {
  background: linear-gradient(162deg, hsl(var(--pin-h, 208) 46% 17%), var(--ink-card, #12151b) 74%);
}
:is(.artist-index, .artist-grid--compact) .artist-card:not(.artist-card--photo) .artist-card__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: "Anton", "Oswald", Impact, sans-serif;
  font-size: clamp(52px, 8vw, 78px);
  color: rgba(255, 255, 255, 0.14);
  letter-spacing: 0.02em;
}

/* Sous la photo, l'aplat tinté n'apporte rien : fond neutre. */
:is(.artist-index, .artist-grid--compact) .artist-card--photo a { background: var(--ink-card, #12151b); }

/* Compteur de sorties : pastille lisible par-dessus n'importe quelle photo. */
:is(.artist-index, .artist-grid--compact) .artist-card__top {
  position: absolute;
  top: 11px;
  right: 11px;
  left: auto;
}
:is(.artist-index, .artist-grid--compact) .artist-card__works {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 9px;
  background: rgba(6, 8, 11, 0.72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
:is(.artist-index, .artist-grid--compact) .artist-card__works-n { font-size: 15px; line-height: 1; }
:is(.artist-index, .artist-grid--compact) .artist-card__works-l { font-size: 11px; }

/* Texte : remonté sur le voile, ombré pour tenir sur les photos claires. */
:is(.artist-index, .artist-grid--compact) .artist-card__body { margin-top: 0; }
:is(.artist-index, .artist-grid--compact) .artist-card h2,
:is(.artist-index, .artist-grid--compact) .artist-card h3 {
  font-size: clamp(19px, 2.1vw, 23px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.62);
}
:is(.artist-index, .artist-grid--compact) .artist-card__kind {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Période et genres : bruit visuel sur une carte-photo, la fiche les porte. */
:is(.artist-index, .artist-grid--compact) .artist-card__facts .artist-card__fact:nth-child(2),
:is(.artist-index, .artist-grid--compact) .artist-card__genres { display: none; }
:is(.artist-index, .artist-grid--compact) .artist-card__facts { margin-top: 7px; }
:is(.artist-index, .artist-grid--compact) .artist-card__fact dt { display: none; }
:is(.artist-index, .artist-grid--compact) .artist-card__fact dd { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
/* Sorti du flux : masqué, il réservait ~40px de vide sous le nom sur chaque
   carte. En absolu, le bloc nom + île reste collé au bas du cadre. */
:is(.artist-index, .artist-grid--compact) .artist-card__cta {
  position: absolute;
  right: 14px;
  bottom: 12px;
  margin: 0;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
:is(.artist-index, .artist-grid--compact) .artist-card a:hover .artist-card__cta,
:is(.artist-index, .artist-grid--compact) .artist-card a:focus-visible .artist-card__cta { opacity: 1; transform: translateY(0); }

/* État de départ des cartes avant révélation au scroll. Posé par le JS
   (classe sur la grille) : sans JS, tout reste visible. */
.artist-index .artist-grid.is-reveal .artist-card { opacity: 0; }

@media (max-width: 560px) {
  :is(.artist-index, .artist-grid--compact) .artist-card a { aspect-ratio: 1 / 1.16; }
  :is(.artist-index, .artist-grid--compact) .artist-card__cta { display: none; }
}

/* Pas de mouvement gratuit : on garde la photo, on coupe l'animation. */
@media (prefers-reduced-motion: reduce) {
  .artist-index .artist-grid.is-reveal .artist-card { opacity: 1; }
  :is(.artist-index, .artist-grid--compact) .artist-card__photo { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PORTRAIT DE FICHE — la photo de l'artiste dans son propre hero
   Demande Terry 2026-07-27, après l'annuaire : l'annuaire montrait le visage,
   la fiche ne le montrait pas. Même image auto-hébergée (/assets/artists/).
   Classe .artist-hero--portrait posée seulement quand la photo existe : les
   fiches sans photo gardent leur hero d'origine, inchangé.
   ═══════════════════════════════════════════════════════════════════ */

.artist-hero--portrait {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(190px, 26vw, 300px);
  gap: clamp(17px, 4vw, 53px);
  align-items: center;
}
/* L'intro reprend le flux d'origine : rien à recalculer sur les titres. */
.artist-hero--portrait .artist-hero__intro { min-width: 0; }

.artist-portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--hair-strong, rgba(255, 255, 255, 0.16));
  background: linear-gradient(160deg, hsl(var(--sig-h, 210) 40% 16%), var(--ink-card, #12151b) 72%);
  box-shadow: 0 24px 52px -26px rgba(0, 0, 0, 0.85);
}
.artist-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Liseré de la couleur signature : rattache le portrait à l'identité de la fiche
   sans poser de cadre coloré autour de la photo. */
.artist-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px hsl(var(--sig-h, 210) 70% 60% / 0.28);
  pointer-events: none;
}

/* Mobile : le portrait passe au-dessus du nom, en bandeau plus large que haut.
   Un carré plein cadre mangerait le premier écran avant même le titre. */
@media (max-width: 720px) {
  .artist-hero--portrait {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .artist-hero--portrait .artist-portrait {
    order: -1;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
  }
  .artist-hero--portrait .artist-portrait img { object-position: center 28%; }
}

/* ============================================================
   DISCOGRAPHIE COMPLÈTE — .artist-disco
   Le catalogue exhaustif relevé sur les plateformes, distinct de
   .artist-works qui reste la sélection éditoriale.
   V2 (Terry 2026-07-27 : « laid, trop long, difficile à lire ») :
   chaque rangée est un LIEN d'écoute, les rangées sont denses, et
   tout ce qui dépasse 12 titres se replie dans un <details> natif.
   Le HTML reste complet — Google lit tout, seule la hauteur bouge.
   ============================================================ */
.disco-intro {
  margin: 0 0 17px;
  color: var(--txt-faint);
  font-size: 15px;
}
.disco-cols { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .disco-cols { grid-template-columns: 1fr 1fr; gap: 35px; }
}
.disco-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hair-strong);
  font-family: "Cabinet Grotesk", "General Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--txt);
}
.disco-n {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sig);
}
.disco-list { margin: 0; padding: 0; list-style: none; }

/* La rangée entière est cliquable : cible large au doigt comme à la souris. */
.disco-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid var(--hair);
  color: var(--txt);
  text-decoration: none;
  transition: background-color 0.16s ease, padding-left 0.16s ease;
}
.disco-y {
  flex: 0 0 auto;
  min-width: 4ch;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--txt-faint);
  transition: color 0.16s ease;
}
.disco-main { flex: 1 1 auto; min-width: 0; }
.disco-t {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
}
.disco-by {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--txt-faint);
}

/* Le chevron n'apparaît qu'au survol : au repos la colonne reste calme. */
a.disco-row::after {
  content: "\2197";
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--sig);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
a.disco-row:hover,
a.disco-row:focus-visible {
  background: color-mix(in srgb, var(--sig) 9%, transparent);
  padding-left: 8px;
  outline: none;
}
a.disco-row:hover .disco-y,
a.disco-row:focus-visible .disco-y { color: var(--sig); }
a.disco-row:hover::after,
a.disco-row:focus-visible::after { opacity: 1; transform: translateX(0); }
.disco-row--flat { cursor: default; }

/* Repli natif : pas une ligne de JS, et le contenu reste dans le HTML. */
.disco-more { margin-top: 8px; }
.disco-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 17px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--txt);
  transition: border-color 0.16s ease, color 0.16s ease;
}
.disco-more > summary::-webkit-details-marker { display: none; }
.disco-more > summary::after {
  content: "+";
  font-size: 15px;
  line-height: 1;
  color: var(--sig);
}
.disco-more[open] > summary::after { content: "\2212"; }
.disco-more > summary:hover { border-color: var(--sig); color: var(--sig); }
.disco-more[open] > summary { margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
  .disco-row, a.disco-row::after, .disco-y, .disco-more > summary { transition: none; }
}

/* Sélecteur de plateforme — posé par bouyon-disco-platform.js.
   Terry 2026-07-27 : ne pas cantonner le visiteur à une plateforme qu'il n'a
   pas. Masqué tant que le script n'a pas tourné : jamais de bouton mort. */
.disco-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 8px;
  margin: 0 0 26px;
}
.disco-picker[hidden] { display: none; }
.disco-picker__l {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-faint);
}
.disco-picker__set { display: flex; flex-wrap: wrap; gap: 6px; }
.disco-picker__set button {
  padding: 7px 17px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-faint);
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}
.disco-picker__set button:hover { border-color: var(--sig); color: var(--txt); }
/* Le bouton actif prend la couleur de SA plateforme (Terry 2026-07-29, variante B).
   Avant : teinte 14 % de --sig, quasi invisible + rien n'indiquait la bascule.
   Teintes calées pour rester >= 4.5:1 avec le texte (WCAG AA) : Apple et YouTube
   sont assombris par rapport au rouge/rose de marque pur, illisibles sur blanc. */
.disco-picker__set button.is-on {
  border-color: transparent;
  color: #fff;
  font-weight: 800;
}
.disco-picker__set button.is-on[data-plateforme="apple"]   { background: #d70022; color: #fff; }
.disco-picker__set button.is-on[data-plateforme="spotify"] { background: #1db954; color: #04140b; }
.disco-picker__set button.is-on[data-plateforme="deezer"]  { background: #a238ff; color: #fff; }
.disco-picker__set button.is-on[data-plateforme="youtube"] { background: #e00000; color: #fff; }
.disco-picker__set button:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .disco-picker__set button { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   CAPTURE D'ADRESSE — sous le verdict du quiz (2026-08-01)
   Posée après le score, jamais à l'arrivée : le visiteur vient d'aller au bout
   de trois questions, c'est le seul moment de la fiche où il attend une suite.
   Le bouton principal reste le coral (la playlist) ; ce bloc est volontairement
   plus discret pour ne pas lui voler la vedette.
   ════════════════════════════════════════════════════════════ */
.artist-endcard__mail {
  margin-top: 26px;
  padding-top: 17px;
  border-top: 1px solid var(--hair);
  text-align: left;
}
/* --ink / --ink-3 sont les encres pour fond CLAIR. La carte du verdict est sombre :
   les utiliser ici donnait du texte quasi invisible (contraste 1,08 et 1,05 mesurés
   en production, pour un minimum requis de 4,5). Le reste de la carte utilise --txt
   et --txt-faint : ce bloc les suit. */
.artist-endcard__mail-title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--txt);
}
.artist-endcard__mail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.artist-endcard__mail-row[hidden] { display: none; }
.artist-endcard__mail input {
  flex: 1 1 190px;
  min-width: 0;
  min-height: 46px;
  padding: 8px 17px;
  border-radius: 11px;
  border: 1px solid var(--hair-strong);
  background: var(--bg);
  /* Le champ est sombre : le visiteur ne voyait pas l'adresse qu'il tapait
     (contraste 1,01 mesuré en production). */
  color: var(--txt);
  font-size: 16px; /* < 16px déclenche le zoom automatique sur iOS */
}
.artist-endcard__mail input::placeholder {
  color: var(--txt-faint);
  opacity: 1; /* Firefox baisse l'opacité des placeholders par défaut. */
}
.artist-endcard__mail input:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 1px;
}
.artist-endcard__mail button {
  min-height: 46px;
  padding: 8px 17px;
  border-radius: 11px;
  border: 1px solid var(--coral);
  background: transparent;
  color: var(--coral);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.artist-endcard__mail button:hover,
.artist-endcard__mail button:focus-visible {
  background: var(--coral);
  color: var(--coral-ink);
}
.artist-endcard__mail button[disabled] { opacity: 0.55; cursor: progress; }
.artist-endcard__mail-help {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--txt-faint);
}
.artist-endcard__mail-status {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  min-height: 1em;
}
.artist-endcard__mail-status[data-state="ok"] { color: var(--aqua); }
.artist-endcard__mail-status[data-state="error"] { color: var(--coral); }
.artist-endcard__mail .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Vraie pochette : même gabarit que la vignette typographique, donc les deux se
   remplacent sans décaler la grille. */
.artist-work__cover--img {
  object-fit: cover;
  background: hsl(var(--amb-h) 40% 14%);
  box-shadow: none;
  border: 1px solid var(--hair);
}

/* Citation de source à côté d'un fait de timeline (levier GEO, papier
   Aggarwal) : discrète — c'est une note de bas de ligne, pas un appel. */
.artist-timeline .artist-tl-src {
  font-size: 12px;
  padding-block: 5px;
  color: hsl(var(--sig-h) 60% 72% / .75);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.artist-timeline .artist-tl-src::before { content: "— "; text-decoration: none; }
.artist-timeline .artist-tl-src:hover { color: hsl(var(--sig-h) 85% 78%); }

/* Rangée de partage du verdict : le natif (mobile → TikTok, Insta, tout) et
   WhatsApp en direct — le canal nº1 du persona. */
.artist-endcard__share-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.artist-endcard__share--wa { text-decoration: none; }

/* « Ce qui vient de bouger » : les brèves datées qui citent l'artiste. */
.artist-news__list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.artist-news__list a {
  display: flex; gap: 8px; align-items: baseline;
  color: var(--txt); text-decoration: none;
  padding: 8px 17px; border-radius: 12px;
  background: hsl(var(--sig-h) 45% 45% / .08);
  border: 1px solid hsl(var(--sig-h) 45% 55% / .18);
  font-size: 15px; line-height: 1.45;
}
.artist-news__list a:hover, .artist-news__list a:focus-visible { border-color: hsl(var(--sig-h) 70% 62% / .5); }
.artist-news__list time { color: hsl(var(--sig-h) 80% 74%); font-size: 13px; font-variant-numeric: tabular-nums; flex: none; }
.artist-news__all { color: var(--txt-faint, #9aabc9); text-decoration: none; font-size: 14px; display: inline-block; padding: 4px 0; }
.artist-news__all:hover, .artist-news__all:focus-visible { color: var(--txt); text-decoration: underline; text-underline-offset: 3px; }

/* Circulation fiche → fiche : après le verdict, le pari du voisin est l'action
   la plus naturelle — la phrase entière est le lien. */
.artist-endcard__nextbet { margin: 17px 0 2px; font-size: 14px; }
.artist-endcard__nextbet a { color: var(--txt); text-decoration: none; opacity: .85; }
.artist-endcard__nextbet a:hover,
.artist-endcard__nextbet a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.artist-endcard__nextbet b { color: hsl(var(--sig-h) 88% 76%); }

/* Les deux faits promis par le pari : offert dans le HUD, bonus au verdict. */
.artist-pari-progress__gift,
.artist-endcard__bonus {
  margin: 8px 0 8px;
  padding: 8px 17px;
  border-radius: 11px;
  background: hsl(var(--sig-h) 60% 55% / .1);
  border: 1px solid hsl(var(--sig-h) 60% 58% / .3);
  font-size: 14px;
  color: var(--text);
}
.artist-pari-progress__gift b,
.artist-endcard__bonus b { color: hsl(var(--sig-h) 88% 76%); font-weight: 700; }
.artist-pari-progress__gift time,
.artist-endcard__bonus time {
  font-family: 'Cabinet Grotesk', 'Anton', sans-serif;
  font-weight: 800;
  color: hsl(var(--sig-h) 85% 70%);
}

/* ── Bloc « écouter » du premier écran ──────────────────────────────────────
   Ajouté le 2026-08-17. Depuis le 23 juillet, les aperçus IA de Google
   répondent à la place de la fiche : 1 059 affichages en réponse générée pour
   1T1 sur 28 jours, ses clics passent de 280 à 131 à position inchangée. Un
   texte se résume, un son ne se résume pas.
   Le lecteur n'est construit qu'au clic (bouyon-fiche-listen.js) : rien ne
   charge pour ceux qui viennent lire. */
.fiche-listen {
  /* `main` est en flex : sans min-width, l'enfant ne descend pas sous la
     largeur de son contenu et le bloc débordait à 720 px dans un écran de
     500. La marge latérale reprend celle de artist-top. */
  width: min(720px, 100% - 32px);
  min-width: 0;
  margin: 0 auto var(--space-5, 26px);
  padding: 17px;
  background: var(--ink-card, #14171d);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
}

.fiche-listen__eyebrow {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral, #ff6b6b);
}

.fiche-listen__title {
  margin: 0 0 8px;
  font-family: 'Cabinet Grotesk', 'Anton', sans-serif;
  font-size: clamp(18px, 4.4vw, 22px);
  font-weight: 800;
  line-height: 1.15;
  color: #f2f2f2;
}

/* La bande de pochettes : elle dit « il y a de la musique là-dedans » avant
   qu'on ait lu un mot. Bande dupliquée dans le HTML → la boucle est sans
   couture quand on translate de -50 %. Même mécanique que le carrousel de bas
   de fiche, en plus discret. */
.fiche-listen__strip {
  overflow: hidden;
  margin: 0 0 17px;
  /* Les bords s'estompent : la bande semble sortir du cadre au lieu d'être
     tranchée net. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.fiche-listen__rail {
  display: flex;
  gap: 6px;
  width: max-content;
  animation: fiche-listen-slide 40s linear infinite;
}

.fiche-listen:hover .fiche-listen__rail {
  animation-play-state: paused;
}

.fiche-listen__rail img {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
}

@keyframes fiche-listen-slide {
  to {
    transform: translateX(calc(-50% - 3px));
  }
}

.fiche-listen__meta {
  margin: 0 0 17px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(242, 242, 242, 0.72);
}

.fiche-listen__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 0 17px;
  border: 0;
  border-radius: 999px;
  background: var(--coral, #ff6b6b);
  color: var(--coral-ink, #2a0d0d);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.fiche-listen__btn:hover {
  background: var(--coral-soft, rgba(255, 107, 107, 0.85));
}

.fiche-listen__btn:focus-visible {
  outline: 2px solid #f2f2f2;
  outline-offset: 3px;
}

/* Chargé : le bouton reste lisible mais ne réagit plus. */
.fiche-listen__btn[disabled] {
  cursor: default;
  opacity: 0.72;
}

.fiche-listen__player {
  margin-top: 17px;
}

.fiche-listen__player iframe {
  display: block;
  width: 100%;
  height: 352px;
  border: 0;
  border-radius: 12px;
}

@media (min-width: 720px) {
  .fiche-listen__btn {
    width: auto;
    min-width: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fiche-listen__rail {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
}

/* Les deux vues transverses (carte, chronologie) — portes posées le 20/08 en
   tête de l'index des artistes. Sobres : deux liens, pas des cartes. */
.artist-index__vues{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:17px }
.artist-index__vues a{ min-height:44px; display:inline-flex; align-items:center;
  font:700 .82rem/1.2 "JetBrains Mono",ui-monospace,monospace;
  color:var(--b-aqua,#38E1D4); text-decoration:none }
.artist-index__vues a:hover{ color:var(--b-coral,#ff6b6b) }

/* La porte vers la carte, posée sur chaque fiche (20/08). Les fiches font 46 %
   du trafic : c'est là que la carte doit se faire connaître, et le lien est
   nominatif — il ouvre le disque sur l'artiste qu'on vient de lire. */
.artist-carte{ margin:17px 0 }
.artist-carte__lien{ display:flex; align-items:center; gap:17px; padding:17px 17px;
  border-radius:16px; text-decoration:none; min-height:44px;
  background:linear-gradient(135deg,rgba(56,225,212,.10),rgba(124,92,255,.08));
  border:1px solid rgba(56,225,212,.22); transition:border-color .18s,background .18s }
.artist-carte__lien:hover{ border-color:rgba(56,225,212,.5);
  background:linear-gradient(135deg,rgba(56,225,212,.16),rgba(124,92,255,.12)) }
.artist-carte__ic{ font-size:1.5rem; color:var(--b-aqua,#38E1D4); flex:none; line-height:1 }
.artist-carte__txt{ display:grid; gap:3px; min-width:0 }
.artist-carte__txt b{ font-size:.95rem; color:#fff }
.artist-carte__txt i{ font-style:normal; font-size:.82rem; color:rgba(255,255,255,.58) }
.artist-carte__go{ margin-left:auto; color:var(--b-aqua,#38E1D4); flex:none; font-size:1.1rem }

/* La promesse du cadeau, écrite sur le formulaire à la fin du quiz (20/08).
   Le badge est la récompense du jeu ; le cadeau attend derrière l'adresse. */
.artist-endcard__mail-promesse{ margin:6px 0 8px; padding:8px 8px; border-radius:10px;
  background:rgba(255,224,138,.10); border:1px solid rgba(255,224,138,.28);
  font-size:.86rem; color:#FFE08A }

/* ═══ L'INDEX EN PLANCHES PAR ÎLE (direction D, 20/08) ═══
   Remplace la grille de cartes : une section par île, une planche de portraits
   bord à bord. Zéro animation d'apparition — tout est là au chargement. */
.planche-ancres{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  padding:17px clamp(17px,4vw,35px) 5px; -webkit-overflow-scrolling:touch }
.planche-ancres::-webkit-scrollbar{ display:none }
.planche-ancres a{ flex:none; min-height:40px; display:inline-flex; align-items:center; gap:8px;
  padding:8px 17px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  font:700 .76rem/1 "JetBrains Mono",ui-monospace,monospace;
  color:rgba(255,255,255,.7); text-decoration:none }
.planche-ancres a:hover{ background:rgba(255,255,255,.07); color:#fff }
.planche-ancres a i{ width:8px; height:8px; border-radius:50%; flex:none }
.planche-ancres a b{ color:rgba(255,255,255,.35) }

.planche-ile{ margin-top:26px; scroll-margin-top:62px }
.planche-ile > h2{ display:flex; align-items:center; gap:8px;
  margin:0 clamp(17px,4vw,35px) 8px; padding-bottom:8px;
  border-bottom:2px solid color-mix(in srgb, var(--ile-c) 40%, transparent);
  color:var(--ile-c); font:700 .76rem/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.11em; text-transform:uppercase }
.planche-ile > h2 i{ margin-left:auto; font-style:normal; color:rgba(255,255,255,.32) }

.planche{ display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:2px }
.planche-case{ position:relative; aspect-ratio:1; overflow:hidden;
  background:linear-gradient(140deg,#131d33,#0c1120); text-decoration:none; display:block }
.planche-case img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06); transition:filter .28s, transform .5s }
.planche-case:hover img, .planche-case:focus-visible img{ filter:none; transform:scale(1.06) }
.planche-case__ini{ position:absolute; inset:0; display:grid; place-items:center;
  font:800 1.9rem/1 var(--font-d,"Cabinet Grotesk",sans-serif); color:rgba(255,255,255,.16) }
.planche-case figcaption{ position:absolute; inset:auto 0 0 0; padding:17px 8px 7px;
  background:linear-gradient(transparent,rgba(6,10,20,.94)) }
.planche-case figcaption b{ display:block; color:#fff;
  font:800 .74rem/1.15 var(--font-d,"Cabinet Grotesk",sans-serif) }
.planche-case figcaption span{ display:block; margin-top:2px;
  font:600 .56rem/1.2 "JetBrains Mono",ui-monospace,monospace;
  color:rgba(255,255,255,.46); text-transform:uppercase; letter-spacing:.05em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@media (prefers-reduced-motion: reduce){
  .planche-case img{ transition:none }
  .planche-case:hover img{ transform:none }
}

/* Le fil d'Ariane affichait « TIITII NBA NBA » et « Hub Bouyon Bouyon » sur
   l'index : le markup porte un libellé long ET un court pour le responsive,
   mais la règle qui en masque un était conditionnée à `.is-tabbed`, une classe
   que seules les fiches portent. Ici, sans condition. */
/* !important : le bouton parent est `inline-flex !important` et ce fichier
   empile plusieurs surcharges sur ce composant — sans ça, les deux libellés
   restaient visibles côte à côte. */
.artist-breadcrumb__back .artist-breadcrumb__court{ display:none !important }
@media (max-width:520px){
  .artist-breadcrumb__back .artist-breadcrumb__long{ display:none !important }
  .artist-breadcrumb__back .artist-breadcrumb__court{ display:inline !important }
}

/* En-tête court : la phrase d'intro et l'encadré poussaient les portraits sous
   la ligne de flottaison. Le titre, les chiffres, les deux vues — puis le mur. */
.artist-index__hero--court{ padding-bottom:6px }
.artist-index__hero--court h1{ margin-bottom:8px }

/* Compactage de l'en-tête d'index (20/08) : les deux vues et la ligne de
   chiffres occupaient un écran entier avant le premier portrait. */
.artist-index__hero--court .artist-index__stats{ margin:6px 0 8px }
.artist-index__hero--court .artist-index__vues{ gap:6px 17px; margin-top:8px }
.artist-index__hero--court .artist-index__vues a{ min-height:38px; font-size:.76rem }
.artist-index__hero--court + .planche-ancres{ padding-top:8px }

/* ═══ LES DEUX AUTRES VUES — « le chiffre qui monte » (20/08) ═══
   Aucune boite : ni bordure, ni fond, ni coin arrondi. Le chiffre est la
   vedette, ecrit tres grand, et la donnee se dessine derriere lui en fond
   translucide. Deux filets separent, rien de plus. */
.vues{ margin:17px 0 5px }
.vues__v{ position:relative; display:block; padding:26px 0 17px; overflow:hidden;
  text-decoration:none; border-top:1px solid rgba(255,255,255,.10) }
.vues__v:last-child{ border-bottom:1px solid rgba(255,255,255,.10) }
.vues__fond{ position:absolute; inset:0; width:100%; height:100%;
  opacity:.62; pointer-events:none }
.vues__txt{ position:relative; display:block }
.vues__n{ display:block; font:800 clamp(3rem,14vw,5.4rem)/.85 var(--font-d,"Cabinet Grotesk",sans-serif);
  letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.vues__v--carte .vues__n{ color:var(--b-aqua,#38E1D4) }
.vues__v--chrono .vues__n{ color:var(--b-coral,#ff6b6b) }
.vues__u{ display:block; margin-top:3px; font:700 .72rem/1.3 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.52) }
.vues__go{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; min-height:44px;
  font:800 1.1rem/1 var(--font-d,"Cabinet Grotesk",sans-serif); color:#fff }
.vues__go em{ font-style:normal; color:rgba(255,255,255,.45); transition:transform .2s, color .2s }
.vues__v:hover .vues__go em{ transform:translateX(5px) }
.vues__v--carte:hover .vues__go em{ color:var(--b-aqua,#38E1D4) }
.vues__v--chrono:hover .vues__go em{ color:var(--b-coral,#ff6b6b) }
@media (prefers-reduced-motion: reduce){
  .vues__go em{ transition:none }
  .vues__v:hover .vues__go em{ transform:none }
}

/* ══ La parole des lecteurs ══════════════════════════════════════════════
   Onglet ajouté le 24/08. Les fiches reçoivent 49 % des entrées du site
   (450 sessions / 28 j) et n'offraient nulle part où répondre : les
   commentaires n'existaient que sur les chapitres, bien moins visités.
   La teinte signature de l'artiste porte le bloc, comme le reste de sa page. */
.parole { max-width: 62ch; }
.parole__q {
  font-family: var(--font-d, var(--font-display));
  font-size: clamp(1.45rem, 3.2vw, 2.2rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -.02em;
  margin: 0 0 8px; text-wrap: balance; color: var(--txt);
}
.parole__aide { margin: 0 0 26px; color: var(--txt-faint); font-size: 15px; line-height: 1.55; }

.parole__liste { list-style: none; margin: 0 0 35px; padding: 0; display: grid; gap: 17px; }
.parole__liste[hidden] { display: none; }
.bouyon-chapter__comment { padding-left: 17px; border-left: 2px solid hsl(var(--sig-h) 80% 62%); }
.bouyon-chapter__comment-meta { margin: 0 0 3px; display: flex; gap: 8px; align-items: baseline; }
.bouyon-chapter__comment-handle { font-weight: 800; font-size: 14px; color: var(--txt); }
.bouyon-chapter__comment-date {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-faint);
}
.bouyon-chapter__comment-body { margin: 0; line-height: 1.55; font-size: 16px; color: var(--txt); }

.parole__form { display: grid; gap: 17px; }
.parole__piege { position: absolute; left: -9999px; }
.parole__champ { display: grid; gap: 5px; }
.parole__champ > span {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-faint);
}
.parole__champ input,
.parole__champ textarea {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--hair-strong);
  color: var(--txt); font: inherit; font-size: 17px; padding: 8px 0; outline: none; resize: vertical;
  transition: border-color .25s var(--ease);
}
.parole__champ input:focus,
.parole__champ textarea:focus { border-bottom-color: hsl(var(--sig-h) 80% 62%); }
.parole__go {
  justify-self: start; font: inherit; font-weight: 700; font-size: 15px;
  padding: 17px 26px; border: 1px solid transparent; border-radius: 999px;
  background: hsl(var(--sig-h) 80% 62%); color: #12060a;
  cursor: pointer; min-height: 46px;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.parole__go:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px hsl(var(--sig-h) 80% 62%); }
.parole__go[disabled] { opacity: .5; cursor: progress; transform: none; }
.parole__rgpd {
  margin: 0; font-size: 12px; color: var(--txt-faint); line-height: 1.5;
  /* L'adresse de retrait est une obligation : elle doit rester lisible en
     entier, pas se faire couper par le bord du bloc. */
  overflow-wrap: anywhere; max-width: 42ch;
}
.bouyon-chapter__comments-error {
  margin: 0; font-weight: 700; font-size: 14px; color: var(--coral, #ff6b6b);
}
.bouyon-chapter__comments-success { margin: 0; font-weight: 800; font-size: 17px; color: var(--txt); }

/* Le compteur sur l'onglet : un onglet qui annonce « 3 » se clique. */
.parole__compte {
  margin-left: 6px; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 700; color: var(--txt-faint);
}


/* ============================================================
   FICHE LINEAIRE « TYPO » — direction validee par Terry le 24/08
   (prototype /prototypes/fiche-typo). Regle maison du 14/08 :
   « rendre visible par la TYPO, jamais par une boite ». Ce bloc
   FINAL remplace, par cascade, les styles de cartes ci-dessus —
   un seul endroit, reversible en le supprimant.
   ============================================================ */

/* — Tetes de section : eyebrow + titre plein + trait signature — */
.fiche-sec__head { width: min(var(--maxw), calc(100% - 2 * var(--pad))); margin: 0 auto; padding: 62px 0 12px; }
.fiche-sec__k { margin: 0; font-family: "General Sans", "Manrope", system-ui, sans-serif;
  font-weight: 700; font-size: 11px; letter-spacing: .22em; color: rgba(255,255,255,.62); }
.fiche-sec__t { margin: 6px 0 0; font-family: "Cabinet Grotesk", sans-serif; font-weight: 800;
  font-size: clamp(35px, 9vw, 53px); line-height: .98; letter-spacing: -.02em; color: var(--txt); }
.fiche-sec__t::after { content: ""; display: block; width: 53px; height: 3px; margin-top: 14px; border-radius: 2px;
  background: linear-gradient(90deg, hsl(var(--sig-h) 85% 66%), hsl(var(--sig-h) 95% 78%)); }
.artist-pane { display: block; }
main.artist-page { padding-bottom: 98px; }
html { scroll-behavior: smooth; }

/* — La bande identite redevient de la typo — */
.artist-facts { display: block; }
.artist-facts div { padding: 0 0 12px; border: 0; border-radius: 0; background: none; display: block; }
.artist-facts dt { display: inline; font-size: 11px; letter-spacing: .18em; color: hsl(var(--sig-h) 85% 66%); }
.artist-facts dt::after { content: " — "; color: rgba(255,255,255,.3); }
.artist-facts dd { display: inline; font-family: "Cabinet Grotesk", sans-serif; font-weight: 700; font-size: 17px; color: var(--txt); }

/* — Les tags : une ligne ponctuee — */
.artist-tags span { padding: 0; border: 0; border-radius: 0; background: none;
  font-weight: 600; font-size: 13px; color: rgba(255,255,255,.55); }
.artist-tags span:not(:last-child)::after { content: " ·"; color: hsl(var(--sig-h) 85% 66%); margin-left: 8px; }

/* — Le pari : questions posees en clair, reponses en lignes numerotees — */
.artist-pari { border: 0; border-radius: 0; background: none;
  padding: 26px 0 8px; border-top: 1px solid var(--hair); }
.artist-pari__tag { background: none; border: 0; padding: 0;
  font-family: "General Sans", system-ui, sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: .2em; color: hsl(var(--sig-h) 85% 66%); }
.artist-pari__q { font-family: "Cabinet Grotesk", sans-serif; font-weight: 800;
  font-size: clamp(22px, 6vw, 28px); line-height: 1.15; color: var(--txt); }
.artist-pari__opts { display: block; counter-reset: opt; }
.artist-pari__opt { display: block; width: 100%; text-align: left; border: 0; border-radius: 0;
  background: none; border-top: 1px solid rgba(255,255,255,.08); padding: 14px 0;
  font-family: "Cabinet Grotesk", sans-serif; font-weight: 700; font-size: 17px;
  color: rgba(255,255,255,.75); counter-increment: opt; }
.artist-pari__opt::before { content: counter(opt, decimal-leading-zero) "  ";
  font-family: "General Sans", system-ui, sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .1em; color: hsl(var(--sig-h) 85% 66%); }
.artist-pari__opt:not([disabled]):hover { transform: none; color: var(--txt); border-color: rgba(255,255,255,.2); }
.artist-pari__reveal { background: none; border: 0; border-left: 2px solid hsl(var(--sig-h) 85% 66%);
  border-radius: 0; padding: 8px 0 8px 17px; font-style: italic; }

/* — Plateformes : des verbes colores, pas des gelules — */
.artist-platforms__links { display: block; }
.artist-platform { display: flex; align-items: baseline; justify-content: flex-start; gap: 12px;
  min-height: 0; border: 0; border-radius: 0; background: none;
  border-top: 1px solid rgba(255,255,255,.08); padding: 14px 0;
  font-family: "Cabinet Grotesk", sans-serif; font-weight: 800; font-size: 19px; color: var(--txt); }
.artist-platform[href*="spotify"] { color: #1ed760; background: none; border-color: transparent; }
.artist-platform[href*="apple"] { color: #ff9db5; background: none; border-color: transparent; }

/* — Le bouton d'ecoute : un verbe souligne du glisseur — */
.fiche-listen { border: 0; border-radius: 0; background: none; box-shadow: none;
  border-top: 1px solid var(--hair); padding-top: 17px; }
.fiche-listen__btn { width: auto; min-height: 0; border: 0; border-radius: 0; background: none;
  padding: 8px 0; position: relative; font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800; font-size: 22px; color: var(--txt); }
.fiche-listen__btn::after { content: ""; position: absolute; left: 0; bottom: 0; width: 89px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, hsl(var(--sig-h) 85% 66%), hsl(var(--sig-h) 95% 78%));
  box-shadow: 0 0 16px 1px hsl(var(--sig-h) 90% 65% / .8); }

/* — Lettrine + exergue : la lecture rythmee — */
.fiche-lettrine::first-letter { initial-letter: 3; -webkit-initial-letter: 3;
  font-family: "Cabinet Grotesk", sans-serif; font-weight: 800;
  color: hsl(var(--sig-h) 85% 66%); padding-right: 10px; }
.fiche-exergue { width: min(var(--maxw), calc(100% - 2 * var(--pad))); margin: 44px auto; padding: 0; border: 0; }
.fiche-exergue blockquote { margin: 0; font-family: "Cabinet Grotesk", sans-serif; font-weight: 800;
  font-size: clamp(26px, 7.5vw, 35px); line-height: 1.12; letter-spacing: -.01em; color: var(--txt); }

/* — Le verdict enchaine sur la lecture — */
.artist-endcard__histoire { margin: 22px 0 8px; }
.artist-endcard__histoire a { position: relative; display: inline-block; text-decoration: none;
  font-family: "Cabinet Grotesk", sans-serif; font-weight: 800; font-size: 22px; color: var(--txt); }
.artist-endcard__histoire a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 89px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, hsl(var(--sig-h) 85% 66%), hsl(var(--sig-h) 95% 78%));
  box-shadow: 0 0 16px 1px hsl(var(--sig-h) 90% 65% / .8); }
.artist-endcard__histoire a span { color: hsl(var(--sig-h) 85% 70%); }

/* — La barre d'appels tient l'ecran ; la barre de lecture dit qu'on avance — */
.artist-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: linear-gradient(transparent, hsl(var(--amb-h, 220) 30% 5% / .99) 28%); pointer-events: none; }
.artist-actionbar > * { pointer-events: auto; }
.fiche-lecture { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 70;
  background: linear-gradient(90deg, hsl(var(--sig-h) 85% 66%), hsl(var(--sig-h) 95% 78%));
  box-shadow: 0 0 12px hsl(var(--sig-h) 90% 65% / .7); }

@media (max-width: 640px) {
  .fiche-sec__head { padding-top: 44px; }
  .fiche-lettrine::first-letter { initial-letter: 2; -webkit-initial-letter: 2; }
}

/* — Hypertexte entre fiches : un nom cite est une porte, pas un bouton — */
.fiche-lien { color: inherit; text-decoration: none; padding-block: 2px; box-shadow: inset 0 -1px 0 hsl(var(--sig-h) 85% 66% / .55);
  transition: box-shadow .2s ease, color .2s ease; }
.fiche-lien:hover, .fiche-lien:focus-visible { color: hsl(var(--sig-h) 88% 74%);
  box-shadow: inset 0 -2px 0 hsl(var(--sig-h) 90% 68%); }

/* ══ Partage de la fiche (2026-09-01) — memes regles que les chapitres ══ */
.bouyon-chapter__partage {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.bouyon-chapter__partage:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(142, 168, 220, 0.4);
}

.bouyon-chapter__partage:active { transform: scale(0.96); }

.bouyon-chapter__partage.est-copie {
  border-color: var(--aqua);
  color: var(--aqua);
}


/* le bloc de fin : pour le quart de lecteurs qui arrive au bout */
.bouyon-chapter__partage-fin {
  margin: 34px 0;
  padding: 22px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}

.bouyon-chapter__partage-fin-txt {
  max-width: 44ch;
  margin: 8px auto 16px;
  color: var(--muted);
  font-size: 0.95rem;
}

.bouyon-chapter__partage--plein {
  height: 46px;
  padding: 0 22px;
  background: var(--aqua);
  border-color: var(--aqua);
  color: #04121a;
  font-weight: 700;
}

.bouyon-chapter__partage--plein:hover { background: var(--aqua); filter: brightness(1.08); }
.bouyon-chapter__partage--plein.est-copie { color: #04121a; }
.artist-actionbar .bouyon-chapter__partage { height: auto; }
.artist-partage { margin: 34px 0 10px; }


/* ═══ Fiche précédente / suivante DANS LA BARRE (02/09/2026) ═══
   Deux boutons compacts encadrent les appels : la flèche + le nom du voisin
   sur grand écran, la flèche seule sur téléphone où chaque pixel est pris.
   L'aperçu se déplie au-dessus de la barre. */
.fiche-nav { position: relative; display: inline-flex; }
/* `display: grid` sur le panneau bat le `display: none` que l'attribut `hidden`
   applique : sans cette ligne, les deux aperçus restent affichés en permanence
   par-dessus la page (constaté le 02/09). */
.fiche-nav__pop[hidden] { display: none; }
.fiche-nav__btn { padding: 17px 20px; }
/* Pas de reflet qui traverse : il est réservé aux deux appels (écoute et
   playlist). Sur une flèche de 37 px il remplissait tout le bouton. */
.fiche-nav__btn::after { content: none; }
.fiche-nav__btn { animation: none; }
.fiche-nav__mot {
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fiche-nav__btn[aria-expanded="true"] { border-color: hsl(var(--sig-h) 80% 62%); }

/* L'aperçu : un lien entier, portrait à gauche, texte à droite. */
.fiche-nav__pop {
  position: absolute;
  bottom: calc(100% + 10px);
  width: 268px;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas: "img txt" "go go";
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--hair-strong, rgba(255, 255, 255, 0.16));
  background: hsl(var(--amb-h, 220) 30% 7%);
  box-shadow: 0 20px 48px -18px rgba(0, 0, 0, 0.9);
  text-decoration: none;
  color: var(--txt, #fff);
  animation: fiche-nav-pousse 0.22s var(--ease, cubic-bezier(0.2, 0.8, 0.3, 1));
}
.fiche-nav--prec .fiche-nav__pop { left: 0; }
.fiche-nav--suiv .fiche-nav__pop { right: 0; }
/* Le pont : il comble les 10 px entre le bouton et l'aperçu. Sans lui, la
   souris quitte le groupe en chemin et l'aperçu se referme avant d'être
   atteint (mesuré le 02/09). */
.fiche-nav__pop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
}
@keyframes fiche-nav-pousse {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.fiche-nav__img, .fiche-nav__ini {
  grid-area: img;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: hsl(var(--sig-h, 220) 40% 16%);
}
.fiche-nav__ini {
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 800;
  color: hsl(var(--sig-h, 220) 80% 74%);
}
.fiche-nav__txt { grid-area: txt; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fiche-nav__k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aqua, #38e1d4);
}
.fiche-nav__nom { font-size: 17px; font-weight: 800; line-height: 1.15; }
.fiche-nav__metier {
  font-size: 12.5px;
  color: var(--txt-faint, rgba(255, 255, 255, 0.62));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fiche-nav__go {
  grid-area: go;
  padding-top: 9px;
  border-top: 1px solid var(--hair, rgba(255, 255, 255, 0.1));
  font-size: 12.5px;
  font-weight: 700;
  color: hsl(var(--sig-h, 220) 85% 72%);
}
.fiche-nav__pop:hover, .fiche-nav__pop:focus-visible { border-color: hsl(var(--sig-h) 80% 62%); }
.fiche-nav__pop:focus-visible { outline: 2px solid var(--aqua, #38e1d4); outline-offset: 3px; }

/* Téléphone : la flèche seule dans la barre, l'aperçu sur toute la largeur. */
@media (max-width: 640px) {
  .fiche-nav__btn { padding: 8px 11px; }
  .fiche-nav__mot { display: none; }
  .fiche-nav__pop { width: min(268px, calc(100vw - 20px)); }
}
@media (prefers-reduced-motion: reduce) {
  .fiche-nav__pop { animation: none; }
}

/* Écoute sur place, dans le bloc plateformes : pas de carte dans la carte. */
.fiche-listen--artiste {
  width: auto;
  margin: 14px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.fiche-listen--artiste .fiche-listen__player { margin-top: 12px; }

/* Pont BOUNCE de la fiche 1T1 — aperçu validé le 09/09/2026. */
.artist-music-bridge {
  display: grid;
  grid-template-columns: 152px 1fr;
  column-gap: 26px;
  margin: 35px 0;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  scroll-margin-top: 110px;
  color: var(--color-text, #f2f2f2);
  font-family: var(--font-body, Manrope, sans-serif);
}
.artist-music-bridge__cover {
  grid-row: 1 / 5;
  width: 152px;
  height: 152px;
  object-fit: cover;
  align-self: center;
}
.artist-music-bridge__kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral, #ff6b6b);
}
.artist-music-bridge h2 {
  font-family: var(--font-display, 'Cabinet Grotesk', sans-serif);
  font-size: 53px;
  line-height: 1;
  margin: 0 0 8px !important;
  font-weight: 800;
  letter-spacing: 0;
}
.artist-music-bridge p:not(.artist-music-bridge__kicker) {
  font-size: 15px;
  line-height: 1.5;
  color: #d4d4db;
  margin: 0 0 8px;
}
.artist-music-bridge__links {
  display: flex;
  gap: 17px;
  flex-wrap: wrap;
  align-items: center;
}
.artist-music-bridge__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  color: #f2f2f2 !important;
  text-decoration: underline !important;
  text-underline-offset: 5px;
  font-size: 14px;
  font-weight: 600;
}
.artist-music-bridge__links .artist-music-bridge__listen {
  padding: 8px 17px;
  background: var(--coral, #ff6b6b);
  color: #050505 !important;
  text-decoration: none !important;
  border-radius: 998px;
}
.artist-music-bridge a:focus-visible {
  outline: 3px solid #a8ead5;
  outline-offset: 6px;
}
@media (max-width: 650px) {
  .artist-music-bridge {
    grid-template-columns: 89px 1fr;
    column-gap: 17px;
    margin: 26px 0;
    padding: 26px 0;
  }
  .artist-music-bridge__cover {
    width: 89px;
    height: 89px;
    grid-row: 1 / 4;
    align-self: start;
  }
  .artist-music-bridge h2 { font-size: 35px; }
  .artist-music-bridge p:not(.artist-music-bridge__kicker) { font-size: 14px; }
  .artist-music-bridge__links {
    grid-column: 1 / -1;
    margin-top: 17px;
    gap: 8px;
    justify-content: space-between;
  }
  .artist-music-bridge__links a { font-size: 13px; }
}