/* ========================================================================== L'ARCHIVE — identité "poste de commandement multivers" Noir cosmique profond, halos d'énergie façon Pierres d'Infinité, texture de trame demi-ton (Kirby dots) empruntée aux comics, typographie d'enseigne de cinéma (Bebas Neue) pour les titres, sans-serif moderne (Plus Jakarta Sans) pour le reste, mono (JetBrains Mono) pour les chiffres. ========================================================================== */ :root{ --ground:#07080f; --ground-2:#040509; --surface:#141726; --surface-2:#1b1f33; --surface-hover:#232842; --line:#262b45; --line-soft:#1c2036; --ink:#f5f4f0; --ink-dim:#a7abc4; --ink-faint:#5c6088; --accent:#f5b93d; /* or "marquee" — actions, focus, accent principal */ --accent-ink:#1a1204; --accent-soft:rgba(245,185,61,.15); --accent-glow:rgba(245,185,61,.35); --disney:#6fb3ff; --disney-soft:rgba(111,179,255,.16); --pixar:#33d9c4; --pixar-soft:rgba(51,217,196,.16); --dreamworks:#5cc95c; --dreamworks-soft:rgba(92,201,92,.16); --ghibli:#7ec8e8; --ghibli-soft:rgba(126,200,232,.16); --anime:#e0529e; --anime-soft:rgba(224,82,158,.16); --mcu:#ff4d5e; --mcu-soft:rgba(255,77,94,.16); --mcu-glow:rgba(255,77,94,.4); --marvel:#ff8a4d; --marvel-soft:rgba(255,138,77,.16); --action:#8f9bb3; --action-soft:rgba(143,155,179,.16); --starwars:#9a7ff0; --starwars-soft:rgba(154,127,240,.16); --hits:#ff3d81; --hits-soft:rgba(255,61,129,.16); --classics:#c9973f; --classics-soft:rgba(201,151,63,.16); --primevideo:#00a8e1; --primevideo-soft:rgba(0,168,225,.16); --disneyplus:#1490df; --disneyplus-soft:rgba(20,144,223,.16); --netflix:#e50914; --netflix-soft:rgba(229,9,20,.16); --paramount:#0066ff; --paramount-soft:rgba(0,102,255,.16); --appletv:#a8b0bf; --appletv-soft:rgba(168,176,191,.16); --imp-essentiel:#f5b93d; --imp-utile:#5ec6ff; --imp-optionnel:#6a6f92; --imdb:#f5c518; --global:#4ce0a0; --global-soft:rgba(76,224,160,.15); --focus:#8fd6ff; --font-display:'Bebas Neue',sans-serif; --font-body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,Consolas,monospace; --radius:18px; --radius-sm:11px; --chrome-bg-1:rgba(7,8,15,.98); --chrome-bg-2:rgba(7,8,15,.9); } /* ---------- Mode clair : mêmes accents (doré, studios…), chrome inversé ---------- */ :root[data-theme="light"]{ --ground:#f4f3ef; --ground-2:#eae8e0; --surface:#ffffff; --surface-2:#efeee8; --surface-hover:#e4e2d9; --line:#ddd9cc; --line-soft:#e8e5da; --ink:#1c1b17; --ink-dim:#57544a; --ink-faint:#8b8776; --accent-ink:#1a1204; --imp-optionnel:#8a8a99; --chrome-bg-1:rgba(255,255,255,.97); --chrome-bg-2:rgba(255,255,255,.9); } :root[data-theme="light"] .bg-carousel{display:none;} :root[data-theme="light"] ::-webkit-scrollbar-thumb{border-color:var(--ground);} *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;overflow-x:hidden;} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:2px solid var(--ground);} ::-webkit-scrollbar-thumb:hover{background:var(--ink-faint);} * {scrollbar-width:thin;scrollbar-color:var(--line) transparent;} /* Note : pas de "transform" dans cette animation — un transform sur , même temporaire, transforme en bloc conteneur pour tous les éléments "position:fixed" descendants (dont les popups), qui se retrouvent alors positionnés par rapport à la hauteur totale de la page au lieu du viewport. C'était un vrai bug, corrigé ici. */ @keyframes fadeIn{from{opacity:0;}to{opacity:1;}} body{animation:fadeIn .4s ease both;overflow-x:hidden;width:100%;} /* Fond composé de 2 couches : le carrousel d'images fixe (voir plus bas, derrière tout, z-index négatif) + ces halos de couleur semi-transparents par-dessus. Pas de couleur opaque ici exprès : c'est le carrousel qui fournit la couleur de fond (voir .bg-carousel). */ body{ background: radial-gradient(ellipse 1300px 700px at 12% -12%, rgba(245,185,61,.12), transparent 55%), radial-gradient(ellipse 1100px 650px at 95% -6%, rgba(255,77,94,.1), transparent 55%), radial-gradient(ellipse 900px 600px at 50% 115%, rgba(111,143,255,.08), transparent 60%); color:var(--ink); font-family:var(--font-body); min-height:100vh; padding-bottom:5rem; -webkit-font-smoothing:antialiased; } /* ---------- Fond animé : carrousel d'affiches en fondu, façon écran d'accueil de plateforme de streaming. Toujours derrière tout le contenu. ---------- */ .bg-carousel{ position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--ground); } .bg-slide{ position:absolute;inset:0;background-size:cover;background-position:center 22%; opacity:0;transition:opacity 3s ease; filter:brightness(.68) saturate(1.15); transform:scale(1.06); } .bg-slide.active{opacity:1;} .bg-carousel::after{ content:"";position:absolute;inset:0; background: radial-gradient(ellipse 1400px 900px at 20% -10%, rgba(7,8,15,.12), rgba(7,8,15,.62) 65%), linear-gradient(180deg, rgba(7,8,15,.28) 0%, rgba(7,8,15,.7) 58%, var(--ground) 100%); } @media (prefers-reduced-motion: reduce){ .bg-slide{transition:none;transform:none;} } /* Trame demi-ton (Kirby dots) réutilisable — texture de bande dessinée, subtile */ .halftone{position:relative;isolation:isolate;} .halftone::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(circle, rgba(245,185,61,.6) 1px, transparent 1.3px); background-size:16px 16px; opacity:.12; mask-image:radial-gradient(ellipse 100% 100% at 30% 0%, black 40%, transparent 90%); -webkit-mask-image:radial-gradient(ellipse 100% 100% at 30% 0%, black 40%, transparent 90%); } .halftone > *{position:relative;z-index:1;} ::selection{background:var(--accent);color:var(--accent-ink);} :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition-duration:.001ms !important;animation-duration:.001ms !important;} } a{color:inherit;} button{font:inherit;} /* ---------- App shell : sidebar façon Netflix/Disney+/Prime Video + topbar ---------- */ .app-shell{display:flex;align-items:stretch;min-height:100vh;} .app-sidebar{ position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;flex:none;width:236px; display:flex;flex-direction:column;gap:.15rem;padding:1.3rem 1rem 1.5rem; background:linear-gradient(180deg, var(--chrome-bg-1), var(--chrome-bg-2)); border-right:1px solid var(--line);z-index:45;scrollbar-width:thin; } .app-sidebar-brand{ font-family:var(--font-display);font-weight:400;font-size:1.5rem;letter-spacing:.01em; text-align:left;margin:.2rem 0 1.4rem;padding:0;background:none;border:none;color:var(--ink);cursor:pointer; transition:color .2s ease,text-shadow .2s ease; } .app-sidebar-brand:hover{color:var(--accent);text-shadow:0 0 20px var(--accent-glow);} .app-sidebar-label{ font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-faint);margin:1.1rem .6rem .5rem; } .app-sidebar-nav{display:flex;flex-direction:column;gap:.1rem;} .sidebar-nav-btn{ position:relative;display:flex;align-items:center;gap:.75rem;font-family:var(--font-body);font-weight:700; font-size:.86rem;padding:.65rem .75rem .65rem .9rem;border-radius:var(--radius-sm);background:none;border:none; color:var(--ink-dim);cursor:pointer;text-align:left;width:100%;transition:background .15s,color .15s; } .sidebar-nav-btn svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .sidebar-nav-btn:hover{background:var(--surface-hover);color:var(--ink);} .sidebar-nav-btn.active{background:var(--surface-2);color:var(--accent);} .sidebar-nav-btn.active::before{ content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;width:3px;border-radius:2px; background:var(--accent);box-shadow:0 0 8px var(--accent-glow); } .sidebar-nav-btn.active[data-cat="characters"]{color:var(--imp-utile);} .sidebar-nav-btn.active[data-cat="characters"]::before{background:var(--imp-utile);box-shadow:none;} .sidebar-nav-btn.active[data-cat="watchlist"]{color:var(--mcu);} .sidebar-nav-btn.active[data-cat="watchlist"]::before{background:var(--mcu);box-shadow:0 0 8px var(--mcu-glow);} .sidebar-nav-btn.active[data-cat="games"]{color:#c58cff;} .sidebar-nav-btn.active[data-cat="games"]::before{background:#c58cff;box-shadow:none;} .sidebar-nav-btn.active[data-cat="members"]{color:#c58cff;} .sidebar-nav-btn.active[data-cat="members"]::before{background:#c58cff;box-shadow:none;} .sidebar-nav-btn.active[data-cat="ranking"]{color:var(--global);} .sidebar-nav-btn.active[data-cat="ranking"]::before{background:var(--global);box-shadow:none;} .sidebar-nav-btn.active[data-cat="soon"]{color:#ff9f5a;} .sidebar-nav-btn.active[data-cat="soon"]::before{background:#ff9f5a;box-shadow:none;} .sidebar-nav-btn.admin-quick-btn{color:var(--accent);} .sidebar-nav-btn.admin-quick-btn:hover{background:var(--accent-soft);} .app-sidebar-toggle-row{ display:flex;align-items:center;justify-content:space-between;gap:.6rem; padding:.55rem .75rem .55rem .9rem;font-family:var(--font-body);font-weight:600;font-size:.82rem;color:var(--ink-dim); } .toggle-switch{ position:relative;flex:none;width:36px;height:20px;border-radius:999px;background:var(--surface-2); border:1px solid var(--line);cursor:pointer;padding:0;transition:background .2s,border-color .2s; } .toggle-switch .toggle-knob{ position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:var(--ink-faint); transition:transform .2s,background .2s; } .toggle-switch.on{background:var(--accent-soft);border-color:transparent;} .toggle-switch.on .toggle-knob{transform:translateX(16px);background:var(--accent);} .app-sidebar-toggle-btn{ display:none;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line); color:var(--ink-dim);cursor:pointer;align-items:center;justify-content:center;font-size:1.05rem;flex:none; } /* ---------- Topbar ---------- */ .app-main{flex:1;min-width:0;display:flex;flex-direction:column;} .app-topbar{ position:sticky;top:0;z-index:35;display:flex;align-items:center;gap:.9rem; padding:.85rem 1.5rem;background:linear-gradient(180deg, var(--chrome-bg-1), var(--chrome-bg-2)); backdrop-filter:blur(14px);border-bottom:1px solid var(--line); } .app-topbar::before,.app-topbar::after{content:none;} .app-topbar-search{flex:1 1 320px;max-width:420px;} .app-topbar-actions{flex:none;display:flex;gap:.5rem;align-items:center;margin-left:auto;} .app-body{display:flex;align-items:flex-start;gap:1.6rem;} .app-content{flex:1;min-width:0;} /* ---------- Colonne de droite : Mieux notés + studios (façon MovieMax) ---------- */ .app-right-col{ display:none;flex:none;width:270px;padding:2rem 1.5rem 0 0;flex-direction:column;gap:1.5rem; position:sticky;top:70px; } .app-right-col.show{display:flex;} .right-col-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;} .right-col-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;} .right-col-card h3{font-family:var(--font-body);font-weight:800;font-size:.86rem;color:var(--ink);} .right-col-see-all{ font-family:var(--font-mono);font-size:.64rem;letter-spacing:.04em;color:var(--accent); background:none;border:none;cursor:pointer;padding:0; } .right-col-film-row{ display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px dashed var(--line-soft);cursor:pointer; } .right-col-film-row:last-child{border-bottom:none;} .right-col-film-rank{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);width:.9rem;flex:none;} .right-col-film-poster{width:34px;height:48px;flex:none;border-radius:6px;overflow:hidden;background:var(--surface-2);} .right-col-film-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;} .right-col-film-title{font-size:.8rem;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .right-col-film-row:hover .right-col-film-title{color:var(--ink);} .right-col-film-meta{font-family:var(--font-mono);font-size:.64rem;color:var(--accent);} .right-col-play-btn{ flex:none;width:26px;height:26px;border-radius:50%;background:var(--surface-2);border:none; color:var(--ink-faint);cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .15s,color .15s; } .right-col-play-btn svg{width:8px;height:8px;fill:currentColor;margin-left:1px;} .right-col-film-row:hover .right-col-play-btn{background:var(--accent);color:var(--accent-ink);} .right-col-empty{font-size:.78rem;color:var(--ink-faint);} .genre-pill-cloud{display:flex;flex-wrap:wrap;gap:.4rem;} .genre-pill{ display:flex;align-items:center;gap:.4rem;font-family:var(--font-body);font-weight:600;font-size:.74rem; padding:.4rem .65rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--line); color:var(--ink-dim);cursor:pointer;transition:opacity .15s,transform .1s; } .genre-pill .sw{width:7px;height:7px;border-radius:50%;flex:none;} .genre-pill em{font-style:normal;color:var(--ink-faint);} .genre-pill:hover{transform:translateY(-1px);} .genre-pill[aria-pressed="false"]{opacity:.45;} .app-sidebar-backdrop{display:none;} @media (max-width:900px){ .app-sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 40px rgba(0,0,0,.5);background:var(--ground);z-index:50;} .app-sidebar.open{transform:translateX(0);} .app-sidebar-toggle-btn{display:flex;} .app-right-col{display:none !important;} .app-sidebar-backdrop{ display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:44; } .app-sidebar-backdrop.show{display:block;} /* Ces deux rangées (segmented control de tri, onglets de la fiche détail) ont plus d'entrées que ce qu'une largeur de téléphone peut afficher sur une ligne ; sans ceci elles débordaient silencieusement hors de l'écran (contenu invisible et inatteignable, ex. "Chronologie MCU", "Avis", "Anecdotes") au lieu de rester scrollables comme les autres rangées horizontales du site. */ .sort-toggle{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;} .sort-toggle::-webkit-scrollbar{display:none;} .detail-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;} .detail-tabs::-webkit-scrollbar{display:none;} .detail-tab-btn{flex:none;} } .account-btn{ font-family:var(--font-body);font-weight:700;font-size:.78rem;letter-spacing:.01em; padding:.55rem .95rem;border-radius:999px;background:var(--surface);border:1px solid var(--line); color:var(--ink-dim);cursor:pointer;display:flex;align-items:center;gap:.5rem;white-space:nowrap; transition:border-color .15s,color .15s,background .15s,transform .1s; } .account-btn:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px);} .account-btn svg{width:13px;height:13px;fill:var(--ink-faint);flex:none;} .account-btn.logged-in{background:var(--accent-soft);border-color:transparent;color:var(--accent);box-shadow:0 0 14px -4px var(--accent-glow);} .account-btn.logged-in svg{fill:var(--accent);} .conn-dot{width:7px;height:7px;border-radius:50%;background:var(--imp-optionnel);flex:none;transition:background .3s;} .conn-dot.on{background:var(--global);box-shadow:0 0 8px var(--global);} .icon-btn{ position:relative;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line); color:var(--ink-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none; transition:border-color .15s,color .15s,transform .1s; } .icon-btn:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px);} .icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .icon-btn-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--mcu);border:2px solid var(--ground);} /* Rangée de navigation : filtre studio multi-sélection (remplace les anciens onglets Tout/Disney/Pixar/MCU, flux unique). */ /* N'apparaît que sur Films/Séries (voir render()) : sélection d'univers centrée, propre à ces deux catégories plutôt qu'une barre globale visible sur toutes les pages. */ .nav-row{ display:none;flex-direction:column;align-items:center;gap:1.1rem; margin:0 auto 1.8rem;padding:1.7rem 1.8rem 1.5rem;max-width:1180px; background:linear-gradient(180deg, var(--surface), var(--surface-2) 160%); border:1px solid var(--line);border-radius:var(--radius); position:relative;overflow:hidden;box-shadow:0 18px 40px -24px rgba(0,0,0,.6); } .nav-row::before{ content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg, var(--disney), var(--pixar), var(--dreamworks), var(--ghibli), var(--anime), var(--mcu), var(--marvel), var(--starwars)); opacity:.7; } .nav-row.show{display:flex;} .nav-row-label{ font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-faint); } .studio-filter{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;} .studio-pill{ font-family:var(--font-body);font-weight:600;font-size:.79rem; padding:.5rem 1rem;border-radius:999px;background:transparent;border:1px solid var(--line); color:var(--ink-dim);cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .12s,opacity .18s,box-shadow .18s; display:flex;align-items:center;gap:.5rem;-webkit-tap-highlight-color:transparent; } .studio-pill .sw{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);flex:none;transition:background .18s,box-shadow .18s;} .studio-pill:hover{color:var(--ink);border-color:var(--ink-faint);transform:translateY(-1px);} .studio-pill[aria-pressed="false"]{opacity:.5;} .studio-pill[aria-pressed="true"]{font-weight:800;border-color:transparent;} .studio-pill[data-studio="disney"][aria-pressed="true"]{color:var(--disney);background:var(--disney-soft);box-shadow:inset 0 0 0 1px var(--disney);} .studio-pill[data-studio="disney"][aria-pressed="true"] .sw{background:var(--disney);box-shadow:0 0 6px var(--disney);} .studio-pill[data-studio="pixar"][aria-pressed="true"]{color:var(--pixar);background:var(--pixar-soft);box-shadow:inset 0 0 0 1px var(--pixar);} .studio-pill[data-studio="pixar"][aria-pressed="true"] .sw{background:var(--pixar);box-shadow:0 0 6px var(--pixar);} .studio-pill[data-studio="dreamworks"][aria-pressed="true"]{color:var(--dreamworks);background:var(--dreamworks-soft);box-shadow:inset 0 0 0 1px var(--dreamworks);} .studio-pill[data-studio="dreamworks"][aria-pressed="true"] .sw{background:var(--dreamworks);box-shadow:0 0 6px var(--dreamworks);} .studio-pill[data-studio="ghibli"][aria-pressed="true"]{color:var(--ghibli);background:var(--ghibli-soft);box-shadow:inset 0 0 0 1px var(--ghibli);} .studio-pill[data-studio="ghibli"][aria-pressed="true"] .sw{background:var(--ghibli);box-shadow:0 0 6px var(--ghibli);} .studio-pill[data-studio="anime"][aria-pressed="true"]{color:var(--anime);background:var(--anime-soft);box-shadow:inset 0 0 0 1px var(--anime);} .studio-pill[data-studio="anime"][aria-pressed="true"] .sw{background:var(--anime);box-shadow:0 0 6px var(--anime);} .studio-pill[data-studio="mcu"][aria-pressed="true"]{color:var(--mcu);background:var(--mcu-soft);box-shadow:inset 0 0 0 1px var(--mcu);} .studio-pill[data-studio="mcu"][aria-pressed="true"] .sw{background:var(--mcu);box-shadow:0 0 6px var(--mcu);} .studio-pill[data-studio="marvel"][aria-pressed="true"]{color:var(--marvel);background:var(--marvel-soft);box-shadow:inset 0 0 0 1px var(--marvel);} .studio-pill[data-studio="marvel"][aria-pressed="true"] .sw{background:var(--marvel);box-shadow:0 0 6px var(--marvel);} .studio-pill[data-studio="action"][aria-pressed="true"]{color:var(--action);background:var(--action-soft);box-shadow:inset 0 0 0 1px var(--action);} .studio-pill[data-studio="action"][aria-pressed="true"] .sw{background:var(--action);box-shadow:0 0 6px var(--action);} .studio-pill[data-studio="starwars"][aria-pressed="true"]{color:var(--starwars);background:var(--starwars-soft);box-shadow:inset 0 0 0 1px var(--starwars);} .studio-pill[data-studio="starwars"][aria-pressed="true"] .sw{background:var(--starwars);box-shadow:0 0 6px var(--starwars);} .studio-pill[data-studio="hits"][aria-pressed="true"]{color:var(--hits);background:var(--hits-soft);box-shadow:inset 0 0 0 1px var(--hits);} .studio-pill[data-studio="hits"][aria-pressed="true"] .sw{background:var(--hits);box-shadow:0 0 6px var(--hits);} .studio-pill[data-studio="classics"][aria-pressed="true"]{color:var(--classics);background:var(--classics-soft);box-shadow:inset 0 0 0 1px var(--classics);} .studio-pill[data-studio="classics"][aria-pressed="true"] .sw{background:var(--classics);box-shadow:0 0 6px var(--classics);} .studio-pill[data-studio="primevideo"][aria-pressed="true"]{color:var(--primevideo);background:var(--primevideo-soft);box-shadow:inset 0 0 0 1px var(--primevideo);} .studio-pill[data-studio="primevideo"][aria-pressed="true"] .sw{background:var(--primevideo);box-shadow:0 0 6px var(--primevideo);} .studio-pill[data-studio="disneyplus"][aria-pressed="true"]{color:var(--disneyplus);background:var(--disneyplus-soft);box-shadow:inset 0 0 0 1px var(--disneyplus);} .studio-pill[data-studio="disneyplus"][aria-pressed="true"] .sw{background:var(--disneyplus);box-shadow:0 0 6px var(--disneyplus);} .studio-pill[data-studio="netflix"][aria-pressed="true"]{color:var(--netflix);background:var(--netflix-soft);box-shadow:inset 0 0 0 1px var(--netflix);} .studio-pill[data-studio="netflix"][aria-pressed="true"] .sw{background:var(--netflix);box-shadow:0 0 6px var(--netflix);} .studio-pill[data-studio="paramount"][aria-pressed="true"]{color:var(--paramount);background:var(--paramount-soft);box-shadow:inset 0 0 0 1px var(--paramount);} .studio-pill[data-studio="paramount"][aria-pressed="true"] .sw{background:var(--paramount);box-shadow:0 0 6px var(--paramount);} .studio-pill[data-studio="appletv"][aria-pressed="true"]{color:var(--appletv);background:var(--appletv-soft);box-shadow:inset 0 0 0 1px var(--appletv);} .studio-pill[data-studio="appletv"][aria-pressed="true"] .sw{background:var(--appletv);box-shadow:0 0 6px var(--appletv);} .controls-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:center;} .search-wrap{position:relative;flex:1 1 240px;min-width:180px;} .search-wrap svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);opacity:.5;pointer-events:none;} input[type="search"],input[type="text"],input[type="email"],input[type="password"],select,textarea{ width:100%;background:var(--surface);border:1px solid var(--line);color:var(--ink); padding:.6rem .9rem .6rem 2.3rem;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.87rem; transition:border-color .15s; } input[type="text"],input[type="email"],input[type="password"],textarea{padding:.6rem .9rem;} textarea{resize:vertical;min-height:4.5rem;} select{padding:.6rem .9rem;font-family:var(--font-mono);font-size:.75rem;cursor:pointer;} input::placeholder,textarea::placeholder{color:var(--ink-faint);} input:focus,select:focus,textarea:focus{border-color:var(--focus);} .pill-toggle{ font-family:var(--font-body);font-weight:700;font-size:.8rem; padding:.58rem .9rem;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line); color:var(--ink-dim);cursor:pointer;align-items:center;gap:.45rem;flex:none; -webkit-tap-highlight-color:transparent;transition:background .15s,color .15s; display:flex; } .pill-toggle svg{width:12px;height:12px;fill:var(--ink-faint);} .pill-toggle[aria-pressed="true"]{background:var(--accent);border-color:transparent;color:var(--accent-ink);} .pill-toggle[aria-pressed="true"] svg{fill:var(--accent-ink);} .sort-toggle{ display:none;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:999px; padding:4px;font-family:var(--font-mono);flex:none;box-shadow:0 8px 20px -12px rgba(0,0,0,.6); } .sort-toggle.show{display:flex;} .sort-toggle button{ border:none;background:transparent;color:var(--ink-dim);font-size:.72rem;font-weight:600;letter-spacing:.03em; padding:.5rem .9rem;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s; } .sort-toggle button:hover[aria-pressed="false"]{color:var(--ink);background:var(--surface-hover);} .sort-toggle button[aria-pressed="true"]{background:var(--mcu);color:#fff;box-shadow:0 4px 12px -4px var(--mcu-glow);} .imp-toggle{display:none;gap:.35rem;flex-wrap:wrap;flex:none;} .imp-toggle.show{display:flex;} .imp-toggle button{ font-family:var(--font-body);font-weight:700;font-size:.76rem; padding:.42rem .75rem;border-radius:999px;background:var(--surface);border:1px solid var(--line); color:var(--ink-dim);cursor:pointer;display:flex;align-items:center;gap:.4rem; } .imp-toggle button .dotimp{width:7px;height:7px;border-radius:50%;flex:none;} .imp-toggle button[data-imp="essentiel"] .dotimp{background:var(--imp-essentiel);} .imp-toggle button[data-imp="utile"] .dotimp{background:var(--imp-utile);} .imp-toggle button[data-imp="optionnel"] .dotimp{background:var(--imp-optionnel);} .imp-toggle button[aria-pressed="true"][data-imp="essentiel"]{background:var(--imp-essentiel);color:var(--accent-ink);border-color:transparent;} .imp-toggle button[aria-pressed="true"][data-imp="utile"]{background:var(--imp-utile);color:#082024;border-color:transparent;} .imp-toggle button[aria-pressed="true"][data-imp="optionnel"]{background:var(--imp-optionnel);color:#fff;border-color:transparent;} .sub-toggle{ display:none;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center; padding-top:.85rem;border-top:1px dashed var(--line-soft);width:100%; } .sub-toggle.show{display:flex;} .sub-toggle-label{ font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-faint);margin-right:.2rem; } .sub-toggle button{ font-family:var(--font-body);font-weight:600;font-size:.72rem; padding:.32rem .7rem;border-radius:999px;background:transparent;border:1px solid var(--line); color:var(--ink-faint);cursor:pointer;transition:background .15s,color .15s,border-color .15s; } .sub-toggle button:hover{color:var(--ink);border-color:var(--marvel);} .sub-toggle button[aria-pressed="true"]{background:var(--marvel-soft);color:var(--marvel);border-color:var(--marvel);} .imp-toggle button[aria-pressed="true"] .dotimp{background:currentColor;} .char-filter-row{ display:none;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center; max-width:1180px;margin:0 auto 1.1rem;padding:0 1.5rem; } .char-filter-row.show{display:flex;} .char-filter-row button{ font-family:var(--font-body);font-weight:600;font-size:.78rem; padding:.4rem .9rem;border-radius:999px;background:transparent;border:1px solid var(--line); color:var(--ink-faint);cursor:pointer;transition:background .15s,color .15s,border-color .15s; } .char-filter-row button:hover{color:var(--ink);border-color:var(--accent);} .char-filter-row button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:transparent;} .arc-select-wrap{display:none;flex:1 1 220px;min-width:200px;} .arc-select-wrap.show{display:block;} .arc-index{display:none;max-width:1180px;margin:.8rem auto 0;padding:0 1.5rem;} .arc-index.show{display:block;} .arc-index summary{ font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase; color:var(--accent);cursor:pointer;padding:.5rem 0;list-style:none;display:flex;align-items:center;gap:.4rem; } .arc-index summary::before{content:"▸";display:inline-block;transition:transform .15s;} .arc-index[open] summary::before{transform:rotate(90deg);} .arc-index summary::-webkit-details-marker{display:none;} .arc-index-body{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:1rem 1.2rem;margin-bottom:.5rem;display:grid;gap:.8rem;} .arc-entry{display:flex;flex-direction:column;gap:.2rem;padding-bottom:.8rem;border-bottom:1px dashed var(--line-soft);} .arc-entry:last-child{border-bottom:none;padding-bottom:0;} .arc-entry .arc-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;} .arc-entry .arc-num{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);flex:none;} .arc-entry .arc-name{font-family:var(--font-body);font-weight:800;font-size:.92rem;color:var(--ink);} .arc-entry .arc-saga-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);} .arc-entry .arc-desc{font-size:.79rem;color:var(--ink-dim);line-height:1.55;} .legend{ max-width:1180px;margin:.85rem auto 0;padding:0 1.5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.3rem; font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);letter-spacing:.02em; } .legend span{display:inline-flex;align-items:center;gap:.35rem;cursor:default;} .legend svg{width:11px;height:11px;flex:none;} .legend .lf,.legend .ls{fill:var(--ink-dim);} .legend .dotimp{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;} .legend .type-filter-btn{ display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;background:none;border:none; font:inherit;color:var(--ink-faint);padding:.15rem .45rem;border-radius:999px;transition:background .15s,color .15s; } .legend .type-filter-btn:hover{background:var(--surface-hover);color:var(--ink-dim);} .legend .type-filter-btn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);} .legend .type-filter-btn[aria-pressed="true"] svg{fill:var(--accent);} .count-line{max-width:1180px;margin:.7rem auto 0;padding:0 1.5rem;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-dim);letter-spacing:.02em;} /* ---------- Bannière en vedette ---------- */ .hero-banner{ position:relative;max-width:1180px;margin:0 auto;padding:0 1.5rem;display:none; } .hero-banner.show{display:block;} .hero-bg{ position:absolute;inset:0 1.5rem;border-radius:22px;background-size:cover;background-position:center 20%; background-color:var(--surface-2);opacity:0;transition:opacity .6s ease; } .hero-bg.loaded{opacity:1;} .hero-scrim{ position:absolute;inset:0 1.5rem;border-radius:22px; background:linear-gradient(100deg, rgba(4,5,9,.95) 12%, rgba(4,5,9,.5) 55%, transparent 100%), linear-gradient(0deg, rgba(4,5,9,.75), transparent 60%); box-shadow:inset 0 0 0 1px rgba(245,185,61,.15), 0 20px 50px rgba(0,0,0,.5); } .hero-content{position:relative;padding:3.6rem 2.2rem;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;max-width:560px;} .hero-eyebrow{ font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent); margin-bottom:.6rem;display:inline-flex;align-items:center;gap:.5rem; } .hero-eyebrow::before{content:"";width:18px;height:2px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);} .hero-title{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,5.6vw,3.8rem);line-height:.94;letter-spacing:.01em;text-wrap:balance;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.6);} .hero-sub{font-size:.86rem;color:rgba(255,255,255,.75);margin-top:.65rem;max-width:48ch;} .hero-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1.35rem;} .hero-cta{ align-self:flex-start;font-family:var(--font-body);font-weight:700;font-size:.87rem; padding:.75rem 1.4rem;border-radius:999px;background:var(--accent);color:var(--accent-ink);border:none;cursor:pointer; box-shadow:0 0 0 rgba(245,185,61,0); transition:transform .12s,box-shadow .2s; } .hero-cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 26px -6px var(--accent-glow);} .hero-watch-btn{ display:flex;align-items:center;gap:.55rem;font-family:var(--font-body);font-weight:700;font-size:.87rem; padding:.75rem 1.3rem;border-radius:999px;background:rgba(255,255,255,.08);color:#fff; border:1px solid rgba(255,255,255,.3);cursor:pointer;backdrop-filter:blur(6px); transition:transform .12s,background .15s,border-color .15s; } .hero-watch-btn svg{width:14px;height:14px;fill:#fff;flex:none;} .hero-watch-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.16);} .hero-watch-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);} .hero-watch-btn.active svg{fill:var(--accent);} .hero-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%; background:rgba(7,8,15,.5);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:1.5rem;line-height:1; cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px); opacity:0;transition:opacity .2s,background .15s,transform .15s; } .hero-banner:hover .hero-arrow{opacity:1;} .hero-arrow:hover{background:rgba(7,8,15,.75);transform:translateY(-50%) scale(1.06);} .hero-arrow-prev{left:1.8rem;} .hero-arrow-next{right:1.8rem;} .hero-pagination{position:absolute;left:2.2rem;bottom:1.3rem;z-index:2;display:flex;gap:.4rem;} .hero-dot{ width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);border:none;cursor:pointer;padding:0; transition:background .2s,transform .15s; } .hero-dot:hover{background:rgba(255,255,255,.55);} .hero-dot.active{background:var(--accent);box-shadow:0 0 8px var(--accent-glow);} @media (max-width:640px){ .hero-content{padding:2.2rem 1.4rem;min-height:260px;} .hero-bg,.hero-scrim{inset:0 .8rem;} .hero-arrow{width:36px;height:36px;font-size:1.25rem;opacity:1;} .hero-arrow-prev{left:1.2rem;} .hero-arrow-next{right:1.2rem;} .hero-pagination{left:1.5rem;bottom:.9rem;} } /* ---------- Classement ---------- */ .ranking-list{display:flex;flex-direction:column;gap:.6rem;max-width:640px;margin:0 auto;} .ranking-row{ display:flex;align-items:center;gap:.9rem;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius-sm);padding:.6rem .9rem;cursor:pointer;transition:border-color .15s,transform .1s; } .ranking-row:hover{border-color:var(--accent);transform:translateX(2px);} .ranking-rank{font-family:var(--font-display);font-size:1.5rem;font-weight:400;color:var(--ink-faint);width:2.2rem;flex:none;text-align:center;} .ranking-row:nth-child(1) .ranking-rank{color:#f5b93d;} .ranking-row:nth-child(2) .ranking-rank{color:#c9c9d4;} .ranking-row:nth-child(3) .ranking-rank{color:#c98a4d;} .ranking-poster{width:44px;height:66px;flex:none;border-radius:6px;} .ranking-info{flex:1 1 auto;min-width:0;} .ranking-score{font-family:var(--font-mono);font-weight:700;font-size:1.05rem;color:var(--global);flex:none;font-variant-numeric:tabular-nums;} /* ---------- Panneau admin ---------- */ /* ---------- Panneau admin : page dédiée façon dashboard SaaS (sidebar + top bar) ---------- */ .admin-gate{ position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center; background: radial-gradient(ellipse 900px 600px at 50% -10%, var(--accent-soft), transparent 60%), var(--ground); padding:1.5rem;overflow:hidden; } .admin-gate-halftone{ position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(circle, rgba(245,185,61,.5) 1px, transparent 1.3px); background-size:18px 18px;opacity:.1; mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, black 20%, transparent 80%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, black 20%, transparent 80%); } .admin-gate-box.modal{ max-width:380px;position:relative;padding:2.2rem 2rem;text-align:left; box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 0 1px rgba(245,185,61,.12); animation:profilePageEnter .5s cubic-bezier(.2,.8,.25,1.05) both; } .admin-gate-logo{ font-family:var(--font-display);font-weight:400;font-size:1.5rem;color:var(--ink);margin-bottom:1.4rem; display:flex;align-items:center;gap:.65rem;justify-content:center;text-align:center; } .admin-gate-logo b{font-weight:700;color:var(--accent);} .admin-gate-badge{ width:40px;height:40px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center; justify-content:center;font-size:1.15rem;flex:none;box-shadow:0 0 0 1px rgba(245,185,61,.3); } .admin-gate-spinner{ width:34px;height:34px;margin:.5rem auto 1.1rem;border-radius:50%; border:3px solid var(--surface-2);border-top-color:var(--accent);animation:adminGateSpin .8s linear infinite; } @keyframes adminGateSpin{to{transform:rotate(360deg);}} @media (prefers-reduced-motion: reduce){ .admin-gate-spinner{animation-duration:2.4s;} } .admin-gate-denied-icon{font-size:2.2rem;text-align:center;margin-bottom:.6rem;filter:grayscale(.2);} /* ============================================================ PANNEAU ADMIN — refonte complète (aucune parenté visuelle volontaire avec le site public à part la palette de couleurs). Esthétique "console SaaS" dense façon Stripe/Linear : jamais la police d'affiche du site (--font-display) dans l'admin, coins peu arrondis, vraies tables, cartes KPI compactes. ============================================================ */ .admin-shell{ position:fixed;inset:0;z-index:60;display:flex;background:var(--ground);animation:fadeIn .2s ease both; font-family:var(--font-body); } .admin-shell, .admin-shell input, .admin-shell select, .admin-shell button, .admin-shell textarea{font-family:var(--font-body);} /* ---- Colonne latérale ---- */ .admin-sidebar{ flex:none;width:246px;background:var(--surface);border-right:1px solid var(--line); display:flex;flex-direction:column;padding:0; } .admin-sidebar-brand{display:flex;align-items:center;gap:.65rem;padding:1.15rem 1.1rem;border-bottom:1px solid var(--line);} .admin-sidebar-brand-mark{ flex:none;width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accent-ink); display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;letter-spacing:-.02em; } .admin-sidebar-brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0;} .admin-sidebar-brand-text b{font-size:.86rem;font-weight:800;color:var(--ink);letter-spacing:-.01em;} .admin-sidebar-brand-text span{font-size:.64rem;color:var(--ink-faint);font-weight:700;text-transform:uppercase;letter-spacing:.07em;} .admin-sidebar-nav{display:flex;flex-direction:column;gap:.05rem;flex:1 1 auto;padding:.7rem .65rem;overflow-y:auto;} .admin-nav-section-label{ font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint); padding:1rem .55rem .35rem; } .admin-nav-section-label:first-child{padding-top:.15rem;} .admin-sidebar-nav button{ display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem;border-radius:7px;background:none;border:none; color:var(--ink-dim);font-weight:600;font-size:.81rem;text-align:left;cursor:pointer;width:100%; transition:background .12s,color .12s; } .admin-sidebar-nav button svg{flex:none;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7;} .admin-sidebar-nav button:hover{background:var(--surface-hover);color:var(--ink);} .admin-sidebar-nav button.active{background:var(--accent-soft);color:var(--accent);} .admin-sidebar-nav button.active svg{opacity:1;} .admin-nav-group{border:none;} .admin-nav-group summary{ display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem;border-radius:7px;cursor:pointer; color:var(--ink-dim);font-weight:600;font-size:.81rem;list-style:none;transition:background .12s,color .12s; } .admin-nav-group summary svg{flex:none;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7;} .admin-nav-group summary::-webkit-details-marker{display:none;} .admin-nav-group summary::after{ content:"";width:6px;height:6px;margin-left:auto;flex:none; border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg); opacity:.45;transition:transform .15s; } .admin-nav-group[open] summary::after{transform:rotate(-135deg);} .admin-nav-group summary:hover{background:var(--surface-hover);color:var(--ink);} .admin-nav-group-items{display:flex;flex-direction:column;gap:.02rem;padding:.15rem 0 .35rem 1.85rem;} .admin-nav-group-items button{width:100%;padding:.4rem .55rem;font-size:.77rem;font-weight:500;display:flex;justify-content:space-between;align-items:center;} .admin-nav-group-items .admin-nav-info-row{ padding:.4rem .55rem;font-size:.75rem;color:var(--ink-faint);display:flex;justify-content:space-between;align-items:center; } .admin-nav-count{font-family:var(--font-mono);font-size:.67rem;color:var(--ink-faint);} .admin-sidebar-nav button.active .admin-nav-count{color:var(--accent);} .admin-nav-badge{ margin-left:auto;background:var(--mcu);color:#fff;font-size:.6rem;font-weight:800;border-radius:4px; padding:.08rem .38rem;font-family:var(--font-mono); } .admin-sidebar-footer{border-top:1px solid var(--line);padding:.85rem .95rem;display:flex;flex-direction:column;gap:.65rem;} .admin-sidebar-user{display:flex;align-items:center;gap:.55rem;} .admin-sidebar-name{font-size:.78rem;font-weight:700;color:var(--ink);} .admin-sidebar-role{font-size:.66rem;color:var(--ink-faint);} .admin-exit-btn{ font-weight:600;font-size:.76rem;padding:.5rem .65rem;border-radius:7px;display:flex;align-items:center;gap:.45rem; background:var(--surface-2);border:1px solid var(--line);color:var(--ink-dim);cursor:pointer;transition:background .15s,color .15s; } .admin-exit-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .admin-exit-btn:hover{background:var(--surface-hover);color:var(--ink);} /* ---- Barre du haut + contenu ---- */ .admin-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow-y:auto;} .admin-topbar{flex:none;padding:1rem 1.8rem;border-bottom:1px solid var(--line);} .admin-topbar-crumb{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:.15rem;} .admin-topbar-title{font-weight:800;font-size:1.05rem;color:var(--ink);letter-spacing:-.015em;} .admin-content{flex:1 1 auto;padding:1.6rem 1.8rem 3rem;} /* ---- Cartes / grille de synthèse ---- */ .admin-overview-grid{display:grid;grid-template-columns:1fr 280px;gap:1rem;align-items:start;} .admin-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem;} .admin-card h4{font-weight:700;font-size:.82rem;color:var(--ink);margin-bottom:.9rem;letter-spacing:-.005em;} .admin-chart-col{display:flex;flex-direction:column;gap:.9rem;min-width:0;} .admin-chart-wrap{height:210px;position:relative;} .admin-side-col{display:flex;flex-direction:column;gap:.9rem;} .admin-donut-card{text-align:center;} .admin-donut-wrap{position:relative;width:140px;height:140px;margin:0 auto;} .admin-donut-label{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--font-mono);font-size:1.4rem;font-weight:700;color:var(--ink); } .admin-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem;} .admin-card-head h4{margin-bottom:0;} .admin-sort-toggle{display:flex;gap:.25rem;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:.15rem;} .admin-sort-toggle button{ font-weight:700;font-size:.68rem;padding:.28rem .6rem;border-radius:5px; background:none;border:none;color:var(--ink-faint);cursor:pointer;transition:background .15s,color .15s; } .admin-sort-toggle button.active{background:var(--accent);color:var(--accent-ink);} .admin-info-card{display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;} .admin-info-card-text b{font-family:var(--font-mono);font-size:1.35rem;font-weight:700;color:var(--ink);} .admin-info-card-text p{font-size:.73rem;color:var(--ink-faint);margin-top:.3rem;line-height:1.4;} .admin-info-card-btn{ flex:none;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);cursor:pointer;font-size:.85rem; background:var(--surface-2);color:var(--ink-dim);transition:background .15s,border-color .15s,color .15s; } .admin-info-card-btn:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);} /* ---- Tables ---- */ .admin-table-wrap{overflow-x:auto;} .admin-table{width:100%;border-collapse:collapse;font-size:.79rem;} .admin-table th{ text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--ink-faint); padding:.55rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap; } .admin-table td{padding:.6rem .6rem;border-bottom:1px solid var(--line);color:var(--ink-dim);white-space:nowrap;} .admin-table tr:last-child td{border-bottom:none;} .admin-table tr:hover td{background:var(--surface-hover);} @media (max-width:900px){ .admin-shell{flex-direction:column;} .admin-sidebar{width:100%;flex-direction:row;align-items:center;padding:0;overflow-x:auto;} .admin-sidebar-brand{border-bottom:none;border-right:1px solid var(--line);} .admin-sidebar-nav{flex-direction:row;flex:none;padding:.6rem;} .admin-nav-section-label{display:none;} .admin-sidebar-footer{flex-direction:row;border-top:none;border-left:1px solid var(--line);padding:0 0 0 .9rem;margin-left:auto;} .admin-overview-grid{grid-template-columns:1fr;} .admin-content{padding:1.2rem 1.2rem 2.5rem;} .admin-topbar{padding:.9rem 1.2rem;} } /* ---- Barres d'action, recherche, listes ---- */ .admin-tab-actions{margin-bottom:1.1rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;} .admin-filter-chip{ display:inline-flex;align-items:center;gap:.4rem;background:var(--accent-soft);color:var(--accent); font-size:.75rem;font-weight:700;padding:.3rem .35rem .3rem .65rem;border-radius:6px; } .admin-filter-chip button{background:none;border:none;color:inherit;cursor:pointer;font-size:.72rem;padding:.1rem .2rem;line-height:1;} .admin-tab-actions button{width:auto;padding:.55rem 1rem;} .admin-search-wrap{margin-bottom:1.1rem;} .admin-list-count{font-size:.72rem;color:var(--ink-faint);font-weight:600;margin-bottom:.6rem;} .admin-list{display:flex;flex-direction:column;gap:.4rem;} .admin-row{ display:flex;align-items:center;gap:.9rem;background:var(--surface);border:1px solid var(--line); border-radius:8px;padding:.55rem .8rem;transition:border-color .15s,background .15s; } .admin-row:hover{border-color:var(--ink-faint);background:var(--surface-hover);} .admin-row-poster{width:34px;height:50px;flex:none;border-radius:5px;} .admin-row-info{flex:1 1 auto;min-width:0;} .admin-row-edit{ flex:none;width:auto;padding:.42rem .85rem;border-radius:6px;background:var(--surface-2); border:1px solid var(--line);color:var(--ink-dim);font-weight:700;font-size:.75rem;cursor:pointer; transition:background .15s,border-color .15s,color .15s; } .admin-row-edit:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);} .admin-user-stats{ background:var(--surface-2);border:1px solid var(--line);border-radius:7px; padding:.6rem .8rem;font-size:.78rem;color:var(--ink-dim);margin:.8rem 0; } .role-badge{ display:inline-block;margin-left:.4rem;padding:.12rem .5rem;border-radius:4px;font-size:.58rem; font-weight:800;text-transform:uppercase;letter-spacing:.03em;vertical-align:middle; background:var(--surface-2);color:var(--ink-faint); } .role-badge.role-admin{background:var(--mcu-soft);color:var(--mcu);} .role-badge.role-mod{background:var(--accent-soft);color:var(--accent);} /* ---- Table utilisateurs (onglet Utilisateurs) ---- */ .admin-user-table-name{display:flex;align-items:center;gap:.55rem;} .admin-user-table-name span{font-weight:600;color:var(--ink);} .admin-user-role-inline{ width:auto;padding:.2rem .5rem;border-radius:5px;font-size:.7rem;font-weight:800; text-transform:uppercase;letter-spacing:.03em;border:1px solid var(--line);cursor:pointer; background:var(--surface-2);color:var(--ink-faint); } .admin-user-role-inline.role-admin{background:var(--mcu-soft);color:var(--mcu);border-color:transparent;} .admin-user-role-inline.role-moderator{background:var(--accent-soft);color:var(--accent);border-color:transparent;} .admin-bulk-bar{ display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--accent-soft); border:1px solid var(--accent);border-radius:8px;padding:.6rem .8rem;margin-bottom:1rem;font-size:.78rem; } .admin-bulk-bar span{font-weight:700;color:var(--accent);margin-right:.2rem;} .admin-bulk-bar select, .admin-bulk-bar button{width:auto;padding:.4rem .7rem;font-size:.73rem;} .admin-user-activity-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);margin:.9rem 0 .5rem;} .admin-user-activity-list{display:flex;flex-direction:column;gap:.3rem;} .admin-user-activity-item{ display:flex;align-items:center;gap:.5rem;background:var(--surface-2);border-radius:6px; padding:.4rem .6rem;font-size:.76rem;color:var(--ink-dim); } .admin-user-activity-item span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .admin-user-activity-item b{color:var(--accent);font-family:var(--font-mono);flex:none;} .admin-user-activity-date{color:var(--ink-faint);font-size:.68rem;flex:none;} /* ---------- Onglet Synchronisation ---------- */ .admin-sync-desc{font-size:.81rem;color:var(--ink-dim);line-height:1.6;margin-bottom:1.1rem;max-width:640px;} .admin-sync-counts{display:flex;gap:.7rem;margin-bottom:1.1rem;flex-wrap:wrap;} .admin-sync-count{ background:var(--surface-2);border:1px solid var(--line);border-radius:8px; padding:.75rem 1rem;display:flex;flex-direction:column;gap:.2rem;flex:1 1 150px; } .admin-sync-count .n{font-family:var(--font-mono);font-size:1.3rem;font-weight:700;color:var(--accent);} .admin-sync-count .l{font-size:.71rem;color:var(--ink-faint);} .admin-sync-provider-btn{ margin-top:.5rem;align-self:flex-start;font-weight:700;font-size:.71rem; padding:.32rem .7rem;border-radius:6px;cursor:pointer;border:1px solid var(--line); background:var(--surface);color:var(--ink-dim);transition:background .15s,border-color .15s,color .15s; } .admin-sync-provider-btn:hover{border-color:var(--accent);color:var(--accent);} .admin-sync-provider-btn:disabled{opacity:.5;cursor:default;border-color:var(--line);color:var(--ink-faint);} .admin-sync-log{margin-top:1rem;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:.85rem 1.05rem;min-height:2.4rem;} .admin-sync-log-line{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-dim);line-height:1.7;} .admin-sync-error{color:var(--mcu);} /* ---------- Modal admin : édition d'un titre — bloc affiche / fond / bande-annonce ---------- */ .admin-imported-note{ background:var(--accent-soft);color:var(--accent);border-radius:var(--radius-sm); padding:.7rem .9rem;font-size:.76rem;line-height:1.5;margin:.9rem 0 0;font-weight:600; } .admin-media-block{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line);} .admin-media-heading{font-family:var(--font-body);font-weight:800;font-size:.85rem;color:var(--ink);margin-bottom:.9rem;} .admin-media-current{display:flex;gap:1.1rem;margin-bottom:1rem;flex-wrap:wrap;} .admin-media-current-item{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;} .admin-media-current-label{font-size:.68rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;font-weight:700;} .admin-media-thumb{ width:70px;height:104px;border-radius:8px;overflow:hidden;background:var(--surface-2); border:1px solid var(--line);display:flex;align-items:center;justify-content:center; } .admin-media-thumb-wide{width:150px;height:84px;} .admin-media-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .admin-media-thumb-empty{color:var(--ink-faint);font-size:1.2rem;} .admin-media-auto-tag{font-size:.68rem;color:var(--ink-faint);font-style:italic;} /* Sélecteurs préfixés #adminMediaSection exprès : la règle générique ".modal button" (boutons pilule) a une spécificité CSS plus élevée qu'une simple classe et écraserait sinon la forme (coins arrondis, taille) des vignettes/boutons ci-dessous — d'où le préfixe id pour être sûr de gagner quel que soit l'ordre des règles dans la feuille de style. */ #adminMediaSection .admin-media-reset{ background:none;border:none;color:var(--accent);font-size:.7rem;font-weight:700;cursor:pointer; padding:0;text-decoration:underline;flex:none;width:auto; } .admin-media-search-row{display:flex;gap:.6rem;margin-bottom:.8rem;} #adminMediaSection .admin-media-search-row input{flex:1 1 auto;} #adminMediaSection .admin-media-search-row button{flex:none;width:auto;white-space:nowrap;border-radius:999px;} .admin-media-status{font-size:.76rem;color:var(--ink-faint);padding:.4rem 0;display:block;} .admin-media-status.admin-media-error{color:var(--mcu);} .admin-media-match{font-size:.8rem;color:var(--ink-dim);margin-bottom:.6rem;} .admin-media-alt-list{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:.8rem;} #adminMediaSection .admin-media-alt-item{ flex:none;width:70px;display:flex;flex-direction:column;align-items:center;gap:.3rem; background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:.4rem;cursor:pointer; color:var(--ink-dim);font-size:.62rem;text-align:center;transition:border-color .15s; } #adminMediaSection .admin-media-alt-item:hover{border-color:var(--accent);} .admin-media-alt-item img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:5px;} .admin-media-alt-noimg{width:100%;aspect-ratio:2/3;background:var(--surface);border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);} .admin-media-picker-label{font-size:.7rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em;font-weight:700;margin:.9rem 0 .5rem;} .admin-media-grid{display:flex;flex-wrap:wrap;gap:.5rem;} #adminMediaSection .admin-media-tile{ flex:none;width:64px;height:96px;padding:0;border-radius:8px;overflow:hidden;cursor:pointer; border:2px solid transparent;background:var(--surface-2);transition:border-color .15s,transform .1s; } #adminMediaSection .admin-media-tile:hover{transform:translateY(-2px);} #adminMediaSection .admin-media-tile.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .admin-media-tile img{width:100%;height:100%;object-fit:cover;display:block;} #adminMediaSection .admin-media-tile-wide{width:140px;height:79px;} .admin-media-video-tile{position:relative;} .admin-media-video-badge{ position:absolute;bottom:.25rem;left:.25rem;background:rgba(10,12,20,.75);color:#fff; font-size:.58rem;font-weight:700;padding:.12rem .4rem;border-radius:999px; } .admin-media-manual-label{margin-top:1rem !important;} /* ---------- Onglet Jeux de l'admin (création de mini-jeux) ---------- */ .admin-empty{background:var(--surface-2);border:1px dashed var(--line);border-radius:8px;padding:1.6rem;text-align:center;color:var(--ink-faint);font-size:.82rem;} .admin-game-row{ display:flex;align-items:center;gap:.9rem;background:var(--surface);border:1px solid var(--line); border-radius:8px;padding:.65rem .9rem; } .admin-game-row .agr-icon{ flex:none;width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.05rem; background:var(--accent-soft); } .admin-game-row .agr-info{flex:1 1 auto;min-width:0;} .admin-game-row .agr-actions{flex:none;display:flex;gap:.3rem;} .admin-report-row{align-items:flex-start;} .admin-report-row.is-done{opacity:.55;} .admin-report-text{font-size:.8rem;color:var(--ink-dim);line-height:1.5;margin-top:.4rem;} .admin-review-row .card-sub{margin-top:.15rem;} .admin-game-row .agr-actions button{width:auto;padding:.4rem .5rem;} /* ---------- Grille de cartes ---------- */ main{max-width:1180px;margin:0 auto;padding:2rem 1.5rem 0;} .era{margin-bottom:2.6rem;} .era-label{ font-family:var(--font-display);font-weight:400;font-size:1.5rem;letter-spacing:.02em;color:var(--ink); display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem; } .era-label::before{content:"";width:5px;height:1.5rem;border-radius:3px;background:var(--accent);box-shadow:0 0 12px var(--accent-glow);flex:none;} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.4rem 1.1rem;} /* ---------- Transition "carte de visite" façon Disney+ (voir playStudioIntro) ---------- */ .studio-intro{ position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center; background:var(--ground);opacity:0;pointer-events:none;overflow:hidden;cursor:pointer; } .studio-intro.show{opacity:1;pointer-events:auto;animation:studioIntroFade 1.5s ease both;} @keyframes studioIntroFade{0%{opacity:0;}10%{opacity:1;}85%{opacity:1;}100%{opacity:0;}} /* Vraies affiches TMDb du studio, en éventail derrière le nom — jamais un vrai logo déposé, juste un aperçu du catalogue qui s'apprête à s'afficher. */ .studio-intro-posters{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; gap:.6rem;perspective:900px; } .intro-poster{ --tilt:calc((var(--i, 0) - 4) * 4deg); position:relative;flex:none;width:104px;aspect-ratio:2/3;border-radius:12px;overflow:hidden; box-shadow:0 24px 44px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08); opacity:0;transform:translateY(36px) scale(.82) rotate(var(--tilt)); } .intro-poster img{width:100%;height:100%;object-fit:cover;display:block;} .studio-intro.show .intro-poster{ animation:introPosterIn 1.5s cubic-bezier(.2,.8,.25,1) both; animation-delay:calc(var(--i, 0) * .055s); } @keyframes introPosterIn{ 0%{opacity:0;transform:translateY(40px) scale(.8) rotate(var(--tilt));} 28%{opacity:.9;} 50%{opacity:.9;transform:translateY(0) scale(1) rotate(calc(var(--tilt) * .6));} 80%{opacity:.9;transform:translateY(0) scale(1) rotate(calc(var(--tilt) * .6));} 100%{opacity:0;transform:translateY(-24px) scale(1.06) rotate(calc(var(--tilt) * .6));} } .studio-intro-vignette{ position:absolute;inset:0; background: radial-gradient(ellipse 46% 55% at 50% 52%, var(--ground) 0%, rgba(7,8,15,.75) 45%, transparent 72%), radial-gradient(ellipse 120% 90% at 50% 50%, transparent 45%, var(--ground) 100%); } .studio-intro-rays{ position:absolute;width:180vmax;height:180vmax;opacity:0; background:conic-gradient(from 0deg, transparent 0deg, var(--sc,var(--accent)) 4deg, transparent 10deg, transparent 40deg, var(--sc,var(--accent)) 44deg, transparent 52deg, transparent 90deg, var(--sc,var(--accent)) 94deg, transparent 102deg, transparent 140deg, var(--sc,var(--accent)) 144deg, transparent 152deg, transparent 180deg, var(--sc,var(--accent)) 184deg, transparent 192deg, transparent 230deg, var(--sc,var(--accent)) 234deg, transparent 242deg, transparent 270deg, var(--sc,var(--accent)) 274deg, transparent 282deg, transparent 320deg, var(--sc,var(--accent)) 324deg, transparent 332deg, transparent 360deg); mask-image:radial-gradient(circle, black 0%, transparent 42%); -webkit-mask-image:radial-gradient(circle, black 0%, transparent 42%); } .studio-intro.show .studio-intro-rays{animation:studioIntroRays 1.5s linear both;} @keyframes studioIntroRays{ 0%{opacity:0;transform:rotate(0deg);} 15%{opacity:.16;} 80%{opacity:.1;} 100%{opacity:0;transform:rotate(24deg);} } .studio-intro-glow{ position:absolute;width:min(70vw,640px);height:min(70vw,640px);border-radius:50%;filter:blur(70px); opacity:0;background:radial-gradient(circle, var(--sc,var(--accent)), transparent 70%); } .studio-intro.show .studio-intro-glow{animation:studioIntroGlow 1.5s ease both;} @keyframes studioIntroGlow{0%{opacity:0;transform:scale(.5);}40%{opacity:.6;transform:scale(1);}100%{opacity:0;transform:scale(1.3);}} .studio-intro-particles{position:absolute;inset:0;pointer-events:none;} .intro-particle{ position:absolute;bottom:38%;width:var(--ps,4px);height:var(--ps,4px);border-radius:50%; background:var(--sc,var(--accent));opacity:0;box-shadow:0 0 8px 1px var(--sc,var(--accent)); } .studio-intro.show .intro-particle{animation:introParticleRise var(--pd,1.1s) ease-out var(--pdelay,0s) both;} @keyframes introParticleRise{ 0%{opacity:0;transform:translateY(0) scale(.6);} 15%{opacity:.9;} 80%{opacity:.5;} 100%{opacity:0;transform:translateY(var(--pdist,-140px)) scale(1);} } .studio-intro-body{position:relative;display:flex;flex-direction:column;align-items:center;} .studio-intro-eyebrow{ font-family:var(--font-mono);font-size:.72rem;letter-spacing:.5em;text-transform:uppercase; color:rgba(255,255,255,.55);margin-bottom:.7rem;padding-left:.5em;opacity:0; } .studio-intro.show .studio-intro-eyebrow{animation:studioIntroEyebrow 1.5s ease both;} @keyframes studioIntroEyebrow{ 0%{opacity:0;transform:translateY(6px);} 30%{opacity:.9;transform:translateY(0);} 78%{opacity:.9;} 100%{opacity:0;} } .studio-intro-name{ position:relative;font-family:var(--font-display);font-weight:400; font-size:clamp(2.6rem,9vw,6rem);letter-spacing:.04em;color:#fff;text-align:center;padding:0 1.5rem; opacity:0;transform:scale(.75); } .studio-intro.show .studio-intro-name{animation:studioIntroName 1.5s cubic-bezier(.2,.8,.25,1) both;} @keyframes studioIntroName{ 0%{opacity:0;transform:scale(.7);letter-spacing:.3em;} 32%{opacity:1;transform:scale(1.06);letter-spacing:.04em;} 50%{transform:scale(1);} 82%{opacity:1;transform:scale(1);} 100%{opacity:0;transform:scale(1.05);} } .studio-intro-rule{width:0;height:2px;margin-top:1rem;background:var(--sc,var(--accent));box-shadow:0 0 10px var(--sc,var(--accent));} .studio-intro.show .studio-intro-rule{animation:studioIntroRule 1.5s cubic-bezier(.2,.8,.25,1) both;} @keyframes studioIntroRule{ 0%{width:0;opacity:0;} 40%{opacity:1;} 55%{width:120px;opacity:1;} 82%{width:120px;opacity:1;} 100%{width:60px;opacity:0;} } @media (prefers-reduced-motion: reduce){ .studio-intro.show,.studio-intro.show .studio-intro-rays,.studio-intro.show .studio-intro-glow, .studio-intro.show .intro-particle,.studio-intro.show .studio-intro-eyebrow, .studio-intro.show .studio-intro-name,.studio-intro.show .studio-intro-rule{animation:none;} } /* Accueil façon Netflix/Disney+/Prime Video : rangées horizontales par catégorie, plutôt qu'un flux unique — bascule possible vers la grille classique via #homeViewToggle. */ .partner-strip{max-width:1180px;margin:0 auto 1.8rem;padding:0 1.5rem;} .partner-strip-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;} .partner-strip-label{ font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-faint); } .partner-strip-nav{display:flex;gap:.4rem;} .partner-arrow{ width:26px;height:26px;border-radius:50%;background:var(--surface);border:1px solid var(--line); color:var(--ink-dim);cursor:pointer;display:flex;align-items:center;justify-content:center; font-size:1rem;line-height:1;transition:border-color .15s,color .15s; } .partner-arrow:hover{color:var(--ink);border-color:var(--accent);} .partner-strip-row{display:flex;gap:.9rem;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;padding:.3rem .1rem .5rem;} .partner-strip-row::-webkit-scrollbar{display:none;} .partner-chip{ position:relative;flex:none;width:172px;height:100px;overflow:hidden; font-family:var(--font-display);font-weight:400;font-size:1.2rem;letter-spacing:.02em; padding:0;border-radius:14px;background:var(--surface-2);border:1px solid var(--line); color:#fff;cursor:pointer;transition:border-color .2s,opacity .2s,transform .18s,box-shadow .2s; display:flex;align-items:flex-end;justify-content:flex-start;text-align:left; } .partner-chip-bg{ position:absolute;inset:0;background-size:cover;background-position:center 30%; opacity:0;transition:opacity .5s ease,transform .3s ease;transform:scale(1.04); } .partner-chip-bg.loaded{opacity:.7;} .partner-chip:hover .partner-chip-bg{transform:scale(1.1);} .partner-chip-scrim{ position:absolute;inset:0; background:linear-gradient(0deg, rgba(4,5,9,.92) 0%, rgba(4,5,9,.35) 55%, rgba(4,5,9,.1) 100%); } .partner-chip-label{position:relative;z-index:1;padding:0 1rem .8rem;text-shadow:0 2px 10px rgba(0,0,0,.6);} .partner-chip:hover{transform:translateY(-3px);border-color:var(--sc);box-shadow:0 12px 28px -8px rgba(0,0,0,.6);} .partner-chip[aria-pressed="true"]{border-color:var(--sc);box-shadow:0 0 0 1px var(--sc),0 12px 24px -8px rgba(0,0,0,.55);} .partner-chip[aria-pressed="true"] .partner-chip-label{color:var(--sc);} .partner-chip[aria-pressed="false"]{opacity:.42;} .partner-chip[aria-pressed="false"]:hover{opacity:.75;} /* Petit "pulse" façon sélection de profil Disney+ quand on clique une tuile studio. */ @keyframes partnerChipSelect{ 0%{box-shadow:0 0 0 0 var(--sc);} 40%{box-shadow:0 0 0 6px var(--sc);} 100%{box-shadow:0 0 0 0 transparent;} } .partner-chip.selecting{animation:partnerChipSelect .5s ease-out both;} .partner-chip.selecting .partner-chip-bg{transform:scale(1.14);} @media (prefers-reduced-motion: reduce){ .partner-chip.selecting{animation:none;} } @media (max-width:640px){ .partner-strip{padding:0 1.2rem;} .partner-chip{width:140px;height:84px;} } .home-rows{display:flex;flex-direction:column;gap:2.2rem;max-width:1180px;margin:0 auto;padding:0 1.5rem;} .home-row-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.8rem;padding:0 1.5rem;} .home-row-title{ font-family:var(--font-display);font-weight:400;font-size:1.4rem;letter-spacing:.02em;color:var(--ink); } .home-row-nav{display:flex;align-items:center;gap:.7rem;flex:none;} .home-row-see-all{ font-family:var(--font-mono);font-size:.64rem;letter-spacing:.04em;color:var(--accent); background:none;border:none;cursor:pointer;padding:0;white-space:nowrap; } .row-arrow{ width:26px;height:26px;border-radius:50%;background:var(--surface);border:1px solid var(--line); color:var(--ink-dim);cursor:pointer;display:flex;align-items:center;justify-content:center; font-size:1rem;line-height:1;transition:border-color .15s,color .15s; } .row-arrow:hover{color:var(--ink);border-color:var(--accent);} .home-row-track{ display:flex;gap:1.1rem;overflow-x:auto;padding:.3rem 1.5rem 1rem;margin:0 -1.5rem; scroll-snap-type:x proximity;scrollbar-width:thin; } .home-row-track .card{flex:0 0 160px;scroll-snap-align:start;} @media (max-width:640px){ .home-rows{padding:0 1.2rem;gap:1.6rem;} .home-row-head{padding:0 1.2rem;} .home-row-title{font-size:1.2rem;} .home-row-track{padding:.3rem 1.2rem 1rem;margin:0 -1.2rem;} .home-row-track .card{flex-basis:130px;} } .card{display:flex;flex-direction:column;min-width:0;} .poster-wrap{ position:relative;aspect-ratio:2/3;border-radius:var(--radius);overflow:hidden; background:var(--surface-2);border:1px solid rgba(255,255,255,.05); box-shadow:0 4px 18px rgba(0,0,0,.4);cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; } .poster-wrap:hover,.poster-wrap:focus-visible{ transform:translateY(-4px) scale(1.025); box-shadow:0 16px 30px rgba(0,0,0,.55), 0 0 0 1000px transparent; outline:none; } .card[data-cat="disney"] .poster-wrap:hover{box-shadow:0 16px 30px rgba(0,0,0,.55),0 0 0 2px var(--disney),0 0 26px 4px rgba(111,179,255,.45);} .card[data-cat="pixar"] .poster-wrap:hover{box-shadow:0 16px 30px rgba(0,0,0,.55),0 0 0 2px var(--pixar),0 0 26px 4px rgba(51,217,196,.4);} .card[data-cat="mcu"] .poster-wrap:hover{box-shadow:0 16px 30px rgba(0,0,0,.55),0 0 0 2px var(--mcu),0 0 26px 4px var(--mcu-glow);} .card[data-cat="marvel"] .poster-wrap:hover{box-shadow:0 16px 30px rgba(0,0,0,.55),0 0 0 2px var(--marvel),0 0 26px 4px rgba(255,138,77,.45);} .card[data-cat="action"] .poster-wrap:hover{box-shadow:0 16px 30px rgba(0,0,0,.55),0 0 0 2px var(--action),0 0 26px 4px rgba(143,155,179,.4);} .card[data-cat="starwars"] .poster-wrap:hover{box-shadow:0 16px 30px rgba(0,0,0,.55),0 0 0 2px var(--starwars),0 0 26px 4px rgba(154,127,240,.45);} .poster-wrap img,.poster-wrap svg{display:block;width:100%;height:100%;object-fit:cover;} .poster-wrap img{opacity:0;transition:opacity .3s;} .poster-wrap img.loaded{opacity:1;} .card.upcoming .poster-wrap{filter:grayscale(.55) brightness(.7);} .card.upcoming .poster-wrap::after{ content:"À VENIR";position:absolute;inset:auto 0 0 0;padding:.4rem;text-align:center; font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;font-weight:600; background:rgba(0,0,0,.6);color:var(--ink-dim); } .poster-badges{position:absolute;top:.4rem;left:.4rem;right:.4rem;display:flex;justify-content:flex-end;align-items:flex-start;pointer-events:none;} .badge-imdb{ font-family:var(--font-mono);font-size:.62rem;font-weight:700;background:var(--imdb);color:#161200; padding:.15rem .4rem;border-radius:4px;flex:none; } .poster-scrim{ position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none; background:linear-gradient(180deg, transparent, rgba(0,0,0,.55)); } .poster-type{ position:absolute;bottom:.4rem;left:.4rem;width:18px;height:18px;border-radius:50%; background:rgba(10,12,20,.7);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center; } .poster-type svg{width:9px;height:9px;fill:var(--ink-dim);} .watchlist-btn{ position:absolute;bottom:.4rem;right:.4rem;width:26px;height:26px;border-radius:50%; background:rgba(10,12,20,.72);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1); display:flex;align-items:center;justify-content:center;cursor:pointer; opacity:0;transform:translateY(3px);transition:opacity .15s,transform .15s,background .15s; } .watchlist-btn svg{width:11px;height:13px;fill:none;stroke:var(--ink-dim);stroke-width:1.4;transition:fill .15s,stroke .15s;} .poster-wrap:hover .watchlist-btn,.watchlist-btn.active{opacity:1;transform:none;} .watchlist-btn:hover{background:rgba(10,12,20,.9);} .watchlist-btn.active svg{fill:var(--accent);stroke:var(--accent);} /* Aperçu au survol façon Netflix : l'affiche se soulève déjà (voir .poster-wrap:hover plus haut) ; ce bouton "marquer comme vu" apparaît en plus, en écho au bouton liste déjà présent. */ .watched-btn{ position:absolute;top:.4rem;left:.4rem;width:26px;height:26px;border-radius:50%; background:rgba(10,12,20,.72);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1); display:flex;align-items:center;justify-content:center;cursor:pointer; opacity:0;transform:translateY(-3px);transition:opacity .15s,transform .15s,background .15s; } .watched-btn svg{width:13px;height:13px;fill:none;stroke:var(--ink-dim);stroke-width:1.4;transition:fill .15s,stroke .15s;} .poster-wrap:hover .watched-btn,.watched-btn.active{opacity:1;transform:none;} .watched-btn:hover{background:rgba(10,12,20,.9);} .watched-btn.active svg{fill:var(--global);stroke:var(--global);} .card-meta{padding:.55rem .1rem 0;} .card-title{ font-family:var(--font-body);font-weight:700;font-size:.85rem;line-height:1.25;color:var(--ink); cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .card-title:hover{color:var(--accent);} .card-sub{ font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);margin-top:.25rem; font-variant-numeric:tabular-nums; } .card-foot{display:flex;align-items:center;gap:.4rem;margin-top:.5rem;flex-wrap:wrap;} .chip-global{ font-family:var(--font-mono);font-size:.65rem;font-weight:600;color:var(--global); background:var(--global-soft);border:1px solid rgba(76,224,160,.3);padding:.2rem .45rem;border-radius:6px; white-space:nowrap; } .chip-global.empty{color:var(--ink-faint);background:var(--surface-2);border-color:var(--line);} .chip-rate{ font-family:var(--font-body);font-size:.68rem;font-weight:700;color:var(--ink-dim); background:var(--surface-2);border:1px solid var(--line);padding:.2rem .5rem;border-radius:6px; cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap; transition:border-color .15s,color .15s; } .chip-rate svg{width:9px;height:9px;fill:var(--ink-faint);} .chip-rate:hover{border-color:var(--accent);color:var(--accent);} .chip-rate.rated{background:var(--accent-soft);border-color:transparent;color:var(--accent);} .chip-rate.rated svg{fill:var(--accent);} .empty{text-align:center;padding:4rem 1rem;color:var(--ink-dim);font-size:.9rem;} .grid-load-more{text-align:center;padding:2rem 1rem;color:var(--ink-faint);font-size:.8rem;font-family:var(--font-mono);} /* ---------- Onglet Personnages ---------- */ .char-grid{display:flex;flex-direction:column;gap:1.6rem;} .char-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;} .char-name{ font-family:var(--font-display);font-weight:400;font-size:1.4rem;letter-spacing:.01em; color:var(--ink);margin-bottom:.8rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap; } .char-name .count{font-family:var(--font-mono);font-weight:500;font-size:.66rem;color:var(--ink-faint);letter-spacing:.03em;} .char-strip{display:flex;gap:.9rem;overflow-x:auto;padding-bottom:.3rem;scroll-snap-type:x proximity;} .char-strip::-webkit-scrollbar{height:6px;} .char-strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;} .char-item{flex:none;width:88px;scroll-snap-align:start;cursor:pointer;} .char-item .poster-wrap{aspect-ratio:2/3;border-radius:10px;margin-bottom:.35rem;} .char-item .char-step{ font-family:var(--font-mono);font-size:.6rem;color:var(--mcu);font-weight:700; position:absolute;top:.35rem;left:.35rem;background:rgba(10,12,20,.75);width:18px;height:18px; border-radius:50%;display:flex;align-items:center;justify-content:center; } .char-item .char-title{font-size:.7rem;font-weight:600;line-height:1.25;color:var(--ink-dim);} .char-item:hover .char-title{color:var(--accent);} .char-item .char-year{font-family:var(--font-mono);font-size:.62rem;color:var(--ink-faint);margin-top:.1rem;} /* ---------- Modals ---------- */ .modal-overlay{position:fixed;inset:0;background:rgba(4,5,9,.86);z-index:100;display:none;align-items:center;justify-content:center;padding:1.25rem;overflow-y:auto;} .modal-overlay.show{display:flex;animation:fadeIn .18s ease both;} .modal{ background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.7rem;max-width:380px;width:100%; position:relative;max-height:88vh;overflow-y:auto; box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(245,185,61,.06), 0 0 60px -20px rgba(245,185,61,.2); } .modal.wide{max-width:580px;} .click-burst{ position:fixed;width:14px;height:14px;border-radius:50%;pointer-events:none;z-index:150; background:radial-gradient(circle, var(--accent) 0%, rgba(245,185,61,.5) 40%, transparent 72%); animation:clickBurstExpand .6s cubic-bezier(.2,.8,.3,1) forwards; } @keyframes clickBurstExpand{ 0%{transform:translate(-50%,-50%) scale(0);opacity:.95;} 100%{transform:translate(-50%,-50%) scale(16);opacity:0;} } @media (prefers-reduced-motion: reduce){ .click-burst{display:none;} } .modal h2{font-family:var(--font-display);font-weight:400;font-size:1.7rem;letter-spacing:.01em;margin-bottom:.35rem;} /* Les 3 modales ci-dessous ne s'ouvrent JAMAIS que depuis le panneau admin (jamais partagées avec le site public) — ciblées par id pour rester en cohérence avec sa typographie sobre sans toucher au ".modal h2" générique (connexion, notation, etc.), qui doit garder l'esthétique du site. */ #adminEditOverlay h2, #adminUserOverlay h2, #adminGameOverlay h2, #adminTicketOverlay h2{ font-family:var(--font-body);font-weight:800;font-size:1.15rem;letter-spacing:-.01em; } #adminEditOverlay .modal, #adminUserOverlay .modal, #adminGameOverlay .modal, #adminTicketOverlay .modal{border-radius:12px;} #adminEditOverlay button, #adminUserOverlay button, #adminGameOverlay button, #adminTicketOverlay button{border-radius:7px;} /* ---- Détail d'un ticket (Reports) : original + fil de réponses ---- */ .admin-ticket-original{ background:var(--surface-2);border:1px solid var(--line);border-radius:8px; padding:.8rem .9rem;margin:.9rem 0;font-size:.83rem;color:var(--ink-dim);line-height:1.55; } .admin-ticket-thread{display:flex;flex-direction:column;gap:.5rem;max-height:260px;overflow-y:auto;margin-bottom:.9rem;} .admin-ticket-msg{background:var(--surface-2);border-radius:8px;padding:.6rem .8rem;font-size:.82rem;color:var(--ink);} .admin-ticket-msg.is-admin{background:var(--accent-soft);} .admin-ticket-msg-head{display:flex;justify-content:space-between;gap:.6rem;font-size:.7rem;color:var(--ink-faint);margin-bottom:.25rem;} .admin-ticket-msg-head b{color:var(--accent);font-weight:700;} .admin-ticket-msg p{line-height:1.5;white-space:pre-wrap;} .admin-ticket-empty{font-size:.78rem;color:var(--ink-faint);padding:.4rem 0;} .modal .modal-sub{font-size:.78rem;color:var(--ink-dim);margin-bottom:1.1rem;line-height:1.55;} .modal label{font-size:.76rem;color:var(--ink-dim);display:block;margin:.65rem 0 .35rem;font-weight:600;} .modal .modal-actions{display:flex;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap;} .watch-track-row{display:flex;align-items:center;gap:.9rem;margin-top:.7rem;} .watch-track-row #watchTrackBtn{ flex:none;padding:.5rem .85rem;font-size:.78rem; font-family:var(--font-body);font-weight:700;border-radius:999px;cursor:pointer; border:1px solid var(--line);background:var(--surface-2);color:var(--ink); transition:transform .1s,border-color .15s,box-shadow .2s; } .watch-track-row #watchTrackBtn:hover{transform:translateY(-1px);} .watch-track-row #watchTrackBtn.watched{border-color:var(--accent);color:var(--accent);} .watch-track-row #watchTrackUndo{ flex:none;padding:0;font-size:.72rem;color:var(--ink-faint); font-family:var(--font-body);font-weight:500;background:transparent;border:none; text-decoration:underline;cursor:pointer; } /* :not(.detail-page):not(.profile-page):not(.actor-page) est indispensable ici : ces trois pages réutilisent la classe .modal UNIQUEMENT pour l'habillage de la carte (fond/bordure/ombre), pas pour ses règles de bouton — sans cette exclusion, ".modal button" (spécificité classe+élément) écrase silencieusement les dizaines de boutons sur-mesure de ces pages (vignettes d'épisode, bandes-annonces, onglets…) qui n'ont qu'une seule classe et perdent donc la bataille de spécificité CSS, même si leur propre règle est déclarée après dans ce fichier. Bug constaté en prod : les vignettes d'épisode/bande-annonce se retrouvaient recadrées en quasi-cercles. Les vraies petites modales (connexion, notation, admin…) ne sont pas concernées et gardent exactement le même rendu qu'avant. */ .modal:not(.detail-page):not(.profile-page):not(.actor-page) button{ font-family:var(--font-body);font-weight:700;font-size:.83rem;padding:.65rem .95rem;border-radius:999px; cursor:pointer;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);flex:1 1 auto; transition:transform .1s,border-color .15s,box-shadow .2s; } .modal:not(.detail-page):not(.profile-page):not(.actor-page) button:hover{transform:translateY(-1px);} .modal:not(.detail-page):not(.profile-page):not(.actor-page) button.primary{background:var(--accent);border-color:transparent;color:var(--accent-ink);} .modal:not(.detail-page):not(.profile-page):not(.actor-page) button.primary:hover{box-shadow:0 8px 22px -6px var(--accent-glow);} .modal:not(.detail-page):not(.profile-page):not(.actor-page) button.danger{background:transparent;border-color:var(--mcu);color:var(--mcu);flex:none;} .modal:not(.detail-page):not(.profile-page):not(.actor-page) button.link{background:transparent;border:none;color:var(--ink-dim);text-decoration:underline;flex:none;padding:.3rem;font-weight:500;} /* La page profil a ses propres boutons génériques (Enregistrer/Se déconnecter/Réinitialiser la bannière) qui, eux, comptaient bien sur ".modal button.primary/.danger/.link" et n'ont aucune règle à eux — réintroduit ici, mais SEULEMENT pour ces 3 classes génériques explicites (jamais un simple "button" nu, qui écraserait à nouveau des composants sur-mesure comme .admin-row-edit dans le sélecteur de bannière de profil, avec le même bug que les vignettes d'épisode). */ #profilePage button.primary{ font-family:var(--font-body);font-weight:700;font-size:.83rem;padding:.65rem .95rem;border-radius:999px; cursor:pointer;border:1px solid transparent;background:var(--accent);color:var(--accent-ink); transition:transform .1s,box-shadow .2s; } #profilePage button.primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px -6px var(--accent-glow);} #profilePage button.danger{ font-family:var(--font-body);font-weight:700;font-size:.83rem;padding:.65rem .95rem;border-radius:999px; cursor:pointer;border:1px solid var(--mcu);background:transparent;color:var(--mcu);transition:transform .1s; } #profilePage button.danger:hover{transform:translateY(-1px);} #profilePage button.link{ background:transparent;border:none;color:var(--ink-dim);text-decoration:underline; padding:.3rem;font-weight:500;font-family:var(--font-body);font-size:.83rem;cursor:pointer; } .modal .modal-error{color:var(--mcu);font-size:.75rem;margin-top:.55rem;min-height:1em;} .modal .modal-close{ position:absolute;top:.9rem;right:.9rem;background:var(--surface-2);border:1px solid var(--line); color:var(--ink-dim);width:30px;height:30px;border-radius:50%;font-size:1rem;cursor:pointer; display:flex;align-items:center;justify-content:center;line-height:1; } .modal .modal-close:hover{color:var(--ink);border-color:var(--accent);} /* Popup de notation multi-critères */ .criteria-list{display:flex;flex-direction:column;gap:1rem;margin:1.1rem 0;} .criterion{display:flex;flex-direction:column;gap:.35rem;} .criterion-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.83rem;} .criterion-head b{font-weight:700;color:var(--ink);} .criterion-head span{font-family:var(--font-mono);color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;} .criterion input[type="range"]{width:100%;height:5px;border-radius:3px;background:var(--line);appearance:none;-webkit-appearance:none;cursor:pointer;} .criterion input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.4);} .criterion input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);cursor:pointer;} .overall-preview{ display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border:1px solid var(--line); border-radius:var(--radius-sm);padding:.8rem 1rem;margin-top:.4rem; } .overall-preview span{font-size:.72rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.05em;font-weight:600;} .overall-preview b{font-family:var(--font-mono);font-size:1.4rem;color:var(--accent);font-variant-numeric:tabular-nums;} /* Stats minimalistes façon TV Time : juste un gros chiffre + un petit libellé en dessous, alignés en rangée, sans carte ni bordure — pas de "chip", juste du texte. */ .profile-stats{display:flex;flex-shrink:0;gap:1.6rem;overflow-x:auto;margin:.6rem 0 1.2rem;padding-bottom:.2rem;scrollbar-width:thin;} .stat-chip{flex:0 0 auto;text-align:left;opacity:0;animation:statPopIn .5s cubic-bezier(.2,.8,.25,1.1) both;} .stat-chip b{display:block;font-family:var(--font-mono);font-weight:700;font-size:1.3rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;} .stat-chip span{font-size:.62rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;} @keyframes statPopIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}} /* Pastille de niveau façon "⚡ Level 19 - Reel Enthusiast" (TV Time), avec sa fine barre de progression sous la pastille plutôt qu'une grosse barre intégrée. */ .level-pill-row{padding:0 2rem;margin-top:-.4rem;position:relative;z-index:1;} .level-pill{ display:inline-flex;align-items:center;gap:.45rem;background:var(--surface-2);border:1px solid var(--line); border-radius:999px;padding:.4rem .8rem .4rem .6rem; } .level-icon{font-size:.85rem;filter:drop-shadow(0 0 4px var(--accent-glow));} .level-pill b{font-family:var(--font-body);font-weight:800;font-size:.76rem;color:var(--ink);letter-spacing:.01em;} .level-xp{font-family:var(--font-mono);font-size:.66rem;color:var(--accent);font-weight:700;} .level-progress{height:3px;border-radius:2px;background:var(--surface-2);overflow:hidden;max-width:220px;margin:.4rem 0 0 .1rem;} .level-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ff9f5a);transition:width 1.1s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;} .level-progress-fill::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation:shimmerSweep 2.4s ease-in-out infinite; } @keyframes shimmerSweep{0%{transform:translateX(-100%);}60%,100%{transform:translateX(100%);}} /* Carrousels "Mes films vus" / "Mes séries vues" façon "My TV Shows" / "My Movies" de TV Time. */ .carousel-row{display:flex;flex-shrink:0;gap:.8rem;overflow-x:auto;padding:.2rem 2rem 1rem;scrollbar-width:thin;} .carousel-tile{flex:0 0 auto;width:82px;cursor:pointer;} .carousel-tile .poster-wrap{aspect-ratio:2/3;border-radius:8px;} .carousel-tile-title{ font-size:.66rem;font-weight:600;color:var(--ink-dim);margin-top:.3rem;line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .profile-list{display:flex;flex-direction:column;max-height:300px;overflow-y:auto;border-top:1px solid var(--line-soft);} .profile-row{display:flex;align-items:center;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--line-soft);font-size:.81rem;} .profile-row .pr-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .profile-row .pr-note{font-family:var(--font-mono);color:var(--accent);font-weight:700;flex:none;font-variant-numeric:tabular-nums;} .profile-row .pr-imdb{font-family:var(--font-mono);color:var(--ink-faint);font-size:.68rem;flex:none;font-variant-numeric:tabular-nums;} .profile-row .pr-remove{background:transparent;border:none;color:var(--ink-faint);cursor:pointer;font-size:.9rem;flex:none;padding:.1rem .3rem;} .profile-row .pr-remove:hover{color:var(--mcu);} .profile-empty{padding:1.3rem 0;color:var(--ink-dim);font-size:.8rem;text-align:center;} .display-name-row{display:flex;gap:.5rem;align-items:center;margin-bottom:.4rem;} .display-name-row input{flex:1 1 auto;} .display-name-row button{flex:none;width:auto;padding:.55rem .8rem;} /* Fiche détail (popup description + bande-annonce) */ .tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.03em;text-transform:uppercase;padding:.22rem .5rem;border-radius:5px;white-space:nowrap;} .tag.imp-essentiel{background:rgba(245,185,61,.15);color:var(--imp-essentiel);border:1px solid rgba(245,185,61,.4);} .tag.imp-utile{background:rgba(94,198,255,.14);color:var(--imp-utile);border:1px solid rgba(94,198,255,.35);} .tag.imp-optionnel{background:rgba(106,111,146,.2);color:var(--imp-optionnel);border:1px solid rgba(106,111,146,.4);} .tag.arc{background:var(--accent-soft);color:var(--accent);cursor:help;} .tag.arc.off{background:var(--surface-2);color:var(--ink-faint);} .tag.srs{background:var(--surface-2);color:var(--ink-dim);} .detail-hero{width:100%;max-width:640px;} .detail-actions{margin-top:1.1rem;} .detail-actions button{ flex:1 1 auto;padding:.55rem .95rem;font-size:.76rem;border-radius:999px; font-family:var(--font-body);font-weight:700;cursor:pointer; border:1px solid var(--line);background:var(--surface-2);color:var(--ink); transition:transform .1s,border-color .15s,box-shadow .2s; } .detail-actions button:hover{transform:translateY(-1px);} .detail-actions button.primary{background:var(--accent);border-color:transparent;color:var(--accent-ink);} .detail-actions button.primary:hover{box-shadow:0 8px 22px -6px var(--accent-glow);} .detail-hero .watch-track-row{margin-top:.6rem;} .detail-hero h2{ font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:.3rem; text-wrap:balance;line-height:1;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.7); } .detail-hero .modal-sub{color:rgba(255,255,255,.75);text-shadow:0 1px 8px rgba(0,0,0,.6);} .detail-hero-metaline{ font-family:var(--font-mono);font-size:.76rem;letter-spacing:.03em;color:rgba(255,255,255,.82); text-shadow:0 1px 8px rgba(0,0,0,.6);margin:.7rem 0 0; } .detail-hero-excerpt{ font-size:.87rem;line-height:1.6;color:rgba(255,255,255,.82);text-shadow:0 1px 10px rgba(0,0,0,.7); margin:.7rem 0 0;max-width:52ch; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .detail-hero-readmore{ display:inline-block;font-size:.76rem;font-weight:700;color:var(--accent);margin-top:.4rem; cursor:pointer;text-decoration:none; } .detail-hero-readmore:hover{text-decoration:underline;} .detail-overview{font-size:.87rem;line-height:1.65;color:var(--ink-dim);margin:1.1rem 0;} .detail-loading{font-size:.78rem;color:var(--ink-faint);padding:1.3rem;text-align:center;background:var(--surface-2);border-radius:var(--radius-sm);} .trailer-search-link{display:block;margin-top:.6rem;color:var(--accent);font-weight:700;text-decoration:none;} .trailer-search-link:hover{text-decoration:underline;} .trailer-frame{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000;} .trailer-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .trailer-gallery{display:flex;gap:.9rem;overflow-x:auto;padding:.2rem .1rem 1rem;margin-top:.9rem;scrollbar-width:thin;} .trailer-thumb{ flex:0 0 176px;position:relative;border-radius:10px;overflow:hidden;border:2px solid transparent; background:#000;cursor:pointer;padding:0;aspect-ratio:16/9;transition:border-color .15s,transform .15s; } .trailer-thumb:hover{transform:translateY(-2px);} .trailer-thumb.active{border-color:var(--accent);} .trailer-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.75;} .trailer-thumb.active img{opacity:1;} .trailer-thumb-play{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px; border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center; font-size:.8rem;backdrop-filter:blur(2px); } .trailer-thumb-name{ position:absolute;left:0;right:0;bottom:0;padding:.35rem .5rem;font-size:.66rem;font-weight:700;color:#fff; background:linear-gradient(0deg, rgba(0,0,0,.85), transparent);text-align:left; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .detail-tabs{display:flex;gap:1.6rem;border-bottom:1px solid var(--line);margin-bottom:1.1rem;} .detail-tab-btn{ font-family:var(--font-body);font-weight:700;font-size:.85rem;color:var(--ink-faint); background:none;border:none;padding:.2rem 0 .8rem;cursor:pointer;position:relative;transition:color .15s; } .detail-tab-btn:hover{color:var(--ink-dim);} .detail-tab-btn.active{color:var(--ink);} .detail-tab-btn.active::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px; background:var(--accent);border-radius:2px;box-shadow:0 0 8px var(--accent-glow); } .cast-row{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin;} .cast-card{flex:0 0 96px;display:flex;flex-direction:column;gap:.4rem;} .cast-card[data-person-id]{cursor:pointer;} .cast-card[data-person-id]:hover .cast-photo{box-shadow:0 0 0 2px var(--accent);} .cast-card[data-person-id]:hover .cast-name{color:var(--accent);} .cast-photo{ width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--surface-2); border:1px solid var(--line);display:flex;align-items:center;justify-content:center; } .cast-photo img{width:100%;height:100%;object-fit:cover;display:block;} .cast-photo-fallback{font-family:var(--font-display);font-size:1.6rem;color:var(--ink-faint);} .cast-name{font-size:.78rem;font-weight:700;color:var(--ink);line-height:1.25;} .cast-character{font-size:.72rem;color:var(--ink-faint);line-height:1.25;} /* ---------- Bannière en fond de la fiche détail (façon Disney+ : grand visuel, texte à gauche) ---------- */ .detail-banner{position:relative;min-height:min(64vh,620px);display:flex;align-items:flex-end;padding:2.6rem 2.4rem;border-radius:18px 18px 0 0;overflow:hidden;} .detail-banner-bg{ position:absolute;inset:0;background-size:cover;background-position:center 15%; background-color:var(--surface-2);opacity:0;transition:opacity .6s ease; } .detail-banner-bg.loaded{opacity:1;} .detail-banner-scrim{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(0deg, var(--surface) 0%, rgba(10,12,20,.55) 32%, rgba(10,12,20,.15) 70%, transparent 100%), linear-gradient(100deg, rgba(4,5,9,.88) 0%, rgba(4,5,9,.55) 42%, rgba(4,5,9,.1) 75%, transparent 100%); } .detail-banner .profile-back-btn{position:absolute;top:1.2rem;left:1.2rem;z-index:2;} .detail-banner .detail-hero{position:relative;z-index:1;} @media (max-width:640px){ .detail-banner{min-height:0;padding:3.6rem 1.2rem 1.6rem;} .detail-hero-excerpt{max-width:none;} } /* ---------- Corps de la fiche détail : contenu + colonne latérale ---------- */ .detail-body{display:flex;gap:1.8rem;align-items:flex-start;padding:1.7rem 2rem 2rem;} .detail-main-col{flex:1 1 auto;min-width:0;max-width:840px;} .detail-side-col{flex:0 0 260px;display:flex;flex-direction:column;gap:1rem;position:sticky;top:5.2rem;} .detail-side-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;} .detail-side-card h4{font-family:var(--font-body);font-weight:800;font-size:.72rem;letter-spacing:.03em;color:var(--ink-faint);margin-bottom:.8rem;text-transform:uppercase;} @media (max-width:800px){ /* align-items:flex-start (utile en ligne pour aligner les 2 colonnes en haut) devient un piège une fois qu'on repasse en colonne : le sens de l'axe transverse change, et flex-start fait alors "rétrécir au contenu" au lieu d'étirer sur 100% de la largeur — un enfant avec du texte non coupé (ex. les onglets de la fiche) peut alors forcer toute la colonne, et donc la page, à déborder. width:100% force l'étirement horizontal qu'on veut, quel que soit align-items. */ .detail-body{flex-direction:column;padding:1.4rem 1.2rem 1.6rem;} .detail-main-col{width:100%;} .detail-side-col{flex:none;width:100%;position:static;} } .detail-row-list{display:flex;flex-direction:column;} .detail-row-list .detail-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.8rem;} .detail-row-list .detail-row:last-child{border-bottom:none;} .detail-row-list .detail-row span{color:var(--ink-faint);} .detail-row-list .detail-row b{font-family:var(--font-mono);color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;text-align:right;} .rating-histogram{display:flex;align-items:flex-end;gap:2px;height:52px;margin-bottom:.9rem;} .rating-histogram .rh-bar{flex:1 1 auto;background:var(--surface);border-radius:2px 2px 0 0;min-height:3px;} .rating-histogram .rh-bar.has-votes{background:var(--accent);} .rating-histogram-empty{font-size:.72rem;color:var(--ink-faint);text-align:center;padding:.6rem 0 1rem;} .season-list{display:flex;flex-direction:column;gap:.4rem;margin:.6rem 0 1rem;} .season-row-wrap{display:flex;flex-direction:column;gap:.4rem;} .season-row{display:flex;align-items:center;gap:.8rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6rem .8rem;} .season-row.clickable{cursor:pointer;transition:border-color .15s,background .15s;} .season-row.clickable:hover{border-color:var(--accent);background:var(--surface-hover);} .season-row-badge{ flex:none;width:38px;height:38px;border-radius:9px;border:1px solid;display:flex;align-items:center;justify-content:center; font-family:var(--font-mono);font-weight:700;font-size:.78rem; } .season-row-info{flex:1 1 auto;min-width:0;} .season-row-name{font-size:.85rem;font-weight:700;color:var(--ink);} .season-row-meta{font-size:.72rem;color:var(--ink-faint);margin-top:.1rem;} .season-row-chevron{flex:none;color:var(--ink-faint);font-size:.8rem;} .season-complete-badge{ display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%; background:var(--global);color:#04140c;font-size:.62rem;font-weight:900;vertical-align:middle; } .episode-grid{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:.7rem .8rem;} .episode-grid-actions{display:flex;align-items:center;justify-content:space-between;font-size:.7rem;color:var(--ink-faint);margin-bottom:.6rem;} .episode-grid-actions .link{background:none;border:none;color:var(--accent);font-weight:700;font-size:.7rem;cursor:pointer;padding:0;margin-left:.7rem;} .episode-grid-actions .link:hover{text-decoration:underline;} .episode-grid-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.45rem;max-height:260px;overflow-y:auto;} .episode-chip{ font-family:var(--font-body);font-weight:600;font-size:.68rem;padding:.4rem .3rem;text-align:center; border-radius:7px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-faint); cursor:pointer;transition:background .15s,border-color .15s,color .15s; } .episode-chip:hover{border-color:var(--accent);color:var(--ink);} .episode-chip.watched{background:var(--global-soft);border-color:var(--global);color:var(--global);} .episodes-season-select{ display:block;width:auto;min-width:160px;margin-bottom:.9rem;padding:.5rem .8rem;border-radius:999px; background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:.8rem;cursor:pointer; } .episode-thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;} .episode-thumb{ background:none;border:none;padding:0;cursor:pointer;text-align:left;border-radius:10px;overflow:hidden; transition:transform .15s; } .episode-thumb:hover{transform:translateY(-2px);} .episode-thumb-img{ position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--surface-2); border:2px solid transparent; } .episode-thumb.watched .episode-thumb-img{border-color:var(--global);} .episode-thumb-img img{width:100%;height:100%;object-fit:cover;display:block;position:relative;} /* Sous l'image (ou visible seule si aucune vignette TMDb n'existe/charge) : jamais un fond de série étiré en 16:9 (ancien comportement, très moche sur une affiche portrait) ni une case vide. */ .episode-thumb-placeholder{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--surface-2),var(--surface)); color:var(--ink-faint);font-family:var(--font-display);font-weight:400;font-size:1.9rem; } .episode-thumb-check{ position:absolute;top:.4rem;right:.4rem;width:22px;height:22px;border-radius:50%; background:rgba(4,5,9,.65);color:var(--global);font-weight:900;font-size:.75rem; display:flex;align-items:center;justify-content:center;z-index:1; } .episode-thumb-wrap{position:relative;} .episode-thumb-edit{ position:absolute;top:.4rem;left:.4rem;width:22px;height:22px;border-radius:50%; background:rgba(4,5,9,.65);border:none;color:#fff;font-size:.72rem;cursor:pointer; display:flex;align-items:center;justify-content:center;z-index:1;opacity:0;transition:opacity .15s; } .episode-thumb-wrap:hover .episode-thumb-edit,.episode-thumb-edit:focus{opacity:1;} .episode-thumb-label{font-size:.72rem;font-weight:600;color:var(--ink-dim);margin-top:.4rem;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .episode-thumb.watched .episode-thumb-label{color:var(--ink);} /* ---------- Modal : correction admin de l'image d'un épisode ---------- */ .ep-pick-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem;} #episodeImageOverlay .ep-pick-tile{ flex:none;width:120px;height:68px;padding:0;border-radius:8px;overflow:hidden;cursor:pointer; border:2px solid transparent;background:var(--surface-2);transition:border-color .15s,transform .1s; } #episodeImageOverlay .ep-pick-tile:hover{transform:translateY(-2px);} #episodeImageOverlay .ep-pick-tile.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .ep-pick-tile img{width:100%;height:100%;object-fit:cover;display:block;} .ep-pick-status{font-size:.78rem;color:var(--ink-faint);padding:.4rem 0;} .reviews-list{display:flex;flex-direction:column;gap:.8rem;} .review-row{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.75rem .9rem;} .review-row-head{display:flex;align-items:center;gap:.55rem;} .review-row-head .chat-author{font-weight:700;font-size:.82rem;color:var(--ink);cursor:pointer;} .review-row-head .chat-author:hover{color:var(--accent);text-decoration:underline;} .review-row-score{margin-left:auto;font-family:var(--font-mono);font-weight:700;font-size:.78rem;color:var(--accent);} .review-row-text{font-size:.8rem;color:var(--ink-dim);line-height:1.5;margin-top:.45rem;} .detail-arc-desc{font-size:.78rem;color:var(--ink-dim);line-height:1.5;background:var(--surface-2);border-radius:var(--radius-sm);padding:.7rem .8rem;margin-top:.5rem;} .detail-epguide{font-size:.78rem;color:var(--ink-dim);line-height:1.5;background:var(--accent-soft);border:1px solid rgba(245,185,61,.25);border-radius:var(--radius-sm);padding:.7rem .8rem;margin-top:.6rem;} .watch-block{display:block;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.8rem .9rem;margin:.4rem 0 1rem;text-decoration:none;transition:border-color .15s;} .watch-block:hover{border-color:var(--accent);} .watch-group{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem;flex-wrap:wrap;} .watch-group:last-of-type{margin-bottom:0;} .watch-group-label{font-size:.68rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em;flex:none;min-width:9rem;} .watch-logos{display:flex;gap:.4rem;flex-wrap:wrap;} .watch-logo{width:30px;height:30px;border-radius:8px;display:block;} .watch-credit{display:block;font-size:.64rem;color:var(--ink-faint);margin-top:.6rem;} /* ---------- Avatars ---------- */ .avatar{ border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none; font-family:var(--font-body);font-weight:800;color:#fff;text-transform:uppercase; } .avatar-sm{width:26px;height:26px;font-size:.68rem;} .avatar-md{width:38px;height:38px;font-size:.9rem;} .avatar-lg{width:64px;height:64px;font-size:1.5rem;} .avatar-xl{width:88px;height:88px;font-size:2rem;box-shadow:0 8px 22px rgba(0,0,0,.4);} /* ---------- Page profil (perso ou public) ---------- */ /* Plus une modale : une vraie page en flux normal (elle défile avec le reste du site), toujours présentée comme une grande carte pour rester cohérente avec le reste du design. L'animation d'entrée se rejoue à chaque navigation puisque l'élément passe par display:none entre deux visites (les animations CSS repartent de zéro quand un élément redevient visible). */ .modal.profile-page{ max-width:960px;width:100%;margin:1.6rem auto 3rem;height:auto;max-height:none;display:block;padding:0;overflow:hidden; animation:profilePageEnter .55s cubic-bezier(.2,.8,.25,1.05) both; } @keyframes profilePageEnter{from{opacity:0;transform:translateY(22px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}} /* ---------- Page fiche détail (film / série / anime) ---------- */ /* Même principe que la page profil : une vraie page en flux normal plutôt qu'une popup. Plein largeur, collée à la sidebar (pas de carte centrée) façon Disney+ : le bandeau backdrop va jusqu'aux bords de la zone de contenu plutôt que de flotter dans une marge. */ .modal.detail-page{ max-width:none;width:100%;margin:0 0 3rem;height:auto;max-height:none;overflow:visible;padding:0; border-radius:0;background:transparent;border:none;box-shadow:none; animation:profilePageEnter .55s cubic-bezier(.2,.8,.25,1.05) both; } .modal.detail-page .detail-banner{border-radius:0;} .modal.detail-page .detail-body{padding:1.9rem clamp(1.5rem,4vw,3rem) 2rem;} @media (max-width:640px){ .modal.detail-page{margin:0 0 2rem;} } /* ---------- Fiche acteur/actrice (filmographie TMDb) ---------- */ .modal.actor-page{ max-width:960px;width:100%;margin:1.6rem auto 3rem;height:auto;max-height:none;overflow:visible;padding:1.8rem 2rem 2.4rem; animation:profilePageEnter .55s cubic-bezier(.2,.8,.25,1.05) both;position:relative; } .actor-hero{display:flex;gap:1.5rem;align-items:flex-end;margin:2.6rem 0 1.6rem;} .actor-photo{ flex:none;width:130px;height:130px;border-radius:50%;overflow:hidden;background:var(--surface-2); border:2px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center; box-shadow:0 14px 32px rgba(0,0,0,.45); } .actor-photo img{width:100%;height:100%;object-fit:cover;display:block;} .actor-photo .cast-photo-fallback{font-size:2.4rem;} .actor-hero-text{flex:1;min-width:0;} .actor-hero-text h2{font-family:var(--font-display);font-weight:400;font-size:2rem;margin-bottom:.5rem;} .actor-hero-text .detail-overview{margin:0;max-height:6.6em;overflow-y:auto;} .actor-filmo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1.1rem;} .actor-filmo-card{display:flex;flex-direction:column;gap:.35rem;cursor:default;} .actor-filmo-poster{aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--surface-2);} .actor-filmo-poster img{width:100%;height:100%;object-fit:cover;display:block;} .actor-filmo-title{font-size:.78rem;font-weight:700;color:var(--ink);line-height:1.25;} .actor-filmo-meta{font-size:.7rem;color:var(--ink-faint);} .actor-filmo-card.in-catalog{cursor:pointer;} .actor-filmo-card.in-catalog:hover .actor-filmo-poster, .actor-filmo-card.in-catalog:focus-visible .actor-filmo-poster{box-shadow:0 0 0 2px var(--accent);} .actor-filmo-card.in-catalog:hover .actor-filmo-title, .actor-filmo-card.in-catalog:focus-visible .actor-filmo-title{color:var(--accent);} .actor-filmo-badge{font-size:.65rem;font-weight:700;color:var(--accent);} .trivia-credit{font-size:.68rem;color:var(--ink-faint);margin-top:.8rem;} @media (max-width:640px){ .modal.actor-page{margin:0 auto 2rem;border-radius:0;padding:1.4rem 1.2rem 2rem;} .actor-hero{flex-direction:column;align-items:flex-start;gap:1rem;} } .profile-back-btn{ position:absolute;top:1.2rem;left:1.2rem;z-index:2;background:rgba(10,12,20,.55);border:1px solid var(--line); color:var(--ink-dim);padding:.45rem .9rem;border-radius:999px;font-size:.78rem;font-weight:700;cursor:pointer; font-family:var(--font-body);transition:color .15s,border-color .15s; } .profile-back-btn:hover{color:var(--ink);border-color:var(--accent);} .profile-page .profile-hero{ position:relative;display:flex;gap:1.3rem;align-items:flex-end;padding:2.2rem 2rem 1.4rem;flex:none; background:linear-gradient(180deg, var(--surface-2), var(--surface));border-bottom:1px solid var(--line); overflow:hidden; } /* "Grande bannière" façon fiche détail (voir .detail-banner) : la hauteur ne s'applique que quand une image de fond est réellement chargée (.loaded) — sans ça, le dégradé de thème reste le petit bandeau d'origine, pas de grand espace vide pour les profils non personnalisés. */ .profile-hero-big{transition:min-height .4s ease;} .profile-hero-big:has(.profile-hero-bg.loaded){min-height:min(46vh,380px);padding-bottom:1.8rem;} .profile-hero-bg{ position:absolute;inset:0;opacity:.9;pointer-events:none;transition:opacity .4s ease,background .4s ease; animation:heroBgBreathe 6s ease-in-out infinite;background-size:cover;background-position:center 20%; } .profile-hero-bg.loaded{animation:none;opacity:1;} @keyframes heroBgBreathe{0%,100%{opacity:.72;}50%{opacity:1;}} .profile-hero-scrim{ position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease; background:linear-gradient(0deg, var(--surface) 0%, rgba(10,12,20,.4) 40%, transparent 75%), linear-gradient(100deg, rgba(4,5,9,.75) 0%, rgba(4,5,9,.3) 50%, transparent 85%); } .profile-hero-bg.loaded ~ .profile-hero-scrim{opacity:1;} .profile-hero > *:not(.profile-hero-bg):not(.profile-hero-scrim){position:relative;z-index:1;} .avatar-xl{border:3px solid rgba(255,255,255,.18);position:relative;} .avatar-xl::before{ content:"";position:absolute;inset:-6px;border-radius:50%;z-index:-1;filter:blur(3px); background:conic-gradient(from 0deg, var(--ring-a, var(--accent)), var(--ring-b, #ff9f5a), var(--ring-a, var(--accent))); animation:avatarRingSpin 5s linear infinite; } @keyframes avatarRingSpin{to{transform:rotate(360deg);}} /* ---------- Thèmes MCU (fond de la page profil) ---------- */ /* --ring-a/--ring-b alimentent l'anneau animé derrière l'avatar (mêmes teintes que la pastille de thème correspondante dans le sélecteur, pour rester cohérent). */ #profilePage[data-theme="classic"] .profile-hero-bg{background:radial-gradient(ellipse at 30% 20%, rgba(245,185,61,.22), transparent 60%);} #profilePage[data-theme="ironman"]{--ring-a:#c41e1e;--ring-b:#d4a017;} #profilePage[data-theme="ironman"] .profile-hero-bg{background:linear-gradient(120deg, rgba(196,30,30,.5), rgba(212,160,23,.35));} #profilePage[data-theme="captain"]{--ring-a:#1e46b4;--ring-b:#c41e1e;} #profilePage[data-theme="captain"] .profile-hero-bg{background:linear-gradient(120deg, rgba(30,70,180,.45), rgba(196,30,30,.3), rgba(255,255,255,.08));} #profilePage[data-theme="thor"]{--ring-a:#78aaff;--ring-b:#d4a017;} #profilePage[data-theme="thor"] .profile-hero-bg{background:radial-gradient(ellipse at 70% 10%, rgba(120,170,255,.4), transparent 55%),linear-gradient(160deg, rgba(20,20,50,.6), rgba(212,160,23,.25));} #profilePage[data-theme="hulk"]{--ring-a:#3cb45a;--ring-b:#6e3cb4;} #profilePage[data-theme="hulk"] .profile-hero-bg{background:linear-gradient(120deg, rgba(60,180,90,.4), rgba(110,60,180,.35));} #profilePage[data-theme="wakanda"]{--ring-a:#7838c8;--ring-b:#9c6fe0;} #profilePage[data-theme="wakanda"] .profile-hero-bg{background:linear-gradient(120deg, rgba(120,60,200,.45), rgba(10,10,20,.5));} #profilePage[data-theme="strange"]{--ring-a:#ff8c28;--ring-b:#1e96b4;} #profilePage[data-theme="strange"] .profile-hero-bg{background:radial-gradient(ellipse at 60% 30%, rgba(255,140,40,.4), transparent 55%),linear-gradient(160deg, rgba(30,150,180,.3), transparent);} #profilePage[data-theme="loki"]{--ring-a:#1e8c5a;--ring-b:#c8a028;} #profilePage[data-theme="loki"] .profile-hero-bg{background:linear-gradient(120deg, rgba(30,140,90,.45), rgba(200,160,40,.3));} #profilePage[data-theme="guardians"]{--ring-a:#ff8c28;--ring-b:#8c3cc8;} #profilePage[data-theme="guardians"] .profile-hero-bg{background:radial-gradient(ellipse at 30% 70%, rgba(255,140,40,.3), transparent 55%),linear-gradient(150deg, rgba(140,60,200,.4), rgba(20,20,50,.5));} .theme-swatches{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.4rem;} .theme-swatch{ width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex:none; transition:transform .12s,border-color .12s; } .theme-swatch:hover{transform:scale(1.1);} .theme-swatch[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px var(--ground);} .theme-swatch[data-theme="classic"]{background:linear-gradient(135deg,#f5b93d,#0a0c14);} .theme-swatch[data-theme="ironman"]{background:linear-gradient(135deg,#c41e1e,#d4a017);} .theme-swatch[data-theme="captain"]{background:linear-gradient(135deg,#1e46b4,#c41e1e,#fff);} .theme-swatch[data-theme="thor"]{background:linear-gradient(135deg,#78aaff,#141432,#d4a017);} .theme-swatch[data-theme="hulk"]{background:linear-gradient(135deg,#3cb45a,#6e3cb4);} .theme-swatch[data-theme="wakanda"]{background:linear-gradient(135deg,#7838c8,#0a0a14);} .theme-swatch[data-theme="strange"]{background:linear-gradient(135deg,#ff8c28,#1e96b4);} .theme-swatch[data-theme="loki"]{background:linear-gradient(135deg,#1e8c5a,#c8a028);} .theme-swatch[data-theme="guardians"]{background:linear-gradient(135deg,#ff8c28,#8c3cc8);} .profile-hero-text{flex:1 1 auto;min-width:0;} .profile-hero-text h2{font-family:var(--font-display);font-weight:400;font-size:2rem;letter-spacing:.01em;line-height:1;} .profile-bio-static{font-size:.85rem;color:var(--ink-dim);margin-top:.4rem;max-width:56ch;} #profileEditView input{margin-bottom:.5rem;} #profileEditView textarea{margin-bottom:.6rem;min-height:3rem;} #profileEditView button{width:auto;padding:.55rem .9rem;} .profile-page .modal-error{padding:0 2rem;} .profile-page .profile-stats{padding:1.2rem 2rem 0;margin:0;} .profile-section-title{ font-family:var(--font-body);font-weight:800;font-size:.82rem;letter-spacing:.02em;color:var(--ink-dim); padding:1.3rem 2rem .2rem;flex:none; } .profile-breakdown{padding:.2rem 2rem 1rem;flex:none;display:flex;flex-direction:column;gap:.55rem;} .breakdown-row{display:flex;align-items:center;gap:.7rem;} .breakdown-label{flex:0 0 108px;font-size:.72rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .breakdown-track{flex:1 1 auto;height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;} .breakdown-fill{height:100%;border-radius:5px;width:0;transition:width .6s cubic-bezier(.2,.8,.25,1);} .breakdown-pct{flex:0 0 46px;text-align:right;font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);} .badges-grid{ padding:.2rem 2rem 1rem;flex:none; display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.7rem; } .badge-rarity-filter{display:flex;gap:.4rem;flex-wrap:wrap;padding:0 2rem .6rem;} .badge-rarity-filter button{ font-family:var(--font-body);font-weight:600;font-size:.7rem;padding:.32rem .7rem;border-radius:999px; background:transparent;border:1px solid var(--line);color:var(--ink-faint);cursor:pointer;transition:background .15s,color .15s,border-color .15s; } .badge-rarity-filter button:hover{color:var(--ink);border-color:var(--accent);} .badge-rarity-filter button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);} .badge-tile{ position:relative;text-align:center;padding:.8rem .5rem;border-radius:var(--radius-sm); background:var(--surface-2);border:1px solid var(--line);transition:transform .15s,border-color .15s; opacity:0;animation:badgePopIn .45s cubic-bezier(.34,1.3,.4,1) both; } .badge-tile.locked{animation-name:badgePopInLocked;filter:grayscale(1);} .badge-tile.earned{border-color:var(--rarity-color, var(--accent));box-shadow:0 0 14px -6px var(--rarity-color, var(--accent-glow));} .badge-tile:hover{transform:translateY(-2px) scale(1.04);} @keyframes badgePopIn{from{opacity:0;transform:scale(.6) translateY(6px);}to{opacity:1;transform:scale(1) translateY(0);}} @keyframes badgePopInLocked{from{opacity:0;transform:scale(.6) translateY(6px);}to{opacity:.4;transform:scale(1) translateY(0);}} .badge-rarity-tag{ position:absolute;top:.35rem;right:.35rem;font-family:var(--font-mono);font-size:.52rem;font-weight:700; text-transform:uppercase;letter-spacing:.03em;color:var(--rarity-color, var(--ink-faint));opacity:.85; } .badge-icon{font-size:1.6rem;line-height:1;margin-bottom:.35rem;} .badge-name{font-size:.68rem;font-weight:700;color:var(--ink-dim);line-height:1.25;} .badge-tile.earned .badge-name{color:var(--ink);} .badge-progress{font-family:var(--font-mono);font-size:.62rem;color:var(--ink-faint);margin-top:.25rem;} .badge-tile.earned .badge-progress{color:var(--rarity-color, var(--accent));} .profile-ratings-grid{ padding:.2rem 2rem 1rem; display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:1rem; } .rating-tile{cursor:pointer;position:relative;} .rating-tile .poster-wrap{aspect-ratio:2/3;border-radius:10px;} .rating-tile .tile-score{ position:absolute;top:.35rem;right:.35rem;font-family:var(--font-mono);font-weight:700;font-size:.68rem; background:var(--accent);color:var(--accent-ink);padding:.15rem .4rem;border-radius:5px; } .rating-tile .tile-remove{ position:absolute;top:.35rem;left:.35rem;width:20px;height:20px;border-radius:50%;background:rgba(10,12,20,.75); color:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer; } .rating-tile .tile-title{font-size:.72rem;font-weight:600;color:var(--ink-dim);margin-top:.35rem;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .profile-page .modal-actions{padding:1.2rem 2rem;margin:0;border-top:1px solid var(--line);flex:none;} @media (max-width:640px){ /* Le bouton "Retour" en position absolue chevauche le champ pseudo une fois le hero compressé pour mobile — on le remet dans le flux normal, au-dessus du hero. */ .profile-back-btn{position:static;display:inline-flex;margin:1rem 0 0 1.2rem;} .profile-page .profile-hero{padding:1rem 1.2rem 1.1rem;gap:.9rem;} .avatar-xl{width:64px;height:64px;font-size:1.5rem;} .profile-hero-text h2{font-size:1.5rem;} .profile-page .profile-stats,.profile-section-title,.profile-breakdown,.badge-rarity-filter,.badges-grid,.carousel-row,.profile-ratings-grid,.profile-page .modal-actions,.level-pill-row{padding-left:1.2rem;padding-right:1.2rem;} .profile-hero-big:has(.profile-hero-bg.loaded){min-height:min(34vh,260px);} } /* ---------- Membres ---------- */ .members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;} .member-card{ display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:.9rem 1rem;cursor:pointer;transition:border-color .15s,transform .1s; } .member-card:hover{border-color:var(--accent);transform:translateY(-2px);} .member-info{min-width:0;flex:1 1 auto;} .member-name{font-weight:700;font-size:.9rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .member-bio{font-size:.74rem;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.1rem;} .member-count{font-family:var(--font-mono);font-size:.62rem;color:var(--ink-faint);margin-top:.25rem;} /* ---------- Chat & messagerie ---------- */ .chat-modal{display:flex;flex-direction:column;max-height:82vh;} .chat-messages{ flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem; padding:.4rem 0;min-height:220px;max-height:46vh; } .chat-msg{display:flex;gap:.6rem;align-items:flex-start;} .chat-msg.mine{flex-direction:row-reverse;} .chat-bubble{ background:var(--surface-2);border:1px solid var(--line);border-radius:14px 14px 14px 4px; padding:.55rem .8rem;max-width:75%;font-size:.83rem;line-height:1.45;color:var(--ink); } .chat-msg.mine .chat-bubble{background:var(--accent-soft);border-color:transparent;border-radius:14px 14px 4px 14px;color:var(--ink);} .chat-msg-delete{ float:right;margin:0 -.25rem 0 .5rem;background:transparent;border:none;color:inherit;opacity:.45; cursor:pointer;font-size:.68rem;padding:.1rem .15rem;line-height:1; } .chat-msg-delete:hover{opacity:1;color:var(--mcu);} .chat-meta{display:flex;gap:.5rem;align-items:baseline;margin-bottom:.15rem;} .chat-author{font-weight:700;font-size:.74rem;color:var(--accent);cursor:pointer;} .chat-author:hover{text-decoration:underline;} .chat-time{font-family:var(--font-mono);font-size:.6rem;color:var(--ink-faint);} .chat-input-row{display:flex;gap:.5rem;margin-top:.8rem;flex:none;} .chat-input-row input{flex:1 1 auto;} .chat-input-row button{flex:none;width:auto;padding:.6rem .9rem;border-radius:50%;aspect-ratio:1;} .chat-empty{color:var(--ink-faint);font-size:.8rem;text-align:center;padding:2rem 1rem;} .conversation-row{ display:flex;align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--line-soft); cursor:pointer; } .conversation-row:hover .member-name{color:var(--accent);} .conversation-preview{font-size:.76rem;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.1rem;} /* ---------- Jeux ---------- */ .games-hub{display:flex;gap:1.3rem;flex-wrap:wrap;justify-content:center;padding:1.5rem 0 2.5rem;max-width:760px;margin:0 auto;} .game-mode-card{ flex:1 1 280px;max-width:340px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:1.6rem 1.4rem;text-align:center;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .2s; } .game-mode-card:hover{transform:translateY(-3px);border-color:#c58cff;box-shadow:0 14px 30px -10px rgba(197,140,255,.4);} .game-mode-card .icon{font-size:2.4rem;margin-bottom:.6rem;} .game-mode-card h3{font-family:var(--font-display);font-weight:400;font-size:1.5rem;color:var(--ink);margin-bottom:.4rem;} .game-mode-card p{font-size:.8rem;color:var(--ink-dim);line-height:1.5;} .game-mode-card .best-score{margin-top:.7rem;font-family:var(--font-mono);font-size:.7rem;color:#c58cff;} .game-panel{max-width:600px;margin:0 auto;padding:0 0 2rem;} .game-progress{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;gap:1rem;} .game-progress-bar{flex:1 1 auto;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;} .game-progress-bar-fill{height:100%;background:linear-gradient(90deg,#c58cff,var(--accent));transition:width .3s ease;} .game-score{font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--ink-dim);white-space:nowrap;} .game-back{background:transparent;border:none;color:var(--ink-faint);font-size:.76rem;cursor:pointer;margin-bottom:.8rem;text-decoration:underline;} .quiz-question{ font-family:var(--font-display);font-weight:400;font-size:1.6rem;line-height:1.15;color:var(--ink); text-align:center;margin-bottom:1.6rem;text-wrap:balance; } .quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;} @media (max-width:520px){ .quiz-choices{grid-template-columns:1fr;} } .quiz-choice{ font-family:var(--font-body);font-weight:600;font-size:.86rem;text-align:left; padding:.85rem 1.1rem;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line); color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,transform .1s; } .quiz-choice:hover:not(:disabled){border-color:#c58cff;transform:translateY(-1px);} .quiz-choice:disabled{cursor:default;} .quiz-choice.correct{background:var(--global-soft);border-color:var(--global);color:var(--global);} .quiz-choice.wrong{background:var(--mcu-soft);border-color:var(--mcu);color:var(--mcu-light,#ff8f9a);} .quiz-next{ display:block;margin:1.4rem auto 0;padding:.75rem 1.7rem;border-radius:999px;border:none; background:var(--accent);color:var(--accent-ink);font-weight:700;font-family:var(--font-body);font-size:.85rem; cursor:pointer;transition:transform .1s,box-shadow .2s; } .quiz-next:hover{transform:translateY(-1px);box-shadow:0 8px 22px -6px var(--accent-glow);} .game-results{text-align:center;padding:2rem 0;} .game-results .result-score{font-family:var(--font-display);font-size:3.2rem;color:#c58cff;line-height:1;margin:.6rem 0;} .game-results p{color:var(--ink-dim);font-size:.85rem;margin-bottom:1.6rem;} .game-results .modal-actions{max-width:360px;margin:0 auto;} /* ---------- Jeu Memory ---------- */ .memory-panel{max-width:760px;} .memory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.7rem;perspective:1000px;} .memory-card{aspect-ratio:2/3;border:none;background:none;padding:0;cursor:pointer;} .memory-card:disabled{cursor:default;} .memory-card-inner{ position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.2,.8,.25,1.05); transform-style:preserve-3d;border-radius:10px; } .memory-card.flipped .memory-card-inner{transform:rotateY(180deg);} .memory-card-back,.memory-card-front{ position:absolute;inset:0;backface-visibility:hidden;border-radius:10px;overflow:hidden; display:flex;align-items:center;justify-content:center; } .memory-card-back{ background:linear-gradient(150deg,#2a1d40,#171225);border:1px solid rgba(197,140,255,.35); font-size:1.6rem;color:#c58cff; } .memory-card-front{transform:rotateY(180deg);background:var(--surface-2);} .memory-card-front img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s;} .memory-card-front img.loaded{opacity:1;} .memory-card-front svg{width:100%;height:100%;} .memory-card.matched .memory-card-inner{opacity:.5;} .memory-card:not(:disabled):hover .memory-card-back{border-color:#c58cff;} footer{max-width:1180px;margin:3rem auto 0;padding:1.5rem 1.5rem 0;border-top:1px solid var(--line);} footer p{font-size:.76rem;color:var(--ink-faint);line-height:1.65;max-width:68ch;margin-bottom:.65rem;} footer strong{color:var(--ink-dim);} .tmdb-attrib{display:flex;align-items:center;gap:.5rem;margin-top:1rem;} /* ---------- Gant de l'Infini (easter egg "Snap") ---------- */ /* Fond de secours toujours noir sous : pendant le Snap, la page et le carrousel d'affiches (tous deux à l'intérieur de #pageWrap) disparaissent complètement — sans ce noir de base, on verrait transparaître le blanc par défaut du navigateur, pas le vide. */ html{background:var(--ground);} /* Le "trou qui grandit" façon dissolution du Snap : un semis de petits ronds transparents répété en mosaïque, dont le rayon grandit jusqu'à ronger entièrement le contenu — bien plus proche de la désintégration du film qu'un simple fondu uniforme. */ @property --hole-r{ syntax:''; inherits:false; initial-value:0px; } #pageWrap{ --hole-r:0px; /* Le bord doux ("+1.4px" fixe) doit rester proportionnel à --hole-r plutôt que constant : un décalage fixe laissait un anneau transparent résiduel même à --hole-r:0px, donc un semis de points visible en permanence sur tout le site — pas seulement pendant le Snap. */ -webkit-mask-image:repeating-radial-gradient(circle at center, transparent 0, transparent calc(var(--hole-r) * .82), #000 var(--hole-r), #000 8px); mask-image:repeating-radial-gradient(circle at center, transparent 0, transparent calc(var(--hole-r) * .82), #000 var(--hole-r), #000 8px); -webkit-mask-size:8px 8px;mask-size:8px 8px; transition:opacity .9s cubic-bezier(.4,0,.2,1), filter .9s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.4,0,.2,1), --hole-r .9s cubic-bezier(.4,0,.2,1); } #pageWrap.snap-out{ opacity:0;filter:blur(3px) brightness(1.35) saturate(.3);transform:scale(1.015); --hole-r:8px;pointer-events:none; } #pageWrap.snap-hidden{visibility:hidden;} #thanosGauntlet{ position:fixed;bottom:-46px;right:28px;z-index:90;width:74px;height:84px;padding:0; background:none;border:none;cursor:pointer; transition:bottom .35s cubic-bezier(.34,1.56,.64,1),filter .3s; filter:drop-shadow(0 -4px 14px rgba(0,0,0,.5)); } #thanosGauntlet svg{width:100%;height:100%;display:block;} #thanosGauntlet:hover,#thanosGauntlet:focus-visible{bottom:-14px;filter:drop-shadow(0 -6px 20px rgba(197,140,255,.5));} #thanosGauntlet:disabled{cursor:default;} #thanosGauntlet.snapping{animation:gauntletSnap .5s ease;} @keyframes gauntletSnap{ 0%{transform:none;} 30%{transform:scale(1.15) rotate(-4deg);} 55%{transform:scale(.92) rotate(3deg);} 100%{transform:none;} } #snapParticles{position:fixed;inset:0;z-index:95;pointer-events:none;overflow:hidden;} /* Cendre grise (majorité) + quelques braises orangées, comme dans le film — plus le doré scintillant d'avant, qui ressemblait à des paillettes plutôt qu'à de la désintégration. */ .ash-particle{ position:absolute;border-radius:50%; background:radial-gradient(circle at 35% 30%, #cfcac0, #6b6459 55%, #2c2822 100%); box-shadow:0 0 3px rgba(255,150,90,.3); opacity:0;animation:ashDrift ease-out forwards; } .ash-particle.ember{ background:radial-gradient(circle at 35% 30%, #ffb15e, #d9713c 60%, #5c2c12 100%); box-shadow:0 0 5px rgba(255,140,60,.65); } @keyframes ashDrift{ 0%{opacity:0;transform:translate(0,0) scale(1) rotate(0deg);} 10%{opacity:1;} 70%{opacity:.85;} 100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.25) rotate(var(--rot));} } /* ---------- Notifications toast ---------- */ .toast-container{ position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:200; display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;width:100%;padding:0 1rem; } .toast{ pointer-events:auto;background:var(--surface-2);border:1px solid var(--line);color:var(--ink); padding:.7rem 1.1rem;border-radius:999px;font-size:.82rem;font-weight:600;box-shadow:0 10px 28px rgba(0,0,0,.45); display:flex;align-items:center;gap:.5rem;max-width:90vw;animation:toastIn .25s ease both; } .toast.success{border-color:rgba(76,224,160,.4);} .toast.success::before{content:"✓";color:var(--global);font-weight:800;} .toast.error{border-color:rgba(255,77,94,.4);} .toast.error::before{content:"!";color:var(--mcu);font-weight:800;} .toast.leaving{animation:toastOut .2s ease both;} @keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.95);}to{opacity:1;transform:none;}} @keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.95);}} @media (max-width:640px){ .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem .8rem;} .app-topbar-search{flex-basis:160px;} }