/* ========================================================================== FunkyBreslev — Espace Pass Premium · design v4 (mobile-first). Bibliothèque en cartes + pochettes générées, lecteur plein écran (sheet), mini-player persistant. Autonome. FR + EN (i18n via ). ========================================================================== */ @font-face { font-family: 'MonVar'; src: url('../fonts/Montserrat-Variable.woff2') format('woff2'), url('../fonts/Montserrat-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'DINCond'; src: url('../fonts/DINCondensedBold.woff2') format('woff2'), url('../fonts/DINCondensedBold.ttf') format('truetype'); font-weight: 700; font-display: swap; } :root { --bg: #08080a; --panel: #131318; --panel2: #1b1b22; --elev: #202028; --ink: #f5f3ee; --muted: #9c988e; --gold: #e8a93b; --gold-ink: #0a0a0a; --line: rgba(245, 243, 238, .1); --line2: rgba(245, 243, 238, .16); --danger: #ff8f6b; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --mini-h: 68px; --safe-b: env(safe-area-inset-bottom, 0px); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 440 16px/1.55 'MonVar', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: calc(var(--mini-h) + var(--safe-b) + 14px); overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; } .wrap { width: min(1080px, calc(100% - 32px)); margin: auto; } .skip { position: absolute; left: -10000px; } h1, h2, h3 { margin: 0; } /* Titre DIN utilitaire */ .din { font-family: 'DINCond', 'Arial Narrow', Impact, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; } /* ---- Boutons ---- */ .btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 20px; border: 0; border-radius: 12px; background: var(--gold); color: var(--gold-ink); font-weight: 700; font-size: 15px; box-shadow: 0 8px 22px rgba(232, 169, 59, .22); transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out); } .btn-gold:hover { box-shadow: 0 12px 28px rgba(232, 169, 59, .32); } .btn-gold:active { transform: scale(.97); } .btn-gold svg { width: 16px; height: 16px; fill: currentColor; } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 9px 15px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(255,255,255,.03); color: var(--ink); font-size: 14px; font-weight: 600; transition: border-color .16s var(--ease-out), transform .12s var(--ease-out), background .16s var(--ease-out); } .btn-ghost:hover { border-color: var(--gold); } .btn-ghost:active { transform: scale(.97); } .btn-ghost svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .iconbtn { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line2); background: rgba(255,255,255,.03); display: grid; place-items: center; transition: border-color .16s var(--ease-out), transform .12s var(--ease-out), color .16s var(--ease-out); } .iconbtn:hover { border-color: var(--gold); color: var(--gold); } .iconbtn:active { transform: scale(.92); } .iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .iconbtn.filled svg { fill: currentColor; stroke: none; } /* ---- Barre supérieure (translucide) ---- */ .topbar { position: sticky; top: 0; z-index: 30; background: rgba(8, 8, 10, .72); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--line); } .topbar-in { display: flex; align-items: center; gap: 12px; height: 60px; } .topbar .brand img { height: 34px; width: auto; } .topbar .spacer { flex: 1; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line2); border-radius: 99px; font-size: 12px; color: var(--muted); background: rgba(255,255,255,.03); white-space: nowrap; } .chip b { color: var(--ink); font-weight: 700; } .menu-wrap { position: relative; } /* Contrôles de session masqués tant que le membre n'est pas connecté (état gate) */ body:not(.authed) .menu-wrap, body:not(.authed) #expiryChip { display: none; } .menu-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 220px; background: var(--elev); border: 1px solid var(--line2); border-radius: 14px; padding: 6px; box-shadow: 0 24px 50px rgba(0,0,0,.6); transform-origin: top right; opacity: 0; transform: scale(.96) translateY(-6px); pointer-events: none; transition: opacity .16s var(--ease-out), transform .16s var(--ease-out); } .menu-pop.open { opacity: 1; transform: none; pointer-events: auto; } .menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; } .menu-pop button:hover { background: rgba(255,255,255,.06); } /* Icônes des entrées de menu (statiques + téléchargements injectés via JS) : les SVG injectés n'ont ni taille ni tracé — on les normalise ici. */ .menu-pop button svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .menu-pop .sep { height: 1px; background: var(--line); margin: 5px 4px; } .menu-pop .chip-m { display: none; } /* ---- Écran de connexion ---- */ .gate { min-height: 78vh; display: grid; place-items: center; padding: 40px 0; } .gate-card { width: min(430px, 100%); text-align: center; background: var(--panel); border: 1px solid var(--line2); border-radius: 22px; padding: 40px 30px; } .gate-card img { height: 50px; margin: 0 auto 22px; width: auto; } .gate-card h1 { font-family: 'DINCond', Impact, sans-serif; font-size: 34px; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 10px; } .gate-card p { color: var(--muted); font-size: 14px; margin: 0 0 24px; } .gate-form { display: flex; flex-direction: column; gap: 10px; } .gate-form input, .search input { width: 100%; padding: 14px 16px; border: 1px solid var(--line2); border-radius: 12px; background: #0e0e12; color: var(--ink); font: inherit; } .gate-form input:focus, .search input:focus { outline: none; border-color: var(--gold); } .gate-msg { min-height: 20px; font-size: 13px; margin: 14px 0 0; } .gate-msg.err { color: var(--danger); } .gate-msg.ok { color: var(--gold); } .gate-alt { margin-top: 20px; font-size: 13px; color: var(--muted); } .gate-alt a { color: var(--gold); } /* ---- Sections ---- */ .app-main { padding: 22px 0 8px; } .section { margin-bottom: 34px; } .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } /* En-tête « Ta bibliothèque » : titre + segment. Sur mobile étroit, le segment passe proprement sous le titre (jamais de titre coupé sur 2 lignes). */ .sec-head.has-seg { flex-wrap: wrap; row-gap: 12px; } .sec-head.has-seg h2 { white-space: nowrap; } @media (max-width: 480px) { .sec-head.has-seg .seg { display: flex; flex: 1 1 100%; } .sec-head.has-seg .seg button { flex: 1; text-align: center; } } .sec-head h2 { font-family: 'DINCond', Impact, sans-serif; font-size: clamp(22px, 5vw, 28px); text-transform: uppercase; letter-spacing: -.005em; } .eyebrow { display: block; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 3px; } /* ==== Pochettes (réelles + générées) ==================================== */ .cvr { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #17171b; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; } .cvr img { width: 100%; height: 100%; object-fit: cover; } /* Pochette générée : soleil synthwave (stries) + grille horizon + titre DIN */ .cvr.gen { background: linear-gradient(180deg, var(--b) 0%, #06060b 86%); } .cvr.gen::before { /* soleil rayé */ content: ""; position: absolute; left: 50%; top: 33%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: linear-gradient(180deg, var(--sun) 0%, var(--a) 58%, var(--a) 100%); -webkit-mask-image: linear-gradient(#000, #000), repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 6px); mask-image: linear-gradient(#000, #000), repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 6px); -webkit-mask-size: 100% 48%, 100% 52%; mask-size: 100% 48%, 100% 52%; -webkit-mask-position: top, bottom; mask-position: top, bottom; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; box-shadow: 0 0 42px -6px var(--a); } .cvr.gen::after { /* grille horizon en perspective */ content: ""; position: absolute; left: -30%; right: -30%; bottom: -2%; height: 46%; background: repeating-linear-gradient(to right, rgba(255,255,255,.22) 0 1px, transparent 1px 9%), repeating-linear-gradient(to bottom, rgba(255,255,255,.18) 0 1px, transparent 1px 22%); transform: perspective(240px) rotateX(66deg); transform-origin: bottom; mask-image: linear-gradient(to bottom, transparent, #000 55%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%); } .cvr.gen .cvr-t { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 2; font-family: 'DINCond', Impact, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; line-height: .9; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.75); } .cvr.gen .cvr-m { position: absolute; left: 12px; top: 10px; z-index: 2; font-size: 8px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.8); text-shadow: 0 1px 6px rgba(0,0,0,.5); } .cvr .cvr-play { position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.5); opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); } .cvr .cvr-play svg { width: 19px; height: 19px; fill: currentColor; } /* Bouton « + » (ajouter à une playlist) — coin haut-droit de la pochette. */ .cvr .cvr-add { position: absolute; top: 9px; right: 9px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.45); opacity: 0; transform: translateY(-5px) scale(.9); transition: opacity .2s var(--ease-out), transform .14s var(--ease-out); } .cvr .cvr-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .cvr .cvr-add:hover { transform: scale(1.08); } .cvr .cvr-add:active { transform: scale(.86); } /* Révélé au survol (desktop), comme le bouton lecture. */ @media (hover: hover) and (pointer: fine) { .tile:hover .cvr-add, .rel-card:hover .cvr-add, .hero-art:hover .cvr-add { opacity: 1; transform: none; } } /* Sur tactile (mobile-first), les actions de pochette sont toujours visibles : sans survol, le bouton lecture ET le « + » resteraient sinon invisibles. */ @media (hover: none) { .cvr .cvr-play, .cvr .cvr-add { opacity: 1; transform: none; } } /* ==== Dernières sorties : rail horizontal ============================== */ .rail-wrap { position: relative; } /* Voile de droite : signale sur mobile qu'il reste des cartes à faire défiler. */ .rail-wrap::after { content: ''; position: absolute; top: 0; right: -2px; bottom: 14px; width: 44px; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease-out); background: linear-gradient(90deg, transparent, var(--bg)); } .rail-wrap.scrollable::after { opacity: 1; } /* Indice « glisser › » dans l'en-tête, affiché uniquement sur écran tactile/étroit. */ .rail-hint { display: none; } @media (hover: none), (max-width: 640px) { .rail-hint { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } .rail-hint::after { content: '›'; font-size: 15px; line-height: 1; transform: translateY(-1px); animation: railNudge 1.6s var(--ease-out) infinite; } } @keyframes railNudge { 0%,100% { transform: translate(0,-1px); } 50% { transform: translate(3px,-1px); } } @media (prefers-reduced-motion: reduce) { .rail-hint::after { animation: none; } } .rail { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 12px; margin: 0 -2px; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .rel-card { scroll-snap-align: start; } .rel-card .cvr { border-radius: 16px; } .rel-card.feat { grid-column: span 1; } .rel-meta { padding: 10px 2px 0; } .rel-badge { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .rel-badge.hot { color: var(--gold); } .rel-title { font-family: 'DINCond', Impact, sans-serif; font-size: 19px; text-transform: uppercase; letter-spacing: 0; line-height: 1; margin: 3px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rel-sub { color: var(--muted); font-size: 11px; } /* ==== Bibliothèque ===================================================== */ .seg { display: inline-flex; padding: 3px; border: 1px solid var(--line2); border-radius: 99px; background: rgba(255,255,255,.03); gap: 2px; } .seg button { padding: 7px 15px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; transition: color .15s var(--ease-out); } .seg button.active { background: var(--gold); color: var(--gold-ink); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px 14px; } .tile { text-align: left; } .tile .cvr { transition: transform .3s var(--ease-out); } .tile:hover .cvr { transform: translateY(-3px); } @media (hover: hover) and (pointer: fine) { .tile:hover .cvr-play { opacity: 1; transform: none; } } .tile-t { font-weight: 600; font-size: 14px; margin: 9px 2px 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile-s { color: var(--muted); font-size: 12px; margin: 0 2px; } .tile.newpl .cvr { display: grid; place-items: center; border: 1px dashed var(--line2); background: rgba(255,255,255,.02); } .tile.newpl .cvr span { color: var(--muted); font-size: 30px; font-weight: 300; } /* Squelette de chargement (avant l'arrivée du catalogue) */ .skel { position: relative; overflow: hidden; background: var(--panel2); border-radius: 12px; } .skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: skelShine 1.3s var(--ease-out) infinite; } @keyframes skelShine { to { transform: translateX(100%); } } .skel-cvr { aspect-ratio: 1; border-radius: 14px; } .skel-line { height: 12px; margin-top: 10px; width: 78%; } .skel-line.sm { width: 48%; height: 10px; margin-top: 7px; } /* Panneau singles (scroll interne, pas de scroll de page infini) */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; } .panel .search { padding: 12px; border-bottom: 1px solid var(--line); } .tracklist { max-height: min(58vh, 560px); overflow-y: auto; overscroll-behavior: contain; } /* Ligne de titre */ .trk { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); } .trk:last-child { border-bottom: 0; } .trk:hover { background: rgba(255,255,255,.03); } .trk.playing { background: rgba(232,169,59,.08); } .trk-play { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(255,255,255,.03); display: grid; place-items: center; transition: transform .12s var(--ease-out); } .trk-play:active { transform: scale(.9); } .trk.playing .trk-play { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); } .trk-play svg { width: 14px; height: 14px; fill: currentColor; } .trk-n { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; } .trk.playing .trk-n, .trk-num.playing { color: var(--gold); } .trk-main { min-width: 0; cursor: pointer; } .trk-t { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trk-s { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trk-acts { display: flex; gap: 2px; align-items: center; } .trk-ic { width: 36px; height: 36px; border-radius: 9px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; transition: color .15s var(--ease-out); } .trk-ic:hover { color: var(--gold); } .trk-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .empty { color: var(--muted); font-size: 13px; padding: 22px 14px; text-align: center; } /* ==== Bottom sheet générique (album / playlist) ======================== */ .scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out); } .scrim.show { opacity: 1; pointer-events: auto; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 90vh; display: flex; flex-direction: column; background: var(--panel); border-top-left-radius: 22px; border-top-right-radius: 22px; border-top: 1px solid var(--line2); transform: translateY(100%); transition: transform .42s var(--ease-drawer); padding-bottom: var(--safe-b); will-change: transform; } .sheet.show { transform: translateY(0); } .sheet-grab { padding: 10px 0 4px; display: grid; place-items: center; cursor: grab; touch-action: none; } .sheet-grab i { width: 40px; height: 5px; border-radius: 99px; background: var(--line2); display: block; } .sheet-hd { display: flex; gap: 16px; align-items: flex-end; padding: 8px 20px 18px; border-bottom: 1px solid var(--line); touch-action: none; } .sheet-hd .cvr { width: 96px; height: 96px; flex: 0 0 auto; border-radius: 12px; } .sheet-hd .cvr .cvr-t { font-size: 15px; } .sheet-hd-meta { min-width: 0; flex: 1; } .sheet-hd-meta h3 { font-family: 'DINCond', Impact, sans-serif; font-size: clamp(24px, 6vw, 34px); text-transform: uppercase; line-height: .95; margin: 4px 0; } .sheet-hd-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .sheet .tracklist { flex: 1; max-height: none; } /* On desktop la sheet devient une modale centrée */ @media (min-width: 760px) { .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, 92vw); max-height: 84vh; border-radius: 22px; border: 1px solid var(--line2); transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: transform .32s var(--ease-out), opacity .32s var(--ease-out); } .sheet.show { transform: translate(-50%, -50%); opacity: 1; } .sheet-grab { display: none; } } /* ==== Mini-player (fixe, translucide) =================================== */ .mini { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding-bottom: var(--safe-b); background: rgba(20, 20, 26, .82); backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid var(--line2); transform: translateY(120%); transition: transform .32s var(--ease-out); } .mini.show { transform: translateY(0); } .mini-in { display: flex; align-items: center; gap: 12px; height: var(--mini-h); width: min(1080px, calc(100% - 24px)); margin: auto; } .mini-tap { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: 0; } .mini .cvr { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 9px; } .mini .cvr .cvr-t { font-size: 8px; left: 5px; right: 5px; bottom: 5px; } .mini .cvr .cvr-m { display: none; } .mini-info { min-width: 0; } .mini-t { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini-s { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini-ctl { display: flex; align-items: center; gap: 4px; } .mini-bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,.1); } .mini-bar i { display: block; height: 100%; width: 0; background: var(--gold); } .pp { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; transition: transform .12s var(--ease-out); } .pp:active { transform: scale(.92); } .pp svg { width: 20px; height: 20px; fill: currentColor; } .mini .ghostbtn { width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; } .mini .ghostbtn svg { width: 22px; height: 22px; fill: currentColor; } /* ==== Now Playing plein écran (sheet) ================================== */ .np { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--np-bg, #0c0c11); transform: translateY(100%); transition: transform .44s var(--ease-drawer); will-change: transform; padding-bottom: var(--safe-b); } .np.show { transform: translateY(0); } .np::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--np-glow, radial-gradient(circle at 50% 12%, rgba(232,169,59,.22), transparent 55%)); pointer-events: none; } .np > * { position: relative; z-index: 1; } /* header + pochette + titre = zone de drag généreuse (voir dragSheet dans le JS) */ .np-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; touch-action: none; cursor: grab; } .np-art, .np-meta { touch-action: none; } .np-grab { flex: 1; align-self: stretch; display: grid; place-items: center; touch-action: none; cursor: grab; } .np-grab i { width: 46px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.42); } .np-top .iconbtn { border-color: transparent; background: rgba(255,255,255,.06); } .np-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 26px; min-height: 0; overflow: hidden; } .np-art { position: relative; width: min(58vh, 82vw, 420px); aspect-ratio: 1; } .np-art .js-cover { position: absolute; inset: 0; } .np-art .cvr { width: 100%; height: 100%; border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,.6); } .np-art .cvr .cvr-t { font-size: clamp(22px, 6vw, 40px); } .np-disc { position: absolute; top: 10%; right: -6%; width: 58%; aspect-ratio: 1; z-index: -1; transform: translateX(0); transition: transform .5s var(--ease-out); } .np-disc img { width: 100%; height: 100%; border-radius: 50%; border: 5px solid #000; box-shadow: 0 20px 40px rgba(0,0,0,.55); } .np.playing .np-disc { transform: translateX(30%); } .np-disc.spin { animation: spin 11s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .np.playing .np-disc.spin { animation: spin 11s linear infinite; } .np-meta { width: min(420px, 100%); margin-top: 22px; } .np-title { font-family: 'DINCond', Impact, sans-serif; font-size: clamp(26px, 7vw, 40px); text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .np-sub { color: var(--muted); font-size: 14px; margin-top: 3px; } .np-seek { display: flex; align-items: center; gap: 10px; width: min(420px, 100%); margin-top: 18px; } .np-seek .t { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; } .seek { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.16); position: relative; cursor: pointer; touch-action: none; } .seek i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold); border-radius: 99px; } .seek::after { content: ""; position: absolute; inset: -8px 0; } .np-controls { display: flex; align-items: center; justify-content: center; gap: 18px; width: min(420px, 100%); margin-top: 20px; } .np-controls .ctl { width: 50px; height: 50px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; transition: transform .12s var(--ease-out), color .15s var(--ease-out); } .np-controls .ctl:active { transform: scale(.9); } .np-controls .ctl svg { width: 26px; height: 26px; fill: currentColor; } .np-controls .ctl.small svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .np-controls .ctl.small.on { color: var(--gold); } .np-controls .ctl.main { width: 72px; height: 72px; background: var(--gold); color: var(--gold-ink); box-shadow: 0 10px 30px rgba(232,169,59,.3); } .np-controls .ctl.main svg { width: 32px; height: 32px; } .np-extra { display: flex; align-items: center; justify-content: space-between; width: min(420px, 100%); margin-top: 20px; } .np-queue-toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; } .np-queue-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; } /* file de lecture (panneau qui glisse depuis le bas de la sheet np) */ .np-queue { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 62%; display: flex; flex-direction: column; background: var(--elev); border-top-left-radius: 20px; border-top-right-radius: 20px; border-top: 1px solid var(--line2); transform: translateY(101%); transition: transform .38s var(--ease-drawer); padding-bottom: var(--safe-b); } .np-queue.show { transform: translateY(0); } .np-queue-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 10px; } .np-queue-hd .din { font-size: 18px; } .q-list { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 10px; } .q-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; } .q-item:hover { background: rgba(255,255,255,.04); } .q-item.cur { background: rgba(232,169,59,.1); } .q-jump { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; border: 0; background: transparent; text-align: left; } .q-jump .n { color: var(--muted); font-size: 11px; width: 18px; font-variant-numeric: tabular-nums; } .q-item.cur .q-jump .n { color: var(--gold); } .q-jump .t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .q-rm { width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); border-radius: 8px; display: grid; place-items: center; } .q-rm:hover { color: var(--danger); } .q-rm svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* ==== États de chargement (buffering du lecteur + connexion) ========== Un seul langage : anneau conique effilé en gold, qui tourne vite (un spinner rapide se ressent comme un chargement plus court). `currentColor` suit le bouton — encre sombre sur pastille gold, gold sur fond sombre — donc un seul motif couvre tous les contrôles. Un contrôle en chargement n'affiche JAMAIS l'icône pause : tant qu'aucun son ne sort, on ne prétend pas « lecture en cours ». */ @keyframes fbspin { to { transform: rotate(360deg); } } @keyframes fbpulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } @keyframes fbseek { to { transform: translateX(250%); } } /* Anneau tournant injecté dans le bouton (masque radial = trait fin). */ .ctl.main, .mini .pp, .trk-play, .btn-gold { position: relative; } .ctl.main.is-loading svg, .mini .pp.is-loading svg, .trk-play.is-loading svg { opacity: 0; } .ctl.main.is-loading::after, .mini .pp.is-loading::after, .trk-play.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 8%, currentColor); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2.5px), #000 0); mask: radial-gradient(farthest-side, #0000 calc(100% - 2.5px), #000 0); animation: fbspin .7s linear infinite; } .ctl.main.is-loading::after { width: 34px; height: 34px; } .mini .pp.is-loading::after { width: 22px; height: 22px; } .trk-play.is-loading::after { width: 18px; height: 18px; -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0); mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0); } /* Barre de progression pendant le buffering : balayage indéterminé (la position réelle est inconnue tant que les métadonnées ne sont pas là). */ .np.is-loading .seek { overflow: hidden; } .np.is-loading .seek i { opacity: 0; } .np.is-loading .seek::before { content: ""; position: absolute; inset: 0; border-radius: 99px; z-index: 1; width: 40%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 60%, transparent), transparent); transform: translateX(-120%); animation: fbseek 1.15s var(--ease-out) infinite; } .np.is-loading .np-seek .js-cur { color: var(--muted); } /* Spinner de connexion (échange du lien magique). */ .gate-msg.is-loading { color: var(--gold); display: flex; align-items: center; justify-content: center; gap: 9px; } .gate-msg.is-loading::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 8%, var(--gold)); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0); mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0); animation: fbspin .7s linear infinite; } #gate.is-working .gate-card > img { animation: fbpulse 1.7s ease-in-out infinite; } /* Bouton « Recevoir mon lien » pendant l'envoi : le libellé cède la place à l'anneau, le bouton se verrouille (pas de double-envoi). */ .btn-gold.is-loading { color: transparent; pointer-events: none; } .btn-gold.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 8%, var(--gold-ink)); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0); mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0); animation: fbspin .7s linear infinite; } /* Mouvement réduit : l'anneau ne tourne pas mais pulse (un indicateur reste nécessaire), et le balayage de la barre devient une pulsation d'opacité. */ @media (prefers-reduced-motion: reduce) { .ctl.main.is-loading::after, .mini .pp.is-loading::after, .trk-play.is-loading::after, .gate-msg.is-loading::before, .btn-gold.is-loading::after { background: currentColor; -webkit-mask: none; mask: none; animation: fbpulse 1.1s ease-in-out infinite; } .gate-msg.is-loading::before { background: var(--gold); } .btn-gold.is-loading::after { background: var(--gold-ink); } .np.is-loading .seek::before { animation: fbpulse 1.1s ease-in-out infinite; transform: none; width: 100%; } #gate.is-working .gate-card > img { animation: fbpulse 1.7s ease-in-out infinite; } } /* ==== Menu "ajouter à la playlist" ===================================== */ .addpop { position: fixed; z-index: 80; min-width: 230px; max-height: 320px; overflow-y: auto; background: var(--elev); border: 1px solid var(--line2); border-radius: 14px; padding: 6px; box-shadow: 0 24px 50px rgba(0,0,0,.6); opacity: 0; transform: scale(.96); pointer-events: none; transition: opacity .16s var(--ease-out), transform .16s var(--ease-out); transform-origin: top right; } .addpop.open { opacity: 1; transform: none; pointer-events: auto; } .addpop .hd { padding: 8px 12px 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .addpop button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-size: 13.5px; } .addpop button:hover { background: rgba(255,255,255,.06); } /* ==== Toast ============================================================ */ .toast { position: fixed; left: 50%; bottom: calc(var(--mini-h) + var(--safe-b) + 18px); z-index: 90; transform: translate(-50%, 14px); background: var(--elev); color: var(--ink); border: 1px solid var(--line2); border-radius: 99px; padding: 11px 20px; font-size: 13px; font-weight: 600; box-shadow: 0 16px 36px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ==== Desktop ajustements ============================================== */ @media (min-width: 760px) { .app-main { padding-top: 28px; } .rail { grid-auto-columns: 190px; } .grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 22px 18px; } .menu-pop .chip-m { display: none; } } @media (max-width: 520px) { .chip { display: none; } /* l'échéance passe dans le menu ⋯ */ .menu-pop .chip-m { display: block; padding: 9px 12px; color: var(--muted); font-size: 12px; } .menu-pop .chip-m b { color: var(--ink); } .rail { grid-auto-columns: 45vw; } } /* ==== Hero « Dernière sortie » ========================================= */ .hero-sec { margin-bottom: 40px; } .hero { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--line2); background: radial-gradient(120% 140% at 88% -10%, color-mix(in srgb, var(--hero-accent, var(--gold)) 22%, transparent) 0%, transparent 52%), linear-gradient(150deg, var(--panel) 0%, #0b0b0f 96%); padding: 22px; } .hero-glow { position: absolute; inset: auto -20% -60% auto; width: 70%; aspect-ratio: 1; z-index: 0; background: radial-gradient(circle, color-mix(in srgb, var(--hero-accent, var(--gold)) 40%, transparent), transparent 62%); filter: blur(38px); opacity: .55; pointer-events: none; } .hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; } .hero-art { position: relative; width: min(72vw, 300px); align-self: center; cursor: pointer; } .hero-cover { position: relative; z-index: 1; } .hero-cover .cvr { border-radius: 18px; box-shadow: 0 26px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05) inset; } .hero-disc { position: absolute; top: 8%; right: -13%; width: 74%; aspect-ratio: 1; z-index: 0; } .hero-disc img { width: 100%; height: 100%; border-radius: 50%; border: 5px solid #08080a; box-shadow: 0 20px 46px rgba(0,0,0,.55); animation: spin 22s linear infinite; } .hero-play { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; box-shadow: 0 12px 30px rgba(232,169,59,.42); transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); } .hero-play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 2px; } .hero-art:hover .hero-play { transform: scale(1.06); box-shadow: 0 16px 38px rgba(232,169,59,.55); } .hero-play:active { transform: scale(.94); } .hero-meta { min-width: 0; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .hero-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 70%, transparent); animation: heroPulse 2s var(--ease-out) infinite; } @keyframes heroPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 60%, transparent); } 70%,100% { box-shadow: 0 0 0 9px transparent; } } .hero-title { font-family: 'DINCond', Impact, sans-serif; font-size: clamp(34px, 11vw, 60px); text-transform: uppercase; letter-spacing: -.01em; line-height: .92; margin: 8px 0 6px; } .hero-sub { color: var(--muted); font-size: 14px; } .hero-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .hero-acts .btn-gold { min-height: 50px; padding: 12px 26px; font-size: 16px; } @media (min-width: 720px) { .hero { padding: 30px; } .hero-inner { flex-direction: row; align-items: center; gap: 40px; } .hero-art { width: min(34vw, 300px); flex: 0 0 auto; align-self: auto; } .hero-meta { flex: 1; } } /* ==== Rail « Fraîchement sorti » : cartes pochettes plus grandes ======== */ .rel-card { transition: transform .3s var(--ease-out); } .rel-card .cvr { box-shadow: 0 10px 28px rgba(0,0,0,.42); } @media (hover: hover) and (pointer: fine) { .rel-card:hover { transform: translateY(-4px); } .rel-card:hover .cvr-play { opacity: 1; transform: none; } } .rel-badge { display: inline-block; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); border-radius: 99px; padding: 2px 9px; } /* ==== Singles en grille de pochettes ==================================== */ .singles-head { margin-bottom: 16px; } .search { position: relative; width: min(360px, 100%); } .search .search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.9; stroke-linecap: round; pointer-events: none; } .singles-head .search input { padding-left: 42px; border-radius: 99px; } .tile .cvr-play { transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .tile:hover .cvr-play { opacity: 1; transform: none; } } /* Entrée en cascade des pochettes (grille + rail) */ @media (prefers-reduced-motion: no-preference) { .grid .tile, .rail .rel-card { animation: coverIn .42s var(--ease-out) both; } .grid .tile:nth-child(1),.rail .rel-card:nth-child(1) { animation-delay: 0ms; } .grid .tile:nth-child(2),.rail .rel-card:nth-child(2) { animation-delay: 40ms; } .grid .tile:nth-child(3),.rail .rel-card:nth-child(3) { animation-delay: 80ms; } .grid .tile:nth-child(4),.rail .rel-card:nth-child(4) { animation-delay: 120ms; } .grid .tile:nth-child(5),.rail .rel-card:nth-child(5) { animation-delay: 160ms; } .grid .tile:nth-child(6),.rail .rel-card:nth-child(6) { animation-delay: 200ms; } .grid .tile:nth-child(n+7) { animation-delay: 240ms; } } @keyframes coverIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ==== Lecteur plein écran : présence renforcée ========================== */ .np-eyebrow { display: block; color: var(--gold); font-size: 11px; letter-spacing: .18em; margin-bottom: 6px; } .np-panel { display: flex; flex-direction: column; align-items: center; width: min(440px, 100%); } .np-panel > * { width: 100%; } .np-meta { text-align: center; } /* Desktop : lecteur en 2 colonnes (grande pochette à gauche, panneau à droite). */ @media (min-width: 900px) { .np-body { flex-direction: row; justify-content: center; align-items: center; gap: clamp(32px, 6vw, 80px); padding: 20px 40px; } .np-art { width: min(52vh, 460px); } .np-panel { align-items: flex-start; width: min(460px, 42vw); } .np-meta { text-align: left; margin-top: 0; } .np-controls { justify-content: flex-start; } .np-disc { top: 8%; right: -8%; } .np.playing .np-disc { transform: translateX(24%); } } /* ==== Réduction de mouvement =========================================== */ /* Accessibilité clavier : anneau de focus visible uniquement en navigation clavier (:focus-visible n'apparaît pas au tap/clic souris, donc n'altère pas l'UI tactile). */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .np-disc.spin, .np.playing .np-disc.spin { animation: none; } .hero-disc img { animation: none; } .hero-eyebrow i { animation: none; } .skel::after { animation: none; } .np-disc { transition: none; } * { scroll-behavior: auto; } .sheet, .np, .mini, .np-queue, .scrim { transition-duration: .001ms; } }