/* rblsdf.css for rblsdf | (c) Flo Info 38 | https://www.floinfo38.fr */
@import url("../css/fi38-form.css");
@font-face{font-family:'MiSans';font-display:swap;src:url(../fonte/MiSansLatin-Demibold.woff2) format("woff2")}
@font-face{font-family:'awesome';font-display:swap;src:url(../fonte/awesome.woff2) format("woff2")}
:root{--font-main:"MiSans",Arial,sans-serif;--color-primary:#e4e6eb;--color-secondary:#6399fb;--bg-color:#242526;--footer-bg:#18191a;--button-bg:#333;--button-hover-bg:#444;--form-bg:#45494c;--color-link-hover:#4a82e6;--volume-bar-bg:#f0f0f0;--volume-bar-fill:var(--color-secondary);--snow-size:10px;--volume-value:1;scrollbar-color:var(--color-secondary) var(--button-bg);scrollbar-width:thin}
:focus-visible{outline:3px solid var(--color-secondary);outline-offset:4px}
*, *::before, *::after{box-sizing:content-box}
.light-mode{--color-primary:#1b1914;--color-secondary:#17384d;--bg-color:#dbdad9;--footer-bg:#ccc;--button-bg:#ccc;--button-hover-bg:#bbb;--color-link-hover:#2a4f66}

/* Base */
body{background-color:var(--bg-color);color:var(--color-primary);font-family:var(--font-main);font-size:16px;margin:0}
section{margin:20px auto!important;max-width:1080px;overflow:clip;padding:20px}
main{margin:0px auto!important;max-width:1080px;overflow:clip;padding:10px 20px;text-align:center}
footer{background-color:var(--footer-bg);padding:10px 20px;overflow:clip;text-align:center}
a{color:var(--color-secondary)}
a:hover{color:var(--color-link-hover)}
button{background-color:var(--button-bg);border:none;border-radius:12px;color:var(--color-secondary);cursor:pointer;font-family:inherit;font-size:inherit;padding:12px 24px;transition:background-color 0.3s}
button:hover{background-color:var(--button-hover-bg)}
h1,h2,h3,h4,h5,h6{color:var(--color-secondary);font-weight:400;margin:15px 0}

/* Awesome */
.fas{font-family:"awesome"!important;font-style:normal;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}
.fa-spin{animation-delay:var(--fa-animation-delay, 0s);animation-direction:var(--fa-animation-direction, normal);animation-duration:var(--fa-animation-duration, 2s);animation-iteration-count:var(--fa-animation-iteration-count, infinite);animation-name:fa-spin;animation-timing-function:var(--fa-animation-timing, linear);display:inline-block}
.fa-backward:before{content:"\f008"}
.fa-exclamation-triangle:before{content:"\f009"}
.fa-forward:before{content:"\f00a"}
.fa-rotate-right:before{content:"\f00b"}
.fa-spinner:before{content:"\f00c"}
.fa-stop:before{content:"\f00d"}
.fa-volume-high:before{content:"\f00e"}
.fa-volume-xmark:before{content:"\f00f"}
.fa-radio:before{content:"\f010"}
.fa-xmark:before{content:"\f011"}
.fa-check:before{content:"\f012"}
.fa-play:before{content:"\f013"}
.fa-pause:before{content:"\f014"}
.fa-music:before{content:"\f015"}
.fa-mobile-screen:before{content:"\f016"}
.fa-sun:before{color:#b8860b;content:"\f017"}
.fa-moon:before{color:#e6e3d8;content:"\f018"}
@keyframes fa-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Error-message */
.msg-error{background:#f2dede;border-radius:12px;color:#a83f41;font-family:inherit;font-size:inherit;left:50%;padding:12px 24px;position:fixed;top:20px;transform:translateX(-50%);z-index:10000}

/* Theme-toogle */
.theme-toggle{align-items:center;background-color:var(--color-primary);display:flex;font-size:20px;height:40px;justify-content:center;opacity:1;padding:0;position:fixed;right:20px;top:20px;width:40px;z-index:9999}
.theme-toggle:hover{background-color:var(--color-primary);opacity:.8}

/* Winter */
#snow{height:100vh;left:0;overflow:hidden;pointer-events:none;position:fixed;top:0;width:100vw;z-index:1000}
.snowflake{animation:var(--animation, fall) var(--duration, 12s) linear infinite;animation-delay:var(--delay, 0s);height:var(--snow-size);left:var(--x, 0vw);opacity:var(--opacity, 0.5);position:absolute;top:-10vh;transform:scale(var(--scale, 1)) translate3d(0,0,0);width:var(--snow-size);will-change:transform}
.snowflake::before{background-image:url('/img/flocon.webp');background-repeat:no-repeat;background-size:contain;content:'';display:block;height:var(--snow-size);width:var(--snow-size)}
@keyframes fall{to{transform:scale(var(--scale, 1)) translate3d(0,110vh,0)}}
@keyframes swirl{to{transform:scale(var(--scale, 1)) translate3d(var(--drift, 0vw),110vh,0)}}
#tree{left:4vw;opacity:50%;position:fixed;top:40vh;z-index:-1}
#boule{opacity:50%;position:fixed;right:4vw;top:40vh;z-index:-1}

/* Install-button */
#installSection{display:none;flex-direction:row;margin-top:-20px;justify-content:center}
#installBtn{align-items:center;display:flex;flex-direction:row;gap:6px;justify-content:center}

/* Poste */
#poste{float:right;margin:0 40px;width:152px}
#time{color:var(--color-secondary);font-size:14px;text-align:center;margin-top:5px}

/* Texte - Logo */
#texte-logo{margin:25px 0 50px}
#logo-container{align-items:center;display:flex;flex-direction:row;gap:15px;justify-content:flex-start;margin-top:5px}
#logo{animation:logo-appear 4s ease infinite;border-radius:12px;display:none;height:50px;width:50px;will-change:transform,opacity}
#listen{font-size:24px;min-width:0}
.light-mode #listen{color:#c30000!important}
@keyframes logo-appear{0%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}100%{transform:scale(.8)}}

/* Player */
#custom-player{align-items:center;background-color:var(--button-bg);border-radius:12px;cursor:default;display:inline-flex;flex-direction:row;gap:14px;height:30px;justify-content:center;margin-bottom:60px;overflow:hidden;padding:10px 14px}
#custom-player:hover{background-color:var(--button-hover-bg)}
#stop-button{align-items:center;color:var(--color-secondary);cursor:pointer;display:flex;font-size:20px;justify-content:center;transition:transform 0.2s;width:20px}
#stop-button:hover{transform:scale(1.15)}
#live-indicator{align-items:center;color:var(--color-secondary);display:flex;font-size:13px;font-weight:600;gap:6px;justify-content:center;letter-spacing:0.5px}
.live-dot{animation:live-pulse 1.5s ease-in-out infinite;background-color:#ff4949;border-radius:12px;height:8px;width:8px;will-change:transform,opacity}
#refresh-button{align-items:center;color:var(--color-secondary);cursor:pointer;display:flex;font-size:18px;justify-content:center;transition:transform 0.3s;width:18px}
#refresh-button:hover{transform:rotate(180deg)}
#volume-control{align-items:center;appearance:none;background:linear-gradient(to right, var(--volume-bar-fill) 0%, var(--volume-bar-fill) calc(var(--volume-value) * 100%), var(--volume-bar-bg) calc(var(--volume-value) * 100%), var(--volume-bar-bg) 100%);border-radius:12px;cursor:pointer;display:flex;height:7px;justify-content:center;width:100px;-webkit-appearance:none}
#volume-control::-moz-range-thumb{align-items:center;appearance:none;background-color:var(--volume-bar-fill);border:0;border-radius:12px;display:flex;height:17px;justify-content:center;width:17px}
#volume-control::-webkit-slider-thumb{align-items:center;appearance:none;background-color:var(--volume-bar-fill);border:0;border-radius:12px;display:flex;height:17px;justify-content:center;width:17px}
#volume-control::-ms-thumb{align-items:center;appearance:none;background-color:var(--volume-bar-fill);border:0;border-radius:12px;display:flex;height:17px;justify-content:center;width:17px}
#volume-toggle-button{align-items:center;color:var(--color-secondary);cursor:pointer;display:flex;font-size:24px;justify-content:center;width:30px}
#stop-button,#refresh-button,#volume-toggle-button,#live-indicator{flex-shrink:0}
@keyframes live-pulse{0%, 100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.9)}}

/* Section - Radioselection */
.collapsible{align-items:center;background-color:var(--button-bg);border-radius:12px;cursor:pointer;display:flex;flex-direction:row;font-size:19px;gap:10px;justify-content:flex-start;margin:15px auto 50px;padding:14px}
.collapsible:hover{background-color:var(--button-hover-bg)}
.radio{height:24px;width:24px}
.content{animation:content-fade-in 1500ms ease;display:none;margin:50px auto;min-height:250px}
.entire-content{margin:0 auto;padding-top:90px;perspective:1200px;width:200px}
.content-carrousel{display:flex;justify-content:center;transform-style:preserve-3d}
.content-carrousel img{border-radius:12px;height:54px;width:54px}
.content-carrousel img:hover{transform:scale(1.15);transition:all 200ms}
.item{border-radius:12px;cursor:pointer;margin:auto;position:absolute;text-align:center}
.item figcaption{font-size:11px;margin:6px auto 0;width:100px}
.prev-button,.next-button{align-items:center;background-color:var(--button-bg);border:none;border-radius:12px;color:var(--color-secondary);cursor:pointer;display:flex;font-size:20px;height:48px;justify-content:center;padding:0;position:absolute;top:0%;width:48px}
.prev-button:hover,.next-button:hover{background-color:var(--button-hover-bg);transform:scale(1.2);transition:all 300ms}
.prev-button{left:10px}
.next-button{right:10px}
@keyframes content-fade-in{0%{opacity:0;transform:scale(0)}100%{transform:scale(1)}}

/* Main form-popup */
.form-popup{align-items:center;display:none;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:9999}
.form-popup-content{background-color:rgba(36,37,38,0.85);background-color:color-mix(in srgb, var(--bg-color) 80%, transparent);border-radius:12px;height:95vh;max-height:95vh;max-width:95vw;overflow:auto;padding:20px;position:relative;scrollbar-width:thin;width:95vw}
.form-close-popup{align-items:center;background-color:var(--button-bg);border:none;border-radius:12px;cursor:pointer;display:flex;height:40px;justify-content:center;padding:0;position:absolute;right:20px;top:20px;width:40px;z-index:20000}
.form-close-popup:hover{background-color:var(--button-hover-bg)}
.fi38-form{background-color:#f0f0f0;margin:50px auto 30px!important}

/* Global */
button,.item,#stop-button,#refresh-button,#volume-toggle-button,.collapsible{touch-action:manipulation}

/* Other CSS */
#user-info{color:var(--color-primary);margin:-20px auto 50px;text-align:center}
#user-info a{color:var(--color-secondary)}
#radioForm{margin:30px 0px}
#action{border:2px solid silver;border-radius:12px;color:#800000;font-family:inherit;font-size:15px;margin:2px 0px 20px;padding:10px;transition:border-color 0.3s}
#nom,#url,#img_url{border:2px solid silver;border-radius:12px;color:#800000;font-family:inherit;font-size:15px;margin:2px 0px 20px;max-width:480px;padding:10px;transition:border-color 0.3s;width:100%}
#action:focus,#nom:focus,#url:focus,#img_url:focus{border:2px solid #5b9bd5;outline:none}
#message{font-style:italic;padding:0px;margin:15px 0px 0px}
.error{color:#ff4949}
.success{color:#6399fb}

/* Media screen */
@media screen and (max-width:768px){
#footerText{display:block!important}
#tree{left:50%;top:50%;transform:translate(-50%, -50%)}
#boule{display:none}
}
@media screen and (max-width:661px){
#poste{float:none;margin:0px auto 60px}
#custom-player{margin-top:0px}
h2{font-size:18px!important}
}
@media screen and (max-width:360px){
h2{font-size:15px!important}
#volume-control{display:none}
#live-indicator{font-size:11px;min-width:50px}
.live-dot{height:6px;width:6px}
}