/* =========================================================
   Radio Djawoampo — pwa.css
   Styles des fonctions « application » : chargement, état réseau,
   barre d'onglets mobile, favoris, installation, notifications,
   zones système (encoche, barre de gestes), tablettes.
   Aucun changement de couleurs ni de logo : on réutilise les variables.
   ========================================================= */
:root{--tabbar-h:0px}

/* ---------- Écran de chargement (très court) ---------- */
.app-splash{position:fixed;inset:0;z-index:3000;background:var(--sable);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  color:var(--vert-fonce);font-weight:700;transition:opacity .35s ease}
.app-splash img{width:96px;height:96px;border-radius:22px;box-shadow:var(--ombre)}
.app-splash span{font-size:.9rem;letter-spacing:.02em}
.app-splash.gone{opacity:0;pointer-events:none}

/* ---------- État de la connexion (discret) ---------- */
.net-status{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;transform:translate(-50%,-160%);z-index:2100;
  background:#fff;color:var(--texte);border-radius:999px;padding:.35rem .9rem;font-size:.8rem;font-weight:700;box-shadow:var(--ombre-forte);
  transition:transform .3s ease;pointer-events:none;white-space:nowrap}
.net-status.show{transform:translate(-50%,0)}
body.is-offline .net-status{background:#fff3f2;color:#a3261a}

/* ---------- Mise à jour disponible ---------- */
.update-bar{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 8px);z-index:2100;display:flex;align-items:center;gap:.7rem;
  background:var(--vert-fonce);color:#fff;border-radius:12px;padding:.5rem .6rem .5rem 1rem;box-shadow:var(--ombre-forte);font-size:.85rem;max-width:calc(100vw - 24px)}
.update-bar button{border:0;border-radius:999px;background:var(--orange);color:#fff;font-weight:800;padding:.45rem .9rem;min-height:36px}

/* ---------- Zones système en mode application ---------- */
body.is-standalone .topbar{display:none}
body.is-standalone .site-header{padding-top:env(safe-area-inset-top,0px)}
@supports (padding:max(0px)){
  .container{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
}

/* ---------- Barre d'onglets (téléphone + petite tablette) ---------- */
.tabbar{display:none}
@media (max-width:899px){
  :root{--tabbar-h:58px}
  body{padding-bottom:calc(var(--player-h) + var(--tabbar-h) + var(--safe-b))}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:690;
    height:calc(var(--tabbar-h) + var(--safe-b));padding:0 env(safe-area-inset-right,0px) var(--safe-b) env(safe-area-inset-left,0px);
    background:#fff;border-top:1px solid var(--bord);box-shadow:0 -4px 16px rgba(0,0,0,.06)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;
    background:none;border:0;color:var(--texte-doux);font-size:.68rem;font-weight:700;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .tabbar .ico{width:24px;height:24px}
  .tabbar .active{color:var(--vert-fonce)}
  .tabbar .active .ico{transform:translateY(-1px)}
  .tabbar a:active,.tabbar button:active{background:var(--gris-clair)}
  .tab-live{width:26px;height:26px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(240,130,30,.45)}
  .tab-live .dot{width:9px;height:9px;border-radius:50%;background:#fff}
  .tabbar .playing{color:var(--orange-fonce)}
  .tabbar .playing .tab-live .dot{animation:tabpulse 1.2s infinite}
  /* le lecteur se place juste au-dessus de la barre d'onglets */
  .gplayer:not(.expanded){bottom:calc(var(--tabbar-h) + var(--safe-b));padding-bottom:0}
  .toast{bottom:calc(var(--player-h) + var(--tabbar-h) + var(--safe-b) + 12px)}
  /* le menu du haut reste disponible, la barre évite juste de remonter */
}
@keyframes tabpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
/* téléphone couché (peu de hauteur) : on garde l'écran pour le contenu —
   pas de barre d'onglets (menu et bouton « En direct » restent en haut) */
@media (max-height:480px) and (orientation:landscape){
  :root{--tabbar-h:0px;--player-h:66px}
  .tabbar{display:none!important}
  .topbar{display:none}
  .gplayer:not(.expanded){bottom:0;padding-bottom:var(--safe-b)}
}
body.admin-mode .tabbar{display:none}

/* ---------- Boutons du tiroir (menu) ---------- */
.drawer-app{display:flex;flex-direction:column;gap:.2rem;padding:.4rem 0 .8rem;border-bottom:1px solid var(--bord);margin-bottom:.8rem}
.drawer-app a,.drawer-app button{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.3rem 0;background:none;border:0;text-align:left;font-weight:700;color:var(--texte);font-size:.95rem}
.drawer-app .pwa-install{color:var(--orange-fonce)}
.fav-count{background:var(--orange);color:#fff;border-radius:999px;font-size:.7rem;padding:.05rem .45rem;margin-left:auto}
.news-dot{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:999px;background:#d93025;color:#fff;font-size:.65rem;font-weight:800;margin-left:.3rem;padding:0 .3rem}
.btn-share{background:var(--gris-clair)}
@media (max-width:360px){.btn-share{display:none}}

/* ---------- Favoris / écouter plus tard ---------- */
.fav-btn,.later-btn,.remind-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:50%;border:1.5px solid var(--bord);
  background:#fff;font-size:1.05rem;line-height:1;flex-shrink:0;transition:transform .15s,border-color .15s}
.fav-btn:active,.later-btn:active,.remind-btn:active{transform:scale(.9)}
.fav-btn.on{border-color:#f3b8b8;background:#fff5f5}
.later-btn{filter:grayscale(1);opacity:.65}
.later-btn.on{filter:none;opacity:1;border-color:var(--orange);background:var(--orange-pale)}
.remind-btn{width:36px;min-width:36px;height:36px;font-size:.9rem;margin-left:.4rem}
.remind-btn.on{border-color:var(--orange);background:var(--orange-pale)}
.card-actions .fav-btn,.card-actions .later-btn{margin-left:.1rem}
.son-li{display:flex;align-items:center;gap:.35rem}
.son-li .mu-track{flex:1;min-width:0}
.son-li .fav-btn,.son-li .later-btn{width:36px;min-width:36px;height:36px;font-size:.9rem}
.mu-video figcaption .fav-btn{width:34px;min-width:34px;height:34px;font-size:.85rem}
.profile-actions .fav-btn{width:38px;height:38px}

.fav-list{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.fav-item{display:flex;align-items:center;gap:.8rem;background:#fff;border-radius:var(--radius);box-shadow:var(--ombre);padding:.7rem .8rem;flex-wrap:wrap}
.fav-txt{flex:1;min-width:180px;display:flex;flex-direction:column}
.fav-txt small{color:var(--texte-doux);font-size:.72rem;font-weight:700}
.fav-txt b{font-size:.95rem;color:var(--vert-fonce)}
.fav-txt span{font-size:.8rem;color:var(--texte-doux)}
.fav-acts{display:flex;gap:.4rem;flex-wrap:wrap}
.fav-acts .btn{min-height:40px}
.fav-yt{width:140px;flex-shrink:0;border-radius:8px}
.fav-yt.is-open{width:100%;flex-basis:100%}
.fav-empty{background:var(--gris-clair);border-radius:var(--radius);padding:1rem;text-align:center;color:var(--texte-doux);font-size:.9rem}
.btn-ghost-dark{background:#fff;color:var(--vert-fonce);border:1.5px solid var(--vert-fonce)}
.btn-ghost-dark:hover{background:var(--vert-pale)}
.btn-remove{background:#fff;color:#a3261a;border:1.5px solid #f0c9c4}

/* ---------- Page « Installer l'application » ---------- */
.container.narrow{width:min(860px,100% - 32px)}
.pwa-hero{display:flex;gap:1.1rem;align-items:center;background:#fff;border-radius:var(--radius);box-shadow:var(--ombre);padding:1.2rem;margin-bottom:1.2rem}
.pwa-hero img{width:88px;height:88px;border-radius:20px;flex-shrink:0;box-shadow:var(--ombre)}
.pwa-hero h2{color:var(--vert-fonce);font-size:1.3rem;margin-bottom:.3rem}
.pwa-hero p{color:var(--texte-doux);font-size:.95rem}
.pwa-install-main{margin:0 0 1rem}
.pwa-os-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem}
.pwa-os{background:#fff;border-radius:var(--radius);padding:1rem;border:1.5px solid var(--bord)}
.pwa-os.is-mine{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-pale)}
.pwa-os h4{color:var(--vert-fonce);margin-bottom:.5rem;font-size:1rem}
.pwa-os ol{padding-left:1.2rem;font-size:.9rem;line-height:1.6}
.pwa-ok{background:var(--vert-pale);color:var(--vert-fonce);border-radius:var(--radius);padding:1rem;font-weight:700}
@media (max-width:480px){.pwa-hero{flex-direction:column;text-align:center}}

/* ---------- Notifications ---------- */
.pill{display:inline-block;border-radius:999px;padding:.15rem .6rem;font-size:.8rem;font-weight:700;background:var(--gris-clair)}
.pill.ok{background:var(--vert-pale);color:var(--vert-fonce)}
.pill.ko{background:#fff3f2;color:#a3261a}
.notif-cats{border:0;margin:.8rem 0 1rem;display:grid;gap:.3rem}
.notif-cats legend{font-weight:700;margin-bottom:.4rem}
.notif-cats label{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:0 .4rem;border-radius:10px;cursor:pointer}
.notif-cats label:hover{background:var(--gris-clair)}
.notif-cats input{width:20px;height:20px;accent-color:var(--vert-fonce)}
.small{font-size:.82rem}

/* ---------- Partage (quand le partage natif n'existe pas) ---------- */
.share-url{font-size:.8rem;color:var(--texte-doux);word-break:break-all;background:var(--gris-clair);border-radius:8px;padding:.5rem .7rem;margin-bottom:.9rem}
.share-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.share-opt{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;font-weight:700;border:1.5px solid var(--bord);background:#fff;color:var(--texte);text-decoration:none}
.sh-wa{color:#128c4b}.sh-fb{color:#1877f2}.sh-tg{color:#229ed9}.sh-copy{grid-column:1/-1;background:var(--vert-fonce);color:#fff;border-color:var(--vert-fonce)}

/* ---------- Envoi de fichiers depuis le téléphone ---------- */
.capture-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 1rem}
.capture-row .btn{min-height:42px}

/* ---------- Tablettes (600 → 1024 px) ---------- */
@media (min-width:600px) and (max-width:899px){
  .home-news{grid-template-columns:repeat(2,1fr)}
  .quick-grid{grid-template-columns:repeat(5,1fr)}
  .pwa-os-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px) and (max-width:1024px){
  .quick-grid{grid-template-columns:repeat(5,1fr)}
}
/* tablette couchée : le contenu ne s'étire pas trop */
@media (min-width:900px) and (max-width:1280px) and (orientation:landscape){
  .container{width:min(1200px,100% - 48px)}
}

/* ---------- Confort tactile ---------- */
@media (pointer:coarse){
  .icon-btn{width:44px;height:44px}
  .share-btn{min-width:40px;min-height:40px}
  .prog-tabs button{min-height:44px}
}

/* ---------- Économie de données ---------- */
body.save-data .hero{background-image:none!important}
body.save-data .mu-yt img{filter:grayscale(.2)}