@font-face{font-family:Fadoli;src:url('assets/fonts/Fadoli-DemiBold.ttf') format('truetype');font-display:swap;font-weight:600}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:140px}body{margin:0;background:#000;color:#fff;font-family:Fadoli,Arial,sans-serif;font-weight:600}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #7cf9e2;outline-offset:3px}.sticky-bands{position:sticky;top:0;z-index:9}.brand-band{height:40px;overflow:hidden}.brand-scroll{display:flex;width:max-content;animation:brand-marquee 100s linear infinite}.brand-group{display:flex;flex-shrink:0}.brand-group span{padding:0 12px;height:40px;display:flex;align-items:center;font-size:20px;white-space:nowrap}.seg-miondo{background:#42a761;color:#fee310}.seg-blue{background:#463dd2;color:#ec166e;font-style:italic}.seg-yellow{background:#ebb200;color:#3c5cb3;font-style:italic}.title-band{height:100px;overflow:hidden;background:#111b82}.title-scroll{display:flex;width:max-content;animation:title-marquee 42s linear infinite}.title-group{display:flex;flex-shrink:0}.banner-idle{height:100px;padding:0 16px;display:flex;align-items:center;font-size:50px;line-height:1;font-style:italic;white-space:nowrap}.blue{background:#111b82;color:#14d675}.bordeaux{background:#900c49;color:#45cc5d}.banner-live{display:none;height:100px}.banner-cover{width:100px;height:100px;object-fit:cover}.banner-artist,.banner-title{padding:0 16px;display:flex;align-items:center;font-size:50px;line-height:1;white-space:nowrap}.banner-artist{background:#111b82;color:#14d675}.banner-title{background:#900c49;color:#45cc5d;font-style:italic}.playing .banner-idle{display:none}.playing .banner-live{display:flex}@keyframes brand-marquee{from{transform:translateX(-50%)}to{transform:translateX(0)}}@keyframes title-marquee{to{transform:translateX(-50%)}}.on-air{height:42px;background:#000;display:flex;align-items:center;justify-content:center;gap:8px;font-size:26px;letter-spacing:1px}.air-dot{width:13px;height:13px;background:red;border-radius:50%;box-shadow:0 0 8px #ff5252;animation:blink 1.2s ease-in-out infinite}@keyframes blink{50%{opacity:.2}}.hero{position:relative;isolation:isolate;overflow:hidden;min-height:710px;--cover-size:clamp(220px,82vw,520px);background:#151928}.hero-background{position:absolute;inset:-70px;width:calc(100% + 140px);height:calc(100% + 140px);object-fit:cover;filter:blur(50px);z-index:-2}.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,#0003 40%,#000b 100%)}.hero-content{padding:30px 16px 22px;text-align:center}.hero-content>img{width:var(--cover-size);height:var(--cover-size);object-fit:cover;display:block;margin:0 auto}.hero h1{font-size:25px;color:white;line-height:1.1;margin:16px auto 6px;max-width:700px;font-weight:600;overflow-wrap:anywhere}.hero #title{font-size:25px;line-height:1.1;color:#ccff00;font-style:italic;margin:0 auto;max-width:700px;overflow-wrap:anywhere}.status{font:12px/1.4 Arial,sans-serif;color:#ccc;margin:10px auto 0;max-width:500px}.previous-heading{color:#3d5bb3;background:#ebb200;text-align:center;font-size:36px;letter-spacing:1px;padding:20px 10px;margin:0;font-weight:600}.history{background:#900c49;padding:10px 0;display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;min-height:200px}.history article{position:relative;flex:0 0 min(78vw,350px);aspect-ratio:1;scroll-snap-align:start;overflow:hidden;background:#151928}.history img{width:100%;height:100%;object-fit:cover;display:block}.history .history-caption{position:absolute;bottom:0;left:0;right:0;background:#0009;padding:8px 12px 10px}.history h3{font-size:18px;color:#fff;margin:0 0 2px;line-height:1.12;font-weight:600}.history p{font-size:18px;color:#ffffffb3;font-style:italic;margin:0;line-height:1.12}.history time{position:absolute;left:0;top:0;padding:2px 6px;color:#fee310;background:#900c49;font-size:20px}.history .empty{margin:auto;padding:25px;color:#ffffffb3}.thought{background:#151928;text-align:center;padding:30px 22px 24px;min-height:260px;position:relative}.thought h2{font-size:36px;line-height:1;color:#7cf9e2;letter-spacing:1px;margin:0 0 40px;font-weight:600}.thought blockquote{font-size:22px;line-height:1.25;color:#f8f08a;margin:0 auto;max-width:750px}.thought-next{background:transparent;color:#7cf9e2;font-size:20px;display:block;margin:16px auto 0}.programme{background:#2133c5}.programme>h2{background:#594ae9;color:#ebb200;text-align:center;font-size:36px;letter-spacing:1px;margin:0;padding:20px 10px 15px;font-weight:600}.days{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:16px}.days button{background:transparent;border:1px solid #ffffff55;color:white;padding:9px 15px}.days button[aria-selected=true]{color:#fee310;border-color:#fee310}#schedule{padding:10px 16px 14px;max-width:1000px;margin:auto}.schedule-row{margin-bottom:14px}.schedule-row .schedule-tags{display:flex;align-items:stretch}.schedule-row time{padding:7px 12px;background:red;color:black;font-size:18px;line-height:1;flex-shrink:0}.schedule-row h3{padding:6px 14px;margin:0;background:black;color:#ff0;font-size:20px;line-height:1;flex:1;font-weight:600}.schedule-row p{font-size:13px;font-style:italic;margin:6px 0 0;line-height:1.1}.programme[data-day="1"] .schedule-row time{background:#5ae895}.programme[data-day="2"] .schedule-row time{background:#c73fca}.programme[data-day="2"] .schedule-row h3{color:#5ae895}.live-tag{font:10px Arial,sans-serif;color:#7cf9e2;display:inline-block;margin-top:6px}.timezone{text-align:center;padding:0 0 16px;margin:0;font:11px Arial,sans-serif;color:#ffffffb3}footer{background:#000;padding:25px 16px 130px;display:flex;justify-content:center;gap:22px;align-items:center;flex-wrap:wrap;font-size:13px}.outline{background:transparent;color:inherit;border:1px solid #ffffff55;padding:10px 16px;font-size:13px}.player{position:fixed;left:0;right:0;bottom:0;z-index:10;height:calc(100px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#0bd407;color:#0030ff;display:flex;align-items:center;justify-content:center}.playing .player{background:#0113f9;color:#04ff00}.play{height:100px;width:110px;background:transparent;color:inherit;display:grid;place-items:center}.play svg{display:block;width:84px;height:84px;fill:currentColor}.player-info{position:absolute;left:12px;top:10px;color:white;font-size:13px}.player-info>span{display:block}.volume{display:flex;align-items:center;gap:10px;margin-top:12px;font:11px Arial,sans-serif}.volume input{width:100px;accent-color:#fff}.tool{background:transparent;color:inherit;padding:10px;font-size:20px}.player>.tool{position:absolute;right:6px;top:8px;color:white;font-size:26px}.skip{position:fixed;top:-100px;left:10px;z-index:30;background:#fee310;color:#000;padding:14px}.skip:focus{top:10px}dialog{background:#000;color:#fff;border:1px solid #7cf9e2;padding:28px;width:480px;max-width:calc(100% - 28px);max-height:85dvh}dialog::backdrop{background:#000b}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head h2{font-size:28px;color:#7cf9e2;margin:0}dialog h3{color:#fee310;margin:28px 0 10px}dialog p{font:14px/1.6 Arial,sans-serif;color:#cbd0e1}.timer-options{display:flex;gap:8px;flex-wrap:wrap}.timer-options button,.primary{background:#111b82;color:white;padding:12px 16px}dialog label{display:grid;gap:8px;font-size:13px;flex:1}dialog input{background:#151928;color:white;padding:11px;border:1px solid #8086a3;min-width:0;width:100%;color-scheme:dark}#custom-timer,#alarm-form{display:flex;align-items:end;gap:12px;margin:18px 0}.primary{min-height:42px}#settings-status{min-height:22px;color:#7cf9e2}[hidden]{display:none!important}@media(max-width:760px){.hero{min-height:calc(clamp(220px,82vw,520px) + 190px)}.volume{display:none}.days button{font-size:13px;padding:9px 11px}.schedule-row h3{font-size:18px;padding:7px 9px}.schedule-row time{font-size:16px;padding:8px 9px}dialog{padding:22px}.dialog-head h2{font-size:25px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.brand-scroll,.title-scroll,.air-dot{animation:none}.title-scroll{max-width:100%;overflow:auto}.banner-idle,.banner-artist,.banner-title{font-size:32px}}

/* Contrôle de volume dessiné pour Miondo. */
.desktop-brand,.previous-badge{display:none}
.volume-control{display:flex;align-items:center;gap:12px;color:#fee310;background:#111b82;border:1px solid #04ff00;padding:10px 14px;box-shadow:4px 4px 0 #000;max-width:calc(100vw - 32px)}
.volume-control .volume{margin:0;display:flex;flex-direction:column;align-items:stretch;gap:8px;font:600 11px Fadoli,Arial,sans-serif;color:#7cf9e2;letter-spacing:1px}
.mute{width:38px;height:38px;display:grid;place-items:center;background:#04ff00;color:#111b82;padding:8px;flex-shrink:0}
.mute svg{width:23px;height:23px}.mute-cross{display:none}.is-muted .sound-waves{display:none}.is-muted .mute-cross{display:block}
.volume-control input{--volume-fill:80%;appearance:none;-webkit-appearance:none;width:150px;height:8px;border:0;border-radius:0;background:linear-gradient(to right,#04ff00 0 var(--volume-fill),#463dd2 var(--volume-fill) 100%);cursor:pointer;outline-offset:8px;margin:0}
.volume-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:22px;border-radius:0;background:#fee310;border:2px solid #111b82;box-shadow:0 0 0 1px #fee310}
.volume-control input::-moz-range-thumb{width:11px;height:18px;border-radius:0;background:#fee310;border:2px solid #111b82;box-shadow:0 0 0 1px #fee310}
#volume-value{min-width:42px;font-size:20px;font-variant-numeric:tabular-nums;text-align:right}#volume-value span{font-size:11px;margin-left:1px}
@media(max-width:760px){.volume-control{display:none}}

/* Ordinateur : composition en mosaïque suivant la référence. */
@media(min-width:1000px){
 :root{--play-size:13.75vw;--brand-height:clamp(40px,3.22vw,70px);--title-height:clamp(150px,11.72vw,250px);--header-height:calc(var(--brand-height) + var(--title-height));--mosaic-height:clamp(500px,34.4vw,780px)}
 html{scroll-padding-top:var(--header-height)}
 .sticky-bands{margin-left:var(--play-size);height:var(--header-height)}
 .brand-band{display:none}
 .desktop-brand{display:grid;grid-template-columns:1.15fr 1fr;height:var(--brand-height);text-align:center;font-size:clamp(28px,2.45vw,54px);line-height:1}
 .desktop-brand span{display:grid;place-items:center;background:#42a761;color:#fee310}
 .desktop-brand span:first-child{background:#592b92;color:#db1823;font-style:italic}
 .title-band,.banner-idle,.banner-live{height:var(--title-height)}
 .banner-idle,.banner-artist,.banner-title{font-size:clamp(80px,8vw,175px);padding:0 25px;font-style:normal}
 .banner-cover{height:var(--title-height);width:var(--title-height)}
 .title-scroll{animation-duration:55s}
 main{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:'direct history' 'programme thought';align-items:start}
 #direct{grid-area:direct;position:relative;height:var(--mosaic-height);min-width:0}
 .on-air{position:absolute;top:0;left:0;width:var(--play-size);height:clamp(28px,1.86vw,42px);z-index:3;font-size:clamp(16px,1.25vw,28px);text-transform:uppercase}
 .hero{height:100%;min-height:0;--cover-size:20vw}
 .hero-content{padding:4.4vw 20px 24px}
 .hero-content>img{max-width:450px;max-height:450px}
 .hero h1{font-size:clamp(28px,2.4vw,50px);margin:2vw auto 4px;text-shadow:2px 3px #000;max-width:90%}
 .hero #title{font-size:clamp(28px,2.4vw,50px);text-shadow:2px 3px #000;font-style:normal;max-width:90%}
 .hero .status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 #historique{grid-area:history;min-width:0;height:var(--mosaic-height)}
 .previous-heading{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%)}
 .history{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0;padding:0;height:100%;min-height:0;overflow:hidden;scroll-snap-type:none}
 .history article{aspect-ratio:auto;min-width:0;min-height:0;height:100%}
 .history article:first-child{grid-row:1/3}
 .history article:nth-child(n+4){display:none}
 .history article>img{object-fit:cover}
 .history .history-caption{min-height:clamp(48px,3.4vw,76px);padding:8px 5px 9px;background:#0004;backdrop-filter:blur(12px);text-align:center}
 .history h3{font-size:clamp(13px,1vw,22px);line-height:1.2;text-shadow:1px 2px #000}
 .history p{font-size:clamp(12px,.9vw,20px);line-height:1.2;color:#ccff00;text-shadow:1px 2px #000}
 .history time{display:none}
 .previous-badge{position:absolute;top:0;left:0;display:flex;align-items:center;font-size:clamp(12px,1.2vw,26px);line-height:1;letter-spacing:-.5px;color:white}
 .previous-badge span{background:black;padding:4px 6px}
 .previous-badge strong{background:#ff0;color:black;padding:1px 2px;font-size:1.5em;line-height:1;font-weight:600}
 .history article:nth-child(2) .previous-badge strong{background:#ea00ff}
 .history article:nth-child(3) .previous-badge strong{background:#04ff00}
 #pensee{grid-area:thought;min-height:410px;padding:25px 40px 35px}
 .thought h2{font-size:clamp(36px,2.6vw,56px);margin-bottom:45px;font-weight:600}
 .thought blockquote{font-size:clamp(24px,1.7vw,36px)}
 #programme{grid-area:programme;min-width:0}
 .programme>h2{font-size:clamp(30px,2vw,42px)}
 .days{padding:16px 12px}.days button{font-size:14px;padding:9px 13px}
 .player{top:0;bottom:auto;width:var(--play-size);height:var(--header-height);padding:0;background:#0113f9;color:#04ff00;z-index:10}
 .playing .player{background:#0113f9;color:#04ff00}
 .play{width:100%;height:100%}.play svg{width:70%;height:70%;max-width:210px;max-height:210px}
 .player-info{position:fixed;top:auto;left:20px;bottom:20px;display:flex;flex-direction:column-reverse;gap:12px;align-items:flex-start}
 #timer-label:empty{display:none}
 #timer-label:not(:empty){background:#111b82;padding:8px 12px;border:1px solid #7cf9e2}
 .player>.tool{right:4px;top:2px;font-size:24px;opacity:.65}.player>.tool:hover{opacity:1}
 footer{padding:28px 20px 110px}
}
@media(min-width:1000px){
 .history article::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:multiply}
 .history article:first-child::after{background:#fbf58b80}
 .history article:nth-child(2)::after{background:#ee00bd60}
 .history article:nth-child(3)::after{background:#8ef5b650}
 .history .history-caption,.previous-badge{z-index:2}
}

/* En lecture : couleurs et bandeaux de la référence desktop. */
@keyframes live-title-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(min-width:1000px){
 .playing .desktop-brand{display:none}
 .playing .brand-band{display:block;height:var(--brand-height)}
 .playing .brand-group span{height:var(--brand-height);font-size:clamp(28px,2.45vw,54px);padding:0 6vw}
 .playing .brand-group .seg-miondo{min-width:50vw;justify-content:center}
 .playing .brand-group .seg-blue,.playing .brand-group .seg-yellow{min-width:35vw;justify-content:center}
 .playing .title-scroll{animation-name:live-title-marquee}
 .playing .banner-artist{background:#198309;color:#fee310;font-style:normal;padding:0 3.5vw}
 .playing .banner-title{background:#111b82;color:#45cc5d;font-style:italic;padding:0 3.5vw}
 .playing .play svg rect{rx:2.5px}
}

/* Blocs alignés et volume attaché sous le bandeau on air. */
@media(min-width:1000px){
 :root{--on-air-height:clamp(36px,1.86vw,52px)}
 main{align-items:stretch}
 #pensee,#programme{align-self:stretch}
 .on-air{position:fixed;top:var(--header-height);left:0;width:var(--play-size);height:var(--on-air-height);z-index:11}
 .player-info{top:calc(var(--header-height) + var(--on-air-height));left:0;bottom:auto;width:var(--play-size);gap:0;flex-direction:column;align-items:stretch}
 .volume-control{width:100%;max-width:none;height:var(--on-air-height);padding:5px clamp(6px,.7vw,14px);border:0;box-shadow:none;display:grid;grid-template-columns:calc(var(--on-air-height) - 10px) minmax(0,1fr) auto;gap:clamp(5px,.5vw,10px)}
 .volume-control .mute{width:calc(var(--on-air-height) - 10px);height:calc(var(--on-air-height) - 10px);padding:4px}
 .volume-control .mute svg{width:100%;height:100%}
 .volume-control .volume{min-width:0;gap:4px;font-size:clamp(9px,.7vw,14px);letter-spacing:.5px}
 .volume-control input{width:100%;height:6px}
 .volume-control input::-webkit-slider-thumb{width:11px;height:16px}
 .volume-control input::-moz-range-thumb{width:7px;height:12px}
 #volume-value{min-width:0;font-size:clamp(14px,1.15vw,24px)}
 #volume-value span{font-size:clamp(8px,.65vw,12px)}
 #timer-label:not(:empty){position:absolute;top:calc(var(--on-air-height) + 6px);left:6px}
}

/* La pensée occupe l’espace restant ; le texte est mesuré par app.js. */
.thought{display:flex;flex-direction:column}
.thought h2{flex-shrink:0;margin-bottom:24px}
.quote-space{position:relative;flex:1;min-height:180px}
.thought blockquote{position:absolute;inset:0;max-width:none;margin:0;display:flex;align-items:center;justify-content:center;line-height:1.06}
#quote-text{display:block;width:100%;overflow-wrap:anywhere;text-align:center}
@media(min-width:1000px){.quote-space{min-height:0}}
