/*
Theme Name: AlterMusica
Theme URI: https://altermusica.net
Description: Thème fidèle au design original d'AlterMusica — radio cosmopolite, musiques du monde
Author: Ophélie Cohen
Version: 1.0
Text Domain: altermusica
*/

/* ── RESET & BASE ─────────────────────────────────────── */
* { font-family: Arial, Helvetica, sans-serif; font-size: 11px; box-sizing: border-box; margin:0; padding:0; }
body { background:#EDEDED; color:#000; }
a { text-decoration:none; color:inherit; }
a:hover { text-decoration:underline; }
img { max-width:100%; border:0; }

/* ── CLASSES ORIGINALES ───────────────────────────────── */
.lienorange { color:#E07618; font-weight:bold; font-size:11px; }
.liennoir   { color:#000; font-weight:bold; font-size:13px; }
.textgris   { color:#999; font-weight:bold; font-size:11px; line-height:14px; }
.titreorange{ color:#E07618; font-weight:bold; font-size:15px; }
.titreportrait { font-size:16px; font-weight:bold; color:#000; }
.texteportrait { font-size:12px; font-weight:bold; color:#000; }
.texteblanc { font-size:11px; font-weight:bold; color:#fff; }

/* ── WRAPPER ──────────────────────────────────────────── */
.am-wrapper { width:880px; margin:0 auto; }

/* ── HEADER ───────────────────────────────────────────── */
#site-header {
  width:880px; height:152px; margin:0 auto;
  background:url(img/bg_header.gif) center top no-repeat;
  background-size:cover;
  position:relative;
}

/* ── BREADCRUMB ───────────────────────────────────────── */
#breadcrumb {
  width:880px; margin:0 auto;
  background:#fff;
  padding:4px 0 4px 152px;
  border-bottom:1px solid #ddd;
  font-size:11px;
}

/* ── LAYOUT 3 COLONNES ────────────────────────────────── */
#layout { width:880px; margin:0 auto; display:flex; background:#fff; min-height:500px; }

/* Colonne gauche — navigation */
#sidenav {
  width:144px; flex-shrink:0;
  background:#fff;
  padding:8px 0;
  border-right:1px solid #eee;
}
#sidenav a { display:block; }
#sidenav a img { display:block; width:144px; margin-bottom:8px; }
#sidenav a.nav-text {
  display:block; padding:5px 8px;
  color:#E07618; font-weight:bold; font-size:11px;
  border-bottom:1px solid #eee;
}
#sidenav a.nav-text:hover { background:#f5f5f5; text-decoration:none; }

/* Contenu principal */
#main-content { flex:1; min-width:0; padding:0 12px 16px; }

/* Colonne droite — sidebar */
#sidebar-right {
  width:162px; flex-shrink:0;
  background:#f5f5f5;
  border-left:1px solid #ddd;
  padding:8px 0;
}

/* ── SECTION TITLES ───────────────────────────────────── */
.section-title {
  background:#E07618; color:#fff;
  font-weight:bold; font-size:12px;
  padding:4px 8px; margin:12px 0 8px;
  text-transform:uppercase; letter-spacing:.04em;
}
.section-title-teal {
  background:#9CBAB9; color:#fff;
  font-weight:bold; font-size:12px;
  padding:4px 8px; margin:12px 0 8px;
  text-transform:uppercase; letter-spacing:.04em;
}

/* ── PLAYER STRIP ─────────────────────────────────────── */
#player-strip {
  background:#1a1a1a; color:#fff;
  padding:8px 12px; margin-bottom:12px;
  display:flex; align-items:center; gap:12px;
}
.live-dot { width:8px; height:8px; border-radius:50%; background:#E07618; flex-shrink:0; }
#player-strip b { color:#E07618; }

/* ── ACTUALITÉS ───────────────────────────────────────── */
.actu-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin-bottom:14px;
}
.actu-card { border:1px solid #ddd; background:#fafafa; }
.actu-card-img { overflow:hidden; }
.actu-card-img img { width:100%; height:120px; object-fit:cover; display:block; }
.actu-card-img .placeholder { width:100%; height:120px; background:#C5D8D6; }
.actu-date { color:#E07618; font-weight:bold; font-size:10px; padding:5px 6px 2px; display:block; }
.actu-card h3 { font-size:11px; font-weight:bold; margin:0; padding:0 6px 4px; line-height:1.4; }
.actu-card p  { color:#555; padding:0 6px 6px; margin:0; font-size:10px; line-height:1.5; }

/* ── FILTRES PORTRAITS ────────────────────────────────── */
.portrait-filters {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:#f5f5f5; border:1px solid #e0e0e0;
  padding:7px 10px; margin:8px 0;
}
.filter-group { display:flex; align-items:center; gap:4px; }
.filter-group label { font-size:10px; color:#555; font-weight:bold; white-space:nowrap; }
.filter-group select {
  border:1px solid #ccc; font-size:10px; padding:2px 4px;
  background:#fff; color:#000; cursor:pointer;
}
.filter-btn {
  background:#E07618; color:#fff; border:none;
  padding:3px 10px; font-size:10px; font-weight:bold;
  cursor:pointer; font-family:Arial,Helvetica,sans-serif;
}
.filter-btn:hover { background:#c96610; }
.filter-reset {
  color:#666; font-size:10px; text-decoration:none;
  border:1px solid #ccc; padding:2px 7px; background:#fff;
}
.filter-reset:hover { background:#f0f0f0; text-decoration:none; }
.filter-active {
  font-size:10px; color:#555; margin:0 0 6px;
  padding:3px 6px; background:#fff3e8; border-left:3px solid #E07618;
}
.filter-pill {
  display:inline-block; background:#E07618; color:#fff;
  font-size:9px; font-weight:bold; padding:1px 6px; margin:0 3px;
  border-radius:2px;
}

/* ── PORTRAITS ────────────────────────────────────────── */
.portraits-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px;
  margin-bottom:14px;
}
.portrait-card { border:1px solid #ddd; background:#fff; transition:border-color .15s; }
.portrait-card:hover { border-color:#E07618; }
.portrait-card-img { display:block; }
.portrait-card-img img { width:100%; height:200px; object-fit:cover; object-position:top; display:block; }
.portrait-card-img .placeholder {
  width:100%; height:200px;
  background:linear-gradient(160deg,#9CBAB9 0%,#7a9b9a 100%);
  display:flex; align-items:center; justify-content:center;
}
.portrait-card-img .placeholder span {
  color:#fff; font-weight:bold; font-size:10px;
  text-align:center; padding:8px; line-height:1.4;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  letter-spacing:.03em; text-transform:uppercase;
}
.portrait-info { padding:5px 6px 7px; }
.portrait-name { font-weight:bold; font-size:11px; color:#000; margin-bottom:2px; }
.portrait-country { font-size:10px; color:#E07618; font-weight:bold; }
.portrait-genre { font-size:10px; color:#666; }
.portrait-card a { color:inherit; }
.portrait-card:hover .portrait-name { color:#E07618; }

/* ── ÉMISSIONS ────────────────────────────────────────── */
.em-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
  margin-bottom:14px;
}
.emission-card {
  background:#9CBAB9; padding:10px 12px;
  border:1px solid #88a8a5;
}
.em-name { font-weight:bold; font-size:12px; color:#000; margin-bottom:3px; text-transform:uppercase; }
.em-desc { font-size:10px; color:#333; line-height:1.5; }
.emission-card a { color:inherit; }
.emission-card:hover .em-name { color:#E07618; }

/* ── BIO BOX ──────────────────────────────────────────── */
.bio-box {
  background:#9CBAB9; padding:12px 14px;
  margin-bottom:14px; font-size:11px; line-height:1.6;
}
.bio-box h2 { font-size:14px; font-weight:bold; margin:0 0 8px; }

/* ── SINGLE PORTRAIT ──────────────────────────────────── */
.portrait-single { padding:12px 0; }
.portrait-single-header { display:flex; gap:16px; margin-bottom:12px; }
.portrait-single-photo { width:200px; flex-shrink:0; }
.portrait-single-photo img { width:200px; height:260px; object-fit:cover; object-position:top; display:block; }
.portrait-single-meta h1 { font-size:18px; font-weight:bold; margin-bottom:6px; }
.portrait-single-meta .country { color:#E07618; font-weight:bold; font-size:12px; }
.portrait-single-meta .genre { color:#666; font-size:11px; margin-top:2px; }
.portrait-single-meta .credit { color:#999; font-size:10px; margin-top:8px; }
.portrait-single-bio { font-size:12px; line-height:1.7; text-align:justify; }

/* ── ÉVÉNEMENTS ───────────────────────────────────────── */
.evenement-list { margin-bottom:14px; }
.ev-item {
  display:flex; gap:12px; padding:8px 0;
  border-bottom:1px solid #eee; align-items:flex-start;
}
.ev-date { width:80px; flex-shrink:0; font-family:Arial; font-size:11px; color:#E07618; font-weight:bold; }
.ev-body h3 { font-size:12px; font-weight:bold; margin-bottom:2px; }
.ev-body .ev-lieu { font-size:10px; color:#666; }
.ev-body .ev-genre { font-size:10px; color:#999; font-style:italic; }

/* ── SIDEBAR DROITE ───────────────────────────────────── */
.sb-title {
  background:#9CBAB9; color:#fff;
  font-weight:bold; font-size:10px;
  padding:4px 8px; margin-bottom:4px;
  text-transform:uppercase;
}
.sb-event {
  padding:5px 8px 7px;
  border-bottom:1px solid #ddd;
  font-size:10px; line-height:1.4;
}
.sb-date { color:#E07618; font-weight:bold; font-size:9px; }
.sb-artiste { font-weight:bold; color:#000; font-size:10px; margin:1px 0; }
.sb-lieu { color:#555; font-size:9px; }
.sb-genre { color:#888; font-style:italic; font-size:9px; }
.sb-fest {
  padding:5px 8px 7px; border-bottom:1px solid #ddd;
}
.sb-fest-name { font-weight:bold; color:#000; font-size:10px; }
.sb-fest-dates { color:#E07618; font-size:9px; font-weight:bold; }
.sb-fest-lieu { color:#666; font-size:9px; }
.sb-tag-ok { color:#1f7a55; font-size:9px; font-weight:bold; }
.sb-more {
  display:block; text-align:center; padding:8px;
  color:#E07618; font-weight:bold; font-size:10px;
}
.sb-more:hover { text-decoration:underline; }

/* ── FOOTER ───────────────────────────────────────────── */
#site-footer {
  width:880px; margin:0 auto;
  background:#2a2a2a; color:#ccc;
  padding:12px 20px; font-size:10px;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap;
}
#site-footer a { color:#E07618; }
#site-footer a:hover { text-decoration:underline; }
.footer-links { display:flex; gap:12px; flex-wrap:wrap; }

/* ── PAGINATION ───────────────────────────────────────── */
.pagination { padding:12px 0; display:flex; gap:6px; }
.pagination a, .pagination span {
  display:inline-block; padding:3px 7px;
  border:1px solid #ddd; font-size:11px;
  background:#fff;
}
.pagination .current { background:#E07618; color:#fff; border-color:#E07618; }
.pagination a:hover { background:#f5f5f5; text-decoration:none; }

/* ── FORMULAIRE COMMENTAIRES ──────────────────────────── */
.comment-form input, .comment-form textarea {
  width:100%; border:1px solid #ddd; padding:4px 6px;
  font-family:Arial; font-size:11px; margin-bottom:6px;
}
.comment-form input[type="submit"] {
  width:auto; background:#E07618; color:#fff;
  border:none; padding:5px 12px; cursor:pointer;
}

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width:920px) {
  .am-wrapper, #site-header, #breadcrumb, #layout, #site-footer { width:100%; }
  #sidenav { display:none; }
  #sidebar-right { display:none; }
  .actu-grid { grid-template-columns:1fr 1fr; }
  .portraits-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:600px) {
  .actu-grid { grid-template-columns:1fr; }
  .em-grid { grid-template-columns:1fr; }
  .portraits-grid { grid-template-columns:1fr 1fr; }
  body { padding:0 12px; }
}