:root{
  --bg: #171314;
  --bg-soft: #211a1b;
  --panel: #2a2122;
  --panel-2: #332728;
  --accent: #ff7a30;
  --accent-2: #ffb347;
  --text: #f5ece4;
  --text-dim: #c9b8ae;
  --border: #4a3a38;
  --success: #4caf82;
  --danger: #e2564f;
  --chip-bg: #3a2c2a;
  --chip-text: #ffcfa8;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 6px 18px rgba(0,0,0,.30);
}

html[data-theme="light"]{
  --bg: #f6f1ec;
  --bg-soft: #eee5dc;
  --panel: #ffffff;
  --panel-2: #fbf3ec;
  --accent: #ff7a30;
  --accent-2: #e8631c;
  --text: #2b201d;
  --text-dim: #7a6b64;
  --border: #e4d7cd;
  --success: #2f9d6c;
  --danger: #d1453d;
  --chip-bg: #ffe3cb;
  --chip-text: #a24d10;
  --shadow: 0 4px 14px rgba(60,40,20,.10);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  padding-bottom: 84px;
  transition: background .2s ease, color .2s ease;
}
a{color: inherit; text-decoration:none;}
.container{max-width:560px; margin:0 auto; padding:0 12px;}

/* Header */
.app-header{
  padding: 14px 12px 10px;
  text-align:center;
  position:relative;
}
.theme-toggle{
  position:absolute; top:10px; right:12px;
  width:36px; height:36px; border-radius:50%;
  background: var(--panel); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:pointer; box-shadow: var(--shadow);
}
.app-header h1{
  font-size: 1.05rem;
  margin: 2px 0 2px;
  letter-spacing:.3px;
}
.app-header p{
  color: var(--text-dim);
  font-size:.78rem;
  margin:0;
}
.top-nav{
  display:flex; justify-content:center; gap:6px;
  margin-top:10px; flex-wrap:wrap;
}
.top-nav a{
  font-size:.74rem;
  padding:6px 11px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
}
.top-nav a.current, .top-nav a:hover{
  color: #fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  border-color: transparent;
}

/* Filtres liste d'émissions */
.filters-bar{
  display:flex; gap:6px; margin: 6px 0 12px; flex-wrap:wrap;
}
.filters-bar select{
  flex:1; min-width:120px; padding:8px 10px; font-size:.8rem;
  border-radius: var(--radius-sm); border:1px solid var(--border);
  background: var(--panel); color: var(--text);
}
.theme-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.theme-chip{
  font-size:.72rem; padding:5px 11px; border-radius:999px;
  background: var(--chip-bg); color: var(--chip-text); font-weight:600;
  border:1px solid transparent;
}
.theme-chip.active{ border-color: var(--accent); }

/* Cards compactes */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 13px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.emission-card{ padding: 11px 13px; }
.emission-card .em-body{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.emission-card .em-info{ flex:1; min-width:0; }
.em-logo{
  width:110px; height:100px; object-fit:cover; border-radius:12px; flex:none;
  border:1px solid var(--border); background: var(--bg-soft);
}
@media (max-width: 380px){
  .em-logo{ width:84px; height:76px; border-radius:10px; }
}
.emission-card .em-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.emission-card h3{ margin:0; font-size:.92rem; line-height:1.25; }
.emission-card .em-chips{ display:flex; gap:4px; flex-wrap:wrap; margin: 5px 0 0; }
.emission-card .em-chips .theme-chip{ font-size:.64rem; padding:2px 8px; }
.emission-card p.desc{
  margin: 6px 0 0; color:var(--text-dim); font-size:.78rem; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.stats-row{ display:flex; gap:10px; font-size:.66rem; color:var(--text-dim); margin: 6px 0; }
.stats-row span{display:flex; align-items:center; gap:3px;}

audio{ width:100%; height:32px; margin: 6px 0; border-radius:999px; }

.btn-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding: 8px 12px;
  border-radius: 999px;
  border: none;
  font-size:.76rem;
  font-weight:600;
  cursor:pointer;
  flex:1;
  min-width: 96px;
  transition: transform .08s ease;
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background: linear-gradient(135deg, var(--accent-2), var(--accent)); color:#241512; }
html[data-theme="light"] .btn-primary{ color:#fff; }
.btn-outline{ background: transparent; border:1px solid var(--border); color: var(--text); }
.btn-block{ width:100%; }
.btn-danger{ background: var(--danger); color:#fff; }
.btn-sm{ padding:6px 10px; font-size:.72rem; flex: none; }

/* Toggle bouton "réduire les détails" (accordéon compact) */
.em-toggle-player{
  font-size:.72rem; color: var(--accent); font-weight:700; cursor:pointer;
  margin-top:6px; display:inline-block;
}
.em-player-body{ display:none; }
.em-player-body.open{ display:block; }

/* Forms */
label{ display:block; font-size:.8rem; color:var(--text-dim); margin: 10px 0 4px; }
input[type=text], input[type=number], input[type=date], input[type=password],
input[type=tel], input[type=file], input[type=url], textarea, select{
  width:100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size:.9rem;
  font-family: inherit;
}
textarea{ min-height: 70px; resize: vertical; }
input:focus, textarea:focus, select:focus{ outline: 2px solid var(--accent); }

.pin-input{
  font-size:1.6rem; letter-spacing: 8px; text-align:center; font-weight:700;
}

.checkbox-grid{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.checkbox-pill{
  display:flex; align-items:center; gap:6px;
  background: var(--bg-soft); border:1px solid var(--border);
  border-radius:999px; padding:6px 12px; font-size:.78rem;
}
.checkbox-pill input{ width:auto; }

.flash{
  padding: 10px 13px; border-radius: var(--radius-sm); margin-bottom: 12px; font-size:.84rem;
}
.flash-success{ background: rgba(76,175,130,.15); border:1px solid var(--success); color:#9fe3c3; }
html[data-theme="light"] .flash-success{ color:#1b6b48; }
.flash-error{ background: rgba(226,86,79,.15); border:1px solid var(--danger); color:#f5b2ae; }
html[data-theme="light"] .flash-error{ color:#a5241d; }

table{ width:100%; border-collapse: collapse; font-size:.81rem; }
th,td{ padding:8px 7px; border-bottom:1px solid var(--border); text-align:left; }
th{ color: var(--text-dim); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px;}
.table-wrap{ overflow-x:auto; }

.badge{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:.68rem; font-weight:600; }
.badge-ok{ background: rgba(76,175,130,.2); color:#3fae7c; }
.badge-off{ background: rgba(226,86,79,.2); color:#e2564f; }

.dash-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:16px; }
.dash-tile{
  background: var(--panel);
  border:1px solid var(--border); border-radius: var(--radius);
  padding: 14px; text-align:center;
}
.dash-tile .num{ font-size:1.5rem; font-weight:800; color: var(--accent); display:block; }
.dash-tile .lbl{ font-size:.7rem; color: var(--text-dim); }

.q-item{ padding:10px 0; border-bottom:1px dashed var(--border); }
.q-item:last-child{ border-bottom:none; }

.footer-nav{
  position:fixed; bottom:0; left:0; right:0;
  background: var(--panel);
  backdrop-filter: blur(6px);
  border-top:1px solid var(--border);
  display:flex;
}
.footer-nav a{
  flex:1; text-align:center; padding: 10px 4px 8px;
  font-size:.65rem; color: var(--text-dim);
}
.footer-nav a.active{ color: var(--accent); }
.footer-nav .ic{ display:block; font-size:1.1rem; margin-bottom:1px; }

.section-title{ font-size:.85rem; color: var(--text-dim); margin: 18px 0 8px; text-transform:uppercase; letter-spacing:.5px;}

.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.filters select, .filters input{ flex:1; min-width:140px; }

.empty-state{ text-align:center; color: var(--text-dim); padding: 26px 10px; font-size:.88rem; }

.source-badge{ font-size:.64rem; padding:2px 8px; border-radius:999px; background: var(--bg-soft); color: var(--text-dim); }