/* ============================================================
 * RADIO PLAYER 2 — LAYOUT V2 (audio + vidéo)
 * Auteur : Jonathan Talay
 * Date   : Janvier 2026
 * ============================================================ */

.rcfx{
  --green:#0A8C78;
  --blue:#006699;
  --bg:#e6e6e6;
  --glass:rgba(255,255,255,.28);

  --circle:280px;
  --badge-h:30px;              /* ✅ badges + gros */
  --radius:18px;

  font-family:system-ui,-apple-system,Inter,Segoe UI,Roboto,sans-serif;
  color:#0c1222;
}

/* Avada-safe : respecte toujours hidden */
.rcfx [hidden]{ display:none !important; }

/* Wrapper général */
.rcfx .rcfx-wrap{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px;
  background:var(--bg);
}

/* Desktop : visuel à gauche / infos à droite */
@media (min-width: 760px){
  .rcfx .rcfx-wrap{
    flex-direction:row;
    align-items:center;
    gap:18px;
  }
}

/* Bloc visuel */
.rcfx .rcfx-visual{
  display:flex;
  justify-content:center;
}

@media (max-width: 420px){
  .rcfx{ --circle: min(280px, 86vw); }
}

/* Cercle + logo */
.rcfx .rcfx-circle{
  position:relative;
  width:var(--circle);
  height:var(--circle);
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.12),
             inset 0 0 0 1px #e9edf3;
  isolation:isolate;
}

.rcfx .rcfx-logo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Bouton Play */
.rcfx .rcfx-btn{
  width:60px;
  height:60px;
  border-radius:50%;
  border:0;
  background:var(--glass);
  backdrop-filter:blur(9px);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:3;
  position:relative;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  transition:transform .12s, background .12s, box-shadow .12s;
}

.rcfx .rcfx-btn:hover{
  transform:scale(1.05);
  background:rgba(255,255,255,.34);
  box-shadow:0 10px 22px rgba(0,0,0,.26);
}

.rcfx .rcfx-ico{
  width:28px;
  height:28px;
  fill:var(--green);
}

/* Spinner */
.rcfx .rcfx-spin{
  position:absolute;
  width:36px;
  height:36px;
  border-radius:50%;
  border:3px solid rgba(0,0,0,.08);
  border-top-color:var(--blue);
  animation:rcfx-spin .9s linear infinite;
  display:none;
}
@keyframes rcfx-spin{ to{ transform:rotate(360deg);} }

.rcfx.is-loading .rcfx-ico{ opacity:.2; }
.rcfx.is-loading .rcfx-spin{ display:block; }

/* Effets */
.rcfx .rcfx-cloud{
  position:absolute;
  width:65%;
  height:65%;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(0,102,153,.16),
    rgba(0,102,153,.06) 55%,
    transparent 70%);
  filter:blur(18px);
  opacity:0;
  transform:scale(.98);
  transition:opacity .25s, transform .25s;
  z-index:1;
}
.rcfx.is-playing .rcfx-cloud{ opacity:.42; transform:scale(1); filter:blur(20px); }

.rcfx .rcfx-ring{
  position:absolute;
  inset:11px;
  border:2px solid rgba(0,0,0,.10);
  border-radius:50%;
  z-index:2;
  transition:border-color .25s, box-shadow .25s;
}
.rcfx.is-playing .rcfx-ring{
  border-color:rgba(0,102,153,.75);
  box-shadow:
    0 0 28px rgba(0,102,153,.55),
    0 0 0 6px rgba(0,102,153,.20);
}

.rcfx .rcfx-waves{ display:none; }
.rcfx.is-playing .rcfx-waves{ display:block; }
.rcfx .rcfx-waves::before,
.rcfx .rcfx-waves::after{
  content:"";
  position:absolute;
  inset:11px;
  border-radius:50%;
  pointer-events:none;
  border:3px solid rgba(0,102,153,.70);
  animation: rcfx-pulse 2.1s ease-out infinite;
  opacity:0;
}
.rcfx .rcfx-waves::after{ animation-delay:1.05s; }
@keyframes rcfx-pulse{
  0%{ transform:scale(1); opacity:.55 }
  60%{ transform:scale(1.25); opacity:.35 }
  100%{ transform:scale(1.45); opacity:0 }
}

/* Bloc infos */
.rcfx .rcfx-info{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  min-width:0;
}
@media (min-width: 760px){
  .rcfx .rcfx-info{
    align-items:flex-start;
    text-align:left;
  }
}

/* Ligne d’actions : badge + vidéo */
.rcfx .rcfx-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
@media (min-width: 760px){
  .rcfx .rcfx-actions{ justify-content:flex-start; }
}

/* Badge EN DIRECT */
.rcfx .rcfx-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--badge-h);
  padding:0 12px;
  border-radius:999px;
  background:rgba(0,102,153,.12);
  color:#0A3D59;
  border:1px solid rgba(0,102,153,.22);
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}

/* Bouton vidéo — même hauteur, même forme */
.rcfx .rcfx-yt,
.rcfx .rcfx-yt-off{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--badge-h);
  padding:0 14px;
  border-radius:999px;
  gap:7px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid transparent;
  text-decoration:none;
  user-select:none;
}

/* Icône */
.rcfx .rcfx-yt::before,
.rcfx .rcfx-yt-off::before{
  content:"▶";
  font-size:12px;
  line-height:1;
}

/* LIVE (rouge discret) */
.rcfx .rcfx-yt{
  background:rgba(214,31,31,.14);
  color:#b21414;
  border-color:rgba(214,31,31,.26);
  transition:background .18s, transform .15s;
}
.rcfx .rcfx-yt:hover{
  background:rgba(214,31,31,.20);
  transform:translateY(-1px);
}

/* OFFLINE */
.rcfx .rcfx-yt-off{
  background:rgba(0,0,0,.07);
  color:#6b7382;
  border-color:rgba(0,0,0,.11);
  cursor:not-allowed;
}

/* Note “selon les émissions” */
.rcfx .rcfx-note{
  font-size:12px;
  color:#6b7382;
  margin-top:-2px;
}

/* Now playing */
.rcfx .rcfx-line{
  margin-top:2px;
  font-size:20px;
  line-height:1.25;
}
.rcfx .song{ font-weight:900; }
.rcfx .artist{ font-weight:600; color:#6b7382; }
.rcfx .sep{ color:var(--blue); }

/* Status */
.rcfx .rcfx-status{
  font-size:12px;
  color:#6b7382;
  min-height:1.1em;
}
.rcfx.is-loading .rcfx-status::after{
  content:"Connexion";
  animation:rcfx-dots 1.2s steps(4,end) infinite;
}
@keyframes rcfx-dots{
  0%{content:"Connexion"}25%{content:"Connexion."}50%{content:"Connexion.."}75%{content:"Connexion..."}100%{content:"Connexion"}
}