/* =====================================================================
   Le salon : télé à gauche, étagère à droite.
   Les boîtes sont de vrais volumes (tranche, jaquette, dos, dessus).
   Format des boîtes selon l'époque :
     --bh-k  hauteur / hauteur du rayon
     --bt-r  épaisseur de tranche / hauteur
     --bd-r  profondeur (= largeur de jaquette) / hauteur
   ===================================================================== */

.salon {
  position: absolute;
  inset: 0;
  container-type: size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 4cqw;
  padding: 3cqh 5cqw 9cqh;
  overflow: clip;
  --tv-ratio: 4 / 3;
  --bh-k: 0.78;
  --bt-r: 0.085;
  --bd-r: 0.72;
}
.salon-wall {
  position: absolute;
  inset: 0 0 14cqh 0;
  background: var(--salon-wall, #ddd);
}
.salon-wall::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2.2cqh;
  background: var(--salon-plinth, rgba(0, 0, 0, 0.15));
}
.salon-floor {
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: -2cqh;
  height: 16cqh;
  transform-origin: 50% 0;
  transform: perspective(60cqh) rotateX(38deg);
  background: var(--salon-floor, #aaa);
}

/* cadre ou horloge au mur */
.salon-deco {
  position: absolute;
  z-index: 0;
  left: calc(5cqw + (100cqw - 10cqw - 4cqw) * 0.455 / 2);
  top: 7cqh;
  height: 17cqh;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.22));
}
.salon-deco:empty {
  display: none;
}
.salon-deco svg {
  display: block;
  height: 100%;
  width: auto;
}
[data-era='00'] .salon-deco {
  height: 14cqh;
}

/* ---------------------------------------------------------------- télé */

.tv-zone {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.tv {
  position: relative;
  z-index: 1;
  width: min(100%, var(--tv-max, 74cqh));
  transition:
    transform 0.4s,
    filter 0.4s;
}
.tv-case {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tv-gap, 10px);
  padding: var(--tv-pad, 14px);
  background: var(--tv-case, #222);
  border-radius: var(--tv-radius, 12px);
  box-shadow: var(--tv-shadow, 0 20px 40px -10px rgba(0, 0, 0, 0.5));
}
.tv-screen {
  position: relative;
  aspect-ratio: var(--tv-ratio);
  background: #000;
  border-radius: var(--screen-radius, 6px);
  overflow: hidden;
  box-shadow: var(--screen-shadow, inset 0 0 0 3px #000);
}
.tv-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.tv-glass {
  z-index: 3;
}
.tv-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
}
.tv-grille {
  display: block;
  background: var(--grille, repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 5px));
}
.tv-knobs {
  display: flex;
  gap: 10px;
}
.knob {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f3f0e6, #a9a291 60%, #6d6657);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.5),
    inset 0 0 0 2px rgba(0, 0, 0, 0.15);
  position: relative;
}
.knob::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 3px;
  width: 3px;
  height: 9px;
  margin-left: -1.5px;
  background: #333;
  border-radius: 2px;
}
.knob + .knob {
  transform: rotate(-60deg);
}
.tv-brand {
  font: 700 11px/1 var(--ui-display);
  letter-spacing: 0.2em;
  color: var(--tv-brand, #aaa);
}
.tv-led {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--led, #3ad671);
  box-shadow: 0 0 6px var(--led, #3ad671);
}
.tv-stand {
  display: none;
  position: relative;
  margin: 0 auto;
}
.tv-glow {
  display: none;
}

/* zapping, incrustations */
.tv-zap {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.7 0 0 0 0 0.7 0 0 0 1.5 -0.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-color: #333;
}
.tv-zap.is-on {
  animation:
    static-flash 0.28s ease-out,
    static-jitter 0.07s steps(3) 4;
}
[data-era='10'] .tv-zap,
[data-era='20'] .tv-zap {
  background: #000;
}
[data-era='10'] .tv-zap.is-on,
[data-era='20'] .tv-zap.is-on {
  animation: digital-cut 0.3s ease-in-out;
}
.tv-osd {
  position: absolute;
  z-index: 4;
  top: 6%;
  right: 5%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  font: 400 clamp(14px, 3cqh, 26px) / 1 var(--ui-display);
  color: #3dff6a;
  text-shadow: 2px 2px 0 #000;
}
.tv-osd.is-on {
  opacity: 1;
}
.tv-lower {
  position: absolute;
  z-index: 4;
  left: 5%;
  right: 12%;
  bottom: 7%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 0.3s,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.tv-lower.is-on {
  opacity: 1;
  transform: none;
}
.lt-title,
.lt-sub {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lt-title {
  font: 800 clamp(13px, 2.6cqh, 22px) / 1.15 var(--ui-display);
  padding: 0.35em 0.6em 0.3em;
  background: #fff;
  color: #111;
}
.lt-sub {
  font: 500 clamp(10px, 1.7cqh, 14px) / 1.2 var(--ui-font);
  padding: 0.35em 0.75em;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
}
.tv.is-off .tv-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #000;
  animation: tv-off-fade 0.35s ease-in forwards;
}

/* meuble télé */
.tv-furniture {
  position: relative;
  display: block;
  width: 118%;
  max-width: 130cqh;
  height: 12cqh;
  margin-top: -1px;
  background: var(--furniture, #6b4a2b);
  border-radius: var(--furniture-radius, 3px);
  box-shadow: 0 18px 24px -14px rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------- étagère */

.bookcase-zone {
  position: relative;
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  perspective: 120cqh;
  perspective-origin: 50% 38%;
  --sh: 41cqh;
}
.bookcase {
  position: relative;
  width: max-content;
  min-width: min(100%, 70cqh);
  max-width: 100%;
  display: grid;
  grid-template-rows: auto auto;
  transform-style: preserve-3d;
  padding: var(--board-h) var(--case-side, 14px) 0;
  /* le cadre est peint en bandes : un fond plein masquerait l'intérieur 3D */
  background:
    var(--case-frame, linear-gradient(transparent, transparent)) left top / var(--case-side, 14px) 100% no-repeat,
    var(--case-frame, linear-gradient(transparent, transparent)) right top / var(--case-side, 14px) 100% no-repeat,
    var(--case-frame, linear-gradient(transparent, transparent)) left top / 100% var(--board-h) no-repeat;
  --case-depth: calc(var(--sh) * var(--bh-k) * var(--bd-r) * 1.05 + 14px);
  --board-h: max(10px, 2.2cqh);
}
.bookcase-top {
  position: absolute;
  left: var(--case-side, 14px);
  right: var(--case-side, 14px);
  top: var(--board-h);
  height: var(--case-depth);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  background: var(--case-wall, #3a2a1c);
}
.shelf {
  position: relative;
  height: var(--sh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform-style: preserve-3d;
}
.shelf-back {
  position: absolute;
  inset: 0 0 var(--board-h) 0;
  transform: translateZ(calc(var(--case-depth) * -1));
  background: var(--case-back, #2a1e14);
}
.shelf-wall {
  position: absolute;
  top: 0;
  bottom: var(--board-h);
  width: var(--case-depth);
  transform-origin: 0 50%;
  transform: rotateY(90deg);
  background: var(--case-wall, #3a2a1c);
}
.shelf-wall.l {
  left: 0;
}
.shelf-wall.r {
  left: 100%;
}
.shelf-row {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: var(--box-gap, 2px);
  padding: 0 4%;
  transform-style: preserve-3d;
}
.shelf-board {
  position: relative;
  height: var(--board-h);
  transform-style: preserve-3d;
  background: var(--board-front, #4a3220);
  display: flex;
  align-items: center;
  justify-content: center;
}
.board-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--case-depth);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  background: var(--board-top, #5a3d27);
}
.shelf-tag {
  position: relative;
  transform: translateZ(1px);
  font: 600 clamp(9px, 1.25cqh, 12px) / 1 var(--ui-font);
  letter-spacing: 0.04em;
  padding: 2px 8px;
  color: var(--tag-ink, #333);
  background: var(--tag-bg, #f4efe2);
  border-radius: 1px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- boîtes */

.box,
.box-slot {
  --bh: calc(var(--sh) * var(--bh-k) * var(--bh-x, 1));
  --bt: max(30px, calc(var(--bh) * var(--bt-r) * var(--bt-k, 1)));
  --bd: calc(var(--bh) * var(--bd-r));
}
.box {
  position: relative;
  flex: none;
  display: block;
  width: var(--bt);
  height: var(--bh);
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: inherit;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.box.is-import {
  --bh-x: var(--import-h, 1.04);
}
.box > span {
  position: absolute;
  display: block;
}
.box-spine {
  inset: 0;
  overflow: hidden;
  background: var(--spine-bg, var(--g-bg));
  color: var(--spine-ink, var(--g-ink));
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18), inset -1px 0 0 rgba(0, 0, 0, 0.3);
}
.sp-band {
  flex: none;
  width: 100%;
  height: 17%;
  display: grid;
  place-items: center;
  background: var(--band-bg, #111);
  color: var(--band-ink, #fff);
  font: 400 clamp(7px, calc(var(--bt) * 0.28), 11px) / 1 var(--ui-display);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.sp-band b {
  font-weight: inherit;
}
.sp-title {
  flex: 1;
  min-height: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  font-family: var(--spine-font, var(--ui-display));
  font-weight: var(--spine-weight, 700);
  font-size: clamp(10px, calc(var(--bt) * 0.46), 18px);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: var(--spine-tracking, 0.02em);
}
.sp-title span {
  color: var(--lc);
}
.box.is-import .sp-title {
  flex: none;
  height: 45%;
  justify-content: flex-start;
  font-size: clamp(9px, calc(var(--bt) * 0.4), 15px);
}
.box.is-import {
  --bt: max(34px, calc(var(--bh) * var(--bt-r) * var(--bt-k, 1)));
}
.sp-foot {
  flex: none;
  padding: 4px 0 6px;
  font: 600 clamp(7px, calc(var(--bt) * 0.26), 10px) / 1 var(--ui-mono);
  opacity: 0.75;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.box-cover,
.box-back {
  top: 0;
  height: 100%;
  width: var(--bd);
  transform-origin: 0 50%;
}
.box-cover {
  left: 100%;
  transform: rotateY(90deg);
  background: var(--cover-bg, var(--g-bg));
  color: var(--g-ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.box-back {
  left: 0;
  transform: rotateY(90deg);
  background: var(--back-bg, color-mix(in srgb, var(--g-bg) 70%, #000));
}
.box-top {
  left: 0;
  top: 0;
  width: 100%;
  height: var(--bd);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  background: var(--top-bg, color-mix(in srgb, var(--g-bg) 80%, #fff));
}
.box-cover > span,
.sp-foot {
  display: block;
}
.cv-band {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4% 6%;
  background: var(--band-bg, #111);
  color: var(--band-ink, #fff);
  font: 400 clamp(8px, calc(var(--bd) * 0.06), 13px) / 1 var(--ui-display);
}
.cv-band b {
  font-weight: inherit;
}
.cv-band i {
  font-style: normal;
  font-family: var(--ui-mono);
  opacity: 0.8;
}
.cv-art {
  flex: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #000;
}
.cv-art canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.cv-title {
  margin: 6% 7% 2%;
  font: 700 clamp(12px, calc(var(--bd) * 0.12), 26px) / 1.05 var(--spine-font, var(--ui-display));
  color: var(--g-accent);
}
.cv-sub {
  margin: 0 7%;
  font: 500 clamp(8px, calc(var(--bd) * 0.055), 12px) / 1.3 var(--ui-font);
  opacity: 0.85;
}

.obi {
  left: 0;
  right: 0;
  bottom: 7%;
  height: 31%;
  transform: translateZ(1px);
  background: #fbfaf6;
  color: #c1121f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  box-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.15),
    0 1px 0 rgba(0, 0, 0, 0.15);
}
.obi b,
.obi small {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.obi {
  overflow: hidden;
}
.obi b {
  font: 800 clamp(7px, min(calc(var(--bt) * 0.32), calc(var(--bh) * 0.05)), 12px) / 1 var(--ui-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.obi small {
  font: 600 clamp(6px, min(calc(var(--bt) * 0.24), calc(var(--bh) * 0.036)), 9px) / 1 var(--ui-mono);
  color: #444;
  overflow: hidden;
  max-height: 60%;
}

/* boîte exposée de face : la jaquette devant, la tranche sur le côté gauche */
.box.is-face {
  width: var(--bd);
}
.box.is-face .box-cover {
  left: 0;
  width: 100%;
  transform: none;
}
.box.is-face .box-spine {
  left: calc(var(--bt) * -1);
  width: var(--bt);
  inset: 0 auto 0 calc(var(--bt) * -1);
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
}
.box.is-face .box-back {
  left: 100%;
  width: var(--bt);
}
.box.is-face .box-top {
  height: var(--bt);
}
.box.is-face {
  margin: 0 calc(var(--bt) * 0.4);
}

.box.is-out {
  transform: translateZ(calc(var(--bd) * 0.3)) rotateY(-7deg);
}
.box.is-face.is-out {
  transform: translateZ(calc(var(--bh) * 0.12)) rotateX(4deg) rotateY(-4deg);
}
.box.is-face.is-launching {
  transform: translateZ(calc(var(--bh) * 0.5)) rotateY(-8deg);
}
.box:focus-visible .box-spine {
  outline: 3px solid var(--ui-accent);
  outline-offset: -3px;
}
.box.is-launching {
  z-index: 3;
  transform: translateZ(calc(var(--bd) * 1.1)) translateX(calc(var(--bd) * -0.35)) rotateY(-78deg);
  transition-duration: 0.6s;
}

/* place réservée + bibelots */
.box-slot {
  position: relative;
  flex: none;
  width: calc(var(--bh) * 0.62);
  height: var(--bh);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  outline: none;
  transform: translateZ(calc(var(--case-depth) * -0.3));
}
.slot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  margin-bottom: 2px;
  background: #fffdf5;
  color: #222;
  font: 400 clamp(9px, 1.6cqh, 13px) / 1.1 'Permanent Marker', cursive;
  text-align: center;
  transform: rotate(-4deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.slot-card b {
  font-weight: 400;
  color: #c1121f;
  font-size: 1.3em;
}
.box-slot:focus-visible .slot-card,
.box-slot.is-active .slot-card {
  outline: 2px dashed var(--ui-accent);
  outline-offset: 3px;
}
.bookend {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 6px;
  height: 46%;
  background: linear-gradient(90deg, #888, #ddd 50%, #777);
  border-radius: 1px;
}
.props {
  display: flex;
  align-items: flex-end;
  gap: 1.4cqh;
  margin-left: auto;
  padding-left: 2cqh;
  transform: translateZ(calc(var(--case-depth) * -0.4));
}
.prop {
  display: block;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35));
}
.prop svg {
  display: block;
  height: 100%;
  width: auto;
}
.prop-cube {
  height: calc(var(--sh) * 0.24);
}
.prop-cassette {
  height: calc(var(--sh) * 0.16);
}
.prop-handheld {
  height: calc(var(--sh) * 0.34);
}
.prop-egg {
  height: calc(var(--sh) * 0.2);
}
.prop-mp3 {
  height: calc(var(--sh) * 0.26);
}
.prop-card {
  height: calc(var(--sh) * 0.16);
}
.prop-cactus {
  height: calc(var(--sh) * 0.4);
}
.prop-pad {
  height: calc(var(--sh) * 0.18);
}
.prop-plant {
  height: calc(var(--sh) * 0.55);
}

@keyframes tv-off-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------------------------------------------------------------- petits écrans */

@media (max-width: 860px) {
  .salon {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 2cqh 4cqw 7cqh;
    gap: 2cqh;
    align-items: stretch;
  }
  .tv-zone {
    height: auto;
  }
  .tv {
    width: min(92%, 64cqh);
  }
  .tv-furniture {
    display: none;
  }
  .bookcase-zone {
    --sh: min(25cqh, 40cqw);
    align-items: flex-start;
    perspective-origin: 50% 0%;
  }
  .tv-panel {
    display: none !important;
  }
  .salon-deco {
    display: none;
  }
}

/* =====================================================================
   Époques
   ===================================================================== */

/* -------------------------------------------------------------- 1980 */
[data-era='80'] .salon {
  --bh-k: 0.86;
  --bt-r: 0.2;
  --bd-r: 0.74;
  --box-gap: 3px;
  --salon-wall:
    radial-gradient(circle at 50% 50%, #e88a2e 0 18%, #c2561b 19% 30%, transparent 31%) 0 0 / 70px 70px,
    radial-gradient(circle at 50% 50%, #7a3a12 0 10%, transparent 11%) 35px 35px / 70px 70px,
    #d9a25c;
  --salon-plinth: #5a3416;
  --salon-floor: repeating-linear-gradient(90deg, #6b4a2a 0 3px, #7a5633 3px 6px), #6b4a2a;
  --tv-max: 76cqh;
  --tv-case: repeating-linear-gradient(90deg, #5b371a 0 3px, #6e4421 3px 11px, #4f2f15 11px 13px, #7a4d27 13px 22px);
  --tv-pad: 16px;
  --tv-radius: 10px;
  --screen-radius: 14% / 18%;
  --screen-shadow: 0 0 0 8px #c9c2b0, 0 0 0 11px #2a2a2a;
  --furniture: repeating-linear-gradient(90deg, #4a2c15 0 4px, #5b371a 4px 14px);
  --case-frame: linear-gradient(#3e2612, #3e2612);
  --case-back: #2d1b0d;
  --case-wall: #4a2e17;
  --board-front: repeating-linear-gradient(90deg, #5a3519 0 3px, #6b4220 3px 14px);
  --board-top: #6b4220;
  --case-side: 16px;
  --tag-bg: #f5e7c4;
  --tag-ink: #5a3416;
}
[data-era='80'] .tv-case {
  grid-template-columns: 1fr auto;
  align-items: center;
}
[data-era='80'] .tv-screen {
  margin: 8px;
}
[data-era='80'] .tv-panel {
  flex-direction: column;
  height: 100%;
  padding: 6px 4px;
  background: #2a1a0c;
  border-radius: 4px;
  width: 64px;
}
[data-era='80'] .tv-grille {
  width: 44px;
  flex: 1;
  background: repeating-linear-gradient(0deg, #1a0f06 0 2px, #6e4421 2px 5px);
}
[data-era='80'] .tv-knobs {
  flex-direction: column;
}
[data-era='80'] .tv-brand {
  color: #e8d9b5;
}
[data-era='80'] .tv-led {
  display: none;
}
[data-era='80'] .tv-osd {
  font-family: 'VT323', monospace;
  font-size: clamp(20px, 4.4cqh, 38px);
  color: #3dff6a;
}
[data-era='80'] .lt-title {
  /* télétexte */
  font: 400 clamp(10px, 2cqh, 16px) / 1.3 'Press Start 2P', monospace;
  background: #0000c0;
  color: #ffff00;
  padding: 0.5em 0.6em;
}
[data-era='80'] .lt-sub {
  font: 400 clamp(14px, 2.6cqh, 22px) / 1 'VT323', monospace;
  background: #000;
  color: #00ffff;
}
[data-era='80'] .tv-furniture {
  height: 16cqh;
  width: 108%;
}
[data-era='80'] .tv-furniture::before,
[data-era='80'] .tv-furniture::after {
  content: '';
  position: absolute;
  bottom: -5cqh;
  width: 10px;
  height: 6cqh;
  background: #3a210d;
  transform: skewX(8deg);
}
[data-era='80'] .tv-furniture::before {
  left: 8%;
  transform: skewX(-8deg);
}
[data-era='80'] .tv-furniture::after {
  right: 8%;
}
[data-era='80'] .box {
  --spine-bg: linear-gradient(180deg, var(--g-bg), color-mix(in srgb, var(--g-bg) 70%, #000));
  --spine-ink: var(--g-accent);
  --band-bg: linear-gradient(180deg, #d7261e 0 33%, #f28c1b 33% 66%, #ffd400 66%);
  --band-ink: #000;
  --spine-font: 'Press Start 2P', monospace;
  --spine-weight: 400;
  --top-bg: color-mix(in srgb, var(--g-bg) 80%, #000);
}
[data-era='80'] .sp-title {
  font-size: clamp(8px, calc(var(--bt) * 0.3), 13px);
}

/* -------------------------------------------------------------- 1990 */
[data-era='90'] .salon {
  --bh-k: 0.6;
  --bt-r: 0.26;
  --bd-r: 1.38;
  --box-gap: 2px;
  --salon-wall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%2378d6cf'/%3E%3Cg fill='none' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M20 40q15-20 30 0t30 0' stroke='%23ff6fae'/%3E%3Cpath d='M140 150q15-20 30 0' stroke='%23332b6b'/%3E%3Cpath d='M40 140l15 15 15-15 15 15' stroke='%23ffd23f'/%3E%3C/g%3E%3Cpath d='M150 30l20 34h-40z' fill='%23ffd23f'/%3E%3Ccircle cx='100' cy='95' r='10' fill='%23ff6fae'/%3E%3Ccircle cx='30' cy='95' r='5' fill='%23332b6b'/%3E%3Crect x='160' y='90' width='18' height='18' fill='%23332b6b' transform='rotate(20 169 99)'/%3E%3C/svg%3E") 0 0 / 180px 180px;
  --salon-plinth: #332b6b;
  --salon-floor: linear-gradient(180deg, #5b5f8a, #3d4066);
  --tv-max: 72cqh;
  --tv-case: linear-gradient(180deg, #2f2f33, #1b1b1e);
  --tv-radius: 22px;
  --tv-pad: 18px 18px 10px;
  --screen-radius: 6% / 8%;
  --screen-shadow: 0 0 0 6px #0c0c0e;
  --tv-brand: #c9c9d0;
  --furniture: linear-gradient(180deg, #2b2b30, #1a1a1d);
  --case-frame: linear-gradient(#141418, #141418);
  --case-back: #1d1d22;
  --case-wall: #232329;
  --board-front: linear-gradient(180deg, #2c2c33, #17171b);
  --board-top: #2a2a31;
  --case-side: 12px;
  --tag-bg: #ffd23f;
  --tag-ink: #1b1b1e;
}
[data-era='90'] .tv-panel {
  height: 22px;
  padding: 0 10px;
}
[data-era='90'] .tv-grille {
  width: 30%;
  height: 10px;
  background: repeating-linear-gradient(90deg, #0d0d0f 0 2px, transparent 2px 5px);
}
[data-era='90'] .knob {
  width: 14px;
  height: 8px;
  border-radius: 2px;
  background: #3a3a40;
}
[data-era='90'] .knob::after {
  display: none;
}
[data-era='90'] .knob + .knob {
  transform: none;
}
[data-era='90'] .tv-osd {
  font-family: 'VT323', monospace;
  font-size: clamp(22px, 4.6cqh, 40px);
}
[data-era='90'] .lt-title {
  font-family: 'Bungee', sans-serif;
  font-weight: 400;
  background: linear-gradient(90deg, #ffd23f, #ff6fae);
  color: #1b1b1e;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.6em) 100%, 0 100%);
  padding-right: 1.2em;
}
[data-era='90'] .lt-sub {
  font-family: 'Chakra Petch', sans-serif;
  background: #332b6b;
}
[data-era='90'] .tv-furniture {
  height: 18cqh;
  width: 96%;
  border-radius: 4px;
}
[data-era='90'] .box {
  --spine-bg: #111114;
  --spine-ink: #fff;
  --band-bg: linear-gradient(180deg, #8d8d96, #c9c9d0);
  --band-ink: #111;
  --spine-font: 'Bungee', sans-serif;
  --spine-weight: 400;
  --cover-bg: #111114;
  --top-bg: #2a2a31;
}
[data-era='90'] .sp-title {
  color: var(--g-accent);
}
[data-era='90'] .sp-title span {
  color: var(--lc);
}
.box.is-import .sp-title {
  flex: none;
  height: 45%;
  justify-content: flex-start;
  font-size: clamp(9px, calc(var(--bt) * 0.4), 15px);
}
.box.is-import {
  --bt: max(34px, calc(var(--bh) * var(--bt-r) * var(--bt-k, 1)));
}

/* -------------------------------------------------------------- 2000 */
[data-era='00'] .salon {
  --bh-k: 0.82;
  --bt-r: 0.075;
  --bd-r: 0.71;
  --box-gap: 1px;
  --salon-wall: linear-gradient(180deg, #c7d6e4, #dfe8f0 70%);
  --salon-plinth: #f4f6f8;
  --salon-floor: repeating-linear-gradient(90deg, #b88f5f 0 2px, #cfa877 2px 60px, #c39b6a 60px 62px, #d6b082 62px 120px);
  --tv-max: 78cqh;
  --tv-case: linear-gradient(180deg, #e9edf1 0%, #b9c2cc 48%, #a3adb8 52%, #cdd4dc 100%);
  --tv-pad: 14px 70px 10px;
  --tv-radius: 8px;
  --screen-radius: 2% / 3%;
  --screen-shadow: 0 0 0 4px #20252b;
  --tv-brand: #3c4a59;
  --led: #4fb4ff;
  --furniture: linear-gradient(180deg, rgba(220, 235, 250, 0.55), rgba(160, 190, 220, 0.4));
  --furniture-radius: 2px;
  --case-frame: linear-gradient(90deg, #9aa6b4, #e6ebf0 50%, #9aa6b4);
  --case-back: #d7dfe8;
  --case-wall: #c4ced9;
  --board-front: linear-gradient(180deg, rgba(220, 240, 255, 0.85), rgba(150, 200, 235, 0.65));
  --board-top: rgba(190, 225, 250, 0.45);
  --case-side: 8px;
  --tag-bg: #fff;
  --tag-ink: #1e6fd9;
}
[data-era='00'] .tv-case::before,
[data-era='00'] .tv-case::after {
  /* haut-parleurs latéraux */
  content: '';
  position: absolute;
  top: 14px;
  bottom: 40px;
  width: 44px;
  border-radius: 6px;
  background: radial-gradient(circle, #5b6673 0 1.2px, transparent 1.6px) 0 0 / 5px 5px, #8a96a3;
}
[data-era='00'] .tv-case::before {
  left: 14px;
}
[data-era='00'] .tv-case::after {
  right: 14px;
}
[data-era='00'] .tv-panel {
  justify-content: center;
  gap: 14px;
  height: 22px;
}
[data-era='00'] .tv-grille,
[data-era='00'] .tv-knobs {
  display: none;
}
[data-era='00'] .tv-brand {
  font-family: 'Michroma', sans-serif;
}
[data-era='00'] .tv-osd {
  font-family: 'Michroma', sans-serif;
  color: #fff;
  font-size: clamp(12px, 2.6cqh, 22px);
}
[data-era='00'] .lt-title {
  font-family: 'Michroma', sans-serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(180deg, #8cc4ff 0%, #3d8ff0 50%, #1d6ed8 51%, #3e94f2 100%);
  border-radius: 6px 6px 6px 0;
}
[data-era='00'] .lt-sub {
  font-family: Verdana, sans-serif;
  background: rgba(10, 30, 60, 0.85);
}
[data-era='00'] .tv-furniture {
  height: 4cqh;
  width: 112%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 30px 0 -2px rgba(150, 190, 225, 0.35), 0 60px 0 -4px rgba(150, 190, 225, 0.25);
}
[data-era='00'] .box {
  --spine-bg: linear-gradient(90deg, rgba(255, 255, 255, 0.25), transparent 40%), linear-gradient(180deg, var(--g-bg2), var(--g-bg));
  --spine-ink: var(--g-ink);
  --band-bg: #0c0c0e;
  --band-ink: #fff;
  --spine-font: 'Michroma', sans-serif;
  --spine-weight: 400;
}
[data-era='00'] .sp-title {
  font-size: clamp(8px, calc(var(--bt) * 0.38), 13px);
}

/* -------------------------------------------------------------- 2010 */
[data-era='10'] .salon {
  --tv-ratio: 16 / 9;
  --bh-k: 0.76;
  --bt-r: 0.08;
  --bd-r: 0.78;
  --box-gap: 1px;
  --salon-wall: linear-gradient(180deg, #e9e6e2, #f4f2ef 70%);
  --salon-plinth: #ffffff;
  --salon-floor: repeating-linear-gradient(90deg, #8c8a86 0 2px, #a19e99 2px 70px, #97948f 70px 72px, #aaa7a2 72px 140px);
  --tv-max: 104cqh;
  --tv-case: #0d0d0f;
  --tv-pad: 8px 8px 16px;
  --tv-radius: 4px;
  --screen-radius: 1px;
  --screen-shadow: none;
  --tv-brand: #6b6b72;
  --led: #4fb4ff;
  --furniture: linear-gradient(180deg, #ffffff, #ececec);
  --case-frame: linear-gradient(#fafafa, #fafafa);
  --case-back: #f1f1f1;
  --case-wall: #e8e8e8;
  --board-front: #ffffff;
  --board-top: #f2f2f2;
  --board-h: max(16px, 3.4cqh);
  --case-side: 18px;
  --tag-bg: #ff3d7f;
  --tag-ink: #fff;
}
[data-era='10'] .bookcase {
  box-shadow: 0 30px 40px -24px rgba(0, 0, 0, 0.35);
}
[data-era='10'] .tv-panel {
  justify-content: center;
  height: 0;
  position: relative;
}
[data-era='10'] .tv-grille,
[data-era='10'] .tv-knobs {
  display: none;
}
[data-era='10'] .tv-brand {
  position: absolute;
  bottom: -9px;
  font-size: 8px;
}
[data-era='10'] .tv-led {
  position: absolute;
  right: 12px;
  bottom: -9px;
  width: 4px;
  height: 4px;
}
[data-era='10'] .tv-stand {
  display: block;
  width: 26%;
  height: 4cqh;
  background: linear-gradient(180deg, #1b1b1e, #2b2b30);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
}
[data-era='10'] .tv-osd {
  font: 600 clamp(11px, 2.2cqh, 18px) / 1 'Rubik', sans-serif;
  color: #fff;
  text-shadow: none;
  background: rgba(20, 20, 24, 0.75);
  padding: 0.5em 0.8em;
  border-radius: 4px;
}
[data-era='10'] .lt-title {
  border-left: 6px solid #ff3d7f;
}
[data-era='10'] .tv-furniture {
  height: 10cqh;
  width: 124%;
  border-radius: 2px;
}
[data-era='10'] .box {
  --spine-bg: var(--g-bg);
  --spine-ink: var(--g-ink);
  --band-bg: #fff;
  --band-ink: #111;
  --spine-font: var(--g-font), 'Rubik', sans-serif;
  --spine-weight: 800;
}

/* -------------------------------------------------------------- aujourd'hui */
[data-era='20'] .salon {
  --tv-ratio: 16 / 9;
  --bh-k: 0.62;
  --bt-r: 0.1;
  --bd-r: 0.62;
  --box-gap: 1px;
  --salon-wall: radial-gradient(70% 70% at 30% 30%, rgba(255, 255, 255, 0.18), transparent 60%), #a7b39b;
  --salon-plinth: #94a088;
  --salon-floor: repeating-linear-gradient(90deg, #c9a87c 0 2px, #d8b98e 2px 80px, #cfae82 80px 82px, #dcbf96 82px 160px);
  --tv-max: 108cqh;
  --tv-case: #121214;
  --tv-pad: 3px;
  --tv-radius: 3px;
  --screen-radius: 1px;
  --screen-shadow: none;
  --furniture: linear-gradient(180deg, #caa57a, #b88f62);
  --case-frame: linear-gradient(transparent, transparent);
  --case-back: transparent;
  --case-wall: transparent;
  --board-front: linear-gradient(180deg, #d8b98e, #c49c6c);
  --board-top: #dcbf96;
  --board-h: max(12px, 2.4cqh);
  --case-side: 0px;
  --tag-bg: #1d1b19;
  --tag-ink: #efebe4;
}
[data-era='20'] .bookcase-top,
[data-era='20'] .shelf-back,
[data-era='20'] .shelf-wall {
  display: none;
}
[data-era='20'] .shelf + .shelf {
  margin-top: 2cqh;
}
[data-era='20'] .shelf-board {
  box-shadow: 0 10px 14px -8px rgba(40, 30, 10, 0.45);
}
[data-era='20'] .tv-panel {
  display: none;
}
[data-era='20'] .tv-glow {
  display: block;
  position: absolute;
  inset: 4% 6%;
  background: var(--amb, #444);
  filter: blur(40px);
  opacity: 0.75;
  transition: background 0.8s;
}
[data-era='20'] .tv-osd {
  font: 650 clamp(11px, 2.2cqh, 18px) / 1 'Bricolage Grotesque', sans-serif;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
[data-era='20'] .lt-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  border-radius: 8px 8px 8px 0;
  background: rgba(255, 255, 255, 0.92);
}
[data-era='20'] .lt-sub {
  border-radius: 0 0 8px 8px;
  background: rgba(20, 20, 20, 0.6);
  backdrop-filter: blur(6px);
}
[data-era='20'] .tv-furniture {
  height: 13cqh;
  width: 130%;
  border-radius: 4px;
}
[data-era='20'] .box {
  --spine-bg: #f7f5f1;
  --spine-ink: #1d1b19;
  --band-bg: var(--g-bg);
  --band-ink: var(--g-ink);
  --spine-font: var(--g-font), 'Bricolage Grotesque', sans-serif;
  --spine-weight: 700;
  --top-bg: #ece8e1;
  --back-bg: #e6e1d8;
}
[data-era='20'] .box.is-import {
  --spine-bg: #fff;
}
[data-era='20'] .obi {
  background: #ffd400;
  color: #111;
}

/* jaquettes à l'italienne (boîtes de cartouches) : l'image remplit, le titre se pose dessus */
[data-era='90'] .box-cover {
  position: absolute;
}
[data-era='90'] .cv-art {
  flex: 1;
  aspect-ratio: auto;
  min-height: 0;
}
[data-era='90'] .cv-art canvas {
  object-fit: cover;
}
[data-era='90'] .cv-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 18% 6% 5%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85) 45%);
  font-family: 'Bungee', sans-serif;
  font-weight: 400;
  -webkit-text-stroke: 0.03em #000;
}
[data-era='90'] .cv-sub {
  display: none;
}