/* ========================================================= EDN TV — feuille de style Palette : encre froide + braise rouge + ambre signal Type : Archivo (titres) / Manrope (texte) / JetBrains Mono (données) ========================================================= */ :root{ --ink: #07080B; --ink-2: #0B0D13; --ink-3: #11141C; --glass: rgba(255,255,255,.045); --glass-2: rgba(255,255,255,.08); --edge: rgba(255,255,255,.09); --edge-hot: rgba(255,45,70,.40); --ember: #FF2D46; --ember-soft: #FF6A7C; --ember-deep: #8E0A1D; --signal: #FFB03A; --text: #EEF0F5; --mist: #8F97A8; --mist-dim: #5D6472; --modal-a: rgba(255,255,255,.08); --modal-b: rgba(255,255,255,.03); --modal-shadow: 0 40px 90px -30px rgba(0,0,0,.9); --r-sm: 8px; --r: 14px; --r-lg: 22px; --f-display:'Archivo', system-ui, sans-serif; --f-body:'Manrope', system-ui, sans-serif; --f-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; --f-serif:'Fraunces', Georgia, serif; --topbar-h: 64px; --rail-w: 262px; --ease: cubic-bezier(.2,.8,.2,1); /* la barre du haut et le panneau de catégories restent sombres dans les deux thèmes (chrome du lecteur) : ces jetons ne sont jamais redéfinis par le thème clair, pour ne pas finir avec du texte sombre sur fond sombre. */ --chrome-text: #EEF0F5; --chrome-mist: #8F97A8; --chrome-mist-dim: #5D6472; --chrome-edge: rgba(255,255,255,.09); --chrome-edge-hot: rgba(255,45,70,.40); --chrome-glass: rgba(255,255,255,.045); --chrome-glass-2: rgba(255,255,255,.08); } /* ---------- thème clair (bascule via data-theme sur ) ---------- */ :root[data-theme="light"]{ --ink: #F3F4F7; --ink-2: #FFFFFF; --ink-3: #E9EBF0; --glass: rgba(10,12,20,.035); --glass-2: rgba(10,12,20,.07); --edge: rgba(10,12,20,.11); --edge-hot: rgba(216,20,50,.35); --ember: #D8142E; --ember-soft: #F03A54; --ember-deep: #9E0A20; --signal: #B36600; --text: #14161C; --mist: #545E6E; --mist-dim: #838DA0; --modal-a: rgba(255,255,255,.96); --modal-b: rgba(255,255,255,.88); --modal-shadow: 0 40px 90px -30px rgba(10,12,20,.35); } *,*::before,*::after{ box-sizing:border-box } html,body{ height:100% } body{ margin:0; background:var(--ink); color:var(--text); font-family:var(--f-body); font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; overflow:hidden; } /* halo d'ambiance + trame de balayage */ body::before{ content:''; position:fixed; inset:-6%; z-index:0; pointer-events:none; background: radial-gradient(720px 460px at 12% -8%, rgba(255,45,70,.16), transparent 62%), radial-gradient(620px 420px at 92% 4%, rgba(90,120,255,.10), transparent 60%), radial-gradient(900px 700px at 50% 120%, rgba(255,45,70,.07), transparent 65%); } @media (prefers-reduced-motion: no-preference){ body::before{ animation:bg-drift 24s ease-in-out infinite alternate } } @keyframes bg-drift{ 0%{ transform:translate3d(0,0,0) scale(1) } 100%{ transform:translate3d(-1.5%,2%,0) scale(1.06) } } body::after{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; background:repeating-linear-gradient(to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 3px); mix-blend-mode:overlay; } svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round } svg .fill{ fill:currentColor; stroke:none } input,button,select{ font:inherit; color:inherit } button{ background:none; border:0; cursor:pointer } [hidden]{ display:none !important } ::selection{ background:var(--ember); color:#fff } :focus-visible{ outline:2px solid var(--ember-soft); outline-offset:2px; border-radius:4px } /* ---------- marque ---------- */ .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit } .brand .mark{ width:32px; height:32px; stroke:none; flex:none; filter:drop-shadow(0 3px 14px rgba(255,45,70,.35)) } .wordmark{ font-family:var(--f-display); font-weight:800; font-size:19px; font-stretch:112%; letter-spacing:.02em; line-height:1; } .wordmark em{ font-style:normal; color:var(--ember); margin-left:3px; -webkit-text-stroke:0; text-shadow:0 0 18px rgba(255,45,70,.55); } .brand-lg .mark{ width:52px; height:52px } .brand-lg .wordmark{ font-size:30px } /* ========================================================= Démarrage — évite un flash du formulaire de connexion pendant une reconnexion silencieuse (profil ou accès déjà enregistrés) ========================================================= */ .boot-splash{ display:none; position:fixed; inset:0; z-index:5; background:var(--ink); flex-direction:column; align-items:center; justify-content:center; gap:22px; } html.auto-connecting .boot-splash{ display:flex } html.auto-connecting .gate{ display:none } /* petite animation de bienvenue à l'activation d'un code d'accès, avant de recharger dans l'appli — :not([hidden]) plutôt qu'un display fixe pour ne pas primer sur l'attribut hidden (règle auteur vs règle du navigateur). */ .redeem-splash{ position:fixed; inset:0; z-index:6; background:var(--ink) } .redeem-splash:not([hidden]){ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; animation:redeem-fade .3s var(--ease) both; } .redeem-splash-brand{ animation:redeem-pop .5s var(--ease) both } @keyframes redeem-fade{ from{ opacity:0 } } @keyframes redeem-pop{ from{ opacity:0; transform:scale(.88) } } /* ========================================================= Écran de connexion ========================================================= */ .gate{ position:relative; z-index:1; min-height:100dvh; display:grid; place-content:center; justify-items:center; gap:26px; padding:32px 20px; } .gate-glow{ position:absolute; z-index:-1; width:min(760px,90vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,45,70,.20), transparent 62%); filter:blur(18px); animation:breathe 7s var(--ease) infinite; } @keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.09); opacity:1 } } .gate-card{ width:min(410px,100%); padding:34px 30px 28px; background:linear-gradient(170deg, var(--modal-a), var(--modal-b)); border:1px solid var(--edge); border-radius:var(--r-lg); backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%); box-shadow:var(--modal-shadow), inset 0 1px 0 rgba(255,255,255,.12); animation:rise .6s var(--ease) both; } @keyframes rise{ from{ opacity:0; transform:translateY(16px) } } .gate-sub{ margin:16px 0 24px; color:var(--mist); font-size:14px } .gate-foot{ color:var(--mist-dim); font-size:12.5px; text-align:center; max-width:44ch } .field-stack{ display:grid; gap:14px } .field{ display:grid; gap:6px } .field > span{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); } .field input{ width:100%; padding:11px 13px; background:rgba(0,0,0,.42); border:1px solid var(--edge); border-radius:10px; transition:border-color .18s, box-shadow .18s; } .field input:focus{ outline:none; border-color:var(--edge-hot); box-shadow:0 0 0 3px rgba(255,45,70,.14) } .check{ display:flex; align-items:center; gap:9px; color:var(--mist); font-size:13.5px; cursor:pointer } .check input{ accent-color:var(--ember); width:16px; height:16px } .btn{ display:inline-block; text-align:center; text-decoration:none; padding:12px 18px; border-radius:11px; font-weight:700; font-size:14.5px; transition:transform .12s, filter .18s } .btn:active{ transform:translateY(1px) } .btn-primary{ background:linear-gradient(135deg, var(--ember), var(--ember-deep)); color:#fff; box-shadow:0 12px 30px -12px rgba(255,45,70,.85); } .btn-primary:hover{ filter:brightness(1.09) } .btn-primary[disabled]{ opacity:.55; cursor:progress } .btn-ghost{ border:1px solid var(--edge); color:var(--mist); width:100% } .btn-ghost:hover{ color:var(--text); border-color:var(--edge-hot) } .gate-msg{ min-height:18px; margin:2px 0 0; font-size:13px; color:var(--ember-soft) } .gate-msg.ok{ color:var(--signal) } /* ========================================================= Charpente de l'application ========================================================= */ .app{ position:relative; z-index:1; height:100dvh; display:flex; flex-direction:column } .topbar{ height:var(--topbar-h); flex:none; display:flex; align-items:center; gap:16px; padding:0 18px; border-bottom:1px solid var(--chrome-edge); background:rgba(9,10,14,.72); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); color:var(--chrome-text); } .rail-toggle{ display:none; color:var(--chrome-mist) } .topbar .icon-btn{ color:var(--chrome-mist) } .topbar .icon-btn:hover{ background:var(--chrome-glass); color:var(--chrome-text) } .tabs{ display:flex; gap:4px; padding:4px; border:1px solid var(--chrome-edge); border-radius:12px; background:rgba(0,0,0,.3) } .tab{ padding:7px 15px; border-radius:9px; color:var(--chrome-mist); font-weight:600; font-size:13.5px; transition:color .18s, background .18s; } .tab:hover{ color:var(--chrome-text) } .tab.is-on{ color:#fff; background:linear-gradient(135deg, var(--ember), var(--ember-deep)); box-shadow:0 8px 22px -12px rgba(255,45,70,.9) } .search{ position:relative; display:flex; align-items:center; width:min(220px,20vw); flex:none } .search svg{ position:absolute; left:11px; width:17px; color:var(--chrome-mist-dim) } .search input{ width:100%; padding:9px 40px 9px 36px; border-radius:11px; color:var(--chrome-text); background:rgba(0,0,0,.4); border:1px solid var(--chrome-edge); transition:border-color .18s, box-shadow .18s; } .search input:focus{ outline:none; border-color:var(--chrome-edge-hot); box-shadow:0 0 0 3px rgba(255,45,70,.12) } .search kbd{ position:absolute; right:9px; font-family:var(--f-mono); font-size:11px; color:var(--chrome-mist-dim); border:1px solid var(--chrome-edge); border-radius:5px; padding:1px 6px; } .search input:focus ~ kbd{ opacity:0 } .acct{ display:flex; align-items:center; gap:7px; padding:8px 13px; border:1px solid var(--chrome-edge); border-radius:11px; color:var(--chrome-mist); font-size:13px; font-weight:600; flex:none } .acct:hover{ color:var(--chrome-text); border-color:var(--chrome-edge-hot) } .acct svg{ width:17px; height:17px } /* ---------- bandeau d'état (profil / serveur / synchro / compteurs), tassé à droite de la barre du haut, juste avant Paramètres ---------- */ .info-band{ flex:none; min-width:0; max-width:56%; display:flex; align-items:center; gap:16px; margin-left:auto; padding:0 4px; overflow:hidden; font-size:12px; line-height:1; color:var(--chrome-mist); white-space:nowrap; } .info-chip{ display:flex; align-items:center; gap:6px; line-height:1; white-space:nowrap; flex:none } .info-chip > *{ line-height:1 } .info-profile .avatar{ width:20px; height:20px; border-radius:6px } .info-profile #info-profile-name{ color:var(--chrome-text); font-weight:600 } .info-label{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--chrome-mist-dim) } .info-dot{ width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 8px var(--signal); flex:none } .info-dot.bad{ background:var(--ember); box-shadow:0 0 8px var(--ember) } .info-stats{ display:flex; align-items:center; gap:14px; flex:none } .info-stat{ display:flex; align-items:center; gap:5px; line-height:1; white-space:nowrap } .info-stat b{ font-family:var(--f-mono); font-size:13px; color:var(--chrome-text); font-weight:600 } .info-stat.info-new b{ color:var(--signal) } @media (max-width:1180px){ .info-stats{ display:none } } @media (max-width:980px){ .info-band{ display:none } } .layout{ flex:1; display:flex; min-height:0 } /* ---------- rail des catégories ---------- */ .rail{ width:var(--rail-w); flex:none; display:flex; flex-direction:column; border-right:1px solid var(--chrome-edge); background:rgba(8,9,13,.5); color:var(--chrome-text); } .rail-head{ padding:14px 14px 10px } .rail-head input{ width:100%; padding:8px 12px; border-radius:9px; font-size:13px; color:var(--chrome-text); background:rgba(0,0,0,.4); border:1px solid var(--chrome-edge); } .rail-head input:focus{ outline:none; border-color:var(--chrome-edge-hot) } .rail-list{ flex:1; overflow-y:auto; padding:0 10px 20px; display:flex; flex-direction:column; gap:1px } .cat{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 11px; border-radius:9px; color:var(--chrome-mist); font-size:13.5px; transition:background .16s, color .16s; } .cat:hover{ background:var(--chrome-glass); color:var(--chrome-text) } .cat.is-on{ background:var(--chrome-glass-2); color:#fff; font-weight:600 } .cat.is-on::before{ content:''; width:3px; height:15px; border-radius:2px; background:var(--ember); margin-left:-6px; box-shadow:0 0 10px var(--ember) } .cat-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .cat-n{ font-family:var(--f-mono); font-size:10.5px; color:var(--chrome-mist-dim) } .rail-sep{ margin:12px 4px 6px; font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--chrome-mist-dim) } /* ---------- scène ---------- */ .stage{ flex:1; min-width:0; overflow-y:auto; padding:24px 26px 60px; scroll-behavior:smooth } .stage-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px } .eyebrow{ margin:0 0 5px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ember); } .stage-title{ margin:0; font-family:var(--f-display); font-weight:800; font-stretch:112%; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.01em; line-height:1.1; } .counter{ margin:0; font-family:var(--f-mono); font-size:12px; color:var(--mist-dim); white-space:nowrap } /* ---------- page d'accueil : rangées de vignettes défilantes ---------- */ .home-view{ position:relative; display:flex; flex-direction:column; gap:32px } .home-view::before{ content:''; position:absolute; z-index:-1; pointer-events:none; top:-120px; left:50%; transform:translateX(-50%); width:min(980px,92%); height:460px; background:radial-gradient(circle, rgba(255,45,70,.30), rgba(255,45,70,.08) 45%, transparent 72%); filter:blur(20px); animation:home-glow 8s var(--ease) infinite; } @keyframes home-glow{ 0%,100%{ opacity:.85; transform:translateX(-50%) scale(1) } 50%{ opacity:1; transform:translateX(-50%) scale(1.05) } } /* ---------- hero : mise en avant en tête de l'accueil ---------- */ .hero{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:340px; display:flex; align-items:flex-end; border:1px solid var(--edge); background:linear-gradient(160deg,#151922,#0A0C11); } .hero-skel{ background:linear-gradient(100deg,#12151D 30%,#1B202B 50%,#12151D 70%); background-size:220% 100%; animation:shim 1.3s linear infinite; } .hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center 20%; transform:scale(1.02); animation:img-fade .5s ease both; } .hero-scrim{ position:absolute; inset:0; background: linear-gradient(to top, #05060a 6%, rgba(5,6,10,.45) 48%, transparent 78%), linear-gradient(to right, rgba(5,6,10,.65) 0%, transparent 60%); } .hero-content{ position:relative; z-index:1; padding:34px; max-width:580px } .hero-kicker{ margin:0 0 8px; font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--signal) } .hero-title{ margin:0 0 10px; font-family:var(--f-display); font-weight:800; font-stretch:112%; font-size:clamp(24px,3.4vw,38px); line-height:1.06; color:#fff; text-shadow:0 2px 22px rgba(0,0,0,.6); } .hero-meta{ margin:0 0 12px; font-family:var(--f-mono); font-size:12.5px; color:rgba(255,255,255,.75) } .hero-plot{ margin:0 0 20px; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.85); max-width:50ch; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; animation:img-fade .4s ease both; } .hero-actions{ display:flex; gap:10px } .hero-actions .btn{ width:auto; padding:11px 24px } @media (max-width:640px){ .hero{ min-height:280px } .hero-content{ padding:20px; max-width:100% } } .hsection-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px } .hsection-head h2{ margin:0; font-family:var(--f-display); font-weight:800; font-size:17px } .hsection-head p{ margin:0; font-size:12px; color:var(--mist-dim) } .hrow{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity } .hrow::-webkit-scrollbar{ height:7px } .hrow::-webkit-scrollbar-thumb{ background:var(--edge); border-radius:8px } .hcard{ flex:0 0 152px; scroll-snap-align:start; position:relative } .hcard-open{ display:block; width:100%; text-align:left; cursor:pointer } .hcard-thumb{ position:relative; aspect-ratio:2/3; border-radius:var(--r); overflow:hidden; border:1px solid var(--edge); background:linear-gradient(160deg,#151922,#0A0C11); display:grid; place-items:center; transition:border-color .2s, transform .2s var(--ease); } .hcard-open:hover .hcard-thumb, .hcard-open:focus-visible .hcard-thumb{ border-color:var(--edge-hot); transform:translateY(-3px) } .hcard-thumb img{ width:100%; height:100%; object-fit:cover; display:block; animation:img-fade .4s ease both } .hcard-thumb img[hidden]{ display:none } .hcard-initials{ font-family:var(--f-display); font-weight:800; font-size:24px; color:rgba(255,255,255,.16) } .hcard-thumb img:not([hidden]) ~ .hcard-initials{ display:none } .hcard-progress{ position:absolute; left:6px; right:6px; bottom:6px; height:3px; border-radius:3px; background:rgba(0,0,0,.55); overflow:hidden } .hcard-progress i{ display:block; height:100%; background:linear-gradient(90deg, var(--ember), var(--signal)) } .hcard-title{ margin:8px 2px 0; font-size:13px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } .hcard-sub{ margin:2px 2px 0; font-size:11.5px; color:var(--mist-dim) } .hcard-del{ position:absolute; top:7px; right:7px; width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:rgba(6,7,10,.72); color:rgba(255,255,255,.7); opacity:0; transition:.16s; backdrop-filter:blur(6px); } .hcard:hover .hcard-del, .hcard:focus-within .hcard-del{ opacity:1 } .hcard-del:hover{ color:var(--ember-soft) } .hcard-soon .hcard-thumb{ filter:grayscale(.2) brightness(.9) } .hcard-badge{ position:absolute; left:6px; top:6px; padding:3px 8px; border-radius:6px; background:rgba(6,7,10,.78); color:var(--signal); font-family:var(--f-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(6px); } .hcard-more .hcard-thumb{ background:var(--glass); border:1px dashed var(--edge); place-items:center; color:var(--mist); } .hcard-more .hcard-thumb svg{ width:26px; height:26px; transition:transform .18s, color .18s } .hcard-more .hcard-open:hover .hcard-thumb{ border-color:var(--edge-hot); background:var(--glass-2) } .hcard-more .hcard-open:hover .hcard-thumb svg{ transform:translateX(3px); color:var(--ember) } .hcard-more .hcard-title{ color:var(--mist) } .home-empty{ color:var(--mist-dim); font-size:13.5px; padding:8px 2px } .grid{ display:grid; gap:18px 14px; grid-template-columns:repeat(auto-fill, minmax(168px,1fr)); } .grid.is-live{ grid-template-columns:repeat(auto-fill, minmax(186px,1fr)) } /* ---------- vignettes ---------- */ .card{ position:relative; cursor:pointer; animation:pop .34s var(--ease) both } @keyframes pop{ from{ opacity:0; transform:translateY(10px) } } .thumb{ position:relative; overflow:hidden; border-radius:var(--r); border:1px solid var(--edge); background:linear-gradient(160deg,#151922,#0A0C11); aspect-ratio:2/3; display:grid; place-items:center; transition:border-color .22s, transform .22s var(--ease), box-shadow .22s; } .grid.is-live .thumb{ aspect-ratio:16/10 } .card:hover .thumb, .card:focus-visible .thumb{ transform:translateY(-4px); border-color:var(--edge-hot); box-shadow:0 22px 44px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(255,45,70,.14); } .thumb img{ width:100%; height:100%; object-fit:cover; display:block; animation:img-fade .4s ease both } @keyframes img-fade{ from{ opacity:0 } to{ opacity:1 } } .grid.is-live .thumb img{ object-fit:contain; padding:14px } .thumb img.off{ display:none } .initials{ font-family:var(--f-display); font-weight:800; font-stretch:120%; font-size:26px; color:rgba(255,255,255,.16); letter-spacing:.04em; } .thumb img:not(.off) + .initials{ display:none } /* signature : balayage de faisceau au survol */ .sweep{ position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(105deg, transparent 38%, rgba(255,45,70,.22) 50%, transparent 62%); transform:translateX(-110%); } .card:hover .sweep, .card:focus-visible .sweep{ opacity:1; animation:sweep .85s var(--ease) } @keyframes sweep{ to{ transform:translateX(110%) } } .star{ position:absolute; top:7px; right:7px; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:rgba(6,7,10,.66); color:rgba(255,255,255,.55); opacity:0; transform:scale(.85); transition:.18s; backdrop-filter:blur(6px); } .card:hover .star, .card:focus-within .star, .star.on{ opacity:1; transform:none } .star:hover{ color:var(--signal) } .star.on{ color:var(--signal) } .star.on svg{ fill:var(--signal) } .star svg{ width:16px } .tally{ position:absolute; top:7px; left:7px; display:flex; align-items:center; gap:5px; padding:3px 8px 3px 6px; border-radius:6px; background:rgba(6,7,10,.72); font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; color:#fff; backdrop-filter:blur(6px); } .tally i{ width:6px; height:6px; border-radius:50%; background:var(--ember); animation:tally 1.9s ease-in-out infinite } @keyframes tally{ 0%,100%{ opacity:1; box-shadow:0 0 9px var(--ember) } 50%{ opacity:.32; box-shadow:none } } .card-title{ margin:9px 2px 0; font-size:13.5px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .card-meta{ margin:3px 2px 0; font-size:12px; color:var(--mist-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* signature : trace d'avancement du programme en cours */ .card-bar{ margin:6px 2px 0; height:2px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden } .card-bar i{ display:block; height:100%; background:linear-gradient(90deg, var(--ember), var(--signal)); box-shadow:0 0 8px rgba(255,45,70,.7) } .sentinel{ height:40px } .empty{ padding:70px 10px; text-align:center; color:var(--mist) } .empty b{ display:block; font-family:var(--f-display); font-weight:700; font-size:18px; color:var(--text); margin-bottom:6px } .skel{ border-radius:var(--r); background:linear-gradient(100deg,#12151D 30%,#1B202B 50%,#12151D 70%); background-size:220% 100%; animation:shim 1.3s linear infinite; aspect-ratio:2/3 } .grid.is-live .skel{ aspect-ratio:16/10 } .skel-line{ aspect-ratio:auto; height:11px; width:70%; margin-top:8px; border-radius:4px } @keyframes shim{ to{ background-position:-220% 0 } } /* ========================================================= Panneau compte ========================================================= */ .sheet{ position:fixed; inset:0; z-index:60; background:rgba(4,5,8,.62); backdrop-filter:blur(6px); display:grid; place-items:center; padding:20px } .sheet-card{ width:min(400px,100%); padding:24px; border-radius:var(--r-lg); background:linear-gradient(170deg, var(--modal-a), var(--modal-b)); border:1px solid var(--edge); backdrop-filter:blur(24px); box-shadow:var(--modal-shadow); animation:rise .3s var(--ease) both; } .sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px } .sheet-head h2{ margin:0; font-family:var(--f-display); font-weight:800; font-size:19px } .icon-btn{ display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--mist); position:relative; transition:.16s } .icon-btn:hover{ background:var(--glass); color:var(--text) } .icon-btn:disabled{ opacity:.32; cursor:not-allowed; pointer-events:none } .icon-btn b{ position:absolute; font-family:var(--f-mono); font-size:8px; font-weight:600; bottom:9px; left:50%; transform:translateX(-50%) } .meta-list{ margin:0 0 18px; display:grid; grid-template-columns:auto 1fr; gap:9px 14px; font-size:13.5px } .meta-list dt{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mist-dim); align-self:center } .meta-list dd{ margin:0; text-align:right; font-weight:600 } .sheet-opts{ display:grid; gap:11px; padding:14px 0; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge); margin-bottom:18px } /* ========================================================= Lecteur ========================================================= */ .viewer{ position:fixed; inset:0; z-index:80; display:flex; flex-direction:column; background:radial-gradient(1000px 640px at 50% 0%, #0E1017, #05060A 72%); animation:fadein .28s var(--ease) both; } @keyframes fadein{ from{ opacity:0 } } .viewer-top{ flex:none; display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--edge) } .viewer-kicker{ margin:0; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember) } .viewer-title{ margin:1px 0 0; font-family:var(--f-display); font-weight:700; font-stretch:108%; font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .viewer-id{ min-width:0 } .viewer-body{ flex:1; display:flex; min-height:0 } .screen{ position:relative; flex:1; min-width:0; background:#000; display:grid; place-items:center } .screen video{ width:100%; height:100%; object-fit:contain; background:#000; display:block } .screen.fit-cover video{ object-fit:cover } .screen.fit-fill video{ object-fit:fill } .screen.fit-169 video{ aspect-ratio:16/9; height:auto; max-height:100% } .screen.fit-43 video{ aspect-ratio:4/3; height:auto; max-height:100% } .screen-veil{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; background:rgba(4,5,8,.74); color:var(--mist); font-size:13.5px; text-align:center; padding:24px } .screen-veil p{ max-width:44ch; margin:0 } .screen-veil .btn-ghost{ width:auto; padding:9px 22px } .spin{ width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.14); border-top-color:var(--ember); animation:spin .8s linear infinite } @keyframes spin{ to{ transform:rotate(360deg) } } /* pupitre de commandes */ .deck{ position:absolute; left:0; right:0; bottom:0; padding:34px 16px 12px; background:linear-gradient(to top, rgba(4,5,8,.94), rgba(4,5,8,.55) 55%, transparent); transition:opacity .25s, transform .25s; } .screen.idle .deck{ opacity:0; transform:translateY(8px); pointer-events:none } .screen.idle{ cursor:none } .deck-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap } .deck-spacer{ flex:1 } .deck-track{ margin-bottom:6px } .deck-time{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:11px; color:var(--mist); margin-top:2px } input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:16px; background:none; cursor:pointer } input[type=range]::-webkit-slider-runnable-track{ height:4px; border-radius:3px; background:rgba(255,255,255,.18) } input[type=range]::-moz-range-track{ height:4px; border-radius:3px; background:rgba(255,255,255,.18) } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; margin-top:-4.5px; border-radius:50%; background:var(--ember); box-shadow:0 0 12px rgba(255,45,70,.9) } input[type=range]::-moz-range-thumb{ width:13px; height:13px; border:0; border-radius:50%; background:var(--ember) } .vol{ display:flex; align-items:center; gap:2px } .vol input{ width:0; opacity:0; transition:width .22s var(--ease), opacity .22s } .vol:hover input, .vol input:focus{ width:78px; opacity:1 } .live-pill{ display:flex; align-items:center; gap:6px; margin-left:6px; padding:4px 9px; border-radius:7px; border:1px solid var(--edge-hot); font-family:var(--f-mono); font-size:10px; letter-spacing:.12em } .live-pill i{ width:6px; height:6px; border-radius:50%; background:var(--ember); animation:tally 1.9s ease-in-out infinite } .pill-btn{ display:flex; align-items:center; gap:6px; padding:7px 11px; border-radius:9px; border:1px solid var(--edge); font-size:12.5px; color:var(--mist); transition:.16s } .pill-btn:hover{ color:var(--text); border-color:var(--edge-hot); background:var(--glass) } .pill-btn em{ font-style:normal; font-family:var(--f-mono); font-size:11px; color:var(--ember-soft) } .menu{ position:absolute; right:16px; bottom:76px; min-width:186px; max-height:52vh; overflow-y:auto; padding:6px; border-radius:var(--r); border:1px solid var(--edge); background:rgba(10,12,17,.94); backdrop-filter:blur(20px); box-shadow:0 26px 60px -22px rgba(0,0,0,.95); animation:rise .18s var(--ease) both; } .menu button{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:8px 11px; border-radius:9px; font-size:13px; color:var(--mist); text-align:left } .menu button:hover{ background:var(--glass); color:var(--text) } .menu button.on{ color:#fff; font-weight:600 } .menu button.on::after{ content:'●'; color:var(--ember); font-size:8px } .menu-head{ padding:7px 11px 4px; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist-dim) } /* panneau latéral du lecteur (EPG / épisodes / fiche) */ .side{ width:340px; flex:none; overflow-y:auto; padding:18px; border-left:1px solid var(--edge); background:rgba(8,9,13,.55) } .side:empty{ display:none } .side h3{ margin:0 0 4px; font-family:var(--f-display); font-weight:700; font-size:15px } .side-sec{ margin-bottom:22px } .side-lbl{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); margin:0 0 9px } .side p{ margin:0 0 8px; font-size:13.5px; color:var(--mist); line-height:1.55 } .epg-item{ padding:11px 0; border-bottom:1px solid var(--edge) } .epg-item:last-child{ border:0 } .epg-time{ font-family:var(--f-mono); font-size:11px; color:var(--mist-dim) } .epg-item.now .epg-time{ color:var(--ember) } .epg-name{ margin:2px 0 0; font-size:13.5px; font-weight:600 } .epg-item.now .epg-name{ color:#fff } .epg-desc{ margin:5px 0 0; font-size:12.5px; color:var(--mist-dim); line-height:1.5 } .epg-bar{ margin-top:8px; height:2px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden } .epg-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--ember),var(--signal)) } .season-tabs{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px } .season-tabs button{ padding:5px 11px; border-radius:8px; border:1px solid var(--edge); font-size:12.5px; color:var(--mist) } .season-tabs button.on{ background:var(--ember); border-color:transparent; color:#fff; font-weight:600 } .ep{ display:flex; gap:11px; width:100%; text-align:left; padding:9px; border-radius:11px; transition:background .16s } .ep:hover{ background:var(--glass) } .ep.on{ background:var(--glass-2) } .ep-n{ font-family:var(--f-mono); font-size:12px; color:var(--ember); flex:none; padding-top:1px; width:26px } .ep-t{ font-size:13px; font-weight:600; margin:0 } .ep-d{ font-size:12px; color:var(--mist-dim); margin:2px 0 0; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } .tagrow{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0 } .tag{ padding:3px 9px; border-radius:6px; border:1px solid var(--edge); font-family:var(--f-mono); font-size:10.5px; color:var(--mist); letter-spacing:.05em } .tag.hot{ color:var(--signal); border-color:rgba(255,176,58,.4) } .side-poster{ width:100%; border-radius:var(--r); border:1px solid var(--edge); margin-bottom:14px; display:block } /* ---------- fiche avant lecture (films / séries) ---------- */ .detail-card{ width:min(760px,100%); max-height:88vh; overflow-y:auto } .detail-body{ display:flex; gap:20px } .detail-poster{ width:150px; flex:none; aspect-ratio:2/3; border-radius:var(--r); overflow:hidden; background:var(--glass); display:grid; place-items:center; border:1px solid var(--edge); } .detail-poster img{ width:100%; height:100%; object-fit:cover; display:block; animation:img-fade .4s ease both } .detail-poster .initials{ font-family:var(--f-display); font-weight:800; font-size:34px; color:var(--mist-dim) } .detail-poster img:not([hidden]) ~ .initials{ display:none } .detail-info{ flex:1; min-width:0 } .detail-actions{ display:flex; gap:10px; margin:14px 0 4px; flex-wrap:wrap } .detail-actions .btn{ width:auto; padding:10px 20px } .detail-plot{ margin:14px 0 8px; font-size:13.5px; color:var(--mist); line-height:1.6 } .detail-credit{ margin:0 0 4px; font-size:13px; color:var(--mist) } .detail-credit b{ color:var(--mist) } .detail-seasons{ margin-top:22px; padding-top:18px; border-top:1px solid var(--edge) } .pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:12px; font-family:var(--f-mono); font-size:12.5px; color:var(--mist) } .pager button{ padding:6px 12px; border-radius:8px; border:1px solid var(--edge); color:var(--mist) } .pager button:hover:not(:disabled){ color:var(--text); border-color:var(--edge-hot) } .pager button:disabled{ opacity:.35; cursor:default } .trailer-card{ width:min(820px,100%) } .trailer-frame{ position:relative; padding-top:56.25%; border-radius:var(--r); overflow:hidden; background:#000 } .trailer-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 } @media (max-width:640px){ .detail-body{ flex-direction:column } .detail-poster{ width:120px; margin:0 auto } } /* ========================================================= Relief 3D des jaquettes (films / séries uniquement) ========================================================= */ .grid:not(.is-live) .card{ perspective:900px } .grid:not(.is-live) .thumb{ transform:translateY(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s var(--ease), border-color .22s, box-shadow .22s; } .grid:not(.is-live) .thumb.tilting{ transition:transform .08s linear, border-color .22s, box-shadow .22s } .grid:not(.is-live) .card:hover .thumb, .grid:not(.is-live) .card:focus-visible .thumb{ transform:translateY(-6px) scale(1.03) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); box-shadow:0 30px 58px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(255,45,70,.16); } .gloss{ position:absolute; inset:0; pointer-events:none; opacity:0; border-radius:inherit; background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.30), transparent 55%); mix-blend-mode:overlay; transition:opacity .3s; } .thumb.tilting .gloss{ opacity:1 } /* ========================================================= Écran de connexion — options complémentaires (compte, QR) ========================================================= */ .gate-alt{ display:flex; align-items:center; gap:10px; margin:18px 0 14px; color:var(--mist-dim); font-size:12px } .gate-alt::before, .gate-alt::after{ content:''; flex:1; height:1px; background:var(--edge) } #gate-account{ display:block; text-align:center; text-decoration:none; margin-bottom:10px } #gate-qr{ margin-top:0 } .gate-foot a{ color:var(--mist); margin-left:6px } .account-line{ margin:0 0 12px; font-size:12.5px; color:var(--mist-dim); text-align:center } .oauth-row{ display:grid; gap:10px; margin-bottom:0 } .oauth-btn{ display:block; text-align:center; text-decoration:none } .field > span.field-hint{ font-family:var(--f-body); font-size:11.5px; text-transform:none; letter-spacing:0; color:var(--mist-dim) } .field > span.field-hint.error{ color:var(--ember-soft) } .field input.error{ border-color:var(--ember-soft) } .verify-box{ text-align:center } .verify-box p{ color:var(--mist); font-size:13.5px; line-height:1.6; margin:0 0 14px } .verify-box .btn-ghost{ display:block; text-decoration:none; margin-bottom:10px } .qr-card{ text-align:center } .qr-hint{ margin:0 0 16px; color:var(--mist); font-size:13px; line-height:1.5 } .qr-box{ display:grid; place-items:center; min-height:220px; background:#fff; border-radius:var(--r); padding:14px; margin:0 auto 12px; width:220px } .qr-box canvas{ display:block; border-radius:6px } .qr-code{ font-family:var(--f-mono); font-size:20px; letter-spacing:.2em; margin:0 0 6px; color:var(--text) } .qr-status{ margin:0; font-size:12.5px; color:var(--signal) } /* ========================================================= Avatars de profil ========================================================= */ .avatar{ display:inline-grid; place-items:center; width:64px; height:64px; border-radius:22%; overflow:hidden; flex:none } .avatar svg{ width:100%; height:100%; display:block } .avatar .av-shape{ fill:rgba(255,255,255,.94) } .avatar .av-eye{ fill:rgba(10,12,18,.82) } /* ========================================================= « Qui regarde ? » ========================================================= */ .who{ position:relative; z-index:1; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:36px; padding:40px 20px } .who-head{ text-align:center } .who-eyebrow{ margin:0 0 8px; font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ember) } .who-title{ margin:0; font-family:var(--f-display); font-weight:800; font-stretch:112%; font-size:clamp(26px,4vw,38px) } .who-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; max-width:900px } .who-loading{ display:grid; place-items:center; padding:40px; width:100% } .who-tile{ display:flex; flex-direction:column; align-items:center; gap:12px; cursor:pointer; width:132px } .who-tile .avatar{ width:112px; height:112px; border:2px solid transparent; transition:transform .18s var(--ease), border-color .18s, box-shadow .18s; position:relative } .who-tile:hover .avatar, .who-tile:focus-visible .avatar{ transform:translateY(-4px) scale(1.03); border-color:var(--edge-hot); box-shadow:0 22px 44px -20px rgba(0,0,0,.7) } .who-tile-name{ font-size:14px; font-weight:600; color:var(--mist); text-align:center; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .who-tile:hover .who-tile-name, .who-tile:focus-visible .who-tile-name{ color:var(--text) } .who-tile.add .avatar{ display:grid; place-items:center; background:var(--glass); border:2px dashed var(--edge) } .who-tile.add .avatar svg{ display:none } .who-tile.add .avatar::before{ content:'+'; font-size:44px; font-weight:300; color:var(--mist) } .who-tile.edit .avatar::after{ content:''; position:absolute; inset:0; border-radius:22%; background:rgba(4,5,8,.55); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16.5 3.5 4 4L8 20H4v-4L16.5 3.5Z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:30px; } .who-actions{ display:flex; gap:12px } .who-actions .btn{ text-decoration:none } /* fiche profil (création / édition) */ .prof-sheet .sheet-card{ width:min(440px,100%) } .prof-avatar-picker{ display:grid; place-items:center; margin-bottom:18px } .prof-avatar-picker .avatar{ width:88px; height:88px } .prof-swatches{ display:grid; grid-template-columns:repeat(8,1fr); gap:8px; margin:14px 0 18px } .prof-swatches button{ width:100%; aspect-ratio:1; border-radius:50%; border:2px solid transparent; padding:2px; transition:.15s; background:linear-gradient(155deg, var(--sw-a), var(--sw-b)); } .prof-swatches button.on{ border-color:var(--text); transform:scale(1.08) } .prof-shapes{ display:grid; grid-template-columns:repeat(8,1fr); gap:8px; margin:0 0 20px } .prof-shapes button{ width:100%; aspect-ratio:1; border-radius:10px; border:2px solid var(--edge); background:var(--glass); display:grid; place-items:center; transition:.15s } .prof-shapes button svg{ width:70%; height:70% } .prof-shapes button.on{ border-color:var(--ember); background:var(--glass-2) } .prof-danger{ margin-top:6px; color:var(--ember-soft); background:none; border:1px solid var(--edge); width:100%; padding:10px; border-radius:11px; font-size:13px; font-weight:600 } .prof-danger:hover{ border-color:var(--ember); background:rgba(255,45,70,.08) } .prof-xtream-toggle{ font-size:13px; color:var(--mist); text-decoration:underline; text-underline-offset:2px; margin:2px 0 14px; display:inline-block } .prof-xtream-box{ margin-bottom:16px } /* ========================================================= Réglages (onglets) ========================================================= */ .settings{ position:fixed; inset:0; z-index:60; background:rgba(4,5,8,.62); backdrop-filter:blur(6px); display:grid; place-items:center; padding:20px } .settings-card{ width:min(720px,100%); max-height:min(600px,88vh); display:flex; overflow:hidden; border-radius:var(--r-lg); background:linear-gradient(170deg, var(--modal-a), var(--modal-b)); backdrop-filter:blur(24px); border:1px solid var(--edge); box-shadow:var(--modal-shadow); animation:rise .3s var(--ease) both; } .settings-nav{ width:180px; flex:none; border-right:1px solid var(--edge); padding:18px 10px; display:flex; flex-direction:column; gap:2px } .settings-nav h2{ margin:2px 8px 14px; font-family:var(--f-display); font-weight:800; font-size:17px } .settings-nav button{ text-align:left; padding:9px 11px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--mist) } .settings-nav button:hover{ background:var(--glass); color:var(--text) } .settings-nav button.on{ background:var(--glass-2); color:var(--text) } .settings-body{ flex:1; min-width:0; display:flex; flex-direction:column } .settings-top{ display:flex; align-items:center; justify-content:flex-end; padding:14px 18px; border-bottom:1px solid var(--edge) } .settings-pane{ flex:1; overflow-y:auto; padding:6px 26px 28px } .settings-eyebrow{ margin:0 0 6px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember) } .settings-pane h3{ margin:0 0 8px; font-family:var(--f-display); font-weight:800; font-size:21px } .settings-pane > p.hint{ margin:0 0 20px; color:var(--mist); font-size:13.5px; line-height:1.6; max-width:46ch } .settings-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--edge) } .settings-row:first-of-type{ border-top:0 } .settings-row-text{ flex:1; min-width:0 } .settings-row-text p{ margin:0; font-size:13.5px } .settings-row-text p.sub{ margin-top:2px; color:var(--mist-dim); font-size:12px } .settings-row .btn{ flex:none; width:auto; padding:8px 14px; font-size:13px; white-space:nowrap } /* ---------- gestion des catégories affichées (réglages) ---------- */ .cat-manage-tabs{ display:flex; gap:6px } .cat-manage-tabs button{ padding:6px 13px; border-radius:9px; border:1px solid var(--edge); color:var(--mist); font-size:12.5px; font-weight:600 } .cat-manage-tabs button.on{ background:var(--ember); border-color:transparent; color:#fff } .cat-manage-list{ max-height:320px; overflow-y:auto; border:1px solid var(--edge); border-radius:var(--r); padding:4px } .cat-manage-row{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; font-size:13.5px } .cat-manage-row:hover{ background:var(--glass) } .cat-manage-row input{ accent-color:var(--ember); width:16px; height:16px; flex:none } .cat-manage-row span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } /* ========================================================= Adaptations petits écrans ========================================================= */ @media (max-width:1080px){ .side{ width:290px } } @media (max-width:860px){ .rail-toggle{ display:grid; place-items:center; width:36px; height:36px; border-radius:10px } .rail{ position:fixed; top:var(--topbar-h); bottom:0; left:0; z-index:50; width:280px; transform:translateX(-102%); transition:transform .26s var(--ease); background:rgba(8,9,13,.97); backdrop-filter:blur(20px); } .rail.open{ transform:none } .rail-scrim{ position:fixed; inset:var(--topbar-h) 0 0; z-index:49; background:rgba(4,5,8,.6) } .brand .wordmark{ display:none } .search{ width:auto; flex:1 } .search kbd{ display:none } .acct-label{ display:none } .acct{ padding:8px 10px } .stage{ padding:18px 16px 60px } .grid{ grid-template-columns:repeat(auto-fill, minmax(128px,1fr)); gap:14px 10px } .grid.is-live{ grid-template-columns:repeat(auto-fill, minmax(140px,1fr)) } .viewer-body{ flex-direction:column } .screen{ flex:none; aspect-ratio:16/9; width:100% } .side{ width:auto; border-left:0; border-top:1px solid var(--edge); flex:1 } .deck{ padding:26px 10px 8px } .pill-btn{ padding:6px 9px; font-size:11.5px } .settings-card{ flex-direction:column; max-height:92vh } .settings-nav{ width:auto; flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--edge); padding:10px } .settings-nav h2{ display:none } .settings-nav button{ flex:none; white-space:nowrap } .who-tile{ width:104px } .who-tile .avatar{ width:90px; height:90px } } @media (max-width:560px){ .tabs{ order:3; width:100%; } .topbar{ height:auto; flex-wrap:wrap; padding:10px 14px; gap:10px } .app{ --topbar-h:116px } #c-pip{ display:none } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important } } /* ========================================================= Page d'accueil ========================================================= */ html.landing, html.landing body{ height:auto; min-height:100%; overflow:visible } body.landing{ overflow-x:hidden } .l-nav{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:24px; padding:16px clamp(20px,4vw,56px); border-bottom:1px solid var(--edge); background:rgba(7,8,11,.7); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } .l-links{ display:flex; gap:22px; margin-right:auto; margin-left:32px } .l-links a{ color:var(--mist); text-decoration:none; font-size:14px; font-weight:600; transition:color .18s } .l-links a:hover{ color:var(--text) } .l-cta{ display:flex; align-items:center; gap:10px } .l-cta .btn{ padding:9px 16px; font-size:13.5px; white-space:nowrap } .l-hero{ position:relative; z-index:1; padding:clamp(56px,9vw,110px) clamp(20px,6vw,56px) 40px; max-width:1180px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; } .l-hero-glow{ position:absolute; z-index:-1; top:-120px; left:50%; transform:translateX(-50%); width:min(900px,110vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,45,70,.22), transparent 65%); filter:blur(20px); animation:breathe 8s var(--ease) infinite; } .l-kicker{ display:inline-block; margin:0 0 20px; padding:6px 14px; border:1px solid var(--edge); border-radius:99px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em; color:var(--signal); background:rgba(255,176,58,.08); } .l-h1{ margin:0 0 20px; font-family:var(--f-display); font-weight:800; font-stretch:112%; font-size:clamp(34px,6vw,64px); line-height:1.05; letter-spacing:-.015em; max-width:16ch; } .l-h1 em{ font-style:italic; font-family:var(--f-serif); font-weight:500; color:var(--ember-soft); } .l-sub{ max-width:56ch; margin:0 0 30px; color:var(--mist); font-size:clamp(14.5px,1.6vw,17px); line-height:1.65 } .l-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:16px } .btn-lg{ padding:14px 26px; font-size:15.5px; text-decoration:none } .l-alt-link{ display:inline-block; margin-bottom:56px; color:var(--mist-dim); font-size:13px; text-decoration:underline; text-underline-offset:3px; transition:color .18s; } .l-alt-link:hover{ color:var(--mist) } .l-price{ display:inline-flex; align-items:center; gap:6px; margin:0 0 56px; padding:9px 18px; border:1px solid var(--edge); border-radius:999px; background:var(--glass); font-size:13.5px; color:var(--mist); } .l-price b{ color:var(--text); font-weight:700 } .l-price a{ color:var(--ember-soft); text-decoration:none; font-weight:600 } .l-price a:hover{ text-decoration:underline } /* maquette de l'application dans le hero */ .l-mock{ width:min(980px,100%); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--edge); background:linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); box-shadow:0 60px 120px -40px rgba(0,0,0,.9); backdrop-filter:blur(10px); } .l-mock-bar{ display:flex; gap:6px; padding:12px 14px; border-bottom:1px solid var(--edge) } .l-mock-bar i{ width:10px; height:10px; border-radius:50%; background:var(--edge) } .l-mock-bar i:first-child{ background:#FF5F57 } .l-mock-bar i:nth-child(2){ background:#FEBC2E } .l-mock-bar i:nth-child(3){ background:#28C840 } .l-mock-body{ display:flex; min-height:280px } .l-mock-side{ width:150px; flex:none; padding:16px 10px; display:flex; flex-direction:column; gap:8px; border-right:1px solid var(--edge) } .l-mock-pill{ height:9px; border-radius:5px; background:rgba(255,255,255,.07) } .l-mock-pill.on{ background:var(--ember); box-shadow:0 0 14px rgba(255,45,70,.5) } .l-mock-pill.short{ width:60% } .l-mock-grid{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:18px } .l-mock-card{ border-radius:12px; aspect-ratio:16/10; background:linear-gradient(155deg,#1B1F2B,#0A0C11); border:1px solid var(--edge); position:relative; overflow:hidden } .l-mock-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 40%, rgba(255,45,70,.16) 50%, transparent 60%) } .l-mock-card.a{ background:linear-gradient(155deg,#2a1420,#0A0C11) } .l-mock-card.d{ background:linear-gradient(155deg,#142a26,#0A0C11) } .l-mock-card.b{ background:linear-gradient(155deg,#1a2440,#0A0C11) } .l-mock-card.e{ background:linear-gradient(155deg,#2a2414,#0A0C11) } .l-mock-card.c{ background:linear-gradient(155deg,#241a40,#0A0C11) } .l-mock-card.f{ background:linear-gradient(155deg,#401a28,#0A0C11) } .l-eyebrow{ margin:0 0 8px; text-align:center; font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ember) } .l-h2{ margin:0 auto 44px; text-align:center; max-width:20ch; font-family:var(--f-display); font-weight:800; font-stretch:112%; font-size:clamp(24px,3.4vw,36px); letter-spacing:-.01em } .l-features{ max-width:820px; margin:0 auto; padding:70px clamp(20px,6vw,56px) } .l-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px } @media (max-width:560px){ .l-grid{ grid-template-columns:1fr } } .l-card{ padding:26px; border-radius:var(--r-lg); border:1px solid var(--edge); background:var(--glass); transition:border-color .2s, transform .2s var(--ease), background .2s; } .l-card:hover{ border-color:var(--edge-hot); transform:translateY(-3px); background:var(--glass-2) } .l-icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:12px; margin-bottom:16px; background:linear-gradient(135deg, rgba(255,45,70,.22), rgba(255,45,70,.05)); color:var(--ember-soft) } .l-icon svg{ width:22px; height:22px } .l-card h3{ margin:0 0 8px; font-family:var(--f-display); font-weight:700; font-size:16.5px } .l-card p{ margin:0; color:var(--mist); font-size:13.5px; line-height:1.6 } .l-band{ max-width:900px; margin:0 auto; padding:20px clamp(20px,6vw,56px) 100px; text-align:center } .l-steps{ list-style:none; margin:0 0 40px; padding:0; display:grid; gap:18px; text-align:left } .l-steps li{ display:flex; gap:16px; align-items:flex-start; padding:18px; border:1px solid var(--edge); border-radius:var(--r-lg); background:var(--glass) } .l-steps span{ flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(135deg, var(--ember), var(--ember-deep)); color:#fff; font-family:var(--f-display); font-weight:800; } .l-steps h3{ margin:0 0 4px; font-size:15px; font-family:var(--f-display); font-weight:700 } .l-steps p{ margin:0; color:var(--mist); font-size:13.5px; line-height:1.55 } .l-foot{ border-top:1px solid var(--edge); padding:36px clamp(20px,6vw,56px) 46px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; color:var(--mist-dim); font-size:12.5px; max-width:60ch; margin:0 auto; } @media (max-width:760px){ .l-links{ display:none } .l-mock-side{ display:none } .l-mock-grid{ grid-template-columns:repeat(2,1fr) } }