/* =========================================================
   widgets/embed/audiogrid/audiogrid.css
   DESIGN PREMIUM (desktop + mobile) — CSS ONLY
   ⚠️ Ne touche pas au fonctionnement (JS/HTML inchangés)
   ========================================================= */

/* Scope + reset léger */
.audiogrid-wrap,
.audiogrid-wrap *{
  box-sizing: border-box;
}
.audiogrid-wrap a{
  text-decoration: none;
  color: inherit;
}
.audiogrid-wrap img{
  max-width: 100%;
  display: block;
}
.audiogrid-wrap button,
.audiogrid-wrap input,
.audiogrid-wrap select{
  font: inherit;
}

/* Variables SCOPEES (évite d’impacter le site) */
.audiogrid-wrap{
  --ag-bg: #0b1220;
  --ag-surface: rgba(255,255,255,.06);
  --ag-surface2: rgba(255,255,255,.10);
  --ag-card: rgba(15,26,46,.72);
  --ag-text: rgba(234,240,255,.95);
  --ag-muted: rgba(234,240,255,.68);
  --ag-line: rgba(255,255,255,.10);
  --ag-line2: rgba(255,255,255,.14);
  --ag-accent: #ff0000;

  --ag-radius: 20px;
  --ag-radius-sm: 14px;

  --ag-shadow: 0 14px 40px rgba(0,0,0,.35);
  --ag-shadow2: 0 18px 60px rgba(0,0,0,.35);

  --ag-blur: blur(12px);
  --ag-focus: 0 0 0 3px rgba(255,0,0,.22);

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ag-text);
}

/* Wrap */
.audiogrid-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(1000px 400px at 10% 0%, rgba(255,0,0,.12), transparent 55%),
    radial-gradient(900px 380px at 90% 10%, rgba(80,140,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(10,18,33,.94), rgba(9,16,30,.94));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}

/* =========================================================
   HEADER (Titre + filtres)
   ========================================================= */
.audiogrid-head{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom: 14px;
}

.audiogrid-head h2{
  margin: 0;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: .2px;
  font-weight: 850;
  line-height: 1.2;
}

.audiogrid-controls{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}

.audiogrid-controls input,
.audiogrid-controls select{
  height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--ag-line);
  background: rgba(255,255,255,.05);
  color: var(--ag-text);
  outline: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  backdrop-filter: var(--ag-blur);
  -webkit-backdrop-filter: var(--ag-blur);
}

.audiogrid-controls input::placeholder{
  color: rgba(234,240,255,.55);
}

.audiogrid-controls input:focus,
.audiogrid-controls select:focus{
  box-shadow: var(--ag-focus);
  border-color: rgba(255,0,0,.28);
}

/* =========================================================
   GRID
   ========================================================= */
.audiogrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

@media (max-width: 980px){
  .audiogrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px){
  .audiogrid{ grid-template-columns: 1fr; }
  .audiogrid-wrap{ padding: 14px; }
}

/* =========================================================
   CARD
   ========================================================= */
.audiocard{
  position: relative;
  border-radius: var(--ag-radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--ag-shadow);
  display:flex;
  flex-direction:column;
  min-height: 340px;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.audiocard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(255,0,0,.10), transparent 60%),
    radial-gradient(520px 220px at 90% 10%, rgba(80,140,255,.08), transparent 60%);
  opacity:.9;
}

.audiocard:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.16);
  box-shadow: var(--ag-shadow2);
}

/* Image */
.audiocard .rssimg{
  position:relative;
  height: 170px;
  background: rgba(255,255,255,.05);
}

.audiocard .rssimg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.audiocard .rssimg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}

/* Top line */
.audiocard .rsstopline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px 0 14px;
  position: relative;
  z-index: 1;
}

.audiocard .rsssource{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.audiocard .rsssource span{
  color: rgba(234,240,255,.78);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audiocard .rsdate{
  color: rgba(234,240,255,.60);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 48%;
}

/* Body */
.audiocard .rsbody{
  padding: 10px 14px 14px 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.audiocard .rsstitle{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .1px;
  color: var(--ag-text);
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.audiocard .rssdesc{
  margin: 0;
  color: rgba(234,240,255,.75);
  font-size: 13.5px;
  line-height: 1.45;
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* Actions (player) */
.audiocard .rssactions{
  margin-top: auto;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* =========================================================
   PLAYER (premium)
   Classes existantes conservées: audioPlayerWrap, audioPlayerTop,
   audioStopBtn, audioPlayEmbedBtn, embedWrap, embedTarget...
   ========================================================= */
.audioPlayerWrap{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,14,26,.50);
  border-radius: 16px;
  padding: 12px;
  backdrop-filter: var(--ag-blur);
  -webkit-backdrop-filter: var(--ag-blur);
  box-shadow: 0 10px 26px rgba(0,0,0,.30);
}

/* Desktop: boutons alignés + audio full width */
.audioPlayerTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

/* Boutons premium */
.audioStopBtn,
.audioPlayEmbedBtn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--ag-text);
  border-radius: 999px;
  height: 38px;
  padding: 0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  cursor:pointer;
  font-weight: 850;
  letter-spacing: .2px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  transition: transform .08s ease, background .18s ease, border-color .18s ease;
}

.audioStopBtn:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.20);
}

.audioPlayEmbedBtn{
  background: rgba(255,0,0,.10);
  border-color: rgba(255,0,0,.25);
}

.audioPlayEmbedBtn:hover{
  background: rgba(255,0,0,.14);
  border-color: rgba(255,0,0,.34);
}

.audioStopBtn:active,
.audioPlayEmbedBtn:active{
  transform: scale(.98);
}

.audioStopBtn:focus-visible,
.audioPlayEmbedBtn:focus-visible{
  outline: none;
  box-shadow: var(--ag-focus);
}

/* Audio natif : plein width + aspect propre */
.audioPlayerWrap audio{
  width: 100%;
  display:block;
  border-radius: 14px;
  outline: none;
  opacity: .98;
  /* Certains navigateurs prennent en compte cette couleur */
  accent-color: var(--ag-accent);
}

/* EMBED (SoundCloud/Spotify/etc) */
.embedWrap{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  overflow:hidden;
  display:none;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

.embedWrap.is-open{
  display:block;
}

.embedTarget{
  width: 100%;
}

.embedTarget iframe{
  width: 100%;
  height: 260px;
  border: 0;
  display:block;
}

/* Texte fallback embed */
.embedMissing{
  padding: 12px;
  color: rgba(234,240,255,.78);
  font-size: 13.5px;
  line-height: 1.45;
}

.embedMissing code{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  padding: 2px 6px;
  border-radius: 10px;
}

.embedHint{
  margin-top: 8px;
  color: rgba(234,240,255,.55);
  font-size: 12px;
}

/* =========================================================
   BADGE (icônes)
   ========================================================= */
.rssbadge{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

/* Base */
.rssbadge-icon::before{
  content:"";
  width: 16px;
  height: 16px;
  display:block;
  background-repeat:no-repeat;
  background-size:16px 16px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<circle cx='11' cy='11' r='8'/>\
<line x1='21' y1='21' x2='16.65' y2='16.65'/>\
</svg>");
  opacity:.88;
}

/* Radio */
.rssbadge.is-radio::before{
  content:"";
  width:16px;height:16px;display:block;
  background-repeat:no-repeat;background-size:16px 16px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 8h12v10H6z'/>\
<path d='M8 8V6l8-2v4'/>\
<circle cx='10' cy='13' r='1'/>\
<path d='M14.5 12.5a2 2 0 0 1 0 3'/>\
<path d='M16.5 11a4 4 0 0 1 0 6'/>\
</svg>");
  opacity:.9;
}

/* Podcast */
.rssbadge.is-podcast::before{
  content:"";
  width:16px;height:16px;display:block;
  background-repeat:no-repeat;background-size:16px 16px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M12 14a2 2 0 0 0 2-2V7a2 2 0 0 0-4 0v5a2 2 0 0 0 2 2z'/>\
<path d='M19 11a7 7 0 0 1-14 0'/>\
<path d='M12 18v3'/>\
<path d='M8 21h8'/>\
</svg>");
  opacity:.9;
}

/* Musique */
.rssbadge.is-musique::before{
  content:"";
  width:16px;height:16px;display:block;
  background-repeat:no-repeat;background-size:16px 16px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M9 18V5l12-2v13'/>\
<circle cx='7' cy='18' r='3'/>\
<circle cx='19' cy='16' r='3'/>\
</svg>");
  opacity:.9;
}

/* Replay */
.rssbadge.is-replay::before{
  content:"";
  width:16px;height:16px;display:block;
  background-repeat:no-repeat;background-size:16px 16px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M3 12a9 9 0 1 0 3-6.7'/>\
<path d='M3 4v6h6'/>\
</svg>");
  opacity:.9;
}

/* =========================================================
   FOOT (pagination / status)
   ========================================================= */
.audiogrid-foot{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:center;
  margin-top: 16px;
}

.audiobtn{
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--ag-text);
  cursor:pointer;
  font-weight: 800;
  letter-spacing:.2px;
  backdrop-filter: var(--ag-blur);
  -webkit-backdrop-filter: var(--ag-blur);
  transition: transform .08s ease, background .18s ease, border-color .18s ease;
}

.audiobtn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}

.audiobtn:active{
  transform: scale(.98);
}

.audiostatus{
  color: rgba(234,240,255,.60);
  font-size: 13px;
}

/* =========================================================
   MOBILE PREMIUM (évite le “gros pavé”)
   ========================================================= */
@media (max-width: 520px){

  .audiocard{
    min-height: 0;
  }

  .audiocard .rssimg{
    height: 160px;
  }

  .audiocard .rsstopline{
    padding: 12px 12px 0 12px;
  }

  .audiocard .rsbody{
    padding: 10px 12px 12px 12px;
    gap: 8px;
  }

  .audiocard .rsstitle{
    font-size: 17px;
  }

  /* Player plus compact + boutons en 2 colonnes */
  .audioPlayerWrap{
    padding: 10px;
    border-radius: 18px;
  }

  .audioPlayerTop{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }

  .audioStopBtn,
  .audioPlayEmbedBtn{
    width: 100%;
    height: 42px;
    padding: 0 10px;
    border-radius: 16px;
  }

  /* Audio natif */
  .audioPlayerWrap audio{
    width: 100%;
    height: 44px;
    border-radius: 16px;
  }

  /* Embed plus bas sur mobile */
  .embedTarget iframe{
    height: 220px;
  }
}

/* =========================================================
   Accessibilité + Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .audiocard,
  .audioStopBtn,
  .audioPlayEmbedBtn,
  .audiobtn{
    transition: none !important;
  }
}
/* =========================================================
   FIX Chrome / WebKit audio controls (DESIGN ONLY)
   Objectif: éviter le rendu "compact" (gros play) sur Chrome
   ========================================================= */

/* 1) On évite de forcer une hauteur trop "custom" sur <audio> */
.audioPlayerWrap audio{
  height: auto !important;       /* laisse le navigateur choisir */
  min-height: 44px;              /* garde une hauteur premium */
  max-height: 56px;              /* évite le gros pavé */
  border-radius: 14px;
  background: transparent;
}

/* 2) Ciblage WebKit (Chrome, Edge, Opera, Safari) */
@supports (-webkit-appearance: none) {

  /* L'enveloppe des controls doit prendre toute la largeur */
  .audioPlayerWrap audio::-webkit-media-controls-enclosure{
    width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden;
  }

  /* Panel : on harmonise avec le "glass" */
  .audioPlayerWrap audio::-webkit-media-controls-panel{
    background: rgba(255,255,255,.06) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Timeline + volume : évite l’effet "mini" */
  .audioPlayerWrap audio::-webkit-media-controls-timeline{
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Certains Chrome Android compressent: on force l'espace */
  .audioPlayerWrap{
    padding: 14px;               /* un peu plus d’air */
  }
}

/* 3) Mobile Chrome: on garde un rendu cohérent */
@media (max-width: 520px){
  .audioPlayerWrap audio{
    min-height: 46px;
    max-height: 58px;
    border-radius: 16px;
  }
}