/* Radio Tété « Le Salon 1938 » : poste en noyer, cadran ambré, molettes en bakélite et touches ivoire.
   Partagé par l'accueil, la page Radio (et l'appli installée) ; les touches servent aussi de menu sur toutes les pages. */

/* ---------- Touches de poste : menu du site ---------- */
.top nav { gap: 5px !important; padding: 5px 6px 8px; border-radius: 8px; background: #1a0e06; box-shadow: inset 0 2px 5px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.08); }
.top nav > a, .top nav > .nav-share {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em; height: 34px; min-width: 52px; padding: 4px 11px 0; line-height: 1;
  font-family: var(--label, "Josefin Sans", sans-serif); font-weight: 600; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: #3a2a14; background: linear-gradient(#fbf4e2, #e6dcc4); border: 0; border-radius: 3px 3px 6px 6px; cursor: pointer;
  box-shadow: 0 5px 0 #a89a7e, 0 7px 6px rgba(0,0,0,.8); transform: translateY(-3px); transition: transform .08s, box-shadow .08s;
}
.top nav > a::before, .top nav > .nav-share::before { content: ""; position: absolute; left: 6px; right: 6px; top: 4px; height: 6px; border-radius: 3px; background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0)); pointer-events: none; }
.top nav > a:hover, .top nav > .nav-share:hover, .top nav > a:focus-visible, .top nav > .nav-share:focus-visible { color: #3a2a14; transform: translateY(-2px); background: linear-gradient(#fffaf0, #ece2ca); }
.top nav > a:active, .top nav > .nav-share:active, .top nav > a[aria-current] { transform: translateY(2px); box-shadow: 0 0 0 #a89a7e, 0 1px 2px rgba(0,0,0,.8), inset 0 2px 4px rgba(0,0,0,.3); color: #3a2a14; }
.top nav > a:focus-visible, .top nav > .nav-share:focus-visible { outline: 2px solid #f6d48a; outline-offset: 3px; }
.top nav > a.nav-sub, .top nav > a.nav-sub:hover { color: #fff3e6; background: linear-gradient(#c9372c, #8e1d16); box-shadow: 0 5px 0 #561009, 0 7px 6px rgba(0,0,0,.8); padding: 4px 11px 0; border-radius: 3px 3px 6px 6px; }
.top nav > a.nav-inv, .top nav > a.nav-inv:hover { color: #241703; background: linear-gradient(#f7c04a, #c98a10); box-shadow: 0 5px 0 #7a5208, 0 7px 6px rgba(0,0,0,.8); padding: 4px 11px 0; border-radius: 3px 3px 6px 6px; }
.top nav > a.nav-sub:active, .top nav > a.nav-inv:active { box-shadow: 0 0 0 #000, inset 0 2px 4px rgba(0,0,0,.35); }
.top nav > .nav-share svg, .top nav > a .yt { width: 14px; height: 14px; flex: none; }
.top nav .lang-pick { align-self: center; margin-left: 2px; }
@media (max-width: 700px) {
  .top nav { gap: 4px !important; padding: 4px 5px 7px; }
  .top nav > a, .top nav > .nav-share { height: 30px; min-width: 0; padding: 3px 7px 0; font-size: .56rem; letter-spacing: .08em; }
  .top nav > a.nav-sub, .top nav > a.nav-inv { padding: 3px 7px 0; }
  .top nav > a.nav-sub span { display: none; }
}

/* ---------- Le poste ---------- */
.p38 { --trim: #c99a45; position: relative; overflow: clip; container-type: inline-size; max-width: 1080px; margin: 0 auto; padding: clamp(14px, 2vw, 22px) clamp(12px, 2vw, 22px) clamp(16px, 2vw, 22px); border-radius: 26px 26px 14px 14px; color: #f0d9a8;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.19)), repeating-linear-gradient(92deg, #5a2f14 0 7px, #6b3a19 7px 11px, #4d2810 11px 19px, #61341a 19px 23px), #5a2f14;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 -6px 14px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.8), 0 0 0 1px #000; }
.p38::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-radial-gradient(ellipse at 30% 140%, transparent 0 9px, rgba(255,255,255,.13) 10px, transparent 12px); mix-blend-mode: overlay; opacity: .5; }
.p38-face { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; }
.p38-grille { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2cqi, 22px); padding: 14px; min-height: 150px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, transparent 0 40%, rgba(0,0,0,.38) 100%), repeating-linear-gradient(45deg, #7a5530 0 2px, #5c3c1f 2px 4px), repeating-linear-gradient(-45deg, #8a6236 0 2px, #4d3118 2px 4px);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.8), 0 0 0 3px var(--trim), 0 0 0 4px rgba(0,0,0,.5); }
.p38-disc { position: relative; flex: none; display: grid; place-items: center; width: clamp(64px, 11cqi, 116px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: repeating-radial-gradient(circle, #151210 0 2px, #1f1a16 2px 4px); box-shadow: 0 8px 18px rgba(0,0,0,.7), inset 0 0 0 2px #2a221c; }
.p38-disc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgba(255,255,255,.08) 25%, transparent 32% 70%, rgba(255,255,255,.06) 75%, transparent 82%); }
.p38-lab { position: relative; width: 44%; height: 44%; border-radius: 50%; overflow: hidden; background: #f2a516; box-shadow: 0 0 0 2px #f2a516; }
.p38-lab img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p38-lab::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #0e0c0a; }
.radio-on .p38-disc { animation: p38spin 6s linear infinite; }
@keyframes p38spin { to { transform: rotate(360deg); } }
.p38-badge { position: relative; text-align: center; padding: 10px 16px 8px; border-radius: 6px; background: linear-gradient(#f3d58c, #c9952e); box-shadow: 0 0 0 1px var(--trim), 0 4px 10px rgba(0,0,0,.7); min-width: 0; }
.p38-badge .nm { display: block; margin: 0; font-family: var(--display, "Bodoni Moda", Georgia, serif); font-weight: 700; font-size: clamp(1.25rem, 3cqi, 2rem); line-height: 1; letter-spacing: 0; color: #2b1903; white-space: nowrap; }
.p38-badge i { display: block; font-family: var(--label, sans-serif); font-style: normal; font-weight: 600; font-size: .5rem; letter-spacing: .34em; text-transform: uppercase; color: #2b1903; opacity: .8; margin-top: 5px; }

.p38-dial { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 6px; padding: 12px 16px; border-radius: 10px; overflow: hidden; color: #2a1a06; background: linear-gradient(#f4dc9e, #e5b65a);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 6px 16px rgba(0,0,0,.45), 0 0 0 3px var(--trim), 0 0 0 4px rgba(0,0,0,.5); filter: brightness(.86) saturate(.85); transition: filter .5s, box-shadow .5s; }
.p38-dial::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 60%, rgba(255,243,196,.8), transparent 70%); opacity: .25; transition: opacity .6s; pointer-events: none; }
.p38-dial::after { content: ""; position: absolute; inset: 0 0 auto; height: 45%; background: linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,0)); pointer-events: none; }
.radio-on .p38-dial { filter: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 6px 16px rgba(0,0,0,.45), 0 0 0 3px var(--trim), 0 0 0 4px rgba(0,0,0,.5), 0 0 30px rgba(246,190,90,.35); }
.radio-on .p38-dial::before { opacity: .95; }
.p38-dtop { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.p38-state { display: inline-flex; align-items: center; gap: 8px; font-family: var(--label, sans-serif); font-weight: 600; font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; }
.p38-lamp { width: 9px; height: 9px; border-radius: 50%; background: #4a1a10; box-shadow: inset 0 1px 2px #000; }
.radio-on .p38-lamp { background: #ff5a2a; box-shadow: 0 0 10px #ff6a2a, inset 0 0 2px #fff; }
@property --p38open { syntax: "<angle>"; inherits: false; initial-value: 30deg; }
.p38-eye { width: 26px; height: 26px; border-radius: 50%; flex: none; background: radial-gradient(circle, #0a1a0a 0 26%, transparent 27%), conic-gradient(from calc(180deg - var(--p38open)), #0d2a10 0 calc(var(--p38open) * 2), #4dff6a calc(var(--p38open) * 2) 360deg); box-shadow: 0 0 0 2px #1d1408, 0 0 0 3px #b48a3a; filter: saturate(.5) brightness(.6); }
.radio-on .p38-eye { filter: none; box-shadow: 0 0 0 2px #1d1408, 0 0 0 3px #b48a3a, 0 0 12px rgba(77,255,106,.55); animation: p38eye 1.8s ease-in-out infinite; }
@keyframes p38eye { 0%, 100% { --p38open: 14deg; } 50% { --p38open: 44deg; } }
.p38-scale { position: relative; z-index: 1; height: 58px; border-top: 1px solid rgba(42,26,6,.33); border-bottom: 1px solid rgba(42,26,6,.33); }
.p38-ticks { position: absolute; inset: 22px 0 18px; background-image: repeating-linear-gradient(90deg, rgba(42,26,6,.66) 0 1px, transparent 1px 2%), repeating-linear-gradient(90deg, #2a1a06 0 1.5px, transparent 1.5px 10%); background-size: 100% 6px, 100% 12px; background-repeat: no-repeat; background-position: 0 100%, 0 100%; }
.p38-st { position: absolute; top: 3px; transform: translateX(-50%); font-family: var(--italic, Georgia, serif); font-style: italic; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.p38-yr { position: absolute; bottom: 1px; transform: translateX(-50%); font-family: var(--label, sans-serif); font-size: .55rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.p38-needle { position: absolute; top: -4px; bottom: -4px; left: 50%; width: 2px; background: #c0221a; box-shadow: 0 0 6px #ff3b2a; transition: left 1.1s cubic-bezier(.3,.7,.2,1); }
.p38-needle::before { content: ""; position: absolute; top: 0; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #c0221a; }
.p38-now { position: relative; z-index: 1; align-self: center; text-align: center; min-width: 0; }
.p38-now b { display: block; font-family: var(--display, Georgia, serif); font-weight: 700; font-size: clamp(1.1rem, 2.6cqi, 1.65rem); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p38-now span { display: block; font-family: var(--italic, Georgia, serif); font-style: italic; font-weight: 600; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p38-now em { font-style: italic; opacity: .75; }

.p38-ctl { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.p38-kw { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--label, sans-serif); font-weight: 600; font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: #f0d9a8; }
.p38-knob { --rot: -40deg; position: relative; display: block; width: 64px; height: 64px; border-radius: 50%; transform: rotate(var(--rot)); transition: transform .45s cubic-bezier(.3,.8,.3,1.2);
  background: radial-gradient(circle at 38% 30%, rgba(255,255,255,.25), transparent 42%), radial-gradient(circle, #3a1d0c, #1b0c04);
  box-shadow: 0 0 0 4px #8a5a26, 0 0 0 5px rgba(0,0,0,.6), 0 8px 12px rgba(0,0,0,.8), inset 0 -4px 8px rgba(0,0,0,.5); }
.p38-knob::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: repeating-conic-gradient(transparent 0 6deg, rgba(0,0,0,.3) 6deg 9deg); -webkit-mask: radial-gradient(circle, transparent 0 31px, #000 32px); mask: radial-gradient(circle, transparent 0 31px, #000 32px); }
.p38-knob::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: #f3d58c; }
.p38-knob .g { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.05rem; color: #f3d58c; transform: rotate(calc(var(--rot) * -1)); transition: transform .45s; }
.radio-on .p38-play .p38-knob { --rot: 40deg; }
.p38-kw:hover .p38-knob { filter: brightness(1.15); }
.p38-kw:focus-visible { outline: none; }
.p38-kw:focus-visible .p38-knob { outline: 2px solid #f6d48a; outline-offset: 6px; }
.p38-plate { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.p38-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 5px 6px 8px; border-radius: 8px; background: #1a0e06; box-shadow: inset 0 2px 5px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.08); }
.p38-key { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 4px 12px 0; line-height: 1; border: 0; border-radius: 3px 3px 6px 6px; cursor: pointer;
  font-family: var(--label, sans-serif); font-weight: 600; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: #3a2a14; background: linear-gradient(#fbf4e2, #e6dcc4); box-shadow: 0 5px 0 #a89a7e, 0 7px 6px rgba(0,0,0,.8); transform: translateY(-3px); transition: transform .08s, box-shadow .08s; }
.p38-key::before { content: ""; position: absolute; left: 6px; right: 6px; top: 4px; height: 6px; border-radius: 3px; background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0)); }
.p38-key:hover { transform: translateY(-2px); }
.p38-key:active { transform: translateY(2px); box-shadow: 0 0 0 #000, inset 0 2px 4px rgba(0,0,0,.3); }
.p38-key:focus-visible { outline: 2px solid #f6d48a; outline-offset: 3px; }
.p38-key.red { color: #fff3e6; background: linear-gradient(#c9372c, #8e1d16); box-shadow: 0 5px 0 #561009, 0 7px 6px rgba(0,0,0,.8); }
.p38-key.gold { color: #241703; background: linear-gradient(#f7c04a, #c98a10); box-shadow: 0 5px 0 #7a5208, 0 7px 6px rgba(0,0,0,.8); }
.p38-tanda { font-family: var(--italic, Georgia, serif); font-style: italic; font-size: 1.02rem; color: #f0d9a8; text-decoration: underline; text-underline-offset: 3px; text-align: center; }
.p38-tanda:hover { color: #fff; }

@container (max-width: 600px) {
  .p38-face { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .p38-grille { min-height: 0; padding: 10px; }
  .p38-disc { width: 70px; }
  .p38-badge { padding: 7px 12px 6px; }
  .p38-badge .nm { font-size: 1.45rem; }
  .p38-st { font-size: .74rem; }
  .p38-st.far { display: none; }
  .p38-now b { font-size: 1.15rem; }
  .p38-now span { font-size: .98rem; }
  .p38-ctl { flex-wrap: wrap; justify-content: space-between; gap: 12px; }
  .p38-plate { order: 3; flex-basis: 100%; }
  .p38-knob { width: 56px; height: 56px; }
  .p38-knob::before { -webkit-mask: radial-gradient(circle, transparent 0 27px, #000 28px); mask: radial-gradient(circle, transparent 0 27px, #000 28px); }
}
@media (prefers-reduced-motion: reduce) { .radio-on .p38-disc, .radio-on .p38-eye { animation: none; } .p38-needle, .p38-knob, .p38-knob .g { transition: none; } }