@charset "UTF-8";
/* ENAMYA://SESSION — tout est aligné sur une grille de caractères JetBrains Mono. */

:root {
  --bg: #0a0b0d;
  --bg-1: #0d0f12;
  --bg-2: #12151a;
  --line: #1a1e24;
  --line-2: #262b33;
  --dim: #4a525d;
  --mute: #6b7480;
  --text: #a6afb9;
  --bright: #e2e8ee;
  --accent: #7ea8ff;
  --accent-dim: #2c4475;
  --accent-wash: rgba(126, 168, 255, .07);
  --ascii-bas: #23282f;
  --ascii-mid: #39404a;
  --ascii-haut: #d9e1ea;

  --fs: 13px;
  --lh: 1.6;
  --gouttiere: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --barre: 56px;
  --lecteur: 52px;
  color-scheme: dark;
}

@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 300; font-display: swap; src: url('/polices/jetbrains-mono-300.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/polices/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/polices/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/polices/jetbrains-mono-700.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
/* « hidden » cache toujours, quelle que soit la mise en page de l’élément. */
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--barre) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs)/var(--lh) "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--lecteur) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .045) 1px, transparent 1.4px);
  background-size: calc(var(--fs) * .6 * 8) calc(var(--fs) * var(--lh) * 4);
  z-index: 0;
}
body::after {
  content: "";
  position: fixed; inset: -50%;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 100;
}
main, header, footer { position: relative; z-index: 1; }

::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--bright); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
b { color: var(--bright); font-weight: 500; }
kbd { font: inherit; border: 1px solid var(--line-2); padding: 0 .4em; color: var(--bright); }
pre { margin: 0; font: inherit; }
h1, h2, h3 { font-weight: 400; margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }
.dim { color: var(--dim); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: -999px; top: 8px; z-index: 300; background: var(--bright); color: var(--bg); padding: 4px 8px; }
.saut:focus { left: 8px; }

/* ---------- barre ----------
   Trois zones : la marque à gauche, la navigation au vrai centre de la page, les outils à droite.
   Les deux colonnes latérales ont la même largeur, sinon la navigation se décale vers le côté le plus court. */
.barre {
  position: sticky; top: 0; z-index: 50;
  height: var(--barre);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  column-gap: 24px;
  /* Le contenu de la barre s'aligne sur celui de la page (centré, largeur max) ; le fond et le filet restent pleine largeur. */
  padding: 0 max(var(--gouttiere), calc((100% - var(--max)) / 2 + var(--gouttiere)));
  background: rgba(10, 11, 13, .86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.marque { justify-self: start; align-self: center; display: flex; align-items: center; gap: 12px; color: var(--bright); font-weight: 500; letter-spacing: .22em; font-size: 13px; }
.marque-svg { display: block; height: 38px; width: auto; flex: none; }
.marque:hover { color: var(--bright); }
.marque:hover .marque-svg { filter: brightness(1.25); }

.nav { display: flex; align-self: stretch; }
.nav a { position: relative; display: flex; align-items: center; padding: 0 14px; color: var(--mute); letter-spacing: .08em; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { color: var(--bright); }
/* Le soulignement de la page active se pose sur le filet bas de la barre. */
.nav a[aria-current]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 1px; background: var(--accent); }
.num { color: var(--dim); margin-right: .6em; }
.nav a[aria-current] .num { color: var(--accent); }

.barre-droite { justify-self: end; align-self: center; display: flex; align-items: center; gap: 22px; min-width: 0; }
.pied-etat { font-variant-numeric: tabular-nums; white-space: nowrap; }
.outils { display: flex; align-items: center; gap: 6px; }
/* Tous les outils ont la même boîte : même hauteur, même alignement, même survol. */
.outil { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid transparent; color: var(--mute); white-space: nowrap; cursor: pointer; }
.outil:hover, .langues[open] .outil { color: var(--bright); border-color: var(--line-2); }
.btn-term kbd { border: 0; padding: 0; color: inherit; }
.compteur { min-width: 2.2ch; padding: 0 5px; text-align: center; color: var(--bright); border: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.btn-panier.plein .compteur { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.langues { position: relative; }
.langues summary { list-style: none; color: var(--bright); }
.langues summary::-webkit-details-marker { display: none; }
.langues summary span { color: var(--dim); }
.langues ul { position: absolute; right: 0; top: calc(100% + 12px); list-style: none; margin: 0; padding: 6px 0; min-width: 18ch; background: rgba(8, 9, 11, .98); border: 1px solid var(--line-2); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.langues li a { display: flex; gap: 14px; padding: 6px 14px; color: var(--mute); }
.langues li a b { color: var(--dim); font-weight: 400; width: 2ch; }
.langues li a:hover { color: var(--bright); background: var(--bg-2); }
.langues li a:hover b { color: var(--accent); }
.langues li a[aria-current] { color: var(--bright); }
.langues li a[aria-current] b { color: var(--accent); }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: 36px; padding: 0 16px;
  border: 1px solid var(--line-2);
  color: var(--bright);
  letter-spacing: .04em;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: var(--accent); color: var(--bright); background: var(--accent-wash); }
.btn-plein { background: var(--bright); color: var(--bg); border-color: var(--bright); }
.btn-plein:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn-large { width: 100%; height: 44px; }
.ico { display: inline-block; width: 2ch; text-align: center; flex: none; }
.btn-prix { justify-content: space-between; min-width: 0; overflow: hidden; }
.btn-prix span:first-child { overflow: hidden; text-overflow: ellipsis; }
.btn-prix span:last-child { font-variant-numeric: tabular-nums; flex: none; }

/* ---------- scène d'accueil ---------- */
.scene { position: relative; }
.champ {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .35) 32%, #000 62%), linear-gradient(#000 80%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .35) 32%, #000 62%), linear-gradient(#000 80%, transparent);
}
.scene .hero { position: relative; }
/* La turbine en panorama : toute la largeur, sans dépasser l'écran en hauteur. */
.figure-panorama .figure-cadre { aspect-ratio: 21 / 9; max-height: 66vh; width: 100%; }
.figure-hero .figure-cadre { background: radial-gradient(ellipse at 50% 55%, rgba(126, 168, 255, .05), var(--bg) 70%); }

.defile { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 56px; font-size: 11px; color: var(--dim); white-space: nowrap; }
.defile-piste { display: inline-flex; padding: 9px 0; animation: defile 60s linear infinite; }
.defile:hover .defile-piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .defile-piste { animation: none; } }

/* ---------- héros ----------
   Une seule console : barre d'état, la machine, l'écoute et les compteurs. */
.hero { max-width: var(--max); margin: 0 auto; padding: 36px var(--gouttiere) 64px; }
.console { border: 1px solid var(--line-2); background: rgba(10, 11, 13, .72); }
.console-barre { display: flex; gap: 24px; align-items: center; height: 32px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .08em; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.console-date { margin-left: auto; }
.console-etat { color: var(--mute); }
.console-etat.direct { color: var(--bright); }
.console-vue { position: relative; aspect-ratio: 21 / 9; max-height: 58vh; width: 100%; background: radial-gradient(ellipse at 50% 55%, rgba(126, 168, 255, .045), transparent 70%); }
.console-vue canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.console-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--line); }
.transport { display: grid; grid-template-columns: auto minmax(0, 26ch) minmax(0, 1fr) auto auto; align-items: center; gap: 18px; min-width: 0; padding: 14px 16px; }
.transport-jouer { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--bright); color: var(--bg); font: inherit; font-size: 12px; cursor: pointer; }
.transport-jouer:hover { background: var(--accent); }
.transport.joue .transport-jouer { background: none; color: var(--bright); }
.transport-id { display: grid; gap: 3px; min-width: 0; font-size: 11px; white-space: nowrap; }
.transport-id span { overflow: hidden; text-overflow: ellipsis; }
.transport-titre { color: var(--bright); font-size: 14px; letter-spacing: .14em; overflow: hidden; text-overflow: ellipsis; }
.transport-titre:hover { color: var(--accent); }
.transport .onde { cursor: pointer; min-width: 0; }
.transport .onde pre { font-size: 11px; }
.transport-lien { font-size: 12px; color: var(--mute); white-space: nowrap; padding: 6px 0; }
.transport-lien:hover { color: var(--accent); }
.console-compteurs { display: flex; margin: 0; border-left: 1px solid var(--line); }
.console-compteurs div { display: grid; align-content: center; gap: 2px; padding: 0 20px; border-left: 1px solid var(--line); }
.console-compteurs div:first-child { border-left: 0; }
.console-compteurs dt { color: var(--dim); font-size: 10px; letter-spacing: .12em; }
.console-compteurs dd { margin: 0; color: var(--bright); font-size: 16px; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; }
.boot { color: var(--dim); font-size: 12px; min-height: calc(4 * 1.6em); }
.boot .ok { color: var(--accent); }

/* ---------- figures ---------- */
.figure { margin: 0; }
.figure-cadre { position: relative; aspect-ratio: 1; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 55%, rgba(126, 168, 255, .035), transparent 62%); }
.figure-cadre canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.figure-cadre canvas.tire { cursor: grabbing; }
.coin { position: absolute; width: 12px; height: 12px; border: 0 solid var(--mute); pointer-events: none; }
.coin.hg { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.coin.hd { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.coin.bg { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.coin.bd { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.figure-cadre::before, .figure-cadre::after { content: ""; position: absolute; background: var(--line); pointer-events: none; }
.figure-cadre::before { left: 50%; top: 8px; width: 1px; height: 14px; }
.figure-cadre::after { top: 50%; left: 8px; height: 1px; width: 14px; }
.releve { position: absolute; left: 14px; bottom: 10px; display: flex; gap: 18px; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; pointer-events: none; }
.releve b { color: var(--mute); font-weight: 400; }
figcaption { margin-top: 10px; font-size: 11px; color: var(--dim); }

/* ---------- portes ---------- */
.portes { max-width: var(--max); margin: 0 auto 0; padding: 0 var(--gouttiere); display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.porte {
  display: grid; gap: 6px;
  padding: 28px 28px 24px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  transition: border-color .15s, background .15s;
}
.porte + .porte { border-left-color: var(--line); }
.porte:hover { border-color: var(--accent); background: var(--bg-1); }
.porte-tete { display: flex; gap: 14px; align-items: baseline; margin-bottom: 14px; }
.porte-nom { color: var(--bright); font-size: 26px; letter-spacing: .18em; font-weight: 300; }
.porte-ligne { color: var(--mute); font-size: 12px; }
.porte-prix { color: var(--bright); margin-top: 10px; }
.porte-cta { margin-top: 14px; color: var(--bg); background: var(--bright); justify-self: start; padding: 6px 14px; letter-spacing: .04em; }
.porte:hover .porte-cta { background: var(--accent); }

/* ---------- sections ---------- */
.section { max-width: var(--max); margin: 0 auto; padding: 88px var(--gouttiere) 24px; }
.page-tete { padding-top: 40px; }
.sec-tete { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.sec-num { color: var(--accent); font-size: 12px; }
.sec-tete h2 { font-size: 18px; color: var(--bright); letter-spacing: .14em; white-space: nowrap; }
.sec-precision { color: var(--mute); letter-spacing: .08em; }
.regle { flex: 1; height: 1px; background: var(--line-2); align-self: center; }
.sec-lien { color: var(--mute); font-size: 12px; white-space: nowrap; }
.sec-lien:hover { color: var(--accent); }
.fil { font-size: 12px; color: var(--mute); margin-bottom: 28px; display: flex; gap: 6px; flex-wrap: wrap; }
.fil a:hover { color: var(--accent); }
.fil [aria-current] { color: var(--bright); }
.page-titre { color: var(--bright); font-size: clamp(30px, 4.2vw, 52px); letter-spacing: .16em; font-weight: 300; line-height: 1.15; margin-bottom: 14px; }
.page-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--mute); margin: 0 0 32px; font-size: 12px; }
.page-meta a { color: var(--text); }
.page-meta a:hover { color: var(--accent); }
.page-titre.titre-prod { font-size: clamp(40px, 6.4vw, 92px); letter-spacing: .12em; margin-bottom: 22px; }
.bloc-titre { color: var(--dim); font-size: 11px; letter-spacing: .12em; margin: 44px 0 14px; }
.tx-id { color: var(--dim); font-size: 12px; margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.u-dispo { color: var(--accent); }

/* ---------- filtres ---------- */
.recherche { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0 12px; height: 42px; border: 1px solid var(--line-2); background: var(--bg); font-size: 13px; cursor: text; }
.recherche:focus-within { border-color: var(--accent); }
.recherche input { flex: 1; min-width: 0; height: 100%; padding: 0; background: none; border: 0; color: var(--bright); outline: none; }
.recherche input::placeholder { color: var(--dim); }
.recherche input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .5; }
.recherche kbd { font: inherit; font-size: 11px; color: var(--dim); border: 1px solid var(--line-2); padding: 0 6px; line-height: 18px; }
.recherche:focus-within kbd { visibility: hidden; }
.aucun { color: var(--dim); text-align: center; padding: 48px 0; margin: 0; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-bottom: 24px; font-size: 12px; }
.filtre-groupe { display: flex; flex-wrap: wrap; gap: 4px; }
.filtre-groupe button { color: var(--mute); padding: 2px 8px; border: 1px solid transparent; }
.filtre-groupe button:hover { color: var(--bright); }
.filtre-groupe button[aria-pressed="true"] { color: var(--bright); border-color: var(--line-2); background: var(--bg-2); }

/* ---------- liste de prods ---------- */
.tx-entete, .tx {
  display: grid;
  grid-template-columns: 4ch 8ch minmax(14ch, 1fr) 5ch 5ch 10ch 10ch 3ch 3ch;
  gap: 0 16px;
  align-items: center;
}
.tx-entete { color: var(--dim); font-size: 11px; letter-spacing: .08em; padding: 0 12px 8px; border-bottom: 1px solid var(--line-2); }
.tx-liste { list-style: none; margin: 0; padding: 0; }
.tx { border-bottom: 1px solid var(--line); padding: 12px; position: relative; transition: background .12s; }
.tx[hidden] { display: none; }
.tx:hover { background: var(--bg-1); }
.tx::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; }
.tx.joue::before { background: var(--accent); }
.tx-jouer { color: var(--mute); width: 3ch; text-align: left; }
.tx-jouer:hover, .tx.joue .tx-jouer { color: var(--accent); }
.tx .tx-id { margin: 0; }
.tx.joue .tx-id { color: var(--accent); }
.tx-titre { color: var(--bright); letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-titre:hover { color: var(--accent); }
.tx-num { font-variant-numeric: tabular-nums; }
.tx-style { color: var(--mute); }
.puce { color: var(--text); border: 1px solid var(--line-2); padding: 0 6px; white-space: nowrap; }
.puce:hover { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.puce.inconnue { color: var(--dim); border-style: dashed; }
.puce.inconnue:hover { color: var(--dim); background: none; border-color: var(--line-2); }
.inconnue { color: var(--dim); cursor: default; }
.tx-prix { color: var(--bright); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-prix:hover { color: var(--accent); }
.tx-chevron { color: var(--dim); text-align: right; }
.tx:hover .tx-chevron { color: var(--accent); }

/* ---------- fiche technique ---------- */
.fiche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 36px; border: 1px solid var(--line-2); }
.fiche div { padding: 10px 14px; border-left: 1px solid var(--line-2); }
.fiche div:first-child { border-left: 0; }
.fiche dt { color: var(--dim); font-size: 10px; letter-spacing: .12em; }
.fiche dd { margin: 2px 0 0; color: var(--bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- écoute ---------- */
.ecoute { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; }
.onde { position: relative; touch-action: none; }
.onde pre { overflow: hidden; }
.onde pre { white-space: pre; font-size: 13px; line-height: 1; letter-spacing: 0; color: var(--line-2); }
.onde .onde-progres { position: absolute; inset: 0; color: var(--accent); clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
/* Tout le morceau : la tête de lecture avance dessus, le survol montre le temps visé. */
.onde-tete { position: absolute; top: -2px; bottom: -2px; left: var(--p, 0%); width: 1px; background: var(--bright); pointer-events: none; opacity: 0; transition: opacity .2s; }
.onde.engagee .onde-tete, .onde.glisse .onde-tete, .onde:hover .onde-tete { opacity: 1; }
.onde:hover pre:first-child { color: var(--dim); }
.onde .piste-survol { bottom: calc(100% + 6px); }
.onde:hover .piste-survol, .onde.glisse .piste-survol { opacity: 1; }
/* Quand la mesure arrive, l'onde se dessine de gauche à droite. */
.onde.mesuree pre:first-child { animation: onde-apparait .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes onde-apparait { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .onde.mesuree pre:first-child { animation: none; } }
.ecoute-temps { display: grid; font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; color: var(--bright); }

/* ---------- pages légales ---------- */
.legal { max-width: 760px; }
.titre-legal { font-size: clamp(22px, 5.4vw, 52px); letter-spacing: .1em; overflow-wrap: anywhere; }
.legal section { padding: 18px 0; border-top: 1px solid var(--line); }
.legal h2 { margin: 0 0 10px; font-size: 12px; font-weight: 400; letter-spacing: .14em; color: var(--bright); text-transform: uppercase; }
.legal p { margin: 0 0 10px; color: var(--text); line-height: 1.75; overflow-wrap: anywhere; }
.legal a { color: var(--bright); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.legal a:hover { color: var(--accent); }
.pied-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied-legal a { color: var(--mute); }
.pied-legal a:hover { color: var(--bright); }

/* ---------- après paiement ---------- */
.achats { list-style: none; margin: 28px 0 16px; padding: 0; border-top: 1px solid var(--line); max-width: 720px; }
.achats > li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.achats p { margin: 0 0 8px; }
.achats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.achats a { display: flex; justify-content: space-between; gap: 16px; min-width: 0; color: var(--bright); overflow-wrap: anywhere; }
.achats a span { color: var(--mute); white-space: nowrap; }
.achats a:hover span { color: var(--accent); }

/* ---------- page prod ---------- */
.prod { display: grid; grid-template-columns: minmax(0, 1fr) 38ch; gap: clamp(32px, 6vw, 96px); align-items: start; }
.prod-ecoute { display: flex; align-items: center; gap: 20px; margin-top: 8px; }
.prod-onde { color: var(--accent-dim); overflow: hidden; white-space: pre; font-size: 14px; line-height: 1; flex: 1; }
.tx.joue .prod-onde, .prod-onde.joue { color: var(--accent); }
.chaine { font-size: 12px; line-height: 1.75; color: var(--mute); overflow-x: auto; white-space: pre; }
.chaine .voie { color: var(--text); }
.chaine a { color: var(--bright); }
.chaine a:hover { color: var(--accent); }
/* Une source tenue secrète : classée, pas nommée. */
.secret { display: inline-block; padding: 0 6px; color: var(--mute); font-size: 10px; letter-spacing: .22em; line-height: 1.6;
  border: 1px dashed var(--line-2); background: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(255, 255, 255, .035) 4px 8px);
  user-select: none; }

.achat { position: sticky; top: calc(var(--barre) + 24px); border: 1px solid var(--line-2); padding: 22px; background: var(--bg-1); display: grid; gap: 14px; }
.achat h2 { color: var(--bright); font-size: 12px; letter-spacing: .14em; }
.achat-lien { color: var(--mute); font-size: 12px; justify-self: start; }
.achat-lien:hover { color: var(--accent); }
.achat-nom { display: flex; justify-content: space-between; color: var(--bright); letter-spacing: .14em; margin: 0; }
.achat-nom span { letter-spacing: 0; color: var(--text); }
.achat p { margin: 0; font-size: 12px; }
.licences { list-style: none; margin: 0; padding: 0; }
.licences label { display: grid; grid-template-columns: 3ch 1fr auto; gap: 8px; padding: 8px 10px; border: 1px solid transparent; cursor: pointer; }
.licences label:hover { border-color: var(--line-2); }
.licences input { position: absolute; opacity: 0; }
.licences .case::before { content: "( )"; color: var(--dim); }
.licences input:checked + .case::before { content: "(●)"; color: var(--accent); }
.licences input:checked ~ .nom { color: var(--bright); }
.licences input:focus-visible ~ .nom { outline: 1px solid var(--accent); outline-offset: 2px; }
.licences .detail { display: block; color: var(--dim); font-size: 11px; }
.licences .prix { color: var(--bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.licences .badge { display: inline-block; margin-left: 8px; padding: 0 5px; font-size: 9px; letter-spacing: .12em; color: var(--bg); background: var(--accent); vertical-align: 2px; }
.recois ul { list-style: none; margin: 10px 0 14px; padding: 10px 12px; border: 1px dashed var(--line-2); display: grid; gap: 4px; font-size: 12px; color: var(--text); }
.recois li::before { content: "+ "; color: var(--accent); }
.recois .recois-titre { color: var(--dim); letter-spacing: .1em; font-size: 11px; margin-bottom: 2px; }
.recois .recois-titre::before { content: none; }
.garanties { margin: 10px 0 0; font-size: 11px; color: var(--dim); letter-spacing: .04em; text-align: center; }
.saisie { display: block; min-width: 0; }
.saisie input { display: block; width: 100%; height: 40px; padding: 0 12px; background: var(--bg); border: 1px solid var(--line-2); color: var(--bright); }
.saisie input:focus { outline: none; border-color: var(--accent); }

/* ---------- unités ---------- */
.unites-grille { list-style: none; margin: 0; padding: 1px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; }
.unites-petites { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.unite-carte { background: var(--bg); outline: 1px solid var(--line); }
.unite-carte .u-corps { display: flex; flex-direction: column; height: 100%; padding: 16px 16px 18px; transition: background .15s; }
.unite-carte a.u-corps:hover { background: var(--bg-1); }
.u-ref { color: var(--dim); font-size: 11px; display: flex; justify-content: space-between; }
.u-statut::before { content: "● "; }
.u-statut.dispo { color: var(--accent); }
.u-forme { position: relative; aspect-ratio: 1; margin: 10px -6px 4px; }
.u-forme canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Unités à venir : éteintes, non cliquables. */
.a-venir .u-corps { filter: grayscale(1); cursor: default; }
.a-venir .u-forme { opacity: .28; }
.a-venir .u-nom, .a-venir .u-sous, .a-venir .u-ligne, .a-venir .u-ref span:first-child { color: var(--dim); }
.a-venir .u-statut, .a-venir .u-cta { color: var(--line-2); }
.unite-carte.a-venir { display: flex; flex-direction: column; }
.a-venir .u-corps { flex: 1; height: auto; }
.u-prevenir { padding: 0 16px 16px; font-size: 12px; }
.btn-compte .compte-signe, .btn-panier .panier-signe { display: block; }
.btn-compte[aria-current] { color: var(--bright); border-color: var(--line-2); }
.compte-console { margin-top: 8px; }
.compte-id { color: var(--mute); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.compte-console .console-etat { margin-left: auto; }
.compte-corps { padding: 28px clamp(16px, 3vw, 32px); display: grid; gap: 32px; }
.compte-tag { margin: 0 0 10px; color: var(--dim); font-size: 11px; letter-spacing: .14em; }
.compte-connexion { display: grid; gap: 12px; max-width: 560px; }
.compte-connexion p { margin: 0; }
form.compte-connexion > *, form.compte-connexion .abonnement-ligne { grid-column: 1; grid-row: auto; }
.compte-connexion .abonnement-etat { min-height: 1.5em; }
.palier-nom { margin: 0; color: var(--bright); font-size: clamp(30px, 5.4vw, 64px); font-weight: 300; letter-spacing: .14em; line-height: 1.1; }
.palier-avantage { margin: 6px 0 22px; color: var(--accent); }
.palier-suite { margin: 14px 0 0; color: var(--mute); }
.palier-suite b { color: var(--bright); font-weight: 400; }
.jauge { position: relative; padding-bottom: 40px; }
.jauge-barre { display: flex; gap: 3px; height: 14px; }
.jauge-barre i { flex: 1; background: var(--line); }
.jauge-barre i.on { background: var(--accent); }
.jauge-barre i.bord { background: var(--accent-dim); animation: clignote 1.6s steps(2) infinite; }
@keyframes clignote { 50% { background: var(--line); } }
@media (prefers-reduced-motion: reduce) { .jauge-barre i.bord { animation: none; } }
.jauge-reperes { list-style: none; margin: 0; padding: 0; }
.jauge-reperes li { position: absolute; top: 24px; left: calc(var(--x) * 100%); display: grid; gap: 2px; font-size: 10px; letter-spacing: .1em; color: var(--dim); white-space: nowrap; border-left: 1px solid var(--line-2); padding-left: 6px; }
.jauge-reperes li:last-child { transform: translateX(-100%); border-left: 0; border-right: 1px solid var(--line-2); padding: 0 6px 0 0; text-align: right; }
.jauge-reperes li.atteint { color: var(--bright); }
.compte-cadeaux { border: 1px solid var(--accent-dim); background: var(--accent-wash); padding: 16px 18px; }
.cadeaux { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cadeau { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cadeau-palier { color: var(--accent); letter-spacing: .1em; }
.cadeau select { width: 100%; height: 40px; padding: 0 10px; background: var(--bg); border: 1px solid var(--line-2); color: var(--bright); font: inherit; }
.cadeau .btn { height: 40px; }
.cadeau.pris b { color: var(--bright); font-weight: 400; }
.compte-cadeaux .abonnement-etat:empty { display: none; }
.compte-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compte-chiffres div { padding: 14px 0; }
.compte-chiffres div + div { border-left: 1px solid var(--line); padding-left: 18px; }
.compte-chiffres dt { color: var(--dim); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.compte-chiffres dd { margin: 4px 0 0; color: var(--bright); font-size: 18px; font-variant-numeric: tabular-nums; }
.achats-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.achats-liste > li { border-bottom: 1px solid var(--line); }
.achat-ligne { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto; gap: 16px; align-items: baseline; padding: 12px 0; }
.achat-noms { min-width: 0; overflow-wrap: anywhere; }
.achat-noms b { color: var(--bright); font-weight: 400; }
.achat-fichiers .achats { margin: 0 0 14px; max-width: none; }
.lien { padding: 0; background: none; border: 0; color: var(--mute); cursor: pointer; font: inherit; }
.lien:hover { color: var(--accent); }
.lien.danger:hover { color: #d77a7a; }
.compte-actions { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; font-size: 12px; }
.compte-source { padding: 18px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.source-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.puce { padding: 6px 12px; border: 1px solid var(--line-2); color: var(--text); background: none; font: inherit; font-size: 12px; cursor: pointer; }
.puce:hover, .puce:focus-visible { color: var(--bright); border-color: var(--accent); outline: none; }
.compte-suppression .raisons { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.compte-suppression legend { color: var(--bright); margin-bottom: 8px; padding: 0; }
.compte-suppression .raisons label { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text); }
.compte-suppression .raisons input { appearance: none; width: 12px; height: 12px; border: 1px solid var(--line-2); border-radius: 50%; margin: 0; flex: none; }
.compte-suppression .raisons input:checked { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--bg); }
.compte-suppression .raisons input:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.compte-suppression .raisons label:has(input:checked) { color: var(--bright); }
.compte-suppression textarea { display: block; width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line-2); color: var(--bright); font: inherit; resize: vertical; }
.compte-suppression textarea:focus { outline: none; border-color: var(--accent); }
.suppression-actions { display: flex; align-items: center; gap: 20px; }
.btn.danger { border-color: #7a3b3b; color: #d77a7a; }
.btn.danger:hover { background: #d77a7a; color: var(--bg); border-color: #d77a7a; }
.compte-echelle { border-top: 1px solid var(--line); padding: 18px clamp(16px, 3vw, 32px) 22px; }
.echelle { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.echelle-sous { margin: 0 0 14px; font-size: 12px; }
.echelle li { display: grid; grid-template-columns: 18px minmax(0, 150px) 130px minmax(0, 1fr); gap: 12px; color: var(--dim); }
.echelle b { font-weight: 400; }
.echelle li.atteint { color: var(--text); }
.echelle li.atteint .p-marque { color: var(--accent); }
.echelle li.actuel b { color: var(--bright); }
.echelle li.actuel .p-marque::before { content: '●'; }
.echelle li.actuel .p-marque { font-size: 0; }
.echelle li.actuel .p-marque::before { font-size: 13px; }
.remise-palier { color: var(--accent); }
.coupure-ligne { display: grid; justify-items: start; gap: 16px; margin-top: 24px; }
form.coupure-ligne > * { grid-column: 1; }
.coupure-ligne p { margin: 0; }
.coupure-ligne [hidden] { display: none; }
.coupure-ligne .abonnement-etat:empty { display: none; }
.u-prevenir summary { list-style: none; cursor: pointer; color: var(--mute); width: max-content; }
.u-prevenir summary::-webkit-details-marker { display: none; }
.u-prevenir summary:hover, .u-prevenir[open] summary { color: var(--accent); }
.u-prevenir[open] summary span { display: inline-block; transform: rotate(180deg); }
.u-prevenir form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.u-prevenir form > * { grid-column: 1; }
.u-prevenir p { margin: 0; }
.u-prime { color: var(--bright); }
.u-prevenir-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.u-prevenir-ligne .btn { height: 40px; padding: 0 14px; }
.u-prevenir .abonnement-etat { min-height: 0; margin: 0; }
.u-prevenir .abonnement-etat:empty { display: none; }

.u-nom { display: block; color: var(--bright); font-size: 16px; letter-spacing: .16em; margin: 0 0 2px; }
.u-sous { display: block; color: var(--mute); font-size: 12px; margin-bottom: 14px; }
.u-ligne { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); border-top: 1px dashed var(--line-2); padding-top: 8px; margin-top: auto; }
.u-ligne b { font-weight: 400; }
.u-cta { margin-top: 12px; font-size: 12px; color: var(--mute); }
.unite-carte:not(.a-venir) .u-cta { color: var(--bright); }
.unite-carte a.u-corps:hover .u-cta { color: var(--accent); }
.u-texte { display: flex; flex-direction: column; flex: 1; }
.unites-grille.unites-compactes { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.compacte .u-corps { display: grid; grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; padding: 12px 16px 12px 8px; }
.compacte .u-ref { grid-column: 1 / -1; margin-bottom: 4px; padding-left: 8px; }
.compacte .u-forme { margin: 0; width: 110px; }
.compacte .u-nom { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compacte .u-sous { margin-bottom: 10px; }
.compacte .u-cta { margin-top: 8px; }
.compacte .u-prevenir { padding: 0 16px 12px 134px; }

.unite { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.unite-cote { position: sticky; top: calc(var(--barre) + 24px); display: grid; gap: 20px; }
.unite-cote .achat { position: static; }
.achat .achat-prime { color: var(--bright); }
.achat .abonnement-etat { margin: 0; min-height: 0; }
.achat .abonnement-etat:empty { display: none; }
.titre-unite { font-size: clamp(40px, 6vw, 84px); letter-spacing: .14em; margin-bottom: 6px; }
.unite-sous { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 28px; color: var(--text); letter-spacing: .08em; }
.specs { display: grid; margin: 0; border-top: 1px solid var(--line-2); font-size: 12px; }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px dashed var(--line-2); }
.specs dt { color: var(--dim); letter-spacing: .12em; }
.specs dd { margin: 0; color: var(--bright); text-align: right; font-variant-numeric: tabular-nums; }
.man { font-size: 13px; margin-top: 18px; }
.man-large { margin-top: 0; }
.man-large .bloc { max-width: 96ch; }
.man-chemin { color: var(--mute); padding: 4px 0; }
.man-specs { margin: 0; display: grid; }
.man-specs div { display: grid; grid-template-columns: 14ch minmax(0, 1fr); gap: 0 18px; padding: 3px 0; }
.man-specs div + div { border-top: 1px dashed var(--line); }
.man-specs div:has(dt:empty) { border-top: 0; padding-top: 0; }
.man-specs dt { color: var(--bright); }
.man-specs dt:empty + dd { color: var(--mute); }
.man-specs dd { margin: 0; color: var(--text); }
.man-entete { display: flex; justify-content: space-between; color: var(--mute); border-bottom: 1px solid var(--line-2); padding-bottom: 8px; margin-bottom: 8px; }
.man-entete b { font-weight: 400; }
.man h3 { margin: 22px 0 6px; font-size: 13px; font-weight: 700; color: var(--bright); letter-spacing: .04em; }
.man .bloc { margin: 0 0 0 5ch; color: var(--text); max-width: 62ch; }
.man .bloc a { color: var(--bright); border-bottom: 1px dotted var(--dim); }
.man .bloc a:hover { color: var(--accent); border-color: var(--accent); }
.man .synopsis { color: var(--mute); }
.param { display: grid; grid-template-columns: 11ch 24ch 5ch minmax(0, 1fr); gap: 0 14px; align-items: center; margin: 4px 0; position: relative; }
.param-desc { grid-column: 1 / -1; color: var(--mute); margin-bottom: 10px; }
.param-nom { color: var(--bright); }
.param-barre { color: var(--line-2); white-space: pre; }
.param-barre i { color: var(--accent); font-style: normal; }
.param-val { color: var(--mute); font-variant-numeric: tabular-nums; text-align: right; }
.param input { position: absolute; left: calc(11ch + 14px); top: 0; height: 1.6em; width: 24ch; opacity: 0; cursor: ew-resize; margin: 0; }
.param:has(input:focus-visible) .param-barre { outline: 1px solid var(--accent); outline-offset: 2px; }
.param:hover .param-barre { color: var(--dim); }

/* ---------- écoute DRY / WET ----------
   Une console à part : passages, l'onde du passage entier, la bascule. Toutes les cases ont une largeur
   fixe : l'état change, jamais la mise en page. */
.ab { border: 1px solid var(--line-2); background: rgba(10, 11, 13, .72); margin: 8px 0 0; }
.ab-barre { justify-content: space-between; }
.ab-niveau { color: var(--dim); white-space: pre; font-variant-numeric: tabular-nums; }
.ab-niveau [data-ab-metre] { color: var(--line-2); margin-right: 10px; letter-spacing: -.05em; }
.ab-niveau i { color: var(--mute); font-style: normal; }
.ab.joue .ab-niveau i { color: var(--accent); }
.ab-niveau b { font-weight: 400; color: var(--mute); }
.ab.joue .ab-niveau b, .ab.joue .console-etat { color: var(--bright); }
.ab-passages { display: flex; gap: 4px; padding: 10px 14px 0; min-height: 37px; font-size: 12px; }
.ab-passages button { color: var(--mute); padding: 2px 10px; border: 1px solid transparent; letter-spacing: .06em; }
.ab-passages button:hover { color: var(--bright); }
.ab-passages button[aria-pressed="true"] { color: var(--bright); border-color: var(--line-2); background: var(--bg-2); }
.ab-passages button[hidden] { display: none; }
.ab-vue { position: relative; padding: 26px 14px 22px; }
.ab-onde { cursor: pointer; }
.ab-onde pre { font-size: 15px; }
.ab-vide { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font-size: 11px; letter-spacing: .2em; pointer-events: none; }
.ab.pret .ab-vide { display: none; }
.ab:not(.pret) .ab-onde { pointer-events: none; }
.ab:not(.pret) .ab-onde pre { color: var(--line); }
/* En DRY, l'onde reste blanche ; en WET, elle prend l'accent. */
.ab[data-version="dry"] .onde-progres { color: var(--bright); }
.ab-bas { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px; border-top: 1px solid var(--line); }
.ab.joue .transport-jouer { background: none; color: var(--bright); }
.transport-jouer:disabled { background: none; color: var(--line-2); border-color: var(--line); cursor: default; }
.ab-bascule { display: grid; grid-template-columns: 11ch 11ch; border: 1px solid var(--line-2); }
.ab-bascule button { display: flex; align-items: center; justify-content: center; gap: 10px; height: 40px; color: var(--mute); letter-spacing: .24em; padding-left: .24em; }
.ab-bascule button + button { border-left: 1px solid var(--line-2); }
.ab-bascule button:hover:not(:disabled) { color: var(--bright); background: var(--bg-2); }
.ab-bascule button:disabled { color: var(--line-2); cursor: default; }
.ab-led { width: 6px; height: 6px; border: 1px solid currentColor; flex: none; }
.ab-bascule [data-ab-version="dry"][aria-pressed="true"] { background: var(--bright); color: var(--bg); }
.ab-bascule [data-ab-version="wet"][aria-pressed="true"] { background: var(--accent); color: var(--bg); }
.ab-bascule button[aria-pressed="true"] .ab-led { background: currentColor; }
.ab-bascule button[aria-pressed="true"]:disabled { background: var(--bg-2); color: var(--dim); }
.ab-bas .ecoute-temps { justify-self: end; }
.ab-touches { display: flex; gap: 4px; font-size: 11px; color: var(--dim); }
.ab-touches kbd { color: var(--mute); }

/* ---------- visuels d'une unité ----------
   Les rendus du plugin, dans des cadres du site : aucune lueur ajoutée, seule l'image brille. */
.visuels { display: grid; gap: 28px; }
.visuels figure { margin: 0; }
.visuels figcaption, .galerie-legende { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 11px; color: var(--dim); letter-spacing: .08em; }
.film { position: relative; }
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); }
.film-son { position: absolute; right: 14px; top: 14px; display: flex; align-items: center; gap: 10px; width: 9ch; justify-content: center; height: 32px; border: 1px solid var(--line-2); background: rgba(10, 11, 13, .72); color: var(--mute); font-size: 11px; letter-spacing: .2em; }
.film-son:hover { color: var(--bright); border-color: var(--mute); }
.film-son[aria-pressed="true"] { color: var(--bg); background: var(--bright); border-color: var(--bright); }
.film-son[aria-pressed="true"] .ab-led { background: currentColor; }

.plaque-fig { border: 1px solid var(--line); padding: clamp(10px, 3vw, 40px); background: radial-gradient(ellipse at 50% 45%, #15181d, var(--bg) 72%); }
.plaque { position: relative; container-type: inline-size; max-width: 1224px; margin: 0 auto; }
.plaque-fond { display: block; width: 100%; height: auto; }
/* Chaque potard est une case de sa planche-contact, posée exactement sur son rendu ; bords fondus. */
.plaque-potard, .plaque-ventilateur { position: absolute; background-repeat: no-repeat; }
.plaque-potard { cursor: ns-resize; touch-action: none; border-radius: 50%; -webkit-mask-image: radial-gradient(closest-side, #000 90%, transparent); mask-image: radial-gradient(closest-side, #000 90%, transparent); }
.plaque-potard:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.plaque-lcd { position: absolute; display: flex; align-items: center; justify-content: space-between; padding: 0 2.2cqw; font-size: 1.9cqw; letter-spacing: .08em; color: rgba(140, 186, 255, .55); white-space: nowrap; overflow: hidden; pointer-events: none; }
.plaque-lcd b { color: rgba(214, 230, 255, .9); font-weight: 400; }

.galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.galerie li:nth-child(-n + 2) { grid-column: span 3; }
.galerie li { grid-column: span 2; }
.galerie button { display: block; width: 100%; text-align: left; cursor: zoom-in; }
.galerie img { display: block; width: 100%; height: auto; border: 1px solid var(--line); transition: border-color .15s; }
.galerie button:hover img { border-color: var(--accent); }
.galerie button:hover .galerie-legende span:last-child { color: var(--bright); }

.ecrans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ecrans img { display: block; width: 100%; height: auto; border-radius: 6px; }
.ecrans span { display: block; margin-top: 6px; font-size: 10px; color: var(--dim); letter-spacing: .1em; }

.loupe { padding: 0; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); max-width: min(96vw, 2400px); max-height: 94vh; cursor: zoom-out; }
.loupe::backdrop { background: rgba(5, 6, 8, .92); }
.loupe img { display: block; max-width: 100%; max-height: calc(94vh - 40px); }
.loupe p { margin: 0; padding: 8px 12px; font-size: 11px; color: var(--dim); letter-spacing: .08em; }


/* ---------- licences ---------- */
.tableau { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.tableau th, .tableau td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); font-weight: 400; }
.tableau thead th { color: var(--dim); font-size: 11px; letter-spacing: .1em; border-bottom-color: var(--line-2); }
.tableau tbody th { color: var(--bright); letter-spacing: .08em; }
.tableau td:last-child { color: var(--bright); white-space: nowrap; }

/* ---------- pied ---------- */
.pied { max-width: var(--max); margin: 96px auto 0; padding: 32px var(--gouttiere) 40px; color: var(--mute); font-size: 12px; border-top: 1px solid var(--line-2); }
.pied-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
/* Newsletter : une ligne de terminal, en tête du pied de page. */
.abonnement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4px 48px; align-items: end; padding: 0 0 32px; margin-bottom: 32px; border-bottom: 1px dashed var(--line-2); }
.abonnement-titre { grid-column: 1; margin: 0; color: var(--dim); letter-spacing: .14em; }
.abonnement-titre b { color: var(--accent); font-weight: 400; margin-left: 6px; }
.abonnement-offre { grid-column: 1; margin: 0; color: var(--bright); font-size: 15px; letter-spacing: .04em; }
.abonnement-ligne { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.abonnement-ligne .btn { height: 40px; }
.abonnement-etat { grid-column: 2; margin: 6px 0 0; min-height: 1.5em; color: var(--accent); }
.abonnement-etat.erreur { color: #d77a7a; }
.abonnement-mention { grid-column: 2; margin: 0; color: var(--dim); font-size: 11px; }
.abonnement-mention a { color: var(--mute); border-bottom: 1px dotted var(--dim); }
.pied-titre { color: var(--dim); letter-spacing: .1em; margin: 0 0 10px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pied a:hover { color: var(--accent); }
.pied [aria-current] { color: var(--bright); }
.pied-bas { display: flex; justify-content: space-between; margin: 40px 0 0; color: var(--dim); }

/* Tout ce qu'on clique ou fait glisser pour écouter : rien ne se sélectionne (pas de surlignage bleu en
   maintenant le clic ou en glissant sur une onde, un curseur, un potard). */
.lecteur, .transport, .ecoute, .onde, .ab, .plaque, .film-son, .param, .tx-jouer, .btn, button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- lecteur ---------- */
.lecteur {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: var(--lecteur);
  display: grid;
  grid-template-columns: auto minmax(14ch, 22ch) minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 18px;
  /* Comme la barre du haut : aligné sur le contenu de la page, fond pleine largeur. */
  padding: 0 max(var(--gouttiere), calc((100% - var(--max)) / 2 + var(--gouttiere)));
  background: rgba(10, 11, 13, .94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.lecteur-btn { width: 32px; height: 32px; border: 1px solid var(--line-2); color: var(--bright); }
.lecteur-btn:hover { border-color: var(--accent); color: var(--accent); }
.lecteur.actif .lecteur-btn { color: var(--accent); border-color: var(--accent-dim); }
.lecteur-titre { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.lecteur-titre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lecteur-nom { color: var(--bright); letter-spacing: .06em; }
#lecteur-nom a:hover { color: var(--accent); }

.piste { position: relative; height: 32px; display: flex; align-items: center; cursor: pointer; touch-action: none; outline-offset: 2px; }
.piste pre { position: absolute; left: 0; right: 0; white-space: pre; overflow: hidden; font-size: 14px; line-height: 1; pointer-events: none; }
.piste-fond { color: var(--line-2); }
.piste:hover .piste-fond { color: var(--dim); }
.piste-lu { color: var(--accent); clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.lecteur:not(.actif) .piste-lu { color: var(--mute); }
.piste-tete { position: absolute; top: 3px; bottom: 3px; left: var(--p, 0%); width: 1px; background: var(--bright); pointer-events: none; }
.piste-survol { position: absolute; bottom: calc(100% + 4px); left: var(--h, 0%); transform: translateX(-50%); padding: 1px 6px; background: var(--bright); color: var(--bg); font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; opacity: 0; transition: opacity .12s; }
.piste:hover .piste-survol, .piste.glisse .piste-survol { opacity: 1; }
.piste.glisse .piste-tete { box-shadow: 0 0 0 1px var(--accent); }
.lecteur-temps { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lecteur-temps b { font-weight: 400; }
.lecteur-pos { color: var(--mute); font-variant-numeric: tabular-nums; border: 1px solid var(--line); padding: 3px 8px; }
.volume { display: flex; align-items: center; gap: 8px; }
.volume-muet { width: 2ch; color: var(--mute); }
.volume-muet:hover { color: var(--bright); }
.volume-barre { cursor: pointer; padding: 6px 0; touch-action: none; }
.volume-barre pre { color: var(--line-2); letter-spacing: 0; }
.volume-barre pre i { color: var(--bright); font-style: normal; }
.volume-barre:hover pre i { color: var(--accent); }
.lecteur-chaine { display: flex; gap: 6px; }

/* ---------- panier, toast ---------- */
.panier {
  position: fixed; top: calc(var(--barre) + 8px); right: var(--gouttiere); z-index: 90;
  width: min(380px, calc(100vw - 2 * var(--gouttiere)));
  background: rgba(8, 9, 11, .98);
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  padding: 18px;
  font-size: 12px;
}
.panier[hidden] { display: none; }
.panier h2 { font-size: 12px; color: var(--bright); letter-spacing: .14em; margin-bottom: 12px; display: flex; justify-content: space-between; }
.panier ul { list-style: none; margin: 0 0 14px; padding: 0; }
.panier li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.panier li button { color: var(--dim); }
.panier li button:hover { color: #d77a7a; }
.panier .total { display: flex; justify-content: space-between; color: var(--bright); margin-bottom: 14px; }
/* Bandeau cookies : en bas, au-dessus du lecteur ; accepter en plein (blanc), refuser juste à côté, sans cadre. */
.regles { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 6px; color: var(--text); }
.verifier .abonnement-ligne { margin-top: 14px; max-width: 520px; }
.verifier-resultat { margin-top: 18px; max-width: 520px; }
.verifier-etat { margin: 0 0 12px; letter-spacing: .06em; }
.verifier-etat.oui { color: var(--accent); }
.verifier-etat.non { color: #d77a7a; }
.cookies { position: fixed; left: var(--gouttiere); right: var(--gouttiere); bottom: calc(var(--lecteur) + 12px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  max-width: 760px; margin: 0 auto; padding: 14px 16px; display: grid; gap: 8px; background: var(--bg-1); border: 1px solid var(--line-2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5); font-size: 12px; }
.cookies p { margin: 0; }
.cookies-titre { color: var(--bright); letter-spacing: .1em; }
.cookies-texte { color: var(--text); }
.cookies-texte a { color: var(--bright); border-bottom: 1px dotted var(--dim); }
.cookies-choix { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cookies-choix .btn { min-width: 12ch; }
/* « refuser » sans cadre, mais à la même place, à la même taille de clic et bien lisible : refuser reste aussi simple qu'accepter. */
.cookies-refuser { border-color: transparent; color: var(--text); }
.cookies-refuser:hover { border-color: transparent; background: none; color: var(--bright); text-decoration: underline; text-underline-offset: 4px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--lecteur) + 16px); transform: translate(-50%, 12px); z-index: 95; background: var(--bright); color: var(--bg); padding: 6px 14px; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.vu { opacity: 1; transform: translate(-50%, 0); }

/* ---------- terminal ---------- */
.terminal {
  position: fixed; left: var(--gouttiere); right: var(--gouttiere); bottom: calc(var(--lecteur) + 12px); z-index: 80;
  max-width: 900px; margin: 0 auto;
  background: rgba(8, 9, 11, .97);
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  font-size: 12px;
}
.term-journal { max-height: 38vh; overflow-y: auto; padding: 14px 16px 4px; }
.term-journal div { white-space: pre-wrap; }
.term-ligne { display: flex; gap: 10px; padding: 10px 16px 12px; border-top: 1px solid var(--line); }
.term-ligne input { flex: 1; background: none; border: 0; color: var(--bright); outline: none; caret-color: var(--accent); }
.t-prompt { color: var(--accent); }
.t-cmd { color: var(--bright); margin-top: 6px; }
.t-dim { color: var(--mute); }
.t-ok { color: var(--accent); }
.t-err { color: #d77a7a; }
.t-pre { color: var(--text); white-space: pre !important; }

.voile { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 58; pointer-events: none; }
.voile[hidden] { display: none; }


[data-decode].brouille { color: var(--accent-dim); }

/* ---------- contact : une radio ---------- */
.emetteur { margin-top: 8px; }
.emetteur .console-etat { margin-left: auto; }
.cadran { position: relative; padding: 18px 18px 6px; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; border-bottom: 1px solid var(--line); }
.cadran:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.cadran pre { margin: 0; font-size: 12px; line-height: 1.25; white-space: pre; overflow: hidden; }
.cadran-echelle { color: var(--dim); }
.cadran-echelle b { color: var(--mute); font-weight: 400; }
.cadran-echelle i { font-style: normal; color: var(--mute); }
.cadran-echelle i.verrou { color: var(--accent); }
.cadran-signal { margin-top: 10px !important; color: var(--line-2); }
.cadran-signal b { color: var(--bright); font-weight: 400; }
.stations { list-style: none; margin: 0; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 4px 6px; border-bottom: 1px solid var(--line); font-size: 12px; }
.stations button { padding: 6px 10px; color: var(--mute); border: 1px solid transparent; letter-spacing: .08em; }
.stations button:hover { color: var(--bright); }
.stations button[aria-pressed="true"] { color: var(--bright); border-color: var(--line-2); background: var(--bg-2); }
.emission { display: grid; gap: 14px; padding: 18px; }
.emission[hidden] { display: none; }
.emission-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.emission .saisie > span { display: block; margin-bottom: 6px; color: var(--dim); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.emission textarea { display: block; width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line-2); color: var(--bright); font: inherit; resize: vertical; min-height: 120px; }
.emission textarea:focus { outline: none; border-color: var(--accent); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.oscillo { margin: 0; min-height: 4.4em; font-size: 12px; line-height: 1.1; color: var(--accent-dim, var(--accent)); white-space: pre; overflow: hidden; user-select: none; -webkit-user-select: none; }
.oscillo b { color: var(--accent); font-weight: 400; }
.emission-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.emission-etat { color: var(--mute); }
.emission-etat.ok { color: var(--accent); }
.emission-etat.erreur { color: #d77a7a; }
.contact-clair { margin: 18px 0 0; color: var(--dim); }
.contact-clair a { color: var(--mute); border-bottom: 1px dotted var(--dim); }
.contact-clair.appel a { color: var(--bright); border-color: var(--accent); }

/* ---------- introuvable (404) ---------- */
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.introuvable { padding-top: 32px; }
.introuvable .console-etat { margin-left: auto; }
.neige { margin: 0; padding: 22px 18px; font-size: 12px; line-height: 1.12; color: var(--dim); overflow: hidden; user-select: none; -webkit-user-select: none; }
.neige b { color: var(--bright); font-weight: 400; }
.neige .balayage { color: var(--mute); }
.introuvable-ligne { margin: 24px 0 0; color: var(--text); overflow-wrap: anywhere; }
.introuvable-ligne + .introuvable-ligne { margin-top: 6px; }
.introuvable-chemin { color: var(--bright); }
.introuvable-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .pied-etat { white-space: normal; }
  .tx-entete { display: none; }
  .tx { grid-template-columns: 4ch 8ch 1fr auto 3ch 3ch; grid-template-areas: "j id titre prix fav ch"; }
  .tx-jouer { grid-area: j; } .tx .tx-id { grid-area: id; } .tx-titre { grid-area: titre; } .tx-prix { grid-area: prix; } .tx-chevron { grid-area: ch; } .tx > .fav { grid-area: fav; }
  .tx-num, .tx-style { display: none; }
  .lecteur { grid-template-columns: auto minmax(12ch, 20ch) minmax(0, 1fr) auto auto; }
  .lecteur-pos, .lecteur-chaine { display: none; }
  .unites-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unites-petites { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 900px) {
  /* Deux rangées : marque et outils en haut, navigation en dessous (défilable si besoin). */
  :root { --barre: 96px; }
  .barre { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 54px 42px; }
  .nav { grid-column: 1 / -1; grid-row: 2; margin: 0 calc(-1 * var(--gouttiere)); padding: 0 calc(var(--gouttiere) - 14px); overflow-x: auto; border-top: 1px solid var(--line); scrollbar-width: none; }
  /* Les liens centrés ; les marges automatiques gardent le défilement intact si l'écran est trop étroit. */
  .nav a:first-child { margin-left: auto; }
  .nav a:last-child { margin-right: auto; }
  .barre-droite { grid-column: 2; grid-row: 1; }
  .marque-svg { height: 34px; }
  .hero { padding-top: 24px; }
  .console-vue { aspect-ratio: 16 / 10; }
  .console-barre { gap: 14px; }
  .console-date { display: none; }
  .console-etat { margin-left: auto; }
  .console-bas { grid-template-columns: minmax(0, 1fr); }
  .transport { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "jouer id temps" "onde onde onde" "lien lien lien"; row-gap: 12px; }
  .transport-jouer { grid-area: jouer; }
  .transport-id { grid-area: id; }
  .transport .onde { grid-area: onde; }
  .transport .ecoute-temps { grid-area: temps; }
  .transport-lien { grid-area: lien; }
  .console-compteurs { border-left: 0; border-top: 1px solid var(--line); }
  .console-compteurs div { flex: 1; padding: 10px 14px; }
  .boot { font-size: 11px; overflow: hidden; }
  .portes { grid-template-columns: 1fr; gap: 12px; }
  .fiche { grid-template-columns: 1fr 1fr; }
  .fiche div:nth-child(3) { border-left: 0; }
  .fiche div:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
  .ecoute { grid-template-columns: 1fr auto; }
  .ecoute .onde { grid-column: 1 / -1; grid-row: 2; }
  .champ { mask-image: linear-gradient(#000 60%, transparent); -webkit-mask-image: linear-gradient(#000 60%, transparent); }
  .porte + .porte { border-left-color: var(--line-2); }
  .prod, .unite { grid-template-columns: minmax(0, 1fr); }
  .achat, .unite-cote { position: static; }
  .lecteur { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: auto auto; height: auto; padding-top: 6px; padding-bottom: 8px; row-gap: 2px; column-gap: 14px; }
  :root { --lecteur: 74px; }
  .lecteur .piste { grid-column: 1 / -1; grid-row: 2; height: 24px; }
  .lecteur-pos, .lecteur-chaine { display: none; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  /* Le bas du pied : copyright, liens légaux, état du DSP, l'un sous l'autre (trois colonnes se chevauchaient). */
  .pied-bas { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pied-etat { white-space: nowrap; }
  .abonnement { grid-template-columns: minmax(0, 1fr); }
  .abonnement-titre, .abonnement-offre, .abonnement-ligne, .abonnement-etat, .abonnement-mention { grid-column: 1; grid-row: auto; }
  .abonnement-ligne { margin-top: 12px; }
  .unite-cote .achat { order: -1; }
  .galerie, .ecrans { grid-template-columns: 1fr 1fr; }
  .galerie li, .galerie li:nth-child(-n + 2) { grid-column: span 1; }
  .galerie li:first-child { grid-column: 1 / -1; }
  .ab-bas { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
  .ab-bascule { grid-template-columns: 1fr 1fr; }
  .ab-touches, .ab-niveau [data-ab-metre] { display: none; }
  .ab-onde pre { font-size: 12px; }
  .man .bloc { margin-left: 2ch; }
  .man-entete span { display: none; }
  .param { grid-template-columns: 10ch minmax(0, 1fr); }
  .param-barre { overflow: hidden; }
  .param-val { display: none; }
  .param input { left: calc(10ch + 14px); width: calc(100% - 10ch - 14px); }
  .tableau { font-size: 12px; }
  .tableau th, .tableau td { padding: 10px 6px; }
  /* La chaîne tient dans la largeur du téléphone. */
  .chaine { font-size: clamp(8.5px, 2.6vw, 12px); }
  .chaine .secret { font-size: .92em; letter-spacing: .15em; padding: 0 .4em; }
  /* Sur la fiche d'une prod, l'achat vient juste après l'écoute, avant la chaîne et les unités. */
  .prod { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .prod-principal { display: contents; }
  .prod > .achat { order: 1; margin-top: 32px; }
  .prod-principal > .bloc-titre, .prod-principal > .chaine, .prod-principal > .unites-grille { order: 2; }
  .galerie-legende { flex-direction: column; gap: 2px; }
  .panier { left: var(--gouttiere); right: var(--gouttiere); width: auto; background: var(--bg); }
}
@media (max-width: 560px) {
  .sec-tete { flex-wrap: wrap; row-gap: 6px; }
  .sec-tete h2 { font-size: 15px; white-space: normal; }
  .sec-tete .regle { display: none; }
  .sec-lien { margin-left: auto; }
  .lecteur { grid-template-columns: auto minmax(0, 1fr) auto; }
  .volume { display: none; }
  .unites-grille, .unites-petites { grid-template-columns: 1fr 1fr; }
  .unite-carte a { padding: 12px; }
  .u-nom { font-size: 13px; }
  .btn-term, .outil-libelle { display: none; }
  .achat-ligne { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px; }
  .jauge-reperes li span:first-child { display: none; }
  .achat-ligne .achat-noms { grid-column: 1 / -1; grid-row: 1; }
  .compte-chiffres dd { font-size: 15px; }
  .cadeau { grid-template-columns: minmax(0, 1fr); }
  .echelle li { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .echelle li > .dim { grid-column: 2 / -1; margin-bottom: 4px; }
  .nav a { padding: 0 10px; }
  .prod-ecoute { flex-wrap: wrap; }
  .tableau thead { display: none; }
  .tableau tr { display: grid; grid-template-columns: 1fr auto; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .tableau th, .tableau td { border: 0; padding: 2px 0; }
  .tableau td:nth-child(2), .tableau td:nth-child(3) { grid-column: 1; color: var(--mute); }
  .tableau td:last-child { grid-column: 2; grid-row: 1; }
  /* Listes : le titre prend la place de l'identifiant ; boutons plus faciles à toucher. */
  .tx { grid-template-columns: 4ch minmax(0, 1fr) auto 3ch 3ch; grid-template-areas: "j titre prix fav ch"; }
  .tx .tx-id { display: none; }
  .tx-titre { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .tx-jouer, .tx-chevron { display: flex; align-items: center; min-height: 40px; margin: -10px 0; }
  .tx-chevron { justify-content: flex-end; }
  .filtre-groupe button { padding: 7px 10px; }
  .pied ul { gap: 0; }
  .pied ul a, .pied-legal a { display: inline-block; padding: 6px 0; }
  .panier li button, .panier h2 button { min-width: 36px; min-height: 32px; }
  .toast { white-space: nowrap; max-width: calc(100vw - 2 * var(--gouttiere)); overflow: hidden; text-overflow: ellipsis; }
  /* Les unités de l'accueil défilent de côté : la disponible en entier, la suivante dépasse. */
  .unites-grille:not(.unites-compactes) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gouttiere)); }
  .unites-grille:not(.unites-compactes)::-webkit-scrollbar { display: none; }
  .unites-grille:not(.unites-compactes) .unite-carte { scroll-snap-align: start; }
  .synopsis .opt { white-space: nowrap; }
  .neige { font-size: 7px; padding: 14px 10px; }
  .cadran { padding: 14px 10px 4px; }
  .cadran pre, .oscillo { font-size: 9px; }
  .emission { padding: 14px 12px; }
  .emission-champs { grid-template-columns: 1fr; }
}

/* ---------- favoris, possédé ---------- */
.fav { padding: 0 2px; background: none; border: 0; color: var(--dim); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; transition: color .12s; }
.fav:hover { color: var(--bright); }
.fav[aria-pressed="true"] { color: var(--accent); }
.fav:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.achat h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.achat-nom .fav { margin-left: 12px; }
.tx.possede .tx-prix { color: var(--accent); }
.tx.possede::before { background: var(--accent-dim); }
.possede-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 10px; border: 1px solid var(--accent-dim); background: var(--accent-wash); color: var(--accent); }
.possede-ligne[hidden] { display: none; }
.possede-ligne a { color: var(--bright); white-space: nowrap; }
.possede-ligne a:hover { color: var(--accent); }
.licences li.couverte .nom, .licences li.couverte .prix { color: var(--dim); }
/* Pas encore en vente : son fichier n'est pas en ligne (js/app.js, appliquerDisponibles). */
.licences li.indispo label { cursor: not-allowed; opacity: .45; }
.licences li.indispo label:hover { border-color: transparent; }
.licences li.indispo .prix { font-size: .85em; letter-spacing: .06em; text-transform: lowercase; }
.btn-prix:disabled, [data-ajouter-unite]:disabled { opacity: .5; cursor: not-allowed; }
.licences li.couverte .case::before { content: "(✓)"; color: var(--accent); }

/* ---------- reçu (page de remerciement) ---------- */
.recu { max-width: 760px; margin: 28px 0 16px; border: 1px solid var(--line-2); background: var(--bg-1); padding: 0 clamp(16px, 3vw, 28px) 18px; }
.recu-barre { display: flex; justify-content: space-between; gap: 16px; margin: 0 calc(-1 * clamp(16px, 3vw, 28px)) 16px; padding: 8px clamp(16px, 3vw, 28px); border-bottom: 1px solid var(--line-2); color: var(--dim); font-size: 11px; letter-spacing: .14em; }
.recu-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 24px; margin: 0 0 18px; }
.recu-infos dt { color: var(--dim); font-size: 11px; letter-spacing: .12em; }
.recu-infos dd { margin: 2px 0 0; color: var(--bright); overflow-wrap: anywhere; }
.recu-articles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.recu-articles > li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.recu-ligne { display: grid; grid-template-columns: auto minmax(2ch, 1fr) auto; gap: 10px; align-items: baseline; margin: 0; }
.recu-ligne b { color: var(--bright); font-weight: 400; letter-spacing: .06em; }
.recu-points { border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); }
.recu-fichiers { list-style: none; margin: 10px 0 0; padding: 0 0 0 3ch; display: grid; gap: 6px; }
.recu-fichiers a { display: flex; justify-content: space-between; gap: 16px; color: var(--text); overflow-wrap: anywhere; }
.recu-fichiers a span { color: var(--mute); white-space: nowrap; }
.recu-fichiers a:hover, .recu-fichiers a:hover span { color: var(--accent); }
.recu-licence { color: var(--bright) !important; }
.recu > .recu-ligne { padding-top: 12px; }
.recu-total { color: var(--bright); font-size: 15px; }
.recu-total span:last-child { font-variant-numeric: tabular-nums; }
.recu-tva { margin: 4px 0 16px; font-size: 11px; text-align: right; }
.recu-actions { margin: 0 0 14px; }
.recu-accord { margin: 0 0 10px; padding: 10px 12px; border-left: 2px solid var(--accent-dim); color: var(--mute); font-size: 12px; }
.recu-accord span { color: var(--accent); }
.recu-accord a { color: var(--text); white-space: nowrap; }
.recu-accord a:hover { color: var(--accent); }

/* ---------- bibliothèque (compte) ---------- */
.compte-biblio { margin-bottom: 26px; }
.biblio-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.biblio-objet { border-bottom: 1px solid var(--line); }
.biblio-ligne { display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto auto; gap: 14px; align-items: baseline; padding: 11px 0; }
.biblio-signe { color: var(--dim); }
.biblio-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.biblio-nom b { color: var(--bright); font-weight: 400; letter-spacing: .06em; }
.biblio-nom:hover b { color: var(--accent); }
.biblio-licence { color: var(--accent); font-size: 12px; letter-spacing: .08em; }
.achat-liens { display: flex; gap: 16px; }
.achat-liens a.lien { text-decoration: none; }
@media (max-width: 560px) {
  .biblio-ligne { grid-template-columns: 3ch minmax(0, 1fr) auto; }
  .biblio-licence { grid-column: 2; grid-row: 2; }
  .recu-fichiers { padding-left: 0; }
}
.biblio-jouer { padding: 0; background: none; border: 0; color: var(--mute); font: inherit; text-align: left; cursor: pointer; }
.biblio-jouer:hover { color: var(--accent); }