/* ========================================================================== 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 ). ========================================================================== */ :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 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: calc(var(--mini-h) + var(--safe-b) + 14px); overflow-x: hidden; } /* Évite le flash du formulaire de connexion quand un membre déjà identifié recharge l’espace : le gate ne doit jamais lui parler de rejoindre le Pass. */ body.auth-pending #gate { visibility: hidden; opacity: 0; } body.auth-pending #app { visibility: hidden; } a { color: inherit; text-decoration: none; } a[href], button, [role="button"] { -webkit-tap-highlight-color: rgba(232, 169, 59, .24); touch-action: manipulation; } img { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; color: inherit; } .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: 'Plus Jakarta Sans', '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: calc(60px + env(safe-area-inset-top, 0px)); min-height: 60px; padding-top: env(safe-area-inset-top, 0px); } .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; } body:not(.authed) .np, body:not(.authed) .mini, body:not(.authed) .sheet, body:not(.authed) .scrim, body:not(.authed) .addpop, body:not(.authed) .toast { display: none !important; } .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; } /* Les entrées du menu ⋯ sont soit des