/*
Theme Name: Louange Radio 974 v2 - 1.0.127
Theme URI: https://lumiere.re/
Author: Louange Radio 974
Description: Theme WordPress pour Louange Radio 974, radio chretienne en direct a La Reunion.
Version: 1.0.127
Text Domain: louange-radio-974-v2
*/

:root {
  --ink: #101828;
  --muted: #667085;
  --line: #d9dee8;
  --paper: #ffffff;
  --soft: #f5f7fb;
  --navy: #151515;
  --navy-2: #242424;
  --gold: #f5c84b;
  --gold-2: #b88916;
  --red: #f41f2c;
  --red-dark: #c91522;
  --green: #1f6f63;
  --shadow: 0 20px 55px rgba(16, 24, 40, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.topbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 3vw, 30px);
  min-height: 34px;
  padding: 7px 18px;
  color: rgba(255, 255, 255, 0.86);
  background: var(--navy);
  font-size: 0.88rem;
  line-height: 1.2;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 12px clamp(18px, 4vw, 58px);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.admin-bar .site-header {
  top: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 900;
  white-space: nowrap;
}

.brand span::after {
  content: " 974";
}

.brand img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  font-size: 0.96rem;
  font-weight: 800;
}

.nav a {
  color: #253044;
  text-decoration: none;
}

.nav a[aria-current="page"] {
  color: var(--gold-2);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font-weight: 900;
}

.hero {
  position: relative;
  min-height: clamp(560px, 72vh, 760px);
  display: grid;
  align-items: start;
  overflow: hidden;
  background: var(--navy);
}

.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.68;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.96) 0%, rgba(12, 12, 12, 0.82) 38%, rgba(14, 14, 14, 0.46) 72%, rgba(14, 14, 14, 0.2) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(244, 31, 44, 0.2));
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(72px, 9vh, 112px) 0 clamp(56px, 8vh, 88px);
  color: white;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow.dark {
  color: var(--gold-2);
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

h1 {
  margin: 0;
  font-size: clamp(3.1rem, 5.4vw, 5.6rem);
  line-height: 1;
  white-space: normal;
  text-wrap: balance;
}

h2 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 4.2vw, 3.7rem);
  line-height: 1.04;
}

h3 {
  margin: 0 0 10px;
  font-size: 1.22rem;
}

.lead {
  color: var(--muted);
  font-size: 1.08rem;
}

.hero .lead {
  max-width: 650px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
}

.hero .eyebrow,
.hero h1,
.hero .lead {
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.actions.compact {
  margin-top: 18px;
}

.btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 900;
}

.btn.primary {
  background: var(--gold);
  color: #171100;
}

.btn.dark {
  background: var(--navy);
  color: white;
}

.btn.red {
  background: var(--red);
  color: white;
}

.btn.light {
  border-color: rgba(255, 255, 255, 0.55);
  color: white;
  background: rgba(255, 255, 255, 0.08);
}

.btn.outline {
  border-color: var(--line);
  background: white;
}

.btn.outline-dark {
  border-color: rgba(255, 255, 255, 0.28);
  color: white;
  background: rgba(255, 255, 255, 0.08);
}

.btn.smoke-dark {
  border-color: rgba(255, 255, 255, 0.18);
  color: white;
  background: rgba(18, 18, 18, 0.72);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.listen-dock {
  padding: 0 clamp(18px, 4vw, 58px);
  background:
    radial-gradient(circle at 12% 24%, rgba(244, 31, 44, 0.18), transparent 28%),
    linear-gradient(180deg, #111111, #181818 58%, #242424);
}

.player-card {
  width: min(1180px, 100%);
  margin: 0 auto;
  transform: translateY(-34px);
  display: grid;
  grid-template-columns: 1fr minmax(310px, 500px);
  gap: 24px;
  align-items: center;
  padding: clamp(22px, 4vw, 38px);
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.listen-dock + .section {
  padding-top: clamp(34px, 5vw, 60px);
}

.radio-showcase {
  display: grid;
  grid-template-columns: minmax(138px, 210px) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: 18px;
  background:
    radial-gradient(circle at 18% 18%, rgba(244, 31, 44, 0.22), transparent 34%),
    linear-gradient(135deg, #111111, #242424);
  border-radius: 8px;
  color: white;
}

.album-art {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
}

.track-block {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.live-pill {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(225, 29, 46, 0.16);
  border: 1px solid rgba(225, 29, 46, 0.42);
  color: #ff6b78;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.track-title {
  max-width: 100%;
  font-size: clamp(1.02rem, 1.45vw, 1.42rem);
  line-height: 1.18;
  font-weight: 800;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.track-details {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.78);
}

.track-details span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.play-button {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: #111111;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);
  font-size: 0.9rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
}

.play-button:hover {
  background: #ffd85f;
}

.player-meta {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: white;
}

.player-meta strong {
  color: white;
  font-size: 0.98rem;
  line-height: 1.25;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-meta small {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(225, 29, 46, 0.18);
  color: #ff8892;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.player-meta span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
}

.direct-note {
  max-width: 520px;
  margin: 18px 0 0;
  color: #475467;
  font-size: 0.96rem;
}

.direct-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  max-width: 520px;
}

.direct-link {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.direct-link:hover {
  transform: translateY(-1px);
  border-color: #c8d0dc;
  box-shadow: 0 16px 32px rgba(16, 24, 40, 0.12);
}

.direct-link span {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: var(--navy);
  color: white;
  font-size: 0.72rem;
  line-height: 1;
}

.direct-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

.direct-icon.social-logo {
  overflow: visible;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
}

.direct-icon.social-logo img {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: contain;
  display: block;
}

.direct-link.apk span {
  background: var(--gold-2);
}

.direct-link.tiktok span {
  background: #ffffff;
}

.direct-link.whatsapp span {
  background: #ffffff;
}

.direct-link.facebook span {
  background: #ffffff;
}

.social-btn {
  gap: 12px;
  padding-inline: 14px 18px;
}

.social-btn img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.section {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(56px, 8vw, 94px) 0;
}

.section.alt {
  width: 100%;
  max-width: none;
  padding-inline: max(18px, calc((100% - 1180px) / 2));
  background: var(--soft);
}

.split {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

.feature-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.mission-section {
  max-width: 980px;
}

.mission-section .lead {
  max-width: 860px;
}

.stats,
.cards,
.article-grid,
.contact-grid {
  display: grid;
  gap: 18px;
}

.stats {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 28px;
}

.cards,
.article-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 26px;
}

.contact-grid {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.stat,
.card,
.article,
.contact-box,
.schedule-row,
.schedule-table-wrap {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.stat,
.card,
.contact-box,
.schedule-row {
  padding: 22px;
}

.stat strong {
  display: block;
  font-size: 1.55rem;
}

.stat span,
.card p,
.article p,
.contact-box p,
.schedule-row p {
  color: var(--muted);
}

.message-panel {
  padding: 26px;
  color: white;
  background:
    radial-gradient(circle at 88% 12%, rgba(244, 31, 44, 0.18), transparent 28%),
    linear-gradient(135deg, #111111, #242424);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(16, 24, 40, 0.16);
}

.message-page {
  width: min(620px, calc(100% - 36px));
}

.message-panel h2 {
  color: white;
  font-size: clamp(2rem, 4vw, 3rem);
}

.message-desc {
  margin-top: -4px;
  color: rgba(255, 255, 255, 0.78);
}

.message-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.field label {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 800;
}

.message-form input[type="text"],
.message-form input[type="email"],
.message-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.96);
  color: #111111;
  font: inherit;
}

.message-form textarea {
  min-height: 138px;
  resize: vertical;
}

.hint,
.hold-instruction {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
}

.required {
  color: var(--gold);
}

.hidden-trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.hold-wrap {
  margin-top: 8px;
}

.hold-instruction {
  margin-bottom: 8px;
  text-align: center;
}

.hold-btn {
  position: relative;
  width: 100%;
  height: 50px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: white;
  color: #111111;
  cursor: pointer;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  user-select: none;
  touch-action: manipulation;
}

.hold-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, #15803d, #22c55e);
  transition: width 0.05s linear;
  z-index: 1;
}

.hold-label {
  position: relative;
  z-index: 2;
  display: grid;
  height: 50px;
  place-items: center;
  padding: 0 12px;
}

.msg-ok,
.msg-error,
.form-notice {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
}

.msg-ok,
.form-notice-ok {
  color: #bbf7d0;
  background: rgba(22, 163, 74, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.5);
}

.msg-error,
.form-notice-error {
  color: #fed7aa;
  background: rgba(248, 113, 22, 0.12);
  border: 1px solid rgba(248, 113, 22, 0.65);
}

.featured-articles {
  width: 100%;
  max-width: none;
  padding-inline: max(18px, calc((100% - 1180px) / 2));
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
}

.app-section {
  width: 100%;
  max-width: none;
  padding-block: clamp(36px, 5vw, 58px);
  padding-inline: max(18px, calc((100% - 1180px) / 2));
  background: #111111;
  color: white;
}

.app-panel {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 340px);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding: clamp(26px, 5vw, 52px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background:
    radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.08), transparent 32%),
    linear-gradient(135deg, #111111, #202020 54%, #262626);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22);
}

.app-panel .lead {
  color: rgba(255, 255, 255, 0.78);
}

.app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.app-actions .btn {
  min-height: 52px;
  border-radius: 12px;
}

.app-actions .btn.outline-dark {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.app-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
}

.app-card img {
  width: 142px;
  height: 142px;
  object-fit: contain;
}

.app-card strong {
  font-size: 1.25rem;
}

.app-card span {
  color: rgba(255, 255, 255, 0.74);
}

.articles-intro {
  width: min(720px, 100%);
  margin-top: 0;
}

.article {
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(16, 24, 40, 0.08);
}

.article img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article h3,
.article p,
.article a {
  margin-left: 18px;
  margin-right: 18px;
}

.article h3 {
  margin-top: 18px;
}

.article a {
  display: inline-flex;
  margin-bottom: 20px;
  color: var(--gold-2);
  font-weight: 900;
  text-decoration: none;
}

.audio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}

.audio-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  background: white;
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(16, 24, 40, 0.08);
}

.audio-card h3 {
  margin: 0;
  font-size: 1.25rem;
}

.audio-meta,
.audio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.audio-meta span,
.audio-tags span {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--soft);
  color: #344054;
  font-size: 0.82rem;
  font-weight: 800;
}

.audio-card p {
  margin: 0;
  color: var(--muted);
}

.audio-card audio {
  width: 100%;
}

.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(54px, 8vw, 96px) clamp(18px, 4vw, 58px);
  color: white;
  background:
    radial-gradient(circle at 82% 20%, rgba(244, 31, 44, 0.18), transparent 28%),
    linear-gradient(135deg, #111111, #242424);
}

.page-hero-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.page-hero h1 {
  font-size: clamp(2.7rem, 7vw, 5.4rem);
}

.morning-hero,
.planning-hero {
  /* v1.0.21 : fond noir fumé propre, sans image lisible derrière et sans voile trop clair. */
  background:
    radial-gradient(circle at 86% 12%, rgba(245, 200, 75, 0.10), transparent 30%),
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.045), transparent 28%),
    linear-gradient(135deg, #0b0b0d 0%, #141414 54%, #202020 100%);
}

.morning-hero::before,
.planning-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.08)),
    radial-gradient(circle at 70% 34%, rgba(255, 255, 255, 0.045), transparent 36%);
}

.morning-hero .page-hero-inner,
.planning-hero .page-hero-inner {
  position: relative;
  z-index: 1;
}

.morning-section {
  padding-top: clamp(42px, 6vw, 72px);
}

.morning-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) 1fr;
  gap: clamp(22px, 4vw, 46px);
  align-items: center;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: 0 16px 38px rgba(16, 24, 40, 0.08);
}

.morning-panel:not(:has(.morning-image)) {
  grid-template-columns: 1fr;
}

.morning-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.morning-content {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.morning-content h2 {
  margin-bottom: 0;
}

.morning-content .lead {
  margin: 0;
}

.morning-content audio {
  width: 100%;
}

.schedule {
  display: grid;
  gap: 12px;
}

.schedule-note {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid #f1d891;
  border-radius: 8px;
  background: #fff8e7;
  color: #7a5600;
  font-weight: 800;
}

.schedule-table-wrap {
  overflow-x: auto;
}

.schedule-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.schedule-table th,
.schedule-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  vertical-align: top;
}

.schedule-table th:last-child,
.schedule-table td:last-child {
  border-right: 0;
}

.schedule-table tr:last-child td {
  border-bottom: 0;
}

.schedule-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--navy);
  color: white;
  text-align: left;
}

.schedule-table .time-col {
  width: 86px;
  color: var(--green);
  font-weight: 900;
  white-space: nowrap;
}

.program {
  display: block;
  font-weight: 800;
}

.program small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 700;
}

.schedule-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  align-items: start;
}

.schedule-row strong {
  color: var(--green);
}

.site-footer {
  padding: clamp(34px, 5vw, 54px) clamp(18px, 4vw, 58px) 24px;
  color: rgba(255, 255, 255, 0.82);
  background: #111111;
}

.footer-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr 0.85fr 1.05fr;
  gap: clamp(22px, 4vw, 46px);
}

.footer-intro h2 {
  margin: 0 0 20px;
  color: white;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1;
}

.footer-intro p,
.footer-block p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.76);
}

.footer-block h2 {
  position: relative;
  margin: 0 0 22px;
  color: white;
  font-size: 1.45rem;
}

.footer-block h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 34px;
  height: 3px;
  background: var(--red);
}

.footer-block a,
.footer-intro a {
  color: white;
  text-decoration: none;
  font-weight: 800;
}

.footer-line {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
}

.footer-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: #2b2b2b;
  font-size: 0.9rem;
  font-weight: 900;
}

.footer-socials {
  display: grid;
  gap: 10px;
}

.footer-socials a {
  width: fit-content;
  padding-bottom: 3px;
  border-bottom: 2px solid rgba(225, 29, 46, 0.65);
}

.footer-bottom {
  width: min(1180px, 100%);
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255, 255, 255, 0.62);
}


.footer-message-block {
  min-width: 0;
}

.footer-message-intro {
  display: none;
}

.footer-message-form {
  gap: 7px;
  margin-top: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: #111111;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.footer-message-form .field label {
  margin-bottom: 3px;
  font-size: 0.74rem;
}

.footer-message-form input[type="text"],
.footer-message-form input[type="email"],
.footer-message-form textarea {
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 0.84rem;
}

.footer-message-form textarea {
  min-height: 58px;
}

.footer-message-form .hint,
.footer-message-form .hold-instruction {
  display: none;
}

.footer-message-form .hold-wrap {
  margin-top: 2px;
}

.footer-message-form .hold-btn,
.footer-message-form .hold-label {
  height: 38px;
  border-radius: 9px;
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 88px;
  }

  .topbar {
    display: none;
  }

  .site-header {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .menu-toggle {
    display: inline-grid;
    place-items: center;
  }

  .nav {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }

  .site-header.is-open .nav {
    display: grid;
  }

  .nav a {
    padding: 13px 0;
  }

  .hero {
    min-height: min(720px, calc(100svh - 84px));
    align-items: start;
  }

  .hero-content {
    width: min(100% - 36px, 720px);
    margin: 0 18px;
    padding: clamp(92px, 14svh, 128px) 0 clamp(48px, 8svh, 72px);
  }

  .hero h1 {
    font-size: clamp(3rem, 12vw, 5rem);
    line-height: 1.02;
    max-width: 10ch;
    white-space: normal;
  }

  .player-card,
  .split,
  .contact-grid,
  .morning-panel {
    grid-template-columns: 1fr;
  }

  .cards,
  .article-grid,
  .audio-grid,
  .stats {
    grid-template-columns: 1fr;
  }

  .schedule-row {
    grid-template-columns: 1fr;
  }

  .radio-showcase {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .direct-links {
    grid-template-columns: 1fr;
  }

  .app-panel {
    grid-template-columns: 1fr;
  }

  .album-art {
    width: min(260px, 100%);
    justify-self: center;
  }

  .track-title {
    font-size: clamp(1rem, 4.8vw, 1.3rem);
    line-height: 1.2;
    -webkit-line-clamp: 3;
  }

  .player-shell {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    display: grid;
  }
}

@media (min-width: 1120px) {
  .hero h1 {
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .hero-content {
    padding-top: clamp(78px, 12svh, 112px);
  }

  .hero h1 {
    font-size: clamp(3rem, 14vw, 4.35rem);
  }

  .direct-link {
    min-height: 64px;
  }
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}


.app-actions .social-btn {
  min-width: 160px;
  justify-content: flex-start;
}


/* v1.0.21 - correction finale planning/pensée : lisibilité mobile et fond noir fumé */
@media (max-width: 720px) {
  .planning-hero,
  .morning-hero {
    padding: 64px 24px 72px;
    background:
      radial-gradient(circle at 88% 10%, rgba(245, 200, 75, 0.08), transparent 30%),
      linear-gradient(135deg, #0a0a0c 0%, #151515 56%, #202020 100%) !important;
  }

  .planning-hero h1,
  .morning-hero h1 {
    color: #ffffff;
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
  }

  .planning-hero .lead,
  .morning-hero .lead {
    color: #9aa4b8;
  }
}


/* v1.0.25 - bloc emissions + image hebergee Pascal Cariou + formulaire footer noir */
.featured-articles.lr974-emissions-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(245, 200, 75, 0.12), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(244, 31, 44, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
}

.lr974-emissions-head {
  display: grid;
  gap: 10px;
  max-width: 780px;
}

.lr974-emissions-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr 0.9fr;
  gap: 18px;
  margin-top: 28px;
}

.lr974-emission-card {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border-radius: 22px;
  isolation: isolate;
  color: #ffffff;
  text-decoration: none;
  background: #111111;
  box-shadow: 0 22px 54px rgba(16, 24, 40, 0.16);
  transform: translateY(0) scale(1);
  transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease;
}

.lr974-emission-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.26) 42%, rgba(0, 0, 0, 0.82) 100%);
}

.lr974-emission-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  pointer-events: none;
}

.lr974-emission-card:hover,
.lr974-emission-card:focus-visible,
.lr974-emission-card:active {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 30px 70px rgba(16, 24, 40, 0.22);
  filter: saturate(1.06);
}

.lr974-emission-card:focus-visible {
  outline: 3px solid rgba(245, 200, 75, 0.7);
  outline-offset: 4px;
}

.lr974-emission-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.32s ease;
}

.lr974-emission-card:hover img,
.lr974-emission-card:focus-visible img,
.lr974-emission-card:active img {
  transform: scale(1.08);
}

.lr974-emission-card-content {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 3;
  display: grid;
  gap: 10px;
}

.lr974-emission-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #111111;
  background: linear-gradient(135deg, #ffe9a8, #f5c84b);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.lr974-emission-card h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.05;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.lr974-emission-card p {
  margin: 0;
  max-width: 420px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 650;
  line-height: 1.45;
}

.lr974-emission-action {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: #ffe9a8;
  font-weight: 950;
}

.lr974-emission-card--featured {
  min-height: 430px;
}

.lr974-emission-card--featured .lr974-emission-card-content {
  left: 28px;
  right: 28px;
  bottom: 28px;
}

.lr974-emission-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.94rem;
}

@media (max-width: 900px) {
  .lr974-emissions-grid {
    grid-template-columns: 1fr;
  }

  .lr974-emission-card,
  .lr974-emission-card--featured {
    min-height: 360px;
  }
}

@media (max-width: 460px) {
  .lr974-emission-card,
  .lr974-emission-card--featured {
    min-height: 318px;
    border-radius: 18px;
  }

  .lr974-emission-card-content,
  .lr974-emission-card--featured .lr974-emission-card-content {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .lr974-emission-card h3 {
    font-size: 1.45rem;
  }
}


/* v1.0.25 - securite visuelle : formulaire du footer toujours noir */
.site-footer .footer-message-form {
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.22) !important;
}
.site-footer .footer-message-form .field label {
  color: #ffffff !important;
}
.site-footer .footer-message-form input[type="text"],
.site-footer .footer-message-form input[type="email"],
.site-footer .footer-message-form textarea {
  background: #f5f5f5 !important;
  color: #111111 !important;
  border-color: rgba(255,255,255,0.28) !important;
}
.site-footer .footer-message-form .hold-btn {
  background: #ffffff !important;
  color: #111111 !important;
}
.site-footer .footer-message-form .hold-label {
  color: #111111 !important;
}

/* v1.0.26 - pages internes pour les émissions audio */
.audio-series-section {
  padding-top: 10px;
}

.audio-series-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.15fr);
  gap: 26px;
  align-items: center;
  padding: 28px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #faf8f2 100%);
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.08);
}

.audio-series-cover-wrap {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: 24px;
  background: #111111;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.audio-series-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.audio-series-content {
  display: grid;
  gap: 14px;
}

.audio-series-content h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(2rem, 4.1vw, 3rem);
  line-height: 1.05;
}

.audio-series-content audio {
  width: 100%;
}

.audio-series-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

@media (max-width: 900px) {
  .audio-series-panel {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .audio-series-cover-wrap {
    min-height: 300px;
  }
}

@media (max-width: 520px) {
  .audio-series-panel {
    padding: 18px;
    border-radius: 22px;
  }

  .audio-series-cover-wrap {
    min-height: 240px;
    border-radius: 20px;
  }
}


/* v1.0.27 - formulaire footer noir forcé */
.site-footer .footer-message-block,
.site-footer .footer-message-form {
  background: #111111 !important;
}
.site-footer .footer-message-form {
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.32) !important;
}
.site-footer .footer-message-form input[type="text"],
.site-footer .footer-message-form input[type="email"],
.site-footer .footer-message-form textarea {
  background: #f7f7f7 !important;
  color: #111111 !important;
}
.site-footer .footer-message-form .hold-btn {
  background: #ffffff !important;
  color: #111111 !important;
}
.site-footer .footer-message-form .hold-label {
  color: #111111 !important;
}

/* v1.0.27 - carte Pascal avec photo originale */
.lr974-emission-card--featured img {
  object-position: center center;
}

.lr974-audio-status {
  color: var(--muted);
  font-weight: 700;
  min-height: 24px;
}


/* v1.0.28 - finitions footer, retours, page Pascal */
.featured-articles.lr974-emissions-section {
  padding-bottom: 22px !important;
  margin-bottom: 0 !important;
}
.featured-articles.lr974-emissions-section + .section.alt {
  padding-top: clamp(30px, 4vw, 48px) !important;
}
.lr974-back-wrap {
  width: min(1180px, calc(100% - 36px));
  margin: 22px auto 0;
}
.lr974-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(17,24,39,0.12);
  border-radius: 999px;
  color: #111111;
  background: #ffffff;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}
.lr974-back-link:hover,
.lr974-back-link:focus-visible {
  border-color: rgba(245,200,75,0.65);
  color: #8a6400;
}
.morning-panel {
  align-items: stretch;
}
.morning-content {
  display: grid;
  align-content: center;
  gap: 14px;
}
.pascal-info-card {
  display: grid;
  gap: 8px;
  margin: 6px 0 4px;
  padding: 16px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, #0f2f57 0%, #123c70 100%);
  box-shadow: 0 18px 36px rgba(15,47,87,0.18);
}
.pascal-info-card strong {
  color: #f5c84b;
}
.pascal-quote {
  margin: 4px 0;
  padding: 16px 18px;
  border-left: 5px solid #f5c84b;
  border-radius: 16px;
  color: #0f172a;
  background: #f8fafc;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.45;
}
.pascal-testimony {
  margin-top: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(17,24,39,0.10);
  border-radius: 18px;
  background: #ffffff;
}
.pascal-testimony summary {
  cursor: pointer;
  font-weight: 950;
  color: #0f172a;
}
.pascal-testimony-text {
  margin-top: 12px;
  color: #475467;
  font-size: 0.96rem;
  line-height: 1.72;
}
.pascal-testimony-text p {
  margin: 0 0 12px;
}
.site-footer .footer-message-block {
  background: transparent !important;
}
.site-footer .footer-message-form {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.site-footer .footer-message-form input[type="text"],
.site-footer .footer-message-form input[type="email"],
.site-footer .footer-message-form textarea {
  background: rgba(255,255,255,0.94) !important;
  color: #111111 !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
}
.site-footer .footer-message-form .hold-btn {
  background: rgba(255,255,255,0.96) !important;
  color: #111111 !important;
  border: none !important;
}
.site-footer .footer-message-form .hold-label {
  color: #111111 !important;
}
.audio-series-actions .lr974-back-link {
  box-shadow: none;
}
@media (max-width: 900px) {
  .pascal-info-card,
  .pascal-testimony,
  .pascal-quote {
    border-radius: 16px;
  }
}


/* v1.0.30 - corrections titres audio et bouton retour intégré */
.morning-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.lr974-back-inline {
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: #ffffff;
  color: #0f172a;
}

.lr974-back-inline:hover,
.lr974-back-inline:focus-visible {
  border-color: rgba(245, 200, 75, 0.72);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}

.audio-series-actions {
  align-items: center;
}

.audio-series-actions .lr974-back-inline {
  margin-left: auto;
}

@media (max-width: 700px) {
  .audio-series-actions .lr974-back-inline {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}


/* v1.0.32 - bouton retour plus visible dans les blocs audio */
.lr974-return-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #0f172a !important;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

.lr974-return-button:hover,
.lr974-return-button:focus-visible {
  border-color: rgba(245, 200, 75, 0.72) !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
}

.audio-series-actions .lr974-return-button,
.morning-actions .lr974-return-button {
  margin-left: auto;
}

@media (max-width: 700px) {
  .audio-series-actions .lr974-return-button,
  .morning-actions .lr974-return-button {
    margin-left: 0;
    width: 100%;
  }
}


/* v1.0.34 - retour émissions discret et bannière cookies */
.audio-series-actions {
  position: relative;
}

.audio-series-actions .lr974-return-button {
  order: -1;
  margin-left: 0 !important;
  margin-right: auto;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.78) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
  font-size: 0.95rem;
}

.audio-series-actions .lr974-return-button::before {
  content: "";
}

.audio-series-actions .lr974-return-button + .btn.primary,
.audio-series-actions .btn.primary {
  order: 1;
}

.audio-series-actions .btn.outline:not(.lr974-return-button) {
  order: 2;
}

.lr974-cookie-banner {
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 99999;
  display: none;
  max-width: 920px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(245,200,75,0.22);
  border-radius: 24px;
  background: rgba(13, 13, 14, 0.96);
  color: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
}

.lr974-cookie-banner.is-visible {
  display: block;
}

.lr974-cookie-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.lr974-cookie-text strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.05rem;
  color: #f6d46a;
}

.lr974-cookie-text p {
  margin: 0;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
}

.lr974-cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.lr974-cookie-btn {
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  cursor: pointer;
  background: rgba(255,255,255,0.06);
  color: #fff;
}

.lr974-cookie-btn:hover,
.lr974-cookie-btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(246,212,106,0.7);
}

.lr974-cookie-btn.accept {
  border-color: #f6d46a;
  background: #f6d46a;
  color: #111827;
}

.lr974-cookie-manage {
  cursor: pointer;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 720px) {
  .lr974-cookie-inner {
    grid-template-columns: 1fr;
  }

  .lr974-cookie-actions {
    justify-content: stretch;
  }

  .lr974-cookie-btn {
    flex: 1 1 auto;
  }

  .audio-series-actions .lr974-return-button {
    width: auto !important;
    margin-bottom: 6px;
  }
}


/* v1.0.35 - retour simple sous image + cookies renforcés */
.audio-series-cover-wrap {
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.audio-series-cover-wrap .audio-series-cover {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.lr974-cover-return {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 14px;
  padding: 6px 2px;
  color: #0f172a;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid rgba(202, 138, 4, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lr974-cover-return:hover,
.lr974-cover-return:focus-visible {
  color: #b7791f;
  border-color: #d7a82f;
  transform: translateX(-2px);
}

.audio-series-actions .lr974-return-button {
  display: none !important;
}

.lr974-cookie-banner {
  z-index: 999999;
}

.lr974-cookie-banner.is-visible {
  display: block;
}


/* v1.0.36 - correction photo Pascal Cariou sur mobile : affichage complet, sans recadrage du visage */
@media (max-width: 720px) {
  .morning-panel {
    align-items: start;
  }

  .morning-image {
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
    display: block;
  }
}


/* v1.0.37 - bloc vidéos Prédication et retour émissions sous image */
.lr974-video-section {
  background:
    radial-gradient(circle at 12% 12%, rgba(246, 212, 106, 0.12), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

.lr974-video-head {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin-bottom: 26px;
}

.lr974-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.lr974-video-card {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 24px;
  background: #fff;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.lr974-video-card:hover,
.lr974-video-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(202, 138, 4, 0.35);
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.14);
  outline: none;
}

.lr974-video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(246, 212, 106, 0.30), transparent 34%),
    linear-gradient(135deg, #111827, #2d1f12);
}

.lr974-video-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .78;
}

.lr974-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.lr974-video-play span {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  font-size: 1.4rem;
  font-weight: 900;
  box-shadow: 0 16px 38px rgba(0,0,0,.22);
}

.lr974-video-body {
  padding: 18px;
}

.lr974-video-body h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  line-height: 1.25;
}

.lr974-video-body p {
  margin: 0;
  color: #667085;
}

.lr974-video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.78);
}

.lr974-video-modal.is-open {
  display: flex;
}

.lr974-video-modal-box {
  width: min(980px, 100%);
  background: #0b0b0d;
  color: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
}

.lr974-video-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.lr974-video-modal-title {
  margin: 0;
  font-weight: 900;
}

.lr974-video-close {
  border: 0;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.10);
  color: white;
  font-size: 1.4rem;
  cursor: pointer;
}

.lr974-video-modal video {
  width: 100%;
  max-height: min(70vh, 680px);
  display: block;
  background: black;
}

.lr974-cover-return {
  margin-left: 2px;
  font-size: .96rem;
}

@media (max-width: 900px) {
  .lr974-video-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .lr974-video-section {
    padding-top: 46px;
    padding-bottom: 46px;
  }

  .lr974-video-card {
    border-radius: 20px;
  }

  .lr974-video-modal {
    padding: 12px;
  }

  .lr974-video-modal-box {
    border-radius: 18px;
  }
}


/* v1.0.40 - Affinage du bloc live et réduction des titres */
.lr974-live-widget {
  width: min(560px, 100%);
  margin-top: 22px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 24px;
  background: rgba(10, 10, 12, 0.46);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.lr974-live-art-wrap {
  width: 112px;
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.lr974-live-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.lr974-live-content {
  min-width: 0;
}

.lr974-live-kicker {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lr974-live-song {
  margin: 0;
  color: #fff;
  font-size: clamp(0.96rem, 1.45vw, 1.22rem);
  line-height: 1.2;
  font-weight: 800;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lr974-live-meta {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.lr974-live-meta span {
  min-width: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: .78rem;
  line-height: 1.25;
}

.lr974-live-meta strong {
  display: block;
  color: rgba(255, 255, 255, 0.92);
  font-size: .70rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.lr974-live-meta em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.lr974-live-track {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: .86rem;
  line-height: 1.35;
}

.lr974-live-sep {
  color: var(--gold);
  padding: 0 4px;
}

@media (max-width: 720px) {
  .lr974-live-widget {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 20px;
  }

  .lr974-live-art-wrap {
    width: 82px;
    border-radius: 16px;
  }

  .lr974-live-song {
    font-size: 0.98rem;
    line-height: 1.22;
    -webkit-line-clamp: 3;
  }

  .lr974-live-meta {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* v1.0.42 - Ajustements mobiles : accroche hero + bloc "En ce moment" */
@media (max-width: 720px) {
  .hero .eyebrow,
  .hero-kicker,
  .hero .kicker {
    color: var(--gold);
    font-size: clamp(1.22rem, 6vw, 1.75rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: none;
    margin-bottom: 12px;
  }

  .lr974-live-widget {
    width: calc(100% - 20px);
    margin: 24px auto 0;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
    padding: 20px;
    border-radius: 26px;
  }

  .lr974-live-content {
    display: grid;
    gap: 10px;
  }

  .lr974-live-kicker {
    margin: 0;
    font-size: .82rem;
    line-height: 1.35;
    letter-spacing: .08em;
  }

  .lr974-live-song {
    font-size: clamp(1.04rem, 5vw, 1.32rem);
    line-height: 1.22;
    -webkit-line-clamp: 4;
  }

  .lr974-live-art-wrap {
    width: 96px;
    grid-row: 2;
    justify-self: start;
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  }

  .lr974-live-meta {
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    margin-top: 2px;
  }

  .lr974-live-meta span {
    font-size: .84rem;
  }

  .lr974-live-meta strong {
    font-size: .72rem;
  }

  .lr974-live-track {
    margin-top: 4px;
    font-size: .9rem;
    line-height: 1.45;
  }
}

@media (max-width: 430px) {
  .lr974-live-widget {
    width: calc(100% - 22px);
    padding: 18px;
  }

  .lr974-live-meta {
    grid-template-columns: 1fr;
  }

  .lr974-live-art-wrap {
    width: 88px;
  }
}

/* v1.0.43 - Inversion des tailles dans le haut de page */
.hero .eyebrow,
.hero-kicker,
.hero .kicker {
  color: var(--gold);
  font-size: clamp(2.6rem, 5.6vw, 4.9rem);
  line-height: .98;
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: none;
  max-width: 980px;
}

.hero h1 {
  font-size: clamp(.82rem, 1.15vw, 1.08rem);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 14px;
}

@media (max-width: 720px) {
  .hero .eyebrow,
  .hero-kicker,
  .hero .kicker {
    font-size: clamp(2.15rem, 12vw, 3.65rem);
    line-height: 1;
    letter-spacing: .01em;
    margin-bottom: 12px;
  }

  .hero h1 {
    font-size: clamp(.78rem, 4vw, 1rem);
    line-height: 1.25;
    letter-spacing: .07em;
    margin-top: 8px;
  }
}

/* v1.0.44 - Suppression du titre secondaire et harmonisation du hero */
.hero .eyebrow,
.hero-kicker,
.hero .kicker {
  display: block;
  max-width: min(980px, 100%);
  margin: 0 0 22px;
  color: var(--gold);
  font-size: clamp(2.6rem, 5.6vw, 4.9rem);
  line-height: .98;
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: none;
}

.hero .lead {
  max-width: 760px;
  margin-top: 0;
}

@media (max-width: 720px) {
  .hero .eyebrow,
  .hero-kicker,
  .hero .kicker {
    font-size: clamp(2.05rem, 11vw, 3.55rem);
    line-height: 1.02;
    margin-bottom: 18px;
  }

  .hero .lead {
    font-size: clamp(1.05rem, 5vw, 1.35rem);
    line-height: 1.45;
  }
}




/* v1.0.66 - Lecteur Muses placé sous les images, sans toucher au reste */
.radio-art-player,
.lr974-live-art-player {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 0;
}

.radio-art-player .album-art {
  width: 100%;
}

.muses-player-wrap {
  width: 130px;
  min-height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.lr974-live-art-player .muses-player-wrap {
  margin-top: 2px;
}

@media (max-width: 720px) {
  .lr974-live-art-player {
    grid-row: 2;
    justify-self: start;
  }

  .lr974-live-art-player .lr974-live-art-wrap {
    grid-row: auto;
  }
}


/* v1.0.69 - Page Ascension de Jésus */
.lr974-ascension-hero .page-hero-inner {
  max-width: 920px;
}

.lr974-ascension-card .lr974-marc-name {
  min-height: 2.9em;
}


/* v1.0.76 - lecteur mobile compact : pochette et player cote a cote */
@media (max-width: 720px) {
	.radio-art-player {
		    grid-template-columns: 96px 130px;
		    align-items: center;
		    justify-content: start;
		    justify-items: start;
		    column-gap: 14px;
	}
	
	.radio-art-player .album-art {
		    width: 96px;
	}
}


/* v1.0.77 - optimisation mobile du bloc live */
@media (max-width: 720px) {
	.lr974-live-widget {
		    padding: 16px;
		    gap: 12px;
		    border-radius: 22px;
		    background: rgba(10, 10, 12, 0.72);
		    backdrop-filter: blur(12px);
	}
	
	.lr974-live-content {
		    gap: 8px;
	}
	
	.lr974-live-kicker {
		    font-size: 0.78rem;
		    line-height: 1.25;
	}
	
	.lr974-live-song {
		    font-size: 1.12rem;
		    line-height: 1.2;
		    -webkit-line-clamp: 2;
	}
	
	.lr974-live-meta {
		    grid-template-columns: repeat(2, minmax(0, 1fr));
		    gap: 9px 12px;
	}
	
	.lr974-live-meta span {
		    font-size: 0.78rem;
	}
	
	.lr974-live-track {
		    margin-top: 0;
		    font-size: 0.86rem;
	}
	
	.lr974-live-art-player {
		    display: grid;
		    grid-template-columns: 88px 130px;
		    align-items: center;
		    justify-content: start;
		    justify-items: start;
		    gap: 12px;
		    grid-row: auto;
	}
	
	.lr974-live-art-player .lr974-live-art-wrap {
		    width: 88px;
		    border-radius: 18px;
	}
	
	.lr974-live-art-player .muses-player-wrap {
		    margin-top: 0;
	}
}


/* v2.0 - Bouton lecture du nouveau flux (remplace le widget externe Muses) */
.lr-flux-toggle {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--gold);
  color: #171100;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.lr-flux-toggle:hover {
  filter: brightness(1.05);
}

.lr-flux-toggle.is-playing {
  background: var(--red);
  color: #fff;
}


/* ============================================================
   v1.0.102 - Roulette des emissions
   La grille des emissions devient une seule ligne qui defile.
   Rien d'autre ne change : memes cartes, memes couleurs, memes images.
   ============================================================ */

/* La grille devient une ligne qui defile, avec accrochage sur les cartes */
.lr974-emissions-grid {
  display: flex;
  grid-template-columns: none;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* de la place pour que l'agrandissement au survol ne soit pas coupe */
  padding: 10px 2px 14px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.lr974-emissions-grid::-webkit-scrollbar {
  display: none;
}

/* Toutes les cartes a la meme largeur : 3 visibles sur ordinateur */
.lr974-emission-card,
.lr974-emission-card--featured {
  flex: 0 0 calc((100% - 36px) / 3);
  min-height: 340px;
  scroll-snap-align: start;
}

/* La carte de Pascal ne garde plus sa taille XXL : tout est aligne */
.lr974-emission-card--featured .lr974-emission-card-content {
  left: 22px;
  right: 22px;
  bottom: 22px;
}

/* Les textes ne debordent plus des cartes etroites :
   titre sur 2 lignes, description sur 3, le reste se termine par ... */
.lr974-emission-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  line-height: 1.12;
}

.lr974-emission-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  font-size: 0.94rem;
}

/* Le petit mot qui explique comment faire defiler */
.lr974-carousel-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.lr974-carousel-hint .hint-tactile {
  display: none;
}

.lr974-carousel-hint .hint-fleche {
  display: inline-block;
  color: var(--gold-2);
  font-size: 1.05rem;
  animation: lr974-hint-va-et-vient 1.8s ease-in-out infinite;
}

@keyframes lr974-hint-va-et-vient {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50% { transform: translateX(6px); opacity: 1; }
}

/* Animations reduites : on garde un battement d'opacite, sinon la fleche
   ne bouge jamais chez ceux qui ont coupe les effets de Windows. */
@media (prefers-reduced-motion: reduce) {
  .lr974-carousel-hint .hint-fleche {
    animation: lr974-hint-battement 2.4s ease-in-out infinite;
  }
}

@keyframes lr974-hint-battement {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Les deux fleches */
.lr974-emissions-carousel {
  position: relative;
}

.lr974-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.2);
  color: var(--navy);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.lr974-carousel-arrow:hover {
  transform: translateY(-50%) scale(1.08);
}

.lr974-carousel-arrow:focus-visible {
  outline: 3px solid rgba(245, 200, 75, 0.8);
  outline-offset: 3px;
}

.lr974-carousel-arrow[disabled] {
  opacity: 0.3;
  cursor: default;
  box-shadow: none;
}

.lr974-carousel-arrow--prev { left: -18px; }
.lr974-carousel-arrow--next { right: -18px; }

/* Les petits points */
.lr974-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
}

.lr974-carousel-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.22);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}

.lr974-carousel-dots button[aria-current="true"] {
  width: 26px;
  background: linear-gradient(135deg, #ffe9a8, var(--gold));
}

/* Tablette : 2 cartes visibles */
@media (max-width: 900px) {
  .lr974-emissions-grid {
    grid-template-columns: none;
  }

  .lr974-emission-card,
  .lr974-emission-card--featured {
    flex: 0 0 calc((100% - 18px) / 2);
    min-height: 340px;
  }

  .lr974-carousel-arrow--prev { left: 4px; }
  .lr974-carousel-arrow--next { right: 4px; }
}

/* Telephone : une carte et un bout de la suivante, pas de fleches */
@media (max-width: 620px) {
  .lr974-emission-card,
  .lr974-emission-card--featured {
    flex: 0 0 82%;
    min-height: 330px;
  }

  .lr974-carousel-arrow {
    display: none;
  }

  .lr974-carousel-hint .hint-souris { display: none; }
  .lr974-carousel-hint .hint-tactile { display: inline; }
}

@media (max-width: 460px) {
  .lr974-emission-card,
  .lr974-emission-card--featured {
    min-height: 318px;
  }
}


/* ============================================================
   v1.0.103 - Carte de l'application et badge Google Play
   ============================================================ */

.app-card--play {
  position: relative;
  gap: 12px;
  padding: 30px 24px 26px;
  border-color: rgba(245, 200, 75, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 200, 75, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.07);
}

.app-card-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #111111;
  background: linear-gradient(135deg, #ffe9a8, var(--gold));
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.app-card--play img {
  border-radius: 28px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.app-card--play > span:not(.app-card-pill) {
  color: rgba(255, 255, 255, 0.75);
}

.play-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 9px 20px 9px 14px;
  border: 1px solid #a6a6a6;
  border-radius: 10px;
  background: #000000;
  color: #ffffff;
  text-decoration: none;
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.play-badge svg {
  flex: none;
  width: 26px;
  height: 28px;
}

.play-badge small {
  display: block;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
}

.play-badge b {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.play-badge:hover,
.play-badge:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.play-badge:focus-visible {
  outline: 3px solid rgba(245, 200, 75, 0.8);
  outline-offset: 3px;
}


/* ============================================================
   v1.0.104 - Carte de l'application en blanc
   Le bloc noir autour ne change pas ; seul l'interieur de la carte
   passe en blanc pour que le texte et le badge ressortent.
   ============================================================ */

.app-card--play {
  border: 2px solid var(--gold);
  border-radius: 16px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.app-card--play strong {
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1.15;
}

.app-card--play > span:not(.app-card-pill) {
  color: #475467;
  font-weight: 600;
  line-height: 1.45;
}

.app-card--play img {
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.22);
}

/* La pastille NOUVEAU : rouge de la radio, bien lisible sur le blanc */
.app-card-pill {
  color: #ffffff;
  background: var(--red);
  box-shadow: 0 6px 16px rgba(244, 31, 44, 0.35);
}

.play-badge {
  border-color: #000000;
  box-shadow: 0 10px 22px rgba(16, 24, 40, 0.25);
}

.play-badge:hover,
.play-badge:focus-visible {
  border-color: #000000;
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.35);
}


/* =====================================================================
   v1.0.105 - Page "Le direct" : decor de studio derriere le lecteur
   Le texte "Louange Radio / depuis plus de quatre ans" a ete retire :
   il est deja dans le pied de page. Le decor est dessine (SVG), en noir
   et blanc comme le reste du site ; aucune photo, donc aucun droit
   d'auteur et un poids de quelques kilo-octets.
   ===================================================================== */
.lr974-studio {
  position: relative;
  width: min(1180px, 100%);
  margin: 0 auto;
  transform: translateY(-34px);
  min-height: 420px;
  padding: clamp(20px, 3.4vw, 34px);
  border-radius: 8px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.lr974-studio-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.lr974-studio::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,.84) 72%);
  pointer-events: none;
}

.lr974-studio .radio-showcase {
  position: relative;
  z-index: 2;
  width: min(520px, 100%);
  background: rgba(10, 10, 10, .78);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 860px) {
  .lr974-studio {
    justify-content: center;
    min-height: 0;
    padding-top: clamp(150px, 34vw, 240px);
  }

  .lr974-studio::after {
    background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.88) 48%);
  }

  .lr974-studio .radio-showcase {
    width: 100%;
  }
}


/* =====================================================================
   v1.0.107 - Haut de l'accueil : style "ADD Reunion", en bleu nuit
   - photo sans le logo ni le texte incrustes (louange-auditeurs-sans-texte.jpg)
   - voile bleu nuit, plus fonce a gauche pour la lecture
   - grand titre a empattements, petite ligne en majuscules au-dessus
   - boutons arrondis ; carte "En ce moment" a droite
   Uniquement la section .lr-hero-nuit : le reste du site ne bouge pas.
   ===================================================================== */
.lr-hero-nuit {
  --nuit: #0b1a2e;
  --nuit-2: #10233d;
  --ciel: #8fd3e0;
  min-height: clamp(600px, 82vh, 820px);
  align-items: center;
  background: var(--nuit);
}

.lr-hero-nuit > img {
  opacity: 1;
  object-position: 62% center;
}

.lr-hero-nuit::after {
  background:
    linear-gradient(90deg, rgba(11, 26, 46, .96) 0%, rgba(11, 26, 46, .86) 34%, rgba(11, 26, 46, .5) 62%, rgba(11, 26, 46, .22) 100%),
    linear-gradient(180deg, rgba(11, 26, 46, .35) 0%, rgba(11, 26, 46, 0) 30%, rgba(11, 26, 46, .55) 100%);
}

.lr-hero-nuit .hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 350px);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(64px, 9vh, 104px) 0 clamp(80px, 11vh, 120px);
}

.lr-hero-texte { min-width: 0; }

/* logo dans une tuile blanche, comme les logos d'ADD */
.lr-hero-logos {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.lr-hero-logo {
  width: 76px;
  height: 76px;
  padding: 7px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  display: grid;
  place-items: center;
}

.lr-hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.lr-hero-trait {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, .28);
}

.lr-hero-direct {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.lr-hero-point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4fd68c;
  box-shadow: 0 0 10px rgba(79, 214, 140, .8);
  animation: lrHeroPoint 2s ease-in-out infinite;
}

@keyframes lrHeroPoint { 50% { opacity: .35; } }

.lr-hero-kicker {
  margin: 0 0 14px;
  color: var(--ciel);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.lr-hero-nuit .lr-hero-titre {
  margin: 0;
  max-width: 12ch;
  color: #fff;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 6.2vw, 5.4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.01em;
  text-transform: none;
  text-shadow: 0 6px 28px rgba(0, 0, 0, .35);
}

.lr-hero-nuit .lead {
  max-width: 560px;
  margin-top: 22px;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.65;
}

/* boutons arrondis */
.lr-hero-nuit .actions { margin-top: 32px; gap: 14px; }

.lr-hero-nuit .btn {
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
}

.lr-hero-nuit .btn.primary {
  background: var(--gold);
  color: var(--nuit);
  box-shadow: 0 12px 30px rgba(245, 200, 75, .28);
}

.lr-hero-nuit .btn.light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .55);
}

.lr-hero-nuit .btn.light:hover { background: rgba(255, 255, 255, .1); }

/* carte "En ce moment", a droite, comme l'affiche d'ADD */
.lr-hero-nuit .lr974-live-widget {
  width: 100%;
  margin: 0;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(11, 26, 46, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
}

.lr-hero-nuit .lr974-live-art-wrap {
  width: 100%;
  border-radius: 16px;
}

.lr-hero-nuit .lr974-live-kicker { color: var(--ciel); }

.lr-hero-nuit .lr974-live-song {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

/* petite souris "descendre", comme chez ADD */
.lr-hero-descendre {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 14px;
}

.lr-hero-descendre span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  animation: lrHeroSouris 1.8s ease-in-out infinite;
}

@keyframes lrHeroSouris {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(12px); }
}

@media (max-width: 980px) {
  .lr-hero-nuit .hero-content {
    grid-template-columns: 1fr;
  }

  .lr-hero-nuit .lr974-live-widget {
    max-width: 560px;
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .lr-hero-nuit .lr974-live-art-wrap { width: 112px; }
}

@media (max-width: 720px) {
  .lr-hero-nuit { min-height: 0; }

  .lr-hero-nuit::after {
    background: linear-gradient(180deg, rgba(11, 26, 46, .82) 0%, rgba(11, 26, 46, .9) 55%, rgba(11, 26, 46, .97) 100%);
  }

  .lr-hero-nuit .hero-content {
    width: calc(100% - 36px);
    padding: 44px 0 72px;
  }

  .lr-hero-logo { width: 60px; height: 60px; border-radius: 14px; }
  .lr-hero-trait { height: 34px; }
  .lr-hero-kicker { font-size: .74rem; letter-spacing: .12em; }
  .lr-hero-nuit .lr-hero-titre { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .lr-hero-nuit .btn { width: 100%; justify-content: center; }

  .lr-hero-nuit .lr974-live-widget { grid-template-columns: 1fr; }
  .lr-hero-nuit .lr974-live-art-wrap { width: 96px; }
  .lr-hero-descendre { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lr-hero-descendre span { animation: none; opacity: 1; }
}


/* =====================================================================
   v1.0.108 - Accueil : la photo monte jusqu'en haut
   Le bandeau d'infos et le menu passent en transparent par-dessus la
   photo ; le menu redevient bleu nuit des qu'on descend dans la page
   (ou quand le menu telephone est ouvert). La pochette est retiree de
   la carte "En ce moment" : on garde seulement les informations.
   ===================================================================== */
.lr-topbar-nuit {
  position: relative;
  z-index: 21;
  background: transparent;
}

.site-header.lr-header-nuit {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, .12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.site-header.lr-header-nuit.lr-descendu,
.site-header.lr-header-nuit.is-open {
  background: rgba(11, 26, 46, .97);
  border-bottom-color: transparent;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.lr-header-nuit .brand,
.lr-header-nuit .nav a {
  color: #fff;
}

.lr-header-nuit .nav a[aria-current="page"] {
  color: var(--gold);
}

.lr-header-nuit .nav a:hover {
  color: var(--gold);
}

.lr-header-nuit .menu-toggle {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .3);
}

.lr-header-nuit .nav {
  border-top-color: rgba(255, 255, 255, .15);
}

/* la photo remonte sous le bandeau et le menu */
.hero.lr-hero-nuit {
  margin-top: calc(-1 * var(--lr-haut, 110px));
}

.lr-hero-nuit .hero-content {
  padding-top: calc(var(--lr-haut, 110px) + clamp(48px, 7vh, 88px));
}

/* carte "En ce moment" sans la pochette */
.lr-hero-nuit .lr974-live-art-player {
  display: none;
}

.lr-hero-nuit .lr974-live-widget {
  padding: 24px 22px;
}

@media (max-width: 980px) {
  .lr-hero-nuit .lr974-live-widget {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .lr-hero-nuit .hero-content {
    padding-top: calc(var(--lr-haut, 76px) + 36px);
  }
}


/* =====================================================================
   v1.0.109 - Accueil
   1. Le logo et "Louange Radio 974" du menu sont masques en haut de
      l'accueil : ils faisaient doublon avec le logo et le grand titre.
      Ils reapparaissent quand on descend (menu bleu nuit).
   2. La carte "En ce moment" passe SOUS les boutons, en largeur, pour
      ne plus cacher le visage des personnes sur la photo.
   ===================================================================== */
.lr-header-nuit .brand {
  transition: opacity .3s ease, visibility .3s ease;
}

.lr-header-nuit:not(.lr-descendu):not(.is-open) .brand {
  opacity: 0;
  visibility: hidden;
}

/* une seule colonne : texte, boutons, puis la carte */
.lr-hero-nuit .hero-content {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-bottom: clamp(96px, 13vh, 130px);
}

.lr-hero-nuit .lr974-live-widget {
  width: min(900px, 100%);
  margin-top: 36px;
  padding: 18px 22px;
}

.lr-hero-nuit .lr974-live-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 6px 26px;
  align-items: center;
}

.lr-hero-nuit .lr974-live-kicker {
  grid-column: 1;
  margin: 0;
}

.lr-hero-nuit .lr974-live-song {
  grid-column: 1;
  -webkit-line-clamp: 2;
}

.lr-hero-nuit .lr974-live-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, .14);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* le titre en cours est deja affiche en gros : pas besoin de le repeter */
.lr-hero-nuit .lr974-live-track {
  display: none;
}

@media (max-width: 900px) {
  .lr-hero-nuit .lr974-live-content {
    grid-template-columns: 1fr;
  }

  .lr-hero-nuit .lr974-live-meta {
    grid-column: 1;
    grid-row: auto;
    margin-top: 12px;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =====================================================================
   v1.0.110
   1. Accueil : la tuile a cote de "En direct 24h/24" affiche la pochette
      du titre en cours (le logo reste l'image par defaut).
   2. Pied de page en bleu nuit (#0b1a2e) sur tout le site, comme le haut
      de l'accueil.
   ===================================================================== */
.lr-hero-pochette {
  width: 84px;
  height: 84px;
  padding: 4px;
  overflow: hidden;
}

.lr-hero-pochette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: opacity .35s ease;
}

@media (max-width: 720px) {
  .lr-hero-pochette { width: 66px; height: 66px; }
}

.site-footer {
  background: #0b1a2e;
}

.site-footer .footer-message-block,
.site-footer .footer-message-form {
  background: #0b1a2e !important;
}

.site-footer .footer-message-form {
  background: #10233d !important;
}


/* =====================================================================
   v1.0.111
   1. Bandeau "En direct 24h/24 - Ravine des Cabris - WhatsApp" retire.
   2. Lecteur du haut en bleu nuit, sur tout le site ; la liste
      "Louange Radio 974 - 192 kbps" garde son noir.
   (La console chrome de la page Le direct est dans static/ecouter.html.)
   ===================================================================== */
.topbar {
  display: none !important;
}

body .evPlayer {
  background: linear-gradient(180deg, #0b1a2e, #10233d) !important;
  border-bottom-color: rgba(255, 255, 255, .08) !important;
}

body .evPlayer .evPlayerSelect,
body .evPlayer select {
  background-color: #111111 !important;
  color: #fff !important;
}


/* =====================================================================
   v1.0.112 - Accueil : le logo et "Louange Radio 974" du menu ne
   reapparaissent plus quand on descend : le lecteur du haut les affiche
   deja, juste au-dessus. La place est gardee pour que le menu ne bouge pas.
   ===================================================================== */
.site-header.lr-header-nuit .brand,
.site-header.lr-header-nuit.lr-descendu .brand,
.site-header.lr-header-nuit.is-open .brand {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* =====================================================================
   v1.0.113 - Plus de rouge dans les fonds : bleu nuit a la place.
   Le bleu de base est EXACTEMENT celui du pied de page (#0b1a2e) ; un
   halo un peu plus lumineux (#1d406e) le fait ressortir sur le noir.
   Concerne : hauts de page (Le direct, La radio, Contact, 404), bandeau
   du lecteur et cadre de message de l'accueil, bloc lecteur de la page
   Le direct, soulignes du pied de page. Les pastilles "EN DIRECT" gardent
   leur rouge : c'est un signal, pas un decor.
   ===================================================================== */
.page-hero {
  background:
    radial-gradient(circle at 82% 20%, rgba(29, 64, 110, .6), transparent 34%),
    linear-gradient(135deg, #0e1117 0%, #0b1a2e 100%);
}

.listen-dock {
  background:
    radial-gradient(circle at 12% 24%, rgba(29, 64, 110, .55), transparent 32%),
    linear-gradient(180deg, #0e1117 0%, #0b1a2e 100%);
}

.message-panel {
  background:
    radial-gradient(circle at 88% 12%, rgba(29, 64, 110, .55), transparent 32%),
    linear-gradient(135deg, #0e1117 0%, #0b1a2e 100%);
}

.radio-showcase {
  background:
    radial-gradient(circle at 18% 18%, rgba(29, 64, 110, .6), transparent 36%),
    linear-gradient(135deg, #111111, #242424);
}

.featured-articles.lr974-emissions-section {
  background:
    radial-gradient(circle at 12% 8%, rgba(245, 200, 75, 0.12), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(29, 64, 110, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
}

.footer-socials a {
  border-bottom-color: rgba(143, 211, 224, .55);
}


/* =====================================================================
   v1.0.115 - Accueil
   - "Radio chretienne de La Reunion" dans le menu, a la place du logo
   - plus de tuile ni de pastille au-dessus du titre : le titre remonte
   - photo moins haute, pour ne pas laisser de grand vide en bas
   ===================================================================== */
.site-header.lr-header-nuit .brand {
  display: none;
}

.lr-header-kicker {
  margin: 0;
  color: #8fd3e0;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero.lr-hero-nuit {
  min-height: clamp(520px, 72vh, 720px);
}

.lr-hero-nuit .hero-content {
  padding-top: calc(var(--lr-haut, 81px) + clamp(28px, 5vh, 56px));
  padding-bottom: clamp(76px, 10vh, 104px);
}

@media (max-width: 900px) {
  .lr-header-kicker {
    align-self: center;
    font-size: .7rem;
    letter-spacing: .1em;
    white-space: normal;
  }
}

@media (max-width: 720px) {
  .hero.lr-hero-nuit { min-height: 0; }
  .lr-hero-nuit .hero-content {
    padding-top: calc(var(--lr-haut, 76px) + 24px);
    padding-bottom: 40px;
  }
}


/* =====================================================================
   v1.0.116 - Toutes les pages (Le direct, La radio, Planning, Contact...) :
   le logo et "Louange Radio 974" du menu sont retires, comme sur
   l'accueil. Le lecteur du haut les affiche deja. Le menu passe a droite.
   ===================================================================== */
.site-header .brand {
  display: none !important;
}

.site-header {
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .site-header .menu-toggle {
    grid-column: 2;
  }
}


/* =====================================================================
   v1.0.118 - Accueil : "Radio chretienne de La Reunion" a gauche,
   le menu a droite (la regle de la 116 poussait tout a droite).
   ===================================================================== */
.site-header.lr-header-nuit {
  justify-content: space-between;
}


/* =====================================================================
   v1.0.119
   1. Titres de toutes les pages dans la police elegante de l'accueil
      (Playfair Display, chargee dans le <head> par functions.php).
   2. Menu des pages interieures en bleu nuit, avec "Radio chretienne de
      La Reunion" a gauche, comme sur l'accueil.
   ===================================================================== */
.page-hero h1 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.04;
}

.site-header:not(.lr-header-nuit) {
  justify-content: space-between;
  background: #0b1a2e;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header:not(.lr-header-nuit)::before {
  content: "Radio chr\00E9tienne de La R\00E9union";
  color: #8fd3e0;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-header:not(.lr-header-nuit) .nav a {
  color: #fff;
}

.site-header:not(.lr-header-nuit) .nav a[aria-current="page"],
.site-header:not(.lr-header-nuit) .nav a:hover {
  color: var(--gold);
}

.site-header:not(.lr-header-nuit) .menu-toggle {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .3);
}

.site-header:not(.lr-header-nuit) .nav {
  border-top-color: rgba(255, 255, 255, .15);
}

@media (max-width: 900px) {
  .site-header:not(.lr-header-nuit)::before {
    grid-column: 1;
    align-self: center;
    font-size: .7rem;
    letter-spacing: .1em;
    white-space: normal;
  }
}


/* =====================================================================
   v1.0.120 - Accueil
   Le bloc "En direct" du bas (texte + lecteur) est retire : il repetait le
   haut de page et le lecteur fixe. Le bloc "Reseaux sociaux / Telechargez
   l'application" passe du noir au bleu nuit du site.
   ===================================================================== */
.app-section {
  background: #0b1a2e;
}

.app-panel {
  border-color: rgba(255, 255, 255, .12);
  background:
    radial-gradient(circle at 82% 22%, rgba(143, 211, 224, .10), transparent 34%),
    linear-gradient(135deg, #0f213a 0%, #10233d 55%, #132a48 100%);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .28);
}

.app-panel .eyebrow {
  color: #8fd3e0;
}


/* =====================================================================
   v1.0.121 - Finitions : une seule famille de titres et de boutons
   - Les grands titres de section prennent la police elegante (Playfair
     Display, chargee par functions.php depuis la 119). Les petits titres
     du pied de page (Contact, Adresse...) et le titre en cours de la carte
     "En ce moment" restent dans la police de texte, plus lisible en petit.
   - Tous les boutons sont arrondis, comme ceux du haut de l'accueil.
   ===================================================================== */
main h2:not(.lr974-live-song),
.site-footer .footer-intro h2 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 800;
  letter-spacing: -.01em;
}

.btn {
  border-radius: 999px;
  padding-inline: 22px;
}


/* =====================================================================
   v1.0.122
   1. Pied de page : des mots a la place des pastilles (T, G, @, note, A).
   2. Accueil, bloc "L'administrateur" : titres discrets. Patrick ne veut
      pas se mettre en avant ; "Administrateur & responsable" devient la
      ligne la plus lisible du bloc.
   ===================================================================== */
.footer-label {
  flex: 0 0 auto;
  min-width: 5.6em;
  color: #8fd3e0;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.lr-apropos h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem) !important;
  line-height: 1.2;
}

.lr-apropos .eyebrow.dark {
  font-size: .95rem;
  letter-spacing: .06em;
}


/* =====================================================================
   v1.0.123
   1. Pied de page : la ligne reservait 34 px pour l'ancienne pastille
      ronde, donc les mots "Telephone :" ou "Adresse :" passaient par
      dessus la valeur. La ligne s'adapte maintenant au texte, et passe a
      la ligne toute seule quand c'est trop etroit (telephone).
   2. Fond general en bleu nuit : si une bande vide apparait quelque part
      (au-dessus du menu, en bas de page), elle est bleue et non blanche.
      Le contenu des pages garde son fond blanc.
   ===================================================================== */
.footer-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  grid-template-columns: none;
}

.footer-label {
  min-width: 0;
  flex: 0 0 auto;
}

.footer-line > a,
.footer-line > span:not(.footer-label) {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

body {
  background: #0b1a2e;
}

main {
  background: #ffffff;
}


/* =====================================================================
   v1.0.124 - Bloc "L'administrateur" : le nom passe a la taille d'un
   texte courant. Patrick ne souhaite pas etre mis en avant ; la ligne
   "Administrateur & responsable" reste la plus visible du bloc.
   ===================================================================== */
.lr-apropos h2 {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem) !important;
  margin-bottom: 10px !important;
}

.lr-apropos .eyebrow.dark {
  font-size: .95rem;
}


/* =====================================================================
   v1.0.125 - Page Planning en couleur
   Texte blanc sur fond de couleur, un code par type d'emission :
     musique       bleu nuit     #0b1a2e
     message       violet        #5b3a8e
     predication   dore fonce    #8a6412
     pensee        brun          #8a4b2a
     top horaire   bleu clair    #2f7fc1
     jingle        vert          #1e7d46
   ===================================================================== */
.lr-type-musique     { --lr-fond: #0b1a2e; }
.lr-type-message     { --lr-fond: #5b3a8e; }
.lr-type-predication { --lr-fond: #8a6412; }
.lr-type-pensee      { --lr-fond: #8a4b2a; }
.lr-type-top         { --lr-fond: #2f7fc1; }
.lr-type-jingle      { --lr-fond: #1e7d46; }

/* tableau (ordinateur) */
.schedule-table thead th {
  background: #0b1a2e;
  color: #fff;
}

.schedule-table td[class^="lr-type-"] {
  background: var(--lr-fond);
  color: #fff;
  border-color: rgba(255, 255, 255, .12);
}

.schedule-table td[class^="lr-type-"] .program,
.schedule-table td[class^="lr-type-"] small {
  color: #fff;
}

.schedule-table td[class^="lr-type-"] small {
  opacity: .82;
}

/* bloc "Dans chaque heure" + legende */
.lr-heure-bloc {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #0b1a2e;
  color: #fff;
}

.lr-heure-titre {
  margin: 0 0 10px;
  color: #8fd3e0;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lr-heure-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lr-puce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
}

.lr-puce--top    { background: #2f7fc1; }
.lr-puce--jingle { background: #1e7d46; }

.lr-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .82rem;
  color: rgba(255, 255, 255, .86);
}

.lr-legende span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.lr-carre {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--lr-fond);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}

/* version telephone : les cartes prennent la couleur de leur type.
   Le planning telephone a ses propres regles en !important dans la page :
   il faut le meme niveau (id + !important) pour passer devant. */
#lr974-mobile-planning .lr-program-card[class*="lr-type-"] {
  background: var(--lr-fond) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

#lr974-mobile-planning .lr-program-card[class*="lr-type-"] .lr-program-time {
  background: rgba(0, 0, 0, .28) !important;
  color: #fff !important;
}

#lr974-mobile-planning .lr-program-card[class*="lr-type-"] .lr-program-title,
#lr974-mobile-planning .lr-program-card[class*="lr-type-"] .lr-program-note {
  color: #fff !important;
}

#lr974-mobile-planning .lr-program-card[class*="lr-type-"] .lr-program-badge {
  background: rgba(255, 255, 255, .18) !important;
  color: #fff !important;
  border-color: transparent !important;
}

#lr974-mobile-planning .lr-program-card.is-now {
  box-shadow: 0 0 0 3px #f5c84b !important;
}
.lr-program-card.is-now {
  box-shadow: 0 0 0 3px #f5c84b;
}