/* ═══════════════════════════════════════════════════════════════════════════
   LE JEU DE LA FICHE — habillage
   Décisions du 18/08/2026 : docs/decisions/2026-08-18-refonte-fiche-artiste-et-jeu.md
   Toutes les couleurs viennent des tokens du skin lagon du blog.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LE HUD — l'anneau vivant, dans la barre du haut ──
   Il vivait en flottant au-dessus du texte et recouvrait le bouton de
   recherche : il prend désormais sa place dans la navigation, après les
   drapeaux. Cible tactile de 44 px (WCAG 2.5.5), même si l'anneau fait 30. */
.jeu-hud{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:6px 8px 6px 8px; margin-left:8px;
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(12,18,34,.34));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4);
  color:inherit; cursor:pointer; font:inherit; touch-action:manipulation;
  transition:border-color .18s, transform .18s;
}
.jeu-hud:hover{ border-color:rgba(56,225,212,.5); transform:translateY(-1px); }
.jeu-hud:focus-visible{ outline:2px solid #38E1D4; outline-offset:2px; }

.jeu-hud__ring{ position:relative; width:30px; height:30px; flex:none; }
.jeu-hud__ring svg{ transform:rotate(-90deg); display:block; }
.jeu-hud__arc{ transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.3,1), stroke .4s, stroke-width .4s; }
.jeu-hud__pct{
  position:absolute; inset:0; display:grid; place-items:center;
  font:800 .56rem/1 'Cabinet Grotesk',system-ui,sans-serif; color:#38E1D4;
  font-variant-numeric:tabular-nums;
}
.jeu-hud__txt{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.jeu-hud__grade{ font:800 .8rem 'Cabinet Grotesk',system-ui,sans-serif; color:#EEF3FF; white-space:nowrap; }
.jeu-hud__prog{ font-size:.62rem; color:rgba(238,243,255,.58); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* aux deux derniers rangs, l'anneau respire */
@keyframes jeuRespire{
  0%,100%{ box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4), 0 0 0 0 var(--jeu-rang-c,transparent); }
  50%    { box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4), 0 0 14px 2px var(--jeu-rang-c,transparent); }
}
.jeu-hud.is-respire{ animation:jeuRespire 2.6s ease-in-out infinite; }

/* Sous 720 px il ne reste qu'une soixantaine de pixels entre les drapeaux et le
   bord : le HUD se réduit à son anneau. Zone de tap maintenue à 44 px. */
@media (max-width:720px){
  .jeu-hud{ padding:7px; margin-left:5px; min-width:44px; justify-content:center; }
  .jeu-hud__txt{ display:none; }
}

/* ── LE « +1 » qui jaillit du HUD ── */
.jeu-plus{
  position:fixed; z-index:81; pointer-events:none;
  font:800 1.15rem 'Cabinet Grotesk',system-ui,sans-serif; color:#38E1D4;
  text-shadow:0 2px 14px rgba(56,225,212,.7);
}

/* ── LA MONTÉE EN RANG ── */
.jeu-fx{ position:absolute; left:50%; top:50%; pointer-events:none; }
.jeu-fx--ring{ width:60px; height:60px; margin:-26px 0 0 -26px; border-radius:50%;
  border:2.5px solid currentColor; opacity:0; }
.jeu-fx--spark{ width:7px; height:7px; margin:-5px 0 0 -5px; border-radius:50%; opacity:0; }
.jeu-fx--flash{ left:0; top:0; width:100%; height:100%; border-radius:50%; opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.9),transparent 62%); }
.jeu-rankup{
  position:absolute; left:50%; top:6px; transform:translateX(-50%); opacity:0;
  font:800 .7rem 'Cabinet Grotesk',system-ui,sans-serif; letter-spacing:.16em;
  text-transform:uppercase; white-space:nowrap; pointer-events:none;
  padding:5px 8px; border-radius:99px; background:rgba(10,15,30,.8);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); z-index:3;
}

/* ── LE REPLI DU HAUT ──
   Aucune transition de hauteur : le repli suit le doigt, une transition le
   ferait glisser en retard. Le masque en dégradé évite qu'un bouton soit
   tranché net par le bord pendant que le bloc se referme.

   Le masque et `overflow` ne s'appliquent QUE pendant le repli : posés en
   permanence, ils estomperaient le bas du bloc d'écoute même déployé — le
   bouton « Lancer l'écoute » vit précisément là. */
.is-tabbed .artist-top.is-replie, .is-tabbed .fiche-listen.is-replie{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 46px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 46px),transparent);
  will-change:height;
}
.is-tabbed .artist-endcard--verdict{ position:relative; }

@media (prefers-reduced-motion:reduce){
  .jeu-hud.is-respire{ animation:none; }
  .jeu-fx{ display:none; }
  .jeu-hud__arc{ transition:none; }
}

/* ── LA BARRE DU HAUT SOUS 720 px ──
   Elle contenait déjà plus que sa largeur : les deux retours prenaient 224 px
   sur 343, et le bouton de recherche sortait de l'écran. Les libellés passent
   en version courte — pas en icônes seules, deux flèches identiques côte à
   côte ne se distinguent pas. Les `aria-label` d'origine sont inchangés. */
.is-tabbed .artist-breadcrumb__court{ display:none; }
@media (max-width:720px){
  .is-tabbed .artist-breadcrumb__long{ display:none; }
  .is-tabbed .artist-breadcrumb__court{ display:inline; }
  /* Les 18 derniers pixels : sans eux le bouton de recherche reste coupé.
     La barre est balayable, mais un élément entier vaut mieux qu'un geste. */
  .is-tabbed .artist-breadcrumb{ gap:5px; }
  .jeu-hud{ margin-left:0; padding:6px; }
}

/* ── L'ÉCRAN DE COLLECTION ──
   Un panneau, pas une page : il s'ouvre depuis n'importe quelle fiche et rend
   le visiteur là où il était. Il donne enfin une destination à l'anneau. */
.jeu-coll{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:17px; }
.jeu-coll__voile{ position:absolute; inset:0; background:rgba(4,8,18,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.jeu-coll__boite{
  position:relative; width:min(420px,100%); max-height:86vh; overflow-y:auto;
  padding:26px; border-radius:22px; color:#EEF3FF;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(165deg,rgba(28,38,64,.96),rgba(10,15,30,.98));
  box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1.5px 0 rgba(255,255,255,.28);
}
.jeu-coll__x{
  position:absolute; top:8px; right:8px; width:44px; height:44px;
  border:0; border-radius:50%; background:transparent; color:rgba(238,243,255,.7);
  font-size:1.5rem; line-height:1; cursor:pointer;
}
.jeu-coll__x:hover{ color:#fff; background:rgba(255,255,255,.08); }
.jeu-coll__x:focus-visible{ outline:2px solid #38E1D4; outline-offset:2px; }

.jeu-coll__tete{ display:flex; align-items:center; gap:17px; margin-bottom:17px; }
.jeu-coll__blason{ width:62px; flex:none; }
.jeu-coll__blason svg{ width:100%; height:auto; display:block; }
.jeu-coll__grade{ margin:0; font:800 1.22rem 'Cabinet Grotesk',system-ui,sans-serif; }
.jeu-coll__compte{ margin:2px 0 0; font-size:.82rem; color:rgba(238,243,255,.66);
  font-variant-numeric:tabular-nums; }
.jeu-coll__next{ margin:6px 0 0; font-size:.72rem; color:#38E1D4; }

.jeu-coll__axes{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
/* Une colonne de plus pour l'ecusson de l'axe (Terry 19/08 : « la Guadeloupe
   representee par la forme de son ile »). 26 px : assez pour reconnaitre un
   papillon, assez peu pour que onze lignes tiennent sans deborder. */
.jeu-coll__axe{ display:grid; grid-template-columns:26px 1fr 84px auto; align-items:center; gap:8px; }
.jeu-coll__ecusson{ width:26px; height:30px; display:block; }
.jeu-coll__axe.is-complet .jeu-coll__ecusson{ filter:drop-shadow(0 0 5px rgba(255,224,138,.45)); }
.jeu-coll__nom{ font-size:.84rem; min-width:0; }
.jeu-coll__barre{ height:7px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
.jeu-coll__barre i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#38E1D4,#7C5CFF); transition:width .5s cubic-bezier(.2,.8,.3,1); }
.jeu-coll__n{ font:700 .76rem 'Cabinet Grotesk',system-ui,sans-serif;
  font-variant-numeric:tabular-nums; min-width:44px; text-align:right; }
.jeu-coll__n span{ color:rgba(238,243,255,.42); font-weight:500; }
.jeu-coll__axe.is-complet .jeu-coll__nom::after{ content:' ✦'; color:#FFE08A; }
.jeu-coll__vide{ margin:0; font-size:.86rem; color:rgba(238,243,255,.62); }

@media (max-width:420px){
  /* la colonne de l'ecusson passe a 22 px sur petit ecran, mais elle reste :
     sans elle la grille n'a que trois pistes pour quatre elements, et le
     compteur retombe sous le nom (mesure : lignes de 87 px, barre a 0 px) */
  .jeu-coll__axe{ grid-template-columns:22px minmax(0,1fr) 54px auto; gap:8px; }
  .jeu-coll__ecusson{ width:22px; height:25px; }
}

/* ── LA CARTE DE COLLECTION ──
   Le résultat comme objet, pas comme chiffre : le visiteur repart avec « ce
   qu'il est » plutôt qu'avec « ce qu'il a fait ». Cadre iridescent, photo,
   rareté, trois statistiques — la forme validée en preview. */
.jeu-carte{
  margin:0 auto 17px; max-width:340px; padding:5px; border-radius:18px;
  background:linear-gradient(135deg,#FFE08A,#38E1D4 35%,#2E9BFF 65%,#7C5CFF);
}
.jeu-carte[hidden]{ display:none; }
.jeu-carte__in{
  position:relative; overflow:hidden; border-radius:14px; text-align:center;
  padding:17px 17px 17px; background:linear-gradient(170deg,#12203C,#0A0F1E 72%);
}
.jeu-carte__rare{
  position:absolute; top:11px; right:12px; padding:3px 8px; border-radius:99px;
  font:800 .55rem 'Cabinet Grotesk',system-ui,sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:#FFE08A;
  background:linear-gradient(90deg,rgba(255,224,138,.25),rgba(124,92,255,.25));
}
.jeu-carte__pf{
  display:block; width:78px; height:78px; margin:6px auto 8px; border-radius:50%;
  object-fit:cover; border:3px solid rgba(56,225,212,.6);
  box-shadow:0 0 26px rgba(56,225,212,.35);
}
.jeu-carte__blason{ position:relative; width:88px; margin:0 auto 8px; }
.jeu-carte__blason svg{ width:100%; height:auto; display:block; }
.jeu-carte__grade{
  margin:0 0 5px; letter-spacing:-.02em; color:#fff;
  font:800 clamp(1.6rem,6.5vw,2.1rem)/1 'Cabinet Grotesk',system-ui,sans-serif;
}
.jeu-carte__who{ margin:0 0 17px; font-size:.84rem; color:rgba(238,243,255,.66); }
.jeu-carte__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  padding-top:8px; border-top:1px solid rgba(255,255,255,.1);
}
.jeu-carte__s b{
  display:block; color:#38E1D4; font-variant-numeric:tabular-nums;
  font:800 1.15rem 'Cabinet Grotesk',system-ui,sans-serif;
}
.jeu-carte__s span{
  font:600 .55rem system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(238,243,255,.45);
}
/* Le score brut faisait doublon avec la statistique « Score » de la carte. */
.is-tabbed .artist-endcard--verdict:has(.jeu-carte:not([hidden])) .artist-pari__score-final{ display:none; }

/* ── LE RENDEZ-VOUS DU JOUR ──
   Une seule fiche désignée par jour, la même pour tous : c'est ce qui donne
   une raison de revenir. La série compte les jours consécutifs. */
.jeu-coll__jour{
  margin:0 0 17px; padding:17px 17px; border-radius:14px;
  border:1px solid rgba(56,225,212,.28);
  background:linear-gradient(160deg,rgba(56,225,212,.10),rgba(124,92,255,.07));
}
.jeu-coll__jour[hidden]{ display:none; }
.jeu-coll__jourl{
  margin:0 0 6px; font:800 .58rem 'Cabinet Grotesk',system-ui,sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:#38E1D4;
}
.jeu-coll__jourrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.jeu-coll__journ{ font:800 1.02rem 'Cabinet Grotesk',system-ui,sans-serif; color:#EEF3FF; }
.jeu-coll__go{
  flex:none; min-height:34px; display:inline-flex; align-items:center; padding:0 17px;
  border-radius:99px; text-decoration:none; white-space:nowrap;
  font:800 .74rem 'Cabinet Grotesk',system-ui,sans-serif;
  color:#08111F; background:linear-gradient(90deg,#38E1D4,#7CF0C8);
}
.jeu-coll__go:hover{ filter:brightness(1.08); }
.jeu-coll__go:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.jeu-coll__fait{ flex:none; font-size:.74rem; color:#7CF0C8; white-space:nowrap; }
.jeu-coll__serie{ margin:8px 0 0; font-size:.72rem; color:rgba(238,243,255,.6); }

/* La pastille d'appel : elle ne s'allume que si le rendez-vous est en attente. */
.jeu-hud.a-jouer::after{
  content:""; position:absolute; top:5px; right:5px; width:9px; height:9px;
  border-radius:50%; background:#38E1D4; box-shadow:0 0 0 2px rgba(10,15,30,.9);
}
.jeu-hud{ position:relative; }
@media (prefers-reduced-motion:no-preference){
  @keyframes jeuAppel{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.35); opacity:.65 } }
  .jeu-hud.a-jouer::after{ animation:jeuAppel 2s ease-in-out infinite; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA COLONNE ÉDITORIALE — décision 2 du 18/08
   Point de départ : « je trouve la page trop AI slop avec les cadres fades ».
   Les cartes arrondies empilées faisaient générique. Ici : aucun cadre, des
   filets fins entre les sections, une lettrine, et une colonne qui tient la
   largeur de lecture au lieu de s'étaler sur 1 158 px.
   Les sélecteurs valent `.is-tabbed .artist-panes` (0,2,0) pour passer devant
   les règles de bouyon-artists.css sans recourir à !important.
   ═══════════════════════════════════════════════════════════════════════════ */

.is-tabbed .artist-panes{
  /* Le panneau perd son cadre : il ne reste que le texte sur le décor. */
  max-width:680px; margin-inline:auto;
  background:none; border:0; border-radius:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
/* La barre d'action flottante recouvrait la fin du texte. */
.is-tabbed .artist-panes .artist-pane{ padding-bottom:98px; }

/* Les sections se séparent par un filet, jamais par une carte.
   `width` et `margin` sont repris : la règle d'origine calcule
   `min(--maxw, 100% - 2*--pad)`, un second retrait de 112 px qui décalait le
   récit de 56 px par rapport au lede et aux tags. Le bornage se fait
   désormais une seule fois, sur la colonne. */
/* Un seul bornage, celui de la colonne : chaque bloc du panneau part du même
   bord. Sans ça, faits, récit et FAQ s'alignaient chacun à leur façon. */
.is-tabbed .artist-panes .artist-pane > *{ width:100%; margin-inline:0; max-width:none; }

.is-tabbed .artist-panes .artist-section{
  width:100%; margin-inline:0;
  padding:35px 0 6px; border-top:1px solid rgba(238,243,255,.12);
  background:none; border-radius:0; box-shadow:none;
}
.is-tabbed .artist-panes .artist-section h2{
  margin:0 0 17px; color:#fff; letter-spacing:-.03em;
  font:800 clamp(1.5rem,4.4vw,2.1rem)/1.05 'Cabinet Grotesk',system-ui,sans-serif;
}
.is-tabbed .artist-panes .artist-section p,
.is-tabbed .artist-panes .artist-lede p,
.is-tabbed .artist-panes .bouyon-chapter__p{
  max-width:64ch; line-height:1.78; margin-bottom:1.35em;
  color:rgba(238,243,255,.84);
}

/* La lettrine ouvre chaque section — le seul ornement de la page. */
.is-tabbed .artist-panes .artist-section > p:first-of-type::first-letter{
  float:left; margin:5px 8px 0 0;
  font:800 3.4rem/.82 'Cabinet Grotesk',system-ui,sans-serif;
  background:linear-gradient(160deg,#7BF3E8,#38E1D4 55%,#2E9BFF);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Les faits deviennent une ligne de repères, plus une grille de cartes. */
.is-tabbed .artist-panes .artist-strip{
  padding:17px 0 5px; border-bottom:1px solid rgba(238,243,255,.12);
}
.is-tabbed .artist-panes .artist-facts{ display:flex; flex-wrap:wrap; gap:6px 26px; }
.is-tabbed .artist-panes .artist-facts > div{
  display:flex; align-items:baseline; gap:7px;
  background:none; border:0; border-radius:0; padding:0; box-shadow:none;
}
.is-tabbed .artist-panes .artist-facts dt{
  margin:0; letter-spacing:.13em; text-transform:uppercase;
  font:700 .6rem system-ui,sans-serif; color:rgba(238,243,255,.42);
}
.is-tabbed .artist-panes .artist-facts dd{
  margin:0; color:#EEF3FF;
  font:600 .88rem 'Cabinet Grotesk',system-ui,sans-serif;
}
.is-tabbed .artist-panes .artist-tags span{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

@media (max-width:720px){
  .is-tabbed .artist-panes .artist-section{ padding-top:26px; }
  .is-tabbed .artist-panes .artist-section > p:first-of-type::first-letter{ font-size:2.9rem; }
}

/* ── L'ÉVENTAIL — le cadeau, décision 6 du 18/08 ──
   Le dessin précédent était une boîte-cadeau en 16 formes primitives, décrite
   par l'audit comme « du clipart ». Ici ce sont les vraies pochettes de la
   playlist : ce qu'on offre est ce qu'on montre. Au repos elles forment un
   paquet ; à l'ouverture elles se déploient. */
.fiche-gift__fan{ position:relative; width:230px; height:132px; margin:0 auto 17px; }
.fiche-gift__fanc{
  position:absolute; top:6px; left:50%; width:96px; height:96px; margin-left:-53px;
  border-radius:10px; overflow:hidden; background:#0d1526;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 8px 22px rgba(0,0,0,.5);
  transform:translateX(calc((var(--i) - 2) * 5px)) rotate(calc((var(--i) - 2) * 2.2deg));
  transition:transform .5s cubic-bezier(.16,1.2,.3,1);
}
.fiche-gift__fanc img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (prefers-reduced-motion:reduce){
  .fiche-gift__fanc{ transition:none; }
}

/* ── LA COUCHE DE BOUYON DU PALIER ──
   Chaque rang porte une couche du genre, dans l'ordre où il s'est fabriqué.
   Ce n'est pas de l'ornement : l'effet comportemental de la gamification est
   le plus faible mesuré (g = 0,25, Sailer & Homner 2020) et son seul
   modérateur significatif est la présence d'une fiction. */
.jeu-carte__couche{
  margin:0 0 17px; padding:0 6px; font-size:.68rem; line-height:1.45;
  color:rgba(238,243,255,.5);
}
.jeu-coll__couche{
  margin:3px 0 0; font-size:.68rem; line-height:1.45;
  color:rgba(238,243,255,.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS — décision 4 du 18/08 : « je veux liquid glasses »,
   puis « je n'aime pas l'effet arrondi ».
   Quatre couches, aucune facultative :
     1. la RÉFRACTION (filtre SVG #liquid) — le fond se déforme, il ne fait
        pas que flouter ;
     2. flou 14 px + saturation 190 % + une pointe de luminosité ;
     3. le reflet spéculaire sur le bord haut, plus vif qu'un simple liseré ;
     4. un halo sur tout le contour, qui donne l'épaisseur.
   La FORME est une barre franche, pleine largeur — pas une pilule.
   ═══════════════════════════════════════════════════════════════════════════ */
.is-tabbed .artist-tabs{
  position:sticky; top:0; z-index:60;
  margin:0; width:100%; max-width:none; border-radius:0;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 42%,rgba(12,18,34,.30));
  -webkit-backdrop-filter:url(#liquid) blur(14px) saturate(190%) brightness(1.08);
  backdrop-filter:url(#liquid) blur(14px) saturate(190%) brightness(1.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -1px 1px rgba(255,255,255,.10),
    inset 0 0 26px rgba(255,255,255,.06),
    0 14px 40px rgba(0,0,0,.34),
    0 2px 8px rgba(0,0,0,.20);
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  /* PAS d'isolation : elle crée un contexte d'empilement qui neutralise
     backdrop-filter, et le verre redevient un simple fond plat. */
  isolation:auto;
}
.is-tabbed .artist-tabs::-webkit-scrollbar{ display:none; }

/* le reflet qui court le long du bord supérieur */
.is-tabbed .artist-tabs::before{
  content:""; position:absolute; inset:0 0 auto 0; height:52%; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent);
}

/* ── LES RETOURS EN ICÔNES ──
   Ils prenaient 258 px sur la barre, soit 66 % de sa largeur. Réduits à leur
   flèche : 88 px à deux, 23 %. Les `aria-label` d'origine portent le sens —
   « Retour au site TIITII NBA », « Retour au hub Bouyon » — donc rien n'est
   perdu pour un lecteur d'écran. */
.is-tabbed .artist-breadcrumb__back{
  font-size:0; width:44px; min-width:44px; height:44px; padding:0; gap:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.is-tabbed .artist-breadcrumb__back-arrow{ font-size:1.15rem; line-height:1; }

/* Deux flèches identiques côte à côte ne se distinguent pas : l'une ramène au
   site TIITII NBA, l'autre au hub Bouyon. La première porte une maison. */
.is-tabbed .artist-breadcrumb__back--home .artist-breadcrumb__back-arrow{ font-size:0; display:inline-flex; }
.is-tabbed .artist-breadcrumb__back--home svg{ display:block; }

/* ═══════════════════════════════════════════════════════════════════════════
   PLUS DE BOÎTE GÉNÉRIQUE — la suite de la décision 2
   Le reproche « AI slop » vise une signature précise : des cartes arrondies
   empilées, toutes de même largeur, bordées du même translucide, avec le même
   padding et aucune hiérarchie. Le portrait en était sorti ; l'onglet du pari,
   le verdict, l'écoute et la FAQ y étaient restés — 16 cadres.
   Le cadre n'est pas supprimé, il est REMPLACÉ : un filet sépare, la
   numérotation situe, la taille du texte hiérarchise.
   ═══════════════════════════════════════════════════════════════════════════ */
.is-tabbed .artist-panes .artist-pari,
.is-tabbed .artist-panes .artist-endcard,
.is-tabbed .artist-panes .artist-faq__item,
.artist-page .fiche-listen{
  background:none; border:0; border-radius:0; box-shadow:none;
}

/* Les paris se suivent, séparés par un filet — comme des questions dans un
   magazine, pas comme des cartes empilées. */
.is-tabbed .artist-panes .artist-pari{
  padding:26px 0 8px; border-top:1px solid rgba(238,243,255,.12);
}
.is-tabbed .artist-panes .artist-pari:first-of-type{ border-top:0; }
/* la numérotation prend le relais du cadre : c'est elle qui situe la question */
.is-tabbed .artist-panes .artist-pari__tag{
  display:block; margin-bottom:8px; color:#38E1D4;
  font:800 .62rem 'Cabinet Grotesk',system-ui,sans-serif;
  letter-spacing:.18em; text-transform:uppercase;
}
.is-tabbed .artist-panes .artist-pari__q{
  font:700 1.18rem/1.35 'Cabinet Grotesk',system-ui,sans-serif; color:#fff; margin:0 0 17px;
}

/* Les réponses restent des BOUTONS : elles gardent une surface, sinon plus
   rien ne dit qu'on peut cliquer. Mais la surface s'efface — un filet, un fond
   à peine posé, un arrondi discret. */
.is-tabbed .artist-panes .artist-pari__opt{
  border-radius:10px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  box-shadow:none; transition:border-color .18s, background .18s;
}
.is-tabbed .artist-panes .artist-pari__opt:hover{
  border-color:rgba(56,225,212,.45); background:rgba(56,225,212,.07);
}

/* Le verdict : plus de carte, un filet franc au-dessus. La carte de collection
   qu'il contient porte, elle, son propre cadre — c'est le seul de la page, et
   c'est ce qui le rend remarquable. */
.is-tabbed .artist-panes .artist-endcard{
  padding:26px 0 8px; border-top:1px solid rgba(56,225,212,.28);
}

/* La FAQ : des questions séparées par un filet. */
.is-tabbed .artist-panes .artist-faq__item{
  padding:17px 0; border-top:1px solid rgba(238,243,255,.10);
}

/* Le bloc de promesse — « 5 faits sur X, le premier est offert » — était la
   dernière carte de la page. Il ne devient pas invisible pour autant : c'est
   lui qui porte l'engagement et la barre de progression. Il échange son cadre
   contre un filet vertical, la marque d'un aparté plutôt que d'une boîte. */
.is-tabbed .artist-panes .artist-pari-progress{
  background:none; border:0; border-radius:0; box-shadow:none;
  border-left:2px solid rgba(56,225,212,.45);
  padding:5px 0 8px 17px;
}

/* ── LE PARI D'UNE PAGE DE GENRE ──
   Styles autonomes : les chapitres ne chargent pas bouyon-artists.css, où
   vivent ceux des fiches. Même sobriété que sur une fiche — un filet sépare,
   la numérotation situe, aucune carte. */
.bouyon-chapter__pari{
  width:min(720px,100% - 32px); margin:0 auto 35px; padding:26px 0 5px;
  border-top:1px solid rgba(238,243,255,.14); border-bottom:1px solid rgba(238,243,255,.14);
}
.bouyon-chapter__pari-hook{
  margin:0 0 17px; color:#fff; letter-spacing:-.01em;
  font:800 clamp(1.15rem,3vw,1.45rem)/1.3 'Cabinet Grotesk',system-ui,sans-serif;
}
.bouyon-chapter__pari .artist-pari{ padding:0 0 17px; }
.bouyon-chapter__pari .artist-pari + .artist-pari{
  padding-top:17px; border-top:1px solid rgba(238,243,255,.10);
}
.bouyon-chapter__pari .artist-pari__tag{
  display:block; margin-bottom:7px; color:#38E1D4;
  font:800 .6rem 'Cabinet Grotesk',system-ui,sans-serif;
  letter-spacing:.18em; text-transform:uppercase;
}
.bouyon-chapter__pari .artist-pari__q{
  margin:0 0 8px; color:#fff;
  font:700 1.08rem/1.35 'Cabinet Grotesk',system-ui,sans-serif;
}
.bouyon-chapter__pari .artist-pari__opts{ display:grid; gap:8px; }
.bouyon-chapter__pari .artist-pari__opt{
  width:100%; text-align:left; padding:17px 17px; min-height:44px;
  border-radius:10px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035); color:inherit; font:inherit; cursor:pointer;
  transition:border-color .18s, background .18s;
}
.bouyon-chapter__pari .artist-pari__opt:hover{
  border-color:rgba(56,225,212,.45); background:rgba(56,225,212,.07);
}
.bouyon-chapter__pari .artist-pari__opt.good{
  border-color:rgba(80,220,140,.7); background:rgba(80,220,140,.12);
}
.bouyon-chapter__pari .artist-pari__opt.bad{
  border-color:rgba(255,107,107,.6); background:rgba(255,107,107,.10);
}
/* la révélation n'apparaît qu'une fois répondu — c'est le quiz qui la montre */
.bouyon-chapter__pari .artist-pari__reveal{
  display:none; margin-top:8px; padding-left:17px;
  border-left:2px solid rgba(56,225,212,.5);
  font-size:.92rem; line-height:1.5; color:rgba(238,243,255,.8);
}
.bouyon-chapter__pari .artist-pari.done .artist-pari__reveal{ display:block; }

/* ═══════════════════════════════════════════════════════════════════════════
   GARDER SA COLLECTION — l'invitation au compte

   Elle n'apparait qu'apres un badge gagne, une seule fois. Pas de fenetre
   modale, pas de voile : une carte posee sous le resultat, qu'on peut ignorer
   sans rien fermer. Le jeu continue derriere.
   ═══════════════════════════════════════════════════════════════════════════ */
.compte-invite{
  margin:17px 0 0; padding:17px 17px; display:grid; gap:8px;
  background:linear-gradient(150deg,rgba(56,225,212,.10),rgba(124,92,255,.07));
  border-radius:16px}
.compte-invite__titre{
  margin:0; font:800 .96rem/1.25 var(--font-d,inherit); color:#fff;
  letter-spacing:.01em}
.compte-invite__sous{
  margin:0; font-size:.8rem; line-height:1.45; color:rgba(255,255,255,.62)}
.compte-invite__form{ display:flex; gap:8px; flex-wrap:wrap }
.compte-invite__champ{
  flex:1 1 190px; min-width:0; padding:8px 17px; border-radius:11px;
  border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.28);
  color:#fff; font-size:.88rem; min-height:44px}
.compte-invite__champ::placeholder{ color:rgba(255,255,255,.34) }
.compte-invite__champ:focus-visible{
  outline:2px solid var(--b-aqua,#38E1D4); outline-offset:2px; border-color:transparent}
.compte-invite__ok{
  flex:0 0 auto; padding:8px 17px; min-height:44px; border:0; border-radius:11px;
  background:var(--b-aqua,#38E1D4); color:#04121a; font-weight:800; font-size:.86rem;
  cursor:pointer}
.compte-invite__ok:disabled{ opacity:.55; cursor:progress }
.compte-invite__non{
  justify-self:start; padding:6px 0; min-height:34px; border:0; background:none;
  color:rgba(255,255,255,.44); font-size:.76rem; text-decoration:underline;
  cursor:pointer}
.compte-invite__dit{
  margin:0; font-size:.8rem; color:var(--b-aqua,#38E1D4); min-height:1px}

/* Le retour depuis le lien recu par email : une confirmation qui passe. */
.compte-flash{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60;
  padding:8px 17px; border-radius:999px; background:rgba(6,12,22,.94);
  color:#fff; font:700 .84rem/1 var(--font-m,inherit);
  box-shadow:0 10px 34px rgba(0,0,0,.5); animation:flashEntre .34s ease both}
@keyframes flashEntre{ from{opacity:0; transform:translate(-50%,10px)} to{opacity:1; transform:translate(-50%,0)} }
@media (prefers-reduced-motion: reduce){ .compte-flash{ animation:none } }

/* ── L'ESPACE DU COMPTE ────────────────────────────────────────────────────
   Il vit dans la collection, sous les badges. Trois blocs facultatifs :
   classement, sorties par mail, adresse. Tout est optionnel — on peut garder
   sa collection sans jamais rien remplir de plus. */
.compte-espace{ margin-top:26px; padding-top:17px; border-top:1px solid rgba(255,255,255,.09);
  display:grid; gap:17px }
.compte-espace__qui{ margin:0; font:600 .74rem/1 "JetBrains Mono",ui-monospace,monospace;
  color:rgba(255,255,255,.4); letter-spacing:.04em; word-break:break-all }
.compte-bloc{ display:grid; gap:8px }
.compte-bloc__titre{ margin:0; font:800 .84rem/1.2 var(--font-d,inherit); color:#fff;
  letter-spacing:.02em }
.compte-bloc__aide{ margin:0; font-size:.76rem; line-height:1.45; color:rgba(255,255,255,.5) }

.compte-classement{ list-style:none; margin:0; padding:0; display:grid; gap:5px }
.compte-classement__l{ display:grid; grid-template-columns:26px 1fr auto auto; gap:8px;
  align-items:center; padding:6px 8px; border-radius:9px; font-size:.82rem }
.compte-classement__l b{ font:800 .78rem/1 "JetBrains Mono",ui-monospace,monospace;
  color:rgba(255,255,255,.4) }
.compte-classement__l span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff }
.compte-classement__l i{ font:700 .78rem/1 "JetBrains Mono",ui-monospace,monospace;
  font-style:normal; color:var(--b-aqua,#38E1D4) }
.compte-classement__l.est-moi{ background:rgba(56,225,212,.12) }
.compte-classement__l.est-moi b{ color:var(--b-aqua,#38E1D4) }
.compte-classement__sig{ border:0; background:none; padding:5px 6px; min-height:28px;
  color:rgba(255,255,255,.26); font-size:.64rem; cursor:pointer; text-decoration:underline }
.compte-classement__sig:hover{ color:var(--b-coral,#ff6b6b) }
.compte-classement__sig:disabled{ opacity:.35; cursor:default; text-decoration:none }

.compte-case{ display:flex; gap:8px; align-items:flex-start; cursor:pointer;
  font-size:.82rem; line-height:1.4; color:rgba(255,255,255,.86); min-height:44px;
  padding:6px 0 }
.compte-case input{ width:20px; height:20px; margin-top:1px; flex:none; accent-color:var(--b-aqua,#38E1D4) }


.compte-espace__pied{ display:flex; gap:17px; flex-wrap:wrap; align-items:center }
.compte-espace__danger{ color:rgba(255,107,107,.6) }
.compte-espace__danger:hover{ color:var(--b-coral,#ff6b6b) }

@media (min-width:520px){
    .compte-adresse .compte-champ:nth-child(1),
  .compte-adresse .compte-champ:nth-child(2),
  .compte-adresse .compte-champ:nth-child(3){ grid-column:1 / -1 }
  .compte-adresse button, .compte-adresse p{ grid-column:1 / -1 }
}

/* ── LE KIT ARTISTE ──
   Une invitation discrète en pied de fiche : elle ne parle qu'à l'artiste
   lui-même (et son équipe). Pas un bloc pour le visiteur. */
.kit-artiste{ margin:26px 0 8px; padding:17px 17px; border-radius:14px;
  background:linear-gradient(140deg,rgba(255,107,107,.09),rgba(124,92,255,.06));
  display:grid; gap:8px; justify-items:start }
.kit-artiste__q{ margin:0; font-size:.82rem; color:rgba(255,255,255,.6) }
.kit-artiste__btn{ border:0; border-radius:11px; padding:8px 17px; min-height:44px;
  background:var(--b-coral,#ff6b6b); color:#1a0808; font-weight:800; font-size:.88rem;
  cursor:pointer }
.kit-artiste__btn:hover{ filter:brightness(1.08) }
.kit-artiste__dit{ margin:0; font-size:.78rem; color:var(--b-aqua,#38E1D4); min-height:1px }


/* — Fiche lineaire « typo » (24/08) : le HUD du pari s'ecrit a plat — */
.jeu-hud { background: none; border: 0; border-radius: 0; box-shadow: none;
  padding-left: 0; padding-right: 0; border-top: 1px solid rgba(255,255,255,.1); }