/* ============================================
   Radio MLK — décors de l'intro de l'appli selon le calendrier (21/10/2026), avec assets/appli/intro.js.
   Valable dans l'appli (.app-splash) et pour les aperçus de Gestion (.mlk-intro-apercu, même structure).
   Tailles en cqw / cqh : relatives à l'écran de démarrage.
   ============================================ */
.app-splash.mlk-intro { container-type: size; overflow: hidden; }
.app-splash.mlk-intro .app-splash-inner { position: relative; z-index: 3; }
.mlk-intro-deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.mlk-intro-deco.mlk-intro-devant { z-index: 4; }
.mlk-intro-note { position: absolute; left: 0; right: 0; bottom: 6cqh; text-align: center; font-size: 4cqw; letter-spacing: .12em; color: rgba(255,255,255,.75); z-index: 4; }
@keyframes mlk-intro-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ── Aperçus de Gestion : même écran que l'appli (375 × 812), réduit ── */
.mlk-intro-tel { width: 188px; height: 393px; border-radius: 22px; padding: 6px; background: #222; box-shadow: 0 0 0 1px #333, 0 8px 24px rgba(0,0,0,.45); overflow: hidden; }
.mlk-intro-ecran { position: relative; width: 375px; height: 812px; transform: scale(.4693); transform-origin: 0 0; border-radius: 34px; overflow: hidden; }
.mlk-intro-apercu { position: absolute; inset: 0; background: #111; display: flex; align-items: center; justify-content: center; }
.mlk-intro-apercu .app-splash-inner { text-align: center; padding: 0 24px; }
.mlk-intro-apercu .app-splash-logo { width: 220px; height: auto; display: block; margin: 0 auto 36px; }
.mlk-intro-apercu .app-splash-bars { display: flex; align-items: flex-end; justify-content: space-between; width: 220px; margin: 44px auto 0; height: 48px; }
.mlk-intro-apercu .app-splash-bars span { width: 6px; border-radius: 3px; background: #D20658; animation: mlk-intro-barre .75s ease-in-out infinite alternate; }
@keyframes mlk-intro-barre { from { height: 5px; } to { height: 46px; } }

/* ── Noël ── */
.mlk-intro-v-noel { background: radial-gradient(ellipse at 50% 120%, #2a0d1c 0, #111 60%); }
.mlk-intro-flocon { position: absolute; top: -6cqw; color: #fff; font-size: var(--s, 4cqw); opacity: .9; animation: mlk-intro-tombe var(--t, 5s) linear var(--r, 0s) infinite; }
@keyframes mlk-intro-tombe { to { transform: translate(var(--x, 4cqw), 110cqh) rotate(240deg); } }
.mlk-intro-v-noel .app-splash-bars span:nth-child(odd) { background: #fff; }
.mlk-intro-etoile { position: absolute; left: 50%; top: calc(50% - 58cqw); width: 12cqw; height: 12cqw; margin-left: -6cqw; background: #ffd34d;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: mlk-intro-scintille 1.2s ease-in-out infinite alternate; filter: drop-shadow(0 0 2cqw #ffd34d); }
@keyframes mlk-intro-scintille { from { transform: scale(.85) rotate(-8deg); opacity: .7; } to { transform: scale(1.1) rotate(8deg); opacity: 1; } }

/* ── Pleine lune ── */
.mlk-intro-v-lune { background: radial-gradient(ellipse at 50% 30%, #13203d 0, #0a0f1d 55%, #06080f 100%); }
.mlk-intro-lune { position: absolute; left: 50%; top: calc(50% - 30cqw); width: 54cqw; height: 54cqw; margin: -27cqw 0 0 -27cqw; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fffbe8 0, #f1e7c4 45%, #d9cda4 100%);
  box-shadow: 0 0 8cqw 2cqw rgba(255,244,200,.35), 0 0 25cqw 6cqw rgba(160,190,255,.15); opacity: .95; animation: mlk-intro-monte 1.4s ease-out both; }
.mlk-intro-lune::before, .mlk-intro-lune::after { content: ""; position: absolute; border-radius: 50%; background: rgba(160,145,100,.25); }
.mlk-intro-lune::before { width: 12cqw; height: 12cqw; left: 14cqw; top: 22cqw; }
.mlk-intro-lune::after { width: 7cqw; height: 7cqw; left: 32cqw; top: 12cqw; }
@keyframes mlk-intro-monte { from { transform: translateY(12cqw); opacity: 0; } to { transform: none; opacity: .95; } }
.mlk-intro-v-lune .app-splash-logo { filter: drop-shadow(0 0 2cqw rgba(0,0,0,.6)); }
.mlk-intro-v-lune .app-splash-bars span { background: #c9d6f2; }
.mlk-intro-astre { position: absolute; width: .9cqw; height: .9cqw; border-radius: 50%; background: #fff; animation: mlk-intro-brille var(--t, 2s) ease-in-out var(--r, 0s) infinite alternate; }
@keyframes mlk-intro-brille { from { opacity: .15; } to { opacity: 1; } }

/* ── Pâques ── */
.mlk-intro-v-paques { background: radial-gradient(ellipse at 50% 110%, #1f2a1a 0, #111 60%); }
.mlk-intro-v-paques .app-splash-bars span { width: 11px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; }
.mlk-intro-v-paques .app-splash-bars span:nth-child(5n+1) { background: #ff9ec7; }
.mlk-intro-v-paques .app-splash-bars span:nth-child(5n+2) { background: #ffe08a; }
.mlk-intro-v-paques .app-splash-bars span:nth-child(5n+3) { background: #9fe3c0; }
.mlk-intro-v-paques .app-splash-bars span:nth-child(5n+4) { background: #a9c8ff; }
.mlk-intro-oeuf { position: absolute; width: 7cqw; height: 9cqw; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; background: var(--c); animation: mlk-intro-saute 1.1s ease-in-out var(--r, 0s) infinite; box-shadow: inset -1cqw -1cqw 0 rgba(0,0,0,.12); }
.mlk-intro-oeuf::after { content: ""; position: absolute; left: 0; right: 0; top: 40%; height: 1.4cqw; background: repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 1.2cqw, transparent 1.2cqw 2.4cqw); }
@keyframes mlk-intro-saute { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-4cqw) rotate(6deg); } }
.mlk-intro-herbe { position: absolute; left: 0; right: 0; bottom: 0; height: 9cqh; background: repeating-linear-gradient(100deg, #2e6b2a 0 1.2cqw, #3d8a37 1.2cqw 2.2cqw);
  clip-path: polygon(0 40%, 4% 0, 8% 40%, 12% 5%, 16% 40%, 20% 0, 24% 40%, 28% 8%, 32% 40%, 36% 0, 40% 40%, 44% 6%, 48% 40%, 52% 0, 56% 40%, 60% 5%, 64% 40%, 68% 0, 72% 40%, 76% 8%, 80% 40%, 84% 0, 88% 40%, 92% 6%, 96% 40%, 100% 0, 100% 100%, 0 100%); }

/* ── Vacances (zone C) : coucher de soleil sur la mer, ou montagne sous la neige de novembre à mars ── */
.mlk-intro-v-vacances { background: linear-gradient(180deg, #2b0b2a 0, #6a1440 40%, #d6542b 72%, #f2a33a 100%); }
.mlk-intro-v-vacances:has(.mlk-intro-montagne) { background: linear-gradient(180deg, #0e1a33 0, #24406e 55%, #8fb3e0 100%); }
.mlk-intro-soleil { position: absolute; left: 50%; bottom: 14cqh; width: 66cqw; height: 66cqw; margin-left: -33cqw; border-radius: 50%; background: radial-gradient(circle, #ffe7a3 0, #ffb347 55%, #ff7a3c 100%); box-shadow: 0 0 12cqw rgba(255,180,90,.6); animation: mlk-intro-leve 1.6s ease-out both; }
@keyframes mlk-intro-leve { from { transform: translateY(30cqw); } to { transform: none; } }
.mlk-intro-mer { position: absolute; left: -10%; right: -10%; bottom: 0; height: 18cqh; background: #102a4a; }
.mlk-intro-vague { position: absolute; left: 0; width: 200%; height: 6cqw; top: -3cqw; background: radial-gradient(circle at 5cqw 6cqw, transparent 4.2cqw, #102a4a 4.4cqw) 0 0 / 10cqw 6cqw repeat-x; animation: mlk-intro-vague 3s linear infinite; }
.mlk-intro-vague.b { top: 2cqw; opacity: .6; animation-duration: 4.5s; background: radial-gradient(circle at 5cqw 6cqw, transparent 4.2cqw, #1d4a7a 4.4cqw) 0 0 / 10cqw 6cqw repeat-x; }
@keyframes mlk-intro-vague { to { transform: translateX(-50%); } }
.mlk-intro-montagne { position: absolute; left: 0; right: 0; bottom: 0; height: 30cqh; background: linear-gradient(180deg, #f4f8ff 0, #c8d8f0 30%, #6e8bb8 100%);
  clip-path: polygon(0 55%, 14% 25%, 24% 45%, 38% 5%, 52% 40%, 63% 20%, 78% 50%, 90% 15%, 100% 35%, 100% 100%, 0 100%); }
.mlk-intro-v-vacances .app-splash-bars span { background: #fff; }

/* ── Automne (Toussaint), printemps, jours fériés (version chill) — 21/10/2026 ── */
/* Toussaint : sobre, aux couleurs du thème d'automne (Emmanuel, 21/10/2026 : l'intro était « hyper flashy ») */
.mlk-intro-v-vacances.mlk-intro-v-automne { background: radial-gradient(ellipse at 50% 115%, #2a1c12 0, #16110d 55%, #0e0b09 100%); }
.mlk-intro-v-automne .app-splash-bars span:nth-child(3n+1) { background: #d8803a; } .mlk-intro-v-automne .app-splash-bars span:nth-child(3n+2) { background: #c9a46a; } .mlk-intro-v-automne .app-splash-bars span:nth-child(3n) { background: #9a5a32; }
.mlk-intro-v-printemps { background: radial-gradient(ellipse at 50% 110%, #2c3a1e 0, #141812 60%); }
.mlk-intro-v-printemps .app-splash-bars span:nth-child(odd) { background: #ff9ec7; } .mlk-intro-v-printemps .app-splash-bars span:nth-child(even) { background: #b9f0a0; }
.mlk-intro-feuille { position: absolute; top: -8cqw; font-size: var(--s, 7cqw); animation: mlk-intro-feuille var(--t, 6s) ease-in-out var(--r, 0s) infinite; }
@keyframes mlk-intro-feuille { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(var(--x, 8cqw), 28cqh) rotate(90deg); } 50% { transform: translate(0, 56cqh) rotate(160deg); } 75% { transform: translate(var(--x, 8cqw), 84cqh) rotate(250deg); } 100% { transform: translate(0, 115cqh) rotate(330deg); } }
.mlk-intro-v-ferie { background: linear-gradient(180deg, #0b1a19 0, #0f2624 60%, #12322f 100%); }
.mlk-intro-v-ferie .app-splash-bars span { background: #3fd0c9; animation-duration: 1.6s !important; }
.mlk-intro-bulle { position: absolute; bottom: -10cqw; width: var(--s, 6cqw); height: var(--s, 6cqw); border-radius: 50%; border: .3cqw 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-intro-bulle var(--t, 7s) ease-in-out var(--r, 0s) infinite; }
@keyframes mlk-intro-bulle { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(var(--x, 4cqw), -55cqh); } 100% { transform: translate(0, -115cqh); opacity: 0; } }

/* ── Halloween ── */
.mlk-intro-v-hallo { background: radial-gradient(ellipse at 50% 20%, #2a1338 0, #0d0711 65%); }
.mlk-intro-v-hallo .app-splash-bars span { background: #ff7a1a; }
.mlk-intro-chauve { position: absolute; font-size: var(--s, 7cqw); animation: mlk-intro-vole var(--t, 4s) ease-in-out var(--r, 0s) infinite; filter: brightness(0) drop-shadow(0 0 3px #b06cff); }
@keyframes mlk-intro-vole { 0% { transform: translate(-30cqw, 0) scale(.8); } 50% { transform: translate(55cqw, -10cqw) scale(1); } 100% { transform: translate(130cqw, 6cqw) scale(.8); } }
.mlk-intro-citrouille { position: absolute; left: 50%; bottom: 13cqh; margin-left: -9cqw; font-size: 18cqw; line-height: 1; animation: mlk-intro-lueur 1.4s ease-in-out infinite alternate; }
@keyframes mlk-intro-lueur { from { filter: drop-shadow(0 0 1cqw #ff7a1a); } to { filter: drop-shadow(0 0 5cqw #ff7a1a); } }

/* ── Fête de la musique ── */
.mlk-intro-v-musique .app-splash-bars { height: 84px; }
.mlk-intro-v-musique .app-splash-bars span { animation-name: mlk-intro-fort; }
@keyframes mlk-intro-fort { from { height: 6px; } to { height: 82px; } }
.mlk-intro-v-musique .app-splash-bars span:nth-child(7n+1) { background: #ff2e6f; }
.mlk-intro-v-musique .app-splash-bars span:nth-child(7n+2) { background: #ff8a00; }
.mlk-intro-v-musique .app-splash-bars span:nth-child(7n+3) { background: #ffd400; }
.mlk-intro-v-musique .app-splash-bars span:nth-child(7n+4) { background: #2ed47a; }
.mlk-intro-v-musique .app-splash-bars span:nth-child(7n+5) { background: #2ea8ff; }
.mlk-intro-v-musique .app-splash-bars span:nth-child(7n+6) { background: #7a5cff; }
.mlk-intro-v-musique .app-splash-bars span:nth-child(7n) { background: #ff5cd1; }
.mlk-intro-notevol { position: absolute; bottom: -8cqw; font-size: var(--s, 8cqw); color: var(--c, #fff); animation: mlk-intro-note var(--t, 3.5s) ease-in var(--r, 0s) infinite; }
@keyframes mlk-intro-note { 0% { transform: translate(0, 0) rotate(-10deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--x, 6cqw), -115cqh) rotate(15deg); opacity: 0; } }

/* ── Anniversaire de la radio ── */
.mlk-intro-v-anniv { background: radial-gradient(ellipse at 50% 40%, #2b0a19 0, #111 65%); }
.mlk-intro-confetti { position: absolute; top: -4cqw; width: 1.8cqw; height: 3cqw; background: var(--c); animation: mlk-intro-confetti var(--t, 3s) linear var(--r, 0s) infinite; }
@keyframes mlk-intro-confetti { to { transform: translate(var(--x, 5cqw), 110cqh) rotate(720deg); } }
.mlk-intro-age { font-family: "Londrina Solid", "MLK Londrina", "IBM Plex Sans Condensed", sans-serif; font-weight: 900; font-size: 13cqw; line-height: 1; color: #ffd34d; margin-bottom: 4cqw;
  animation: mlk-intro-pop .6s cubic-bezier(.2,1.6,.4,1) .3s both; text-shadow: 0 0 3cqw rgba(255,211,77,.5); }

/* ── Nouvel an ── */
.mlk-intro-v-an { background: radial-gradient(ellipse at 50% 100%, #1a0f2e 0, #07050c 70%); }
.mlk-intro-bouquet { position: absolute; width: 1.2cqw; height: 1.2cqw; left: var(--x); top: var(--y); }
.mlk-intro-bouquet i { position: absolute; left: 0; top: 0; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--c); animation: mlk-intro-eclat 1.6s ease-out var(--r, 0s) infinite; }
@keyframes mlk-intro-eclat { 0% { transform: rotate(var(--a)) translateX(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(var(--a)) translateX(16cqw) translateY(4cqw); opacity: 0; } }
.mlk-intro-annee { font-family: "Londrina Solid", "MLK Londrina", "IBM Plex Sans Condensed", sans-serif; font-weight: 900; font-size: 14cqw; line-height: 1; color: #fff; margin-bottom: 4cqw;
  animation: mlk-intro-pop .6s cubic-bezier(.2,1.6,.4,1) .2s both; }

/* Réduire les animations : le décor reste, immobile */
@media (prefers-reduced-motion: reduce) { .mlk-intro-deco *, .mlk-intro-haut * { animation: none !important; } }

/* ══ Toutes les intros raccordent au thème (Emmanuel, 21/10/2026) ══
   Mêmes couleurs que assets/site/theme.css (--th-a, --th-a2, --th-bande), recopiées ici parce que l'intro
   s'affiche aussi au niveau « intro » (sans le thème). Fond = la couleur des bandes avec une lueur de la couleur
   principale ; égaliseur aux deux couleurs du thème ; décors un peu estompés. */
.mlk-intro-v-hallo    { --ia: #ff7a1a; --ia2: #b06cff; --ib: #2c1838; }
.mlk-intro-v-anniv    { --ia: #D20658; --ia2: #ffd34d; --ib: #36182a; }
.mlk-intro-v-noel     { --ia: #D20658; --ia2: #ffd34d; --ib: #32181f; }
.mlk-intro-v-an       { --ia: #ffd34d; --ia2: #7ad7ff; --ib: #221a38; }
.mlk-intro-v-lune     { --ia: #c9d6f2; --ia2: #fff3c8; --ib: #18233e; }
.mlk-intro-v-paques   { --ia: #ff7aa8; --ia2: #9fe3c0; --ib: #22301e; }
.mlk-intro-v-ferie    { --ia: #3fd0c9; --ia2: #c8fff4; --ib: #143533; }
.mlk-intro-v-musique  { --ia: #ff2e6f; --ia2: #ffd400; --ib: #2a2228; }
.mlk-intro-v-vacances { --ia: #ff8a3c; --ia2: #2ec4d6; --ib: #3a1a2c; }
.mlk-intro-v-ete      { --ia: #ff8a3c; --ia2: #2ec4d6; --ib: #3a1a2c; }
.mlk-intro-v-hiver    { --ia: #8fb3e0; --ia2: #ffffff; --ib: #1a2a44; }
.mlk-intro-v-printemps { --ia: #ff7aa8; --ia2: #b9f0a0; --ib: #341f2b; }
.mlk-intro-v-automne  { --ia: #d8803a; --ia2: #e8c27a; --ib: #36271b; }
.mlk-intro.mlk-intro-th {
  background: radial-gradient(ellipse at 50% 108%, color-mix(in srgb, var(--ib) 80%, #fff) 0, var(--ib) 58%, color-mix(in srgb, var(--ib) 70%, #000) 100%);
  /* Lueur de la même teinte que le fond, plus claire et plus saturée : mêler la couleur principale (souvent
     opposée : orange sur violet, jaune sur violet) donnait un gris boueux, comme un voile (Emmanuel, 21/10/2026) */
  background: radial-gradient(ellipse at 50% 108%, oklch(from var(--ib) calc(l + .12) calc(c * 2) h) 0, oklch(from var(--ib) calc(l + .03) calc(c * 1.4) h) 50%, oklch(from var(--ib) calc(l - .05) c h) 100%);
}
.mlk-intro.mlk-intro-th .app-splash-bars span:nth-child(odd)  { background: var(--ia); }
.mlk-intro.mlk-intro-th .app-splash-bars span:nth-child(even) { background: var(--ia2); }
.mlk-intro.mlk-intro-th .mlk-intro-deco { opacity: 1; }
/* Été et Fête de la musique : version d'origine (pas de classe mlk-intro-th, voir appliquer() dans intro.js) */