/* ============================================================
   RADIO MAX FM 104.5 — Composant Programmation (V3)
   Aucun fond plein pour le composant : les blocs reposent sur
   le fond de la page (aspect broadcast très discret) afin de
   laisser les textes respirer, comme sur la page d'accueil.
   Police : Montserrat.
   ============================================================ */
.mxp { font-family: "Montserrat", Arial, sans-serif; color: #fff; max-width: 1060px; margin: 0 auto; }
.mxp * { box-sizing: border-box; }

.mxp-block { background: rgba(5, 29, 74, .94); border-radius: 18px; padding: 14px; margin-bottom: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.mxp-heading { font-weight: 800; font-size: clamp(17px, 2.6vw, 24px); letter-spacing: .4px; margin: 22px 4px 12px; text-transform: uppercase; }

/* Onglets des jours */
.mxp-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.mxp-tab { flex: 1 1 90px; padding: 11px 6px; border-radius: 999px; border: 1.5px solid #6e96d2; background: transparent; color: #d6e4fa; font: 600 15px "Montserrat", Arial, sans-serif; cursor: pointer; }
.mxp-tab:hover { border-color: #ffc400; }
.mxp-tab.is-active { background: #ffc400; border-color: #ffc400; color: #0a1430; font-weight: 800; }
.mxp-tab-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e5202c; margin-left: 6px; vertical-align: middle; }

/* Mini-carte de la journée */
.mxp-minimap { position: relative; display: flex; gap: 3px; height: 34px; }
.mxp-seg { border-radius: 7px; min-width: 4px; }
.mxp-nowmark { position: absolute; top: -7px; bottom: -7px; width: 3px; background: #fff; transform: translateX(-50%); }
.mxp-nowmark span { position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; border-radius: 50%; background: #e5202c; border: 3px solid #fff; transform: translate(-50%, -50%); }
.mxp-ticks { position: relative; height: 20px; margin-top: 7px; }
.mxp-ticks span { position: absolute; transform: translateX(-50%); font-size: 12.5px; font-weight: 600; color: #9db4d8; white-space: nowrap; }
.mxp-ticks span:first-child { transform: none; }
.mxp-ticks span:last-child { transform: translateX(-100%); }

/* Bloc « Maintenant » */
.mxp-hero { display: grid; grid-template-columns: 34% 1fr; gap: 18px; background: linear-gradient(120deg, #0a357c, #06265c); border: 2.5px solid #ffc400; border-radius: 22px; padding: 14px; margin-bottom: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .3); }
.mxp-hero img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; border-radius: 14px; }
.mxp-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mxp-badge-now { background: #e5202c; color: #fff; font-weight: 800; font-size: 15px; padding: 7px 18px; border-radius: 999px; }
.mxp-hero-clock { color: #ffdc78; font-weight: 700; font-size: 16px; }
.mxp-hero-title { font-size: clamp(26px, 4.4vw, 42px); font-weight: 800; margin: 12px 0 6px; line-height: 1.08; }
.mxp-hero-meta { color: #b7cdf0; font-size: clamp(14px, 2vw, 18px); font-weight: 600; }
.mxp-progress { height: 13px; border-radius: 999px; background: rgba(255, 255, 255, .14); margin: 18px 0 20px; overflow: hidden; }
.mxp-progress-fill { height: 100%; background: #ffc400; border-radius: 999px; transition: width 1s linear; }
.mxp-playrow { display: flex; align-items: center; gap: 14px; }
.mxp-play { width: 54px; height: 54px; flex: 0 0 54px; border: none; border-radius: 50%; background: #ffc400; cursor: pointer; position: relative; }
.mxp-play::before { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #081426; }
.mxp-play.is-playing::before { border: none; width: 16px; height: 18px; left: 50%; background: linear-gradient(90deg, #081426 0 6px, transparent 6px 10px, #081426 10px 16px); }
.mxp-play-label { font-size: 16.5px; font-weight: 600; }
.mxp-eq { margin-left: auto; display: flex; align-items: center; gap: 3.5px; height: 36px; }
.mxp-eq i { width: 6px; border-radius: 3px; background: #ffc400; animation: mxp-eq 1.1s ease-in-out infinite; }
.mxp-eq i:nth-child(3n) { background: #6db3ff; }
.mxp-eq i:nth-child(odd) { animation-delay: .25s; }
.mxp-eq i:nth-child(4n) { animation-delay: .5s; }
@keyframes mxp-eq { 0%, 100% { height: 10px; } 50% { height: 32px; } }

/* Liste du jour */
.mxp-row { display: flex; align-items: center; gap: 14px; padding: 7px 10px; border-radius: 12px; }
.mxp-row:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.mxp-row img { width: 96px; height: 48px; object-fit: cover; border-radius: 9px; filter: brightness(.55) saturate(.6); }
.mxp-row-title { font-weight: 600; font-size: 16.5px; color: #a9bedd; }
.mxp-row-time { margin-left: auto; font-weight: 700; font-size: 14.5px; color: #849ec4; white-space: nowrap; }

.mxp-nowbar { display: flex; align-items: center; gap: 9px; background: #ffc400; color: #0d1c3a; font-weight: 800; font-size: clamp(13.5px, 2vw, 16.5px); border-radius: 999px; padding: 11px 18px; margin: 12px 0 4px; }
.mxp-nowbar-dot { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; background: #e5202c; }
.mxp-next-label { color: #ffdc78; font-weight: 800; font-size: 14px; letter-spacing: 1.2px; margin: 16px 4px 8px; }

.mxp-card { display: flex; align-items: center; gap: 16px; background: rgba(16, 62, 133, .55); border-radius: 16px; padding: 10px 12px; margin-top: 10px; position: relative; }
.mxp-card img { width: 168px; height: 104px; object-fit: cover; border-radius: 12px; }
.mxp-card-body { min-width: 0; padding-right: 150px; }
.mxp-card-title { font-size: clamp(19px, 2.8vw, 26px); font-weight: 800; line-height: 1.15; }
.mxp-card-host { color: #b7cdf0; font-weight: 600; font-size: 15px; margin-top: 5px; }
.mxp-badge { display: inline-block; margin-top: 9px; color: #ffdc78; font-weight: 800; font-size: 12.5px; letter-spacing: .6px; }
.mxp-pill { position: absolute; top: 12px; right: 12px; background: #1e90ff; color: #fff; font-weight: 800; font-size: 14.5px; padding: 8px 15px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 14px rgba(30, 144, 255, .45); }

@media (max-width: 640px) {
  .mxp-hero { grid-template-columns: 1fr; }
  .mxp-hero img { height: 170px; min-height: 0; }
  .mxp-card { align-items: flex-start; }
  .mxp-card img { width: 110px; height: 84px; }
  .mxp-card-body { padding-right: 0; padding-top: 44px; }
  .mxp-row img { width: 74px; height: 40px; }
  .mxp-row-title { font-size: 14.5px; }
  .mxp-row-time { font-size: 12.5px; }
}

/* Largeur mobile (demande Ricardo, 2026-11-01) : le programme ne colle
   plus aux bords du téléphone — largeur réduite de 20 %, bloc centré. */
@media (max-width: 820px) {
  .mxp { width: 80%; }
}