/* ===========================================================
   NETRADIO FM — CSS PRINCIPAL
   v1.0.0
   =========================================================== */

:root {
  --nr-ink: #0a0a0a;
  --nr-paper: #ffffff;
  --nr-paper-warm: #faf7f2;
  --nr-paper-deep: #f0ebe1;
  --nr-red: #e10a16;
  --nr-red-deep: #b00811;
  --nr-accent: #ff3b1f;
  --nr-citrus: #d9ff3a;
  --nr-rule: rgba(10,10,10,0.12);
  --nr-rule-strong: rgba(10,10,10,0.85);
  --nr-serif: 'Fraunces', Georgia, serif;
  --nr-sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --nr-mono: 'JetBrains Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--nr-paper);
  color: var(--nr-ink);
  font-family: var(--nr-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 100px;
}
body.admin-bar { padding-bottom: 100px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* TOPBAR */
.nr-topbar {
  background: var(--nr-ink);
  color: white;
  padding: 8px 24px;
  font-family: var(--nr-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #222;
}
.nr-topbar .nr-live { display: flex; align-items: center; gap: 10px; }
.nr-topbar .nr-livedot { width: 8px; height: 8px; background: var(--nr-red); border-radius: 50%; animation: nrPulseRed 1.5s infinite; }
@keyframes nrPulseRed { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.3); } }
.nr-topbar .nr-social { display: flex; gap: 16px; }
.nr-topbar .nr-social a { transition: color .2s; }
.nr-topbar .nr-social a:hover { color: var(--nr-red); }

/* HEADER */
.nr-header {
  background: white;
  border-bottom: 3px solid var(--nr-red);
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 20px rgba(0,0,0,0.04);
}
body.admin-bar .nr-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nr-header { top: 46px; } }

.nr-logo {
  font-family: var(--nr-serif);
  font-weight: 900;
  font-style: italic;
  font-size: 32px;
  letter-spacing: -0.04em;
  color: var(--nr-red);
  line-height: 1;
}
.nr-logo span { color: var(--nr-ink); }
.nr-logo img { max-height: 50px; width: auto; }

.nr-nav { display: flex; gap: 28px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; list-style: none; margin: 0; padding: 0; }
.nr-nav li { list-style: none; }
.nr-nav a { position: relative; padding-bottom: 4px; transition: color .2s; }
.nr-nav a:hover { color: var(--nr-red); }
.nr-nav a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--nr-red); transition: width .3s; }
.nr-nav a:hover::after, .nr-nav .current-menu-item a::after { width: 100%; }
.nr-nav .current-menu-item a { color: var(--nr-red); }

.nr-header-cta { display: flex; align-items: center; gap: 16px; }
.nr-listen-btn {
  background: var(--nr-red); color: white; padding: 10px 20px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 0;
  font-family: var(--nr-sans);
  transition: transform .2s, box-shadow .2s;
}
.nr-listen-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(225,10,22,0.3); }
.nr-listen-btn::before { content: ''; width: 0; height: 0; border-left: 7px solid white; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* HERO HOME */
.nr-hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--nr-rule);
  align-items: stretch;
}
.nr-hero-main {
  background: var(--nr-ink); color: white; padding: 60px 50px;
  position: relative; overflow: hidden; min-height: 580px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.nr-hero-main::before {
  content: ''; position: absolute; inset: 0;
  background-size: cover; background-position: center; opacity: 0.6; z-index: 0;
}
.nr-hero-main[data-bg]::before { background-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%), var(--nr-bg, none); }
.nr-hero-main > * { position: relative; z-index: 1; }

.nr-hero-kicker {
  font-family: var(--nr-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; margin-bottom: 24px;
  display: flex; align-items: center; gap: 12px;
}
.nr-hero-kicker .nr-tag {
  background: var(--nr-red); padding: 4px 10px; border-radius: 2px; font-weight: 700;
}

.nr-hero-title {
  font-family: var(--nr-serif); font-weight: 900;
  font-size: clamp(36px, 5vw, 68px); line-height: 0.95; letter-spacing: -0.03em;
  margin: 0 0 20px 0; max-width: 800px;
}
.nr-hero-title em { font-style: italic; font-weight: 500; color: var(--nr-citrus); }

.nr-hero-dek {
  font-family: var(--nr-serif); font-style: italic;
  font-size: 19px; line-height: 1.4; max-width: 600px;
  opacity: 0.85; margin: 0 0 28px 0;
}

.nr-hero-byline {
  font-family: var(--nr-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.7; display: flex; gap: 20px;
}

/* SIDEBAR RADIO — colonne droite, fixe en hauteur */
.nr-hero-side {
  background: var(--nr-paper-warm); padding: 40px 32px;
  border-left: 1px solid var(--nr-rule);
  display: flex; flex-direction: column; gap: 24px;
  /* CRITIQUE : ne pas dépasser la hauteur du hero principal */
  min-height: 0;
  overflow: hidden;
}

/* Widget RadioBoss : conteneur flex qui s'adapte au parent */
.nr-radioboss-widget {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0; /* permet à l'enfant grid de se réduire */
  overflow: hidden;
}

.nr-side-header {
  font-family: var(--nr-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600; color: var(--nr-red);
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 2px solid var(--nr-ink);
  flex-shrink: 0;
}

.nr-now-playing {
  display: flex; gap: 16px; align-items: center; padding: 16px;
  background: white; border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  flex-shrink: 0;
}

.nr-cover {
  width: 70px; height: 70px; border-radius: 4px;
  object-fit: cover; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.nr-now-info { flex: 1; min-width: 0; }
.nr-now-label {
  font-family: var(--nr-mono); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--nr-red); font-weight: 600;
  margin-bottom: 4px; display: flex; align-items: center; gap: 6px;
}
.nr-now-label::before { content: ''; width: 6px; height: 6px; background: var(--nr-red); border-radius: 50%; animation: nrPulseRed 1.5s infinite; }
.nr-now-title {
  font-family: var(--nr-serif); font-size: 16px; font-weight: 700; line-height: 1.2;
  margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nr-now-artist { font-size: 13px; color: rgba(10,10,10,0.65); font-weight: 500; }

.nr-history-title {
  font-family: var(--nr-mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; font-weight: 600; color: rgba(10,10,10,0.55);
  margin-top: 8px;
  flex-shrink: 0;
}

/* GRILLE HISTORIQUE : strictement 4 colonnes × 3 lignes = 12 items max */
.nr-history {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-rows: 0; /* CRITIQUE : tout item au-delà des 12 a une hauteur de 0 */
  grid-auto-flow: row;
  gap: 6px;
  overflow: hidden;
  min-height: 0;
}
/* Cacher tout item au-delà du 12e (sécurité supplémentaire) */
.nr-history > .nr-history-cover:nth-child(n+13) {
  display: none;
}
.nr-history-cover {
  position: relative; aspect-ratio: 1; border-radius: 3px; overflow: hidden;
  cursor: pointer; transition: transform .2s; background: var(--nr-paper-deep);
}
.nr-history-cover:hover { transform: scale(1.05); z-index: 2; }
.nr-history-cover img { width: 100%; height: 100%; object-fit: cover; }
.nr-history-cover .nr-history-info {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.9));
  color: white; padding: 4px;
  display: flex; flex-direction: column; justify-content: flex-end;
  font-size: 9px; line-height: 1.1;
  opacity: 0; transition: opacity .2s;
}
.nr-history-cover:hover .nr-history-info { opacity: 1; }
.nr-history-cover .nr-history-info strong { font-weight: 700; display: block; }

/* SECTIONS */
.nr-section { padding: 50px 24px; max-width: 1400px; margin: 0 auto; }
.nr-section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 30px; padding-bottom: 16px; border-bottom: 2px solid var(--nr-ink);
}
.nr-section-title {
  font-family: var(--nr-serif); font-weight: 900; font-size: 38px;
  letter-spacing: -0.02em; line-height: 1; margin: 0;
}
.nr-section-title .nr-section-num {
  font-family: var(--nr-mono); font-size: 12px; color: var(--nr-red);
  margin-right: 12px; vertical-align: super; font-weight: 600; letter-spacing: 0.1em;
}
.nr-section-link {
  font-family: var(--nr-mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; font-weight: 600; color: var(--nr-red);
  display: inline-flex; align-items: center; gap: 6px; transition: gap .2s;
}
.nr-section-link:hover { gap: 12px; }

/* GRILLE ARTICLES */
.nr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.nr-card { display: flex; flex-direction: column; cursor: pointer; transition: transform .3s; }
.nr-card:hover { transform: translateY(-4px); }
.nr-card:hover .nr-card-image img { transform: scale(1.05); }
.nr-card-image {
  aspect-ratio: 4 / 3; background: var(--nr-paper-deep); overflow: hidden;
  border-radius: 4px; margin-bottom: 14px; position: relative;
}
.nr-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.nr-card-tag {
  position: absolute; top: 10px; left: 10px; background: var(--nr-red); color: white;
  font-family: var(--nr-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 2px;
}
.nr-card-kicker {
  font-family: var(--nr-mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--nr-red); margin-bottom: 8px; font-weight: 600;
}
.nr-card h3 {
  font-family: var(--nr-serif); font-size: 19px; font-weight: 700;
  line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 10px 0; transition: color .2s;
}
.nr-card:hover h3 { color: var(--nr-red); }
.nr-card-meta {
  font-family: var(--nr-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(10,10,10,0.5); margin-top: auto;
}

/* GRANDE UNE */
.nr-feature {
  background: var(--nr-paper-warm); border-top: 1px solid var(--nr-rule);
  border-bottom: 1px solid var(--nr-rule); padding: 60px 24px;
}
.nr-feature-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.nr-feature-image {
  aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.nr-feature-image img { width: 100%; height: 100%; object-fit: cover; }
.nr-feature-kicker {
  font-family: var(--nr-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--nr-red); margin-bottom: 20px; font-weight: 600;
}
.nr-feature-title {
  font-family: var(--nr-serif); font-weight: 900;
  font-size: clamp(32px, 4vw, 56px); line-height: 1; letter-spacing: -0.03em;
  margin: 0 0 20px 0;
}
.nr-feature-title em { font-style: italic; font-weight: 500; color: var(--nr-accent); }
.nr-feature-dek {
  font-family: var(--nr-serif); font-style: italic;
  font-size: 19px; line-height: 1.5; margin: 0 0 24px 0; color: rgba(10,10,10,0.7);
}
.nr-feature-cta {
  font-family: var(--nr-mono); font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; font-weight: 700; color: var(--nr-red);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border: 2px solid var(--nr-red); border-radius: 2px;
  transition: all .3s;
}
.nr-feature-cta:hover { background: var(--nr-red); color: white; }

/* INFLUENCEURS */
.nr-influencers { background: var(--nr-ink); color: white; padding: 60px 24px; }
.nr-influencers-inner { max-width: 1400px; margin: 0 auto; }
.nr-influencers .nr-section-head { border-color: white; }
.nr-influencers .nr-section-link { color: var(--nr-citrus); }
.nr-inf-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto; gap: 24px;
}
.nr-inf-card { background: #161616; border-radius: 4px; overflow: hidden; cursor: pointer; transition: background .2s; }
.nr-inf-card:hover { background: #1f1f1f; }
.nr-inf-card.large { grid-row: span 2; }
.nr-inf-image { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.nr-inf-card.large .nr-inf-image { aspect-ratio: auto; height: 360px; }
.nr-inf-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.nr-inf-card:hover .nr-inf-image img { transform: scale(1.04); }
.nr-inf-content { padding: 20px; }
.nr-inf-card.large .nr-inf-content { padding: 28px; }
.nr-inf-kicker {
  font-family: var(--nr-mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--nr-citrus); margin-bottom: 10px; font-weight: 600;
}
.nr-inf-card h3 {
  font-family: var(--nr-serif); font-size: 18px; font-weight: 700;
  line-height: 1.2; letter-spacing: -0.01em; margin: 0;
}
.nr-inf-card.large h3 { font-size: 30px; }

/* PODCASTS */
.nr-podcasts { padding: 60px 24px; max-width: 1400px; margin: 0 auto; }
.nr-podcast-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.nr-podcast { display: flex; gap: 20px; align-items: flex-start; cursor: pointer; }
.nr-podcast-cover {
  width: 110px; height: 110px; flex-shrink: 0; border-radius: 8px;
  overflow: hidden; position: relative; box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.nr-podcast-cover::after {
  content: '▶'; position: absolute; inset: 0;
  background: rgba(225,10,22,0.85); color: white; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
}
.nr-podcast:hover .nr-podcast-cover::after { opacity: 1; }
.nr-podcast-cover img { width: 100%; height: 100%; object-fit: cover; }
.nr-podcast-info { flex: 1; }
.nr-podcast h4 {
  font-family: var(--nr-serif); font-size: 18px; font-weight: 700;
  line-height: 1.25; margin: 0 0 6px 0; letter-spacing: -0.01em;
}
.nr-podcast-meta {
  font-family: var(--nr-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(10,10,10,0.5); margin-bottom: 8px;
}
.nr-podcast-dek { font-size: 13px; line-height: 1.45; color: rgba(10,10,10,0.7); margin: 0; }

/* NEWSLETTER */
.nr-newsletter { background: var(--nr-red); color: white; padding: 70px 24px; text-align: center; }
.nr-newsletter-inner { max-width: 700px; margin: 0 auto; }
.nr-newsletter-kicker { font-family: var(--nr-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 16px; opacity: 0.85; }
.nr-newsletter h2 {
  font-family: var(--nr-serif); font-size: 48px; font-weight: 900;
  line-height: 1; letter-spacing: -0.03em; margin: 0 0 16px 0;
}
.nr-newsletter h2 em { font-style: italic; font-weight: 500; color: var(--nr-citrus); }
.nr-newsletter p {
  font-family: var(--nr-serif); font-style: italic; font-size: 18px;
  margin: 0 0 32px 0; opacity: 0.9;
}
.nr-newsletter-form { display: flex; gap: 0; max-width: 480px; margin: 0 auto; }
.nr-newsletter-form input {
  flex: 1; padding: 16px 20px; border: 0; font-family: var(--nr-sans);
  font-size: 15px; background: white; color: var(--nr-ink); border-radius: 4px 0 0 4px;
}
.nr-newsletter-form button {
  background: var(--nr-ink); color: white; border: 0; padding: 0 32px;
  font-family: var(--nr-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer; border-radius: 0 4px 4px 0;
  transition: background .2s;
}
.nr-newsletter-form button:hover { background: #2a2a2a; }

/* FOOTER */
.nr-footer { background: var(--nr-ink); color: rgba(255,255,255,0.75); padding: 70px 24px 24px; }
.nr-footer-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; }
.nr-footer-brand .nr-logo { font-size: 42px; margin-bottom: 16px; }
.nr-footer-brand .nr-logo span { color: white; }
.nr-footer-brand p { font-size: 13px; line-height: 1.6; margin: 0 0 16px 0; opacity: 0.65; }
.nr-footer-brand address { font-style: normal; font-size: 12px; opacity: 0.55; line-height: 1.6; }
.nr-footer-col h5 {
  font-family: var(--nr-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--nr-red); margin: 0 0 20px 0; font-weight: 600;
}
.nr-footer-col ul { list-style: none; padding: 0; margin: 0; }
.nr-footer-col li { margin-bottom: 10px; font-size: 13px; }
.nr-footer-col a { transition: color .2s; }
.nr-footer-col a:hover { color: white; }
.nr-footer-bottom {
  max-width: 1400px; margin: 50px auto 0; padding-top: 24px;
  border-top: 1px solid #222;
  font-family: var(--nr-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; display: flex; justify-content: space-between; opacity: 0.5;
}

/* LECTEUR FIXE */
.nr-player {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: white; padding: 14px 24px;
  display: flex; align-items: center; gap: 24px;
  z-index: 1000; border-top: 2px solid var(--nr-red);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.3);
}
.nr-player-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.nr-player-cover {
  width: 50px; height: 50px; border-radius: 4px;
  background: linear-gradient(135deg, var(--nr-red), var(--nr-accent));
  flex-shrink: 0; background-size: cover; background-position: center;
}
.nr-player-info { min-width: 0; }
.nr-player-label {
  font-family: var(--nr-mono); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--nr-red); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.nr-player-label::before { content: ''; width: 6px; height: 6px; background: var(--nr-red); border-radius: 50%; animation: nrPulseRed 1.5s infinite; }
.nr-player-title {
  font-family: var(--nr-serif); font-size: 15px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nr-player-artist { font-size: 12px; opacity: 0.7; font-weight: 500; }
.nr-player-controls { display: flex; align-items: center; gap: 16px; }
.nr-play-btn {
  width: 48px; height: 48px; border-radius: 50%; background: var(--nr-red);
  color: white; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, background .2s;
}
.nr-play-btn:hover { transform: scale(1.08); background: var(--nr-red-deep); }
.nr-play-btn .nr-play-icon { width: 0; height: 0; border-left: 12px solid white; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.nr-play-btn.playing .nr-play-icon { border: 0; width: 12px; height: 12px; margin: 0; position: relative; }
.nr-play-btn.playing .nr-play-icon::before, .nr-play-btn.playing .nr-play-icon::after {
  content: ''; position: absolute; width: 4px; height: 12px; background: white; top: 0;
}
.nr-play-btn.playing .nr-play-icon::before { left: 0; }
.nr-play-btn.playing .nr-play-icon::after { right: 0; }
.nr-volume { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.6); font-size: 14px; }
.nr-volume-slider {
  width: 100px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px;
  position: relative; cursor: pointer;
}
.nr-volume-bar { position: absolute; left: 0; top: 0; height: 100%; background: var(--nr-red); border-radius: 2px; width: 70%; }
.nr-player-right { display: flex; gap: 16px; font-family: var(--nr-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.6; }

/* SINGLE POST (article standard) */
.nr-single { max-width: 760px; margin: 60px auto; padding: 0 24px; }
.nr-single-header { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid var(--nr-rule); }
.nr-single-kicker { font-family: var(--nr-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nr-red); margin-bottom: 16px; font-weight: 600; }
.nr-single-title { font-family: var(--nr-serif); font-weight: 900; font-size: clamp(32px, 5vw, 56px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 20px 0; }
.nr-single-dek { font-family: var(--nr-serif); font-style: italic; font-size: 20px; line-height: 1.4; color: rgba(10,10,10,0.7); margin: 0 0 24px 0; }
.nr-single-meta { font-family: var(--nr-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(10,10,10,0.5); display: flex; gap: 20px; flex-wrap: wrap; }
.nr-single-featured { margin: 0 -24px 40px; }
.nr-single-featured img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.nr-single .entry-content { font-family: var(--nr-serif); font-size: 19px; line-height: 1.7; }
.nr-single .entry-content p { margin: 0 0 22px 0; }
.nr-single .entry-content h2, .nr-single .entry-content h3 { font-family: var(--nr-serif); letter-spacing: -0.02em; margin: 40px 0 16px; }
.nr-single .entry-content h2 { font-size: 32px; font-weight: 700; }
.nr-single .entry-content h3 { font-size: 24px; font-weight: 700; }
.nr-single .entry-content a { color: var(--nr-red); text-decoration: underline; text-underline-offset: 3px; }

/* ARCHIVE / CATEGORY */
.nr-archive-header { background: var(--nr-paper-warm); padding: 60px 24px 40px; text-align: center; border-bottom: 1px solid var(--nr-rule); }
.nr-archive-kicker { font-family: var(--nr-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nr-red); margin-bottom: 16px; }
.nr-archive-title { font-family: var(--nr-serif); font-weight: 900; font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 16px 0; }
.nr-archive-desc { font-family: var(--nr-serif); font-style: italic; font-size: 18px; max-width: 600px; margin: 0 auto; color: rgba(10,10,10,0.7); }

/* PAGINATION */
.nr-pagination { max-width: 1400px; margin: 40px auto; padding: 0 24px; text-align: center; }
.nr-pagination a, .nr-pagination span {
  display: inline-block; padding: 10px 16px; margin: 0 4px;
  font-family: var(--nr-mono); font-size: 12px; font-weight: 600;
  border: 1px solid var(--nr-rule); border-radius: 3px;
  transition: all .2s;
}
.nr-pagination a:hover { background: var(--nr-red); color: white; border-color: var(--nr-red); }
.nr-pagination .current { background: var(--nr-ink); color: white; border-color: var(--nr-ink); }

/* RESPONSIVE */
@media (max-width: 980px) {
  .nr-nav { display: none; }
  .nr-hero { grid-template-columns: 1fr; }
  .nr-hero-main { padding: 40px 24px; min-height: 400px; }
  .nr-grid { grid-template-columns: repeat(2, 1fr); }
  .nr-feature-inner { grid-template-columns: 1fr; }
  .nr-inf-grid { grid-template-columns: 1fr; }
  .nr-inf-card.large { grid-row: auto; }
  .nr-podcast-grid { grid-template-columns: 1fr; }
  .nr-footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
  .nr-player-right, .nr-volume { display: none; }
}

@media (max-width: 600px) {
  .nr-grid { grid-template-columns: 1fr; }
  .nr-footer-inner { grid-template-columns: 1fr; }
  .nr-section-title { font-size: 28px; }
  .nr-newsletter h2 { font-size: 32px; }
  .nr-topbar { font-size: 9px; padding: 8px 12px; }
  .nr-topbar .nr-social { display: none; }
}

/* MENU MOBILE */
.nr-menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nr-menu-toggle span { display: block; width: 24px; height: 2px; background: var(--nr-ink); margin: 5px 0; transition: .3s; }
@media (max-width: 980px) {
  .nr-menu-toggle { display: block; }
  .nr-nav { position: fixed; top: 80px; left: 0; right: 0; background: white; flex-direction: column; padding: 30px; gap: 20px; border-bottom: 3px solid var(--nr-red); transform: translateY(-200%); transition: transform .3s; z-index: 99; }
  .nr-nav.active { display: flex; transform: translateY(0); }
}

/* ============================================================
   SINGLE POST — LAYOUT MAGAZINE 2 COLONNES (v1.2)
   ============================================================ */

/* Hero pleine largeur pour articles non-magazine avec image */
.nr-single-hero {
  min-height: 480px;
  padding: 80px 24px 60px;
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  align-items: flex-end;
  border-bottom: 4px solid var(--nr-red);
}
.nr-single-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.nr-single-hero .nr-single-kicker { color: var(--nr-citrus); }
.nr-single-hero .nr-single-title {
  color: white;
  font-family: var(--nr-serif);
  font-weight: 900;
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 18px 0;
}
.nr-single-hero .nr-single-dek {
  color: rgba(255,255,255,0.9);
  font-family: var(--nr-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  max-width: 800px;
  margin: 0 0 24px 0;
}
.nr-single-hero .nr-single-meta {
  font-family: var(--nr-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Header classique (sans image) */
.nr-single-header-classic {
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 24px 40px;
  border-bottom: 1px solid var(--nr-rule);
}
.nr-single-header-classic .nr-single-kicker {
  font-family: var(--nr-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nr-red);
  margin-bottom: 16px;
  font-weight: 600;
}
.nr-single-title-classic {
  font-family: var(--nr-serif);
  font-weight: 900;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 20px 0;
}
.nr-single-dek-classic {
  font-family: var(--nr-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: rgba(10,10,10,0.7);
  margin: 0 0 24px 0;
}
.nr-single-meta-classic {
  font-family: var(--nr-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.5);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Layout 2 colonnes : article + sidebar sticky */
.nr-single-body-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 24px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
  align-items: start;
}

.nr-single-body { min-width: 0; }
.nr-single-body .entry-content {
  font-family: var(--nr-serif);
  font-size: 19px;
  line-height: 1.7;
  max-width: 700px;
}
.nr-single-body .entry-content p { margin: 0 0 22px 0; }
.nr-single-body .entry-content h2 {
  font-family: var(--nr-serif);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 40px 0 16px;
}
.nr-single-body .entry-content h3 {
  font-family: var(--nr-serif);
  font-weight: 700;
  font-size: 24px;
  margin: 32px 0 14px;
}
.nr-single-body .entry-content a {
  color: var(--nr-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nr-single-body .entry-content img {
  max-width: 100%;
  height: auto;
  margin: 24px 0;
  border-radius: 4px;
}
.nr-single-body .entry-content blockquote {
  font-family: var(--nr-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  margin: 36px 0;
  padding: 12px 0 12px 28px;
  border-left: 4px solid var(--nr-red);
}

/* Sidebar sticky */
.nr-single-sidebar,
.nr-mag-aside {
  position: relative;
}
.nr-mag-sticky {
  position: sticky;
  top: 130px; /* sous le header */
  display: flex;
  flex-direction: column;
  gap: 24px;
}
body.admin-bar .nr-mag-sticky { top: 162px; }

/* Layout magazine = full width body + aside flottante à droite */
.nr-mag-layout {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  padding: 0 24px;
  align-items: start;
}
.nr-mag-main { min-width: 0; }

/* Ajustements pour les éléments magazine dans le layout */
.nr-mag-main .ciao-article {
  margin: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.nr-mag-main .ciao-hero {
  max-width: none;
  padding: 60px 0 40px;
}
.nr-mag-main .ciao-body {
  max-width: none;
  margin: 60px 0;
  padding: 0;
}
.nr-mag-main .ciao-hero-visual {
  margin-left: -24px;
  margin-right: -24px;
}

/* Card "À lire aussi" */
.nr-related-card {
  background: white;
  border: 1px solid var(--nr-rule);
  border-radius: 6px;
  padding: 20px;
}
.nr-related-title {
  font-family: var(--nr-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--nr-red);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--nr-ink);
}
.nr-related-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--nr-rule);
  transition: background .2s;
}
.nr-related-item:last-child { border-bottom: 0; }
.nr-related-item:hover { background: var(--nr-paper-warm); margin: 0 -8px; padding: 12px 8px; border-radius: 4px; }
.nr-related-thumb {
  width: 70px;
  height: 70px;
  background-size: cover;
  background-position: center;
  background-color: var(--nr-paper-deep);
  border-radius: 4px;
  flex-shrink: 0;
}
.nr-related-info { flex: 1; min-width: 0; }
.nr-related-cat {
  font-family: var(--nr-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nr-red);
  font-weight: 600;
  margin-bottom: 4px;
}
.nr-related-info h4 {
  font-family: var(--nr-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Partage */
.nr-share {
  margin: 50px 0 0;
  padding: 28px 0;
  border-top: 1px solid var(--nr-rule);
  border-bottom: 1px solid var(--nr-rule);
}
.nr-share-label {
  font-family: var(--nr-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.6);
  margin-bottom: 14px;
}
.nr-share-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.nr-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--nr-ink);
  color: white;
  font-family: var(--nr-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: background .2s, transform .15s;
}
.nr-share-btn:hover { background: var(--nr-red); transform: translateY(-1px); }

/* Responsive : sidebar passe en dessous sur mobile/tablette */
@media (max-width: 980px) {
  .nr-single-body-layout,
  .nr-mag-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .nr-mag-sticky {
    position: static;
    top: auto;
  }
  .nr-mag-aside,
  .nr-single-sidebar {
    border-top: 2px solid var(--nr-ink);
    padding-top: 30px;
  }
}

/* ===========================================
   TABLE OF CONTENTS (TOC) automatique
   =========================================== */
.netradio-toc {
  background: var(--nr-paper-warm);
  border: 1px solid var(--nr-rule);
  border-left: 4px solid var(--nr-red);
  padding: 24px 28px;
  margin: 32px 0;
  border-radius: 4px;
}
.netradio-toc-title {
  font-family: var(--nr-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--nr-red);
  margin: 0 0 16px 0;
  padding: 0;
  border: 0;
}
.netradio-toc-list {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
}
.netradio-toc-list li {
  counter-increment: toc;
  font-family: var(--nr-serif);
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 8px;
  padding-left: 32px;
  position: relative;
}
.netradio-toc-list li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--nr-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--nr-red);
  letter-spacing: 0;
}
.netradio-toc-list li.toc-sub {
  padding-left: 52px;
  font-size: 14px;
  opacity: 0.85;
}
.netradio-toc-list li.toc-sub::before {
  left: 22px;
  font-size: 9px;
  opacity: 0.7;
}
.netradio-toc-list a {
  color: var(--nr-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.netradio-toc-list a:hover {
  border-bottom-color: var(--nr-red);
  color: var(--nr-red);
}

/* ===========================================
   RELATED POSTS — section fullwidth en bas d'article
   =========================================== */
.nr-related-section {
  background: var(--nr-paper-warm);
  border-top: 2px solid var(--nr-ink);
  padding: 60px 24px;
  margin-top: 60px;
}
.nr-related-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.nr-related-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}
.nr-related-section-title {
  font-family: var(--nr-serif);
  font-weight: 900;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.02em;
  margin: 0;
  flex-shrink: 0;
}
.nr-related-line {
  flex: 1;
  height: 2px;
  background: var(--nr-ink);
}
.nr-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.nr-related-tile {
  background: white;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform .25s, box-shadow .25s;
}
.nr-related-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.nr-related-tile a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.nr-related-tile-image {
  aspect-ratio: 16 / 10;
  background: var(--nr-paper-deep);
  overflow: hidden;
}
.nr-related-tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s;
}
.nr-related-tile:hover .nr-related-tile-image img {
  transform: scale(1.05);
}
.nr-related-tile-content {
  padding: 18px 20px 22px;
}
.nr-related-tile-kicker {
  font-family: var(--nr-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nr-red);
  font-weight: 700;
  margin-bottom: 8px;
}
.nr-related-tile-title {
  font-family: var(--nr-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}

@media (max-width: 900px) {
  .nr-related-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .netradio-toc { padding: 20px; }
}
@media (max-width: 540px) {
  .nr-related-grid { grid-template-columns: 1fr; }
}

/* ===========================================
   BARRE DE PROGRESSION DU MORCEAU (v2.1)
   Alimentée par started_at + duration de l'API RadioAirplay.
   Calculée côté client : aucune requête réseau.
   =========================================== */
.nr-player { position: relative; }

.nr-player-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
/* Visible seulement quand l'API fournit started_at + duration */
.nr-player-progress.is-available { opacity: 1; }

.nr-player-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--nr-red), var(--nr-accent, #ff3b1f));
  box-shadow: 0 0 8px rgba(225, 10, 22, 0.6);
  /* Le JS rafraîchit toutes les 250 ms : la transition lisse le mouvement */
  transition: width .25s linear;
}

/* Compteur temps écoulé / durée */
.nr-player-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.3;
}
.nr-player-time {
  font-family: var(--nr-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
}
.nr-player-bitrate {
  font-family: var(--nr-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.5;
}
/* Pas de morceau en cours (jingle, pub) → on masque le compteur */
.nr-player:not(.nr-is-music) .nr-player-time { opacity: 0.25; }

/* Pendant un jingle / une pub : la ligne artiste est vide, on la replie */
.nr-player.nr-is-break .nr-player-artist { display: none; }

/* Heure de diffusion sur les pochettes de l'historique */
.nr-history-cover { position: relative; }
.nr-history-time {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  background: rgba(10, 10, 10, 0.78);
  color: #fff;
  font-family: var(--nr-mono);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  padding: 2px 5px;
  border-radius: 2px;
  backdrop-filter: blur(3px);
  pointer-events: none;
}

@media (max-width: 720px) {
  .nr-player-time { display: none; }
  .nr-history-time { font-size: 8px; padding: 1px 4px; }
}

/* ===========================================
   LECTEUR — état de chargement (buffering HLS)
   =========================================== */
.nr-play-btn.loading {
  pointer-events: none;
  position: relative;
}
.nr-play-btn.loading .nr-play-icon {
  opacity: 0;
}
.nr-play-btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: nrSpin .7s linear infinite;
}
@keyframes nrSpin {
  to { transform: rotate(360deg); }
}

/* Le débit est mis à jour depuis les métadonnées HLS */
.nr-player-bitrate[data-nr-bitrate] {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .nr-play-btn.loading::after { animation-duration: 2s; }
}