/* NØHMAD v2 · le DOM par-dessus la scène. Design system MASTER.md : 100 % serif + mono, or #D4AE6A, os #ECE7D8,
   fond jamais #000, easing cubic-bezier(0.16, 1, 0.3, 1), verre avec filet fin. Aucune lueur : ombres neutres et sombres. */
:root{
  --bg: #050506; --deep: #020203; --fg: #ECE7D8; --fg-soft: #B8AE96; --fg-muted: #8A8F98;
  --gold: #D4AE6A; --gold-soft: #B69257; --border: rgba(255,255,255,.08); --border-accent: rgba(212,174,106,.2);
  --verre: rgba(10,10,15,.72); --verre-clair: rgba(8,8,12,.42);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --serif: "Source Serif 4", Georgia, serif; --display: "Playfair Display", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: max(18px, 4vw); --invite: 1;
  --ombre-texte: 0 1px 2px rgba(2,2,3,.6), 0 0 14px rgba(2,2,3,.4);
}
*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin: 0; padding: 0; background: var(--deep); color: var(--fg); }
body{ font-family: var(--serif); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible{ outline: 1px solid var(--gold); outline-offset: 3px; }
[hidden]{ display: none !important; }

#scene{ position: fixed; inset: 0; width: 100%; height: 100%; height: 100lvh; display: block; z-index: 0; }
#piste{ position: relative; z-index: 1; pointer-events: none; width: 1px; }

.label{ font-family: var(--mono); font-size: 11px; letter-spacing: .36em; text-transform: uppercase; color: var(--gold); margin: 0; }
.langue{ font-family: var(--mono); font-size: 10px; letter-spacing: .25em; color: var(--fg-muted); }
.tag{ display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--border-accent); border-radius: 999px; padding: 3px 8px 3px 10px; margin: 0 10px 0 0; vertical-align: 2px; }
.explicite{ display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 8px; border-radius: 3px; font-family: var(--mono); font-size: 9.5px;
  font-weight: 500; color: var(--deep); background: var(--fg-soft); text-decoration: none; vertical-align: 2px; cursor: help; }
.bouton{ display: inline-grid; place-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border-accent);
  background: rgba(10,10,15,.5); font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg); text-decoration: none;
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease); }
.bouton:hover, .bouton:focus-visible{ border-color: var(--gold); color: var(--gold); }
.bouton:active{ transform: scale(.97); }

/* Liens d'écoute : les icônes de marque du site v12, dans des cibles de 44 px */
.liens{ display: inline-flex; flex-wrap: wrap; align-items: center; }
.lien{ display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 10px; opacity: .8; transition: opacity .25s var(--ease), background .25s var(--ease); }
.lien:hover, .lien:focus-visible{ opacity: 1; background: rgba(255,255,255,.05); }
.lien svg{ width: 18px; height: 18px; display: block; }
.lien-soundcloud svg{ width: 30px; height: 15px; }

/* ─── Chrome ─────────────────────────────────────────────────────────────── */
.chrome{ position: fixed; top: 0; left: 0; right: 0; z-index: 6; display: flex; justify-content: space-between; align-items: flex-start;
  padding: max(16px, env(safe-area-inset-top)) var(--gutter) 0; pointer-events: none; }
.marque{ pointer-events: auto; display: grid; align-items: center; min-height: 44px; }
.marque img{ height: 18px; width: auto; opacity: .92; display: block; }   /* wordmark_rogne.png : les lettres font toute la hauteur */
.sommaire{ pointer-events: auto; position: relative; }
#sommaire-bouton{ font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--fg-soft);
  display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 999px;
  background: rgba(10,10,15,.42); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: border-color .2s var(--ease); }
#sommaire-bouton:hover{ border-color: var(--border-accent); }
.compteur{ color: var(--gold); font-variant-numeric: tabular-nums; }
.chevron{ width: 10px; height: 6px; transition: transform .35s var(--ease); }
.sommaire-ouvert .chevron{ transform: rotate(180deg); }

/* Le sommaire : le territoire du site, les dix univers, le Latest drop */
#sommaire-panneau{ position: absolute; right: 0; top: calc(100% + 10px); width: min(440px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100svh - 96px); overflow: auto; overscroll-behavior: contain; padding: 20px 14px 14px;
  background: var(--verre); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid var(--border); border-radius: 18px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; }
.sommaire-ouvert #sommaire-panneau{ opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.territoire{ padding: 0 8px 14px; border-bottom: 1px solid var(--border); }
.territoire-titre{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.12; margin: 10px 0 0; }
.territoire-titre b, .latest-titre b{ font-weight: 700; color: var(--gold); }
.territoire-lede{ font-size: 14px; line-height: 1.55; color: var(--fg-soft); margin: 8px 0 0; }
#sommaire-liste{ list-style: none; margin: 8px 0 0; padding: 0; }
/* un univers en 3D : sa pochette ouvre sa fiche, son nom fait voler le casque ; un univers sans 3D : toute la ligne ouvre la fiche */
#sommaire-liste li{ display: grid; grid-template-columns: 56px 1fr; align-items: center; }
#sommaire-liste button{ display: grid; align-items: center; gap: 12px; min-height: 52px; text-align: left; padding: 6px 8px; border-radius: 12px; transition: background .25s var(--ease); }
#sommaire-liste .som-aller{ grid-template-columns: 26px 1fr auto; }
#sommaire-liste .som-seul{ grid-column: 1 / -1; grid-template-columns: 40px 26px 1fr auto; }
#sommaire-liste button:hover, #sommaire-liste button:focus-visible{ background: rgba(255,255,255,.045); }
.som-pochette{ width: 40px; height: 40px; border-radius: 8px; object-fit: cover; display: block; background: rgba(255,255,255,.04); }
#sommaire-liste .num{ font-family: var(--mono); font-size: 11px; color: var(--gold); }
.som-nom{ font-family: var(--display); font-style: italic; font-size: 18px; color: var(--fg); }
#sommaire-liste .langue{ font-size: 9.5px; letter-spacing: .18em; }
.latest{ display: grid; grid-template-columns: 84px 1fr; gap: 16px; margin-top: 10px; padding: 16px 8px 4px; border-top: 1px solid var(--border); }
.latest-pochette{ width: 84px; height: 84px; border-radius: 10px; overflow: hidden; transition: transform .3s var(--ease); }
.latest-pochette:hover{ transform: scale(1.03); }
.latest-pochette img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.latest .tag{ margin: 0; }
.latest-titre{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.1; margin: 10px 0 0; }
.latest-frag{ font-size: 13px; line-height: 1.5; color: var(--fg-soft); font-style: italic; margin: 8px 0 12px; }
.latest-titre + .latest-ecouter{ margin-top: 14px; }   /* sans texte sous le titre (just...me & u), le bouton garde de l'air */
.latest-ecouter.joue{ border-color: var(--gold); color: var(--gold); }
.latest-aussi{ font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--fg-muted); margin: 14px 0 0; }
.latest .liens{ margin-left: -10px; }

/* ─── L'ADN sur l'ouverture : en bas, dans la colonne libre à gauche du Ø (paysage), en bandeau sous le Ø (portrait) ─── */
#adn{ position: fixed; z-index: 3; left: var(--gutter); bottom: max(96px, 12vh); width: clamp(180px, calc(50vw - 37vh - var(--gutter) - 20px), 400px);
  display: grid; align-items: end; pointer-events: none; text-shadow: var(--ombre-texte); }
#adn > .adn-temps{ grid-area: 1 / 1; visibility: hidden; opacity: 0; padding: 18px 20px 20px; border-radius: 16px;
  background: rgba(2,2,3,.46); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }   /* verre sombre : la poussière d'or passe derrière, floue */
.adn-debut{ display: grid; gap: 16px; }
.adn-entete, .adn-lede{ opacity: 0; }
.adn-titre{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(19px, 1.9vw, 28px); line-height: 1.18; margin: 10px 0 0; }
.adn-titre em{ color: var(--gold); }
.adn-lede{ font-size: clamp(13px, 1.1vw, 15px); line-height: 1.6; color: var(--fg-soft); margin: 0; }
.adn-lede b{ font-weight: 600; color: var(--fg); }
.adn-symbole{ font-family: var(--mono); font-size: 12px; letter-spacing: .5em; color: var(--gold); margin: 0; }
.adn-nom{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; margin: 8px 0 0; }
.adn-texte{ font-size: clamp(13px, 1.1vw, 15px); line-height: 1.6; color: var(--fg-soft); margin: 10px 0 0; }
@media (max-aspect-ratio: 1/1){
  /* portrait : un bandeau serré en bas, entre le bas de l'anneau (vers 78 % de la hauteur) et le lecteur */
  #adn{ right: var(--gutter); width: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }   /* au-dessus du lecteur */
  #adn > .adn-temps{ padding: 10px 14px 11px; }
  .adn-debut > *{ grid-area: 1 / 1; align-self: end; }
  .adn-titre{ font-size: 18px; line-height: 1.2; margin-top: 6px; }
  .adn-lede, .adn-texte{ font-size: 12.5px; line-height: 1.45; }
  .adn-pilier{ display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
  .adn-symbole{ font-size: 11px; letter-spacing: .4em; }
  .adn-nom{ font-size: 19px; margin: 0; }
  .adn-texte{ grid-column: 1 / -1; margin-top: 4px; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 760px){
  /* téléphone court : l'anneau descend trop bas pour le bandeau, le texte passe au-dessus de lui, sous le chrome */
  #adn{ bottom: auto; top: calc(max(16px, env(safe-area-inset-top)) + 56px); align-items: start; }
}

/* ─── La feuille de la zone : repère, nom d'univers, sous-titre du site, titres du décor ─── */
#feuilles{ position: fixed; left: var(--gutter); bottom: max(96px, 12vh); z-index: 4; width: min(440px, calc(100vw - 2 * var(--gutter))); pointer-events: none; }
.feuille{ position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.feuille.visible{ opacity: 1; transform: none; pointer-events: auto; }
.feuille .titre{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.04; margin: 12px 0 0; }
.feuille .texte{ font-size: 15px; line-height: 1.65; color: var(--fg-soft); margin: 12px 0 0; max-width: 40ch; }
.titres{ position: relative; list-style: none; margin: 18px 0 0; padding: 8px; border: 1px solid var(--border); border-radius: 16px;
  background: rgba(8,8,12,.38); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); max-height: 38vh; overflow: auto; overscroll-behavior: contain; }
/* il reste des titres au-dessus ou en dessous : le bord de la liste s'efface au lieu de trancher une ligne */
.titres.bas{ -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
.titres.haut{ -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px); }
.titres.haut.bas{ -webkit-mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.vers-fiche{ display: inline; text-align: left; font: inherit; line-height: inherit; color: inherit; }
.vers-fiche .plus{ display: inline-block; width: .3em; height: .3em; margin: 0 0 .12em .3em; color: var(--gold); vertical-align: middle; transition: transform .3s var(--ease); }
.vers-fiche:hover .plus, .vers-fiche:focus-visible .plus{ transform: rotate(90deg); }
.titres li{ display: flex; flex-wrap: wrap; align-items: center; }
.titres li button, .titres li .ligne{ flex: 1 1 180px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 10px; border-radius: 10px; text-align: left;
  font-size: 15px; color: var(--fg-soft); transition: color .25s var(--ease), background .25s var(--ease); }
.titres li .ligne{ color: var(--fg-muted); }
.titres .liens{ flex: 0 0 auto; min-width: 176px; }   /* quatre places : SoundCloud, Spotify, Apple Music, Suno restent en colonnes */
.titres .frag{ flex-basis: 100%; display: none; padding: 0 10px 10px 50px; font-size: 13px; line-height: 1.45; font-style: italic; color: var(--fg-muted); }
.titres li.devant .frag, .titres li.joue .frag, .titres li.hors-decor .frag{ display: block; }   /* un titre sans station garde son frag, comme sa carte v12 */
.feuille[data-zone="dark"] .frag{ font-family: var(--mono); font-style: normal; font-size: 12px; }
.titres li.premier-hors{ margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.titres li button:hover{ color: var(--fg); background: rgba(255,255,255,.03); }
.titres li.devant button{ color: var(--fg); }
.titres li.joue button .nom::before{ content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin: 0 10px 2px 0; }
.titres .ligne-titre{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.titres .mini{ width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex: none; display: block; }
.titres li button, .titres li .ligne{ align-items: center; }
.titres .tag{ display: block; width: max-content; font-size: 8.5px; padding: 2px 6px 2px 8px; margin: 0 0 6px; }

/* Le panneau respire : en transit, seulement le repère et le titre ; le texte à l'entrée de la zone ;
   la liste des titres devant une pochette (ou au survol, ou au clavier) */
.feuille .titre{ transform-origin: 0 100%; transition: transform .9s var(--ease); }
body:not(.zone-debut):not(.a-station) .feuille .titre{ transform: scale(.64); }
.feuille .texte{ max-height: 0; opacity: 0; overflow: hidden; transition: max-height .9s var(--ease), opacity .7s var(--ease), margin .9s var(--ease); margin-top: 0; }
body.zone-debut .feuille .texte{ max-height: 8em; opacity: 1; margin-top: 12px; }
.feuille .titres{ max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; pointer-events: none;
  transition: max-height .8s var(--ease), opacity .6s var(--ease), padding .8s var(--ease), border-color .6s var(--ease); }
body.a-station .feuille .titres, .feuille:hover .titres, .feuille:focus-within .titres{ max-height: 38vh; opacity: 1; padding: 8px; border-color: var(--border); pointer-events: auto; }
/* le repère et le titre restent lisibles sur les façades claires de Solar : ombre neutre et sombre, aucune lueur */
.feuille .label, .feuille .titre, .feuille .texte{ text-shadow: var(--ombre-texte); }
.feuille .label{ font-weight: 500; }

/* ─── Lecteur persistant ─────────────────────────────────────────────── */
.lecteur{ position: fixed; right: var(--gutter); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; gap: 10px; }
.lecteur-piste{ display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 6px 6px 6px 8px; border: 1px solid var(--border); border-radius: 16px;
  background: rgba(8,8,12,.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s; }
.en-ecoute .lecteur-piste{ opacity: 1; visibility: visible; transform: none; }
#lecteur-pochette{ width: 40px; height: 40px; border-radius: 8px; object-fit: cover; display: block; flex: none; background: rgba(255,255,255,.04); }
.lecteur-texte{ min-width: 0; max-width: 240px; padding: 0 10px; }
#lecteur-titre{ font-family: var(--display); font-style: italic; font-size: 17px; line-height: 1.2; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lecteur-monde{ font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 3px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lecteur-frag{ font-size: 12px; font-style: italic; color: var(--fg-muted); margin: 3px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lecteur-frag:empty{ display: none; }
#lecteur-spectre{ display: flex; align-items: flex-end; gap: 2px; height: 22px; width: 70px; margin: 0 6px; }
#lecteur-spectre span{ flex: 1; height: 100%; background: var(--gold); opacity: .8; transform-origin: 50% 100%; transform: scaleY(.06); border-radius: 1px; }
#lecteur-temps{ font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--fg-muted); margin: 0 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lecteur-ctrl{ display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--fg-soft); flex: none; transition: color .25s var(--ease), background .25s var(--ease); }
.lecteur-ctrl:hover, .lecteur-ctrl:focus-visible{ color: var(--gold); background: rgba(255,255,255,.05); }
#son{ display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; color: var(--fg-soft);
  border: 1px solid var(--border-accent); background: rgba(10,10,15,.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
#son svg{ width: 20px; height: 20px; grid-area: 1 / 1; }
#son .son-on, #son[aria-pressed="true"] .son-off{ display: none; }
#son[aria-pressed="true"] .son-on{ display: block; }
#son:active{ transform: scale(.97); }
#son[aria-pressed="true"]{ border-color: var(--gold); color: var(--gold); }
/* entré sans le son (on a scrollé sans toucher l'écran d'entrée) : le bouton se signale, sans lueur */
.son-a-mettre #son{ border-color: var(--gold); color: var(--fg); animation: respire 2.6s var(--ease) infinite; }
@keyframes respire{ 0%, 100%{ transform: scale(1); } 50%{ transform: scale(1.05); } }

.invite{ position: fixed; left: 50%; bottom: max(26px, 5vh); transform: translateX(-50%); z-index: 3; margin: 0; opacity: var(--invite);
  font-family: var(--mono); font-size: 10px; letter-spacing: .42em; text-transform: uppercase; color: var(--fg-soft); pointer-events: none;
  padding: 9px 12px 9px 16px; border-radius: 999px; background: rgba(10,10,15,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }   /* son propre verre : lisible sur le noir comme sur le plâtre de la fin */

/* Clôture : la phrase de la section ADN du site, sur le dernier plan. Derrière elle, un dégradé neutre et sombre, droit
   (jamais une lueur) qui descend du bord de l'écran : la phrase se lit sur le plâtre éclairé comme sur le noir. */
body::before{ content: ""; position: fixed; left: 0; right: 0; top: 0; height: 56vh; z-index: 2; pointer-events: none; opacity: var(--fin, 0);
  background: linear-gradient(rgba(10,8,6,.84), rgba(10,8,6,.74) 48%, rgba(10,8,6,0)); }
body.cloture-bas::before{ top: auto; bottom: 0; background: linear-gradient(to top, rgba(10,8,6,.84), rgba(10,8,6,.74) 48%, rgba(10,8,6,0)); }
.cloture{ position: fixed; left: var(--gutter); right: var(--gutter); top: 25%; transform: translateY(calc(-50% + (1 - var(--fin, 0)) * 14px)); z-index: 2; margin: 0;
  text-align: center; opacity: var(--fin, 0); pointer-events: none; }
.cloture-bas .cloture{ top: 74%; }   /* le casque est en haut de l'image : la phrase passe dessous, jamais sur lui */
.cloture-phrase{ margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(30px, 4.6vw, 60px); line-height: 1.08; text-shadow: 0 1px 3px rgba(2,2,3,.55), 0 0 28px rgba(2,2,3,.75); }
.cloture-phrase em{ color: var(--gold); }
.plateformes{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 26px; }
.plateformes a{ display: inline-grid; place-items: center; min-height: 44px; font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--fg-soft); text-decoration: none; transition: color .25s var(--ease); }
.plateformes a:hover, .plateformes a:focus-visible{ color: var(--gold); }

/* Fond clair (le blanc d'OFF SCRIPT) : les textes posés sur la scène passent en sombre, sans aucune lueur */
.fond-clair .feuille .label{ color: #8A6E40; }
.fond-clair .feuille .titre, .fond-clair .cloture-phrase{ color: #1b1712; }
.fond-clair .feuille .texte{ color: #3b342c; }
.fond-clair .feuille .label, .fond-clair .feuille .titre, .fond-clair .feuille .texte, .fond-clair .cloture-phrase{ text-shadow: none; }
.fond-clair .cloture-phrase em{ color: #8A6E40; }

/* sur le blanc, l'en-tête de la feuille prend un verre clair : lisible devant un tirage sombre comme devant le cyclo */
.feuille-tete{ width: max-content; max-width: 100%; border-radius: 16px; transition: background .6s var(--ease), padding .6s var(--ease); }
.fond-clair .feuille-tete{ padding: 14px 18px 16px; background: rgba(236,231,216,.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fond-clair .feuille .titre{ transform: none !important; }
/* les verres sombres (liste, lecteur, boutons) foncent sur le blanc, sinon ils virent au gris et le texte se perd */
.fond-clair .titres, .fond-clair .lecteur-piste, .fond-clair #son, .fond-clair #sommaire-bouton{ background: rgba(14,12,10,.7); }
.fond-clair .marque img{ filter: brightness(.55) saturate(1.2); }

/* ─── Après la traversée : les sections du site, dans le flux, par-dessus le dernier plan figé ─── */
#suite{ position: relative; z-index: 3; }
.section-fin{ padding: 18vh var(--gutter) 12vh; }
#univers{ padding-top: 36vh; background: linear-gradient(to bottom, rgba(2,2,3,0) 0, rgba(2,2,3,.84) 24vh, var(--deep) 46vh); }   /* le dernier plan s'efface sous le texte */
#healing, #pro, #connect{ background: var(--deep); }
#univers .territoire{ border: 0; padding: 0; }
#univers .territoire-titre{ font-size: clamp(34px, 5vw, 60px); line-height: 1.06; margin-top: 16px; }
#univers .territoire-lede{ font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; margin-top: 22px; }
.portes{ list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.porte{ position: relative; isolation: isolate; display: grid; align-content: end; width: 100%; aspect-ratio: 1; padding: 14px; border-radius: 14px; overflow: hidden; text-align: left;
  color: var(--fg); text-decoration: none; border: 1px solid var(--border); transition: border-color .25s var(--ease), transform .3s var(--ease); }
.porte img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform .6s var(--ease); }
.porte::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(2,2,3,.1) 30%, rgba(2,2,3,.82)); }   /* le nom se lit sur toutes les pochettes */
.porte:hover, .porte:focus-visible{ border-color: var(--border-accent); }
.porte:hover img{ transform: scale(1.04); }
.porte-langue{ position: absolute; top: 12px; right: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; color: var(--fg-soft); }
.porte-num{ font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.porte-nom{ font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1.15; margin-top: 6px; }
#univers .latest{ max-width: 560px; margin-top: 48px; padding: 22px 0 0; grid-template-columns: 120px 1fr; }
#univers .latest-pochette{ width: 120px; height: 120px; }
#connect{ padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.section-dedans{ max-width: 760px; margin: 0 auto; }
.section-fin h2{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(34px, 5vw, 60px); line-height: 1.06; margin: 16px 0 0; }
.section-fin h2 em, .section-fin h2 b{ color: var(--gold); font-weight: inherit; }
.section-fin h2 b{ font-weight: 700; }
.section-fin .lede{ font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; color: var(--fg-soft); margin: 22px 0 0; }
.section-fin .lede em{ color: var(--fg); }
.intertitre{ font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); margin: 44px 0 14px; }
.section-fin .texte{ font-size: 16px; line-height: 1.8; color: var(--fg-soft); margin: 0; }
.observe{ margin: 0; border-top: 1px solid var(--border); }
.observe .row{ display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.observe dt{ font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--fg); padding-top: 3px; }
.observe dd{ margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-soft); }
.disclaimer{ margin: 36px 0 0; padding: 18px 20px; border: 1px solid var(--border); border-left: 2px solid var(--gold-soft); border-radius: 12px; font-size: 14px; line-height: 1.7; color: var(--fg-soft); background: rgba(255,255,255,.02); }
.disclaimer b{ color: var(--fg); font-weight: 600; }
.waitlist{ margin: 48px 0 0; padding: 30px 24px; border: 1px solid var(--border-accent); border-radius: 18px; text-align: center; background: rgba(10,10,15,.5); }
.waitlist h3{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: 26px; margin: 0 0 20px; }
.waitlist .form{ display: flex; gap: 10px; max-width: 480px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.waitlist input[type="email"]{ flex: 1 1 240px; min-height: 48px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.04);
  color: var(--fg); font: 16px var(--serif); }   /* 16 px : Safari iOS ne zoome pas sur le champ */
.waitlist input[type="email"]::placeholder{ color: var(--fg-muted); }
.waitlist input[type="email"]:focus{ outline: none; border-color: var(--gold); }
.waitlist button[type="submit"]{ min-height: 48px; padding: 12px 22px; border-radius: 999px; background: var(--gold); color: var(--deep);
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; transition: transform .2s var(--ease), opacity .2s; }
.waitlist button[type="submit"]:active{ transform: scale(.97); }
.waitlist button[type="submit"]:disabled{ opacity: .6; cursor: progress; }
.waitlist .ok-msg{ display: none; font-size: 15px; line-height: 1.6; color: var(--fg); }
.waitlist .ok-msg p{ margin: 0; }
.waitlist .ok-souci{ margin-top: 6px !important; color: var(--fg-soft); }
.waitlist .ok-msg a{ color: var(--gold); }
.waitlist.sent .form{ display: none; }
.waitlist.sent .ok-msg, .waitlist.souci .ok-msg{ display: block; }
.waitlist.souci .ok-succes{ display: none; }
.waitlist.souci .ok-msg{ margin-top: 16px; }
.services{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 40px 0 0; }
.svc{ padding: 20px 20px 22px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.02); }
.svc h3{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.2; margin: 0; }
.svc p{ font-size: 14px; line-height: 1.65; color: var(--fg-soft); margin: 10px 0 0; }
.cta{ display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; margin: 36px 0 0; padding: 22px 24px; border: 1px solid var(--border-accent); border-radius: 16px; }
.cta-texte{ font-family: var(--display); font-style: italic; font-size: 21px; margin: 0; }
.cta-bouton{ display: inline-grid; place-items: center; min-height: 48px; padding: 12px 24px; border-radius: 999px; background: var(--gold); color: var(--deep); text-decoration: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; transition: transform .2s var(--ease); }
.cta-bouton:active{ transform: scale(.97); }
#connect .plateformes{ margin-top: 30px; }
#connect .contact{ margin: 26px 0 0; }
#connect .contact a{ display: inline-grid; place-items: center; min-height: 44px; font-family: var(--display); font-style: italic; font-size: 22px; color: var(--fg); text-decoration: none; }
#connect .contact a:hover, #connect .contact a:focus-visible{ color: var(--gold); }
.legal p{ margin: 40px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; line-height: 2; color: var(--fg-muted); }
/* les liens du crédit CC BY du casque : le gris de la ligne légale, soulignés, or au survol (sinon le bleu du navigateur) */
.legal a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover, .legal a:focus-visible{ color: var(--gold); }

/* ─── Fiche d'univers : panneau plein écran en verre sombre ─── */
html.fiche-ouverte{ overflow: hidden; }
#fiche{ position: fixed; inset: 0; z-index: 7; overflow: auto; overscroll-behavior: contain; padding: max(18px, env(safe-area-inset-top)) var(--gutter) max(18px, env(safe-area-inset-bottom));
  background: rgba(2,2,3,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .45s var(--ease); }
#fiche.ouverte{ opacity: 1; }
.fiche-verre{ position: relative; max-width: 1080px; margin: 0 auto; min-height: 100%; padding: 64px clamp(20px, 4vw, 56px) 48px; border: 1px solid var(--border); border-radius: 22px;
  background: rgba(10,10,15,.82); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); transform: translateY(14px); transition: transform .55s var(--ease); }
#fiche.ouverte .fiche-verre{ transform: none; }
.fiche-fermer{ position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; line-height: 1;
  color: var(--fg-soft); border: 1px solid var(--border); transition: color .25s var(--ease), border-color .25s var(--ease); }
.fiche-fermer:hover, .fiche-fermer:focus-visible{ color: var(--gold); border-color: var(--border-accent); }
.fiche-grille{ display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.fiche-pochette{ margin: 0; position: sticky; top: 24px; }
.fiche-pochette img{ width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16px; display: block; border: 1px solid var(--border); }
.fiche-titre{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(38px, 5vw, 62px); line-height: 1.04; margin: 12px 0 0; }
.fiche-langue{ margin: 12px 0 0; }
.fiche-sub{ font-size: 17px; line-height: 1.7; color: var(--fg-soft); margin: 16px 0 0; max-width: 52ch; }
.fiche-bloc{ margin: 28px 0 0; }
.reperes{ list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.reperes li{ font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-soft); padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; }
.reperes b{ color: var(--gold); font-weight: 500; }
.playlist .tag{ margin: 0; }
.playlist-titre{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: 28px; margin: 14px 0 0; }
.playlist-titre em{ color: var(--gold); }
.playlist-sous{ font-family: var(--mono); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--fg-muted); margin: 8px 0 0; }
.fiche-lede{ font-size: 16px; line-height: 1.7; color: var(--fg); margin: 18px 0 0; }
.fiche-corps-texte{ font-size: 15px; line-height: 1.75; color: var(--fg-soft); margin: 12px 0 0; }
.pratiques{ list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--fg-soft); }
.actions{ display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.youtube{ margin: 18px 0 0; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--deep); }
.youtube iframe{ width: 100%; height: 100%; border: 0; display: block; }
.avertissement{ font-size: 13px; line-height: 1.6; color: var(--fg-muted); margin: 18px 0 0; }
.fiche-intertitre{ font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); margin: 36px 0 12px; }
.cartes-suno{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cartes-suno a{ display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 14px; color: var(--fg); text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease); }
.cartes-suno a:hover, .cartes-suno a:focus-visible{ border-color: var(--border-accent); background: rgba(255,255,255,.03); }
.cartes-suno img, .sans-pochette{ width: 64px; height: 64px; border-radius: 10px; object-fit: cover; display: block; }
.sans-pochette{ display: grid; place-items: center; font-family: var(--display); font-size: 30px; color: var(--gold); background: rgba(255,255,255,.04); }
.carte-titre{ display: block; font-family: var(--display); font-style: italic; font-size: 19px; }
.carte-sous{ display: block; font-size: 13px; line-height: 1.5; color: var(--fg-soft); margin-top: 3px; }
.fiche-titres{ list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--border); }
.piste{ display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.piste-pochette{ position: relative; width: 64px; height: 64px; }
.piste-pochette img{ width: 64px; height: 64px; border-radius: 10px; object-fit: cover; display: block; }
.piste-jouer{ position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; background: rgba(2,2,3,.35); color: var(--fg); opacity: 0;
  transition: opacity .25s var(--ease), background .25s var(--ease); }
.piste-jouer svg{ width: 22px; height: 22px; }
.piste:hover .piste-jouer, .piste-jouer:focus-visible, .piste.joue .piste-jouer, .piste-jouer[aria-pressed="true"]{ opacity: 1; }
@media (hover: none){ .piste-jouer{ opacity: 1; background: rgba(2,2,3,.28); } }
.piste.joue .piste-jouer{ color: var(--gold); }
.piste-titre{ margin: 0; font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1.25; }
.piste.joue .piste-titre .nom::before{ content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin: 0 10px 3px 0; }
.piste-frag{ margin: 4px 0 0; font-size: 14px; line-height: 1.5; font-style: italic; color: var(--fg-soft); }
.piste .langue{ margin: 5px 0 0; }
.piste .liens{ justify-content: flex-end; }

/* ─── Entrée ─── */
#entree{ position: fixed; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 22px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(5,5,7,.55), rgba(2,2,3,.92)); transition: opacity 1.1s var(--ease), visibility 1.1s; }
#entree.parti{ opacity: 0; visibility: hidden; pointer-events: none; }
#entree-o{ width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-accent);
  transition: transform .3s var(--ease), border-color .3s var(--ease); }
#entree-o:hover{ border-color: var(--gold); transform: scale(1.04); }
#entree-o:active{ transform: scale(.97); }
#entree-o img{ width: 70px; height: auto; }   /* mark.png a beaucoup de marge : le Ø fait ~27 px */
.entree-texte{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(28px, 4vw, 44px); margin: 0; padding: 0 var(--gutter); }
.entree-texte b{ font-weight: 700; color: var(--gold); }
.entree-casque{ margin-top: 10px; }
#entree{ cursor: pointer; }
.entree-aide{ font-family: var(--mono); font-size: 10px; letter-spacing: .36em; text-transform: uppercase; color: var(--fg-muted); margin: 0; }

/* Chargement rapide : l'écran d'entrée remplace l'écran de chargement. Opaque tant que la scène se prépare derrière,
   un anneau or fin se remplit autour du Ø (--charge, de 0 à 1, posé par main.js). Aucun texte ajouté. */
html.entree-tot #chargement{ display: none; }
html.en-charge #entree{ background: var(--deep); cursor: progress; }
#entree-o{ position: relative; }
#entree-o::before{ content: ""; position: absolute; inset: -6px; border-radius: 50%; padding: 1.5px; pointer-events: none;
  background: conic-gradient(var(--gold) calc(var(--charge, 0) * 360deg), rgba(212,174,106,.14) 0deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .8s var(--ease); }
html.en-charge #entree-o::before{ opacity: 1; }
html.en-charge #entree-o{ border-color: transparent; }
html.en-charge #entree-o:hover{ transform: none; }
html.en-charge.entree-demandee #entree-o img{ animation: respire 2.6s var(--ease) infinite; }   /* le tap est retenu : le Ø respire en attendant */

/* ─── Chargement et repli ─── */
#chargement{ position: fixed; inset: 0; z-index: 9; background: var(--deep); display: grid; place-content: center; justify-items: center; gap: 18px; transition: opacity 1s var(--ease); }
#chargement.fini{ opacity: 0; pointer-events: none; }
#chargement img{ width: 90px; height: auto; opacity: .9; }
.chargement-texte{ font-family: var(--mono); font-size: 9.5px; letter-spacing: .4em; text-transform: uppercase; color: rgba(236,231,216,.4); margin: 0; }
#chargement-jauge{ width: 120px; height: 1px; background: var(--border); position: relative; overflow: hidden; }
#chargement-jauge::after{ content: ""; position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(var(--x, 0)); transition: transform .4s var(--ease); }
#repli{ display: none; position: relative; z-index: 10; background: var(--bg); padding: 12vh 8vw; }
#repli img{ width: min(70vw, 420px); border-radius: 16px; display: block; margin-bottom: 24px; }
#repli > h2{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(28px, 4vw, 44px); margin: 0; }
#repli .plateformes{ justify-content: flex-start; }
.sans-webgl #repli{ display: block; }
.sans-webgl #piste, .sans-webgl #scene, .sans-webgl .cloture, .sans-webgl .invite, .sans-webgl #adn, .sans-webgl .lecteur, .sans-webgl .sommaire, .sans-webgl #entree{ display: none; }
.sans-webgl #repli > h2, .sans-webgl #repli > .plateformes{ display: none; }   /* la section Connect, plus bas, les porte déjà (le titre de l'ADN, lui, reste) */
.sans-webgl #univers{ padding-top: 12vh; background: var(--deep); }
.repli-titre{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(34px, 6vw, 64px); line-height: 1.08; margin: 0 0 14px; }
.repli-titre b{ font-weight: 700; color: var(--gold); }
.repli-meta{ font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 36px; }
.repli-adn{ max-width: 760px; margin-top: 12vh; }
.repli-adn .adn-titre{ font-size: clamp(26px, 3.4vw, 40px); }
.repli-adn .adn-lede{ opacity: 1; margin-top: 18px; font-size: 16px; }
.repli-piliers{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-top: 36px; }
.repli-cloture{ font-family: var(--display); font-style: italic; font-size: clamp(26px, 3.4vw, 40px); margin: 48px 0 0; }
.repli-cloture em{ color: var(--gold); }
.fiche-statique{ margin-top: 12vh; padding-top: 48px; border-top: 1px solid var(--border); }
.sans-webgl .fiche-pochette{ position: static; }
#debug{ position: fixed; left: 8px; bottom: 8px; z-index: 20; font: 11px var(--mono); color: #9f9; background: rgba(0,0,0,.6); padding: 6px 8px; margin: 0; pointer-events: none; }

/* ─── Écrans moyens : le lecteur perd le spectre et le temps (comme la v12 sous 700 px) ─── */
@media (max-width: 1100px){
  .lecteur-texte{ max-width: 180px; }
}
@media (max-width: 720px){
  #feuilles{ bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  #lecteur-spectre, #lecteur-temps, #lecteur-frag{ display: none; }
  .lecteur{ left: var(--gutter); justify-content: flex-end; }
  .lecteur-piste{ flex: 1; min-width: 0; min-height: 52px; padding: 4px 4px 4px 6px; }
  .lecteur-texte{ flex: 1; max-width: none; padding: 0 8px; }
  #lecteur-titre{ font-size: 15px; }
  #lecteur-prec, #lecteur-suiv{ display: none; }   /* au téléphone, on change de titre en scrollant (Maj + flèches au clavier) */
  body.a-station .lecteur-piste{ opacity: 0; visibility: hidden; }   /* devant la pochette, la ligne de la feuille (point or) dit déjà ce qui joue */
  .cloture{ top: 24%; }
  .cloture-bas .cloture{ top: 72%; }
  .plateformes{ gap: 0 16px; }
  .plateformes a{ letter-spacing: .2em; }
  .feuille .texte{ font-size: 13.5px; line-height: 1.5; }   /* le sous-titre du site, à l'entrée de la zone seulement */
  body.a-station .feuille .titres{ max-height: 26vh; }
  body.a-station .titres li:not(.devant):not(.joue){ display: none; }   /* au téléphone, seulement le titre devant lequel on est */
  .titres .liens{ min-width: 0; padding-left: 40px; }
  .titres .frag{ padding-left: 50px; }
  #sommaire-panneau{ position: fixed; left: var(--gutter); right: var(--gutter); top: calc(max(16px, env(safe-area-inset-top)) + 54px); width: auto; max-height: calc(100svh - 150px); }
  .fiche-verre{ padding: 60px 18px 36px; border-radius: 18px; }
  .fiche-grille{ grid-template-columns: 1fr; }
  .fiche-pochette{ position: static; width: 62%; max-width: 300px; }
  .piste{ grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .piste-pochette, .piste-pochette img{ width: 56px; height: 56px; }
  .piste .liens{ grid-column: 2; justify-content: flex-start; margin-left: -12px; }
  .observe .row{ grid-template-columns: 1fr; gap: 4px; }
  .cta{ padding: 20px; }
  .section-fin{ padding-top: 14vh; }
  #healing{ padding-top: 30vh; }
}
@media (prefers-reduced-motion: reduce){ .feuille, #entree, .lecteur-piste, #fiche, .fiche-verre, #sommaire-panneau{ transition-duration: .2s; } .son-a-mettre #son{ animation: none; } }