/* ============================================================ UNVUA · Design system — Orange / Blanc / Bleu · sans dégradé Thèmes clair & sombre pilotés par [data-theme] sur ============================================================ */ :root{ /* Marque */ --unv-orange:#F26A1B; --unv-orange-d:#D2540C; --unv-orange-soft:#FFF1E6; --unv-blue:#0B4FA8; --unv-blue-d:#08376F; --unv-blue-soft:#E8F0FB; --unv-radius:14px; --unv-radius-sm:10px; --player-h:98px; --unv-font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif; } /* ---------- Thème clair (défaut) ---------- */ :root, [data-theme="light"]{ --unv-bg:#FFFFFF; --unv-surface:#FFFFFF; --unv-surface-2:#F4F6FA; --unv-surface-3:#EAEEF5; --unv-border:#DCE3EC; --unv-text:#0E1726; --unv-muted:#5A6779; --unv-primary:var(--unv-orange); --unv-primary-contrast:#FFFFFF; --unv-secondary:var(--unv-blue); --unv-shadow:0 1px 2px rgba(14,23,38,.06), 0 8px 24px rgba(14,23,38,.06); --unv-nav:#FFFFFF; color-scheme:light; } /* ---------- Thème sombre ---------- */ [data-theme="dark"]{ --unv-bg:#0A1020; --unv-surface:#111A2E; --unv-surface-2:#16223A; --unv-surface-3:#1D2C48; --unv-border:#24344F; --unv-text:#EDF2F9; --unv-muted:#93A2B8; --unv-primary:#FF7A29; --unv-primary-contrast:#150800; --unv-secondary:#4C8DEA; --unv-orange-soft:#2A1809; --unv-blue-soft:#12233F; --unv-shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.35); --unv-nav:#0D1526; color-scheme:dark; } *{scrollbar-color:var(--unv-border) transparent} html{scroll-behavior:smooth} body{ background:var(--unv-bg); color:var(--unv-text); font-family:var(--unv-font); -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} a:hover{color:var(--unv-primary)} h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-.01em} .text-secondary{color:var(--unv-muted)!important} hr{border-color:var(--unv-border);opacity:1} .pb-player{padding-bottom:calc(var(--player-h) + 28px)} .section-title{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem} .section-title::before{content:"";width:6px;height:20px;border-radius:3px;background:var(--unv-primary)} .brand-text{font-weight:900;letter-spacing:.14em;color:var(--unv-text)} .brand-text .dot{color:var(--unv-primary)} /* ---------- Navigation ---------- */ .unvua-nav{background:var(--unv-nav);border-bottom:1px solid var(--unv-border)} .unvua-nav .nav-link{color:var(--unv-muted);font-weight:600;border-radius:999px;padding:.45rem .9rem} .unvua-nav .nav-link:hover{color:var(--unv-text);background:var(--unv-surface-2)} .unvua-nav .nav-link.actif{color:var(--unv-primary-contrast);background:var(--unv-primary)} .unvua-search{background:var(--unv-surface-2);border:1px solid var(--unv-border);color:var(--unv-text);border-radius:999px;min-width:240px} .unvua-search::placeholder{color:var(--unv-muted)} .unvua-search:focus{background:var(--unv-surface-2);color:var(--unv-text);border-color:var(--unv-secondary);box-shadow:0 0 0 3px var(--unv-blue-soft)} .suggestions{position:absolute;top:112%;left:0;right:0;background:var(--unv-surface);border:1px solid var(--unv-border); border-radius:var(--unv-radius);overflow:hidden;z-index:1080;display:none;box-shadow:var(--unv-shadow)} .suggestions a{display:flex;gap:.6rem;align-items:center;padding:.55rem .8rem;border-bottom:1px solid var(--unv-border)} .suggestions a:last-child{border-bottom:0} .suggestions a:hover{background:var(--unv-surface-2)} .suggestions img{width:36px;height:36px;border-radius:8px;object-fit:cover} /* Bouton thème */ .btn-theme{width:38px;height:38px;border-radius:50%;border:1px solid var(--unv-border);background:var(--unv-surface-2); color:var(--unv-text);display:inline-grid;place-items:center;font-size:1rem} .btn-theme:hover{border-color:var(--unv-primary);color:var(--unv-primary)} [data-theme="light"] .theme-ico-dark{display:none} [data-theme="dark"] .theme-ico-light{display:none} /* ---------- Cartes ---------- */ .card-unv{background:var(--unv-surface);border:1px solid var(--unv-border);border-radius:var(--unv-radius); overflow:hidden;transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;height:100%} .card-unv:hover{transform:translateY(-3px);border-color:var(--unv-primary);box-shadow:var(--unv-shadow)} .card-unv .cover-wrap{position:relative;aspect-ratio:1;background:var(--unv-surface-2)} .card-unv .cover-wrap img{width:100%;height:100%;object-fit:cover} .card-unv .btn-cover-play{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;border:0; background:var(--unv-primary);color:var(--unv-primary-contrast);opacity:0;transform:translateY(8px);transition:.18s;box-shadow:var(--unv-shadow)} .card-unv:hover .btn-cover-play{opacity:1;transform:none} .card-body-unv{padding:.8rem .9rem} .card-title-unv{font-weight:700;font-size:.95rem;margin:0} .card-sub{color:var(--unv-muted);font-size:.82rem} /* ---------- Hero (aplat, sans dégradé) ---------- */ .hero{border-radius:20px;padding:3rem 2rem;background:var(--unv-blue);color:#fff;border:1px solid var(--unv-blue-d)} .hero h1,.hero h2{color:#fff} .hero p{color:rgba(255,255,255,.85)} .hero .btn-primary{background:var(--unv-orange);border-color:var(--unv-orange)} .hero .btn-outline-light{border-color:rgba(255,255,255,.6)} /* ---------- Liste de titres ---------- */ .track-row{display:grid;grid-template-columns:36px 48px 1fr auto auto;gap:.85rem;align-items:center; padding:.55rem .7rem;border-radius:var(--unv-radius-sm)} .track-row:hover{background:var(--unv-surface-2)} .track-row img{width:48px;height:48px;border-radius:8px;object-fit:cover} .track-index{color:var(--unv-muted);text-align:center} .track-title{font-weight:650} .track-artist{color:var(--unv-muted);font-size:.85rem} /* ---------- Boutons ---------- */ .btn{border-radius:999px;font-weight:650} .btn-icon{background:transparent;border:0;color:var(--unv-muted);padding:.25rem .45rem;border-radius:8px} .btn-icon:hover{color:var(--unv-text);background:var(--unv-surface-2)} .btn-icon.actif{color:var(--unv-primary)} .btn-primary{background:var(--unv-primary);border:1px solid var(--unv-primary);color:var(--unv-primary-contrast)} .btn-primary:hover,.btn-primary:focus{background:var(--unv-orange-d);border-color:var(--unv-orange-d);color:#fff} .btn-secondary{background:var(--unv-secondary);border:1px solid var(--unv-secondary);color:#fff} .btn-secondary:hover{background:var(--unv-blue-d);border-color:var(--unv-blue-d)} .btn-outline-primary{color:var(--unv-primary);border:1px solid var(--unv-primary);background:transparent} .btn-outline-primary:hover{background:var(--unv-primary);color:var(--unv-primary-contrast)} .btn-premium{background:var(--unv-orange);border:1px solid var(--unv-orange);color:#fff;font-weight:800} .btn-premium:hover{background:var(--unv-orange-d);color:#fff} .btn-play{width:48px;height:48px;border-radius:50%;border:0;background:var(--unv-primary);color:var(--unv-primary-contrast); font-size:1.35rem;display:grid;place-items:center} .btn-play:hover{background:var(--unv-orange-d);color:#fff} .btn-light,.btn-outline-secondary{border-radius:999px} /* ---------- Badges & formulaires ---------- */ .badge-genre{background:var(--unv-blue-soft);border:1px solid var(--unv-border);color:var(--unv-secondary); border-radius:999px;padding:.22rem .75rem;font-size:.75rem;font-weight:600} .badge-orange{background:var(--unv-orange-soft);color:var(--unv-orange-d);border:1px solid var(--unv-border); border-radius:999px;padding:.22rem .75rem;font-size:.75rem;font-weight:700} .stat-box{background:var(--unv-surface);border:1px solid var(--unv-border);border-radius:var(--unv-radius);padding:1.1rem} .stat-box .val{font-size:1.7rem;font-weight:900;color:var(--unv-text)} .stat-box .lbl{color:var(--unv-muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em} .form-control,.form-select,.input-group-text{background:var(--unv-surface-2);border-color:var(--unv-border);color:var(--unv-text);border-radius:var(--unv-radius-sm)} .form-control::placeholder{color:var(--unv-muted)} .form-control:focus,.form-select:focus{background:var(--unv-surface-2);color:var(--unv-text); border-color:var(--unv-secondary);box-shadow:0 0 0 3px var(--unv-blue-soft)} .table{--bs-table-bg:transparent;--bs-table-color:var(--unv-text);border-color:var(--unv-border)} .table>:not(caption)>*>*{border-color:var(--unv-border)} .modal-content,.dropdown-menu,.offcanvas,.accordion-item{background:var(--unv-surface);border:1px solid var(--unv-border);color:var(--unv-text)} .dropdown-menu{border-radius:var(--unv-radius);box-shadow:var(--unv-shadow)} .dropdown-item{color:var(--unv-text);border-radius:8px} .dropdown-item:hover{background:var(--unv-surface-2);color:var(--unv-primary)} .alert{border-radius:var(--unv-radius-sm)} .nav-tabs{border-color:var(--unv-border)} .nav-tabs .nav-link{color:var(--unv-muted);border:0;font-weight:650} .nav-tabs .nav-link.active{color:var(--unv-primary);background:transparent;border-bottom:3px solid var(--unv-primary)} .progress{background:var(--unv-surface-3)} .progress-bar{background:var(--unv-primary)} /* ============================================================ FOOTER — 3 mises en page distinctes ============================================================ */ .unvua-footer{background:var(--unv-surface);border-top:1px solid var(--unv-border);margin-top:3.5rem} .unvua-footer a{color:var(--unv-muted)} .unvua-footer a:hover{color:var(--unv-primary)} .unvua-footer h6{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--unv-text);margin-bottom:.85rem} .footer-bar{border-top:1px solid var(--unv-border);padding-top:1rem;margin-top:1.5rem} /* Desktop : grande grille 5 colonnes + newsletter + barre légale */ .footer-desktop{display:none} .footer-desktop .fd-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.4fr;gap:2rem} .footer-desktop .fd-news input{border-radius:999px 0 0 999px} .footer-desktop .fd-news .btn{border-radius:0 999px 999px 0} .footer-desktop ul{margin:0;padding:0;list-style:none} .footer-desktop ul li{margin-bottom:.45rem;font-size:.9rem} .footer-social a{width:36px;height:36px;border-radius:50%;border:1px solid var(--unv-border); display:inline-grid;place-items:center;color:var(--unv-muted)} .footer-social a:hover{background:var(--unv-primary);border-color:var(--unv-primary);color:var(--unv-primary-contrast)} /* Tablette : 3 colonnes compactes, sans newsletter longue */ .footer-tablet{display:none} .footer-tablet .ft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .footer-tablet ul{margin:0;padding:0;list-style:none;font-size:.88rem} .footer-tablet ul li{margin-bottom:.4rem} /* Mobile : accordéon + barre de navigation basse */ .footer-mobile{display:block} .footer-mobile .fm-acc details{border-bottom:1px solid var(--unv-border)} .footer-mobile .fm-acc summary{list-style:none;cursor:pointer;padding:.85rem 0;font-weight:700;display:flex;justify-content:space-between;align-items:center} .footer-mobile .fm-acc summary::-webkit-details-marker{display:none} .footer-mobile .fm-acc summary::after{content:"\F282";font-family:"bootstrap-icons";color:var(--unv-muted);font-size:.85rem} .footer-mobile .fm-acc details[open] summary::after{content:"\F286"} .footer-mobile .fm-acc ul{list-style:none;margin:0 0 .8rem;padding:0} .footer-mobile .fm-acc ul li{padding:.35rem 0;font-size:.92rem} .mobile-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1051;background:var(--unv-nav); border-top:1px solid var(--unv-border);display:none;grid-template-columns:repeat(5,1fr);padding:.35rem .2rem env(safe-area-inset-bottom)} .mobile-tabbar a{display:grid;justify-items:center;gap:2px;font-size:.66rem;color:var(--unv-muted);padding:.3rem 0;font-weight:600} .mobile-tabbar a i{font-size:1.15rem} .mobile-tabbar a.actif{color:var(--unv-primary)} @media (min-width:576px) and (max-width:991.98px){ .footer-mobile{display:none} .footer-tablet{display:block} } @media (min-width:992px){ .footer-mobile{display:none} .footer-tablet{display:none} .footer-desktop{display:block} } @media (max-width:575.98px){ .mobile-tabbar{display:grid} body{--tabbar-h:58px} .pb-player{padding-bottom:calc(var(--player-h) + var(--tabbar-h, 0px) + 20px)} .unvua-player{bottom:var(--tabbar-h,58px)} } /* ============================================================ Lecteur audio persistant ============================================================ */ .unvua-player{position:fixed;left:0;right:0;bottom:0;height:var(--player-h);z-index:1050; background:var(--unv-nav);border-top:1px solid var(--unv-border); display:grid;grid-template-columns:minmax(190px,1fr) 2fr minmax(190px,1fr);align-items:center;gap:1rem;padding:.6rem 1rem} .player-info{display:flex;align-items:center;gap:.7rem;min-width:0} .player-info img{width:56px;height:56px;border-radius:10px;object-fit:cover;border:1px solid var(--unv-border)} .player-controls{display:flex;flex-direction:column;align-items:center;gap:.3rem;width:100%} .player-extra{display:flex;align-items:center;justify-content:flex-end;gap:.5rem} .form-range{accent-color:var(--unv-primary)} #pl-seek{flex:1} @media (max-width:991.98px){ .unvua-player{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;gap:.35rem;padding:.5rem .8rem} .player-extra{display:none} :root{--player-h:118px} } @media (max-width:575.98px){ .unvua-player{padding:.45rem .7rem} .player-info img{width:44px;height:44px} #pl-shuffle,#pl-repeat{display:none} } /* Panneaux latéraux */ .panneau-lateral{position:fixed;right:0;top:0;bottom:var(--player-h);width:min(380px,92vw);z-index:1049; background:var(--unv-surface);border-left:1px solid var(--unv-border);padding:1rem;overflow-y:auto;box-shadow:var(--unv-shadow)} .paroles p{color:var(--unv-muted);margin:.4rem 0;transition:.2s} .paroles p.actif{color:var(--unv-primary);font-weight:800;transform:translateX(4px)} .queue li{padding:.5rem 0;border-bottom:1px solid var(--unv-border);color:var(--unv-muted);cursor:pointer} .queue li.actif{color:var(--unv-primary);font-weight:700} /* Barre de chargement PJAX */ #unv-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--unv-primary);z-index:2100; transition:width .25s ease,opacity .3s ease;opacity:0} #unv-progress.actif{opacity:1} /* ---------- Admin ---------- */ .admin-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh} .admin-side{background:var(--unv-surface);border-right:1px solid var(--unv-border);padding:1rem} .admin-side a{display:block;padding:.6rem .85rem;border-radius:var(--unv-radius-sm);color:var(--unv-muted);font-weight:600} .admin-side a:hover{background:var(--unv-surface-2);color:var(--unv-text)} .admin-side a.actif{background:var(--unv-primary);color:var(--unv-primary-contrast)} .admin-main{padding:1.5rem;background:var(--unv-bg)} @media (max-width:991px){.admin-shell{grid-template-columns:1fr}.admin-side{border-right:0;border-bottom:1px solid var(--unv-border)}} .mini-chart{display:flex;align-items:flex-end;gap:4px;height:90px} .mini-chart span{flex:1;background:var(--unv-secondary);border-radius:4px 4px 0 0;min-height:3px} .mini-chart.orange span{background:var(--unv-primary)}