/* ═══════════════════════════════════════════════════════════════════════════
   DAMIAN WILLIAM — SOURCE · le site comme œuvre (prototype de refonte, 13/10/2026)
   Système dérivé de /vip variante C : « piégé dans la machine ».
   Règle : tout ce qui DÉCORE est en code (caractères) ; tout ce qui se LIT est en
   typographie nette. Seule exception assumée : la signature manuscrite (le sceau).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'DW Mono'; src: url('fonts/jetbrainsmono-var-latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: 'DW Sans'; src: url('fonts/inter-var-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
/* repli métrique : évite le saut de mise en page (CLS) pendant le chargement des polices */
@font-face { font-family: 'DW Mono Repli'; src: local('Consolas'), local('Menlo'), local('DejaVu Sans Mono'); size-adjust: 104%; }

:root {
  /* couleurs — noir profond, encre froide, teinte de palette (VIP), or du site (action) */
  --noir: #000;
  --nuit: #04070b;             /* noir bleu-nuit de la charte (#0A0F16) assombri */
  --encre: #e9eef2;            /* texte de lecture : 18,0:1 sur noir */
  --encre-2: #b4bcc4;          /* texte secondaire : 10,9:1 */
  --encre-3: #8a939c;          /* méta, légendes : 6,7:1 (AA même en petit) */
  --encre-4: #59616a;          /* décor seulement, jamais pour du texte utile */
  --ligne: rgba(233, 238, 242, .12);
  --ligne-forte: rgba(233, 238, 242, .24);
  --teinte: #22a7c9;           /* palette « abysse » (par défaut) — reprise du moteur */
  --teinte-clair: #9becff;
  --teinte-rgb: 34, 167, 201;
  --or: #bf9000;               /* action : 7,2:1 sur noir, noir sur or 7,2:1 */
  --or-clair: #e2b33a;

  --mono: 'DW Mono', 'DW Mono Repli', ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  --sans: 'DW Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* espacements : base 4 px */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; --e10: 144px;
  --marge: clamp(16px, 4.2vw, 56px);
  --gouttiere: clamp(12px, 1.8vw, 24px);
  --max: 1440px;
  --tete: 64px;

  /* temps : tout est en secondes réelles, jamais en images */
  --t-court: .16s; --t-moyen: .32s; --t-long: .64s;
  --courbe: cubic-bezier(.2, .7, .1, 1);
  --courbe-machine: steps(6, end);
}
/* les 6 palettes de /vip : le choix du visiteur (localStorage « vv-palette ») suit dans tout le site */
html[data-palette='aurore']   { --teinte: #8d5cf6; --teinte-clair: #e0c4ff; --teinte-rgb: 141, 92, 246; }
html[data-palette='cendre']   { --teinte: #8fa3b8; --teinte-clair: #cfe6ff; --teinte-rgb: 143, 163, 184; }
html[data-palette='ambre']    { --teinte: #c98a1c; --teinte-clair: #ffd88a; --teinte-rgb: 201, 138, 28; }
html[data-palette='sang']     { --teinte: #c0353d; --teinte-clair: #ff9c8f; --teinte-rgb: 192, 53, 61; }
html[data-palette='terminal'] { --teinte: #2fbf5b; --teinte-clair: #9dffb4; --teinte-rgb: 47, 191, 91; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--noir); color-scheme: dark; scroll-padding-top: calc(var(--tete) + 16px); }
body { margin: 0; background: var(--noir); color: var(--encre); font: 400 16px/1.62 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--or); color: #000; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.passer { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--or); color: #000; padding: 10px 16px; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: top var(--t-court); }
.passer:focus { top: 12px; }

/* ── fond : l'écran de la machine (CSS seul, aucun calcul) ─────────────────── */
.fond { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(120% 70% at 70% -10%, rgba(var(--teinte-rgb), .07), transparent 60%),
  var(--noir); }
.fond::after { /* lignes de balayage très faibles : texture d'écran, pas un aplat */
  content: ''; position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); }

/* ── typographie ────────────────────────────────────────────────────────────── */
.meta, .chemin, .sec-idx, .etiquette { font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3); }
.titre-xl { font: 700 clamp(44px, 9.6vw, 148px)/.9 var(--mono); letter-spacing: -.045em; margin: 0; text-wrap: balance; }
.titre-l { font: 700 clamp(30px, 5.4vw, 72px)/.95 var(--mono); letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.titre-m { font: 700 clamp(22px, 2.6vw, 32px)/1.1 var(--mono); letter-spacing: -.02em; margin: 0; }
.chapo { font: 400 clamp(17px, 1.6vw, 21px)/1.55 var(--sans); color: var(--encre-2); max-width: 38em; margin: 0; }
.prose { max-width: 40em; color: var(--encre-2); font-size: 17px; }
.prose p { margin: 0 0 1.1em; }
.prose a, .lien { color: var(--encre); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.prose a:hover, .lien:hover { color: var(--or-clair); }
.teinte { color: var(--teinte-clair); }
.or { color: var(--or-clair); }
.curseur-clignote::after { content: '_'; color: var(--or); animation: clignote 1.1s steps(1) infinite; margin-left: .06em; }
@keyframes clignote { 50% { opacity: 0; } }

/* ── grille éditoriale asymétrique ─────────────────────────────────────────── */
.cadre { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--marge); }
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gouttiere); }
.section { padding: clamp(64px, 9vw, 144px) 0 0; position: relative; }
.sec-tete { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gouttiere); align-items: end; margin-bottom: clamp(24px, 3vw, 48px); }
.sec-tete .sec-idx { grid-column: 1 / span 2; align-self: start; padding-top: .7em; }
.sec-tete h2 { grid-column: 3 / span 7; }
.sec-tete .sec-lien { grid-column: 10 / span 3; justify-self: end; }
@media (max-width: 760px) {
  .sec-tete { grid-template-columns: 1fr auto; }
  .sec-tete .sec-idx { grid-column: 1 / -1; padding: 0; }
  .sec-tete h2 { grid-column: 1; }
  .sec-tete .sec-lien { grid-column: 2; }
}
.sec-lien { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--or-clair); text-decoration: none; white-space: nowrap; padding: 12px 0; }
.sec-lien:hover { color: var(--encre); }
.sec-lien::after { content: ' →'; display: inline-block; transition: transform var(--t-court) var(--courbe); }
.sec-lien:hover::after { transform: translateX(4px); }

/* repère de couche, vertical dans la marge gauche (bureau) */
.couche-repere { position: absolute; left: calc(var(--marge) * .35); top: clamp(64px, 9vw, 144px); writing-mode: vertical-rl; transform: rotate(180deg); font: 500 10px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--encre-4); pointer-events: none; }
@media (max-width: 1100px) { .couche-repere { display: none; } }

/* ── boutons ───────────────────────────────────────────────────────────────── */
.btn { --c: var(--or); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid var(--c); background: var(--c); color: #000; font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 2px; position: relative; transition: background var(--t-court), color var(--t-court), border-color var(--t-court); white-space: nowrap; }
.btn:hover { background: var(--encre); border-color: var(--encre); }
.btn::before { content: '['; margin-right: 2px; opacity: .55; } .btn::after { content: ']'; margin-left: 2px; opacity: .55; }
.btn-fantome { background: transparent; color: var(--encre); border-color: var(--ligne-forte); }
.btn-fantome:hover { background: transparent; color: var(--or-clair); border-color: var(--or); }
.btn-petit { min-height: 40px; padding: 0 14px; font-size: 11px; }
.rang-btn { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── EN-TÊTE ───────────────────────────────────────────────────────────────── */
.tete { position: sticky; top: 0; z-index: 40; height: var(--tete); border-bottom: 1px solid transparent; transition: background var(--t-moyen), border-color var(--t-moyen); background: linear-gradient(rgba(0,0,0,.82), rgba(0,0,0,.5)); }
.tete.defile, .tete:focus-within, .tete:hover { background: rgba(0, 0, 0, .86); border-bottom-color: var(--ligne); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tete-in { height: 100%; display: flex; align-items: center; gap: 18px; }
.sceau { display: block; width: clamp(124px, 12vw, 168px); color: var(--encre); flex-shrink: 0; text-decoration: none; line-height: 0; }
.sceau svg { width: 100%; height: auto; overflow: visible; }
.sceau:hover { color: var(--or-clair); }
/* la signature se trace une fois par visite, à la vitesse d'une main (2,2 s) ; ensuite elle reste fixe */
.sceau:not(.trace) .sig-f { mask: none; }            /* sans JS, ou après le tracé : la signature entière, nette */
.sceau.trace .sig-t { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation-name: tracer; animation-timing-function: cubic-bezier(.4, 0, .6, 1); animation-fill-mode: both; }
@keyframes tracer { to { stroke-dashoffset: 0; } }

.nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav > a, .grp-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; background: none; border: 0; cursor: pointer; text-decoration: none; font: 600 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); position: relative; }
.nav > a:hover, .grp-btn:hover, .grp:focus-within > .grp-btn, .grp.ouvert > .grp-btn { color: var(--encre); }
.grp-btn { text-decoration: none; }
.nav [aria-current='page'], .grp.actif > .grp-btn { color: var(--encre); }
.nav [aria-current='page']::after, .grp.actif > .grp-btn::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: var(--or); }
.grp-btn .num, .nav > a .num { color: var(--encre-4); font-weight: 500; }
.grp { position: relative; }
.grp-panneau { display: none; position: absolute; left: -8px; top: 100%; padding-top: 10px; min-width: 300px; }
/* sans JS : le survol et le focus ouvrent (CSS seul) */
html:not(.nav-js) .grp:hover > .grp-panneau, html:not(.nav-js) .grp:focus-within > .grp-panneau, .grp.ouvert > .grp-panneau { display: block; }
/* avec JS (dw.js, navigation()) : ouverture au survol après 80 ms, fermeture 250 ms après la sortie — fondu doux, sans clignoter en diagonale */
.nav-js .grp-panneau { display: block; visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .22s; }
.nav-js .grp.ouvert > .grp-panneau { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .16s ease, transform .2s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.nav-js .grp.ouvert > .grp-btn { color: var(--encre); }
.grp-boite { background: rgba(4, 7, 11, .97); border: 1px solid var(--ligne-forte); padding: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.7); }
.grp-boite .couche-nom { display: block; padding: 8px 10px 10px; border-bottom: 1px dashed var(--ligne); margin-bottom: 6px; font: 500 10px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--teinte-clair); }
.grp-boite a { display: grid; grid-template-columns: 1fr; padding: 10px; text-decoration: none; border-left: 2px solid transparent; }
.grp-boite a:hover, .grp-boite a:focus-visible { background: rgba(255,255,255,.04); border-left-color: var(--or); outline-offset: -2px; }
.grp-boite a b { font: 700 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--encre); }
.grp-boite a[aria-current='page'] b { color: var(--or-clair); }
.grp-boite a span { font: 400 12.5px/1.4 var(--sans); color: var(--encre-3); margin-top: 3px; }
.tete-droite { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.langues { display: flex; gap: 6px; font: 700 10.5px/1 var(--mono); letter-spacing: .14em; }
.langues a { text-decoration: none; color: var(--encre-3); padding: 8px 2px; }
.langues a[aria-current='true'] { color: var(--or-clair); }
.regard-mini { width: 84px; height: 30px; flex-shrink: 0; display: block; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--ligne-forte); background: transparent; cursor: pointer; padding: 0; font: 700 11px/1 var(--mono); letter-spacing: .1em; }
@media (max-width: 1080px) {
  .nav, .tete .langues { display: none; }
  .burger { display: inline-grid; place-items: center; }
  .tete-droite { margin-left: auto; gap: 10px; }
}
@media (max-width: 420px) { .tete .btn-reserver { padding: 0 12px; } .regard-mini { display: none; } }

/* menu mobile : une traversée verticale des couches */
.menu-mobile { position: fixed; inset: var(--tete) 0 0; z-index: 39; background: #000; overflow-y: auto; padding: 8px var(--marge) 120px; display: none; }
.menu-mobile.ouvert { display: block; }
.menu-mobile .mm-couche { border-top: 1px solid var(--ligne); padding: 18px 0 8px; }
.menu-mobile .mm-titre { display: flex; justify-content: space-between; font: 500 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--teinte-clair); margin-bottom: 6px; }
.menu-mobile a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; min-height: 48px; text-decoration: none; }
.menu-mobile a b { font: 700 22px/1.1 var(--mono); letter-spacing: -.01em; }
.menu-mobile a span { font: 400 12px/1.3 var(--sans); color: var(--encre-3); text-align: right; }
.menu-mobile a[aria-current='page'] b { color: var(--or-clair); }
.menu-mobile .langues { margin-top: 24px; font-size: 13px; }

/* ── SEUIL de page (le « lieu » où l'on entre) ───────────────────────────────── */
.seuil { position: relative; padding: clamp(40px, 7vw, 112px) 0 clamp(24px, 4vw, 64px); min-height: min(64vh, 640px); display: flex; align-items: flex-end; overflow: hidden; }
.seuil .cadre { position: relative; z-index: 1; }
.seuil .chemin { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: clamp(18px, 3vw, 36px); }
.chemin a { color: var(--encre-2); text-decoration: none; } .chemin a:hover { color: var(--or-clair); }
.chemin .prof { color: var(--teinte-clair); }
.seuil .chapo { margin-top: clamp(18px, 2.4vw, 32px); }
.seuil .rang-btn { margin-top: clamp(22px, 3vw, 40px); }
.regard-grand { position: absolute; right: max(-6vw, -80px); top: 0; height: 100%; width: min(56vw, 760px); opacity: .5; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to left, #000 40%, transparent); mask-image: linear-gradient(to left, #000 40%, transparent); }
@media (max-width: 760px) { .regard-grand { width: 100vw; right: -30vw; opacity: .28; } .seuil { min-height: 0; padding-top: 56px; } }

/* ── ACCUEIL : le héros (visage vivant) ─────────────────────────────────────── */
.heros { position: relative; height: calc(100svh - var(--tete)); min-height: 560px; overflow: hidden; margin-top: calc(var(--tete) * -1); padding-top: var(--tete); }
.heros-scene { position: absolute; inset: 0; z-index: 0; }
/* l'écran de code AVANT le moteur : du vrai texte, rien à télécharger, peint dès le 1er octet */
.heros-code { position: absolute; inset: 0; margin: 0; padding: calc(var(--tete) + 16px) var(--marge) 0; font: 400 clamp(10px, 1vw, 13px)/1.55 var(--mono); color: rgba(var(--teinte-rgb), .30); white-space: pre; overflow: hidden; pointer-events: none; transition: opacity 1.2s ease; }
.heros.moteur-pret .heros-code { opacity: 0; }
.heros-voile { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 30%, transparent 58%); }
.heros-texte { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding-bottom: clamp(28px, 5vh, 64px); }
.heros-texte .grille { align-items: end; }
.heros-texte h1 { grid-column: 1 / span 7; margin: 0; }
.heros-texte h1 .sig-grande { display: block; width: min(100%, 620px); color: var(--encre); }
.heros-texte .heros-droite { grid-column: 9 / span 4; }
.heros-texte .meta { margin-bottom: 14px; }
.heros-texte p.chapo { font-size: 16px; color: var(--encre-2); }
.heros-texte .rang-btn { margin-top: 20px; }
.heros-palettes { position: absolute; z-index: 3; right: var(--marge); top: calc(var(--tete) + 14px); display: flex; gap: 2px; align-items: center; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; color: var(--encre-3); }
.heros-palettes button { width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.heros-palettes i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); opacity: .5; box-shadow: 0 0 0 1px rgba(255,255,255,.2); transition: transform .2s, opacity .2s; }
.heros-palettes button[aria-checked='true'] i { opacity: 1; transform: scale(1.3); box-shadow: 0 0 0 1px rgba(255,255,255,.8); }
.heros-indice { position: absolute; z-index: 2; left: 50%; bottom: 10px; transform: translateX(-50%); font: 500 10px/1 var(--mono); letter-spacing: .3em; color: var(--encre-4); text-transform: uppercase; }
@media (max-width: 900px) {
  .heros { min-height: 620px; }
  .heros-texte h1, .heros-texte .heros-droite { grid-column: 1 / -1; }
  .heros-texte h1 .sig-grande { width: min(86vw, 420px); }
  .heros-texte p.chapo { font-size: 15px; }
  .heros-voile { background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 38%, transparent 66%); }
}

/* ── À LA UNE (sortie) : mise en page éditoriale asymétrique ────────────────── */
.une { align-items: center; }
.une-image { grid-column: 1 / span 6; position: relative; }
.une-texte { grid-column: 8 / span 5; }
.une-texte .titre-l { margin: 10px 0 16px; }
.une-texte .rang-btn { margin-top: 24px; }
@media (max-width: 860px) { .une-image, .une-texte { grid-column: 1 / -1; } }

/* image « en veille » : désaturée ; elle reçoit le signal (couleur) au survol / focus / lecture */
.veille { position: relative; overflow: hidden; background: var(--nuit); }
.veille img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.8); transition: filter .9s steps(7, end), transform var(--t-long) var(--courbe); }
.veille.recu img { filter: grayscale(.3) contrast(1.04) brightness(.94); }
.veille::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); opacity: 1; transition: opacity var(--t-long); }
a:hover > .veille img, a:focus-visible > .veille img, .veille:hover img, .joue .veille img, .une-image:hover img { filter: none; transform: scale(1.015); }
a:hover > .veille::after, .veille:hover::after, .joue .veille::after { opacity: .25; }

/* ── cartes de morceaux (cœur du signal) ───────────────────────────────────── */
.pistes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px) var(--gouttiere); counter-reset: piste; }
.pistes .piste:nth-child(4n+2) { margin-top: clamp(0px, 4vw, 56px); }   /* rythme asymétrique : la grille respire */
.pistes .piste:nth-child(4n+4) { margin-top: clamp(0px, 2vw, 28px); }
@media (max-width: 960px) { .pistes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pistes .piste:nth-child(n) { margin-top: 0; } .pistes .piste:nth-child(2n) { margin-top: 28px; } }
.piste { position: relative; counter-increment: piste; }
.piste .veille { aspect-ratio: 1; }
.piste .piste-num { position: absolute; left: 0; top: -18px; font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--encre-4); }
.piste .piste-num::before { content: counter(piste, decimal-leading-zero) ' /'; }
.piste h3 { font: 700 17px/1.2 var(--mono); letter-spacing: -.01em; margin: 12px 0 2px; }
.piste h3 a { text-decoration: none; }
.piste h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }   /* toute la carte est cliquable */
.piste .meta { font-size: 10.5px; }
.piste .liens { display: flex; gap: 14px; margin-top: 8px; position: relative; z-index: 2; }
.piste .liens a { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); text-decoration: none; padding: 8px 0; }
.piste .liens a:hover { color: var(--or-clair); }
.lire { position: absolute; z-index: 3; right: 10px; bottom: 10px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.6); color: var(--encre); cursor: pointer; display: grid; place-items: center; font: 700 14px/1 var(--mono); transition: background var(--t-court), color var(--t-court), border-color var(--t-court); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lire:hover, .joue .lire { background: var(--or); color: #000; border-color: var(--or); }

/* ── salles (sets) ─────────────────────────────────────────────────────────── */
.salles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px) var(--gouttiere); }
.salle { grid-column: span 6; text-decoration: none; display: block; position: relative; }
.salle:nth-child(1) { grid-column: 1 / span 7; }
.salle:nth-child(2) { grid-column: 9 / span 4; align-self: end; }
.salle:nth-child(3) { grid-column: 2 / span 4; }
.salle:nth-child(4) { grid-column: 7 / span 6; margin-top: clamp(0px, 6vw, 96px); }
@media (max-width: 860px) { .salle:nth-child(n) { grid-column: 1 / -1; margin-top: 0; } }
.salle .veille { aspect-ratio: 16 / 9; }
.salle .coord { position: absolute; z-index: 2; left: 10px; top: 10px; font: 500 10px/1.3 var(--mono); letter-spacing: .14em; color: var(--encre); background: rgba(0,0,0,.6); padding: 5px 7px; text-transform: uppercase; }
.salle .duree { position: absolute; z-index: 2; right: 10px; bottom: 10px; font: 700 11px/1 var(--mono); background: rgba(0,0,0,.7); padding: 6px 8px; }
.salle h3 { font: 600 clamp(16px, 1.4vw, 19px)/1.35 var(--sans); margin: 14px 0 0; color: var(--encre); max-width: 34em; }
.salle:hover h3 { color: var(--or-clair); }

/* ── relevé (momentum) en lecture de terminal ───────────────────────────────── */
.releve { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ligne); }
.releve div { padding: 24px 0 0; border-right: 1px dashed var(--ligne); padding-right: 16px; }
.releve div:last-child { border-right: 0; }
.releve b { display: block; font: 700 clamp(36px, 6vw, 88px)/1 var(--mono); letter-spacing: -.04em; }
.releve span { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
@media (max-width: 600px) { .releve { grid-template-columns: 1fr; } .releve div { border-right: 0; border-bottom: 1px dashed var(--ligne); padding-bottom: 18px; } }

/* ── invite de commande (booking, VIP) ──────────────────────────────────────── */
.invite { border: 1px solid var(--ligne-forte); background: rgba(4,7,11,.8); padding: clamp(20px, 3vw, 40px); position: relative; }
.invite::before { content: attr(data-titre); position: absolute; top: -8px; left: 16px; background: var(--noir); padding: 0 8px; font: 500 10px/16px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--teinte-clair); }
.invite .commande { font: 500 clamp(14px, 1.4vw, 17px)/1.6 var(--mono); color: var(--encre-2); margin: 0 0 18px; overflow-wrap: anywhere; }
.invite .commande b { color: var(--or-clair); font-weight: 600; }
.plateformes { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--ligne); }
.plateformes a { flex: 1 1 180px; padding: 18px 0; border-bottom: 1px solid var(--ligne); text-decoration: none; font: 700 14px/1 var(--mono); letter-spacing: .06em; display: flex; justify-content: space-between; padding-right: 18px; }
.plateformes a span { color: var(--encre-4); font-weight: 500; }
.plateformes a:hover { color: var(--or-clair); }

/* ── page set : vidéo à la demande + tracklist en terminal ─────────────────── */
.video { position: relative; aspect-ratio: 16/9; background: var(--nuit); border: 1px solid var(--ligne); overflow: hidden; }
.video button { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; background: none; }
.video img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) brightness(.7); transition: filter var(--t-long); }
.video button:hover img, .video button:focus-visible img { filter: none; }
.video .jouer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tracklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); font-family: var(--mono); }
.tracklist li { display: grid; grid-template-columns: 76px 40px 1fr; gap: 12px; align-items: baseline; border-bottom: 1px dashed var(--ligne); }
.tracklist a { padding: 14px 0; color: var(--or-clair); text-decoration: none; font-size: 13px; }
.tracklist a:hover { color: var(--encre); }
.tracklist .n { color: var(--encre-3); font-size: 12px; }
.tracklist .t { font-size: 14px; color: var(--encre); }
.colonnes-set { align-items: start; }
.colonnes-set .prose { grid-column: 1 / span 6; }
.colonnes-set .cote { grid-column: 8 / span 5; }
@media (max-width: 900px) { .colonnes-set .prose, .colonnes-set .cote { grid-column: 1 / -1; } }

/* ── formulaires : des invites de terminal lisibles ─────────────────────────── */
.formulaire { display: grid; gap: 28px; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px var(--gouttiere); }
fieldset legend { grid-column: 1 / -1; font: 700 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--teinte-clair); padding: 0 0 16px; float: left; width: 100%; border-bottom: 1px solid var(--ligne); margin-bottom: 18px; }
fieldset legend::before { content: '// '; color: var(--encre-4); }
.champ { display: grid; gap: 7px; }
.champ.large { grid-column: 1 / -1; }
.champ label { font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); }
.champ label i { color: var(--or-clair); font-style: normal; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 48px; background: rgba(4,7,11,.9); border: 1px solid var(--ligne-forte); border-radius: 2px; color: var(--encre); padding: 12px 14px; font: 400 16px/1.4 var(--sans); }
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 1px var(--or); }
.champ input::placeholder, .champ textarea::placeholder { color: var(--encre-3); }
.champ .aide { font: 400 12.5px/1.45 var(--sans); color: var(--encre-3); }
@media (max-width: 640px) { fieldset { grid-template-columns: 1fr; } }
.coche { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--encre-2); grid-column: 1 / -1; }
.coche input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--or); }
.conditions { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-column: 1 / -1; color: var(--encre-2); font-size: 15px; }
.conditions li::before { content: '> '; font-family: var(--mono); color: var(--teinte-clair); }

/* calendrier de disponibilités */
.calendriers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gouttiere); }
@media (max-width: 760px) { .calendriers { grid-template-columns: 1fr; } }
.mois h3 { font: 700 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 12px; }
.jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; font-family: var(--mono); }
.jours .js { font-size: 10px; color: var(--encre-3); text-align: center; padding: 4px 0; letter-spacing: .1em; }
.jours button, .jours span.passe { min-height: 40px; border: 1px solid var(--ligne); background: transparent; font: 500 13px/1 var(--mono); cursor: pointer; border-radius: 2px; }
.jours button:hover { border-color: var(--or); color: var(--or-clair); }
.jours button[aria-pressed='true'] { background: var(--or); color: #000; border-color: var(--or); }
.jours span.passe { display: grid; place-items: center; color: var(--encre-3); border-style: dashed; cursor: default; }

/* ── pied de page : le cartel de l'œuvre ────────────────────────────────────── */
.pied { margin-top: clamp(96px, 12vw, 192px); border-top: 1px solid var(--ligne); padding: 56px 0 140px; }
.pied .grille { align-items: start; row-gap: 40px; }
.pied-sceau { grid-column: 1 / span 4; color: var(--encre); width: min(260px, 70vw); }
.pied-cartel { grid-column: 1 / span 4; font: 400 12px/1.7 var(--mono); color: var(--encre-3); border-left: 1px solid var(--or); padding-left: 14px; }
.pied-cartel b { color: var(--encre); font-weight: 700; letter-spacing: .08em; }
.pied-cartel a { color: var(--encre-2); }
.pied-nav { grid-column: 6 / span 4; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.pied-nav a, .pied-reseaux a { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--encre-2); padding: 9px 0; }
.pied-nav a:hover, .pied-reseaux a:hover { color: var(--or-clair); }
.pied-lettre { grid-column: 10 / span 3; }
.pied-lettre form { display: flex; gap: 6px; margin-top: 10px; }
.pied-lettre input { flex: 1; min-width: 0; min-height: 44px; background: transparent; border: 1px solid var(--ligne-forte); color: var(--encre); padding: 0 12px; font: 400 15px var(--sans); border-radius: 2px; }
.pied-reseaux { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 20px; border-top: 1px dashed var(--ligne); padding-top: 18px; }
.pied-legal { grid-column: 1 / -1; font: 400 11px/1.6 var(--sans); color: var(--encre-3); }
@media (max-width: 900px) { .pied-sceau, .pied-cartel, .pied-nav, .pied-lettre { grid-column: 1 / -1; } }

/* ── le JOURNAL de la machine (narrateur, décoratif) ───────────────────────── */
.journal { position: fixed; left: var(--marge); bottom: 18px; z-index: 30; pointer-events: none; font: 500 11px/1.55 var(--mono); color: rgba(var(--teinte-rgb), .85); max-width: min(46ch, 40vw); text-shadow: 0 0 10px #000, 0 0 2px #000; }
.journal p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .45; }
.journal p:last-child { opacity: 1; }
.journal p:nth-last-child(2) { opacity: .7; }
.journal .moi { color: var(--or-clair); }
body.lecteur-actif .journal { bottom: 92px; }
@media (max-width: 767px) { .journal { display: none; } }

/* ── le LECTEUR persistant (le signal ne s'arrête pas en changeant de lieu) ─── */
.signal { position: fixed; z-index: 45; right: var(--marge); bottom: 16px; display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,.9); border: 1px solid var(--ligne-forte); padding: 6px 8px 6px 6px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); max-width: calc(100vw - 2 * var(--marge)); transform: translateY(0); transition: transform var(--t-moyen) var(--courbe), opacity var(--t-moyen); }
.signal[hidden] { display: flex; transform: translateY(140%); opacity: 0; pointer-events: none; }
.signal .s-lire { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--or); color: #000; cursor: pointer; font: 700 14px/1 var(--mono); flex-shrink: 0; }
.signal .s-info { min-width: 0; display: grid; }
.signal .s-titre { font: 700 13px/1.2 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28ch; }
.signal .s-onde { font: 400 12px/1 var(--mono); color: var(--teinte-clair); letter-spacing: -.5px; white-space: pre; height: 14px; overflow: hidden; }
.signal .s-temps { font: 500 11px/1 var(--mono); color: var(--encre-3); min-width: 72px; text-align: right; }
.signal .s-fermer { width: 36px; height: 36px; border: 0; background: none; color: var(--encre-3); cursor: pointer; font: 500 16px/1 var(--mono); }
.signal .s-fermer:hover { color: var(--encre); }
@media (max-width: 600px) { .signal { left: 8px; right: 8px; bottom: 8px; } .signal .s-titre { max-width: 100%; } .signal .s-info { flex: 1; } }

.son-ambiant { position: fixed; z-index: 44; right: var(--marge); bottom: 16px; min-height: 40px; padding: 0 12px; border: 1px solid var(--ligne); background: rgba(0,0,0,.75); color: var(--encre-3); cursor: pointer; font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.son-ambiant[aria-pressed='true'] { color: var(--teinte-clair); border-color: rgba(var(--teinte-rgb), .6); }
body.lecteur-actif .son-ambiant { display: none; }
@media (max-width: 600px) { .son-ambiant { right: 8px; bottom: 8px; } }

/* ── VOYAGE : la page qui se réécrit ───────────────────────────────────────── */
.rideau { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: none; }
.rideau.actif { display: block; }
html.en-voyage main { opacity: .0; transition: opacity .12s linear; }
[data-compile] { --d: 0s; }
.compile [data-compile] { animation: compiler .56s var(--courbe) both; animation-delay: var(--d); }
@keyframes compiler { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(10px); } 40% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }

/* réticule qui suit le pointeur fin (lecture de la machine) — décoratif, jamais le vrai curseur */
.reticule { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 1px solid rgba(var(--teinte-rgb), .55); opacity: 0; transition: opacity .2s, width .2s var(--courbe), height .2s var(--courbe), margin .2s var(--courbe), border-color .2s; will-change: transform; }
.reticule.vu { opacity: 1; }
.reticule.cible { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-color: var(--or); }
@media (hover: none), (pointer: coarse) { .reticule { display: none; } }

/* ── consentement (inchangé fonctionnellement, restylé) ─────────────────────── */
.consent { position: fixed; z-index: 80; left: 8px; right: 8px; bottom: 8px; background: rgba(4,7,11,.98); border: 1px solid var(--ligne-forte); padding: 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--encre-2); }
.consent p { flex: 1 1 320px; margin: 0; }

/* ── mouvement réduit : tout est là, rien ne bouge ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .reticule, .rideau { display: none !important; }
  .compile [data-compile] { animation: none; }
}

/* ── l'interrupteur SON (toujours visible, dans l'en-tête) ─────────────────── */
.son { min-height: 40px; padding: 0 12px; border: 1px solid var(--ligne-forte); background: transparent; cursor: pointer; font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); white-space: nowrap; border-radius: 2px; }
.son:hover { color: var(--encre); border-color: var(--encre-3); }
.son[aria-pressed='true'] { color: var(--teinte-clair); border-color: rgba(var(--teinte-rgb), .7); }
.son[aria-pressed='true'] .son-etat { color: var(--or-clair); }
.son.invite { animation: invite 2.4s ease-in-out infinite; }
@keyframes invite { 50% { border-color: var(--or); } }
@media (max-width: 520px) { .son .son-lib { display: none; } .son { padding: 0 10px; } }
.heros-moteur canvas { outline: none; }
/* à la surface, le visage a ses propres journaux : celui du site attend qu'on descende */
body.heros-visible .journal { opacity: 0; }
.journal { transition: opacity .6s; opacity: 0; background: rgba(0,0,0,.72); padding: 6px 10px; margin-left: -10px; }
.journal.actif { opacity: 1; }   /* le journal n'apparaît que quand la machine parle, puis s'efface : il ne reste jamais sur le texte */

/* l'image arrive : une bande de lecture la parcourt une fois de haut en bas (la « compilation »), puis l'image reste nette */
.veille::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18%; z-index: 1; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(to bottom, rgba(var(--teinte-rgb), .0) 0 2px, rgba(var(--teinte-rgb), .35) 2px 3px); mix-blend-mode: screen; }
.veille.recu::before { animation: balayer .9s steps(9, end) 1; }
@keyframes balayer { 0% { opacity: 1; transform: translateY(-20%); } 100% { opacity: 0; transform: translateY(560%); } }

/* ═══════════════════════════════════════════════════════════════════════════
   RÉ-HABILLAGE des pages ACTUELLES (corps Tailwind de site_public.ts) — ÉTAPE 1 de la mise en ligne.
   Tant qu'une page n'a pas été réécrite, son contenu garde sa structure mais prend la peau de l'œuvre :
   titres en mono, boutons en crochets, pochettes en veille, rayons à 2 px. Rien ne change dans le HTML.
   Portée : body.dw-refonte main.dw-ancien (le gabarit pose ces classes) — n'affecte JAMAIS le prototype.
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-ancien { font-family: var(--sans); }
.dw-ancien h1, .dw-ancien h2 { font-family: var(--mono) !important; letter-spacing: -.03em; font-weight: 700 !important; }
.dw-ancien h1 { font-size: clamp(36px, 7vw, 96px) !important; line-height: .95 !important; }
.dw-ancien h2 { font-size: clamp(26px, 4vw, 52px) !important; line-height: 1 !important; }
.dw-ancien h3 { font-family: var(--mono); letter-spacing: -.01em; }
.dw-ancien :is(a, button)[class*="bg-[rgb(191,144,0)]"][class*="rounded-full"]:not([class*="bg-[rgb(191,144,0)]/"]) { font-family: var(--mono) !important; letter-spacing: .14em !important; }
.dw-ancien :is(a, button)[class*="bg-[rgb(191,144,0)]"][class*="rounded-full"]:not([class*="bg-[rgb(191,144,0)]/"])::before { content: '[ '; opacity: .55; }
.dw-ancien :is(a, button)[class*="bg-[rgb(191,144,0)]"][class*="rounded-full"]:not([class*="bg-[rgb(191,144,0)]/"])::after { content: ' ]'; opacity: .55; }
#dw-prochain[hidden] { display: none !important; }   /* corrige aussi un défaut du site actuel : bandeau vide quand aucun direct n'est programmé */
.dw-ancien [class*="rounded-full"], .dw-ancien [class*="rounded-2xl"], .dw-ancien [class*="rounded-xl"], .dw-ancien [class*="rounded-lg"] { border-radius: 2px !important; }
.dw-ancien a[class*="bg-[#1DB954]"], .dw-ancien a[class*="bg-[#a6ce39]"] { background: transparent !important; color: var(--encre) !important; box-shadow: inset 0 0 0 1px var(--ligne-forte); font-family: var(--mono) !important; }
.dw-ancien a[class*="bg-[#1DB954]"]:hover, .dw-ancien a[class*="bg-[#a6ce39]"]:hover { color: var(--or-clair) !important; box-shadow: inset 0 0 0 1px var(--or); }
.dw-ancien [class*="text-[11px]"][class*="uppercase"], .dw-ancien [class*="text-[10px]"][class*="uppercase"] { font-family: var(--mono); letter-spacing: .16em !important; }
.dw-ancien .dw-cover img, .dw-ancien img[src*="ytimg"] { filter: grayscale(1) contrast(1.06) brightness(.82); transition: filter .9s steps(7, end) !important; }
.dw-ancien .group:hover .dw-cover img, .dw-ancien .dw-cover:hover img, .dw-ancien a:hover img[src*="ytimg"], .dw-ancien .recu img { filter: grayscale(.25) brightness(.96); }
.dw-ancien .dw-play { background: var(--or) !important; color: #000 !important; width: 44px !important; height: 44px !important; }
.dw-ancien input:not([type=checkbox]):not([type=radio]), .dw-ancien select, .dw-ancien textarea { border-radius: 2px !important; font-size: 16px; }
.dw-ancien input:focus, .dw-ancien select:focus, .dw-ancien textarea:focus { border-color: var(--or) !important; outline: none; box-shadow: 0 0 0 1px var(--or); }
.dw-ancien section[class*="border-t"] { border-top-style: dashed !important; }
.dw-ancien [class*="bg-white/[0.03]"] { background: rgba(4, 7, 11, .8) !important; }
/* pages pas encore réécrites : un fil d'Ariane terminal au-dessus du contenu ré-habillé */
.seuil-mini { padding: 28px 0 0; }
.seuil-mini .chemin { display: flex; flex-wrap: wrap; gap: 6px 14px; }
/* l'ancien bandeau or (« BUY NOW ») devient une ligne de journal, sobre */
.bandeau-annonce { display: flex; justify-content: center; gap: 10px; align-items: baseline; padding: 7px var(--marge); border-bottom: 1px solid var(--ligne); font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; background: #000; }
.bandeau-annonce a { color: var(--or-clair); text-decoration: none; }
.bandeau-annonce a:hover { color: var(--encre); }

/* ── passe 2 : pages de lecture, grilles de salles, page d'un titre ───────── */
.grille-salles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--gouttiere); }
@media (max-width: 960px) { .grille-salles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grille-salles { grid-template-columns: 1fr; } }
.grille-salles .salle h3 { font-size: 15px; }
.texte { max-width: 46em; font-size: 17px; color: var(--encre-2); }
.texte h2 { font: 700 clamp(22px, 2.6vw, 32px)/1.1 var(--mono); letter-spacing: -.02em; color: var(--encre); margin: 2.2em 0 .7em; }
.texte h2::before { content: '// '; color: var(--teinte-clair); font-weight: 500; }
.texte h3, .texte h4 { font: 700 17px/1.3 var(--mono); color: var(--encre); margin: 1.8em 0 .5em; }
.texte p { margin: 0 0 1.1em; }
.texte a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 4px; }
.texte a:hover { color: var(--or-clair); }
.texte ul, .texte ol { padding-left: 0; margin: 0 0 1.2em; list-style: none; }
.texte li { padding: 6px 0 6px 22px; position: relative; border-bottom: 1px dashed var(--ligne); }
.texte li::before { content: '>'; position: absolute; left: 0; color: var(--teinte-clair); font-family: var(--mono); }
.texte strong, .texte b { color: var(--encre); }
.texte blockquote { margin: 1.4em 0; padding-left: 16px; border-left: 1px solid var(--or); color: var(--encre); font-style: italic; }
.texte table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1em 0 1.6em; display: block; overflow-x: auto; }
.texte th, .texte td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.texte th { font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
.texte details { border-top: 1px solid var(--ligne); padding: 14px 0; }
.texte summary { cursor: pointer; font: 700 15px/1.4 var(--mono); color: var(--encre); }
.texte summary::marker { color: var(--or); }
.texte .img-texte { display: block; margin: 1.4em 0; max-width: 640px; }
.seuil-titre { min-height: 0; padding-top: clamp(28px, 4vw, 64px); }
.seuil-titre .titre-l { margin: 8px 0 18px; font-size: clamp(36px, 6vw, 92px); }
.tracklist .art { color: var(--encre); font-weight: 700; }
.releve-liste li { grid-template-columns: 140px 1fr; }
.releve-liste .n { color: var(--teinte-clair); padding: 14px 0; }

/* lisibilité : le grand regard ne passe JAMAIS sous un texte de lecture */
.seuil-titre .regard-grand { display: none; }   /* la pochette tient ce rôle */
@media (max-width: 760px) { .regard-grand { top: 0; height: 58%; opacity: .2; -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent); mask-image: linear-gradient(to bottom, #000 25%, transparent); } }

/* ── passe 3 : la voix du lieu, l'onde du seuil, la progression de lecture ── */
.voix { font: 500 12px/1.5 var(--mono); color: var(--teinte-clair); margin: -10px 0 18px; min-height: 1.5em; letter-spacing: .02em; }
.seuil-mini .voix { margin: 6px 0 0; }
.onde-seuil { margin: 14px 0 0; font: 400 13px/1 var(--mono); color: rgba(var(--teinte-rgb), .75); letter-spacing: -.4px; white-space: pre; overflow: hidden; height: 14px; max-width: 100%; }
.lecture { position: fixed; z-index: 41; left: 0; right: 0; top: var(--tete); padding: 5px var(--marge); font: 500 10.5px/1 var(--mono); color: var(--teinte-clair); background: linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,0)); pointer-events: none; white-space: pre; overflow: hidden; }
/* le journal devient une LIGNE D'ÉTAT au ras du bas de l'écran (fond plein, une seule ligne) : il ne recouvre jamais un paragraphe */
.journal { left: 0; right: 0; bottom: 0; max-width: none; margin: 0; padding: 4px var(--marge); height: 24px; overflow: hidden; background: #000; border-top: 1px solid var(--ligne); text-shadow: none; }
.journal p { display: none; }
.journal p:last-child { display: block; opacity: 1; }
body.lecteur-actif .journal { bottom: 0; }
body.lecteur-actif .signal { bottom: 32px; }
@media (max-width: 600px) { body.lecteur-actif .signal { bottom: 8px; } }

/* ── 13/10 après-midi : chiffres de « The social breakthrough » en tête ── */
.releve-tete { padding-top: clamp(40px, 6vw, 88px); }
.seuil .releve-seuil { margin-top: clamp(14px, 2vw, 28px); max-width: 1100px; }
.seuil .releve-seuil b { font-size: clamp(34px, 5.4vw, 80px); }

/* ── 13/10 après-midi : l'extrait joue au survol de la pochette (dw.js, extraits()) ── */
[data-extrait], .dw-cover[data-preview] { cursor: pointer; }
.extrait-joue { box-shadow: inset 0 0 0 1px var(--or); }
.extrait-indice { position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px;
  font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--encre); background: rgba(0, 0, 0, .78); border: 1px solid var(--ligne-forte);
  opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; max-width: min(320px, 80vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.extrait-indice.vu { opacity: 1; transform: none; }
.extrait-indice.attente { color: var(--encre-2); border-style: dashed; }
.extrait-indice .barres { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; }
.extrait-indice .barres i { width: 2px; height: 100%; background: var(--or); transform-origin: bottom; animation: extrait-barre .9s ease-in-out infinite; }
.extrait-indice .barres i:nth-child(2) { animation-delay: -.3s; } .extrait-indice .barres i:nth-child(3) { animation-delay: -.6s; }
.extrait-indice.attente .barres { display: none; }
@keyframes extrait-barre { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .nav-js .grp-panneau, .nav-js .grp.ouvert > .grp-panneau { transform: none; transition: opacity .01s, visibility 0s; }
  .extrait-indice { transition: none; transform: none; }
  .extrait-indice .barres i { animation: none; transform: scaleY(.7); }
}
/* ── 13/10 après-midi : le visage au centre de l'écran. Le moteur WebGL le pose lui-même (pages/accueil.js, centreEcran) ;
   l'image de REPLI (pas de WebGL, téléphone trop lent) suit : sur bureau, object-position 50% 30% la centre déjà
   (centre du visage à 36 % de l'image : 510 px pour 540 attendus en 1920×1080) ; sur un téléphone en portrait l'image
   n'est pas rognée en hauteur, on la descend pour que le centre du visage tombe au milieu de l'écran. */
@media (max-aspect-ratio: 3/5) { .heros-moteur .vv-repli { transform: translateY(calc(50svh - 36%)); } }