/* ---------------------------------------------------------------------------
   radio-proxy — habillage « poste de radio »
   Palette : noyer, bakélite, verre ambré, aiguille rouge, laiton.
   Le poste garde le même aspect en thème clair comme en thème sombre :
   c'est un objet, pas un document.
--------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  --wood-hi: #7a4f2e;
  --wood: #56331c;
  --wood-lo: #331d10;
  --bakelite: #17120e;
  --bakelite-hi: #2b221a;

  --glass: #120d07;
  --amber: #ffb03a;
  --amber-soft: #ffd79a;
  --amber-dim: #a9752a;
  --cream: #f4e4c1;
  --needle: #e0473a;
  --brass: #c9a227;
  --brass-lo: #7d6415;
  --live: #7bd88f;

  /* Utilisee par les libelles en style en ligne de la page dediee. */
  --muted: rgba(244, 228, 193, .45);

  --serif: "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 40px 20px 64px;
  font: 15px/1.55 var(--sans);
  color: var(--cream);
  background:
    radial-gradient(1200px 600px at 50% -10%, #2a2016 0%, transparent 70%),
    linear-gradient(180deg, #14100c 0%, #0b0907 100%);
  background-attachment: fixed;
}

a { color: var(--amber); }

.wrap { max-width: 780px; margin: 0 auto; }

/* --- Le poste ------------------------------------------------------------ */

.radio {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 22px 22px 26px;
  border-radius: 20px;
  background:
    repeating-linear-gradient(93deg, rgba(0, 0, 0, .10) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(93deg, rgba(255, 226, 190, .035) 0 1px, transparent 1px 19px),
    linear-gradient(160deg, var(--wood-hi) 0%, var(--wood) 42%, var(--wood-lo) 100%);
  border: 1px solid rgba(0, 0, 0, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, .22),
    inset 0 -2px 6px rgba(0, 0, 0, .5),
    0 26px 60px rgba(0, 0, 0, .55),
    0 4px 12px rgba(0, 0, 0, .4);
}

.radio-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px 16px;
}

.brand {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.brand small {
  display: block;
  font-size: 10px;
  letter-spacing: .16em;
  color: rgba(244, 228, 193, .42);
  margin-top: 2px;
}

.radio-top .spacer { flex: 1; }

.counts {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(244, 228, 193, .5);
  text-align: right;
}
.counts b { color: var(--amber-soft); font-weight: 600; }

/* Lampe témoin (œil magique) */
.lamp {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #4a4038, #1a1512);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8);
  transition: background .4s, box-shadow .4s;
}
.lamp[data-state="live"] {
  background: radial-gradient(circle at 35% 30%, #d6ffdd, var(--live) 55%, #2c6b3c);
  box-shadow: 0 0 12px rgba(123, 216, 143, .75), inset 0 1px 2px rgba(0, 0, 0, .3);
}
.lamp[data-state="connecting"], .lamp[data-state="retrying"] {
  background: radial-gradient(circle at 35% 30%, #ffe3b0, var(--amber) 55%, #7a4f12);
  box-shadow: 0 0 12px rgba(255, 176, 58, .7), inset 0 1px 2px rgba(0, 0, 0, .3);
  animation: pulse 1.1s ease-in-out infinite;
}
.lamp[data-state="error"] {
  background: radial-gradient(circle at 35% 30%, #ffc9c4, var(--needle) 55%, #6d1e17);
  box-shadow: 0 0 12px rgba(224, 71, 58, .7), inset 0 1px 2px rgba(0, 0, 0, .3);
}
@keyframes pulse { 50% { opacity: .45; } }

/* --- Le cadran ----------------------------------------------------------- */

.dial {
  padding: 9px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bakelite-hi), var(--bakelite));
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .75),
    0 1px 0 rgba(255, 220, 170, .12);
}

.dial-glass {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding: 16px 18px 0;
  background:
    radial-gradient(125% 135% at 50% 122%, rgba(255, 176, 58, .38) 0%, rgba(255, 176, 58, .10) 46%, transparent 74%),
    linear-gradient(180deg, #1c140b 0%, var(--glass) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 215, 154, .12), inset 0 8px 22px rgba(0, 0, 0, .7);
  filter: saturate(.4) brightness(.78);
  transition: filter .5s ease;
}
.radio.on .dial-glass { filter: none; }

/* Reflet oblique sur la vitre */
.dial-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, rgba(255, 255, 255, .07) 0 18%, transparent 42%);
  pointer-events: none;
}

.dial-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber-dim);
}
.radio.on .dial-head { color: var(--amber); }

.dial-station {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.15;
  margin: 10px 0 2px;
  color: var(--cream);
  text-shadow: 0 0 18px rgba(255, 176, 58, .35);
  overflow-wrap: anywhere;
}

.dial-track {
  min-height: 44px;
  font-size: 14.5px;
  color: var(--amber-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dial-track .artist { color: rgba(244, 228, 193, .6); }
.dial-track .idle { color: rgba(244, 228, 193, .38); font-style: italic; }

/* Échelle graduée et aiguille */
.scale {
  position: relative;
  height: 42px;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 215, 154, .18);
}
.ticks { position: absolute; inset: 0; display: flex; }
.tick { flex: 1; position: relative; }
.tick::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 9px;
  background: rgba(255, 215, 154, .35);
}
.tick.major::before { height: 15px; background: rgba(255, 215, 154, .6); }
.tick span {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(255, 215, 154, .38);
}

.needle {
  position: absolute;
  top: -6px; bottom: 2px;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, var(--needle), #8d251c);
  border-radius: 1px;
  box-shadow: 0 0 9px rgba(224, 71, 58, .85);
  transition: left .65s cubic-bezier(.55, .06, .2, 1);
}
.needle::before {
  content: "";
  position: absolute;
  top: -5px; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--needle);
}

/* --- Commandes ----------------------------------------------------------- */

.controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  gap: 16px;
  margin-top: 20px;
  -webkit-user-select: none;
  user-select: none;
}

.tuner-row { display: flex; gap: 8px; align-items: stretch; }
.tuner-row select { flex: 1; min-width: 0; }

/* Changement de station sans ouvrir la liste : indispensable en conduite. */
.step {
  flex: none;
  width: 54px;
  justify-content: center;
  padding: 0;
  font-size: 15px;
  border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, .6);
  background: linear-gradient(180deg, #2c231b, #1a1410);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .12), 0 2px 5px rgba(0, 0, 0, .5);
  color: var(--brass);
}
.step:active { transform: translateY(1px); }

.control label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(244, 228, 193, .45);
  margin-bottom: 6px;
}

select#station {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  font: 15px/1.2 var(--sans);
  color: var(--cream);
  padding: 11px 38px 11px 14px;
  border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, .6);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23c9a227' stroke-width='1.6'/></svg>") no-repeat right 14px center,
    linear-gradient(180deg, #2c231b, #1a1410);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .12), 0 2px 5px rgba(0, 0, 0, .5);
  cursor: pointer;
}
select#station:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
select#station optgroup { color: var(--brass); font-style: normal; }
select#station option { color: #f4e4c1; background: #1a1410; }

/* Bouton marche : bouton bakélite à liseré laiton */
.power {
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 2px solid var(--brass-lo);
  cursor: pointer;
  color: var(--cream);
  display: grid;
  place-items: center;
  gap: 4px;
  background:
    radial-gradient(circle at 38% 28%, #40332a 0%, #221a14 55%, #120d0a 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 220, 170, .18),
    inset 0 -3px 8px rgba(0, 0, 0, .7),
    0 5px 12px rgba(0, 0, 0, .55);
  transition: transform .12s, box-shadow .2s;
}
.power:hover { border-color: var(--brass); }
.power:active { transform: translateY(2px); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8); }
.power .glyph {
  font-size: 26px;
  line-height: 1;
  color: rgba(244, 228, 193, .55);
  transition: color .3s, text-shadow .3s;
}
.radio.on .power .glyph { color: var(--amber-soft); text-shadow: 0 0 12px rgba(255, 176, 58, .6); }
.power .led {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3a2f27;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8);
}
.radio.on .power { border-color: var(--brass); }
.radio.on .power .led {
  background: radial-gradient(circle at 35% 30%, #ffd9a8, var(--needle));
  box-shadow: 0 0 10px rgba(224, 71, 58, .9);
}

.control.volume { width: 148px; }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #120d0a, #2a211a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0d79a, var(--brass) 55%, #6d5612);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .6);
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px; background: #1a1410;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0d79a, var(--brass) 55%, #6d5612);
}

/* --- Grille du haut-parleur ---------------------------------------------- */

.grille {
  height: 84px;
  margin-top: 22px;
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .62) 0 3px, rgba(190, 160, 120, .10) 3px 7px),
    linear-gradient(180deg, #201810, #140f0b);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(255, 220, 170, .07);
}

/* --- Panneau arrière (infos techniques) ---------------------------------- */

.backpanel {
  max-width: 780px;
  margin: 26px auto 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 220, 170, .1);
  background: linear-gradient(180deg, #1d1812, #151009);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  overflow: hidden;
}
.backpanel > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
}
.backpanel > summary::-webkit-details-marker { display: none; }
.backpanel > summary::before { content: "▸ "; }
.backpanel[open] > summary::before { content: "▾ "; }
.backpanel .body { padding: 0 18px 18px; }

.panel {
  border-radius: 12px;
  border: 1px solid rgba(255, 220, 170, .1);
  background: linear-gradient(180deg, #1d1812, #151009);
  padding: 16px;
}
.panel h3 {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
}

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

table.kv { width: 100%; border-collapse: collapse; font-size: 13px; }
table.kv th, table.kv td { text-align: left; padding: 5px 0; vertical-align: top; }
table.kv th { width: 42%; font-weight: 400; color: rgba(244, 228, 193, .48); }
table.kv td { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; color: var(--cream); }
table.kv tr + tr th, table.kv tr + tr td { border-top: 1px solid rgba(255, 220, 170, .06); }

.url-row { display: flex; gap: 6px; align-items: center; }
.url-row code {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--amber-soft);
  background: #100c08;
  border: 1px solid rgba(255, 220, 170, .1);
  overflow-x: auto;
  white-space: nowrap;
}
.url-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 228, 193, .4);
  margin: 0 0 5px;
}
.url-block + .url-block { margin-top: 12px; }
.page-link { margin-top: 14px; }

button, .btn {
  font: 13px/1 var(--sans);
  cursor: pointer;
  color: var(--cream);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 220, 170, .16);
  background: linear-gradient(180deg, #2c231b, #1a1410);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
button:hover, .btn:hover { border-color: var(--brass); }
button:disabled { opacity: .5; cursor: not-allowed; }

ol.history { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--cream); }
ol.history li { margin-bottom: 8px; }
ol.history time { display: block; font-family: var(--mono); font-size: 11px; color: rgba(244, 228, 193, .4); }

.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  padding: 4px 9px;
  border-radius: 999px;
  color: rgba(244, 228, 193, .6);
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 220, 170, .12);
  white-space: nowrap;
}
.badge.out { color: var(--amber); border-color: rgba(255, 176, 58, .35); }

.foot {
  max-width: 780px;
  margin: 22px auto 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(244, 228, 193, .3);
}
.foot a { color: rgba(244, 228, 193, .45); }

.toast {
  position: fixed;
  left: 50%; bottom: 32px;
  transform: translateX(-50%) translateY(8px);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--bakelite);
  background: var(--amber-soft);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%); }

/* --- Page dédiée d'une station ------------------------------------------- */

header.top { margin-bottom: 22px; }
header.top .wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
header.top h1 { margin: 0; font-family: var(--serif); font-size: 17px; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
header.top h1 a { color: inherit; text-decoration: none; }
header.top h1 span { color: rgba(244, 228, 193, .4); letter-spacing: .04em; text-transform: none; font-size: 14px; }
.spacer { flex: 1; }
.metrics { display: flex; gap: 14px; font-family: var(--mono); font-size: 11px; color: rgba(244, 228, 193, .45); }
.metrics b { color: var(--amber-soft); }

.player-page { padding-top: 0; }
.player-hero {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--wood-hi), var(--wood) 45%, var(--wood-lo));
  border: 1px solid rgba(0, 0, 0, .5);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .2), 0 20px 46px rgba(0, 0, 0, .5);
}
.player-hero h1 { margin: 0; font-family: var(--serif); font-size: 26px; color: var(--cream); }
.player-hero .sub { font-size: 13px; color: rgba(244, 228, 193, .55); }

.now {
  padding: 14px 16px;
  min-height: 74px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(120% 130% at 50% 120%, rgba(255, 176, 58, .26) 0%, transparent 70%),
    linear-gradient(180deg, #1c140b, var(--glass));
  box-shadow: inset 0 0 0 1px rgba(255, 215, 154, .12), inset 0 6px 18px rgba(0, 0, 0, .7);
}
.now .title { font-family: var(--serif); font-size: 19px; color: var(--cream); overflow-wrap: anywhere; }
.now .artist { font-size: 13.5px; color: var(--amber-soft); overflow-wrap: anywhere; }
.now .empty { color: rgba(244, 228, 193, .4); font-style: italic; }

audio { width: 100%; }

pre {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--amber-soft);
  background: #100c08;
  border: 1px solid rgba(255, 220, 170, .1);
  border-radius: 8px;
  padding: 10px;
}

/* --- Panneau de commandes (portail, garage) ------------------------------- */

.dash-open {
  width: 40px; height: 40px;
  padding: 0;
  justify-content: center;
  font-size: 19px;
  border-radius: 10px;
  color: var(--brass);
  border-color: rgba(255, 220, 170, .2);
  background: linear-gradient(180deg, #2c231b, #1a1410);
}

.dash-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 6, 4, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.dash-overlay[hidden] { display: none; }

.dash {
  width: min(640px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 220, 170, .14);
  background: linear-gradient(160deg, var(--wood-hi), var(--wood) 45%, var(--wood-lo));
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
}
.dash-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dash-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  flex: 1;
}
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.dash-hint { margin: 14px 0 0; font-size: 12.5px; color: rgba(244, 228, 193, .5); text-align: center; }
.dash-token { margin-top: 16px; }
.dash-token input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--cream);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 220, 170, .14);
  background: #100c08;
}

/* Bouton a appui maintenu : la barre se remplit pendant l'appui. */
.hold {
  position: relative;
  overflow: hidden;
  min-height: 84px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 220, 170, .18);
  background: linear-gradient(180deg, #2c231b, #171008);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .14), 0 4px 12px rgba(0, 0, 0, .45);
  font-size: 16px;
  justify-content: center;
  touch-action: none; /* l'appui long ne doit pas faire defiler la page */
  -webkit-user-select: none;
  user-select: none;
}
.hold.group { border-color: rgba(201, 162, 39, .5); }
.hold .fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgba(255, 176, 58, .30), rgba(255, 176, 58, .5));
  pointer-events: none;
}
.hold .label { position: relative; display: flex; align-items: center; gap: 10px; }
.hold .icon { font-size: 22px; }
.hold.holding { border-color: var(--amber); }
.hold.sending { opacity: .75; }
.hold.done {
  border-color: var(--live);
  box-shadow: 0 0 0 2px rgba(123, 216, 143, .3), inset 0 1px 0 rgba(255, 220, 170, .14);
}

/* ---------------------------------------------------------------------------
   Ecrans tactiles (Tesla) : cibles agrandies, aucun survol requis.
--------------------------------------------------------------------------- */

@media (pointer: coarse) {
  body { -webkit-tap-highlight-color: transparent; }
  button, .btn, select, input[type="range"] { touch-action: manipulation; }

  .step { width: 66px; min-height: 58px; font-size: 18px; }
  select#station { padding: 16px 42px 16px 16px; font-size: 17px; }
  .power { width: 88px; height: 88px; }
  .power .glyph { font-size: 32px; }
  .control label { font-size: 11px; }

  button, .btn { min-height: 46px; padding: 12px 16px; font-size: 14px; }
  input[type="range"] { height: 44px; }
  input[type="range"]::-webkit-slider-runnable-track { height: 8px; }
  input[type="range"]::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -11px; }
  input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; }
  .backpanel > summary { padding: 18px; font-size: 12px; }
  .url-row code { padding: 12px; font-size: 13px; }
  .dash-open { width: 52px; height: 52px; font-size: 23px; }
  .hold { min-height: 104px; font-size: 18px; }
  .hold .icon { font-size: 26px; }
}

/* Ecran large et peu haut — cas de l'ecran central Tesla en paysage :
   tout doit tenir sans defilement, avec un cadran lisible d'un coup d'oeil. */
@media (min-width: 900px) and (max-height: 880px) and (orientation: landscape) {
  body { padding: 22px 24px 32px; }
  .radio, .backpanel, .foot, .wrap { max-width: 1060px; }
  .radio { padding: 22px 26px 24px; }
  .dial-glass { padding: 18px 22px 0; }
  .dial-station { font-size: 40px; margin: 12px 0 4px; }
  .dial-track { font-size: 18px; min-height: 52px; }
  .dial-head { font-size: 12px; }
  .scale { height: 46px; }
  .controls { gap: 26px; margin-top: 22px; }
  .grille { height: 54px; margin-top: 18px; }
  .brand { font-size: 16px; }
  .counts { font-size: 12px; }
}

@media (max-width: 560px) {
  body { padding: 20px 12px 48px; }
  .radio { padding: 16px 14px 18px; border-radius: 16px; }
  .controls { grid-template-columns: 1fr auto; }
  .control.volume { grid-column: 1 / -1; width: 100%; }
  .dial-station { font-size: 24px; }
  .grille { height: 60px; }
  .brand { font-size: 12.5px; letter-spacing: .12em; white-space: nowrap; }
  .counts { font-size: 9.5px; line-height: 1.4; }
}

@media (max-width: 400px) {
  .counts { display: none; }
}