/*
Theme Name: Wanted Médias
Theme URI: https://wantedmedias.fr
Author: Wanted Médias
Author URI: https://wantedmedias.fr
Description: Block theme (FSE) pour l'association Wanted Médias et la webradio Wanted Radio. Comprend le lecteur live, la grille des émissions (CPT show), les actualités et toutes les pages institutionnelles. Compatible WordPress 6.4+.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wantedmedias
Tags: full-site-editing, block-theme, custom-colors, custom-logo, editor-style, one-column, wide-blocks, news, blog
*/

/* Variables (mirror theme.json so that block & non-block contexts agree). */
:root {
  --wm-ink:        #222223;
  --wm-cream:      #F6EDDA;
  --wm-white:      #FFFFFF;
  --rule:          rgba(246, 237, 218, 0.2);
  --rule-strong:   rgba(246, 237, 218, 0.45);
  --bg-elevated:   #2B2B2C;

  --show-orange:   #FD5511;
  --show-lilac:    #BF87C2;
  --show-yellow:   #F6FA79;
  --show-gold:     #FFCF3F;
  --show-emerald:  #57B479;
  --show-magenta:  #D83196;
  --show-lime:     #91CE66;
  --show-red:      #F72244;
  --show-mint:     #4FB395;

  --font-display:  'Cabinet Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:     'Cabinet Grotesk', 'Inter', system-ui, sans-serif;
}

@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800,900&display=swap');

html, body {
  margin: 0;
  background: var(--wm-ink);
  color: var(--wm-cream);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Anti-Gutenberg defaults */
.wp-site-blocks { background: var(--wm-ink); }
a { color: var(--wm-cream); }

/* =====================================================================
   Section accordion (used on the homepage)
   ===================================================================== */
.wm-section {
  border-top: 1px solid var(--rule);
}
.wm-section[open] {
  background: var(--wm-ink);
}
.wm-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 55px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--wm-white);
  transition: color 120ms ease;
}
.wm-section > summary::-webkit-details-marker { display: none; }
.wm-section[open] > summary,
.wm-section > summary:hover { color: var(--wm-cream); }
.wm-section > summary .wm-affordance {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  display: inline-flex; align-items: center; gap: 12px;
}
.wm-section > .wm-section-body {
  padding: 0 32px 80px 32px;
}

/* =====================================================================
   Buttons
   ===================================================================== */
.wm-button,
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 32px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--wm-ink);
  color: var(--wm-cream);
  border: 1px solid var(--wm-ink);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
}
.wm-button:hover,
.wp-block-button .wp-block-button__link:hover {
  background: var(--wm-cream);
  color: var(--wm-ink);
  border-color: var(--wm-cream);
}

/* =====================================================================
   Live radio player (front-page hero)
   ===================================================================== */
.wm-player {
  display: grid;
  grid-template-columns: 1fr 2fr 200px;
  align-items: center;
  gap: 32px;
  padding: 32px 36px;
  color: var(--wm-ink);
  background: var(--show-magenta);
  transition: background 240ms ease;
}
@media (max-width: 800px) {
  .wm-player { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .wm-player .wm-player-cover { justify-self: start; }
}
.wm-player-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em;
}
.wm-player-live .wm-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wm-ink);
  animation: wmpulse 1.4s ease-in-out infinite;
}
@keyframes wmpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.wm-player-title {
  font-family: var(--font-display); font-weight: 800; font-size: 32px;
  letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.05;
  margin: 6px 0 4px;
}
.wm-player-meta {
  font-family: var(--font-body); font-size: 12px; opacity: 0.85;
}

.wm-play-btn {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--wm-ink); background: transparent;
  color: var(--wm-ink); font-size: 18px; font-weight: 700;
  cursor: pointer; font-family: var(--font-display);
}
.wm-play-btn:hover { background: var(--wm-ink); color: var(--wm-cream); }

.wm-waveform {
  display: flex; align-items: center; gap: 2px; height: 56px;
  margin-top: 8px;
}
.wm-waveform span {
  width: 3px; background: var(--wm-ink); display: inline-block;
}

.wm-player-cover img {
  width: 160px; height: 160px; object-fit: cover; display: block;
}

/* =====================================================================
   Grid utilities
   ===================================================================== */
.wm-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.wm-stat { padding: 32px 24px; border-left: 1px solid var(--rule); }
.wm-stat:first-child { border-left: 0; }
.wm-stat-n {
  font-family: var(--font-display); font-weight: 800; font-size: 56px;
  line-height: 1; color: var(--wm-cream); letter-spacing: -0.01em;
}
.wm-stat-lbl {
  margin-top: 8px; font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6;
}

.wm-shows-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 900px) { .wm-shows-grid { grid-template-columns: repeat(2, 1fr); } }
.wm-show-card {
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: var(--wm-cream);
  background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer;
}
.wm-show-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.wm-show-name {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.wm-show-time { font-family: var(--font-body); font-size: 11px; opacity: 0.6; }
.wm-show-cta {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* =====================================================================
   News grid
   ===================================================================== */
.wm-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .wm-news-grid { grid-template-columns: 1fr; } }
.wm-news-card {
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--rule); padding-top: 20px;
  text-decoration: none; color: inherit;
}
.wm-news-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #111; }
.wm-news-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  line-height: 1.15; letter-spacing: 0.01em; text-transform: uppercase;
  margin: 0; color: var(--wm-cream);
}
.wm-news-card p { font-family: var(--font-body); font-size: 13px; line-height: 1.5; opacity: 0.85; margin: 0; }
.wm-news-meta { display: flex; gap: 14px; align-items: center; font-size: 11px; }
.wm-news-tag {
  padding: 4px 10px; border: 1px solid var(--rule-strong);
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.wm-news-date { opacity: 0.6; }

/* =====================================================================
   Header / Footer chrome
   ===================================================================== */
.wm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 32px; border-bottom: 1px solid var(--rule);
}
.wm-header img { height: 36px; }
.wm-header nav { display: flex; gap: 24px; }
.wm-header nav a {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wm-cream); text-decoration: none;
}

.wm-footer {
  border-top: 1px solid var(--rule); padding: 60px 32px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px;
}
.wm-footer h4 {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6;
  margin: 0 0 12px;
}
.wm-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.wm-footer a { color: var(--wm-cream); text-decoration: none; font-size: 13px; }

/* Hero */
.wm-hero {
  padding: 80px 32px 60px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(50px, 9vw, 110px); line-height: 0.95;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--wm-cream);
}