/* ===== Base / commun ===== */

/* #region Body / Background */

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Ubuntu Mono', monospace;
    background: rgba(167,186,214);
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Page Frame */
#page-frame {
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(85, 3, 100, 0);
    box-sizing: border-box;
    overflow: hidden;
    padding-bottom: 65px;
}

#page-frame-inner {
    width: 100%;
    height: 100%;
    padding: 0px;
    box-sizing: border-box;
}

.menu-content {
    flex-shrink: 0;
    background: rgb(199, 227, 255);
    color: black;
    width: 100%;
    box-sizing: border-box;
    border-top: none;
    border-left: 0px solid #fff;
    border-bottom: 0px solid transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.1)
    ) 1;
    height: auto; /* hauteur de la zone grise */
    display: flex;
    align-items: center;
    padding: 10px 10px;
    gap: 20px;
    z-index: 5000;


    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* pour Safari */

}

/* Contenu principal de la fenêtre */
.window-content {
    flex-shrink: 0;
    background: #efefff42;
    color: black;
    width: 100%;
    box-sizing: border-box;
    border-top: none;
    border-left: 0px solid #fff;
    border-right: 0px solid #808080;
    border-bottom: 2px solid #808080;
    height: auto; /* hauteur de la zone grise */
    display: flex;
    align-items: center;
    padding: 10px 10px;
    gap: 20px;
}


.background-flex {
    position: relative;
    width: 100%;
    height: 100vh; /* plein écran */
    overflow: hidden;
}

.background-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* #endregion */

/* #region Header Bleu */
.window-header {
    background: linear-gradient(to bottom, #43438c 0%, #4a4aff 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 24px;
    padding: 4px;
    box-shadow: inset 1px 1px #8080ff, inset -1px -1px #8080ff;
    width: 100%;
    box-sizing: border-box;
   
}

.window-title {
    font-size: 12px;
}

.window-controls {
    display: flex;
    gap: 2px;
}

/* #endregion*/

#top-menu {
    display: flex;
    gap: 4px;
    padding: 0px;
    background: rgb(214, 231, 249); 
    border-top: 2px solid #fff;
    border-bottom: 2px solid rgb(191, 220, 250);
}

#top-menu .onglet-btn {
    padding: 3px 12px;
    font-size: 14px;
}
.menu-btn {
    background: transparent; /* pas de fond par défaut */
    border: none;            /* pas de bordure par défaut */
    padding: 6px;
    cursor: pointer;
    font-family: 'Ubuntu Mono', monospace;
    color: rgb(97, 107, 122);
    height: 95%;
}

/* SURVOL → adopte le style .onglet-btn */
.menu-btn:hover {
    background: rgb(199, 227, 255);
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    padding: 5px; /* compensation de la bordure : 6 - 1 */
}

/* CLIC → adopte le style .onglet-btn:active */
.menu-btn:active {
    background: rgb(199, 227, 255);
    border: 1px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 5px;
}
/* #region Design Boutons */
.window-btn {
    width: 15px;
    height: 15px;
    background: rgba(167,186,214);
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    font-size: 12px;
    line-height: 18px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    color: black;
}

.window-btn:active {
    border-color: #808080 #fff #fff #808080;
}

.retro-btn {
    background: rgb(167, 186, 214);
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    cursor: pointer;
    width: 30px;
    height: 30px;
}

.retro-btn img {
    width: 100%;           /* prend toute la largeur du bouton */
    height: 100%;          /* prend toute la hauteur */
    object-fit: contain;   /* garde les proportions de l'image */
}

.retro-btn:active,
.window-btn:active {
    border-color: #808080 #fff #fff #808080;
}

.retro-btn.active,
.window-btn.active,
#play-btn.active, .onglet-btn.active {
    border-color: #808080 #fff #fff #808080;
    box-shadow: inset 1px 1px #00000000, inset -1px -1px #fff;


}

.retro-btn-small {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    font-family: "MS Sans Serif", sans-serif;
    font-size: 12px;
    padding: 2px 6px;
    cursor: pointer;
    color: black;
    white-space: nowrap; /* évite les retours à la ligne */
}

.retro-btn-small:active {
    border-color: #808080 #fff #fff #808080;
    background: #b0b0b0;
    transform: translate(1px, 1px);
}
/* #endregion*/

/* Timer */
#time-display {
    background: transparent;   
    border: none;             
    font-family: 'Ubuntu Mono', monospace; 
    font-size: 22px;         
    color: black;            
    width: 60px;             
    text-align: center;      
    padding: 0 4px;
}

/* #region Player radio */
#radio-player {
    display: flex;
    align-items: center;
    gap: 10px;


  
}

#cover-art {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border: 2px solid #808080;
    border-color: #fff #808080 #808080 #fff;
    background: rgba(167,186,214);
    object-fit: cover;
}

#play-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background: rgba(167,186,214);
    border: 2px solid #808080;
    border-color: #fff #808080 #808080 #fff;
    cursor: pointer;
    padding: 2px;
}

#play-btn img {
    width: 75%;
    height: 75%;
    object-fit: contain;
}

.track-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.track-info-line {
    display: flex;
    align-items: center;
    gap: 6px;       /* espace entre label et box */
    font-size: 13px;
    margin-bottom: 4px;
}

.track-info-line .label {
    display: inline-block;
    width: 60px;       /* largeur fixe pour aligner */
    text-align: right; /* labels alignés à droite */
    padding-right: 4px;
    flex-shrink: 0;
    font-weight: bold;
}

.title-box, .artist-box {
    display: block;
    width: 150px;
    white-space: nowrap;
    overflow-x: hidden;
    background: #ffffff;
    border: 1px solid #808080;
    padding: 2px 6px;
    box-shadow: inset 1px 1px #000, inset -1px -1px #fff;
    font-family: 'Ubuntu Mono', monospace;
    font-size: 12px;
}

/* Animation */
@keyframes scroll {
    0%   { left: 100%; }
    10%  { left: 0; }    /* laisse le début visible quelques instants */
    90%  { left: -100%; } /* défile jusqu’à la fin */
    100% { left: -100%; }
}


.playlist-line {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #929191;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-end;  
}
/* #endregion */

/* #region Bottom bar */
.bottom-right {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: rgba(199,227,255);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    z-index: 50;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: inset 1px 1px #fff, inset -1px -1px #808080;
    padding: 0 8px;
    gap:3px;

}

/* #endregion */

/* Podcasts, oscilloscope — base styles */
#podcast-list, .oscilloscope-screen {
    box-sizing: border-box;
}

/* #region Popup historique */
#history-window {
    width: 300px;  /* largeur */
    height: auto; /* hauteur */
    max-width: 90%; /* responsive */
}

#historique {
    display: flex;
    flex-direction: column; /* une track par ligne */
    height: 100%;           /* prend toute la hauteur du parent */
    width: 100%;            /* prend toute la largeur du parent */
    box-sizing: border-box; /* inclut padding dans la taille */
    overflow-y: auto;       /* scroll si le contenu dépasse */
}


#historique .track {
    display: flex;
    align-items: center;
    justify-content: space-between; /* gauche / droite */
    margin-bottom: 6px;
    font-size: 12px;
}

#historique .track-left {
    display: flex;
    align-items: center;
}

#historique .track-left img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 1px solid #808080;
    margin-right: 8px;
}

#historique .track-info {
    display: flex;
    flex-direction: column; /* titre au-dessus de l’artiste */
}

.track-info .title {
    font-weight: bold;
    font-size: 13px;
}

.track-info .artist {
    font-size: 11px;
    color: #555;
}

.track .minutes-ago {
    font-size: 11px;
    color: #929191;
    white-space: nowrap;
    justify-content: end;
}
/* #endregion */


/* #region Planning */
.window-popup {
    display: none;
    position: fixed;
    top: 50%; /* centrée verticalement */
    left: 50%; /* centrée horizontalement */
    transform: translate(-50%, -50%);
    background: rgba(128,152,176);
    
    width: auto;
    max-width: max-content;
    z-index: 999;
    background: none;
    cursor: default;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* pour Safari */



}

/* Curseur main sur l’en-tête pour le drag */
.window-popup .window-header {
    cursor: move;
}

.popup-content {
    height: auto;
    padding: 4px;
    border: 2px solid #cdcdcd;
}

#planning-window {
    width: 70%; /* au lieu de 80% */
    max-width: 650px; /* limite la largeur totale */
}

/* Conteneur des jours */
#planning-container {
    max-height: 100%;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* colonnes plus souples */
    gap: 4px;
    background: #d01a1a00;
    border: 2px solid #c0040400;
    text-align: center;
    font-size: 11px;
}

/* Colonne d’un jour */
.day-column {
    background: #01ff4900;
    border: 2px solid #089c4100;
    padding: 4px;
    box-shadow: inset 1px 1px #fff, inset -1px -1px #808080;
    font-family: 'Ubuntu Mono', monospace;
    word-wrap: break-word; /* coupe les titres longs */
    overflow-wrap: break-word;
}

/* Titre du jour */
.day-title {
    background: #000080;
    color: white;
    padding: 3px 4px;
    font-weight: bold;
    margin-bottom: 3px;
    font-size: 11.5px;
    white-space: nowrap; /* reste sur une seule ligne */
}

/* Chaque émission */
.show {
    background: rgba(167,186,214);
    border: 1px solid #808080;
    margin-bottom: 3px;
    padding: 3px;
    text-align: left;
    font-size: 10.5px;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Heure d’émission */
.show-time {
    font-weight: bold;
    color: #000;
    font-size: 10.5px;
}

/* Titre d’émission */
.show-title {
    display: inline-block;
    margin-left: 3px;
    max-width: 100%;
    white-space: normal; /* autorise retour à la ligne */
}

/* #endregion */

/* #region Crashscreen / power sequence */
#power-sequence {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  display: none;
  z-index: 9999;
  overflow: hidden;
}

/* Texte du boot BIOS */
#power-sequence .boot-text {
  position: absolute;
  top: 10%;
  left: 5%;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 12px;
  white-space: pre;
  z-index: 2; /* au-dessus du scan */
}

/* Effet CRT : lignes horizontales (pendant que l’écran est ON) */
#power-sequence .crt-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(255, 255, 255, 0.05) 50%,
    rgba(0, 0, 0, 0.2) 50%
  );
  background-size: 100% 2px;
  animation: crtScan 0.1s linear infinite;
  pointer-events: none;
  z-index: 1;
  transform-origin: center;
  opacity: 0.8;
}

/* Animation "écran éteint" (OFF) */
@keyframes crtOff {
  0% {
    opacity: 1;
    transform: scaleY(1);
    background: radial-gradient(circle at center, rgba(255,255,255,0.8), rgba(0,0,0,0.5) 90%);
  }
  50% {
    opacity: 1;
    transform: scaleY(0.05);
    background: rgba(255,255,255,0.9);
  }
  100% {
    opacity: 0;
    transform: scaleY(0);
    background: black;
  }
}

/* Animation "scan CRT" (ON) */
@keyframes crtScan {
  0% { opacity: 0.8; }
  50% { opacity: 0.3; }
  100% { opacity: 0.8; }
}

/* Overlay supérieur (glow/fondu) */
#crt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: none;
  pointer-events: none;
}

/* #endregion */

/* #region Popup A propos */
#apropos-window {
    width: 300px;  /* largeur */
    height: 300px; /* hauteur */
    max-width: 90%; /* responsive */
}
/* #endregion */

/* #region Popup Mentions legales */
#legacy-window {
    width: 300px;  /* largeur */
    height: 500px; /* hauteur */
    max-width: 90%; /* responsive */

}

#legacy-container{
    height: 500px; /* hauteur */
    overflow-y: auto;        /* active le scroll vertical */
    padding-right: 10px;
}
/* #endregion */

/* ===== Desktop spécifique ===== */

/* #region Barre en haut */

:root {
  --chat-width: 260px;
  --chat-height: 40vh;  /* hauteur visible des messages */
}

#player-controls {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* En haut à droite */
#planning-control {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    z-index: 50;
    gap:6px ;
    padding: 0 8px;
}

/* #endregion */

/* #region bottom */
.onglet-btn {
    transform-origin: center center;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    height:95%;
    background: rgb(199,227,255);
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    padding: 6px;
    cursor: pointer;
    font-family: 'Ubuntu Mono', monospace;
    color : rgb(97, 107, 122);
}

.onglet-btn:active {
    border-color: #808080 #fff #fff #808080;
}

#clock-container {
    display: flex;
    background: rgb(199,227,255);           /* couleur rétro gris */
    border: 1px solid;     /* bordure style Windows 95 */
    border-color: #808080 #fff #fff #808080;
    font-family: 'Ubuntu Mono', monospace;
    font-size: 14px;
    color : rgb(97, 107, 122);
    width: 60px;                   
    height:80%;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-left: auto;
}

/* #endregion */

/* #region Logo */
.oscilloscope-screen {
    position: relative;
    padding: 4px;
    left: 8px;
    width: 200px;
    background: rgb(157, 190, 240);
    border: 2px solid rgb(98, 161, 255);
    box-shadow: inset 0 0 5px rgb(98, 161, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Courier New', monospace;
}

#logo-3d {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transform-style: preserve-3d;
    transition: transform 10s;
    z-index: 50;
}

#logo-3d.rotate {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

.oscilloscope-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(98, 161, 255, 0.1), rgba(98, 161, 255,0.05));
    animation: scan 3s linear infinite;
}

@keyframes scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}
/* #endregion */

/* #region Popups */


#planning-window {
    height: auto;
}

#podcast-detail {
    display: none;
}

/* Popup historique */
#historique {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* #endregion */ 

/* #region ====== CHAT : fenêtre d'affichage ====== */


#chat-window {
  display: flex;
  flex-direction: column;
  left: 12%;
  top: 70%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;  
  z-index: 1200;
  background: #ffffff00;

  /* Effet de flou du fond derrière la popup */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* pour Safari */
}

#chat-window .window-content {
  flex: 1 1 0;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: stretch;  /* ← IMPORTANT : occupe toute la largeur */
  background: #efefff42;
  color: #e1e1e1;
  font-family: 'Ubuntu Mono', monospace;
  box-sizing: border-box;
  padding: 4px;
}

#chat-messages {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* si tu veux l’effet “terminal” */
  flex: 1 1 0;
  overflow-y: auto;
  list-style: none;
  font-family: 'Ubuntu Mono', monospace;
  margin: 0;
  padding: 0;
  width: 100%;               /* pour être vraiment full largeur */
}


/* Une ligne de message */
#chat-messages li {
  margin-bottom: 2px;
  padding: 0 2px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: #ffffff;
  font-family: 'Ubuntu Mono', monospace;
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}



#chat-content{
  display: flex;
  flex-direction: column;
}

#chat-form {
  display: flex;
  gap: 8px;
}

#chat-input {
  flex: 1;
  padding: 4px;
  border: 1px solid #808080;
  font-family: 'Ubuntu Mono', monospace;
}

#chat-send {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  font-family: 'Pixelify Sans', sans-serif;
  cursor: pointer;
  padding: 4px 10px;
  width: auto;
  height: auto;
  white-space: nowrap;
}

/* #endregion */


/* Timer */

#timer-button {
  width: 80px;
  height: 50px;
  border-radius: 50%;
  background: #d0d0d0;
  border: 2px solid #a0a0a0;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4),
              inset -2px -2px 5px rgba(255,255,255,0.7);
  display: flex;
  flex-direction: column;      /* colonne pour temps + Start/Stop */
  align-items: center;
  justify-content: center;     /* centre verticalement le contenu */
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  font-family: sans-serif;
}

#timer-state {
  font-size: 12px;   /* taille plus petite */
  margin-top: 5px;   /* espace sous le temps */
  font-weight: normal; /* optionnel, pour que ce soit plus léger que le temps */
}


#timer-button.running {
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.6),
              inset -1px -1px 3px rgba(255,255,255,0.5);
}

#timer-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#time-display {
  font-size: 14px;
  font-weight: bold;
}

/* #region Podcasts */

#podcast-window {
  width: 400px;
  height: auto;
  max-height: 70vh;
  overflow-y: auto;
}

.podcast-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.podcast-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #c0c0c000;
  border-bottom: 1px solid;
  border-color: #d0d0d0 #808080 #808080 #fff;
  padding: 6px;
  font-family: 'Ubuntu Mono', monospace;
}

.podcast-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  flex-shrink: 0;
}

.podcast-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.podcast-title {
  font-weight: bold;
  font-size: 13px;
}

.podcast-date {
  font-size: 11px;
  color: #555;
}

/* #endregion */