/* Polices servies par holyb.re — aucun appel a Google (CNIL) */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/anton-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/jetbrains-mono-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/jetbrains-mono-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/manrope-300.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/manrope-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/manrope-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500; font-display: swap; src: url(../fonts/playfair-display-500-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== SITE ===== */
:root{
  color-scheme:dark;                 /* coupe le « mode sombre forcé » des navigateurs */
  --logo:url("../../assets/img/logo.jpg");
  --banner:url("../../assets/img/banniere.jpg");
  --noir:#050403; --noir-2:#0b0907; --carbone:#141110; --carbone-2:#1d1917;
  --or:#e3b24c; --or-clair:#f7de9c; --or-sombre:#a97b22;
  --craie:#f3eee6; --craie-3:rgba(243,238,230,.62); --craie-2:rgba(243,238,230,.55);
  --trait:rgba(227,178,76,.22);
  --max:1180px; --ease:cubic-bezier(.16,.84,.28,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--noir);color-scheme:dark}
body{margin:0;background:var(--noir);color:var(--craie);
  font-family:'Manrope',system-ui,sans-serif;font-weight:300;
  font-size:clamp(15px,1.02vw,17px);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--or);color:var(--noir)}
:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px;border-radius:2px}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:radial-gradient(rgba(255,255,255,.9) .5px,transparent .5px);
  background-size:3px 3px;mix-blend-mode:overlay}
.wrap{width:min(100% - 2.6rem,var(--max));margin-inline:auto}

.display{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.86;letter-spacing:.005em}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.22em;font-size:.66rem}
.script{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500}
.or{color:var(--or)}
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;color:var(--or);margin:0 0 1.3rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--or);opacity:.65}

/* rideau d'ouverture */
#curtain{position:fixed;inset:0;z-index:100;pointer-events:none}
#curtain .panel{position:absolute;top:0;bottom:0;width:50.2%;background:var(--noir);transition:transform 1.15s var(--ease) .55s}
#curtain .panel.l{left:0}
#curtain .panel.r{right:0}
#curtain .seam{position:absolute;left:50%;top:50%;width:1px;height:0;
  background:linear-gradient(180deg,transparent,var(--or-clair),transparent);
  transform:translate(-50%,-50%);box-shadow:0 0 26px 3px rgba(227,178,76,.55);
  transition:height .55s var(--ease),opacity .5s ease .9s}
.ready #curtain .seam{height:100%}
.ready #curtain .panel.l{transform:translateX(-100%)}
.ready #curtain .panel.r{transform:translateX(100%)}
.ready #curtain .seam{opacity:0}
.done #curtain{display:none}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:1.5rem;
  padding:.85rem clamp(1.3rem,4vw,2.6rem);background:rgba(5,4,3,0);
  border-bottom:1px solid transparent;
  transition:background .45s ease,border-color .45s ease,backdrop-filter .45s ease,padding .45s ease}
.nav.stuck{background:rgba(5,4,3,.82);backdrop-filter:blur(14px);border-bottom-color:var(--trait);padding-block:.6rem}
/* ⚠️ La marque est invisible tant qu'on n'a pas défilé : sans
   pointer-events:none, elle laissait une zone cliquable fantôme en haut
   à gauche de l'accueil. On ne clique pas ce qu'on ne voit pas. */
.nav__mark{background:none;border:0;padding:0;cursor:pointer;
  display:flex;align-items:center;gap:.75rem;opacity:0;pointer-events:none;
  transform:translateY(-8px);transition:opacity .45s ease,transform .45s ease}
.nav.stuck .nav__mark{opacity:1;pointer-events:auto;transform:none}
.nav__mark:hover b{color:var(--or)}
.nav__mark b{transition:color .3s ease}
/* La barre est fixe : sans cette réserve, l'ancre déposerait le titre de
   section DERRIÈRE elle. */
[id]{scroll-margin-top:5.2rem}
.nav__mark i{width:34px;height:34px;border-radius:50%;border:1px solid var(--trait);background:var(--logo) center/cover;display:block}
.nav__mark b{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.09em;font-size:.95rem}
/* ⚠️ SUR TÉLÉPHONE, LE NOM EST ÉCRIT DEUX FOIS. Le logo rond n'est pas un
   symbole : « HOLY B. » y est écrit en toutes lettres. Le poser à côté du
   texte « HOLY B. » fait donc doublon — visible surtout sur petit écran, où
   les deux se touchent et où la place manque pour les sections. On garde le
   logo, qui dit déjà le nom, et on retire le texte. Le bouton conserve son
   intitulé pour les lecteurs d'écran (aria-label « Revenir en haut »). */
@media(max-width:760px){.nav__mark b{display:none}
  .nav__mark{gap:0}}
.nav__links{margin-left:auto;display:flex;gap:1.7rem}
/* Accès à l'espace admin, dans le menu. ⚠️ Discret mais pas caché : c'est
   la SEULE porte, l'engrenage flottant a été retiré pour éviter d'en avoir
   deux. Marge à gauche pour qu'il ne se confonde pas avec les sections. */
.nav__admin{margin-left:1.5rem;flex:none;width:34px;height:34px;
  display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--trait);border-radius:50%;
  color:var(--craie-3);transition:color .3s,border-color .3s,background .3s}
.nav__admin svg{width:16px;height:16px}
.nav__admin:hover{color:var(--noir);background:var(--or);border-color:var(--or)}
@media(max-width:760px){.nav__admin{margin-left:.9rem;width:30px;height:30px}
  .nav__admin svg{width:14px;height:14px}}
/* ⚠️ Un bouton n'hérite ni de la couleur ni de la police : on lui redonne
   tout ce qu'un lien avait, sinon le menu change d'aspect en changeant de
   nature. Et `cursor:pointer`, qu'un bouton n'a pas par défaut. */
.nav__links button{position:relative;color:var(--craie-3);transition:color .3s;
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit}
.nav__links button::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--or);transition:right .4s var(--ease)}
.nav__links button:hover{color:var(--craie)}
.nav__links button:hover::after{right:0}
@media(max-width:760px){.nav__links{gap:1.05rem;font-size:.6rem;letter-spacing:.14em}}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:7.5rem 0 5rem;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:-4%;z-index:-3;background:var(--banner) center/cover;animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.06) translate3d(-1%,0,0)}to{transform:scale(1.14) translate3d(1.5%,-1.5%,0)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(120% 80% at 22% 45%,rgba(5,4,3,.94) 12%,rgba(5,4,3,.62) 48%,rgba(5,4,3,.32) 74%),
             linear-gradient(180deg,rgba(5,4,3,.92) 0%,rgba(5,4,3,.30) 35%,rgba(5,4,3,.86) 82%,var(--noir) 100%)}
.hero::after{content:"";position:absolute;left:-12%;top:8%;width:60vw;height:60vw;z-index:-1;
  background:radial-gradient(circle,rgba(227,178,76,.13),transparent 62%);filter:blur(28px);
  animation:pulse 9s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.5;transform:scale(.94)}to{opacity:1;transform:scale(1.08)}}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3rem;align-items:center}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr}}
/* Le PORTEUR tient la place dans la grille et fournit deux pseudo-éléments
   de plus que le logo : de quoi loger le point qui tourne et la respiration
   du halo, en plus des deux anneaux portés par le logo lui-même. */
.hero__disc{position:relative;width:min(30vw,270px);aspect-ratio:1;justify-self:end;
  opacity:0;transform:scale(.86) rotate(-9deg)}
.go .hero__disc{animation:logoIn 1.5s var(--ease) 1.35s forwards}
@keyframes logoIn{to{opacity:1;transform:none}}
.hero__logo{position:absolute;inset:0;background:var(--logo) center/cover;border-radius:50%;
  box-shadow:0 0 0 1px rgba(227,178,76,.35),0 30px 80px -20px rgba(0,0,0,.9),0 0 90px -30px rgba(227,178,76,.5)}

/* LE POINT QUI FAIT LE TOUR. Un dégradé radial place une pastille dorée en
   haut du disque ; on ne fait tourner que le disque. Pas de masque, pas de
   variable dans l'image clé — c'est le mouvement le plus lisible des trois,
   celui qu'on repère du coin de l'œil. */
.hero__disc::before{content:"";position:absolute;inset:-20px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 0,var(--or-clair) 3.5px,rgba(227,178,76,.35) 5px,transparent 9px);
  animation:ronde 9s linear infinite}
/* La respiration : un halo qui enfle et retombe, sans jamais rien masquer. */
.hero__disc::after{content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 44px -6px rgba(227,178,76,.4);animation:souffle 4.6s ease-in-out infinite}
@keyframes souffle{50%{transform:scale(1.045);opacity:.45}}

/* DEUX ANNEAUX QUI TOURNENT EN SENS CONTRAIRE AUTOUR DU LOGO.
   ⚠️ Faits de BORDURES, pas d'un masque ni d'un dégradé conique : une
   bordure ronde est comprise partout, et seul un « transform » est animé,
   ce que le navigateur sait faire sans repeindre. Et AUCUNE VARIABLE dans
   les images clés — c'est ce qui avait figé le bandeau (v1.6). */
.hero__logo::before,.hero__logo::after{content:"";position:absolute;border-radius:50%;
  pointer-events:none;border-style:solid}
.hero__logo::before{inset:-9px;border-width:2px;border-color:rgba(227,178,76,.12);
  border-top-color:var(--or-clair);border-right-color:rgba(227,178,76,.7);
  animation:ronde 7s linear infinite}
.hero__logo::after{inset:-20px;border-width:2px;border-color:transparent;
  border-bottom-color:rgba(227,178,76,.62);border-left-color:rgba(227,178,76,.22);
  animation:ronde 11s linear infinite reverse}
@keyframes ronde{to{transform:rotate(360deg)}}
/* ⚠️ Sous 900 px le logo est calé À GAUCHE : un débordement de 26 px
   dépasserait la marge de 20,8 px et sortirait de l'écran. Mesuré, pas
   estimé — même piège que la pochette en v0.6. */
@media(max-width:900px){
  .hero__disc{justify-self:start;width:150px;order:-1}
  .hero__logo::before{inset:-6px}
  .hero__logo::after{inset:-13px}
  .hero__disc::before{inset:-17px}
}
.hero__kicker{opacity:0;transform:translateY(14px)}
.go .hero__kicker{animation:up .9s var(--ease) 1.15s forwards}
/* BALAYAGE LUMINEUX SUR LES LETTRES SEULES.
   Deux fonds superposés dans le MÊME background-clip:text — le reflet
   mobile par-dessus, le dégradé d'or dessous. Comme le découpage se fait
   sur le texte, rien n'est jamais peint en dehors des lettres.
   L'animation est posée sur .hero__title (et pas sur .go .hero__title) :
   elle ne dépend d'aucun script et tourne partout, aperçu compris. */
.hero__title{font-size:clamp(4.4rem,15.5vw,12.6rem);margin:.4rem 0 0;
  background-image:
    linear-gradient(102deg,
      rgba(255,255,255,0) 41%,rgba(255,255,255,.5) 45.5%,
      rgba(255,255,255,.95) 48.6%,#fff 50%,rgba(255,255,255,.95) 51.4%,
      rgba(255,255,255,.5) 54.5%,rgba(255,255,255,0) 59%),
    linear-gradient(168deg,#fff 4%,var(--or-clair) 34%,var(--or) 56%,var(--or-sombre) 78%,var(--or-clair) 100%);
  background-repeat:no-repeat,no-repeat;
  background-size:300% 100%,100% 100%;
  background-position:100% 0,0 0;
  color:var(--or-clair);
  clip-path:inset(0 100% 0 0);
  animation:eclat 5.4s linear 2.4s infinite}
/* ⚠️ SANS CETTE GARDE, un moteur qui ignore background-clip:text afficherait
   un titre TRANSPARENT, donc INVISIBLE. La couleur d'or reste le défaut ;
   on ne l'efface que là où le découpage sur le texte est réellement géré. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__title{-webkit-background-clip:text;background-clip:text;color:transparent}
}
.go .hero__title{animation:wipe 1.25s var(--ease) 1.25s forwards,
                           eclat 5.4s linear 2.4s infinite}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
/* Le reflet traverse en 1,7 s puis laisse respirer : un balayage continu
   fatiguerait l'œil sur un titre de cette taille. */
/* ⚠️ UN POURCENTAGE DE background-position N'EST PAS UN DÉCALAGE SIMPLE :
   il vaut (100 − largeur du calque) × P. Avec un calque de 58 % la bande
   ne sortait JAMAIS du cadre — la fin du titre restait éclairée en
   permanence. Un calque de 300 % donne 200 % de course, donc une entrée
   et une sortie franches. */
@keyframes eclat{
  0%,8%    {background-position:100% 0,0 0}
  40%,100% {background-position:0% 0,0 0}
}
.hero__sub{font-size:clamp(1.05rem,2.2vw,1.5rem);color:var(--craie-3);margin:.9rem 0 0;max-width:30ch;opacity:0}
.go .hero__sub{animation:up .9s var(--ease) 1.6s forwards}
.hero__sub .or{color:var(--or-clair)}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem;opacity:0}
.go .hero__cta{animation:up .9s var(--ease) 1.85s forwards}

/* boutons */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.05rem;
  border:1px solid var(--trait);border-radius:999px;font-family:'JetBrains Mono',monospace;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;background:rgba(20,17,16,.55);
  overflow:hidden;transition:color .35s,border-color .35s,transform .35s var(--ease)}
.btn svg{width:15px;height:15px;flex:none;position:relative;z-index:1}
/* L'interlettrage ajoute un blanc APRÈS la dernière lettre : sans cette
   compensation, la marge de droite paraît plus large que celle de gauche. */
.btn span{position:relative;z-index:1;margin-right:-.16em}
.btn::before{content:"";position:absolute;inset:0;background:var(--or);transform:translateY(101%);transition:transform .42s var(--ease)}
.btn:hover{color:var(--noir);border-color:var(--or);transform:translateY(-2px)}
.btn:hover::before{transform:translateY(0)}
.btn--solid{background:var(--or);color:var(--noir);border-color:var(--or)}
.btn--solid::before{background:var(--craie)}
.btn--solid:hover{color:var(--noir)}
.btn[aria-disabled="true"]{opacity:.34;pointer-events:none}

/* bandeau */
.strip{border-block:1px solid var(--trait);background:var(--noir-2);padding:.95rem 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
/* ⚠️ LA DURÉE PASSE PAR UNE VARIABLE, ET L'ANIMATION N'EST PLUS JAMAIS
   RÉÉCRITE PAR LE SCRIPT. Avant, ajusterBandeau() posait « animation:none »
   puis reposait le raccourci : chaque appel REPARTAIT DE ZÉRO. Or sur
   iPhone la barre d'URL déclenche un « resize » à chaque défilement — le
   bandeau redémarrait sans arrêt et paraissait figé. */
/* ⚠️ AUCUNE VARIABLE DANS CETTE RÈGLE NI DANS SON IMAGE CLÉ. La durée est
   posée en style direct par le script (une propriété seule, qui ne
   redémarre pas l'animation), et le déplacement est un -50% en dur. */
.strip__track{display:flex;width:max-content;animation:slide 34s linear infinite}
/* ⚠️⚠️ PAUSE AU SURVOL SUPPRIMÉE. Le bandeau barre toute la largeur de
   l'écran : une souris posée n'importe où sur cette bande le figeait, sans
   rien qui l'explique. Une cible aussi large pour un arrêt accidentel ne
   valait pas le service rendu — on ne lit rien dans un bandeau décoratif
   qu'on aurait besoin d'arrêter. C'était la SEULE règle de la feuille
   capable de stopper cette animation. */
/* ⚠️⚠️ ÉTAIT translateX(var(--pas)) — UNE VARIABLE DANS UNE IMAGE CLÉ.
   Tous les moteurs ne la substituent pas : l'animation existe, tourne, et
   ne déplace RIEN. Le bandeau restait donc immobile sans qu'aucune erreur
   n'apparaisse. La piste contient maintenant DEUX FOIS le même train de
   mots, si bien que -50 % en dur avance toujours d'exactement un train. */
@keyframes slide{to{transform:translateX(-50%)}}
.strip__track span{display:inline-flex;align-items:center;gap:1.6rem;padding-right:1.6rem;
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.95rem;
  color:var(--craie-3);white-space:nowrap}
.strip__track span::after{content:"";width:5px;height:5px;background:var(--or);transform:rotate(45deg)}

/* sections */
main{background:var(--noir)}
section{position:relative;background:var(--noir)}
.hero{background:var(--noir)}
.foot{background:var(--noir)}
.pad{padding-block:clamp(5rem,11vw,9rem)}
.pad-t0{padding-top:0}
.h2{font-size:clamp(2.4rem,6.4vw,4.6rem);margin:0}
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--craie-3);max-width:56ch;margin:1.4rem 0 0}

.album{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.4rem,6vw,5rem);align-items:start}
@media(max-width:860px){.album{grid-template-columns:1fr}}
.quote{margin:2.4rem 0 0;padding-left:1.4rem;border-left:2px solid var(--or);
  font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.45;color:var(--craie)}
.credits{position:relative;border:1px solid rgba(227,178,76,.62);border-radius:3px;
  background:linear-gradient(160deg,var(--carbone),var(--noir-2));
  box-shadow:0 0 0 1px rgba(5,4,3,.85)}
/* Le second filet doré, rentré — le même montage que les cartes de la pile
   et que la pochette. Il porte SON liseré sombre des deux côtés : sans lui,
   un trait doré posé sur un fond clair du dégradé ne ressortirait pas. */
.credits::after{content:"";position:absolute;inset:8px;pointer-events:none;
  border:1px solid rgba(227,178,76,.26);border-radius:2px;
  box-shadow:0 0 0 1px rgba(5,4,3,.55),inset 0 0 0 1px rgba(5,4,3,.55)}
/* La pochette, posée de biais en tête de la fiche. Elle reste DANS la
   largeur du bloc — elle ne dépasse que vers le haut, jamais sur les côtés,
   sinon elle sort de l'écran sur téléphone. */
.credits__tete{display:flex;align-items:center;gap:1rem;padding:1.35rem 1.4rem .1rem}
/* MÊME CONTOUR QUE LES CARTES DE LA PILE : trait d'or franc au bord, ombre
   noire au ras pour le détacher d'un visuel lui-même doré, et second filet
   rentré. Mêmes valeurs exactement — c'est ce qui en fait un vocabulaire
   plutôt que deux décorations qui se ressemblent à peu près. */
.credits__poch{position:relative;flex:none;width:clamp(124px,27vw,168px);aspect-ratio:1;padding:0;
  margin:-30px 0 -4px;
  background-size:cover;background-position:center;
  border:1px solid rgba(227,178,76,.85);border-radius:4px;
  transform:rotate(-6deg);cursor:zoom-in;z-index:1;
  box-shadow:0 0 0 1px rgba(5,4,3,.85), 0 24px 48px -18px #000, 0 0 0 6px var(--noir-2);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.credits__poch::after{content:"";position:absolute;inset:6px;pointer-events:none;
  border:1px solid rgba(227,178,76,.38);border-radius:2px;
  box-shadow:0 0 0 1px rgba(5,4,3,.55),inset 0 0 0 1px rgba(5,4,3,.55)}
.credits__poch:hover{transform:rotate(-1.5deg) scale(1.04);
  box-shadow:0 0 0 1px rgba(5,4,3,.85), 0 32px 64px -18px #000, 0 0 0 6px var(--noir-2), 0 0 44px -8px rgba(227,178,76,.5)}
@media(max-width:860px){.credits{margin-top:3.6rem}}
.credits dl{margin:0;display:grid;grid-template-columns:1fr}
.credits div{padding:1.15rem 1.4rem;border-bottom:1px solid rgba(227,178,76,.11);
  display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem}
.credits div:last-child{border-bottom:0}
.credits dt{color:var(--craie-2);font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}
.credits dd{margin:0;text-align:right;font-weight:500;font-size:.94rem}
.credits__coin{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:1.1rem;min-width:0}
/* La devise se lit en COLONNE. En ligne, le retour à la ligne cassait la
   suite après un losange orphelin — un séparateur ne doit jamais finir
   une ligne. Le filet doré tient la colonne, les losanges le bornent. */
.credits__devise{margin:0;position:relative;color:var(--or);
  display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;
  padding-right:1rem;border-right:1px solid rgba(227,178,76,.32);
  text-align:right;line-height:1.25;font-size:clamp(.57rem,1.7vw,.68rem)}
.credits__devise span{white-space:nowrap;margin-right:-.22em;
  transition:opacity .5s var(--ease)}
.credits__devise::before,.credits__devise::after{content:"";position:absolute;
  right:-3px;width:5px;height:5px;background:var(--or);transform:rotate(45deg)}
.credits__devise::before{top:-8px}
.credits__devise::after{bottom:-8px}
.credits:hover .credits__devise span{opacity:1}
@media(max-width:420px){.credits__devise{font-size:.54rem;gap:.42rem}}
.eq{display:flex;align-items:flex-end;justify-content:flex-end;gap:3px;height:22px;padding:0}
.eq i{width:3px;background:var(--or);opacity:.85;animation:bump 1.15s ease-in-out infinite}
.eq i:nth-child(1){height:40%;animation-delay:0s}
.eq i:nth-child(2){height:80%;animation-delay:.13s}
.eq i:nth-child(3){height:55%;animation-delay:.29s}
.eq i:nth-child(4){height:100%;animation-delay:.06s}
.eq i:nth-child(5){height:35%;animation-delay:.4s}
.eq i:nth-child(6){height:70%;animation-delay:.21s}
@keyframes bump{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* titres */
/* ONGLETS D'ALBUM. Même vocabulaire que le reste : mono, capitales, or.
   ⚠️ Le masquage se fait par ATTRIBUT sur le conteneur, sans redessin :
   les graphes et les branchements survivent à la bascule. */
.albs{display:flex;flex-wrap:wrap;gap:.5rem;margin:2.4rem 0 -.6rem}
.albs__b{background:none;border:1px solid rgba(227,178,76,.3);border-radius:999px;
  padding:.55rem 1.05rem;color:var(--craie-3);cursor:pointer;
  font:inherit;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  transition:color .3s,border-color .3s,background .3s}
.albs__b:hover{color:var(--craie);border-color:rgba(227,178,76,.6)}
.albs__b.on{background:var(--or);border-color:var(--or);color:var(--noir)}
.track.hors-alb{display:none}
.tracks{margin-top:3.2rem;border-top:1px solid var(--trait)}
.track{border-bottom:1px solid rgba(227,178,76,.13);position:relative;overflow:hidden}
.track::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(227,178,76,.12),rgba(227,178,76,0) 55%);
  transform:translateX(-100%);transition:transform .55s var(--ease);pointer-events:none}
.track:hover::before,.track.open::before{transform:translateX(0)}
.track__head{position:relative;z-index:1;display:flex;align-items:center;gap:1.2rem;padding:1.15rem .4rem}
@media(max-width:760px){.track__head{flex-wrap:wrap;gap:.85rem 1rem}}
.track__toggle{display:flex;align-items:center;gap:1.1rem;flex:1;min-width:0;text-align:left;padding:0}
.track__num{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--or-sombre);letter-spacing:.1em;flex:none;transition:color .35s}
.track:hover .track__num,.track.open .track__num{color:var(--or-clair)}
/* ⚠️ MÊME CONTOUR QUE LES CARTES ET LE BLOC DE CRÉDITS : or à .62, ombre
   noire au ras, second filet doré rentré avec son liseré sombre. À 58 px, le
   filet est rentré de 3 px — 8 px l'écraseraient. Mêmes valeurs, échelle
   adaptée : c'est ce qui fait un vocabulaire plutôt qu'une répétition. */
.track__cover{position:relative;width:58px;height:58px;flex:none;border-radius:3px;
  background:var(--logo) center/cover;
  border:1px solid rgba(227,178,76,.62);box-shadow:0 0 0 1px rgba(5,4,3,.85);
  transition:transform .45s var(--ease)}
.track__cover::after{content:"";position:absolute;inset:3px;pointer-events:none;
  border:1px solid rgba(227,178,76,.26);border-radius:2px;
  box-shadow:0 0 0 1px rgba(5,4,3,.55),inset 0 0 0 1px rgba(5,4,3,.55)}
.track:hover .track__cover{transform:scale(1.06)}
@media(max-width:760px){.track__cover{width:46px;height:46px}}
.track__id{min-width:0}
.track__name{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.3rem,3.2vw,2.05rem);line-height:1.05;display:block;transition:transform .45s var(--ease),color .35s}
.track:hover .track__name{transform:translateX(6px)}
.track__tag{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--craie-2);display:block;margin-top:.4rem}
/* ⚠️ LARGEUR RÉSERVÉE : la cellule est toujours présente, vide au besoin.
   Sans largeur minimale, une durée absente décale le chevron et tout ce qui
   suit — c'est ce qui désalignait la dernière ligne (titre sans durée). */
.track__dur{margin-left:auto;flex:none;min-width:3.4em;text-align:right;
  color:var(--craie-2);font-size:.66rem;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.track__dur+.track__chev{margin-left:.95rem}
@media(max-width:760px){.track__dur{font-size:.6rem}}
.track__chev{margin-left:auto;flex:none;width:30px;height:30px;border:1px solid var(--trait);border-radius:50%;
  display:grid;place-items:center;transition:transform .45s var(--ease),border-color .35s,background .35s}
.track__chev svg{width:11px;height:11px;transition:transform .45s var(--ease)}
.track.open .track__chev{background:var(--or);border-color:var(--or);color:var(--noir)}
.track.open .track__chev svg{transform:rotate(180deg)}
.track__links{display:flex;gap:.45rem;flex:none;position:relative;z-index:1;flex-wrap:wrap;
  align-items:center;justify-content:flex-start;min-width:20.5rem}
/* Sur téléphone le groupe passe à la ligne et prend toute la largeur : la
   réserve n'a plus de sens et gênerait le repli. */
@media(max-width:760px){.track__links{width:100%;min-width:0}}
.plat{width:38px;height:38px;border:1px solid var(--trait);border-radius:50%;display:grid;place-items:center;
  color:var(--craie-3);transition:color .3s,border-color .3s,background .3s,transform .3s var(--ease)}
.plat svg{width:16px;height:16px}
.plat:hover{color:var(--noir);background:var(--or);border-color:var(--or);transform:translateY(-3px)}
.plat[aria-disabled="true"]{opacity:.26;pointer-events:none}
.plat.is-rech{border-style:dashed}
/* CONTOUR LUMINEUX QUI FAIT LE TOUR DU BOUTON.
   ⚠️ Un dégradé conique posé DERRIÈRE le bouton, et c'est le disque entier
   qu'on fait tourner — pas l'angle du dégradé, qui exigerait @property et
   ne tournerait pas partout. Le fond opaque du bouton masque le centre, il
   ne reste que l'arc au bord. Pas de masque, donc rien qui puisse échouer
   en laissant une tache : si le dégradé conique n'est pas compris, le fond
   est simplement absent et le bouton garde sa bordure dorée.
   ⚠️ AUCUNE VARIABLE DANS L'IMAGE CLÉ (règle 1) et aucune dépendance au
   script (règle 2) : il tourne aussi dans l'aperçu. */
.exbtn{position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  height:38px;padding:0 .9rem;
  border:0;border-radius:999px;color:var(--or);background:transparent;
  /* Le filet d'or intérieur est le SOCLE du contour : il est là même si
     l'arc n'apparaît pas (vieux moteur, animation coupée, mouvement réduit).
     Le bouton n'est jamais sans contour, l'arc ne fait que l'éclairer. */
  box-shadow:0 0 16px -4px rgba(227,178,76,.4),inset 0 0 0 1px rgba(227,178,76,.42);
  font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  transition:color .3s,transform .3s var(--ease)}
/* L'ARC : le disque entier tourne, l'angle du dégradé ne bouge pas — animer
   l'angle exigerait @property et ne tournerait pas partout.
   ⚠️⚠️ IL FAUT QUE CE SOIT UN CARRÉ, ET QUE LE BOUTON LE DÉCOUPE.
   Ça a été livré posé sur `inset:0`, c'est-à-dire sur une PILULE de 105 × 38.
   Or une pilule qui tourne balaie un cercle de son propre diamètre : à chaque
   tour, ses deux extrémités sortaient du bouton par le haut et par le bas. Le
   cache, lui, ne tourne pas — il ne pouvait rien rattraper. Résultat : une
   tache dorée qui débordait, au lieu du contour voulu (vu sur téléphone).
   Le carré, centré et plus large que le bouton, couvre la pilule QUEL QUE
   SOIT l'angle ; `overflow:hidden` sur le bouton fait le reste. Aucune
   marge d'erreur à l'œil : un carré de 132 % de la largeur couvre toujours
   un cercle plus grand que la diagonale de la pilule.
   ⚠️ Les marges en pourcentage se calculent TOUTES sur la LARGEUR du parent,
   celle du haut comprise : -66 % centre donc aussi bien verticalement
   qu'horizontalement. Et on centre par les marges, pas par `translate`, sinon
   l'image clé de rotation effacerait le centrage. */
.exbtn{overflow:hidden}
.exbtn::before{content:"";position:absolute;top:50%;left:50%;
  width:132%;aspect-ratio:1;margin:-66% 0 0 -66%;
  z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(227,178,76,.22) 0deg,rgba(227,178,76,.22) 232deg,
    rgba(227,178,76,.7) 296deg,var(--or-clair) 340deg,rgba(227,178,76,.7) 352deg,rgba(227,178,76,.22) 360deg);
  animation:ronde 3.6s linear infinite}
/* LE CACHE : opaque, rentré d'1 px, il ne laisse voir de l'arc qu'un contour.
   Posé APRÈS l'arc dans le code, donc peint par-dessus lui. */
.exbtn::after{content:"";position:absolute;inset:1px;border-radius:inherit;
  z-index:-1;pointer-events:none;background:var(--noir)}
.exbtn svg{width:13px;height:13px;flex:none}
.exbtn span{margin-right:-.14em}
.exbtn:hover{color:var(--noir);transform:translateY(-3px)}
.exbtn:hover::after{background:var(--or)}
/* Pendant la lecture, le bouton est plein : l'arc n'a plus rien à annoncer. */
.exbtn.on{color:var(--noir)}
.exbtn.on::before{animation:none;background:var(--or)}
.exbtn.on::after{background:var(--or)}
@media(prefers-reduced-motion:reduce){.exbtn::before{animation:none}}
.ex:empty{display:none}
/* Titre pas encore sorti : une mention claire plutôt qu'une pastille morte
   ou un lien de recherche qui ne trouverait rien. */
/* ⚠️ MÊME HAUTEUR QUE `.exbtn` ET `.plat` (38 px) : trois formes voisines
   dans la même rangée, une seule hauteur, sinon la ligne se tord. */
.bientot{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 .85rem;
  border:1px dashed rgba(227,178,76,.5);border-radius:999px;color:var(--or);
  font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ex__player{display:flex;align-items:center;gap:1.1rem;max-width:520px;margin-top:1.3rem;
  padding:1rem 1.2rem;border:1px solid var(--trait);border-radius:4px;
  background:linear-gradient(150deg,var(--carbone),var(--noir-2));
  box-shadow:0 24px 60px -34px #000, inset 0 0 60px -30px rgba(227,178,76,.35)}
.ex__poch{position:relative;width:76px;height:76px;flex:none;border-radius:3px;
  background-size:cover;background-position:center;
  border:1px solid rgba(227,178,76,.62);box-shadow:0 0 0 1px rgba(5,4,3,.85)}
.ex__poch::after{content:"";position:absolute;inset:4px;pointer-events:none;
  border:1px solid rgba(227,178,76,.26);border-radius:2px;
  box-shadow:0 0 0 1px rgba(5,4,3,.55),inset 0 0 0 1px rgba(5,4,3,.55)}
.ex__wave{flex:1;min-width:0;width:100%;height:76px;display:block}
/* Les trois commandes de l'extrait. Un bouton inerte garde sa place :
   rien ne saute d'un clic à l'autre. */
.excmd{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;max-width:520px}
.excmd__b{display:inline-flex;align-items:center;gap:.42rem;height:36px;padding:0 .8rem;
  border:1px solid var(--trait);border-radius:999px;color:var(--craie);background:transparent;
  font-family:'JetBrains Mono',monospace;font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;
  transition:background .3s,color .3s,border-color .3s,opacity .3s}
.excmd__b svg{width:12px;height:12px;flex:none}
.excmd__b span{margin-right:-.14em}
.excmd__b:not(:disabled):hover{border-color:var(--or);color:var(--or)}
.excmd__b.est-en-cours{background:var(--or);border-color:var(--or);color:var(--noir)}
.excmd__b:disabled{opacity:.32;cursor:default}
@media(max-width:380px){.excmd__b{padding:0 .62rem;letter-spacing:.1em}}
.track__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.track.open .track__panel{grid-template-rows:1fr}
.track__panel>div{overflow:hidden}
.track__body{position:relative;z-index:1;padding:.2rem .4rem 1.9rem 4.6rem;max-width:72ch;
  opacity:0;transform:translateY(-8px);transition:opacity .45s ease .1s,transform .5s var(--ease) .1s}
.track.open .track__body{opacity:1;transform:none}
.track__body p{margin:0;color:var(--craie-3);font-size:.98rem}
.track__body p+p{margin-top:.8rem}
@media(max-width:760px){.track__body{padding-left:0}}
.shots{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.1rem}
.shots img{width:92px;height:92px;object-fit:cover;border-radius:3px;border:1px solid var(--trait);
  cursor:zoom-in;transition:transform .35s var(--ease),border-color .3s}
.shots img:hover{transform:translateY(-4px);border-color:var(--or)}
.note{margin-top:2.4rem;color:var(--craie-2);font-size:.86rem;display:flex;gap:.7rem;align-items:flex-start}
.note b{color:var(--or);font-weight:500}

/* qui est holy b. */
.bio{overflow:hidden;background:var(--carbone)}
.bio::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--noir),var(--carbone) 45%,var(--noir))}
.bio__grid{display:grid;grid-template-columns:minmax(0,.78fr) 1fr;gap:clamp(2.2rem,6vw,4.6rem);align-items:center}
@media(max-width:820px){.bio__grid{grid-template-columns:1fr}}
.bio__fig{position:relative;isolation:isolate}
.bio__stack{position:relative;aspect-ratio:4/5;isolation:isolate}
.bio__stack[role=button]{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
/* CONTOUR DORÉ EN DOUBLE FILET, comme un tirage monté sous passe-partout :
   un trait d'or franc au bord, un second plus discret rentré de 7 px.
   L'ombre noire portée au ras du cadre détache l'or du fond, sinon il se
   confond avec les visuels, eux-mêmes noir et or. */
.bio__card{position:absolute;inset:0;border:1px solid rgba(227,178,76,.62);border-radius:3px;
  background-size:cover;background-position:center;
  box-shadow:0 0 0 1px rgba(5,4,3,.85),0 40px 90px -34px #000;
  transform-origin:60% 90%;backface-visibility:hidden;
  transition:transform .95s var(--ease),opacity .95s var(--ease),filter .95s var(--ease),
             border-color .95s var(--ease),box-shadow .95s var(--ease)}
/* ⚠️ LE FILET INTÉRIEUR EST POSÉ SUR L'IMAGE, pas à côté. L'ombre noire du
   cadre est à l'EXTÉRIEUR et ne le protège en rien : mesuré, ce filet ne
   ressort qu'à 1,14:1 sur une zone dorée du visuel — autant dire pas.
   Il porte donc son PROPRE liseré sombre, de part et d'autre : 3,3:1. */
.bio__card::after{content:"";position:absolute;inset:7px;pointer-events:none;
  border:1px solid rgba(227,178,76,.26);border-radius:2px;
  box-shadow:0 0 0 1px rgba(5,4,3,.55),inset 0 0 0 1px rgba(5,4,3,.55)}
.bio__card.is-logo{background:var(--noir-2) var(--logo) center/78% no-repeat}
/* La carte de devant porte l'or à plein, avec un halo doré très large qui
   ne se voit pas comme un effet mais qui la décolle des suivantes. */
.bio__card.is-front{z-index:3;transform:none;opacity:1;filter:none;
  border-color:rgba(227,178,76,.85);
  box-shadow:0 0 0 1px rgba(5,4,3,.85),0 40px 90px -34px #000,0 0 60px -22px rgba(227,178,76,.55)}
.bio__card.is-front::after{border-color:rgba(227,178,76,.38)}
.bio__card.is-next {z-index:2;transform:translate(7%,6%) scale(.955) rotate(1.4deg);opacity:.5;filter:saturate(.55) brightness(.62)}
.bio__card.is-back {z-index:1;transform:translate(11%,9%) scale(.92) rotate(2.6deg);opacity:0;filter:saturate(.4) brightness(.5)}
/* La carte TRAVERSE l'écran pour libérer la place : elle reste opaque
   pendant la majeure partie du trajet et ne s'efface qu'à la toute fin. */
.bio__card.is-out{z-index:4;transform:translate(-125%,-6%) rotate(-11deg) scale(.9);opacity:0;
  filter:brightness(1.12);
  transition:transform 1s var(--ease),opacity .3s ease .62s,filter 1s var(--ease)}
.bio__card.is-out.vers-droite{transform:translate(125%,-6%) rotate(11deg) scale(.9)}
/* pendant le glissement, la carte colle au doigt : aucune transition */
.bio__stack.est-tenue{cursor:grabbing}
.bio__stack.est-tenue .bio__card.is-front{transition:none}
/* seule carte : le carré doré d'origine, qui n'annonce rien d'autre */
.bio__stack.is-seul+.pile__nav{display:none}
.bio__fig.est-seule::after{content:"";position:absolute;inset:20px -18px -18px 20px;z-index:-1;
  border:1px solid var(--or);opacity:.34;border-radius:3px}
.pile__nav{display:flex;align-items:center;gap:1rem;margin-top:1.6rem}
.pile__pts{display:flex;gap:.45rem}
.pile__pt{width:26px;height:3px;border-radius:2px;background:rgba(243,238,230,.22);
  transition:background .4s var(--ease),width .4s var(--ease)}
.pile__pt:hover{background:rgba(227,178,76,.55)}
.pile__pt.on{background:var(--or);width:38px}
.pile__n{margin-left:auto;color:var(--craie-2);font-variant-numeric:tabular-nums}
@media(max-width:820px){.bio__fig{max-width:340px}}
.bio__chapeau{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(1.22rem,2.6vw,1.85rem);line-height:1.4;color:var(--craie);margin:1.5rem 0 0;max-width:26ch}
.bio__texte p{color:var(--craie-3);margin:1.15rem 0 0;max-width:56ch;font-size:clamp(1rem,1.4vw,1.1rem)}
.reperes{margin:clamp(2.8rem,6vw,4.2rem) 0 0;display:grid;gap:0 clamp(1rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.reperes>div{border-top:1px solid var(--trait);padding:1.15rem 0 0;margin-top:1.15rem}
.reperes dt{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.reperes dd{margin:.55rem 0 0;font-weight:500;font-size:.96rem;line-height:1.45;color:var(--craie)}
.values{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;padding:0;list-style:none}
.values li{padding:.5rem 1rem;border:1px solid var(--trait);border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or)}

/* galerie */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.7rem;margin-top:3rem}
.gal figure{margin:0;aspect-ratio:1;overflow:hidden;border:1px solid var(--trait);border-radius:3px;background:var(--carbone)}
.gal img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform .7s var(--ease),filter .5s}
.gal figure:hover img{transform:scale(1.07)}
.gal figure:nth-child(6n+1){grid-column:span 2;aspect-ratio:2}
@media(max-width:640px){.gal figure:nth-child(6n+1){grid-column:span 1;aspect-ratio:1}}

/* visionneuse */
#lightbox{position:fixed;inset:0;z-index:90;background:rgba(5,4,3,.94);backdrop-filter:blur(8px);
  display:none;place-items:center;padding:1.5rem;cursor:zoom-out}
#lightbox.on{display:grid}
#lightbox img{max-width:min(94vw,1100px);max-height:88vh;object-fit:contain;
  border:1px solid var(--trait);box-shadow:0 40px 120px -30px #000;animation:up .45s var(--ease)}

/* pied */
.foot{border-top:1px solid var(--trait);background:var(--noir);
  padding-block:clamp(3.4rem,7vw,5.4rem) 2.2rem;
  /* ⚠️ RÉSERVE POUR L'ENGRENAGE FLOTTANT, qui ne doit rien recouvrir. Elle
     DOIT SUIVRE SA HAUTEUR : 2,8 rem du bas + 44 px de diamètre + un jeu.
     Remonter l'engrenage sans toucher ici le ferait passer sur les
     mentions. Calculé, pas estimé — cf. la réserve d'origine en v3.3. */
  padding-bottom:calc(2.8rem + env(safe-area-inset-bottom,0px))}
.foot__top{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,5vw,3.5rem);align-items:end}
@media(max-width:640px){.foot__top{grid-template-columns:1fr;align-items:start}}
/* Le même logo qu'en haut, en petit, au-dessus de la phrase de fin.
   Un seul anneau ici, et lent : en bas de page il signe, il n'appelle pas. */
.foot__mark{display:flex;flex-direction:column;align-items:flex-start;gap:1.15rem}
.foot__logo{position:relative;width:62px;height:62px;flex:none;border-radius:50%;
  background:var(--logo) center/cover;
  box-shadow:0 0 0 1px rgba(227,178,76,.3),0 0 40px -14px rgba(227,178,76,.5)}
.foot__logo::after{content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(227,178,76,.12);
  border-top-color:rgba(227,178,76,.72);border-right-color:rgba(227,178,76,.3);
  animation:ronde 9s linear infinite}
/* ⚠️ Coefficient descendu de 7vw à 5,4vw pour que la phrase tienne SUR UNE
   LIGNE dès ~500 px de large, et plus seulement au-delà de 1200. Sous le
   plancher de 2,2 rem elle se replie encore : la tenir sur une ligne sur un
   téléphone imposerait 22 px, ce qui lui ôterait toute présence. */
.foot__cry{font-family:'Anton',sans-serif;font-size:clamp(2.2rem,5.4vw,4.4rem);text-transform:uppercase;line-height:.92;margin:0;color:var(--craie)}
.foot__cry em{font-style:normal;color:var(--or)}
.socials{display:flex;gap:.5rem;flex-wrap:wrap}
@media(min-width:641px){.foot__suivre{text-align:right}.socials{justify-content:flex-end}}

/* Mentions : une seule ligne de sens qui se replie, ponctuée de losanges
   dorés — le même signe que le bandeau du haut. Plus d'espacement forcé
   qui creusait des trous au milieu de la ligne. */
.foot__legal{margin-top:clamp(2.6rem,6vw,3.6rem);padding-top:1.6rem;
  border-top:1px solid rgba(227,178,76,.13);
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.35rem;
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--craie-2);line-height:1.5}
.foot__legal span{display:inline-flex;align-items:center;gap:1.35rem}
.foot__legal span:not(:last-child)::after{content:"";width:4px;height:4px;flex:none;
  background:var(--or);opacity:.55;transform:rotate(45deg)}

/* révélations */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  /* ⚠️ Sans cette ligne le bandeau se fige EN PLEIN TRAJET, mots coupés aux
     deux bords : on dirait une panne. Arrêté, il doit repartir de zéro. */
  .strip__track{animation:none;transform:none}
  .hero__title{clip-path:none;animation:none;background-position:0% 0,0 0}
  .hero__disc,.hero__kicker,.hero__sub,.hero__cta{opacity:1;transform:none}
  #curtain{display:none}
}

/* le texte reste lisible si le système impose ses propres couleurs */
@media (forced-colors: active){
  .hero__title{forced-color-adjust:none;color:CanvasText;background:none;animation:none;-webkit-text-fill-color:CanvasText}
  .track,.credits,.btn,.plat{border-color:CanvasText}
}

/* ===== ADMIN ===== */
/* ============ CONNEXION ============ */
#alog{position:fixed;inset:0;z-index:95;display:none;place-items:center;padding:1.4rem;
  background:radial-gradient(90% 70% at 50% 20%,#16120c,#050403 70%)}
#alog.on{display:grid}
.alog-card{position:relative;width:min(100%,400px);padding:2.6rem 2rem 2.2rem;
  background:linear-gradient(160deg,var(--carbone),var(--noir-2));border-radius:6px;
  box-shadow:0 40px 120px -30px #000}
.alog-card::before{content:"";position:absolute;inset:-1px;border-radius:7px;z-index:-1;
  background:conic-gradient(from 0deg,transparent 0deg,var(--or) 40deg,var(--or-clair) 70deg,transparent 130deg,transparent 360deg);
  animation:alogSpin 4.5s linear infinite}
.alog-card::after{content:"";position:absolute;inset:0;border-radius:6px;z-index:-1;background:var(--noir-2)}
@keyframes alogSpin{to{transform:rotate(360deg)}}
.alog-logo{width:66px;height:66px;border-radius:50%;background:var(--logo) center/cover;margin:0 auto 1.3rem;
  border:1px solid var(--trait)}
.alog-card h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.05em;
  font-size:1.5rem;margin:0;text-align:center}
.alog-card p.mono{text-align:center;color:var(--craie-2);margin:.5rem 0 1.9rem}
.afield{position:relative;margin-bottom:.85rem}
.afield label{position:absolute;top:-7px;left:12px;padding:0 .4rem;background:var(--noir-2);
  font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.afield input{width:100%;padding:.95rem 2.9rem .95rem 1rem;background:rgba(5,4,3,.6);
  border:1px solid var(--trait);border-radius:3px;color:var(--craie);font:inherit;transition:border-color .3s}
.afield input:focus{outline:none;border-color:var(--or)}
.aeye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  display:grid;place-items:center;color:var(--craie-2);border-radius:50%;transition:color .3s,background .3s}
.aeye:hover{color:var(--or);background:rgba(227,178,76,.1)}
.aeye svg{width:18px;height:18px}
.alog-go{width:100%;margin-top:.7rem;justify-content:center}
.alog-err{min-height:1.3rem;margin:.75rem 0 0;text-align:center;font-size:.8rem;color:#ff8b6b}
.alog-x{position:absolute;top:.6rem;right:.6rem;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--craie-2)}
.alog-x:hover{color:var(--or)}

/* ============ ESPACE ADMIN ============ */
#admin{position:fixed;inset:0;z-index:96;display:none;background:var(--noir);
  grid-template-rows:auto 1fr auto;grid-template-columns:230px 1fr}
#admin.on{display:grid}
@media(max-width:860px){#admin.on{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto}}

.ad-top{grid-column:1/-1;display:flex;align-items:center;gap:1rem;padding:.85rem 1.2rem;
  border-bottom:1px solid var(--trait);background:var(--noir-2)}
.ad-top i{width:30px;height:30px;border-radius:50%;background:var(--logo) center/cover;flex:none}
.ad-top b{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.08em;font-size:.95rem}
.ad-top .ad-ver{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.16em;color:var(--craie-2)}
.ad-top .sp{margin-left:auto}
.ad-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border:1px solid var(--trait);
  border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;transition:background .3s,color .3s,border-color .3s}
.ad-btn:hover{background:var(--or);color:var(--noir);border-color:var(--or)}
.ad-btn.pri{background:var(--or);color:var(--noir);border-color:var(--or)}
.ad-btn.pri:hover{background:var(--or-clair)}
.ad-btn.dgr:hover{background:#c0392b;border-color:#c0392b;color:#fff}
.ad-btn .pastille{width:7px;height:7px;border-radius:50%;background:#ff5a3c;display:none}
body.ad-sale .ad-btn.pri .pastille{display:block;animation:batt 1.1s ease-in-out infinite}
@keyframes batt{50%{opacity:.25;transform:scale(.7)}}
@media(max-width:520px){.ad-top .ad-lbl{display:none}}

.ad-nav{border-right:1px solid var(--trait);background:var(--noir-2);overflow-y:auto;padding:.8rem 0}
.ad-nav button{display:block;width:100%;text-align:left;padding:.7rem 1.2rem;color:var(--craie-3);
  font-family:'JetBrains Mono',monospace;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  border-left:2px solid transparent;transition:color .25s,background .25s,border-color .25s}
.ad-nav button:hover{color:var(--craie);background:rgba(227,178,76,.06)}
.ad-nav button.on{color:var(--or);border-left-color:var(--or);background:rgba(227,178,76,.09)}
@media(max-width:860px){
  .ad-nav{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--trait);display:flex;overflow-x:auto;padding:0}
  .ad-nav button{white-space:nowrap;border-left:0;border-bottom:2px solid transparent;padding:.75rem 1rem}
  .ad-nav button.on{border-left-color:transparent;border-bottom-color:var(--or)}
}

.ad-body{overflow-y:auto;padding:1.6rem clamp(1rem,3vw,2.2rem) 4rem;-webkit-overflow-scrolling:touch}
.ad-body h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.04em;
  font-size:1.5rem;margin:0 0 .3rem}
.ad-body .hint{color:var(--craie-2);font-size:.83rem;margin:0 0 1.8rem;max-width:60ch}
.ad-grp{border:1px solid var(--trait);border-radius:4px;background:var(--carbone);padding:1.2rem;margin-bottom:1rem}
.ad-grp>h4{margin:0 0 1rem;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or);display:flex;align-items:center;gap:.6rem}
.ad-grp>h4 .sp{margin-left:auto}
.ad-f{margin-bottom:.9rem}
.ad-f:last-child{margin-bottom:0}
.ad-f>label{display:block;font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--craie-2);margin-bottom:.35rem}
.ad-f input[type=text],.ad-f input[type=url],.ad-f textarea,.ad-f select,
.ad-albr input[type=text]{
  width:100%;padding:.65rem .8rem;background:var(--noir-2);border:1px solid var(--trait);border-radius:3px;
  color:var(--craie);font:inherit;font-size:.9rem;transition:border-color .25s}
.ad-f textarea{min-height:96px;resize:vertical;line-height:1.6}
.ad-f input:focus,.ad-f textarea:focus,.ad-f select:focus,
.ad-albr input:focus{outline:none;border-color:var(--or)}
.ad-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:620px){.ad-row{grid-template-columns:1fr}}
.ad-mini{font-size:.72rem;color:var(--craie-2);margin:.35rem 0 0}

.ad-card{border:1px solid var(--trait);border-radius:4px;background:var(--noir-2);padding:1rem;margin-bottom:.8rem}
.ad-card-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.ad-card-h b{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.16em;color:var(--or)}
.ad-card-h .sp{margin-left:auto}
.ad-ico{width:30px;height:30px;border:1px solid var(--trait);border-radius:3px;display:grid;place-items:center;
  color:var(--craie-2);transition:color .25s,background .25s,border-color .25s;flex:none}
.ad-ico:hover{color:var(--noir);background:var(--or);border-color:var(--or)}
.ad-ico.dgr:hover{background:#c0392b;border-color:#c0392b;color:#fff}
.ad-ico svg{width:13px;height:13px}
.ad-ico[disabled]{opacity:.25;pointer-events:none}

.ad-vign{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
/* Les titres d'un album, présentés comme des entrées ajoutées à la main. */
.ad-albl{display:flex;flex-direction:column;gap:.35rem;margin-top:.7rem}
.ad-albr{display:flex;align-items:center;gap:.5rem}
.ad-albr b{min-width:1.6em;color:var(--or);font-size:.72rem}
.ad-albr input{flex:1;min-width:0}
/* La confirmation, posée par-dessus le panneau d'admin. */
.ad-ask{position:absolute;inset:0;z-index:40;display:none;
  align-items:center;justify-content:center;padding:1.4rem;
  background:rgba(5,4,3,.72)}
.ad-ask.on{display:flex}
.ad-ask-b{max-width:430px;width:100%;padding:1.3rem 1.4rem;border-radius:4px;
  background:var(--carbone);border:1px solid rgba(227,178,76,.5);
  box-shadow:0 0 0 1px rgba(5,4,3,.85),0 20px 50px -20px rgba(0,0,0,.8)}
.ad-ask-t{margin:0 0 .5rem;color:var(--or);font-size:.86rem}
.ad-ask-x{margin:0 0 1.1rem;color:var(--craie-2);font-size:.8rem;line-height:1.5}
.ad-ask-r{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
.ad-vign .v{position:relative;width:64px;height:64px;border:1px solid var(--trait);border-radius:3px;overflow:hidden;background:var(--carbone)}
.ad-vign .v img{width:100%;height:100%;object-fit:cover}
.ad-vign .v.est-ref img{object-fit:contain;background:var(--noir-2)}
.ad-vign .v em{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;font-style:normal;
  background:rgba(5,4,3,.85);color:var(--or);font-family:'JetBrains Mono',monospace;
  font-size:.42rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-vign .v button{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;
  background:rgba(5,4,3,.85);color:#ff8b6b;display:grid;place-items:center;font-size:.8rem;line-height:1}
.ad-vign .v .mv{position:absolute;bottom:2px;left:2px;display:flex;gap:2px}
.ad-vign .v .mv button{position:static;width:20px;height:20px;color:var(--or)}
/* ⚠️ TOUTE ICÔNE DE L'ADMIN EST BORNÉE ICI, une fois pour toutes : un <svg>
   sans width/height s'étire à la taille de son conteneur. C'est ce qui
   rendait la zone de dépôt de chaque chanson démesurée. */
#admin svg{width:14px;height:14px;flex:none}
.ad-drop{display:flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.6rem 1rem;border:1px dashed var(--trait);border-radius:3px;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--craie-2);cursor:pointer;transition:border-color .25s,color .25s}
.ad-drop:hover{border-color:var(--or);color:var(--or)}
.ad-drop input{display:none}

.ad-etats{margin-top:.9rem;display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);border-radius:3px;overflow:hidden}
.ad-etat{display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;background:var(--noir-2);
  font-size:.8rem;color:var(--craie-2)}
.ad-etat b{font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--or-sombre)}
.ad-etat span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-etat em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.1em}
.ad-etat.ok{color:var(--craie)}
.ad-etat.ok b{color:var(--or)}
.ad-etat.ok em{color:var(--or)}
.ad-jauge{height:5px;border-radius:3px;background:rgba(243,238,230,.1);overflow:hidden;margin:.5rem 0 .3rem}
.ad-jauge i{display:block;height:100%;background:linear-gradient(90deg,var(--or-sombre),var(--or-clair));transition:width .5s var(--ease)}
.ad-jauge.warn i{background:linear-gradient(90deg,#c0392b,#ff8b6b)}

.ad-avert{border:1px solid rgba(255,138,60,.35);background:rgba(255,138,60,.07);border-radius:4px;
  padding:.9rem 1.1rem;font-size:.82rem;color:var(--craie-3);margin-bottom:1.2rem}
.ad-avert b{color:#ffb27a;font-weight:500}

.ad-foot{grid-column:1/-1;border-top:1px solid var(--trait);background:var(--noir-2);
  padding:.7rem 1.2rem;font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--craie-2);display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.ad-foot .sp{margin-left:auto}

/* =========================================================================
   CALME SUR TÉLÉPHONE
   ⚠️ Une animation SANS FIN redemande une image à l'écran soixante fois par
   seconde, tant que la page est ouverte — qu'on la regarde ou non. Sur un
   ordinateur ça ne se voit pas ; sur un téléphone, une vingtaine
   d'animations simultanées font ramer le défilement (constaté par Michaël).
   Sur petit écran on n'en garde donc qu'UNE : le contour du bouton
   « Extrait ». Le reste s'arrête, sans rien changer à la mise en page.
   ⚠️ Les entrées en scène (rideau, titre qui se dévoile, blocs qui montent)
   sont des animations à UN SEUL COUP : elles ne coûtent qu'une fois et sont
   gardées telles quelles. On ne coupe que ce qui tourne en boucle.
   ========================================================================= */
@media(max-width:760px){
  /* Le grain. Un calque FIXE, plein écran, en mode fusion : il oblige le
     navigateur à refondre toute la page à chaque pixel de défilement. C'est,
     de loin, ce qui coûtait le plus cher ici — et ça ne se voit presque pas
     sur un écran de poche. */
  body::after{display:none}
  /* Le flou derrière la barre du haut : recalculé à chaque image pendant le
     défilement. Un fond presque opaque rend le même service pour rien. */
  .nav.stuck{backdrop-filter:none;background:rgba(5,4,3,.94)}
  /* Le fond de l'accueil qui dérive, et le halo qui respire. */
  .hero__bg{animation:none}
  .hero::after{animation:none;opacity:.72;transform:scale(1)}
  /* Les deux anneaux, le point qui fait le tour, le souffle du logo — et
     l'anneau du logo du pied de page, qui tourne lui aussi. */
  .hero__logo::before,.hero__logo::after,
  .hero__disc::before,.hero__disc::after,
  .foot__logo::after{animation:none}
  /* Le balayage lumineux sur le titre : il repeint un texte géant à chaque
     image. Le dévoilement, lui, reste — sans lui le titre resterait masqué. */
  .hero__title{animation:none}
  .go .hero__title{animation:wipe 1.25s var(--ease) 1.25s forwards}
  /* Les barres d'égaliseur de la fiche album. */
  .eq i{animation:none}
}

/* Quand le système demande à réduire les mouvements, on va au bout : plus
   rien ne tourne, y compris le contour du bouton et le bandeau de mots. */
@media(prefers-reduced-motion:reduce){
  body::after{display:none}
  .hero__bg,.hero::after,
  .hero__logo::before,.hero__logo::after,
  .hero__disc::before,.hero__disc::after,
  .hero__title,.eq i,.strip__track,.exbtn::before,.foot__logo::after{animation:none}
  .go .hero__title{animation:wipe .01s linear forwards}
}

/* ⚠️ IL SE CACHAIT EN SE TRANSLATANT DE 140 % DE SA PROPRE HAUTEUR, depuis
   une position à 1,6 rem du bas : 59 px de descente pour 68 px à parcourir.
   IL DÉPASSAIT DONC DE 9 px EN PERMANENCE — le « bout jaune » vu par
   Michaël en bas du pied de page. Et le pourcentage requis dépendait de sa
   hauteur, donc de la longueur du message : réglage impossible à tenir.
   On ne compte plus sur la géométrie : il est rendu INVISIBLE, et retiré
   de la couche de clic tant qu'il n'a rien à dire. */
#toast{position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,26px);z-index:99;
  opacity:0;visibility:hidden;pointer-events:none;
  padding:.85rem 1.5rem;background:var(--or);color:var(--noir);border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  transition:transform .5s var(--ease),opacity .35s ease,visibility 0s linear .5s;
  max-width:90vw;text-align:center}
#toast.on{transform:translate(-50%,0);opacity:1;visibility:visible;
  transition:transform .5s var(--ease),opacity .35s ease,visibility 0s}
#toast.bad{background:#c0392b;color:#fff}

/* Remonté : posé au ras du bas, il était collé au bord de l'écran et
   difficile à viser au pouce. */