body{
  background:#000;
  color:#fff;
  font-family:Verdana,Arial,Helvetica,sans-serif;
}

/* === Bandeau nouveauté Christmas Radio === */
.cr-banner-new{
  background:#111;
  border-bottom:1px solid #333;
  padding:12px 10px;
  text-align:center;
  font-size:18px;
  color:#ffde6b;
  line-height:1.4;
}

.cr-banner-new a{
  color:#ffffff;
  text-decoration:none;
}

.cr-banner-new a:hover{
  text-decoration:underline;
}

.cr-badge-new{
  background:#ff0000;
  color:#fff;
  font-size:11px;
  padding:3px 6px;
  margin-left:8px;
  border-radius:6px;
  vertical-align:middle;
  font-weight:bold;
}

/* --- HERO LOGO --- */
.hero-logo{
  max-height:400px;
  width:auto;
  height:auto;
  display:block;
  margin:0 auto;
}

.cr-wrap{
  max-width:980px;
  margin:0 auto;
}

table.cr-table{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0 10px; /* espace vertical entre les lignes */
}

.cr-table tr[data-station-id] td {
  padding-top:8px;
  padding-bottom:12px;
}

.cr-col-fav{width:28px}
.cr-col-logo{width:75px}
.cr-col-player{width:260px}

.cr-td-fav{vertical-align:top;padding-top:4px}
td.cr-logo-td{vertical-align:top}

img.cr-logo{
  display:block;
  width:65px;
  height:40px;
  object-fit:contain;
}

.cr-station a{
  color:#fff;
  text-decoration:none;
  font-weight:bold;
}

.cr-station a:hover{text-decoration:underline}

.cr-desc{
  font-size:12px;
  color:#bbb;
  max-width:680px;
  line-height:1.4;
  margin-top:4px
}

.cr-play-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}

.cr-btn-play{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#0e0e0e;
  border:1px solid #333;
  color:#fff;
  border-radius:6px;
  padding:6px 10px;
  cursor:pointer;
  pointer-events:auto;
}

.cr-btn-play[disabled]{opacity:.6;cursor:not-allowed}

.cr-status{
  font-size:12px;
  color:#bbb;
  min-width:110px;
  margin-left:6px;
}

.cr-status.cr-ok{color:#9fef00}
.cr-status.cr-err{color:#ff6b6b}

.cr-spinner{
  width:14px;
  height:14px;
  border:2px solid #666;
  border-top-color:#fff;
  border-radius:50%;
  display:inline-block;
  animation:cr-spin .8s linear infinite;
  margin-left:6px;
}

@keyframes cr-spin{to{transform:rotate(360deg)}}

.cr-pbar{
  position:relative;
  width:90px;
  height:6px;
  background:#222;
  border-radius:6px;
  overflow:hidden;
  border:1px solid #333;
  margin-left:8px;
}

.cr-pbar-fill{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0;
  background:#35a7ff;
  transition:width .25s linear;
}

.cr-hide{display:none}

/* --- NOUVELLE GRILLE DE DRAPEAUX --- */
.cr-flagbar{
  display:grid;
  grid-template-columns:repeat(6, 1fr); /* 6 colonnes en desktop */
  gap:10px;
  max-width:900px;
  margin:10px auto 6px;
}

.cr-flagbar a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid #333;
  border-radius:4px;
  padding:6px 4px;
  background:#0b0b0b;
  transition:transform .1s ease,box-shadow .1s ease;
  text-decoration:none;
}

.cr-flagbar a:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 2px #ff0000 inset;
}

.cr-flagcap{
  margin-top:3px;
  font-size:10px;
  line-height:1;
  color:#aaa;
  max-width:90px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cr-fav-note{text-align:center;margin:2px auto 10px}
.cr-fav-title{font-size:16px;color:#ffde6b}

.cr-fav-badge{
  background:#333;
  color:#fff;
  font-size:11px;
  padding:2px 6px;
  border-radius:12px;
  margin-left:6px;
}

.cr-muted{color:#aaa;font-size:12px;margin-left:8px}

.cr-fav-btn-left{
  border:none;
  background:transparent;
  color:#ffde6b;
  cursor:pointer;
  font-size:22px !important;
  line-height:1;
  font-family: Arial, Helvetica, sans-serif !important;
}

.cr-fav-btn-left[aria-pressed="true"]{color:#ffd000}

/* --- Bloc "Ajouter votre station" + Contact --- */
/* Bloc Add Station + Contact */
.cr-infos {
  margin-top: 15px;
  margin-bottom: 25px;
  text-align: center;
  font-size: 14px;
  color: #ddd;
  line-height: 1.6;
}

.cr-infos a {
  color: #ffde6b;
  text-decoration: none;
  font-weight: bold;
}

.cr-infos a:hover {
  text-decoration: underline;
}

/* --- RESPONSIVE --- */
@media (max-width:768px){

  .cr-wrap{
    max-width:100%;
    padding:0 10px;
  }

  /* LOGO RESPONSIVE : réduction automatique sur mobile */
  .hero-logo{
    max-height:180px;
    width:90%;
    height:auto;
  }

  .cr-col-player{width:210px}

  .cr-status{
    min-width:auto;
    margin-left:0;
  }

  .cr-pbar{display:none}

  .cr-desc{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  img.cr-logo{
    width:58px;
    height:36px;
  }

  .cr-flagcap{
    max-width:70px;
  }

  .cr-play-wrap{
    gap:6px;
  }

  .cr-btn-play{
    padding:6px 8px;
  }

  .cr-td-fav{
    padding-top:2px;
  }

  /* grille drapeaux mobile */
  .cr-flagbar{
    grid-template-columns:repeat(3, 1fr); /* 3 colonnes en mobile */
    max-width:100%;
  }
}