@import url('https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&display=swap');

/* =======================================================================
   1) RÉSET & BASE
   ======================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Agdasima', sans-serif; }

html { font-size: 17px; }                 /* montée douce de la taille globale */

html, body { width: 100%; height: 100%; color: #d0d0d0; }

body { padding: 0; overflow-x: hidden; overflow-y: auto; position: relative; }
body.index-page { background: #0a0a0a url("../assets/img/bg.png") center/cover no-repeat fixed; }

/* =======================================================================
   2) VARIABLES (thème)
   ======================================================================= */
:root{
  --footer-height: 60px;              /* hauteur du footer */
  --menu-gap: 30px;                   /* même espacement que le menu du header */

  /* Icônes sociaux */
  --social-icon-size: 26px;           /* taille par défaut (liens non .is-large) */
  --social-icon-large-scale: .58;     /* proportion de la hauteur du footer */

  /* Barres verticales (header & footer) */
  --decor-bar-width: 4px;
  --decor-bar-radius: 2px;
  --decor-bar-height: 22px;           /* proportion plus équilibrée */
}

/* =======================================================================
   3) STRUCTURE DE PAGE
   ======================================================================= */
.page-container { margin: 20px 40px; padding: 0; /* max-width: 2160px; */ }
.section-wrapper { margin: 20px 0; }
.page-container > .section-wrapper:first-child { margin-top: 0; }
.page-container > .section-wrapper:last-child  { margin-bottom: 0; }

/* =======================================================================
   4) HEADER
   ======================================================================= */
header{
  position: fixed; top: 0; left: 0; width: 100%; height: 60px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  z-index: 1000; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.header-content{
  max-width: 3840px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  height: 100%; padding: 15px 40px;
}

.logo{ display: flex; align-items: baseline; gap: 15px; }
.logo-text{
  font-weight: 700; font-size: 1.35em;   /* ↑ depuis 1.2em */
  color: #bbb; text-decoration: none; letter-spacing: 2px; transition: 0.3s;
}
.logo-text:hover{ color: #fff; }

.slogan{ font-weight: 400; font-size: 1.00em; color: #999; } /* ↑ depuis 0.9em */

nav{ display: flex; gap: var(--menu-gap); }
nav a{
  color: #bbb; text-decoration: none; text-transform: uppercase;
  font-size: 1.20em;                    /* ↑ depuis 1.1em */
  position: relative; padding-left: 12px; transition: color 0.3s;
}
nav a::before{
  content: ""; position: absolute; left: 0; top: 50%;
  width: var(--decor-bar-width); height: var(--decor-bar-height);
  transform: translateY(-50%); background: #444; border-radius: var(--decor-bar-radius);
}
nav a:hover{ color: #fff; }

/* =======================================================================
   5) IFRAME PRINCIPALE
   ======================================================================= */
.iframe-wrapper{
  position: absolute; top: 60px; left: 0; right: 0; margin: 0 auto;
  width: 100%; height: calc(100% - 60px - 60px); /* 100% - header - footer */
  overflow: hidden; box-sizing: border-box;
}
#content{ width: 100%; height: 100%; border: none; display: block; }

/* =======================================================================
   6) FOOTER — grille & socials
   ======================================================================= */
footer{
  position: fixed; bottom: 0; left: 0; right: 0; width: 100%;
  height: var(--footer-height); background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.1); z-index: 1500;
  display: flex; align-items: center;
}
.footer-content-wrapper{ max-width: 3840px; width: 100%; height: 100%; margin: 0 auto; }
.footer-content{
  display: grid; grid-template-columns: auto 1fr auto; /* G | C | D */
  align-items: center; width: 100%; height: 100%;
}

/* Colonne COPYRIGHT (gauche) */
.footer-copy{
  grid-column: 1; justify-self: start; margin-left: 40px;  /* même padding que header */
  font-weight: 400; font-size: 1.00em; color: #999; white-space: nowrap;
}

/* Colonne RÉSEAUX (droite) */
.footer-right{ grid-column: 3; justify-self: end; margin-right: 40px; display: flex; }
.footer-socials{ display: inline-flex; align-items: center; gap: var(--menu-gap); }

/* Icônes carrées 1:1 */
.footer-socials a{
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--social-icon-size); height: var(--social-icon-size); aspect-ratio: 1 / 1;
  color: #bbb; opacity: 0.9; line-height: 0; transition: color .2s ease, opacity .2s ease;
}
.footer-socials a:hover{ color: #fff; opacity: 1; }
.footer-socials a:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }

/* Variante “grande” proportionnelle au footer */
.footer-socials a.is-large{
  width:  calc(var(--social-icon-large-scale) * var(--footer-height));
  height: calc(var(--social-icon-large-scale) * var(--footer-height));
}

/* Barre verticale à gauche de chaque icône (mêmes variables que le header) */
.footer-socials a::before{
  content: ""; position: absolute; left: 0; top: 50%;
  width: var(--decor-bar-width); height: var(--decor-bar-height);
  transform: translateY(-50%); background: #444; border-radius: var(--decor-bar-radius);
  pointer-events: none;
}

/* SVG plein dans sa case */
.footer-socials svg{
  width: 100%; height: 100%; display: block; vertical-align: middle;
  shape-rendering: geometricPrecision;
}

/* Style icônes (plein, via currentColor) */
.footer-socials .si-solid{ fill: currentColor; stroke: none; }

/* =======================================================================
   7) PLAYER (colonne centrale)
   ======================================================================= */
#azura-footer-player{
  grid-column: 2; justify-self: center;
  display: flex; align-items: center; gap: 10px; height: 100%; background: transparent;
  width: max-content; max-width: 100%; padding: 0 6px;
}

/* Pochette (60px = hauteur footer) */
#azura-cover{
  width: 60px; height: 60px; flex: 0 0 60px; object-fit: cover; border-radius: 0; display: block;
}

/* Texte + progression */
.azura-track{ display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; line-height: 1.1em; }
.azura-meta-col{ display: flex; flex-direction: column; justify-content: center; flex: 0 1 auto; min-width: max-content; }

.azura-title{  font-size: 1.06em; font-weight: 700; color: #fff; } /* ↑ */
.azura-artist{ font-size: 0.94em; color: #b7bec8; margin-top: -1px; } /* ↑ */

.azura-progress-row{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1 1 auto; min-width: clamp(140px, 18vw, 560px); margin-top: 0;
}
.azura-time{
  width: 40px; text-align: center; font-size: 0.92em; /* ↑ */
  color: #8e98a5; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.azura-progress-bar{
  position: relative; flex: 1 1 auto; height: 8px; background: #3a414a;
  border-radius: 9999px; overflow: hidden; contain: layout paint;
}
.azura-progress{ position: absolute; inset: 0 auto 0 0; width: 0%; background: #9aa3ad; border-radius: inherit; will-change: width; }

/* ON AIR */
#azura-footer-player.is-live #azura-progress-row{ display: none; }
#azura-footer-player .azura-onair{
  display: none; align-self: center; white-space: nowrap; margin-inline: 10px; padding-block: 2px; padding-inline: 10px;
}
#azura-footer-player.is-live .azura-onair{ display: inline-flex; }

/* Contrôles */
.azura-controls{ display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.azura-play-btn{
  width: 36px; height: 36px; padding: 0; border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; line-height: 0; cursor: pointer; color: #fff;
}
.azura-play-btn .icon{ width: 36px; height: 36px; display: block; fill: currentColor; }
.azura-play-btn .icon-pause{ display: none; }
.azura-play-btn.is-playing .icon-play{ display: none; }
.azura-play-btn.is-playing .icon-pause{ display: block; }

/* Volume */
.azura-volume{ display: flex; align-items: center; gap: 10px; }
#azura-footer-player{ --vol-size: 20px; --vol-color: #6f7a86; --vol-color-hover: #9aa3ad; }
.azura-mute-btn{
  width: var(--vol-size); height: var(--vol-size);
  padding: 0; border: none; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; line-height: 0;
  color: var(--vol-color);
}
.azura-mute-btn:hover{ color: var(--vol-color-hover); }
.azura-mute-btn svg{ width: var(--vol-size); height: var(--vol-size); display: none; }
.azura-mute-btn.state-0 .icon-vol-0{ display: block; } /* mute */
.azura-mute-btn.state-1 .icon-vol-1{ display: block; } /* 1 vague */
.azura-mute-btn.state-2 .icon-vol-2{ display: block; } /* 2 vagues */

#azura-volume{
  width: 140px; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
#azura-volume::-webkit-slider-runnable-track{ height: 8px; background: #3a414a; border-radius: 9999px; }
#azura-volume::-webkit-slider-thumb{
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: none; margin-top: -5px;
}
#azura-volume::-moz-range-track{ height: 8px; background: #3a414a; border-radius: 9999px; }
#azura-volume::-moz-range-thumb{ width: 18px; height: 18px; border-radius: 50%; background: #fff; border: none; }

/* =======================================================================
   8) TITRES DE SECTION
   ======================================================================= */
.section-title{
  position: relative; padding-left: 12px; margin-bottom: 20px;
  font-size: 1.60em;                   /* ↑ depuis 1.5em */
  color: #eee;
}
.section-title::before{
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 4px; background: #444; border-radius: 2px;
}

/* =======================================================================
   9) WIDGETS (grille & cartes)
   ======================================================================= */
.widget-grid{
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; width: 100%;
  padding: 0 20px; box-sizing: border-box;
}
.widget-card{ display: flex; flex-direction: column; border-radius: 10px; }
.widget-card h3{ margin-bottom: 12px; padding: 16px; font-size: 1.30em; color: #fff; } /* ↑ */
.widget-content{
  background: rgba(27,27,27,0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 16px; border-radius: 10px; min-height: 500px; max-height: 500px; overflow-y: auto; scroll-behavior: smooth;
}

/* =======================================================================
   10) SCHEDULE (custom)
   ======================================================================= */
#custom-schedule{ display: flex; flex-direction: column; gap: 18px; }

.schedule-item{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 18px; border-left: 4px solid #444; border-radius: 8px;
  background-color: rgba(18,18,18,0.85); box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  min-height: 70px; transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.schedule-item:hover{ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

.schedule-left{ display: flex; align-items: center; gap: 12px; flex-grow: 1; }
.schedule-time{ font-size: 1.05em; color: #bbb; min-width: 90px; } /* ↑ */
.schedule-title{ display: flex; flex-direction: column; justify-content: center; }
.schedule-title .show-name{ font-size: 1.30em; font-weight: 700; color: #fff; } /* ↑ */
.schedule-title .streamer-name{ font-size: 1.00em; color: #aaa; font-weight: 400; }  /* ↑ */
.schedule-left img{ max-height: 50px; border-radius: 6px; }
.schedule-right{ display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.schedule-item.upcoming{ border-left-color: #444; background-color: rgba(18,18,18,0.65); }
.schedule-item.now, .schedule-item.live{ position: relative; border-radius: 8px; overflow: hidden; }
.schedule-item.now::before, .schedule-item.live::before{
  content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px;
  border-radius: 12px; pointer-events: none; z-index: 0;
}
.schedule-item.now::before { box-shadow: 0 0 8px #00bfff, 0 0 20px #00bfff77; }
.schedule-item.live::before{ box-shadow: 0 0 8px #ff4b4b, 0 0 20px #ff4b4b77; }

.schedule-item.now{
  border-left: 4px solid #00bfff;
  background: linear-gradient(135deg, rgba(0,191,255,0.35) 0%, rgba(0,191,255,0.20) 25%, rgba(0,191,255,0.10) 50%, rgba(0,0,0,0) 100%);
  animation: pulse-inward-now 1.5s infinite ease-in-out;
}
.schedule-item.live{
  border-left: 4px solid #ff4b4b;
  background: linear-gradient(135deg, rgba(255,75,75,0.35) 0%, rgba(255,75,75,0.20) 25%, rgba(255,75,75,0.10) 50%, rgba(0,0,0,0) 100%);
  animation: pulse-inward-live 1.5s infinite ease-in-out;
}
@keyframes pulse-inward-now{
  0%,100% { box-shadow: inset 0 0 4px #00bfff, inset 0 0 10px #00bfff33; }
  50%     { box-shadow: inset 0 0 8px #00bfff, inset 0 0 14px #00bfff55; }
}
@keyframes pulse-inward-live{
  0%,100% { box-shadow: inset 0 0 4px #ff4b4b, inset 0 0 10px #ff4b4b33; }
  50%     { box-shadow: inset 0 0 8px #ff4b4b, inset 0 0 14px #ff4b4b55; }
}

/* Badges */
.live-badge{
  display: inline-block; background-color: #ff4b4b; color: #fff;
  font-weight: bold; font-size: 0.75em; padding: 2px 6px; border-radius: 4px;
}
.playlist-badge{
  display: inline-block; background-color: #00bfff; color: #fff;
  font-weight: bold; font-size: 0.75em; padding: 2px 6px; border-radius: 4px;
}

/* =======================================================================
   11) DISCORD WIDGET
   ======================================================================= */
.discord-members{ list-style: none; padding: 0; margin: 0; }
.discord-members li{
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; border-radius: 6px; background: rgba(255,255,255,0.05);
  margin-bottom: 6px; transition: background 0.2s;
}
.discord-members li:hover{ background: rgba(255,255,255,0.1); }
.user-left{ display: flex; align-items: center; gap: 10px; }
.avatar-wrapper{ position: relative; width: 28px; height: 28px; }
.avatar-wrapper img{ width: 28px; height: 28px; border-radius: 50%; }
.status-indicator{
  width: 10px; height: 10px; border-radius: 50%; border: 2px solid #1e1f22;
  position: absolute; bottom: 0; right: 0;
}
.username{ font-size: 1.02em; color: #eee; }   /* ↑ */
.status-text{ font-size: 0.90em; color: #ccc; white-space: nowrap; margin-left: auto; } /* ↑ */

/* =======================================================================
   12) INSTAGRAM CARDS
   ======================================================================= */
.card-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 30px; margin: 20px 0; width: 100%; padding: 0 20px; box-sizing: border-box;
}
.insta-post{
  position: relative; display: flex; flex-direction: column;
  background: rgba(27,27,27,0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 8px; overflow: hidden; padding: 16px 16px 16px 20px; height: 500px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25); opacity: 1; transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease; z-index: 0;
}
.insta-post.empty{ visibility: hidden; pointer-events: none; }
.insta-post.hidden{ opacity: 0; transform: translateY(20px); }
.insta-post::before{
  content: ""; position: absolute; top: 0; left: 0; bottom: 0;
  width: 4px; border-radius: 8px 0 0 8px;
  background: linear-gradient(to bottom, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
  z-index: 1;
}
.insta-post:hover{ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.insta-post .card-content{ display: flex; flex-direction: column; height: 100%; z-index: 2; }
.insta-post img{
  width: 100%; border-radius: 8px; object-fit: cover;
  margin-bottom: 10px; flex-shrink: 0; max-height: 60%;
  box-shadow: 0 3px 12px rgba(0,0,0,0.5); transition: transform 0.3s, box-shadow 0.3s;
}
.caption-gradient{
  flex-grow: 1; margin-bottom: 10px; line-height: 1.3em;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
.insta-post a{
  font-size: 0.95em;                 /* ↑ depuis 0.85em */
  color: #00bfff; text-decoration: none; font-weight: 600; margin-top: auto; z-index: 2;
}
.insta-post a:hover{ text-decoration: underline; }

/* =======================================================================
   13) RESPONSIVE
   ======================================================================= */
@media (max-width: 900px){
  .azura-progress-row{ flex: 1 1 220px; min-width: 160px; }
}

@media (max-width: 600px){
  html { font-size: 16px; }           /* on atténue légèrement en mobile */
  .footer-socials{ gap: 10px; }
  .footer-socials a,
  .footer-socials a.is-large{ width: 24px; height: 24px; } /* uniforme mobile */
}