/*
================================================
MAGICALRADIO3D - ACCUEIL V2
VISUEL UNIQUEMENT
AUCUNE LOGIQUE JS MODIFIEE
================================================
*/


/* ==================================================
   1. HERO / EMISSION EN COURS
   ================================================== */

.hero-panel{
  padding:24px !important;
}

.hero-top{
  position:relative;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:24px !important;

  padding:22px 24px !important;

  border:1px solid rgba(124,139,255,.28);
  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      rgba(25,24,76,.82),
      rgba(7,19,48,.88)
    );

  box-shadow:
    inset 0 0 35px rgba(124,77,255,.08),
    0 16px 38px rgba(0,0,0,.18);
}


#homeLiveBadge{
  margin-bottom:10px !important;

  border-color:rgba(255,78,180,.45) !important;

  background:
    rgba(255,46,154,.12) !important;

  box-shadow:
    0 0 18px rgba(255,46,154,.13);
}


#welcomeTitle{
  margin:0 !important;

  font-size:
    clamp(28px,3vw,42px) !important;

  line-height:1.04 !important;
  letter-spacing:-.035em;

  color:#fff;
}


#welcomeMessage{
  max-width:610px;

  margin-top:7px !important;

  line-height:1.45;

  color:rgba(232,239,255,.78) !important;
}


#openDedication{
  min-width:270px;

  padding:15px 22px !important;

  border-radius:17px !important;

  font-size:15px;
  font-weight:800;

  background:
    linear-gradient(
      115deg,
      #a855f7,
      #6476ff 52%,
      #21c7ea
    ) !important;

  box-shadow:
    0 0 22px rgba(101,105,255,.28),
    0 12px 30px rgba(0,0,0,.25) !important;
}


#dedicationInfo{
  margin:
    10px 4px 0 !important;

  font-size:13px;
}



/* ==================================================
   2. CARTE DEDIROOMS SEMAINE
   ================================================== */

#fdrWeekPromoCard{
  position:relative !important;

  min-height:255px;

  margin-top:18px !important;

  padding:
    27px 260px 27px 28px !important;

  overflow:hidden !important;

  text-align:left !important;

  border:
    1px solid rgba(174,71,255,.52) !important;

  border-radius:
    24px !important;

  background:
    radial-gradient(
      circle at 82% 38%,
      rgba(185,48,255,.22),
      transparent 29%
    ),
    radial-gradient(
      circle at 18% 90%,
      rgba(40,191,255,.12),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(14,26,68,.96),
      rgba(26,16,64,.96)
    ) !important;

  box-shadow:
    inset 0 0 50px rgba(84,89,255,.08),
    0 18px 45px rgba(0,0,0,.24) !important;
}


#fdrWeekPromoCard .eyebrow{
  margin-bottom:8px !important;

  color:#45d9ff !important;

  font-size:12px;
  font-weight:800;

  letter-spacing:.17em;
}


#fdrWeekPromoCard h3{
  max-width:650px;

  margin:
    0 0 8px !important;

  font-size:
    clamp(27px,3vw,39px) !important;

  line-height:1.06 !important;
  letter-spacing:-.025em;

  color:#fff;
}


#fdrWeekPromoCard h3 + div{
  margin-bottom:
    17px !important;

  font-size:
    16px !important;

  color:#f5f7ff;
}


#fdrWeekPromoCard .muted{
  max-width:
    650px !important;

  margin:
    0 0 20px !important;

  line-height:
    1.55 !important;

  font-size:
    14px;

  color:
    rgba(228,235,255,.80) !important;
}


#fdrWeekPromoButton{
  min-width:
    220px;

  padding:
    14px 22px !important;

  border-radius:
    16px !important;

  font-size:
    15px;

  background:
    linear-gradient(
      110deg,
      #f149da,
      #765cff 48%,
      #24c7f0
    ) !important;

  box-shadow:
    0 0 24px rgba(174,64,255,.30),
    0 13px 28px rgba(0,0,0,.25) !important;
}


/*
Image Animateur :
grande, nette, sans filtre ni étirement.
*/

#fdrWeekCornerImage{
  position:absolute !important;

  top:25px !important;
  right:26px !important;

  width:205px !important;
  height:205px !important;

  object-fit:cover !important;
  object-position:center !important;

  padding:0 !important;

  border:
    2px solid rgba(243,84,255,.55) !important;

  border-radius:
    22px !important;

  background:
    rgba(4,9,28,.70);

  box-shadow:
    0 0 28px rgba(230,57,255,.26),
    0 18px 40px rgba(0,0,0,.38) !important;

  filter:none !important;

  image-rendering:auto !important;

  transform:none !important;
}



/* ==================================================
   3. PLAYER + AGENDA
   ================================================== */

.hero-grid{
  display:grid !important;

  grid-template-columns:
    minmax(0,1.06fr)
    minmax(0,.94fr) !important;

  gap:16px !important;

  margin-top:
    18px !important;
}


.player-card,
.agenda-card{
  min-height:
    185px;

  border:
    1px solid rgba(89,172,255,.25) !important;

  background:
    linear-gradient(
      145deg,
      rgba(10,33,62,.82),
      rgba(19,20,58,.82)
    ) !important;

  box-shadow:
    inset 0 0 28px rgba(52,143,255,.04);
}



/* PLAYER PLUS COMPACT */

.player-card{
  padding:
    16px !important;
}


.player-head strong{
  font-size:
    15px;
}


.player-card .equalizer{
  height:
    52px !important;

  margin:
    12px 0 !important;

  padding:
    8px 10px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    13px;

  background:
    rgba(2,10,28,.32);
}


.player-card .play-btn{
  width:
    48px;

  height:
    48px;

  padding:
    0 !important;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:
    15px !important;

  font-size:
    19px;
}


.radio-volume-row{
  display:flex;
  align-items:center;

  gap:
    10px;

  margin-top:
    8px;
}


#radioVolume{
  width:
    100%;
}


#radioStatus{
  color:
    #4ce9bd !important;

  font-weight:
    700;
}



/* ==================================================
   4. AGENDA
   ================================================== */

.agenda-card{
  padding:
    16px !important;

  gap:
    15px !important;
}


.agenda-main > .muted.small{
  color:
    #61ddff !important;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;

  font-size:
    10px;
}


#agendaShowTitle{
  margin-top:
    7px !important;

  font-size:
    21px !important;

  line-height:
    1.08 !important;
}


#agendaCountdown{
  margin:
    10px 0 6px !important;

  font-size:
    23px !important;
}


.agenda-flyer{
  width:
    115px !important;

  min-width:
    115px !important;

  height:
    145px !important;

  padding:
    3px !important;

  border-radius:
    15px !important;
}


.agenda-flyer img{
  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    contain !important;

  object-position:
    center !important;

  image-rendering:
    auto !important;
}


.agenda-open-btn{
  margin-top:
    9px !important;

  padding:
    9px 14px !important;

  border-radius:
    14px !important;

  background:
    linear-gradient(
      110deg,
      #755eff,
      #22c7ed
    ) !important;

  color:
    white !important;

  font-weight:
    800 !important;
}



/* ==================================================
   RESPONSIVE
   ================================================== */

@media(max-width:900px){

  .hero-top{
    grid-template-columns:
      1fr !important;
  }

  #openDedication{
    width:
      100%;

    min-width:
      0;
  }

  #fdrWeekPromoCard{
    min-height:
      235px;

    padding:
      24px 190px 24px 23px !important;
  }

  #fdrWeekCornerImage{
    width:
      145px !important;

    height:
      145px !important;

    top:
      24px !important;

    right:
      22px !important;
  }
}


@media(max-width:700px){

  .hero-panel{
    padding:
      14px !important;
  }

  .hero-top{
    padding:
      18px !important;
  }

  #welcomeTitle{
    font-size:
      29px !important;
  }


  #fdrWeekPromoCard{
    display:flex;
    flex-direction:column;

    min-height:
      0;

    padding:
      20px !important;
  }


  #fdrWeekCornerImage{
    position:relative !important;

    order:-1;

    top:auto !important;
    right:auto !important;

    width:
      100% !important;

    height:
      auto !important;

    max-height:
      280px;

    margin-bottom:
      18px;

    object-fit:
      contain !important;
  }


  #fdrWeekPromoButton{
    width:
      100%;
  }


  .hero-grid{
    grid-template-columns:
      1fr !important;
  }


  .agenda-flyer{
    width:
      95px !important;

    min-width:
      95px !important;

    height:
      125px !important;
  }
}


/*
================================================
MAGICALRADIO3D - ACCUEIL V2.1
FINITIONS VISUELLES
AUCUNE LOGIQUE JS MODIFIEE
================================================
*/


/* ---------- BANDEAU EMISSION EN COURS ---------- */

.hero-top{
  padding:18px 22px !important;
  min-height:128px;
}

#welcomeTitle{
  font-size:clamp(27px,2.6vw,38px) !important;
}

#welcomeMessage{
  max-width:560px;
}

#openDedication{
  min-width:255px;
  padding:14px 20px !important;
}


/* ---------- CARTE DEDIROOMS ---------- */

#fdrWeekPromoCard{
  min-height:272px;

  padding:
    29px 285px 28px 30px !important;

  border-color:
    rgba(193,72,255,.62) !important;

  box-shadow:
    inset 0 0 55px rgba(110,70,255,.10),
    0 18px 45px rgba(0,0,0,.28),
    0 0 24px rgba(152,70,255,.10) !important;
}


#fdrWeekPromoCard h3{
  font-size:
    clamp(29px,3vw,41px) !important;

  margin-bottom:
    10px !important;
}


#fdrWeekPromoCard .muted{
  max-width:
    620px !important;

  font-size:
    14px;

  line-height:
    1.6 !important;
}


#fdrWeekPromoButton{
  min-width:
    230px;

  padding:
    14px 24px !important;
}


/* Image animateur plus importante */

#fdrWeekCornerImage{
  width:
    225px !important;

  height:
    225px !important;

  top:
    23px !important;

  right:
    24px !important;

  object-fit:
    cover !important;

  object-position:
    center !important;

  filter:
    none !important;

  image-rendering:
    auto !important;

  box-shadow:
    0 0 30px rgba(232,72,255,.30),
    0 18px 42px rgba(0,0,0,.42) !important;
}


/* ---------- PLAYER ---------- */

.player-card{
  min-height:
    202px !important;

  padding:
    17px !important;
}


.player-card .equalizer{
  height:
    62px !important;

  margin:
    13px 0 !important;
}


.player-card .play-btn{
  width:
    50px;

  height:
    50px;
}


.radio-volume-row{
  margin-top:
    10px;
}


/* ---------- AGENDA ---------- */

.agenda-card{
  min-height:
    202px !important;

  padding:
    17px !important;

  gap:
    18px !important;
}


#agendaShowTitle{
  font-size:
    23px !important;
}


#agendaCountdown{
  font-size:
    25px !important;

  margin:
    11px 0 7px !important;
}


/* Flyer plus visible sans déformation */

.agenda-flyer{
  width:
    130px !important;

  min-width:
    130px !important;

  height:
    160px !important;

  padding:
    4px !important;
}


.agenda-flyer img{
  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    contain !important;

  object-position:
    center !important;

  image-rendering:
    auto !important;
}


/* ---------- MOBILE / PETITS ECRANS ---------- */

@media(max-width:900px){

  #fdrWeekPromoCard{
    padding:
      24px 205px 24px 24px !important;
  }

  #fdrWeekCornerImage{
    width:
      165px !important;

    height:
      165px !important;
  }
}


@media(max-width:700px){

  .hero-top{
    min-height:
      0;

    padding:
      17px !important;
  }

  #fdrWeekPromoCard{
    padding:
      20px !important;
  }

  #fdrWeekCornerImage{
    position:
      relative !important;

    width:
      100% !important;

    max-width:
      360px;

    height:
      auto !important;

    max-height:
      320px;

    margin:
      0 auto 18px;

    object-fit:
      contain !important;
  }

  .player-card,
  .agenda-card{
    min-height:
      0 !important;
  }

  .agenda-flyer{
    width:
      100px !important;

    min-width:
      100px !important;

    height:
      130px !important;
  }
}



/*
================================================
ACCUEIL V2.2 - HERO LIVE PREMIUM
VISUEL UNIQUEMENT
================================================
*/

.hero-top{
  position:relative !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(260px,340px) !important;

  min-height:150px !important;

  padding:
    24px 26px !important;

  overflow:hidden;

  border:
    1px solid rgba(113,102,255,.46) !important;

  border-radius:
    24px !important;

  background:
    radial-gradient(
      circle at 88% 50%,
      rgba(24,201,255,.14),
      transparent 34%
    ),
    radial-gradient(
      circle at 12% 20%,
      rgba(244,55,196,.12),
      transparent 38%
    ),
    linear-gradient(
      125deg,
      rgba(22,18,64,.98),
      rgba(8,25,58,.96)
    ) !important;

  box-shadow:
    inset 0 0 45px rgba(93,74,255,.10),
    0 18px 38px rgba(0,0,0,.28);
}


/* petite lumière décorative */

.hero-top::after{
  content:"";

  position:absolute;

  width:260px;
  height:260px;

  right:-100px;
  top:-100px;

  border-radius:50%;

  background:
    rgba(55,208,255,.10);

  filter:
    blur(30px);

  pointer-events:none;
}


/* badge live */

#homeLiveBadge{
  padding:
    7px 13px !important;

  margin-bottom:
    11px !important;

  font-size:
    11px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .06em;

  text-transform:
    uppercase;

  color:
    #fff !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,35,126,.22),
      rgba(178,53,255,.18)
    ) !important;

  border:
    1px solid rgba(255,78,193,.58) !important;

  box-shadow:
    0 0 17px rgba(255,48,184,.20);
}


/* titre principal */

#welcomeTitle{
  max-width:
    560px;

  font-size:
    clamp(30px,3.2vw,44px) !important;

  line-height:
    .98 !important;

  letter-spacing:
    -.045em;

  font-weight:
    900 !important;

  color:
    #fff !important;

  text-shadow:
    0 5px 25px rgba(0,0,0,.28);
}


/* phrase sous le titre */

#welcomeMessage{
  max-width:
    540px !important;

  margin-top:
    10px !important;

  font-size:
    14px;

  line-height:
    1.55;

  color:
    rgba(229,237,255,.82) !important;
}


/* bouton dédicace = action principale */

#openDedication{
  position:relative;

  z-index:2;

  width:
    100%;

  min-width:
    285px !important;

  min-height:
    66px;

  padding:
    16px 22px !important;

  border:
    1px solid rgba(255,255,255,.32) !important;

  border-radius:
    19px !important;

  font-size:
    15px !important;

  font-weight:
    900 !important;

  line-height:
    1.25;

  letter-spacing:
    .01em;

  color:
    #fff !important;

  background:
    linear-gradient(
      110deg,
      #dc3ce8 0%,
      #795bff 48%,
      #21cdeb 100%
    ) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 0 28px rgba(125,87,255,.38),
    0 16px 35px rgba(0,0,0,.35) !important;

  transition:
    transform .2s ease,
    filter .2s ease,
    box-shadow .2s ease;
}


#openDedication::before{
  content:"🎙️";

  margin-right:
    8px;
}


#openDedication:hover{
  transform:
    translateY(-2px) scale(1.015);

  filter:
    brightness(1.10);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 0 38px rgba(80,179,255,.46),
    0 18px 40px rgba(0,0,0,.38) !important;
}


/*
On garde l'animation existante,
mais plus élégante.
*/

#openDedication.blink-btn{
  animation:
    liveActionGlow 2.2s ease-in-out infinite !important;
}


@keyframes liveActionGlow{

  0%,100%{
    box-shadow:
      0 0 22px rgba(136,67,255,.30),
      0 15px 32px rgba(0,0,0,.32);
  }

  50%{
    box-shadow:
      0 0 38px rgba(37,207,241,.48),
      0 15px 34px rgba(0,0,0,.36);
  }
}


/* petite ligne "Envoyer une dédicace" actuelle */

#dedicationInfo{
  margin:
    9px 5px 0 !important;

  font-size:
    11px !important;

  opacity:
    .72;
}


@media(max-width:700px){

  .hero-top{
    grid-template-columns:
      1fr !important;

    min-height:
      0 !important;

    padding:
      20px !important;
  }

  #openDedication{
    min-width:
      0 !important;

    width:
      100%;
  }

  #welcomeTitle{
    font-size:
      32px !important;
  }
}



/*
==========================================================
HERO V4
DEDICACE + FLASH LIVE
==========================================================
*/


.hero-live-actions{
  display:flex !important;

  flex-direction:column !important;

  align-items:stretch !important;

  justify-content:center !important;

  gap:9px !important;

  width:100%;

  min-width:285px;
}


/* bouton dédicace reste action numéro 1 */

.hero-live-actions #openDedication{
  width:100% !important;

  margin:0 !important;
}


/* FLASH LIVE devient action secondaire */

.hero-live-actions #openFlashLive{
  width:100% !important;

  min-height:38px !important;

  margin:0 !important;

  padding:9px 16px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  gap:8px !important;

  border-radius:14px !important;

  border:
    1px solid rgba(255,70,105,.55) !important;

  background:
    linear-gradient(
      90deg,
      rgba(113,16,43,.92),
      rgba(181,24,57,.94),
      rgba(104,13,39,.92)
    ) !important;

  color:#fff !important;

  font-size:11px !important;

  font-weight:900 !important;

  letter-spacing:.06em !important;

  box-shadow:
    0 0 16px rgba(255,42,90,.20),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}


.hero-live-actions #openFlashLive:hover{
  filter:brightness(1.12);

  box-shadow:
    0 0 25px rgba(255,42,90,.34),
    0 9px 22px rgba(0,0,0,.26) !important;
}


/* petit point LIVE plus visible */

.hero-live-actions .flash-live-dot{
  width:8px !important;
  height:8px !important;

  flex:0 0 8px;

  border-radius:50%;

  box-shadow:
    0 0 12px rgba(255,80,100,.80);
}


@media(max-width:700px){

  .hero-live-actions{
    min-width:0;

    width:100%;
  }

}



/*
==========================================================
FLASH LIVE SOUS LE BOUTON DEDICACE
==========================================================
*/

body[data-page="home"] .hero-live-actions{

  display:flex !important;

  flex-direction:column !important;

  align-items:stretch !important;

  justify-content:center !important;

  gap:
    8px !important;

  min-width:
    285px;

  width:
    100%;
}


body[data-page="home"]
.hero-live-actions
#openDedication{

  width:
    100% !important;

  margin:
    0 !important;
}


body[data-page="home"]
.hero-live-actions
#openFlashLive{

  display:flex !important;

  width:
    100% !important;

  min-height:
    38px !important;

  margin:
    0 !important;

  align-items:center !important;

  justify-content:center !important;

  gap:
    8px !important;

  border-radius:
    14px !important;

  font-size:
    11px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .06em !important;

  color:
    white !important;

  background:
    linear-gradient(
      90deg,
      rgba(104,13,40,.96),
      rgba(193,28,62,.96),
      rgba(105,14,41,.96)
    ) !important;

  border:
    1px solid rgba(255,72,103,.60) !important;

  box-shadow:
    0 0 18px rgba(255,42,90,.22) !important;
}


/* =========================================================
   FDR HOME FIRST
   - carte FDR au-dessus du bloc Bienvenue
   - plus fine
   - texte plus aéré
   - aucune logique modifiée
   ========================================================= */

.left-column .fdr-home-priority{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;

  min-height:220px !important;
  padding:18px 22px !important;
  margin:0 0 16px 0 !important;

  overflow:hidden !important;
  border-radius:22px !important;

  border:1px solid rgba(255,70,210,.45) !important;
  box-shadow:
    0 0 0 1px rgba(120,180,255,.10) inset,
    0 18px 45px rgba(0,0,0,.35),
    0 0 26px rgba(255,0,180,.12) !important;

  background:
    radial-gradient(circle at 78% 18%, rgba(255,0,170,.16), transparent 30%),
    radial-gradient(circle at 18% 70%, rgba(0,210,255,.10), transparent 28%),
    linear-gradient(135deg, rgba(9,12,34,.98), rgba(13,10,40,.96)) !important;
}

/* décoration de fond légère */
.left-column .fdr-home-priority::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    radial-gradient(circle at 82% 50%, rgba(110,70,255,.18), transparent 28%);
  pointer-events:none;
}

/* tous les contenus passent devant */
.left-column .fdr-home-priority > *{
  position:relative;
  z-index:2;
}

/* titre principal de la carte */
.left-column .fdr-home-priority h1,
.left-column .fdr-home-priority h2,
.left-column .fdr-home-priority h3{
  max-width:58% !important;
  margin-bottom:10px !important;
  font-size:40px !important;
  line-height:.92 !important;
  letter-spacing:-.03em !important;
}

/* date / petit sous-titre */
.left-column .fdr-home-priority .muted,
.left-column .fdr-home-priority .meta,
.left-column .fdr-home-priority small{
  display:block !important;
  margin-bottom:10px !important;
  font-size:16px !important;
  line-height:1.35 !important;
}

/* texte descriptif */
.left-column .fdr-home-priority p{
  max-width:56% !important;
  margin-top:8px !important;
  margin-bottom:14px !important;
  font-size:15px !important;
  line-height:1.55 !important;
  color:rgba(255,255,255,.90) !important;
}

/* bouton principal */
.left-column .fdr-home-priority a,
.left-column .fdr-home-priority button{
  min-height:46px !important;
  padding:11px 24px !important;
  border-radius:16px !important;
  font-size:15px !important;
  font-weight:900 !important;
}

/* on rend la carte plus visuellement fine */
.left-column .fdr-home-priority img{
  max-height:170px !important;
  width:auto !important;
  object-fit:cover !important;
  opacity:.95 !important;
}

/* responsive */
@media(max-width:1100px){
  .left-column .fdr-home-priority h1,
  .left-column .fdr-home-priority h2,
  .left-column .fdr-home-priority h3{
    max-width:100% !important;
    font-size:34px !important;
  }

  .left-column .fdr-home-priority p{
    max-width:100% !important;
  }
}