/* ═══════════════════════════════════════════════════════════════════════════ AKR Rewind Web — thème sombre « glassmorphism » violet/bleu Mêmes jetons que le logiciel Windows (Resources/Web/style.css) pour une continuité visuelle app <-> site. Mobile-first, pensé pour être embarqué dans des webviews iOS / iPadOS / macOS (safe-area, cibles tactiles >= 44px). ═══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: dark; --bg-base: #080812; --bg-card: rgba(18, 18, 40, 0.85); --bg-solid: #12122a; --bg-glass: rgba(255, 255, 255, 0.04); --bg-glass-hover: rgba(255, 255, 255, 0.07); --border-glass: rgba(255, 255, 255, 0.08); --border-accent: rgba(168, 85, 247, 0.4); --accent-purple: #a855f7; --accent-blue: #3b82f6; --accent-cyan: #22d3ee; --accent-red: #ef4444; --accent-green: #22c55e; --accent-amber: #f59e0b; --grad-primary: linear-gradient(135deg, #a855f7, #3b82f6); --grad-glow: linear-gradient(135deg, rgba(168,85,247,.2), rgba(59,130,246,.2)); --text-primary: rgba(255, 255, 255, 0.95); --text-secondary: rgba(255, 255, 255, 0.6); --text-muted: rgba(255, 255, 255, 0.38); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --shadow-glow: 0 0 30px rgba(168,85,247,.15), 0 4px 32px rgba(0,0,0,.5); --ease: cubic-bezier(.4, 0, .2, 1); --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sidebar-w: 248px; --tabbar-h: 62px; --font: 'Segoe UI', system-ui, -apple-system, 'SF Pro Text', Roboto, 'Helvetica Neue', sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } html { background: var(--bg-base); min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100vh; min-height: 100dvh; font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--text-primary); background: var(--bg-base); -webkit-font-smoothing: antialiased; /* Comme le logiciel : rien n'est sélectionnable ni glissable, sauf les champs et .selectable */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior-y: none; } body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(168,85,247,.12) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 100%, rgba(59,130,246,.10) 0%, transparent 60%); } img, svg, a { -webkit-user-drag: none; } svg { flex-shrink: 0; } input, textarea, .selectable { -webkit-user-select: text; user-select: text; } a { color: var(--accent-cyan); text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } button:disabled { cursor: not-allowed; opacity: .55; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 2px; border-radius: 6px; } [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ── Boot / spinner ───────────────────────────────────────────────────────── */ #app.boot { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; } .boot-spinner, .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border-glass); border-top-color: var(--accent-purple); animation: spin .8s linear infinite; } .spinner.sm { width: 16px; height: 16px; border-width: 2px; display: inline-block; vertical-align: -3px; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Boutons ──────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; white-space: nowrap; border: 1px solid var(--border-glass); background: var(--bg-glass); transition: background .2s var(--ease), border-color .2s var(--ease), transform .08s var(--ease), box-shadow .2s var(--ease); } .btn:hover:not(:disabled) { background: var(--bg-glass-hover); border-color: rgba(255,255,255,.16); } .btn:active:not(:disabled) { transform: scale(.97); } .btn.primary { background: var(--grad-primary); border-color: transparent; color: #fff; } .btn.primary:hover:not(:disabled) { background: var(--grad-primary); filter: brightness(1.1); box-shadow: 0 0 22px rgba(168,85,247,.35); } .btn.danger { color: #fca5a5; border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); } .btn.danger:hover:not(:disabled) { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.55); } .btn.danger.solid { background: var(--accent-red); border-color: transparent; color: #fff; } .btn.danger.solid:hover:not(:disabled) { background: #dc2626; } .btn.ghost { background: transparent; border-color: transparent; color: var(--text-secondary); } .btn.ghost:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-glass); } .btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; } .btn.block { width: 100%; } .btn svg { width: 18px; height: 18px; } .btn-icon { width: 40px; height: 40px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--text-secondary); transition: background .2s var(--ease), color .2s var(--ease), transform .08s var(--ease); } .btn-icon:hover:not(:disabled) { background: var(--bg-glass-hover); color: var(--text-primary); } .btn-icon:active:not(:disabled) { transform: scale(.92); } .btn-icon.danger:hover:not(:disabled) { color: #fca5a5; background: rgba(239,68,68,.14); } .btn-icon svg { width: 20px; height: 20px; } /* ── Champs ───────────────────────────────────────────────────────────────── */ .field { display: grid; gap: 6px; margin-bottom: 14px; } .field > label, .label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); } .input, select.input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: var(--radius-sm); background: rgba(255,255,255,.05); border: 1px solid var(--border-glass); color: var(--text-primary); font: inherit; font-size: 16px; /* 16px : empêche le zoom automatique d'iOS au focus */ transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); } .input::placeholder { color: var(--text-muted); } .input:hover { border-color: rgba(255,255,255,.16); } .input:focus { border-color: var(--border-accent); background: rgba(255,255,255,.07); box-shadow: 0 0 0 3px rgba(168,85,247,.16); outline: none; } select.input { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } select.input option { background: #14142e; color: #fff; } .hint { font-size: 12.5px; color: var(--text-muted); } .check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; color: var(--text-secondary); font-size: 14px; } .check input { width: 18px; height: 18px; accent-color: var(--accent-purple); flex-shrink: 0; } .input-group { display: flex; align-items: stretch; } .input-group .prefix { display: flex; align-items: center; padding: 0 12px; font-size: 13px; color: var(--text-muted); background: rgba(255,255,255,.03); border: 1px solid var(--border-glass); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); white-space: nowrap; } .input-group .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; min-width: 0; } /* ── Cartes / structure ───────────────────────────────────────────────────── */ .card { position: relative; z-index: 1; background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 20px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .card + .card { margin-top: 16px; } .card h2 { font-size: 16px; font-weight: 700; margin-bottom: 4px; } .card .sub { color: var(--text-secondary); font-size: 13.5px; margin-bottom: 16px; } .card.danger-zone { border-color: rgba(239,68,68,.28); } .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .row.between { justify-content: space-between; } .grow { flex: 1 1 auto; min-width: 0; } .muted { color: var(--text-secondary); } .small { font-size: 13px; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-md); font-size: 14px; border: 1px solid var(--border-glass); background: var(--bg-glass); margin-bottom: 16px; position: relative; z-index: 1; } .banner svg { width: 20px; height: 20px; margin-top: 1px; } .banner.warn { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.08); color: #fcd34d; } .banner.err { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); color: #fca5a5; } .banner.ok { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.08); color: #86efac; } .form-error { min-height: 20px; margin: -4px 0 12px; font-size: 13.5px; color: #fca5a5; } .form-error:empty { display: none; } .badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--bg-glass-hover); color: var(--text-secondary); border: 1px solid var(--border-glass); white-space: nowrap; } .badge.premium { background: var(--grad-glow); color: #e9d5ff; border-color: var(--border-accent); } .badge.green { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.3); } .badge.red { background: rgba(239,68,68,.12); color: #fca5a5; border-color: rgba(239,68,68,.3); } .badge.amber { background: rgba(245,158,11,.12); color: #fcd34d; border-color: rgba(245,158,11,.3); } .badge.tag { background: rgba(59,130,246,.12); color: #93c5fd; border-color: rgba(59,130,246,.28); } /* ── Pages d'authentification ─────────────────────────────────────────────── */ .auth-wrap { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(24px + var(--sat)) calc(16px + var(--sar)) calc(24px + var(--sab)) calc(16px + var(--sal)); } .auth-card { width: min(440px, 100%); padding: 32px 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-glow); animation: rise .42s cubic-bezier(.22, 1, .36, 1); } @keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .brand { display: flex; align-items: center; gap: 10px; } .brand img { width: 34px; height: 34px; border-radius: 9px; } .brand span { font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .brand b { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; } .auth-card .brand { justify-content: center; margin-bottom: 22px; } .auth-card h1 { font-size: 22px; text-align: center; letter-spacing: -.01em; margin-bottom: 6px; } .auth-card .lead { text-align: center; color: var(--text-secondary); font-size: 14px; margin-bottom: 24px; } .auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; font-size: 14px; } .auth-links a { min-height: 32px; display: inline-flex; align-items: center; } .status-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-glow); border: 1px solid var(--border-accent); } .status-icon svg { width: 30px; height: 30px; color: #e9d5ff; } .status-icon.ok { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.4); } .status-icon.ok svg { color: #86efac; } .pw-wrap { position: relative; } .pw-wrap .input { padding-right: 48px; } .pw-toggle { position: absolute; right: 2px; top: 1px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--text-muted); } .pw-toggle:hover { color: var(--text-primary); } .pw-toggle svg { width: 20px; height: 20px; } /* ── Coquille de l'application ────────────────────────────────────────────── */ .shell { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; } .sidebar { display: none; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--sat)) calc(16px + var(--sar)) 10px calc(16px + var(--sal)); background: rgba(8,8,18,.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--border-glass); } .topbar .brand img { width: 28px; height: 28px; } .topbar .brand span { font-size: 15px; } .topbar .spacer { flex: 1; } .main { padding: 18px calc(16px + var(--sar)) calc(var(--tabbar-h) + var(--sab) + 28px) calc(16px + var(--sal)); max-width: 1280px; margin: 0 auto; } .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; padding: 6px calc(8px + var(--sar)) calc(6px + var(--sab)) calc(8px + var(--sal)); background: rgba(12,12,28,.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--border-glass); } .tabbar a { flex: 1; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--text-muted); border-radius: 12px; transition: color .2s var(--ease); } .tabbar a svg { width: 22px; height: 22px; } .tabbar a.active { color: var(--accent-purple); } .tabbar a:active { transform: scale(.94); } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; position: relative; z-index: 1; } .page-head h1 { font-size: 24px; letter-spacing: -.02em; } .page-head p { color: var(--text-secondary); font-size: 14px; } .avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; background: var(--grad-primary); color: #fff; font-weight: 700; font-size: 15px; text-transform: uppercase; } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar.lg { width: 72px; height: 72px; font-size: 28px; } .quota { display: grid; gap: 6px; } .quota-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--text-secondary); } .quota-top b { color: var(--text-primary); font-weight: 600; } .meter { height: 7px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; } .meter > i { display: block; height: 100%; border-radius: 99px; background: var(--grad-primary); transition: width .5s var(--ease); } .meter.warn > i { background: linear-gradient(90deg, #f59e0b, #ef4444); } .meter.full > i { background: var(--accent-red); } .mobile-quota { margin-bottom: 16px; position: relative; z-index: 1; } /* ── Clips ────────────────────────────────────────────────────────────────── */ .toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; position: relative; z-index: 1; } .search { position: relative; flex: 1 1 220px; min-width: 0; } .search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; } .search .input { padding-left: 40px; } .toolbar select.input { width: auto; flex: 0 0 auto; min-width: 150px; } .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: rgba(255,255,255,.05); border: 1px solid var(--border-glass); } .seg button { min-height: 38px; padding: 0 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); transition: background .2s var(--ease), color .2s var(--ease); } .seg button.on { background: var(--grad-primary); color: #fff; } .seg.icons button { padding: 0 11px; display: grid; place-items: center; } .seg.icons svg { width: 18px; height: 18px; } .chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; margin-bottom: 4px; scrollbar-width: none; position: relative; z-index: 1; -webkit-overflow-scrolling: touch; } .chips::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-secondary); background: var(--bg-glass); border: 1px solid var(--border-glass); transition: all .2s var(--ease); } .chip:hover { background: var(--bg-glass-hover); } .chip.on { background: var(--grad-glow); color: #fff; border-color: var(--border-accent); } .grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); position: relative; z-index: 1; } .clip { background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .clip:hover { border-color: var(--border-accent); box-shadow: var(--shadow-glow); transform: translateY(-2px); } .thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #0b0b1c; cursor: pointer; overflow: hidden; } .thumb video, .thumb img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; } .thumb video.ready, .thumb img.ready { opacity: 1; } /* le calque .ph (dégradé violet + icône) suivait la miniature dans le DOM et la recouvrait : on le retire dès qu'elle est prête */ .thumb video.ready ~ .ph, .thumb img.ready ~ .ph { display: none; } .thumb.has-img .ph { display: none; } .thumb .ph { position: absolute; z-index: 0; inset: 0; display: grid; place-items: center; color: var(--text-muted); background: linear-gradient(135deg, rgba(168,85,247,.08), rgba(59,130,246,.08)); } .thumb .ph svg { width: 34px; height: 34px; } .thumb .play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(0,0,0,.25); opacity: 0; transition: opacity .2s var(--ease); } .thumb .play span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .thumb .play svg { width: 24px; height: 24px; margin-left: 3px; } .clip:hover .thumb .play { opacity: 1; } @media (hover: none) { .thumb .play { opacity: 1; background: transparent; } .thumb .play span { width: 44px; height: 44px; } } .thumb .dur { z-index: 3; position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: rgba(0,0,0,.7); } .thumb .shared { position: absolute; z-index: 3; left: 8px; top: 8px; } .clip-body { padding: 12px 14px 8px; display: grid; gap: 6px; } .clip-name { font-weight: 600; font-size: 14.5px; } .clip-meta { font-size: 12.5px; color: var(--text-secondary); display: flex; gap: 8px; flex-wrap: wrap; } .clip-tags { display: flex; gap: 5px; flex-wrap: wrap; } .clip-actions { display: flex; gap: 2px; padding: 4px 8px 8px; margin-top: auto; } .clip-actions .spacer { flex: 1; } .list { display: grid; gap: 8px; position: relative; z-index: 1; } .list .clip { flex-direction: row; align-items: center; padding: 8px; gap: 12px; } .list .clip:hover { transform: none; } .list .thumb { width: 128px; flex-shrink: 0; border-radius: 9px; } .list .clip-body { flex: 1; min-width: 0; padding: 0; } .list .clip-actions { padding: 0; margin: 0; } .list .thumb .play { display: none; } .empty { text-align: center; padding: 56px 20px; position: relative; z-index: 1; } .empty .status-icon { width: 76px; height: 76px; } .empty .status-icon svg { width: 34px; height: 34px; } .empty h2 { font-size: 18px; margin-bottom: 6px; } .empty p { color: var(--text-secondary); max-width: 420px; margin: 0 auto 18px; font-size: 14px; } .skeleton { border-radius: var(--radius-md); aspect-ratio: 16 / 12; background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } /* ── Liens ────────────────────────────────────────────────────────────────── */ .link-item { display: grid; gap: 10px; padding: 16px; position: relative; z-index: 1; } .link-item + .link-item { margin-top: 12px; } .link-url { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: var(--radius-sm); background: rgba(0,0,0,.25); border: 1px solid var(--border-glass); font-size: 13.5px; } .link-url span { flex: 1; min-width: 0; color: var(--accent-cyan); } .link-facts { display: flex; gap: 8px 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); align-items: center; } .link-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ── Licence / compte ─────────────────────────────────────────────────────── */ .kv { display: grid; grid-template-columns: 1fr; gap: 0; } .kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-glass); font-size: 14px; } .kv > div:last-child { border-bottom: 0; } .kv dt { color: var(--text-secondary); } .kv dd { text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .hero-license { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } .hero-license .status-icon { margin: 0; } .two-col { display: grid; gap: 16px; grid-template-columns: 1fr; } .two-col > .card + .card { margin-top: 0; } .profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; } .profile-head h2 { font-size: 20px; margin: 0; } /* ── Modales (bottom-sheet sur mobile) ────────────────────────────────────── */ #modal-root { position: relative; z-index: 100; } .overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; background: rgba(4,4,12,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .2s var(--ease); } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .modal { position: relative; width: 100%; max-height: 92vh; max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #101026; border: 1px solid var(--border-glass); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 24px 20px calc(24px + var(--sab)); box-shadow: var(--shadow-glow); animation: sheet .28s cubic-bezier(.22, 1, .36, 1); } @keyframes sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } } .modal h2 { font-size: 19px; margin: 0 40px 6px 0; letter-spacing: -.01em; } .modal .sub { color: var(--text-secondary); font-size: 14px; margin-bottom: 18px; overflow-wrap: anywhere; } .modal .x { position: absolute; right: 10px; top: 10px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; } .modal-actions .btn { flex: 1 1 140px; } .modal.wide { max-width: 100%; padding: 0; background: #05050c; overflow: hidden; } .player-wrap { background: #000; } /* Lecteur : un backdrop-filter sur un ancêtre d'un