@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap");
@import url("bootstrap.min.css");

/* THEME VARS */
:root{
  --bg:#ffffff; --panel:#ffffff; --ink:#0b1220; --muted:#667085; --line:rgba(11,18,32,.08);
  --soft-shadow: 0 6px 18px rgba(15,23,42,.08);
  --brand:#0a84ff; --danger:#ff1744;
  --gsa:#24b36c;
  --footer-ink:#9aa3b2;
}
body.theme-dark{
  --bg:#242424; --panel:#333333; --ink:#f2f2f2; --muted:#c9c9c9; --line:rgba(255,255,255,.08);
  --soft-shadow: 0 10px 24px rgba(0,0,0,.35);
  --footer-ink:#b8c0cc;
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; padding:0}
body{font-family:"Poppins", system-ui, -apple-system, Segoe UI, Arial, sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%; display:block}
.container{ width:100%; max-width:1320px; margin:0 auto; padding:0 24px; }

/* ============================ HEADER ============================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:var(--panel);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}
.site-header__inner{ height:68px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.site-header__brand img{height:40px; width:auto}

.site-header__menu{display:flex; align-items:center; gap:16px}
.site-header__menu a{
  font-weight:500; text-decoration:none; color:var(--ink);
  padding:8px 10px; border-radius:10px; transition:.2s ease;
}
.site-header__menu a:hover{ background:rgba(0,0,0,.05) }
body.theme-dark .site-header__menu a:hover{ background:rgba(255,255,255,.08) }

.btn-contact{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font-weight:600;
  box-shadow:0 2px 8px rgba(15,23,42,.05);
}
.btn-contact:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(15,23,42,.10) }

/* ======================== CANVAS FIXE ========================== */
main.no-scroll{ padding-top:36px; }
.fixed-canvas{ position:fixed; inset:68px 0 56px 0; overflow:hidden; background:transparent; }

/* ======================== LAYOUT / CARTES ====================== */
.layout-3cols{ height:100%; display:grid; grid-template-columns:360px 1fr 360px; gap:28px; }
.col-left,.col-center,.col-right{ min-width:0 }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; }
.card.soft-card{ border-color:transparent; box-shadow:var(--soft-shadow); }
.card-head{ position:relative; padding:12px 14px; border-bottom:1px solid var(--line); }
.card-title{ margin:0; font-size:16px; font-weight:800; letter-spacing:.02em; }
.card-body{ padding:12px 14px; }

/* ======================== HISTORIQUE (gauche) ================== */
.card .card-title{ font-size:18px; }
.history-scroll{ height:100%; display:flex; flex-direction:column; overflow:auto; scrollbar-width:none; padding-right:6px; }
.history-scroll::-webkit-scrollbar{width:0;height:0}
.history-row{
  display:grid; grid-template-columns:56px 1fr; gap:12px; align-items:center; padding:12px 0;
  border-bottom:1px solid var(--line);
}
.history-row:last-child{ border-bottom:0 }
.h-cover{ width:56px; height:56px; border-radius:8px; overflow:hidden; background:#e9eef5 }
.h-cover img{ width:100%; height:100%; object-fit:cover }
.h-title{ margin:0; font-weight:700; font-size:16px; line-height:1.24 }
.h-artist{ margin:0; font-size:14px; color:var(--muted) }
.h-time{ font-size:12px; color:var(--muted) }

.col-left{ padding-bottom:140px; }

/* ======================== NOW PLAYING (centre) ================= */
.col-center{ display:flex; flex-direction:column; align-items:center; padding-bottom:140px; }
.meta-top{ width:min(520px,64vh); margin:0 0 12px; position:relative; padding-top:34px; }
.current-song{ font-size:30px; font-weight:700; margin:0 0 6px; line-height:1.25; word-break:break-word; text-align:left }
.current-artist{ font-size:18px; margin:2px 0 10px; color:var(--muted); text-align:left }

.meta-top::before{
  content:"EN DIRECT"; position:absolute; top:0; left:0;
  display:inline-block; height:22px; line-height:22px;
  padding:0 10px 0 28px; border-radius:3px; font-size:12px; font-weight:700;
  color:#fff; background:#f70e0e; box-shadow:0 6px 16px rgba(247,14,14,.35);
  letter-spacing:.02em;
}
.meta-top::after{
  content:""; position:absolute; top:5px; left:8px; width:10px; height:10px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.9); animation: liveping 1.6s infinite;
}
@keyframes liveping{
  0%{ transform:scale(.9); box-shadow:0 0 0 0 rgba(255,255,255,.9) }
  70%{ transform:scale(1); box-shadow:0 0 0 10px rgba(255,255,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0) }
}

.main-artwork{
  width:clamp(300px, 44vh, 480px); aspect-ratio:1/1;
  border-radius:18px; overflow:hidden; background:#000;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
#currentCoverArt{ width:100%; height:100%; background:#f0f2f7 center/cover no-repeat; transition: background-image 1s ease; }

.controls-under{ display:flex; gap:14px; align-items:center; margin:16px 0 8px }
.btn-play-round{
  width:58px; height:58px; border-radius:50%;
  border:0; background:var(--gsa); color:#fff; display:grid; place-items:center;
 
}
.btn-play-round i{ font-size:22px }
.btn-play-round:hover{ filter:brightness(1.03); transform:translateY(-1px) }

.btn-share{ background:none; border:none; padding:0; display:inline-flex; gap:8px; align-items:center; font-weight:600; color:var(--ink) }
.btn-share span{ font-weight:500 }
.btn-share:hover{ opacity:.9 }

/* Volume */
:root{ --npw: clamp(300px, 44vh, 480px); --vol: 80%; --vol-base:#e3e7ef; --vol-fill: var(--gsa); }
.meta-top, .main-artwork, .volume-strip{ width: var(--npw); margin-left:auto; margin-right:auto; }
.volume-strip{ display:flex; align-items:center; gap:12px; margin-top:12px }
.volume-icon{ color:var(--muted) }
.range-modern{
  -webkit-appearance:none; width:100%; height:4px; border-radius:999px; outline:none;
  background:
    linear-gradient(var(--vol-fill),var(--vol-fill)) 0/var(--vol) 100% no-repeat,
    var(--vol-base);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
.range-modern::-webkit-slider-thumb{
  -webkit-appearance:none; margin-top:-6px; width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid var(--vol-fill); box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.range-modern::-moz-range-track{ height:8px; background:transparent; border:none; }
.range-modern::-moz-range-progress{ height:8px; background:var(--vol-fill); border:none; }
.range-modern::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--vol-fill);
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.volume-indicator{ min-width:40px; text-align:right; color:var(--muted) }

/* ======================== DROITE (widgets) ===================== */
.sidebar-right .card{ margin-bottom:14px }
.clock-time{ font-size:42px; font-weight:800; line-height:1; }
.clock-date{ color:var(--muted); margin-top:6px }

.card-head .card-action{
  position:absolute; left:12px; top:10px; border:0; background:transparent; color:var(--ink);
}
.card-head .card-title[data-lyrics-title]{ padding-left:36px; }

/* Bloc Stores d’origine (droite) — conservé, mais masqué si déplacé */
#storesBlock{ margin-top:8px }
#storesBlock::before{
  content:"Télécharger l’application"; display:block; font-size:13px; color:var(--muted); margin:0 0 6px 2px;
}
.stores-row{ display:flex; gap:12px; }
.store-badge img{ height:56px; width:auto; border-radius:8px; display:block; box-shadow: var(--soft-shadow) }

/* Réseaux sociaux : une seule ligne + scroll discret si écran étroit */
.social-block{ margin-top:20px }
.social-title{ font-weight:400; font-size:13px; color:var(--muted); margin-bottom:8px }
.social-row{
  display:flex; gap:25px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.social-row a{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--ink); color:var(--panel);
  transition:.2s ease; text-decoration:none; flex:0 0 auto;
}
.social-row a:hover{ transform:translateY(-2px); opacity:.95 }

/* ======================== FOOTER ================================ */
.site-footer{ position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--panel); border-top:1px solid var(--line); }
.footer-row{ height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px }
.footer-left, .footer-right{ color:#959595; font-weight:300;font-size:14px }
.footer-right a{ color:var(--footer-ink); text-decoration:none; font-weight:100;font-size:14px; }
.footer-right a:hover{ color:#959595; text-decoration:underline }
.sep{ margin:0 8px; color:var(--footer-ink) }

/* ======================== Theme toggle ========================== */
.theme-toggle{
  position:fixed; right:16px; bottom:72px; z-index:60; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); display:grid; place-items:center;
  box-shadow: var(--soft-shadow);
}

/* ======================== Modales =============================== */
.modal-content{ background:var(--panel); color:var(--ink); border-radius:14px; border:1px solid var(--line) }
.modal-header,.modal-footer{ border-color:var(--line) }
.modal-help{ color:var(--muted); margin-bottom:12px }

/* ======================== Responsive ============================ */
@media (max-width:1100px){
  .layout-3cols{ grid-template-columns:1fr; gap:18px }
  .col-right{ order:3 } .col-left{ order:2 } .col-center{ order:1 }
  .meta-top, .main-artwork, .volume-strip{ width:100%; max-width:520px; margin-left:auto; margin-right:auto }
}

/* Renforts explicites */
.current-song{ font-size:30px !important; font-weight:700 !important; }

/* === PAGE FIXE : garde la structure actuelle === */
html, body{ height:100%; overflow:hidden; }
main.no-scroll{ padding-top:108px; }
.layout-3cols{
  height: calc(100vh - 108px - 56px);
  overflow: hidden;
}
.col-left{ padding-bottom:0; }

/* Carte historique = hauteur auto, 5 items visibles max (scroll interne) */
:root{ --history-row: 90px; }
.layout-3cols{ align-items:start !important; }
.col-left{ align-self:start !important; }
.layout-3cols .col-left .card{
  height:auto !important; display:block !important; margin-bottom:0 !important; border-radius:16px !important;
}
.col-left .card-head{ border-bottom:1px solid var(--line); }
.col-left .card-body.history-scroll{
  flex: initial !important; min-height:0 !important;
  max-height: calc(var(--history-row) * 5) !important;
  overflow:auto !important; scrollbar-width:none; padding-right:6px;
  border-bottom-left-radius:16px; border-bottom-right-radius:16px;
}
.col-left .card-body.history-scroll::-webkit-scrollbar{ width:0; height:0 }

/* -------- Stores SOUS la colonne gauche (sans casser la grille) -------- */
aside.col-left .stores-left{ margin:14px 0 0 0; max-width:100%; display:none; }
aside.col-left .stores-left .stores-left-title{
  font-weight:600; font-size:14px; opacity:.9; margin:0 0 8px 2px;
}
aside.col-left .stores-left .stores-left-row{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
aside.col-left .stores-left .stores-left-row img{
  height:44px; display:block; border-radius:8px; box-shadow:var(--soft-shadow);
}
@media (max-width: 992px){
  aside.col-left .stores-left .stores-left-row img{ height:40px; }
}










/* --- Ajustements Stores (gauche) --- */
.stores-left{
  /* un peu d'air pour séparer du card au-dessus */
  margin: 18px 2px 0 2px;
  padding-top: 6px;
}

.stores-left-title{
  font-weight: 400;
  font-size: 13px;          /* texte un peu plus petit */
  line-height: 1.2;
  opacity: .85;
  margin: 0 0 8px;          /* espace sous le titre */
}

/* les deux badges côte à côte, sans retour à la ligne */
.stores-left-row{
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: nowrap;        /* évite de passer à la ligne */
}

/* conteneur de chaque badge */
.stores-left-row .store-badge{
  display: inline-flex;
  line-height: 0;
}

/* taille maîtrisée pour tenir à deux dans la colonne */
.stores-left-row .store-badge img{
  width: 130px;             /* même largeur pour Google & Apple */
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}

/* léger downscale sur écrans plus étroits */
@media (max-width: 1200px){
  .stores-left-row .store-badge img{ width: 150px; }
}
@media (max-width: 1024px){
  .stores-left-row .store-badge img{ width: 140px; }
}










/* === Supprimer le flash "Loading…" au chargement === */
/* Par défaut, on rend les placeholders invisibles */
.song-skeleton,
.artist-skeleton { opacity: 0; }

/* Dès qu'on a prérempli (cache ou 1er fetch), on autorise l'affichage normal */
.np-warmready .song-skeleton,
.np-warmready .artist-skeleton { opacity: 1; }

/* === Bouton de changement de thème : visibilité garantie === */
.theme-toggle{
  position: fixed;
  right: 16px;
  bottom: 72px;              /* au-dessus du footer */
  z-index: 2000;             /* passe devant tout */
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--soft-shadow);
}










/* Supprimer le flash "Loading…" au chargement */
.song-skeleton,
.artist-skeleton { opacity: 0; }
.np-warmready .song-skeleton,
.np-warmready .artist-skeleton { opacity: 1; }

/* Bouton Dark/Light remis au premier plan */
.theme-toggle{
  position: fixed;
  right: 16px;
  bottom: 72px;
  z-index: 2000;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--soft-shadow);
}






/* ====== Pochette anti-flash + fade-in ====== */
.main-artwork #currentCoverArt{
  background: var(--art-bg, rgba(0,0,0,.25)); /* fond discret en attente */
}
.theme-light .main-artwork #currentCoverArt{
  --art-bg: rgba(0,0,0,.06); /* variante claire */
}

/* l'image n'apparaît qu'une fois décodée (gérée par JS), puis fondu */
#currentCoverArt img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transition: opacity .25s ease-in;
  background: transparent; /* pas de fond blanc */
}
#currentCoverArt.ready img{ opacity:1; }






/* === Patch bouton Play/Pause — suppression des anneaux/bords === */
/* retire toute bordure/contour visible du bouton rond */
.btn-play-round{
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* certains thèmes ajoutent un anneau via pseudo-éléments : on les neutralise */
.btn-play-round::before,
.btn-play-round::after{
  content: none !important;
  display: none !important;
}

/* pas d’anneau non plus au focus/active */
.btn-play-round:focus,
.btn-play-round:active{
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}




/* v2025-11-07 — Patch lisibilité modales (mode sombre) : Lyrics + A propos */
.theme-dark #modalLyrics .modal-content,
.theme-dark #modalAbout  .modal-content {
  background: #1b1f24 !important;           /* fond plein (pas d'opacité) */
  color: #e9ecf1 !important;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  backdrop-filter: none !important;          /* pas de blur qui grise le texte */
}

.theme-dark #modalLyrics .modal-header,
.theme-dark #modalAbout  .modal-header {
  background: #1b1f24 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #f3f5f7 !important;
}

.theme-dark #modalLyrics .modal-body,
.theme-dark #modalAbout  .modal-body {
  color: #e9ecf1 !important;
}

/* Bouton fermer (X) lisible */
.theme-dark #modalLyrics .close span,
.theme-dark #modalAbout  .close span {
  color: #cfd6df !important;
}
.theme-dark #modalLyrics .close:hover span,
.theme-dark #modalAbout  .close:hover span {
  color: #ffffff !important;
}

/* Texte des paroles : contraste + mise en forme propre */
#modalLyrics .lyrics-pre {
  white-space: pre-wrap;
  line-height: 1.55;
  margin: 0;
  background: transparent;
  color: inherit;                            /* hérite du blanc en sombre */
  font-size: 15px;
}

/* Squelettes de chargement moins envahissants en sombre */
.theme-dark #modalLyrics .lyrics-skeleton-line {
  background: rgba(255,255,255,.08) !important;
}







/* v2025-11-07 — Patch lisibilité MODALE "A propos" (thème sombre) */
.theme-dark #modalAbout .modal-content{
  background:#1b1f24 !important;          /* fond plein (pas d'opacité) */
  color:#e9ecf1 !important;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
  backdrop-filter:none !important;         /* supprime le voile/grisage interne */
}
.theme-dark #modalAbout .modal-header{
  background:#1b1f24 !important;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#f3f5f7 !important;
}
.theme-dark #modalAbout .modal-body{
  color:#e9ecf1 !important;
}
.theme-dark #modalAbout .modal-body h1,
.theme-dark #modalAbout .modal-body h2,
.theme-dark #modalAbout .modal-body h3,
.theme-dark #modalAbout .modal-body h4,
.theme-dark #modalAbout .modal-body h5,
.theme-dark #modalAbout .modal-body h6{
  color:#f6f8fa !important;
}
.theme-dark #modalAbout .modal-body p,
.theme-dark #modalAbout .modal-body li{
  color:#e9ecf1 !important;
  line-height:1.6;
}
.theme-dark #modalAbout .modal-body a{
  color:#b9d7ff !important;
  text-decoration:underline;
}
.theme-dark #modalAbout .close span{
  color:#cfd6df !important;
}
.theme-dark #modalAbout .close:hover span{
  color:#ffffff !important;
}