:root{
  --primary:#6c6fc6;
  --bg-body:#0b0b12;
  --bg-app:transparent;
  --bg-inset:#404040;
  --bg-transparent:rgb(255 255 255 / 10%);
  --bg-modal:rgb(255 255 255 / 20%);
  --bg-dark:rgb(0 0 0 / 75%);
  --bg-gradient:#ffffff;
  --color-title:#ffffff;
  --color-text:rgb(255 255 255 / 70%);
  --duration:.3s;
  --container:1480px;
  --spacer:1rem;
  --shadow-l:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);
  --shadow-xl:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2);
  --scrollbar-color:rgb(255 255 255 / 50%);
  --main-padding:1rem;
}

/* Page FIXE */
html,body{height:100%;overflow:hidden}
html{line-height:1.5;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
*,::after,::before{box-sizing:border-box}
*{margin:0}
a{color:var(--primary);text-decoration:none;transition:color var(--duration)}
small{font-size:80%}
button,input,select,textarea{padding:0;border:0;font:inherit;color:inherit}
input:focus,textarea:focus{outline:0}
[hidden]{display:none}
ul,ol{list-style:none;padding:0}
canvas,embed,iframe,img,object,svg,video{display:block;max-width:100%}
audio,video{width:100%}
b,strong{font-weight:700;color:var(--color-title)}
::-webkit-resizer{display:none}

/* Fond dégradé */
body{
  background:
    radial-gradient(1200px 800px at 10% -10%, #6e44ff 0%, transparent 60%),
    radial-gradient(1000px 700px at 100% 20%, #c77dff 0%, transparent 60%),
    linear-gradient(135deg, #0b0b12 0%, #1a1333 45%, #3b215e 100%);
  color:var(--color-text);
  font-family:Montserrat, sans-serif;
}

.app{position:relative;overflow:hidden;height:100vh;width:100vw}

/* Header caché en mobile pour éviter la bande claire */
.header{position:absolute;width:100%;z-index:50}
.header-wrapper{padding:var(--main-padding)}
.header-logo-img{height:56px;image-rendering:auto}
@media(min-width:992px){:root{--main-padding:3vw}.header-logo-img{height:64px}}
@media(max-width:575px){.header{display:none!important}}

/* ===== Player ===== */
.player{
  position:fixed; inset:0; z-index:10;
  padding:2rem;
  overflow:hidden;
  padding-bottom:210px;
}
@media(max-width:991px){
  .player{
    padding:1rem;
    padding-top:1rem;
    padding-bottom:300px; /* + espace pour contact, icônes et volume */
  }
}
@supports(padding:max(0px)){
  .player{
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right:max(1rem, env(safe-area-inset-right));
    padding-bottom: max(300px, env(safe-area-inset-bottom) + 200px);
  }
}

.player-cover-title .station-name{font-weight:800;color:#fff;letter-spacing:.04em}
.player-cover-title .station-description{font-weight:700;color:#fff}
.player-cover-image{display:none!important}

.player-wrapper{margin:auto;position:relative;z-index:10}
.player-artwork{
  background-color:#ffffff10;border-radius:15px;box-shadow:var(--shadow-l);
  overflow:hidden;width:100%;max-width:375px;aspect-ratio:1/1;display:flex;
}
@media(max-width:575px){.player-artwork{max-width:88vw}}
.player-artwork img{transition:transform calc(var(--duration)*3)}

/* LIVE */
.live-banner{
  margin:.6rem 0 .8rem;display:inline-flex;align-items:center;gap:.5rem;
  background:#E53935;color:#fff;border-radius:4px;padding:.35rem .8rem;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 8px 24px rgba(229,57,53,.35);
}
.live-dot{width:.55rem;height:.55rem;border-radius:50%;background:#fff;animation:blink 1.2s infinite}
@keyframes blink{0%,100%{opacity:.4}50%{opacity:1}}
.player-program{display:none!important}

/* Contrôles */
.player-controller{
  display:flex;align-items:center;justify-content:center;
  gap:1rem;padding-top:.8rem;flex-wrap:wrap;margin-bottom:2.6rem;
}
.controls-stack{display:flex;align-items:center;gap:1rem;flex-wrap:nowrap}
.player-button{color:rgba(255,255,255,.9);transition:color var(--duration),background-color var(--duration)}
.player-button:hover{color:#fff}
.player-button-play{
  padding:.95rem;border-radius:14px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
}
.player-button-play::before,.player-button-play::after{display:none}

/* ===== Volume moderne ===== */
.volume-inline{display:flex;align-items:center;gap:.6rem;min-width:160px}
.volume-icon{--i-size:22px}
.volume-range{
  appearance:none;
  width:240px;              /* desktop par défaut */
  height:6px;border-radius:999px;background:rgba(255,255,255,.25)
}
.volume-range::-webkit-slider-thumb{
  appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);
  border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);
}
@media(max-width:575px){
  .song-artist{font-size:.82rem!important;text-align:center}
  .song-name{font-size:1.05rem!important;text-align:center}
  .controls-stack{gap:.7rem;flex-wrap:wrap;justify-content:center}
  .volume-range{
    width:72vw;           /* moins large sur smartphone */
    max-width:320px;
  }
}

/* ===== Icônes sociales ===== */
.player-social{
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.1)) drop-shadow(0 3px 1px rgba(0,0,0,.075));
  gap:.5rem;
}
@media(min-width:992px){
  .player-social{position:absolute;padding:var(--main-padding);z-index:50;right:0;bottom:3.7rem;gap:1.125vw}
}
@media(max-width:991px){
  .player-social{
    position:fixed !important;
    right: max(12px, env(safe-area-inset-right) + 8px);
    bottom: max(140px, env(safe-area-inset-bottom) + 140px); /* ↑ au-dessus du play/volume */
    z-index:60; gap:10px;
  }
}
.player-social-item{
  border:none!important;background:#842871!important;color:#fff!important;
  box-shadow:0 8px 24px rgba(132,40,113,.35);
  transition:transform .15s ease, box-shadow .2s ease;
}
.player-social-item:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(132,40,113,.45)}
.player-social .i{stroke:#fff!important}

/* ===== Footer (contact + copyright) ===== */
.footer small{line-height:1.35}
.footer-contact .label{color:var(--color-text)}
.footer-contact .value,.footer-contact a{color:#fff!important;font-weight:500} /* 500 comme demandé */
.footer-copyright strong{font-weight:500} /* 500 pour © */
@media(min-width:992px){
  .footer{position:absolute;padding:var(--main-padding);bottom:0;left:0;display:inline-flex;z-index:10}
  .footer-wrapper{gap:1.25vw}
}
/* ► Afficher en mobile en bas-gauche, compact */
@media(max-width:575px){
  .footer{
    position:fixed !important;
    left: max(12px, env(safe-area-inset-left) + 8px);
    bottom: max(48px, env(safe-area-inset-bottom) + 48px);
    z-index:30;
    display:block !important;
  }
  .footer small{font-size:.78rem}
  .footer-contact{margin:0 0 .25rem 0}
  .footer-copyright{margin:0}
}

/* Crédit (en bas-droite) */
.footer-credit{
  position:absolute;
  right: calc(1.2rem + 64px);
  bottom:.6rem;
  color:rgba(255,255,255,.75);
  font-size:.8rem;
  z-index:40;
  white-space:nowrap;
}
@media(max-width:991px){
  .footer-credit{
    position:fixed;
    right: max(12px, env(safe-area-inset-right) + 8px);
    bottom: max(14px, env(safe-area-inset-bottom) + 10px);
    font-size:.78rem;
  }
}

/* Slider natif (pour main.js) caché visuellement */
.volume-ghost{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* Désactiver composants inutiles */
.modal,.offcanvas,.mobile-menu{display:none!important}

/* Stores OFF */
.footer-app,.footer-app *,[class*="app-store"],[class*="google-play"],[data-app="android"],[data-app="ios"]{display:none!important}







/* === Ajuste la version téléphone (≤ 575px) === */
@media (max-width: 575px) {
  /* Pochette plus petite */
  .player-artwork{
    max-width: 68vw;   /* avant 86–88vw ; ≈ 15–20% plus petite */
    border-radius: 14px;
  }

  /* Badge LIVE et titres un peu plus compacts */
  .live-banner{
    margin: .5rem 0 .7rem;
    padding: .3rem .7rem;
  }
  .song-artist{font-size: .8rem !important;}
  .song-name{font-size: 1rem !important;}

  /* Contrôles : espace suffisant sous la pochette */
  .player-controller{
    gap: .75rem;
    margin-bottom: 2rem;
  }
  .player-button-play{ padding: .8rem; }

  /* Barre de volume un peu moins large */
  .volume-range{
    width: 68vw;      /* avant 72–88vw */
    max-width: 300px;
  }

  /* Icônes sociales, positionnées plus haut pour ne jamais masquer le Play */
  .player-social{
    bottom: max(130px, env(safe-area-inset-bottom) + 130px) !important;
  }

  /* Espace global en bas pour tout cas de figure (Play + volume + icônes + contact) */
  .player{
    padding-bottom: max(280px, env(safe-area-inset-bottom) + 200px);
  }
}












/* =========================================================
   PATCH RESPONSIVE (≤ 991px) — Desktop inchangé
   A coller tout en bas de custom.css
   ========================================================= */
@media (max-width: 991px) {

  /* 1) Le player redevient “en flux”, avec assez d’air en bas
        pour laisser passer Play + Volume + Contact + © */
  .player{
    position: relative;      /* plus de plein-écran */
    inset: auto;
    overflow: visible;
    padding: 1rem;
    padding-top: max(1rem, env(safe-area-inset-top) + 8px);
    /* réserve bas suffisante pour éviter tout recouvrement */
    padding-bottom: max(200px, env(safe-area-inset-bottom) + 140px);
  }

  /* 2) Play + Volume bien groupés et espacés */
  .player-controller{
    display:flex; align-items:center; justify-content:center;
    gap:.8rem; flex-wrap:wrap;
    margin-top:.75rem;
    margin-bottom:1.25rem;   /* évite de coller le footer */
  }
  .controls-stack{gap:.8rem; flex-wrap:wrap; justify-content:center}
  .volume-range{ width:68vw; max-width:300px; }

  /* 3) Pochette un peu plus petite pour gagner de la place verticale */
  .player-artwork{
    max-width:78vw;          /* tablette/tel “large” */
    margin: 0 auto .5rem;
  }

  /* 4) Icônes sociaux + Footer en flux normal, jamais en fixed */
  .player-social,
  .footer,
  .footer-credit{
    position: static !important;
    inset: auto !important;
    right:auto !important; left:auto !important; bottom:auto !important;
    z-index: auto !important;
  }
  .player-social{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:10px;
    margin-top:.5rem;
    margin-bottom:.35rem;
  }
  .footer{ margin-top:.35rem; }
  .footer small{ font-size:.82rem; }
  .footer-credit{ text-align:right; font-size:.78rem; margin-top:.4rem; }
}

/* Smartphone étroit (≤575px) : réduction supplémentaire de la pochette
   + un poil plus d’air sous les contrôles */
@media (max-width: 575px) {
  .player-artwork{ max-width:74vw; }
  .player-controller{ margin-bottom:1.75rem; }
  .footer{ margin-top:.6rem; }
  .footer small{ font-size:.78rem; }
  .footer-credit{ font-size:.76rem; }
}











/* =========================================================
   PATCH RESPONSIVE (≤ 991px) — Desktop inchangé
   ========================================================= */
@media (max-width: 991px) {
  /* Laisse défiler le contenu (footer, icônes, © visibles) */
  .app{
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  /* Le player redevient en flux, avec de l’air en haut et en bas */
  .player{
    position: relative;     /* plus de fixed en mobile/tablette */
    inset: auto;
    overflow: visible;
    padding: 1rem;
    padding-top: max(1rem, env(safe-area-inset-top) + 8px);
    padding-bottom: 1.25rem;
  }

  /* Pochette un peu plus petite pour gagner de la place en bas */
  .player-artwork{
    max-width: 76vw;        /* léger (-) par rapport à avant */
    margin: 0 auto .75rem;
  }

  /* Play + Volume : groupés, sans coller le footer */
  .player-controller{
    display:flex; align-items:center; justify-content:center;
    gap:.8rem; flex-wrap:wrap;
    margin-top:.5rem;
    margin-bottom:1.25rem;
  }
  .controls-stack{gap:.8rem; flex-wrap:wrap; justify-content:center}
  .volume-range{ width:68vw; max-width:300px; }

  /* Icônes sociaux / footer / crédit : en flux normal (plus de fixed) */
  .player-social,
  .footer,
  .footer-credit{
    position: static !important;
    inset: auto !important;
    right:auto !important; left:auto !important; bottom:auto !important;
    z-index: auto !important;
  }

  .player-social{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:10px;
    margin-top:.5rem;
    margin-bottom:.4rem;
  }

  .footer{ margin-top:.35rem; }
  .footer small{ font-size:.82rem; }
  .footer-credit{ text-align:right; font-size:.78rem; margin-top:.4rem; }
}

/* Smartphone étroit (≤575px) : petite réduction additionnelle */
@media (max-width: 575px) {
  .player-artwork{ max-width: 72vw; }
  .player-controller{ margin-bottom: 1.6rem; }
  .footer small{ font-size:.78rem; }
  .footer-credit{ font-size:.76rem; }
}






/* =========================================================
   RESPONSIVE (≤ 991px) — rétablit le scroll + espace bas
   ========================================================= */
@media (max-width: 991px) {
  /* PROBLÈME RACINE: html/body bloquaient le scroll (overflow:hidden) */
  html, body{
    height:auto;            /* au lieu de height:100% */
    min-height:100%;
    overflow:auto;          /* autorise le défilement sur mobile */
  }

  /* le conteneur peut s’allonger et laisser voir le footer */
  .app{
    height:auto;
    min-height:100vh;
    overflow:visible;
  }

  /* le player redevient “en flux”, et on réserve de l’air en bas */
  .player{
    position:relative; inset:auto; overflow:visible;
    padding:1rem;
    padding-top:max(1rem, env(safe-area-inset-top) + 8px);
    padding-bottom:1.25rem;
  }

  /* pochette un peu plus compacte pour libérer de l’espace bas */
  .player-artwork{
    max-width:74vw;
    margin:0 auto .75rem;
  }

  /* contrôles regroupés et espacés (sans chevaucher le footer) */
  .player-controller{
    display:flex; align-items:center; justify-content:center;
    gap:.8rem; flex-wrap:wrap;
    margin-top:.5rem;
    margin-bottom:1.25rem;
    z-index:auto;
  }
  .controls-stack{gap:.8rem; flex-wrap:wrap; justify-content:center}
  .volume-range{ width:68vw; max-width:300px; }

  /* icônes sociaux / contact / © : en flux normal (plus de fixed) */
  .player-social, .footer, .footer-credit{
    position:static !important; inset:auto !important;
    right:auto !important; left:auto !important; bottom:auto !important;
    z-index:auto !important;
  }

  .player-social{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:10px; margin-top:.5rem; margin-bottom:.4rem;
  }

  .footer{ margin-top:.4rem; }
  .footer small{ font-size:.82rem; }
  .footer-credit{ text-align:right; font-size:.78rem; margin-top:.4rem; }
}

/* Smartphone étroit (≤575px) : mini-réduction supplémentaire */
@media (max-width: 575px) {
  .player-artwork{ max-width:70vw; }
  .player-controller{ margin-bottom:1.6rem; }
  .footer small{ font-size:.78rem; }
  .footer-credit{ font-size:.76rem; }
}











/* =========================================================
   PATCH RESPONSIVE (≤ 991px) — autorise le scroll en mobile
   Desktop (≥992px) : inchangé
   ========================================================= */
@media (max-width: 991px) {
  /* 1) Réactiver le défilement sur mobile (tes styles de base bloquent le scroll) */
  html, body{
    height: auto;          /* au lieu de 100% */
    min-height: 100%;
    overflow: auto;        /* le contenu peut défiler */
  }

  /* 2) Le conteneur peut s’allonger (ne pas couper le bas) */
  .app{
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  /* 3) Le player redevient “en flux” (pas fixe), avec de l’air haut/bas */
  .player{
    position: relative; inset: auto; overflow: visible;
    padding: 1rem;
    padding-top: max(1rem, env(safe-area-inset-top) + 8px);
    padding-bottom: 1rem;  /* pas d’énorme réserve : on scrolle si besoin */
  }

  /* 4) Pochette un peu plus compacte pour libérer de la place en bas */
  .player-artwork{
    max-width: 72vw;       /* ~plus petite qu’avant */
    margin: 0 auto .75rem;
  }

  /* 5) Play + Volume : groupés et espacés, sans empiéter sur le footer */
  .player-controller{
    display:flex; align-items:center; justify-content:center;
    gap:.8rem; flex-wrap:wrap;
    margin-top:.5rem;
    margin-bottom: 1.25rem;
  }
  .controls-stack{gap:.8rem; flex-wrap:wrap; justify-content:center}
  .volume-range{ width:68vw; max-width:300px; }

  /* 6) Icônes sociaux / Contact / © : en flux normal (plus de fixed/absolute) */
  .player-social, .footer, .footer-credit{
    position: static !important;
    inset: auto !important;
    right:auto !important; left:auto !important; bottom:auto !important;
    z-index: auto !important;
  }

  .player-social{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:10px; margin-top:.5rem; margin-bottom:.4rem;
  }

  .footer{ margin-top:.4rem; }
  .footer small{ font-size:.82rem; }
  .footer-credit{ text-align:right; font-size:.78rem; margin-top:.4rem; }
}

/* Smartphone étroit (≤575px) : micro-ajustements */
@media (max-width: 575px) {
  .song-artist{font-size:.82rem!important; text-align:center}
  .song-name{  font-size:1.05rem!important; text-align:center}
  .live-banner{ margin:.5rem 0 .6rem; padding:.3rem .7rem; }
  .player-artwork{ max-width: 68vw; }     /* un cran de moins sur très petit écran */
  .player-controller{ margin-bottom: 1.5rem; }
  .footer small{ font-size:.78rem; }
  .footer-credit{ font-size:.76rem; }
}










/* ================================
   LAYOUT MOBILE/TABLETTE SANS SCROLL
   ================================ */
@media (max-width: 991px) {
  /* Page fixe */
  html, body { height:100%; overflow:hidden; }
  .app{ height:100vh; overflow:hidden; }
  .player{
    position:fixed; inset:0; overflow:hidden;
    padding: 12px 14px;
    padding-top: max(12px, env(safe-area-inset-top));
    /* pas de padding-bottom, on va positionner le bas en fixed */
  }

  /* Taille & respiration */
  .player-cover-title { margin-top: 4px; }
  .live-banner{ margin: 6px 0 8px; }
  .player-artwork{
    max-width: 62vw;            /* plus compacte pour tout faire tenir */
    margin: 0 auto 10px;
  }

  /* Play + volume au-dessus du bas, centrés */
  .player-controller{
    display:flex; justify-content:center; align-items:center; gap:10px;
    position:fixed; left:50%; transform:translateX(-50%);
    bottom: calc(120px + env(safe-area-inset-bottom)); /* au-dessus des sociaux + footer */
    z-index:55;
  }
  .controls-stack{ gap:10px; flex-wrap:wrap; justify-content:center }
  .player-button-play{ padding:.85rem }
  .volume-range{ width:68vw; max-width:320px; }

  /* Icônes sociaux : ligne centrée, juste au-dessus du footer */
  .player-social{
    position:fixed !important; left:50%; transform:translateX(-50%);
    bottom: calc(62px + env(safe-area-inset-bottom));
    z-index:50; display:flex; gap:10px; align-items:center; justify-content:center;
  }

  /* Footer (Contact / ©) : centré TOUT EN BAS */
  .footer{
    position:fixed !important;
    left:50%; transform:translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom) + 6px);
    z-index:45; display:block !important; text-align:center;
    width: min(92vw, 560px);
  }
  .footer-wrapper{ gap:4px; align-items:center; }
  .footer small{ font-size:.78rem; line-height:1.35; }
  .footer-contact{ margin:0; }
  .footer-copyright{ margin:0; }

  /* Crédit : discret, bas-droite */
  .footer-credit{
    position:fixed !important;
    right: max(10px, env(safe-area-inset-right) + 6px);
    bottom: max(12px, env(safe-area-inset-bottom) + 6px);
    font-size:.74rem; color:rgba(255,255,255,.75); z-index:40;
    white-space:nowrap;
  }
}

/* Smartphone étroit (≤575px) : encore un cran de compaction propre */
@media (max-width: 575px) {
  .song-artist{ font-size:.82rem !important; text-align:center }
  .song-name{   font-size:1.05rem !important; text-align:center }
  .player-artwork{ max-width: 58vw; margin-bottom: 8px; }
  .player-controller{ bottom: calc(112px + env(safe-area-inset-bottom)); }
  .footer small{ font-size:.76rem; }
  .footer-credit{ font-size:.72rem; }
}





















/* ======= FIX CENTRAGE BAS (mobile/tablette) ======= */
@media (max-width: 991px){

  /* Icônes sociaux : centrés horizontalement, jamais à gauche */
  .player-social{
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important; /* au-dessus du footer */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 50 !important;
  }

  /* Footer (Contact / ©) : centré tout en bas, pas collé à gauche */
  .footer{
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: max(14px, env(safe-area-inset-bottom) + 8px) !important;
    width: min(94vw, 560px) !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 45 !important;
  }
  .footer-wrapper{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap: 2px !important;
  }
  .footer small{ font-size:.76rem; line-height:1.25; }
  .footer-contact, .footer-copyright{ margin:0 !important; }

  /* Crédit : bas-droite (indépendant du centrage) */
  .footer-credit{
    position: fixed !important;
    left: auto !important;
    right: max(10px, env(safe-area-inset-right) + 8px) !important;
    bottom: max(14px, env(safe-area-inset-bottom) + 8px) !important;
    transform: none !important;
    z-index: 44 !important;
  }

  /* Neutralise toute règle résiduelle qui forcerait un ancrage haut/gauche */
  .player-social, .footer, .footer-credit{ top:auto !important; }
}












/* ====== FIX BAS D'ÉCRAN (mobile/tablette) — sans toucher à la pochette ni au Play/Volume ====== */
@media (max-width: 991px){

  /* Réglages de base pour éviter les décalages */
  .footer, .player-social, .footer-credit{
    top: auto !important;           /* jamais ancré en haut */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Icônes sociaux : CENTRÉS, sur une seule ligne, au-dessus du footer */
  .player-social{
    position: fixed !important;
    left: 50% !important;           /* centrage réel */
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important; /* au-dessus du footer et sous la barre Volume */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 50 !important;
  }

  /* Footer (Contact / ©) : CENTRÉ tout en bas, jamais collé à gauche */
  .footer{
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: max(14px, env(safe-area-inset-bottom) + 8px) !important;
    width: min(94vw, 560px) !important;   /* largeur contenue */
    text-align: center !important;
    z-index: 45 !important;
    padding-inline: 6px !important;       /* évite la coupe des lignes longues */
  }
  .footer-wrapper{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;                  /* compact, sans chevauchement */
  }
  .footer small{ font-size:.76rem; line-height:1.25; }
  .footer-contact, .footer-copyright{ margin: 0 !important; }

  /* Crédit : indépendant, bas-droite */
  .footer-credit{
    position: fixed !important;
    left: auto !important;
    right: max(10px, env(safe-area-inset-right) + 8px) !important;
    bottom: max(14px, env(safe-area-inset-bottom) + 8px) !important;
    transform: none !important;
    z-index: 44 !important;
    white-space: nowrap;
    font-size: .72rem;
  }
}














/* ============================================================================
   RESPONSIVE FIX (≤ 991px) — Bas d'écran uniquement
   - NE TOUCHE PAS à la pochette, ni au Play/Volume, ni au haut de page
   - Icônes sociaux centrés au-dessus du footer
   - Footer (Contact / Email / ©) centré tout en bas
   - Pas de scroll, safe-area respectée
   ============================================================================ */
@media (max-width: 991px){

  /* Page fixe sans scroll (le contenu doit tenir sur l'écran) */
  html, body{ height:100%; overflow:hidden; }
  .app{ height:100vh; overflow:hidden; }

  /* Remise à zéro des anciennes règles qui tiraient à gauche */
  .player-social, .footer, .footer-credit{
    top:auto !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Icônes sociaux : CENTRÉS, au-dessus du footer, clairs et sans chevauchement */
  .player-social{
    position:fixed !important;
    left:50% !important; right:auto !important;
    transform:translateX(-50%) !important;
    bottom:calc(82px + env(safe-area-inset-bottom)) !important; /* espace au-dessus du footer */
    display:flex !important;
    justify-content:center !important; align-items:center !important;
    gap:10px !important; flex-wrap:nowrap !important;
    width:auto !important; max-width:calc(100vw - 24px) !important;
    z-index:50 !important;
  }

  /* Footer (Contact / ©) : CENTRÉ tout en bas, compact et lisible */
  .footer{
    position:fixed !important;
    left:50% !important; right:auto !important;
    transform:translateX(-50%) !important;
    bottom:max(14px, env(safe-area-inset-bottom) + 8px) !important;
    width:min(94vw, 560px) !important;
    text-align:center !important;
    z-index:45 !important;
  }
  .footer-wrapper{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:4px !important;          /* compact mais aéré */
  }
  .footer small{ font-size:.76rem; line-height:1.25; }
  .footer-contact, .footer-copyright{ margin:0 !important; }
  .footer-contact .label{ display:inline; }    /* on garde "Téléphone :" et "Email :" */

  /* Crédit : bas-droite, hors du flux centré */
  .footer-credit{
    position:fixed !important;
    left:auto !important;
    right:max(10px, env(safe-area-inset-right) + 8px) !important;
    bottom:max(14px, env(safe-area-inset-bottom) + 8px) !important;
    transform:none !important;
    white-space:nowrap;
    font-size:.72rem;
    z-index:44 !important;
  }

  /* Couches claires pour éviter tout recouvrement avec la barre de volume */
  .player-controller{ z-index:60 !important; }  /* on ne change PAS sa position */
  .player-social{ z-index:50 !important; }
  .footer{ z-index:45 !important; }
  .footer-credit{ z-index:44 !important; }
}

/* Téléphone étroit (≤575px) : micro-ajustements */
@media (max-width: 575px){
  .footer small{ font-size:.74rem; }
  .player-social{ bottom:calc(84px + env(safe-area-inset-bottom)) !important; } /* 2px d'air en plus */
}