/* ============================================
   Radio MLK — l'interface aux couleurs du calendrier (21/10/2026 ; maquette specs/maquette-theme-calendrier.html ;
   Emmanuel : « quitte à être kitsch, toute l'interface pour l'instant », niveaux réglables dans Gestion).
   Classes posées sur <html> par assets/appli/intro.js (mlkIntro.theme) : mlk-th, mlk-th-<période>, et les niveaux
   mlk-th-entete (décor de l'en-tête), mlk-th-fond (décor du fond noir), mlk-th-ui (couleurs de l'interface).
   Full = les trois ; classique = fond ; light = en-tête. Site public et appli ; jamais l'espace Team.
   ============================================ */

/* ── Couleurs et symbole de chaque période ── */
html.mlk-th-hallo   { --th-a: #ff7a1a; --th-a2: #b06cff; --th-titre: #ff7a1a; --th-bande: #2c1838; --th-entete: #1f1028; --th-carte: #38204a; --th-emo: "🎃"; }
html.mlk-th-anniv   { --th-a: #D20658; --th-a2: #ffd34d; --th-titre: #ffd34d; --th-bande: #36182a; --th-entete: #2b0a19; --th-carte: #442036; --th-emo: "🎂"; }
html.mlk-th-noel    { --th-a: #D20658; --th-a2: #ffd34d; --th-titre: #ffd34d; --th-bande: #32181f; --th-entete: #2a0d1c; --th-carte: #40202a; --th-emo: "🎄"; }
html.mlk-th-an      { --th-a: #ffd34d; --th-a2: #7ad7ff; --th-titre: #ffd34d; --th-bande: #221a38; --th-entete: #1a0f2e; --th-carte: #2c2348; --th-emo: "✨"; }
html.mlk-th-lune    { --th-a: #c9d6f2; --th-a2: #fff3c8; --th-titre: #c9d6f2; --th-bande: #18233e; --th-entete: #13203d; --th-carte: #20304f; --th-emo: "🌕"; }
html.mlk-th-hiver   { --th-a: #8fb3e0; --th-a2: #ffffff; --th-titre: #8fb3e0; --th-bande: #1a2a44; --th-entete: #1a2a48; --th-carte: #223656; --th-emo: "❄️"; }
html.mlk-th-ete     { --th-a: #ff8a3c; --th-a2: #2ec4d6; --th-titre: #ff8a3c; --th-bande: #3a1a2c; --th-entete: #3a1430; --th-carte: #4a2236; --th-emo: "☀️"; }
html.mlk-th-paques  { --th-a: #ff7aa8; --th-a2: #9fe3c0; --th-titre: #ffb3cf; --th-bande: #22301e; --th-entete: #1f2a1a; --th-carte: #2c3c27; --th-emo: "🥚"; }
/* Vacances de la Toussaint (automne) et de printemps, jours fériés (version chill) — 21/10/2026 */
html.mlk-th-automne   { --th-a: #d8803a; --th-a2: #e8c27a; --th-titre: #e3a66a; --th-bande: #36271b; --th-entete: #221b16; --th-carte: #443222; --th-emo: ""; } /* plus sobre (Emmanuel, 21/10/2026 : « un peu trop kitsch ») */
html.mlk-th-printemps { --th-a: #ff7aa8; --th-a2: #b9f0a0; --th-titre: #ffb3cf; --th-bande: #341f2b; --th-entete: #2a1621; --th-carte: #422836; --th-emo: "🌸"; }
html.mlk-th-ferie     { --th-a: #3fd0c9; --th-a2: #c8fff4; --th-titre: #7de3dc; --th-bande: #143533; --th-entete: #0f2624; --th-carte: #1b4441; --th-emo: "🌿"; }
/* Moments de la journée, quand aucune période n'est en cours : discrets, le rose reste */
html.mlk-th-jour   { --th-a: #D20658; --th-a2: #ffe7a3; --th-titre: #D20658; --th-bande: #2a2726; --th-entete: #262322; --th-carte: #33302e; --th-emo: ""; }
html.mlk-th-soiree { --th-a: #e0306e; --th-a2: #ffb27a; --th-titre: #ff6f91; --th-bande: #311d26; --th-entete: #271a1f; --th-carte: #3d2530; --th-emo: ""; }
html.mlk-th-nuit   { --th-a: #4f86e8; --th-a2: #c9d6f2; --th-titre: #8fb0f0; --th-bande: #16213c; --th-entete: #111a2e; --th-carte: #1e2b4c; --th-emo: ""; } /* bleus de nuit (Emmanuel, 21/10/2026) */
html.mlk-th-musique { --th-a: #ff2e6f; --th-a2: #ffd400; --th-titre: #ffd400; --th-bande: #2a2228; --th-entete: #212121; --th-carte: #352b32; --th-emo: "🎵"; }

/* ── Niveau « toute l'interface » ── */
/* Bandes ~20 % plus sombres que la couleur du thème, cartouches sous les vignettes plus sombres que la bande et que le fond
   de la page (fond = bande à 62 % sur du noir) : calculés depuis chaque thème (Emmanuel, 21/10/2026 : « ça dépend du fond ») */
html.mlk-th-ui { --mlk-accent: var(--th-a); --th-bande-s: color-mix(in srgb, var(--th-bande) 78%, #000); --th-cart: color-mix(in srgb, var(--th-bande) 28%, #000); --th-bande-x: var(--th-bande-s); }
html.mlk-th-ui #mlk-une { --pink: var(--th-a); }
html.mlk-th-ui .mlk-live-btn--round { background: var(--th-a); }
html.mlk-th-ui .mlk-header-live-text { --txt-color: var(--th-a); color: var(--th-a); }
/* Bouton du direct de l'en-tête (l'appli lui donne un fond rose par #brx-header) : couleur du thème (21/10/2026) */
html.mlk-th-ui #brx-header .mlk-header-live-btn { background: var(--th-a); box-shadow: 0 4px 14px color-mix(in srgb, var(--th-a) 45%, transparent); }
/* Lueur derrière les boutons play de l'appli, à la couleur du thème (gardée : « c'était sympa », 21/10/2026) */
html.mlk-th-ui .app-mini-play { box-shadow: 0 4px 18px color-mix(in srgb, var(--th-a) 45%, transparent); }
html.mlk-th-ui .app-mini-play { background: var(--th-a) !important; }
html.mlk-th-ui :is(.app-nav3-btn.active, .app-mini-live, .app-mini-prog-fill, .app-now-prog-fill) { background: var(--th-a); }
html.mlk-th-ui #mlk-nowplaying .mlk-np-em-barre b { background: var(--th-a); }
html.mlk-th-ui .app-now-next-label { color: var(--th-a); }
/* Titres de section : couleur et symbole de la période */
html.mlk-th-ui #brx-content h5.mlk-b-heading, html.mlk-th-ui .app-titre { color: var(--th-titre); }
html.mlk-th-ui .app-titre::before { content: var(--th-emo) "\00a0"; }
/* Sur le site, le symbole se loge dans la marge à gauche du titre : le texte ne bouge pas (« LE DIRECT » est étroit) */
html.mlk-th-ui #brx-content h5.mlk-b-heading { position: relative; }
html.mlk-th-ui #brx-content h5.mlk-b-heading::before { content: var(--th-emo); position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: .2em; font-size: .8em; }
@media (max-width: 478px) { html.mlk-th-ui #brx-content h5.mlk-b-heading::before { font-size: .6em; margin-right: .1em; } }
/* En-tête, pied, lecteur, bandes, cartes */
/* En-tête et pied de la même couleur que les cartes (Emmanuel, 21/10/2026 : l'en-tête paraissait plus clair) */
html.mlk-th-ui #brx-header :is(.mlk-et-s, .mlk-et-logo) { background-color: var(--th-bande-s); }
html.mlk-th-ui #brx-footer .mlk-pied-c { background-color: var(--th-bande-s); }
html.mlk-th-ui #brx-footer :is(.mlk-pied-t, .mlk-pied-t a) { color: var(--th-a); }
html.mlk-th-ui #mlk-player { background: var(--th-entete); }
html.mlk-th-ui #brx-content :is(#mlk-ac-btvqsj, #mlk-ac-mega-m, #mlk-ac-zhjacd, #mlk-ac-lvjarr, #mlk-ac-bnvsjm) { background-color: var(--th-bande-s); }
html.mlk-th-ui :is(.app-direct, .app-une, .app-ems) { background: var(--th-bande-s); }
html.mlk-th-ui #mlk-une .mlk-une-meta { background: var(--th-cart); } /* plus sombre que la bande et que le fond */
html.mlk-th-ui #mlk-podcast-slider .mlk-ps-name { background: var(--th-cart); padding-left: 8px; padding-right: 8px; } /* même cartouche sous « Les émissions » */
html.mlk-th-ui #mlk-ac-bnvsjm #mlk-agenda-widget { --mlk-agw-header-bg: var(--th-a); }

/* ── Niveau « en-tête » : décor derrière le contenu de l'en-tête, badge à côté du logo ── */
html.mlk-th-entete #brx-header .mlk-et-s { position: relative; z-index: 0; overflow: hidden; }
.mlk-th-tete { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Badge collé comme un autocollant sur le coin bas droit du logo */
#brx-header .mlk-et-logo .mlk-th-badge { position: absolute; left: 62%; top: 74%; z-index: 2; padding: 3px 8px; border-radius: 6px; background: var(--th-a2, #ffd34d); color: #111;
  font-family: "IBM Plex Sans Condensed", sans-serif; font-weight: 700; font-size: 12px; line-height: 1.2; white-space: nowrap; transform: rotate(-6deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.45); pointer-events: none; }
@media (max-width: 478px) { #brx-header .mlk-et-logo .mlk-th-badge { font-size: 9px; padding: 2px 5px; left: 55%; top: 80%; } }

/* ── Niveau « fond » : calque fixe derrière tout le contenu ; bandes un peu transparentes pour le laisser voir ── */
#mlk-th-fond { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Fond teinté par le thème (plus de noir pur ; Emmanuel, 21/10/2026 : « trop sombre, un peu triste ») */
html.mlk-th-fond { --th-fond: color-mix(in srgb, var(--th-bande) 62%, #000); background-color: var(--th-fond); }
#mlk-th-fond { background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--th-a) 14%, var(--th-fond)), var(--th-fond) 70%); }
#mlk-th-fond { background: radial-gradient(ellipse at 50% 0, oklch(from var(--th-fond) calc(l + .07) calc(c * 1.8) h), var(--th-fond) 70%); } /* même teinte, sans gris (21/10/2026) */
html.mlk-th-fond :is(.mlk-app-wrap, .mlk-app-screen) { background: var(--th-fond); }
html.mlk-th-fond body.mlk-app-page { background: transparent; }
html.mlk-th-fond #brx-content :is(#mlk-ac-btvqsj, #mlk-ac-mega-m, #mlk-ac-zhjacd, #mlk-ac-lvjarr, #mlk-ac-bnvsjm) { background-color: color-mix(in srgb, var(--th-bande-x, #212121) 90%, transparent); }
html.mlk-th-fond :is(.app-direct, .app-une, .app-ems) { background: color-mix(in srgb, var(--th-bande-x, #1a1a1a) 90%, transparent); }
html.mlk-th-fond #brx-header .mlk-et-s, html.mlk-th-fond #brx-footer .mlk-pied-c { background-color: color-mix(in srgb, var(--th-bande-x, #212121) 90%, transparent); }
html.mlk-th-fond #brx-header .mlk-et-logo { background-color: transparent; }

/* ── Éléments des décors ── */
.mlk-th-x { position: absolute; }
@keyframes mlk-th-tombe { to { transform: translate(var(--x, 20px), 115vh) rotate(220deg); } }
@keyframes mlk-th-tombe-h { to { transform: translate(var(--x, 8px), 120px) rotate(220deg); } }
@keyframes mlk-th-brille { from { opacity: .15; } to { opacity: 1; } }
@keyframes mlk-th-clignote { 0%, 100% { opacity: 1; box-shadow: 0 0 8px currentColor; } 50% { opacity: .35; box-shadow: none; } }
@keyframes mlk-th-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes mlk-th-vole { 0% { transform: translateX(-60px); } 100% { transform: translateX(calc(100vw + 60px)); } }
@keyframes mlk-th-monte { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(var(--h, -110vh)); opacity: 0; } }
.mlk-th-flo { top: -24px; color: #fff; opacity: .75; font-size: var(--s); animation: mlk-th-tombe var(--t) linear var(--r) infinite; }
.mlk-th-tete .mlk-th-flo { animation-name: mlk-th-tombe-h; }
.mlk-th-ast { width: 3px; height: 3px; border-radius: 50%; background: #fff; animation: mlk-th-brille var(--t) ease-in-out var(--r) infinite alternate; }
.mlk-th-fil { left: 0; right: 0; bottom: 12px; height: 9px; border-bottom: 2px solid #3b5a2c; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.mlk-th-ampoule { bottom: 4px; width: 9px; height: 12px; border-radius: 50% 50% 45% 45%; color: var(--c); background: currentColor; animation: mlk-th-clignote 1.4s ease-in-out var(--r) infinite; }
.mlk-th-chauve { font-size: var(--s); filter: brightness(0) drop-shadow(0 0 2px #b06cff); animation: mlk-th-vole var(--t) linear var(--r) infinite; }
.mlk-th-lunette { border-radius: 50%; background: radial-gradient(circle at 38% 35%, #fffbe8, #e6dcb4); box-shadow: 0 0 18px rgba(255,244,200,.5); }
.mlk-th-soleil { border-radius: 50%; background: radial-gradient(circle, #ffe7a3, #ff9a3c); box-shadow: 0 0 26px rgba(255,170,80,.6); }
.mlk-th-couchant { left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(180deg, transparent, rgba(214,84,43,.35) 70%, rgba(242,163,58,.45)); }
.mlk-th-neigesol { left: 0; right: 0; bottom: 0; height: 7px; background: #f4f8ff; clip-path: polygon(0 60%, 5% 20%, 12% 50%, 20% 10%, 30% 55%, 40% 15%, 50% 50%, 60% 5%, 70% 45%, 80% 15%, 90% 50%, 100% 20%, 100% 100%, 0 100%); }
.mlk-th-oeuf { width: 12px; height: 16px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; background: var(--c); animation: mlk-th-flotte 1.6s ease-in-out var(--r) infinite; }
.mlk-th-tete .mlk-th-oeuf { bottom: 3px; }
.mlk-th-note { bottom: -30px; color: var(--c); font-size: var(--s); animation: mlk-th-monte var(--t) linear var(--r) infinite; }
.mlk-th-tete .mlk-th-note { --h: -120px; }
.mlk-th-arcenciel { left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #ff2e6f, #ff8a00, #ffd400, #2ed47a, #2ea8ff, #7a5cff); }
.mlk-th-confe { top: -16px; width: 6px; height: 10px; background: var(--c); animation: mlk-th-tombe var(--t) linear var(--r) infinite; }
.mlk-th-tete .mlk-th-confe { animation-name: mlk-th-tombe-h; }
.mlk-th-etinc { width: 4px; height: 4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); animation: mlk-th-brille .8s ease-in-out var(--r) infinite alternate; }
.mlk-th-voile { inset: 0; background: var(--vf); }
@keyframes mlk-th-feuille { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(var(--x, 40px), 28vh) rotate(90deg); } 50% { transform: translate(0, 56vh) rotate(160deg); } 75% { transform: translate(var(--x, 40px), 84vh) rotate(250deg); } 100% { transform: translate(0, 115vh) rotate(330deg); } }
@keyframes mlk-th-feuille-h { to { transform: translate(var(--x, 12px), 120px) rotate(200deg); } }
.mlk-th-feuille { top: -30px; font-size: var(--s); opacity: .85; animation: mlk-th-feuille var(--t) ease-in-out var(--r) infinite; }
.mlk-th-tete .mlk-th-feuille { animation: mlk-th-feuille-h var(--t) linear var(--r) infinite; }
.mlk-th-bulle { bottom: -30px; width: var(--s); height: var(--s); border-radius: 50%; border: 1px solid rgba(200,255,244,.5); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(63,208,201,.08)); animation: mlk-th-monte var(--t) ease-in-out var(--r) infinite; }
.mlk-th-tete .mlk-th-bulle { --h: -110px; }

/* Réduire les animations : décors immobiles */
@media (prefers-reduced-motion: reduce) { .mlk-th-tete *, #mlk-th-fond * { animation: none !important; } }

/* ── Le bas de l'appli et le mégaphone (21/10/2026, vu par Emmanuel : « la partie basse n'est pas déclinée ») ──
   Lecteur du bas, menu à 3 boutons, bandeau défilant ; sur le site, le mégaphone de l'accueil. */
html.mlk-th-ui .app-mini-player { background: var(--th-bande); } /* plus de halo « néon » ; couleur des cartes (Emmanuel, 21/10/2026) */
html.mlk-th-ui .app-nav-3 { background: var(--th-bande); }
/* Bas de l'appli : les boutons inactifs et le lecteur ne doivent pas éclaircir le bas (Emmanuel, 21/10/2026) :
   boutons dans la teinte sombre des cartouches, sans voile blanc ; plus de filet clair au-dessus du lecteur */
html.mlk-th-ui .app-nav3-btn:not(.active) { background: color-mix(in srgb, var(--th-bande) 55%, #000); border-color: color-mix(in srgb, var(--th-a) 18%, transparent); }
html.mlk-th-ui .app-mini-player { border-top-color: transparent; }
html.mlk-th-ui .app-mini-up { background: color-mix(in srgb, var(--th-bande) 55%, #000); }
html.mlk-th-ui:not(.mlk-th-jour) .app-nav3-btn:not(.active) :is(svg, span) { color: color-mix(in srgb, var(--th-a) 55%, #777); }
html.mlk-th-ui #mlk-ticker { --mlk-ticker-color: var(--th-titre); } /* site : sans fond (au-dessus du direct) */
html.mlk-th-ui #mlk-ticker-m { --mlk-ticker-bg: var(--th-bande); --mlk-ticker-color: var(--th-titre); }
html.mlk-th-ui body.mlk-app-page #mlk-ticker.app-mega { --mlk-ticker-bg: var(--th-bande); --mlk-ticker-color: var(--th-a); }
/* Bas de l'appli (mégaphone, lecteur, menu) : même mélange que les cartes quand le fond est décoré */
html.mlk-th-fond :is(.app-mini-player, .app-nav-3) { background: color-mix(in srgb, var(--th-bande-x, #1a1a1a) 90%, transparent); }
html.mlk-th-fond body.mlk-app-page #mlk-ticker.app-mega { --mlk-ticker-bg: color-mix(in srgb, var(--th-bande-x, #1a1a1a) 90%, transparent); }

/* Lecteur pleine page de l'appli teinté par le thème (Emmanuel, 21/10/2026) ; les roses de appli.css suivent
   déjà --th-a (var(--th-a, #D20658)) */
html.mlk-th-ui .app-full { background: linear-gradient(180deg, color-mix(in srgb, var(--th-a) 12%, var(--th-bande)) 0, var(--th-bande) 45%, color-mix(in srgb, var(--th-bande) 75%, #000) 100%); }
html.mlk-th-ui .app-full { background: linear-gradient(180deg, oklch(from var(--th-bande) calc(l + .06) calc(c * 1.6) h) 0, var(--th-bande) 45%, color-mix(in srgb, var(--th-bande) 75%, #000) 100%); }
html.mlk-th-ui :is(.app-action-bar, .app-hist-panel) { background: color-mix(in srgb, var(--th-bande) 78%, #000); }
html.mlk-th-ui .app-full :is(.app-ep-desc-row, .app-ep-desc, [class*="app-ep-desc"]) { background-color: var(--th-carte); }

/* Thème d'hiver (vacances de Noël et de février) : montagnes enneigées au bas du fond (Emmanuel, 21/10/2026) */
.mlk-th-montagne { left: 0; right: 0; bottom: 0; height: 26vh; background: linear-gradient(180deg, #eef4ff 0, #b9cbe6 22%, #4c6690 60%, #1c2a44 100%);
  clip-path: polygon(0 58%, 9% 34%, 17% 50%, 29% 12%, 41% 46%, 52% 26%, 64% 52%, 76% 8%, 88% 40%, 100% 22%, 100% 100%, 0 100%); opacity: .9; }
.mlk-th-montagne.loin { height: 34vh; opacity: .35; background: linear-gradient(180deg, #dfe9fb 0, #7f98c2 40%, #2a3d60 100%);
  clip-path: polygon(0 40%, 12% 18%, 22% 36%, 35% 4%, 47% 30%, 60% 14%, 72% 34%, 85% 6%, 100% 30%, 100% 100%, 0 100%); }