:root{
  color-scheme:dark;
  --bg:#151824;--bg2:#1c2030;--surface:#232838;--surface2:#2d3348;--line:#3a4260;
  --text:#eef1f8;--muted:#a6aec8;--amber:#f5b942;--amber-ink:#2a1c00;--violet:#8b68e8;--violet-accessible:#7255d0;--red:#c9402b;--green:#4cc27f;
  --font-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-pixel:"Jersey 15",ui-monospace,"Courier New",monospace;
  --pxs:1.25; /* Jersey 15 est étroite : tous les textes en pixels sont agrandis de ce facteur (à ajuster si la police change) */
  --pad:clamp(16px,4vw,56px);
}
/* L'attribut hidden doit toujours gagner, même face à un display:grid ou flex */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--font-body);-webkit-text-size-adjust:100%;min-height:100vh;display:flex;flex-direction:column}
#app{flex:1 0 auto}
a{color:inherit}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
/* Cases à cocher (tout le site, admin compris) : bleu foncé, puis ambre avec une coche une fois cochées */
input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;flex:none;width:22px;height:22px;margin:0;background:var(--bg);border:2px solid var(--line);border-radius:0;vertical-align:middle;cursor:pointer}
input[type=checkbox]::before{content:"";width:58%;height:58%;min-width:10px;min-height:10px;background:var(--amber-ink);clip-path:polygon(14% 44%,0 65%,45% 100%,100% 18%,82% 2%,42% 62%);transform:scale(0)}
input[type=checkbox]:hover{border-color:var(--amber)}
input[type=checkbox]:checked{background:var(--amber);border-color:var(--amber)}
input[type=checkbox]:checked::before{transform:scale(1)}
input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
h1,h2,h3{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
h1:focus{outline:none}

/* ---------- Défilement fluide (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
/* Pendant le défilement, l'iframe YouTube ne capture pas la molette (les clics restent normaux le reste du temps) */
.lenis.lenis-scrolling iframe{pointer-events:none}

/* ---------- En-tête ---------- */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;height:60px;padding:0 var(--pad);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-pixel);font-weight:700;font-size:calc(24px*var(--pxs));white-space:nowrap}
.logo svg{width:28px;height:28px}
/* Logo personnalisé (déposé dans img/, voir js/brand.js) */
.logo-img{display:block;height:44px;width:auto;max-width:200px;object-fit:contain}
.brand-pending .logo{visibility:hidden}
.top nav{display:flex;gap:4px}
.top nav a{display:flex;align-items:center;height:60px;padding:0 12px;text-decoration:none;color:var(--muted);font-weight:700}
.top nav a:hover{color:var(--text)}
.top nav a[aria-current=page]{color:var(--text);box-shadow:inset 0 -3px 0 var(--amber)}
.search{position:relative;flex:1;max-width:320px;margin-left:auto}
.field{width:100%;height:44px;padding:0 12px;background:var(--surface);border:2px solid var(--line);border-radius:0;color:var(--text)}
.field::placeholder{color:var(--muted)}
textarea.field{height:auto;padding:10px 12px;resize:vertical}

/* ---------- Boutons (bevel façon bloc) ---------- */
.btn{--c:var(--surface2);--ink:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:0;background:var(--c);color:var(--ink);font-weight:700;text-decoration:none;cursor:pointer;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),inset 3px 3px 0 rgba(255,255,255,.22),0 0 0 2px rgba(0,0,0,.55)}
/* Au survol (et au clic), le bouton s'enfonce : le relief s'inverse */
.btn:is(:hover,:active):not([aria-disabled=true]){box-shadow:inset 3px 3px 0 rgba(0,0,0,.3),inset -3px -3px 0 rgba(255,255,255,.22),0 0 0 2px rgba(0,0,0,.55)}
.btn.primary{--c:var(--amber);--ink:var(--amber-ink)}
.btn.glass{--c:rgba(255,255,255,.2);--ink:#fff}
.btn.danger{--c:var(--red);--ink:#fff}
.btn[aria-pressed=true]{--c:var(--violet);--ink:#fff}
.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.btn .tri{flex:none;width:8px;height:14px;fill:currentColor}   /* triangle « lecture » en pixels */

/* ---------- Bannière d'accueil ---------- */
.hero{position:relative;height:clamp(480px,80vh,700px);margin-top:-60px;overflow:hidden;background:#0c0e16}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.slide.on{opacity:1;visibility:visible}
.slide .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bgph{background:linear-gradient(135deg,#2d3348,#151824)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,11,19,.88) 0%,rgba(9,11,19,.5) 48%,rgba(9,11,19,.05) 80%),linear-gradient(0deg,var(--bg) 0%,transparent 34%)}
.slide .in{position:absolute;z-index:1;left:var(--pad);right:var(--pad);bottom:76px;max-width:640px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.slide .btn{text-shadow:none}   /* l'ombre sert au texte posé sur l'image, pas aux boutons qui ont leur propre fond */
.status{display:inline-block;padding:2px 10px;background:var(--red);font-size:14px;font-weight:700;margin-bottom:10px}
.status-badge{display:block;height:28px;width:auto;margin-bottom:10px}
.slide h2{font-family:var(--font-pixel);font-weight:700;font-size:calc(clamp(36px,7vw,68px)*var(--pxs));line-height:.98;margin-bottom:12px}
/* Logo du titre : uniquement dans le carrousel de l'accueil */
.slide h2 .logo-img{width:auto;height:auto;max-width:min(460px,80vw);max-height:170px;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 4px 14px rgba(0,0,0,.65))}
.genres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.genres span{font-size:14px;padding:2px 10px;border:1px solid rgba(255,255,255,.55)}
/* Carrousel : la note à gauche, les genres à sa droite, sur une même ligne (empilés sur téléphone) */
.hero-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin-bottom:12px}
.hero-meta>*{margin:0}
.slide p{margin:0 0 18px;max-width:56ch;font-size:clamp(15px,2vw,17px);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.dots{position:absolute;z-index:2;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:6px}
.dots button{width:28px;height:28px;padding:0;background:transparent;border:0;cursor:pointer;display:grid;place-items:center}
.dots button::before{content:"";width:14px;height:14px;background:rgba(255,255,255,.35);box-shadow:0 0 0 2px rgba(0,0,0,.5)}
.dots button[aria-current=true]::before{background:var(--amber)}
.hero-prog{height:3px;overflow:hidden}
.hero-prog i{display:block;height:100%;width:100%;background:var(--amber);transform:scaleX(0);transform-origin:left}
.hero-prog.pausing i{transition:transform .4s ease}

/* ---------- Rangées ---------- */
.rows{padding:0 var(--pad) 32px}
.faq{padding:8px var(--pad) 44px}
.faq h2{font-family:var(--font-pixel);font-size:calc(clamp(32px,6vw,52px)*var(--pxs));text-align:center;margin:0 0 26px}
.faq details{border:2px solid var(--line);background:var(--surface);margin-bottom:8px}
.faq summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;line-height:1;color:var(--muted);flex:none;transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-body{height:0;overflow:hidden;transition:height .35s ease}
.faq-body p{margin:0;padding:0 16px 16px;max-width:70ch;color:var(--muted)}
.faq-more{margin:16px 0 0;color:var(--muted)}
.faq-more a{color:var(--amber)}
.row{margin:30px 0 0}
.row-head{margin-bottom:12px}
.row h2,.page h1{font-family:var(--font-pixel);font-weight:700;font-size:calc(clamp(22px,3vw,28px)*var(--pxs));line-height:1.1}
.rail-wrap{position:relative}
/* position:relative : sans elle, un element en position absolue dans une carte (le texte reserve aux lecteurs d'ecran) n'est pas coupe par la rangee et elargit toute la page sur telephone */
.rail{position:relative;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;margin:0 calc(var(--pad)*-1);padding:6px var(--pad) 10px;scroll-padding:0 var(--pad);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
/* Barres de défilement du site (page, menus, fenêtres) : un bloc en relief façon Minecraft dans une gouttière sombre, orange au survol.
   Chrome, Edge, l'application Windows et Safari lisent ::-webkit-scrollbar ; Firefox n'accepte que deux couleurs (scrollbar-color). */
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:var(--bg2);box-shadow:inset 2px 0 0 rgba(0,0,0,.35)}
::-webkit-scrollbar-thumb{background:var(--surface2);border:3px solid var(--bg2);box-shadow:inset -2px -2px 0 rgba(0,0,0,.35),inset 2px 2px 0 rgba(255,255,255,.14)}
::-webkit-scrollbar-thumb:hover{background:var(--amber)}
::-webkit-scrollbar-thumb:active{background:var(--amber);box-shadow:inset 2px 2px 0 rgba(0,0,0,.35),inset -2px -2px 0 rgba(255,255,255,.2)}
::-webkit-scrollbar-corner{background:var(--bg2)}
@supports not selector(::-webkit-scrollbar){*{scrollbar-color:var(--surface2) var(--bg2)}}
.rail>*{scroll-snap-align:start}
.rail-btn{position:absolute;top:6px;bottom:10px;width:48px;display:none;place-items:center;border:0;background:linear-gradient(90deg,var(--bg),transparent);color:var(--text);font-size:34px;cursor:pointer;z-index:2}
.rail-btn.next{right:calc(var(--pad)*-1);background:linear-gradient(270deg,var(--bg),transparent)}
.rail-btn.prev{left:calc(var(--pad)*-1)}
@media (hover:hover) and (min-width:900px){.rail-wrap:hover .rail-btn{display:grid}}

/* Cartes affiche (2:3) */
.card{position:relative;flex:0 0 auto;display:block;width:clamp(132px,17vw,188px);aspect-ratio:2/3;overflow:hidden;background:var(--surface);text-decoration:none;color:#fff}
.card .art{width:100%;height:100%;object-fit:cover}
.card:hover,.ecard:hover .thumb{box-shadow:0 0 0 3px var(--amber)}
.ph{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;font-family:var(--font-pixel);font-size:calc(20px*var(--pxs));background:linear-gradient(160deg,var(--surface2),var(--bg2))}
.card .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 10px 10px;background:linear-gradient(0deg,rgba(8,10,18,.94) 20%,transparent);display:flex;flex-direction:column;gap:2px}
.card .cap strong{font-family:var(--font-pixel);font-weight:600;font-size:calc(17px*var(--pxs));line-height:1.05}
.card .cap small{font-size:12.5px;opacity:.85}
.tag{position:absolute;top:8px;left:8px;font-size:12px;font-weight:700;padding:1px 7px;color:#fff;background:rgba(9,11,19,.82)}
.badges-r{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.new,.age{font-size:12px;font-weight:700;padding:1px 7px;color:#fff;background:rgba(9,11,19,.82)}
.age{border:1px solid rgba(255,255,255,.7)}
/* Les couleurs de badge : violet = film, rouge = série, vert = court format, blanc = nouveau */
.tag.film,.status.film{background:var(--violet-accessible)}
.tag.court,.status.court{background:#1d7a44}
.tag.serie,.status.serie{background:var(--red)}
.new,.tag.new,.status.new{background:#fff;color:#000}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
.grid .card{width:auto}

/* Cartes épisode (16:9) */
.ecard{flex:0 0 auto;width:clamp(220px,27vw,300px);text-decoration:none}
.thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface)}
.thumb img{width:100%;height:100%;object-fit:cover}
.ecard .play{position:absolute;inset:0;display:grid;place-items:center}
.ecard .play::before{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
.bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(0,0,0,.6)}
.bar b{display:block;height:100%;background:var(--amber)}
.ecard .meta{display:block;padding-top:8px;line-height:1.25}
.ecard .meta strong,.ecard .meta small{display:block}
.ecard .meta small{color:var(--muted)}

/* ---------- Pages ---------- */
.page{padding:28px var(--pad) 40px}
.page h1{margin-bottom:16px}
.empty-home{min-height:60vh;display:grid;place-content:center;justify-items:start;gap:14px;max-width:560px;margin:0 auto}
.empty-home p{margin:0;color:var(--muted)}
.empty{grid-column:1/-1;padding:32px 0;color:var(--muted)}
.empty .btn{margin-top:12px}
.filters{display:flex;flex-wrap:wrap;gap:14px 28px;margin:0 0 18px;align-items:flex-end}
/* Filtres en boutons déroulants */
.dds{gap:10px 12px}
.dd{position:relative}
.dd-btn{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:var(--surface);border:2px solid var(--line);border-radius:0;cursor:pointer;color:var(--text);text-align:left}
.dd-btn:hover,.dd-btn[aria-expanded=true]{background:var(--surface2)}
.dd-btn.active{border-color:var(--amber)}
.dd-lab{color:var(--muted)}
.dd-val{font-weight:700}
.dd-btn .acc-chev{margin-left:4px}
.dd-btn[aria-expanded=true] .acc-chev{transform:rotate(-90deg)}
.dd-panel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;display:flex;flex-direction:column;gap:6px;min-width:240px;max-width:min(92vw,520px);max-height:min(60vh,340px);overflow:auto;padding:10px;background:var(--surface);border:2px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.55)}
.dd-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--amber);color:var(--amber-ink);font-size:12px;font-weight:700}
.filters-panel{gap:0}
.facc{border-bottom:1px solid var(--line)}
.facc:last-child{border-bottom:0}
.facc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:8px 2px;background:transparent;border:0;cursor:pointer;color:var(--text);text-align:left}
/* Le nom du filtre a une largeur fixe : les valeurs (« Tous »…) commencent toutes au même endroit, la flèche reste à droite */
.facc-head .dd-lab{flex:none;width:76px}
.facc-head .dd-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.facc-head:hover{color:var(--amber)}
.facc-head[aria-expanded=true] .acc-chev{transform:rotate(-90deg)}
.fchips{display:flex;flex-direction:column;gap:6px;padding:0 0 12px}
.qsug{position:absolute;z-index:41;top:calc(100% + 6px);left:0;right:0;max-height:min(70vh,420px);overflow:auto;background:var(--surface);border:2px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.55)}
.qsug ul{list-style:none;margin:0;padding:6px}
.qsug-item{display:flex;align-items:center;gap:10px;padding:6px;cursor:pointer}
.qsug-item:hover,.qsug-item.active{background:var(--surface2)}
.qsug-th{flex:none;width:36px;height:54px;object-fit:cover;background:var(--bg2)}
.qsug-th.ph{display:flex}
.qsug-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.qsug-meta strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qsug-meta small{color:var(--muted)}
.qsug-empty{margin:0;padding:14px 12px;color:var(--muted);font-size:14px}
.chip{min-height:38px;padding:0 12px;background:var(--surface);border:2px solid var(--line);border-radius:0;cursor:pointer;text-align:left}
.chip[aria-pressed=true]{background:var(--amber);border-color:var(--amber);color:var(--amber-ink);font-weight:700}
.chk{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.chk input{width:20px;height:20px;accent-color:var(--amber)}
.count{color:var(--muted);margin:0 0 14px}

/* Fiche d'un titre : le nom s'affiche en texte (pas de logo ici) */
/* Fiche d'un titre : fond flouté, affiche et informations à gauche, titre puis épisodes à droite */
.sd{position:relative;margin-top:-60px;padding:110px var(--pad) 48px;min-height:100vh;overflow:hidden}
.sd .bg{position:absolute;top:0;left:0;width:100%;height:100vh;object-fit:cover;filter:blur(16px);transform:scale(1.12)}
.sd::after{content:"";position:absolute;top:0;left:0;right:0;height:112vh;background:linear-gradient(0deg,var(--bg) 12%,rgba(9,11,19,.72) 45%,rgba(9,11,19,.55))}
.sd .wrap{position:relative;z-index:1;display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-areas:"side main" "side eps";grid-template-rows:auto 1fr;gap:26px 36px;align-items:start;color:#fff}
.sd-back{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-14px 0 10px;padding:0;background:none;border:0;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.sd-back:hover{color:var(--amber)}
.draft-bar{position:relative;z-index:1;margin:0 0 16px;padding:10px 14px;background:var(--amber);color:var(--amber-ink);font-weight:700}   /* aperçu d'un brouillon (admin) */

.sd-side{grid-area:side;display:grid;gap:14px}
.sd-main{grid-area:main}
.sd-eps{grid-area:eps}
.sd .poster{position:relative;aspect-ratio:2/3;width:100%;overflow:hidden;background:var(--surface);box-shadow:0 0 0 3px rgba(0,0,0,.6),0 18px 50px rgba(0,0,0,.55)}
.sd .poster img{width:100%;height:100%;object-fit:cover}
.sd-info{display:grid;gap:12px;justify-items:center;text-align:center}
.sd-info .rate{justify-content:center;margin:0}
.sd-info .genres,.sd-info .creator{justify-content:center;margin:0}
.sd-eps h2{font-family:var(--font-pixel);font-size:calc(26px*var(--pxs));margin:0 0 12px}
.sd h1{font-family:var(--font-pixel);font-size:calc(clamp(32px,6vw,56px)*var(--pxs));line-height:1;margin:6px 0 12px}
.meta-row{display:flex;flex-wrap:wrap;gap:6px 0;margin:0 0 14px;font-size:15px}
.meta-row span{padding-right:12px;margin-right:12px;border-right:1px solid rgba(255,255,255,.4)}
.meta-row span:last-child{border:0}
.sd p.syn{max-width:62ch;margin:0 0 18px}
.creator{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.creator span a,.w-by a{color:inherit}
.cr-actions{margin:0 0 22px}
/* Page d'un créateur : image de la chaîne (ou son initiale), nom, chiffres, description YouTube */
.cr-head{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.cr-head h1{margin:0 0 4px}
.cr-head .count{margin:0}
.cr-av{flex:none;display:grid;place-items:center;width:88px;height:88px;overflow:hidden;background:var(--surface2);border:2px solid var(--line);font-family:var(--font-pixel);font-size:calc(40px*var(--pxs));color:var(--amber)}
.cr-av img{width:100%;height:100%;object-fit:cover}
.cr-desc{max-width:70ch;margin:0 0 18px;color:var(--muted);white-space:pre-line}
@media (max-width:759px){.cr-av{width:64px;height:64px;font-size:calc(30px*var(--pxs))}}
/* Profil : bandeau de couleur, image à cheval dessus, chiffres en ligne, actions en lignes */
.pf-banner{position:absolute;top:0;left:0;right:0;height:92px}
.pf-av{position:relative;margin-top:16px}
.pf-av .av.big{box-shadow:0 0 0 4px var(--bg2)}
.pxx{width:16px;height:16px;fill:currentColor}
/* Page « Statistiques » : chiffres en tuiles, médailles (grisées tant qu'elles manquent), images de profil */
.pstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px}
.pstats div{display:flex;flex-direction:column-reverse;padding:14px 8px;background:var(--surface);border:2px solid var(--line);text-align:center}
.pstats dt{font-size:14px;color:var(--muted)}
.pstats dd{margin:0;font-family:var(--font-pixel);font-size:calc(28px*var(--pxs));line-height:1.1;color:var(--amber);white-space:nowrap}
.pfp .genres a{font-size:14px;padding:2px 10px;border:1px solid rgba(255,255,255,.55);color:inherit;text-decoration:none}
.pfp .genres a:hover{border-color:var(--amber);color:var(--amber)}
.pfp .genres{margin:0}
.medal.locked{cursor:default;filter:grayscale(1) brightness(.55);opacity:.7}
/* Page du profil détaillé : un panneau à gauche (image, nom, médaille équipée), deux onglets à droite, des lignes encadrées */
.pfp-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
.pfp-side{display:grid;gap:12px;padding:12px;background:var(--surface);border:2px solid var(--line)}
.pfp-art{border:2px solid var(--line)}
.pfp-art .av{width:100%;height:auto}
.pfp-id{display:flex;align-items:center;gap:10px}
.pfp .badges{justify-content:flex-start;margin-bottom:14px}
.pfp-id strong{display:block;font-family:var(--font-pixel);font-size:calc(22px*var(--pxs));line-height:1.1;overflow-wrap:anywhere}
.pfp-id small{color:var(--muted)}
.pfp-slots{display:flex;gap:10px}
.pfp-slots .medal,.pfp-slots .slot{flex:none;width:56px;height:56px}
/* Emplacement libre : on peut y équiper une autre médaille */
.pfp-slots .slot{overflow:visible;fill:#0b0d14}.pfp-slots .slot .o{fill:none;stroke:var(--muted);stroke-width:2.8;stroke-dasharray:3 2.6;stroke-linejoin:round}
.pfp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.pfp-tabs button{min-height:46px;background:var(--surface);border:2px solid var(--line);color:var(--muted);font:inherit;font-weight:700;cursor:pointer}
.pfp-tabs [aria-selected=true]{background:var(--surface2);color:var(--text);box-shadow:inset 0 -4px 0 var(--amber)}
.ach-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;padding:10px 14px;background:var(--surface);border:2px solid var(--line);font-weight:700}
.ach-head b{font-family:var(--font-pixel);font-size:calc(22px*var(--pxs));color:var(--amber)}
.ach-lab{display:inline-block;margin:6px 0 0;padding:2px 10px;font-size:13px;font-weight:700;color:#0b0d14}
.ach-lab.todo{background:#9cc0ff}
.ach-lab.done{background:#93e07c}
.ach{display:flex;align-items:center;gap:14px;margin-bottom:6px;padding:10px 14px;background:var(--surface);border:2px solid var(--line)}
.pfp .pstats{margin-bottom:12px}
/* La médaille équipée, sous le nom, dans le profil */
.pf-medal{display:flex;justify-content:center;gap:8px;margin:-6px 0 12px}
.pf-medal .medal{width:60px;height:60px}
/* Au clic seulement : la médaille grossit un peu sur place, un reflet la traverse, elle reprend sa taille */
.medal.pop{animation:medal-pop .7s ease}
.medal.pop .sweep{animation:medal-sweep .7s ease}
@keyframes medal-pop{40%{transform:scale(1.18)}}
/* Collection : les images de profil, la tienne encadrée */
.st-avs{margin-bottom:12px}

@media (max-width:759px){.pfp-grid{grid-template-columns:1fr}.pfp-side{width:min(100%,300px);margin:0 auto}.pfp-slots{justify-content:center}.pstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pf-menu{display:grid;margin:0 0 16px;border-top:1px solid var(--line);text-align:left}
.pf-menu>*{display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:0 6px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);font:inherit;font-size:17px;text-decoration:none;cursor:pointer}
.pf-menu>*:hover{background:var(--surface)}
.pf-menu svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.pf-menu svg.px{width:18px;height:18px;margin:0 2px;fill:currentColor;stroke:none}
.pf-menu .danger{color:#ff8f8f}
/* Loupe dans la barre de recherche */
.search-ico{position:absolute;left:12px;top:12px;width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:square;pointer-events:none}
.search .field{padding-left:40px}
.tag.kind{top:auto;left:auto;right:8px;bottom:8px}.card .cap>:last-child:not(strong){padding-right:52px}.card .cap.wide>:last-child:not(strong){padding-right:88px}
/* Notes par étoiles (fiche d'un titre) */
.rate{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:14px;font-size:14px}
.rate:empty{display:none}
.stars{display:flex}
.star{min-width:36px;min-height:40px;padding:0;background:none;border:0;font-size:28px;line-height:1;color:rgba(255,255,255,.6);cursor:pointer}
.star.on{color:var(--amber)}
.pxstar{width:1.15em;height:1.15em;fill:currentColor;vertical-align:-.2em}.pxstar .o{filter:brightness(.6)}.pxstar .l{fill:#fff;opacity:.55}.pxstar .s{fill:#000;opacity:.14}
@media (hover:hover){.stars:hover .star{color:var(--amber)}.stars .star:hover~.star{color:rgba(255,255,255,.6)}}
.rate-avg strong{font-size:16px}
.rate-avg b,.rt b,.hero-rt b{color:var(--amber)}
/* Bouton « Se connecter » de l'en-tête (sur mobile, c'est l'onglet « Compte » de la barre du bas) */
.acct-btn{flex:none;min-height:40px;padding:0 16px;white-space:nowrap}
@media (max-width:759px){.top .acct{display:none}}
/* Page « Compte » : carte centrée sur un fond d'affiches assombri */
.login{position:relative;display:grid;place-items:center;min-height:calc(100vh - 60px);padding:32px var(--pad);overflow:hidden}
.login-bg{position:absolute;inset:-6% -4% auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;transform:perspective(1100px) rotateX(14deg) scale(1.12);transform-origin:center top;filter:brightness(.4);pointer-events:none}
.login-bg img{width:100%;aspect-ratio:2/3;object-fit:cover}
.login::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(21,24,36,.2),rgba(21,24,36,.7) 75%),linear-gradient(0deg,var(--bg),transparent 35%)}
.login-card{position:relative;z-index:1;width:min(100%,480px);padding:32px 28px 24px;background:color-mix(in srgb,var(--surface) 90%,transparent);border:2px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.65);text-align:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.login-card h1{font-family:var(--font-pixel);font-weight:700;font-size:calc(clamp(26px,5vw,34px)*var(--pxs));line-height:1.1;margin-bottom:10px;overflow-wrap:anywhere}
.login-card .lead{margin:0 0 22px;color:var(--muted)}
.login-btns{display:grid;gap:12px;margin-bottom:20px}
.login-btns .btn{min-height:54px;font-size:17px;gap:12px}
.login-btns svg{width:24px;height:24px;flex:none}
.btn.discord{--c:#5865f2;--ink:#fff}
.btn.google{--c:#fff;--ink:#1f1f1f}
.acct-small{margin:0 0 8px;color:var(--muted);font-size:13.5px;line-height:1.45}
.acct-small:last-child{margin-bottom:0}
.acct-small a{color:var(--text)}
.acct-msg{margin:0 0 18px;padding:10px 12px;background:var(--bg2);border:2px solid var(--amber)}
@media (max-width:759px){.login{min-height:calc(100vh - 124px);padding:20px var(--pad)}.login-card{padding:24px 18px 18px}}
.sd-body{padding:0 var(--pad) 40px}
.sd-body h2{font-family:var(--font-pixel);font-size:calc(26px*var(--pxs));margin:8px 0 12px}
.eplist{list-style:none;margin:0;padding:0;max-width:900px}
.eplist a{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--line);text-decoration:none}
.eplist a:hover{background:var(--surface)}
.eplist .n{font-family:var(--font-pixel);font-size:calc(20px*var(--pxs));color:var(--muted);text-align:center}
.eplist small{display:block;color:var(--muted)}
.seen{color:var(--green);font-weight:700}
.seasons{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.sd-body h3{font-family:var(--font-pixel);font-size:calc(22px*var(--pxs));margin:0 0 8px;font-weight:600}

/* ---------- Lecture ---------- */
/* Une seule colonne, limitée pour que la vidéo et la barre des épisodes tiennent dans la hauteur de l'écran */
/* Titre en haut, la vidéo en grand dans une bande noire sur toute la largeur, les boutons centrés dessous */
.watch{padding:0 0 40px}
.watch .stage{display:flex;justify-content:center;width:min(calc(100% - 2*var(--pad)),calc(1280px - 2*var(--pad)));margin:0 auto;background:#000}
@media (max-width:759px){.watch .stage{width:auto}}
.watch .stage .player{width:min(100%,max(560px,calc((100vh - 230px)*16/9)));box-shadow:none}
.watch>.w-top{max-width:1280px;margin:0 auto;padding:16px var(--pad) 14px}
.watch .w-nav{justify-content:center}
.watch>.main{max-width:1280px;margin:0 auto;padding:18px var(--pad) 0}
/* Pendant la lecture, le menu de gauche disparaît : le logo revient dans la barre du haut */
body.app:has(.watch){grid-template-columns:minmax(0,1fr)}
body.app:has(.watch) .side-nav{display:none}
html.side-open body.app:has(.watch) .top>.logo{display:flex}
/* Sous la vidéo : liste déroulante des épisodes à gauche, précédent / dernier / suivant à droite */
/* Page de lecture : titre et choix de l'épisode, navigation, lecteur, étiquettes, réglages, puis deux encadrés */
.w-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;margin-bottom:12px}
.w-top .whead{margin:0;min-width:0;flex:1 1 440px}
.w-accent{color:var(--amber);white-space:nowrap}
.epsel{display:flex;align-items:center;gap:10px;min-width:0}
.epsel label{font-weight:700}
.epsel select{width:auto;max-width:min(320px,60vw);height:40px;background-color:var(--surface);cursor:pointer;text-overflow:ellipsis}
.w-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.w-nav .btn,.w-row .btn{min-height:40px;padding:0 14px;font-size:15px}
.pxi{width:18px;height:18px;flex:none;fill:currentColor}
.w-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.w-tag{padding:4px 12px;border:2px solid var(--line);font-weight:700;font-size:13px;line-height:1.4}
.w-tag.on{border-color:var(--amber)}
.w-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.w-row .w-yt{margin-left:auto}
.w-row [data-act=w-opts] .pxa{transition:transform .2s}
.w-row [data-act=w-opts][aria-expanded=true] .pxa{transform:rotate(90deg)}
.w-optbox{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;padding:12px;background:var(--surface);border:2px solid var(--line)}
.w-optbox .btn{min-height:40px;padding:0 14px;font-size:15px}
.w-card{margin-top:16px;padding:16px 18px;background:var(--surface);border:2px solid var(--line)}
.w-card h2{margin:0 0 6px;font-family:var(--font-pixel);font-size:calc(18px*var(--pxs));line-height:1.1}
.w-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.w-card p+p{margin-top:8px}
.w-card a{color:var(--amber);font-weight:700;text-underline-offset:2px}
.w-card .w-by strong{color:var(--text)}
@media (max-width:759px){
  .w-nav{flex-wrap:nowrap}
  .w-nav .btn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .w-nav .btn{flex:none;min-width:56px;min-height:44px}
  .w-nav .w-list{flex:1}
  .w-row .w-yt{margin-left:0}
  .w-row .btn{flex:1 1 auto}
  .w-card{padding:14px}
}
/* Le chevron en pixels (3 × 5 carrés), seule flèche du site : vers la droite par défaut */
.pxa{flex:none;width:9px;height:15px;fill:currentColor;vertical-align:-2px}
.pxa.l{transform:scaleX(-1)}.pxa.d{transform:rotate(90deg)}.pxa.u{transform:rotate(-90deg)}
.rail-btn .pxa{width:12px;height:20px}
@media (max-width:759px){.epnav{width:100%}.epnav .btn{flex:1 1 auto;padding:0 10px}}
.player{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:0 0 0 2px rgba(0,0,0,.6)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center;color:#fff;background:rgba(8,10,18,.75)}
.pl-ov.light{background:linear-gradient(0deg,rgba(8,10,18,.75),rgba(8,10,18,.15) 60%)}
.pl-ov h2{font-family:var(--font-pixel);font-size:calc(clamp(20px,3.4vw,30px)*var(--pxs))}
.pl-ov p{margin:0;max-width:52ch;font-size:15px}
.row-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.bigplay{width:76px;height:76px;border:0;border-radius:0;background:var(--amber);cursor:pointer;display:grid;place-items:center;box-shadow:inset -5px -5px 0 rgba(0,0,0,.3),inset 5px 5px 0 rgba(255,255,255,.3),0 0 0 3px rgba(0,0,0,.6)}
.bigplay:is(:hover,:active){box-shadow:inset 5px 5px 0 rgba(0,0,0,.3),inset -5px -5px 0 rgba(255,255,255,.3),0 0 0 3px rgba(0,0,0,.6)}
.bigplay span{width:0;height:0;margin-left:6px;border-left:24px solid var(--amber-ink);border-top:15px solid transparent;border-bottom:15px solid transparent}
.switch{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:6px}
.switch input{width:20px;height:20px;accent-color:var(--amber)}
/* Titre au-dessus du lecteur */
.whead{margin:0 0 14px}
.whead h1{font-family:var(--font-pixel);font-weight:700;font-size:calc(clamp(26px,5vw,44px)*var(--pxs));line-height:1.05}
.wsub{margin:4px 0 0;color:var(--muted);font-size:clamp(15px,2.4vw,19px);line-height:1.3}
.pl-ov .dur{font-size:14px;opacity:.9}
/* « Revoir depuis le début » sous le bouton de lecture */
.linkbtn{display:block;margin:2px auto 0;min-height:32px;padding:4px 8px;background:none;border:0;color:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* Saisons repliables (fiche et lecteur) */
.accs{display:grid;gap:10px;max-width:900px}
.acc{border:2px solid var(--line);background:var(--surface)}
.acc-head{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;width:100%;min-height:52px;padding:8px 14px;background:transparent;border:0;border-radius:0;cursor:pointer;text-align:left;color:var(--text)}
.acc-head:hover{background:var(--surface2)}
.acc.open>.acc-head{background:var(--surface2);box-shadow:inset 4px 0 0 var(--amber)}
.acc-title{font-family:var(--font-pixel);font-size:calc(19px*var(--pxs));line-height:1.15}
.acc-meta{color:var(--muted);font-size:14px}
.acc-chev{margin:0 6px;transform:rotate(90deg);transition:transform .2s}
.acc-head[aria-expanded=true] .acc-chev{transform:rotate(-90deg)}
.acc-panel{list-style:none;margin:0;padding:0}
.acc-head+.acc-panel{border-top:1px solid var(--line)}
.acc-panel li:last-child a{border-bottom:0}
.sd-body .acc-panel{max-width:none}

.dim{position:fixed;inset:0;z-index:50;background:rgba(3,4,8,.93);opacity:0;pointer-events:none;transition:opacity .3s}
body.cinema .dim{opacity:1;pointer-events:auto}
body.cinema .player{z-index:60}

/* ---------- Pied de page et barre mobile ---------- */
footer{padding:40px var(--pad) 28px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;background:#10121b}
/* Installer l'application : une ligne par appareil, avec son logo et une petite fleche ambre */
.fapp{margin-bottom:32px}
.fapp[hidden]{display:none}
.fapp h2{font-family:var(--font-pixel);font-size:calc(20px*var(--pxs));color:var(--text);line-height:1.1;text-transform:uppercase}
.fapp p{margin:4px 0 12px}
.fapp-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 28px;padding:4px 18px;background:#0b0d14}
.fapp-list button{display:flex;align-items:center;gap:14px;min-height:56px;padding:0;background:none;border:0;border-bottom:2px solid var(--line);color:var(--text);font:inherit;font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;text-align:left;cursor:pointer}
.fapp-list button:hover,.fapp-list button:focus-visible{color:var(--amber)}
.fapp-list svg{flex:none;width:24px;height:24px;fill:currentColor}
.fapp-list .dl{width:20px;height:20px;fill:var(--amber);overflow:visible}
/* Au survol : la fleche descend dans le bac puis revient par le haut ; chaque logo a son petit mouvement */
.fapp-list button:hover .dl-a,.fapp-list button:focus-visible .dl-a{animation:fapp-dl .8s steps(1) both}
@keyframes fapp-dl{0%{transform:none}15%{transform:translateY(1px)}30%{transform:translateY(2px)}45%{transform:translateY(3px);opacity:.4}55%{transform:translateY(-4px);opacity:0}65%{transform:translateY(-3px);opacity:1}75%{transform:translateY(-2px)}85%{transform:translateY(-1px)}100%{transform:none}}
.os-win rect,.os-apple .leaf,.os-apple .body,.os-android{transform-box:fill-box;transform-origin:center}
.fapp-list button:hover .os-win rect,.fapp-list button:focus-visible .os-win rect{animation:os-win .6s cubic-bezier(.3,1.6,.5,1) both}
.os-win rect:nth-child(2){animation-delay:.08s!important}.os-win rect:nth-child(4){animation-delay:.16s!important}.os-win rect:nth-child(3){animation-delay:.24s!important}
@keyframes os-win{0%{transform:none}35%{transform:scale(.25) rotate(-45deg)}100%{transform:none}}
.os-apple .leaf{transform-origin:20% 100%}
.fapp-list button:hover .os-apple .leaf,.fapp-list button:focus-visible .os-apple .leaf{animation:os-leaf .9s ease both}
.fapp-list button:hover .os-apple .body,.fapp-list button:focus-visible .os-apple .body{animation:os-body .9s ease both}
@keyframes os-leaf{0%,100%{transform:none}20%{transform:rotate(-38deg)}45%{transform:rotate(26deg)}65%{transform:rotate(-16deg)}82%{transform:rotate(8deg)}}
@keyframes os-body{0%,100%{transform:none}30%{transform:scale(1.1,.9)}60%{transform:scale(.95,1.06)}}
.fapp-list .os-ios{width:44px}
.os-ios .dot{transform-box:fill-box;transform-origin:center}
.fapp-list button:hover .os-ios .dot,.fapp-list button:focus-visible .os-ios .dot{animation:os-dot .8s ease both}
@keyframes os-dot{0%,100%{transform:none}25%{transform:translateY(-5px)}45%{transform:none}60%{transform:translateY(-2.5px)}75%{transform:none}}
.os-android{transform-origin:50% 100%}
.fapp-list button:hover .os-android,.fapp-list button:focus-visible .os-android{animation:os-android 1s ease both}
@keyframes os-android{0%,100%{transform:none}18%{transform:rotate(-16deg)}40%{transform:rotate(14deg)}58%{transform:rotate(-9deg)}74%{transform:translateY(-3px)}86%{transform:none}}
.fwrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px 60px;margin-bottom:24px}
.fbrand{max-width:360px}
.ftag{margin:8px 0 0;max-width:42ch}
.fsoc-t{margin:16px 0 4px;font-family:var(--font-pixel);font-size:calc(13px*var(--pxs));font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.04em}
.fsocial{display:flex;gap:6px;margin:0 0 0 -8px}
.fsocial a{display:grid;place-items:center;width:44px;height:44px;color:var(--muted);transition:color .15s}
.fsocial a[hidden]{display:none}
.fsocial a:hover,.fsocial a:focus-visible{color:var(--amber)}
.fsocial svg{width:26px;height:26px}
/* Les yeux du logo Discord sont dessinés à part, dans la couleur du fond, pour pouvoir les animer au survol : un regard à gauche, à droite, puis deux clignements */
.fsocial .eye{fill:#10121b;transform-box:fill-box;transform-origin:center}
.fsocial a:hover .eye,.fsocial a:focus-visible .eye{animation:fsoc-eye 1.5s ease both}
@keyframes fsoc-eye{0%,100%{transform:none}14%,26%{transform:translateX(-1.1px)}40%,52%{transform:translateX(1.1px)}64%{transform:none}70%{transform:scaleY(.1)}76%{transform:none}84%{transform:scaleY(.1)}90%{transform:none}}
/* TikTok : le dédoublement cyan et rouge de son logo, qui tressaute. Instagram : l'objectif se resserre comme pour une photo, et le flash clignote. Rien ne se déplace. */
.fsocial a:hover .s-tt,.fsocial a:focus-visible .s-tt{animation:fsoc-tt .9s steps(1) both}
@keyframes fsoc-tt{0%,100%{filter:none}12%{filter:drop-shadow(-2px -1px 0 #25f4ee) drop-shadow(2px 1px 0 #fe2c55)}30%{filter:drop-shadow(2px 0 0 #25f4ee) drop-shadow(-2px 0 0 #fe2c55)}48%{filter:drop-shadow(-1px 1px 0 #25f4ee) drop-shadow(1px -1px 0 #fe2c55)}66%{filter:drop-shadow(-2px -1px 0 #25f4ee) drop-shadow(2px 1px 0 #fe2c55)}84%{filter:drop-shadow(1px 0 0 #25f4ee) drop-shadow(-1px 0 0 #fe2c55)}}
.s-ig .lens,.s-ig .flash{transform-box:fill-box;transform-origin:center}
.fsocial a:hover .lens,.fsocial a:focus-visible .lens{animation:fsoc-lens 1s ease both}
.fsocial a:hover .flash,.fsocial a:focus-visible .flash{animation:fsoc-flash 1s ease both}
@keyframes fsoc-lens{0%,100%{transform:none}30%{transform:scale(.45)}55%{transform:scale(1.12)}75%{transform:none}}
@keyframes fsoc-flash{0%,25%,100%{transform:none;opacity:1}32%{transform:scale(2.4);opacity:1}45%{transform:none;opacity:.2}60%{transform:scale(1.8);opacity:1}80%{transform:none}}
/* YouTube : le triangle « lecture » file vers la droite et revient par la gauche, comme une vidéo qui en chasse une autre, puis rebondit */
.s-yt{overflow:hidden}
.s-yt .tri{fill:#10121b;transform-box:fill-box;transform-origin:center}
.fsocial a:hover .tri,.fsocial a:focus-visible .tri{animation:fsoc-yt .9s cubic-bezier(.3,1.3,.5,1) both}
@keyframes fsoc-yt{0%{transform:none}30%{transform:translateX(16px)}31%{transform:translateX(-16px)}62%{transform:scale(1.25)}80%{transform:scale(.92)}100%{transform:none}}
.fnav{display:flex;flex-wrap:wrap;gap:28px 64px}
.fnav h2{font-family:var(--font-pixel);font-size:calc(13px*var(--pxs));font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px}
.fnav a{display:block;color:var(--muted);text-decoration:none;padding:3px 0}
.fnav a:hover,.fnav a:focus-visible{color:var(--text);text-decoration:underline}
.fnav a small{opacity:.75}
.fnav a[aria-current=page]{color:var(--amber)}
.fbottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 24px;padding-top:20px;border-top:1px solid var(--line)}
.fnote{margin:0;max-width:70ch}
.fcopy{margin:0;white-space:nowrap;color:var(--muted)}
.yt-note{max-width:46ch;font-size:13px;line-height:1.4;opacity:.92}
.yt-note a{text-underline-offset:2px}

/* ---------- Pages légales ---------- */
.legal{max-width:780px;margin:0 auto;padding:32px var(--pad) 48px}
.legal h1{font-family:var(--font-pixel);font-size:calc(clamp(28px,5vw,40px)*var(--pxs));line-height:1.1;margin-bottom:6px}
.legal h2{font-family:var(--font-pixel);font-size:calc(22px*var(--pxs));margin:32px 0 8px}
.legal h3{font-size:17px;margin:20px 0 4px}
.legal p,.legal li{max-width:70ch}
.legal a{text-underline-offset:2px}
.legal .upd{color:var(--muted);margin:0 0 20px}
.legal .sum{background:var(--surface);border:2px solid var(--line);padding:14px 18px;margin:0 0 8px}
.legal .sum ul{margin:6px 0 0;padding-left:20px}
.legal .todo{background:var(--amber);color:var(--amber-ink);padding:1px 6px;font-weight:700}
/* Pages légales : fond noir, bandeau de blocs sombres avec le logo au centre, grands titres en capitales.
   Le motif du bandeau (img/tuiles.svg) est un simple damier de carrés tirés au hasard dans les couleurs du site. */
body.legal-page{background:#07080c}
.legal-hero{position:relative;display:grid;place-items:center;min-height:clamp(130px,22vw,190px);padding:64px var(--pad) 24px;background:#151824 url(../img/tuiles.svg) center/320px;image-rendering:pixelated;border-bottom:4px solid #000}
.legal-hero .logo{font-size:calc(40px*var(--pxs));gap:16px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.55))}
.legal-hero .logo svg{width:64px;height:64px}
.legal-hero .logo-img{height:clamp(64px,13vw,112px);max-width:min(80vw,460px);image-rendering:auto}
.legal-back{position:absolute;top:14px;left:var(--pad);min-height:40px;padding:0 16px;font-size:15px;image-rendering:auto;transition:background-color .15s,color .15s}
.legal-back:hover,.legal-back:focus-visible{--c:var(--amber);--ink:var(--amber-ink);filter:none}
.legal-page .legal{max-width:1100px;padding:44px var(--pad) 64px;color:#fff;line-height:1.65}
.legal-page .legal h1{font-size:calc(clamp(26px,4.4vw,42px)*var(--pxs));text-transform:uppercase;letter-spacing:.02em;margin:0 0 10px}
.legal-page .legal h2{font-size:calc(clamp(20px,2.6vw,24px)*var(--pxs));text-transform:uppercase;letter-spacing:.02em;line-height:1.15;margin:40px 0 6px}
.legal-page .legal h3{margin:22px 0 4px}
.legal-page .legal p,.legal-page .legal li{max-width:none}
.legal-page .legal p{margin:0 0 12px}
.legal-page .legal ul{list-style:square;margin:0 0 14px;padding-left:26px}
.legal-page .legal li{padding-left:4px;margin-bottom:2px}
.legal-page .legal li::marker{color:var(--amber)}
.legal-page .legal a{color:var(--amber);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.legal-page .legal a:hover,.legal-page .legal a:focus-visible{color:#ffd97d}
.legal-page .legal .upd{margin:0 0 28px}
.legal-page .legal .sum{background:#12141d;border-color:var(--line);margin:0 0 16px}
.legal-page footer{background:#000}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;grid-template-columns:repeat(4,1fr);background:color-mix(in srgb,var(--bg2) 95%,transparent);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar a{display:grid;justify-items:center;gap:2px;padding:8px 0 7px;font-size:12px;text-decoration:none;color:var(--muted)}
.tabbar a[aria-current=page]{color:var(--text);box-shadow:inset 0 3px 0 var(--amber)}
.tabbar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}

/* ---------- Écran de chargement (squelette) ---------- */
.sk{position:relative;display:block;overflow:hidden;background:rgba(255,255,255,.08)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:sk-sweep 1.5s ease-in-out infinite}
@keyframes sk-sweep{to{transform:translateX(100%)}}
.sk.card:hover{box-shadow:none}
.sk-stack{display:grid;gap:12px;align-content:start}
.sk-hero{background:linear-gradient(135deg,var(--surface2),var(--bg))}
.sk-hero .sk{background:rgba(255,255,255,.12)}
.sk-in{position:absolute;z-index:1;left:var(--pad);right:var(--pad);bottom:76px;max-width:640px}
.sk-pill{width:96px;height:26px}
.sk-big{width:min(420px,80%);height:clamp(36px,6vw,56px)}
.sk-h1{width:200px;height:calc(clamp(22px,3vw,28px)*1.1);margin-bottom:16px}
.sk-h2{width:180px;height:calc(clamp(22px,3vw,28px)*1.1);margin-bottom:12px}
.sk-line{height:14px}
.sk-w30{width:30%}.sk-w50{width:50%}.sk-w70{width:70%}.sk-w90{width:90%}
.sk-btn{width:150px;height:44px}
.sk-field{width:min(220px,100%);height:44px}
.sk-chk{width:140px;height:20px;margin-bottom:12px}
.sk-dd{width:150px;height:44px}
.sk-count{width:110px;height:16px;margin:0 0 24px}
.sk-tags{display:flex;gap:8px}
.sk-tag{width:70px;height:24px}
.sk-rows{display:grid;gap:8px;max-width:900px}
.sk-row{height:56px}
@media (max-width:759px){.sk-in{bottom:64px}.sk-dd{width:100%}}

@media (max-width:759px){
  .top nav{display:none}.tabbar{display:grid}main{padding-bottom:64px}footer{padding-bottom:96px}
  .sd .wrap{grid-template-columns:1fr;grid-template-areas:none;gap:18px}.sd-side{display:contents}.sd .poster{order:1;width:160px;justify-self:center}.sd-main{order:2;grid-area:auto}.sd-info{order:3}.sd-eps{order:4;grid-area:auto}
  .eplist a{grid-template-columns:24px 1fr;gap:10px}
  .slide .in{bottom:64px}
  /* Badges hero (image Série/Film/Nouveau) */
  .status-badge{height:20px}
  /* Logo titre dans le carousel */
  .slide h2 .logo-img{max-height:110px;max-width:66vw}
  /* Badges sur les cards du rail */
  .tag,.new,.age{font-size:10px;padding:1px 5px}
}
@media (max-width:759px){
  .bigplay{width:48px;height:48px;padding:0;aspect-ratio:1/1;flex:none;border-radius:0;box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),inset 3px 3px 0 rgba(255,255,255,.3),0 0 0 2px rgba(0,0,0,.6)}
  .bigplay:is(:hover,:active){box-shadow:inset 3px 3px 0 rgba(0,0,0,.3),inset -3px -3px 0 rgba(255,255,255,.3),0 0 0 2px rgba(0,0,0,.6)}
  .bigplay span{margin-left:3px;border-left:14px solid var(--amber-ink);border-top:9px solid transparent;border-bottom:9px solid transparent}
  .pl-ov{gap:6px;padding:8px}
  .pl-ov h2{font-size:calc(17px*var(--pxs))}
  .pl-ov p{font-size:12.5px}
  .pl-ov .dur{font-size:12px}
  .yt-note{font-size:10.5px;line-height:1.3;max-width:32ch}
  .acc-title{font-size:calc(17px*var(--pxs))}
  .acc-head{padding:8px 12px;gap:8px}
}
@media (max-width:759px){
  .dds{display:grid;grid-template-columns:1fr 1fr}
  .dds .btn{grid-column:1/-1}
  .dds>.dd{position:static;grid-column:1/-1}
  .dd-btn{width:100%;justify-content:space-between}
  .dd-btn .acc-chev,.dd-btn[aria-expanded=true] .acc-chev{margin-left:auto}
  /* Sur téléphone le panneau est posé dans la page : il ne doit pas avoir de défilement à lui, sinon il retient celui de la page */
  .dds>.dd>.dd-panel{position:static;margin-top:6px;max-width:none;min-width:0;max-height:none;box-shadow:none;overflow:visible;overscroll-behavior:auto}
}
@media (max-width:420px){.logo span{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ================= Interface « application » (index.html) =================
   Grand écran : menu latéral à gauche, barre de recherche et profil en haut, contenu au centre.
   Écran moyen : le menu latéral se réduit aux icônes. Téléphone : en-tête + barre d'onglets en bas, comme avant. */
.shell{display:flex;flex-direction:column;flex:1 0 auto;min-width:0;min-height:100vh}
.side-nav{display:none}
.side-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;flex:none}
/* Haut de page, à droite de la recherche : cloche des notifications, puis « Se connecter » ou l'image de profil */
.top .notif{position:relative;flex:none}
.top .acct{flex:none}
.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;background:var(--surface);border:2px solid var(--line);color:var(--text);cursor:pointer}
.icon-btn:hover,.icon-btn[aria-expanded=true]{background:var(--surface2)}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.nbadge{position:absolute;top:-7px;right:-7px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:12px;font-weight:700}
.notif-panel{position:absolute;z-index:41;top:calc(100% + 8px);right:0;width:min(360px,calc(100vw - 2*var(--pad)));max-height:min(70vh,480px);overflow:auto;background:var(--surface);border:2px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.55)}
.notif-panel h2{font-family:var(--font-pixel);font-size:calc(20px*var(--pxs));padding:12px 14px 10px}
.notif-panel ul{list-style:none;margin:0;padding:0}
.notif-panel li{border-top:1px solid var(--line)}
.n-it{display:block;padding:10px 14px;text-decoration:none;line-height:1.35}
a.n-it:hover{background:var(--surface2)}
.notif-panel li.unread .n-it{box-shadow:inset 4px 0 0 var(--amber)}
.n-it small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px}
/* Récompense jointe à une notification : son visuel en petit, sous le message */
.n-reward{--bc:var(--violet);display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;background:var(--bg2);border:2px solid var(--bc)}
.n-reward.r-bug{--bc:var(--green)}
.n-reward>svg{flex:none;width:40px;height:40px;overflow:visible;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}
.n-reward>span{min-width:0;font-weight:700;line-height:1.25}
.n-reward b{display:block;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.n-reward .n-get{margin-left:auto;min-width:106px}
.n-reward>span{flex:1 1 84px}
.n-reward .n-get{flex:none;min-height:38px;padding:0 12px;font-size:14.5px;white-space:nowrap}
.n-get.busy{opacity:1;cursor:progress}
.n-get.busy::before{content:"";width:14px;height:14px;border:3px solid currentColor;border-right-color:transparent;border-radius:50%;animation:maint-spin .7s linear infinite}
/* Fenêtre de félicitations (médaille récupérée) */
.rw-bg{z-index:94;animation:rw-fade .25s ease}
.rw{--bc:var(--violet);position:fixed;z-index:95;top:50%;left:50%;width:min(400px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;padding:8px 22px 22px;background:var(--bg2);border:2px solid var(--bc);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 60px color-mix(in srgb,var(--bc) 35%,transparent);text-align:center;transform:translate(-50%,-50%);animation:rw-in .45s cubic-bezier(.3,1.5,.5,1)}
.rw.r-bug{--bc:var(--green)}
.rw-stage{position:relative;display:grid;place-items:center;height:210px;overflow:hidden}
.rw-rays{position:absolute;width:340px;height:340px;border-radius:50%;background:repeating-conic-gradient(color-mix(in srgb,var(--bc) 42%,transparent) 0 12deg,transparent 12deg 30deg);-webkit-mask:radial-gradient(closest-side,#000 25%,transparent 78%);mask:radial-gradient(closest-side,#000 25%,transparent 78%);animation:rw-fade .6s .25s both,maint-spin 14s linear infinite}
.rw-medal{position:relative;width:150px;height:150px;animation:rw-drop .9s .15s cubic-bezier(.3,1.4,.5,1) both}
.rw-medal svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 0 rgba(0,0,0,.45)) drop-shadow(0 0 18px color-mix(in srgb,var(--bc) 70%,transparent))}
.rw-medal .sweep{animation:medal-sweep 1.1s 1s ease both,medal-sweep 1.1s 3.4s ease infinite}
.rw-stage i{position:absolute;top:50%;left:50%;width:8px;height:8px;background:var(--c);--a:calc(var(--i)*30deg + 12deg);opacity:0;animation:rw-bit 1.1s calc(.55s + var(--i)*25ms) cubic-bezier(.2,.7,.3,1) both}
.rw h2{font-family:var(--font-pixel);font-size:calc(30px*var(--pxs));line-height:1.1;animation:rw-up .4s .7s both}
.rw p{margin:8px 0 0;animation:rw-up .4s .8s both}
.rw .rw-desc{color:var(--muted);font-size:14.5px}
.rw-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;animation:rw-up .4s .95s both}
.rw-btns .btn{flex:1 1 auto;padding:0 12px;white-space:nowrap}
@keyframes rw-fade{from{opacity:0}}
@keyframes rw-in{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}}
@keyframes rw-drop{0%{opacity:0;transform:translateY(-120px) scale(.4) rotate(-200deg)}60%{opacity:1}100%{transform:none}}
@keyframes rw-up{from{opacity:0;transform:translateY(8px)}}
@keyframes rw-bit{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(.4)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-150px) scale(1) rotate(180deg)}}
.n-tag{display:inline-block;margin-right:6px;padding:0 6px;background:var(--violet-accessible);color:#fff;font-size:12px}
.notif-empty{margin:0;padding:0 14px 16px;color:var(--muted);font-size:14px}
.av-btn{display:block;padding:0;border:0;background:none;cursor:pointer;box-shadow:0 0 0 2px var(--line)}
.av-btn:hover{box-shadow:0 0 0 2px var(--amber)}
.av-btn .av{width:44px;height:44px}
/* Tiroir du profil (s'ouvre depuis l'image de profil) */
.drawer-bg{position:fixed;inset:0;z-index:70;background:rgba(3,4,8,.6)}
.drawer{position:fixed;z-index:71;top:0;right:0;bottom:0;width:min(400px,100vw);padding:24px 22px 28px;overflow-y:auto;background:var(--bg2);border-left:2px solid var(--line);box-shadow:-20px 0 60px rgba(0,0,0,.5);text-align:center;animation:drawer-in .22s ease}
@keyframes drawer-in{from{transform:translateX(100%)}}
.drawer h2{font-family:var(--font-pixel);font-size:calc(26px*var(--pxs));line-height:1.1;margin-bottom:8px;overflow-wrap:anywhere}
.drawer .lead{margin:0 0 20px;color:var(--muted)}
.drawer-x{position:absolute;z-index:1;top:8px;right:8px;display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:0;color:#fff;cursor:pointer}
.drawer-x:hover{opacity:.75}
.av{display:block;flex:none;width:32px;height:32px}
.av.big{width:88px;height:88px;box-shadow:0 0 0 3px rgba(0,0,0,.55)}
@media (max-width:759px){.top{gap:12px}}
@media (min-width:760px){
  /* Menu latéral replié par défaut (icônes seules) ; html.side-open = déplié, avec le logo et le nom des pages.
     C'est la largeur du menu qui est animée, la colonne de contenu suit. Les icônes restent à la même place dans les deux états. */
  body.app{display:grid;grid-template-columns:auto minmax(0,1fr)}
  body.app .side-nav{position:sticky;top:0;z-index:42;display:flex;flex-direction:column;width:76px;height:100vh;padding:8px 10px 12px;background:#10121b;border-right:1px solid var(--line);overflow:hidden auto;transition:width .26s cubic-bezier(.3,.7,.3,1)}
  html.side-open body.app .side-nav{width:232px}
  .side-head{display:flex;align-items:center;gap:8px;min-height:44px;margin-bottom:10px}
  .side-nav .logo{display:none;min-width:0}
  .side-nav nav{display:grid;gap:4px}
  .side-nav .grow{flex:1}
  .side-nav .item{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 17px;border:0;background:none;color:var(--muted);font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .15s,background-color .15s}
  .side-nav .item:hover{color:var(--text);background:var(--surface)}
  .side-nav .item[aria-current=page]{color:var(--text);background:var(--surface2);box-shadow:inset 4px 0 0 var(--amber)}
  .side-nav .side-toggle{flex:none;width:56px;min-height:44px;color:var(--text)}
  .side-nav .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.side-open .side-nav .logo{display:flex;animation:side-in .3s ease both}
  html.side-open .side-nav .logo-img{height:36px;max-width:132px}
  html.side-open .side-nav .lbl{position:static;width:auto;height:auto;overflow:visible;clip:auto;animation:side-in .3s ease both}
  @keyframes side-in{from{opacity:0;transform:translateX(-8px)}}
  /* Icônes du menu : chacune a sa petite animation au survol (et au clavier) */
  .side-nav .item svg{overflow:visible;transition:transform .28s cubic-bezier(.3,1.6,.5,1)}
  /* Accueil : le toit saute, retombe et rebondit une fois */
  .side-nav [data-nav=home]:hover .i-roof,.side-nav [data-nav=home]:focus-visible .i-roof{animation:ico-roof .6s cubic-bezier(.3,.7,.3,1)}
  @keyframes ico-roof{0%,100%{transform:none}28%{transform:translateY(-5px)}55%{transform:none}72%{transform:translateY(-2px)}}
  /* Catalogue : les quatre carrés s'écartent en diagonale puis reviennent à leur place */
  .i-sq:nth-of-type(1){--dx:-2.5px;--dy:-2.5px}.i-sq:nth-of-type(2){--dx:2.5px;--dy:-2.5px}
  .i-sq:nth-of-type(3){--dx:-2.5px;--dy:2.5px}.i-sq:nth-of-type(4){--dx:2.5px;--dy:2.5px}
  .side-nav [data-nav=catalogue]:hover .i-sq,.side-nav [data-nav=catalogue]:focus-visible .i-sq{animation:ico-sq .55s cubic-bezier(.3,.7,.3,1)}
  @keyframes ico-sq{0%,100%{transform:none}40%{transform:translate(var(--dx),var(--dy))}75%{transform:translate(calc(var(--dx)*-.2),calc(var(--dy)*-.2))}}
  /* Ma liste : la bannière s'enroule vers le haut, puis se déroule */
  .side-nav [data-nav=liste] svg{transform-origin:50% 12%}
  .side-nav [data-nav=liste]:hover svg,.side-nav [data-nav=liste]:focus-visible svg{animation:ico-flag .65s cubic-bezier(.3,.7,.3,1)}
  @keyframes ico-flag{0%,100%{transform:none}35%{transform:scaleY(.25)}70%{transform:scaleY(1.12)}85%{transform:scaleY(.96)}}
  /* Annonces : le mégaphone tremble, comme s'il criait */
  .side-nav [data-nav=annonces] .i-horn{transform-origin:5px 12px}
  .side-nav [data-nav=annonces]:hover .i-horn,.side-nav [data-nav=annonces]:focus-visible .i-horn{animation:ico-horn .6s ease}
  @keyframes ico-horn{0%,100%{transform:none}20%{transform:rotate(-12deg) scale(1.06)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(2deg)}}
  /* Paramètres : l'engrenage tourne. Bouton de menu : les barres se resserrent. */
  .side-nav .item[data-nav=parametres] svg{transition-duration:.45s}
  .side-nav .item[data-nav=parametres]:hover svg,.side-nav .item[data-nav=parametres]:focus-visible svg{transform:rotate(90deg) scale(1.12)}
  .side-nav .side-toggle:hover svg,.side-nav .side-toggle:focus-visible svg{transform:scaleX(.72)}
  .side-nav .item:active svg{transform:scale(.9)}
  html.side-open body.app .top>.logo{display:none}
  body.app .search{margin-left:0;max-width:440px}
  body.app .top .notif{margin-left:auto}
}

/* Note moyenne sur les cartes et dans la bannière */
.rt{font-size:12.5px;font-weight:700}
.rt i{font-style:normal;font-weight:400;opacity:.8}
.hero-rt{margin:0 0 10px;font-weight:700}
.hero-rt span{font-weight:400;opacity:.85}

/* Image de profil : dans le profil, l'image porte un petit crayon ; il ouvre la fenêtre de personnalisation */
.av-top{display:grid;place-items:center;margin-bottom:18px}
.av-edit-btn{position:relative;display:block;padding:0;border:0;background:none;cursor:pointer}
.av-pen{position:absolute;right:-10px;bottom:-10px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--amber);color:var(--amber-ink);box-shadow:0 0 0 3px var(--bg2);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.av-pen svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.av-edit-btn:hover .av-pen,.av-edit-btn:focus-visible .av-pen{transform:scale(1.15) rotate(-8deg)}
/* Fenêtre (au-dessus du tiroir du profil) */
.modal-bg{position:fixed;inset:0;z-index:80;background:rgba(3,4,8,.72)}
.modal{position:fixed;z-index:81;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;width:min(860px,calc(100vw - 24px));max-height:calc(100vh - 24px);background:var(--bg2);border:2px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.7);animation:modal-in .2s ease}
@keyframes modal-in{from{opacity:0;transform:translate(-50%,-48%)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px;border-bottom:2px solid var(--line)}
.modal-head h2{font-family:var(--font-pixel);font-size:calc(24px*var(--pxs));line-height:1.1}
.modal-x{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;background:var(--surface);border:2px solid var(--line);color:var(--text);font-size:18px;cursor:pointer}
.modal-x:hover{background:var(--surface2)}
.modal-body{flex:1;min-height:0;overflow:auto}
.modal-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 20px;border-top:2px solid var(--line)}
.modal-foot p{flex:1 1 220px;margin:0;color:var(--muted);font-size:14px}
/* Contenu de la fenêtre : aperçu à gauche, couleurs et dessins à droite */
.av-ed{display:grid;grid-template-columns:240px minmax(0,1fr)}
.av-side{display:grid;gap:14px;align-content:start;padding:20px;border-right:2px solid var(--line)}
.av-prev{display:grid;justify-items:center;gap:16px;padding:20px 12px 16px;background:var(--bg);border:2px solid var(--line)}
.av.xl{width:128px;height:128px}
.av-sizes{display:flex;align-items:flex-end;gap:10px}
.av.s48{width:48px;height:48px}.av.s32{width:32px;height:32px}.av.s24{width:24px;height:24px}
.av-main{display:grid;gap:22px;align-content:start;padding:20px}
.av-main fieldset{border:0;margin:0;padding:0;min-width:0}
.av-main legend{padding:0;margin-bottom:12px;font-family:var(--font-pixel);font-size:calc(19px*var(--pxs))}
.av-colors{display:flex;flex-wrap:wrap;gap:10px}
.av-colors button{width:54px;height:54px;padding:0;border:0;cursor:pointer;box-shadow:0 0 0 2px var(--line)}
.av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:10px}
.av-grid button{display:grid;place-items:center;aspect-ratio:1;padding:9px;border:0;background:var(--bg);cursor:pointer;box-shadow:0 0 0 2px var(--line)}
.av-grid .av{width:100%;height:auto}
.av-ed button:hover{box-shadow:0 0 0 2px var(--muted)}
.av-ed button[aria-pressed=true]{box-shadow:0 0 0 3px var(--amber)}
.av-side .btn{box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),inset 3px 3px 0 rgba(255,255,255,.22),0 0 0 2px rgba(0,0,0,.55)}
@media (max-width:680px){
  .av-ed{grid-template-columns:1fr}
  .av-side{grid-template-columns:1fr;border-right:0;border-bottom:2px solid var(--line);padding:14px}
  .av-prev{grid-template-columns:auto auto;justify-content:center;align-items:end;padding:14px}
  .av.xl{width:88px;height:88px}
  .av-main{padding:14px}
  .modal-foot .btn{flex:1}
}
.av-edit button[aria-pressed=true]{box-shadow:0 0 0 3px var(--amber)}

/* Page « Paramètres » */
.settings{max-width:820px}
.set-sec{margin:0 0 26px}
.set-sec h2{font-family:var(--font-pixel);font-size:calc(22px*var(--pxs));margin:0 0 8px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;background:var(--surface);border:2px solid var(--line);margin-bottom:8px}
label.set-row{cursor:pointer}
.set-row strong,.set-row small{display:block}
.set-row small{color:var(--muted);font-size:14px}
.set-row input{flex:none;width:24px;height:24px;accent-color:var(--amber)}
.set-row .btn{flex:none;min-height:40px}

/* Réglages d'accessibilité (classes posées sur <html> par js/prefs.js) */
html.big body{zoom:1.12}
html.big body.app .side-nav{height:calc(100vh / 1.12)}
/* Police pour dyslexiques : elle remplace la police de lecture et la police pixel. Elle est large : les titres sont un peu réduits. */
html.dys{--font-body:"OpenDyslexic","Atkinson Hyperlegible",system-ui,sans-serif;--font-pixel:var(--font-body);--pxs:.86}
html.contrast{--bg:#0f111a;--surface:#1f2433;--muted:#d3d9ec;--line:#8a94b8}
html.reduce *,html.reduce *::before,html.reduce *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
/* Les icônes du menu latéral qui se déforment au survol (menu, paramètres) restent immobiles */
html.reduce .side-nav .item svg{transform:none!important}
@media (prefers-reduced-motion:reduce){.side-nav .item svg{transform:none!important}}

/* ================= Centre d'aide (/aide) ================= */
.help-hero{position:relative;overflow:hidden;margin-top:-60px;padding:120px var(--pad) 52px;text-align:center;background:linear-gradient(180deg,#0b0d15,var(--bg2));border-bottom:1px solid var(--line)}
.help-kicker{margin:0 0 6px;color:var(--muted);font-weight:700}
.help-hero h1{font-family:var(--font-pixel);font-weight:700;font-size:calc(clamp(30px,6vw,52px)*var(--pxs));line-height:1.05;margin-bottom:24px}
.help-search{display:flex;gap:10px;max-width:560px;margin:0 auto}
.help-search .hs{position:relative;flex:1;min-width:0}
.help-search .field{padding-left:40px}
/* Étoiles en pixels du bandeau : elles s'allument l'une après l'autre (chacune n'est visible qu'un cinquième du cycle). Animations réduites : elles restent, immobiles et discrètes. */
.help-hero>:not(.help-stars){position:relative}
.help-stars{position:absolute;inset:0;pointer-events:none}
.help-stars svg{position:absolute;fill:var(--amber);opacity:0;animation:star-blink 8s ease-in-out infinite}
.help-stars svg.w{fill:#fff}.help-stars .c{fill:#fff}
@keyframes star-blink{0%,22%,100%{opacity:0;transform:scale(.5)}11%{opacity:.8;transform:scale(1)}}
html.reduce .help-stars svg{opacity:.3}
@media (prefers-reduced-motion:reduce){.help-stars svg{opacity:.3}}
.help-page{max-width:1180px;margin:0 auto;width:100%}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.hcard{display:flex;flex-direction:column;min-height:230px;padding:22px;background:var(--bg2);border:2px solid var(--line);text-decoration:none;transition:border-color .15s,background-color .15s}
.hcard:hover{border-color:var(--amber);background:var(--surface)}
.hico{width:30px;height:30px;margin-bottom:14px;overflow:visible;fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:square}
/* Une animation par rubrique, au survol de la carte (et au clavier). h-a et h-b = les parties de l'icône qui bougent séparément. */
/* Premiers pas : le crayon écrit */
.hico-premiers-pas{transform-origin:20% 80%}
.hcard:is(:hover,:focus-visible) .hico-premiers-pas{animation:h-write .75s ease}
@keyframes h-write{0%,100%{transform:none}20%{transform:rotate(-14deg) translateX(2px)}40%{transform:rotate(6deg) translateX(-1px)}60%{transform:rotate(-10deg) translateX(3px)}80%{transform:rotate(4deg)}}
/* Regarder : le triangle part vers la droite, comme une lecture qui démarre */
.hcard:is(:hover,:focus-visible) .hico-regarder{animation:h-play .55s cubic-bezier(.3,.7,.3,1)}
@keyframes h-play{0%,100%{transform:none}35%{transform:translateX(7px) scale(1.1)}65%{transform:translateX(-2px)}}
/* Ma liste : la bannière s'enroule puis se déroule */
.hico-liste{transform-origin:50% 12%}
.hcard:is(:hover,:focus-visible) .hico-liste{animation:h-flag .65s cubic-bezier(.3,.7,.3,1)}
@keyframes h-flag{0%,100%{transform:none}35%{transform:scaleY(.25)}70%{transform:scaleY(1.12)}85%{transform:scaleY(.96)}}
/* Compte : la tête se penche d'un côté puis de l'autre, comme un salut */
.hico-compte .h-a{transform-origin:12px 11px}
.hcard:is(:hover,:focus-visible) .hico-compte .h-a{animation:h-nod .75s ease}
@keyframes h-nod{0%,100%{transform:none}25%{transform:rotate(-14deg) translateY(-1px)}55%{transform:rotate(12deg) translateY(-1px)}80%{transform:rotate(-5deg)}}
/* Notes : l'étoile fait un tour sur elle-même en grossissant */
.hcard:is(:hover,:focus-visible) .hico-notes{animation:h-star .8s cubic-bezier(.3,.7,.3,1)}
@keyframes h-star{0%{transform:none}50%{transform:rotate(180deg) scale(1.3)}100%{transform:rotate(360deg)}}
/* Notifications : la cloche se balance, son battant s'agite plus vite */
.hico-notifications .h-a{transform-origin:12px 4px}
.hcard:is(:hover,:focus-visible) .hico-notifications .h-a{animation:h-bell .9s ease}
.hcard:is(:hover,:focus-visible) .hico-notifications .h-b{animation:h-clapper .9s ease}
@keyframes h-bell{0%,100%{transform:none}15%{transform:rotate(14deg)}35%{transform:rotate(-12deg)}55%{transform:rotate(9deg)}75%{transform:rotate(-5deg)}}
@keyframes h-clapper{0%,100%{transform:none}8%{transform:translateX(-3px)}20%{transform:translateX(3px)}32%{transform:translateX(-3px)}44%{transform:translateX(3px)}56%{transform:translateX(-2.5px)}68%{transform:translateX(2.5px)}80%{transform:translateX(-1.5px)}90%{transform:translateX(1px)}}
/* Paramètres : les deux curseurs glissent en sens inverse */
.hcard:is(:hover,:focus-visible) .hico-parametres .h-a{animation:h-slide-a .7s ease}
.hcard:is(:hover,:focus-visible) .hico-parametres .h-b{animation:h-slide-b .7s ease}
@keyframes h-slide-a{0%,100%{transform:none}50%{transform:translateX(-8px)}}
@keyframes h-slide-b{0%,100%{transform:none}50%{transform:translateX(10px)}}
/* Confidentialité : le bouclier se gonfle et sa coche se redessine */
.hico-confidentialite .h-a{transform-origin:12px 12px}
.hico-confidentialite .h-b{stroke-dasharray:10}
.hcard:is(:hover,:focus-visible) .hico-confidentialite .h-a{animation:h-shield .65s ease}
.hcard:is(:hover,:focus-visible) .hico-confidentialite .h-b{animation:h-check .65s ease}
@keyframes h-shield{0%,100%{transform:none}40%{transform:scale(1.12)}}
@keyframes h-check{0%,35%{stroke-dashoffset:10}100%{stroke-dashoffset:0}}
/* Créateurs : le haut du clap se lève, puis claque */
.hico-createurs .h-a{transform-origin:3px 9px}
.hcard:is(:hover,:focus-visible) .hico-createurs .h-a{animation:h-clap .6s cubic-bezier(.3,.7,.3,1)}
@keyframes h-clap{0%,100%{transform:none}35%{transform:rotate(-22deg)}60%{transform:none}72%{transform:rotate(-6deg)}}
.hcard h2{font-family:var(--font-pixel);font-size:calc(22px*var(--pxs));line-height:1.15;margin-bottom:6px}
.hcard p{margin:0 0 18px;color:var(--muted)}
.hmore{margin-top:auto;color:var(--amber);font-weight:700}
.hcard:hover .hmore{text-decoration:underline;text-underline-offset:3px}
.help-back{margin:0 0 14px}
.help-back a{color:var(--muted);text-decoration:none;font-weight:700}
.help-back a:hover{color:var(--amber)}
.help-desc{margin:-8px 0 20px;color:var(--muted)}
.help-list{padding:0;max-width:860px}
.help-list summary small{display:block;margin-top:2px;color:var(--muted);font-weight:400;font-size:13px}
.help-list .faq-body p{padding-bottom:10px}
.help-list .faq-body p:last-child{padding-bottom:16px}
.help-none{color:var(--muted)}
.help-contact{margin:28px 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--muted)}
.help-contact a{color:var(--amber)}
@media (max-width:759px){.help-hero{padding:96px var(--pad) 36px}.help-search{flex-direction:column}.help-search .hs{flex:none}.hcard{min-height:0}}

/* ================= Téléphone (moins de 760 px) =================
   En-tête : logo, nom de la page, puis recherche (loupe) et cloche. Les paramètres sont dans l'onglet Profil.
   Accueil : raccourcis à faire défiler, puis la bannière en grande affiche avec deux boutons larges. */
.top-title,.top .top-search,.mchips{display:none}
.slide h2 a{color:inherit;text-decoration:none}
.slide-kind{display:none}
.field.big{height:54px;font-size:17px;margin-bottom:16px}
.tab-av:empty{display:none}
.tab-av:not(:empty)+svg{display:none}
.tab-av .av{width:24px;height:24px;stroke:none;box-shadow:0 0 0 2px currentColor}
@media (max-width:759px){
  .top{gap:8px}
  .top .search{display:none}
  .top .logo-img{height:38px;max-width:118px}
  .top-title{display:block;flex:1;min-width:0;margin-left:2px;font-family:var(--font-pixel);font-weight:700;font-size:calc(20px*var(--pxs));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top .top-search{display:grid;flex:none}
  .top .icon-btn{width:40px;height:40px}
  .top .top-search[aria-current=page]{border-color:var(--amber);color:var(--amber)}
  /* Barre du bas : quatre onglets, cibles plus hautes */
  .tabbar a{min-height:58px;align-content:center;gap:3px;padding:6px 0;font-size:11.5px;font-weight:700}
  .tabbar svg{width:24px;height:24px}
  main{padding-bottom:76px}
  /* Raccourcis de l'accueil */
  .mchips{display:flex;gap:8px;overflow-x:auto;padding:10px var(--pad) 2px;scrollbar-width:none}
  .mchips::-webkit-scrollbar{display:none}
  .mchips a,.mchips button{flex:none;display:inline-flex;align-items:center;min-height:42px;padding:0 16px;background:var(--surface);border:2px solid var(--line);border-radius:0;cursor:pointer;font-weight:700;text-decoration:none;white-space:nowrap}
  .mchips a:active,.mchips button:active{background:var(--surface2);border-color:var(--amber)}
  /* Bannière en affiche */
  .hero{margin:10px var(--pad) 0;height:auto;aspect-ratio:2/3;max-height:calc(100vh - 230px);border:2px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.45)}
  .slide::after{background:linear-gradient(0deg,rgba(9,11,19,.96) 0%,rgba(9,11,19,.7) 34%,rgba(9,11,19,0) 62%)}
  .slide .in{left:14px;right:14px;bottom:46px;max-width:none;text-align:center}
  .slide .in>p{display:none}
  .slide .status-badge{display:none}
  /* L'affiche montre déjà le titre : le logo est retiré de l'écran (il reste lu par les lecteurs d'écran), une étiquette dit s'il s'agit d'une série ou d'un film */
  .slide.has-poster h2{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .slide.has-poster .slide-kind{display:inline-block;margin-bottom:10px;padding:2px 12px;background:rgba(9,11,19,.55);border:2px solid rgba(255,255,255,.85);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-shadow:none}
  .slide h2{font-size:calc(clamp(28px,9vw,40px)*var(--pxs));margin-bottom:8px}
  .slide h2 .logo-img{margin:0 auto;max-width:78%;max-height:120px;object-position:center bottom}
  .hero-rt{margin-bottom:6px}
  .hero-meta{display:block;margin:0}
  .slide .genres{justify-content:center;gap:0;margin-bottom:14px}
  .slide .genres span{padding:0;border:0}
  .slide .genres span+span::before{content:"•";margin:0 8px;opacity:.7}
  .slide .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .slide .actions .btn{min-height:48px;padding:0 8px}
  .slide .actions a.glass{display:none}
  .dots{bottom:8px}
  .hero-prog{margin:0 var(--pad)}
  .sk-in{left:14px;right:14px;bottom:46px}
}

/* ================= Page introuvable (vue du site et 404.html) ================= */
.nf{display:grid;justify-items:center;align-content:center;gap:14px;min-height:72vh;padding:40px var(--pad);text-align:center}
.nf-code{display:flex;align-items:center;gap:clamp(8px,2vw,18px);font-family:var(--font-pixel);font-weight:700;font-size:calc(clamp(96px,24vw,210px)*var(--pxs));line-height:.9;color:var(--amber);text-shadow:6px 6px 0 rgba(0,0,0,.45)}
.nf-code img{width:.66em;height:.66em;image-rendering:pixelated;box-shadow:6px 6px 0 rgba(0,0,0,.45);animation:nf-float 9s ease-in-out infinite}
/* Le bloc flotte doucement dans tous les sens : un petit tour en neuf secondes */
@keyframes nf-float{20%{transform:translate(6px,-10px) rotate(4deg)}40%{transform:translate(-5px,-4px) rotate(-3deg)}60%{transform:translate(4px,6px) rotate(2deg)}80%{transform:translate(-6px,-8px) rotate(-4deg)}}
.nf h1{font-family:var(--font-pixel);font-weight:700;font-size:calc(clamp(24px,5vw,36px)*var(--pxs));line-height:1.1}
.nf p{margin:0;max-width:46ch;color:var(--muted)}
.nf .actions{justify-content:center;margin-top:12px}

/* Messages éclairs (confirmation d'une action), en bas de l'écran */
.toasts{position:fixed;z-index:90;left:0;right:0;bottom:24px;display:grid;justify-items:center;gap:8px;padding:0 var(--pad);pointer-events:none}
.toast{max-width:min(92vw,420px);padding:12px 18px;background:var(--surface2);border:2px solid var(--amber);font-weight:700;box-shadow:0 14px 34px rgba(0,0,0,.55);animation:toast-in .25s cubic-bezier(.3,1.4,.5,1)}
.toast.out{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
@keyframes toast-in{from{opacity:0;transform:translateY(14px)}}
@media (max-width:759px){.toasts{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}

/* ================= Barre du bas (téléphone) : changement d'onglet en douceur =================
   Un seul trait ambre glisse d'un onglet à l'autre (--tab = numéro de l'onglet, --tab-on = 0 quand aucun onglet n'est actif).
   L'icône de l'onglet où l'on arrive rejoue son animation (classe .pop posée par le routeur). */
.tabbar::before{content:"";position:absolute;top:0;left:0;width:25%;height:3px;background:var(--amber);opacity:var(--tab-on,0);transform:translateX(calc(var(--tab,0)*100%));transition:transform .32s cubic-bezier(.3,.7,.3,1),opacity .2s}
.tabbar a{transition:color .25s}
.tabbar a[aria-current=page]{box-shadow:none}
.tabbar svg{overflow:visible;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.tabbar a[aria-current=page]>svg,.tabbar a[aria-current=page] .tab-av{transform:translateY(-1px)}
.tabbar a:active>svg,.tabbar a:active .tab-av{transform:scale(.88)}
.tabbar .i-sq:nth-of-type(1){--dx:-2.5px;--dy:-2.5px}.tabbar .i-sq:nth-of-type(2){--dx:2.5px;--dy:-2.5px}
.tabbar .i-sq:nth-of-type(3){--dx:-2.5px;--dy:2.5px}.tabbar .i-sq:nth-of-type(4){--dx:2.5px;--dy:2.5px}
.tabbar a.pop[data-nav=home] .i-roof{animation:tab-roof .6s cubic-bezier(.3,.7,.3,1)}
.tabbar a.pop[data-nav=catalogue] .i-sq{animation:tab-sq .55s cubic-bezier(.3,.7,.3,1)}
.tabbar a[data-nav=liste]>svg{transform-origin:50% 12%}
.tabbar a.pop[data-nav=liste]>svg{animation:tab-flag .65s cubic-bezier(.3,.7,.3,1)}
.tabbar .i-head{transform-origin:12px 11px}
.tabbar a.pop[data-nav=compte] .i-head{animation:tab-nod .7s ease}
.tabbar a.pop .tab-av .av{animation:tab-pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes tab-roof{0%,100%{transform:none}28%{transform:translateY(-5px)}55%{transform:none}72%{transform:translateY(-2px)}}
@keyframes tab-sq{0%,100%{transform:none}40%{transform:translate(var(--dx),var(--dy))}75%{transform:translate(calc(var(--dx)*-.2),calc(var(--dy)*-.2))}}
@keyframes tab-flag{0%,100%{transform:none}35%{transform:scaleY(.25)}70%{transform:scaleY(1.12)}85%{transform:scaleY(.96)}}
@keyframes tab-nod{0%,100%{transform:none}25%{transform:rotate(-14deg) translateY(-1px)}55%{transform:rotate(12deg) translateY(-1px)}80%{transform:rotate(-5deg)}}
@keyframes tab-pop{0%{transform:scale(.7) rotate(-10deg)}60%{transform:scale(1.15) rotate(4deg)}100%{transform:none}}
/* Le contenu d'une nouvelle page arrive en fondu */
@keyframes page-in{from{opacity:0;transform:translateY(8px)}}
@media (max-width:759px){#app.page-in{animation:page-in .24s ease}}

/* Centre d'aide, rubrique « Application mobile » : le téléphone vibre */
.hcard:is(:hover,:focus-visible) .hico-application{animation:h-buzz .5s linear}
@keyframes h-buzz{0%,100%{transform:none}15%{transform:rotate(-9deg)}30%{transform:rotate(8deg)}45%{transform:rotate(-7deg)}60%{transform:rotate(6deg)}80%{transform:rotate(-3deg)}}

/* ================= Mode maintenance =================
   body.maint : la page d'attente remplace le site ; menu, recherche, cloche et onglets sont masqués. */
body.maint .side-nav,body.maint .tabbar,body.maint .top .search,body.maint .top .top-search,body.maint .top .notif,body.maint .top .acct,body.maint .top-title{display:none!important}
/* Page de maintenance : accès discret de l'équipe (connexion des administrateurs) */
.maint-team{max-width:360px;margin:22px auto 0;text-align:center}.maint-team summary{display:inline-block;padding:6px 10px;color:var(--muted);font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.maint-team summary:hover{color:var(--text)}.maint-team .login-btns{margin:12px 0 0}
body.maint.app{display:block}
body.maint .top>.logo{display:flex!important}
/* Trois engrenages en pixels qui s'entraînent : le grand tourne dans un sens, les deux petits dans l'autre, plus vite.
   La rotation avance par crans (steps), pour garder l'allure d'une animation en pixels. */
.gears{position:relative;width:240px;height:176px;margin-bottom:10px}
.gear{position:absolute;image-rendering:pixelated}
.gear.g1{left:50px;top:28px;width:128px;height:128px;animation:maint-spin 14s steps(64) infinite}
.gear.g2{left:160px;top:0;width:76px;height:76px;animation:maint-spin 8.3s steps(40) infinite reverse}
.gear.g3{left:4px;top:116px;width:58px;height:58px;animation:maint-spin 6.3s steps(32) infinite reverse}
@keyframes maint-spin{to{transform:rotate(360deg)}}
/* Bandeau vu par l'administrateur pendant une maintenance */
.maint-bar{margin:0;padding:8px var(--pad);background:var(--red);color:#fff;font-weight:700;font-size:14px;text-align:center}
/* Bêta fermée : bandeau des testeurs et formulaire de demande d'accès (dans la carte de connexion) */
.maint-bar.beta{background:var(--violet-accessible)}
.beta-form{display:grid;gap:8px;margin:0 0 20px;text-align:left}
.beta-form label{font-weight:700;margin-top:6px}
.beta-form textarea.field{height:auto;padding:10px 12px;resize:vertical;background:var(--bg2)}
.beta-form select.field{background-color:var(--bg2)}
.beta-form .btn{margin-top:10px;min-height:50px}
/* Récompenses : badges du profil, et le panneau qui s'ouvre au clic */
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 0 14px}
.medal{--bc:var(--violet);position:relative;width:68px;height:68px;padding:0;background:none;border:0;cursor:pointer;transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
.medal.r-bug,.badge-panel.r-bug{--bc:var(--green)}
.medal svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 0 rgba(0,0,0,.45));transition:filter .2s}
.medal[aria-expanded=true] svg{filter:drop-shadow(0 3px 0 rgba(0,0,0,.45)) drop-shadow(0 0 9px color-mix(in srgb,var(--bc) 75%,transparent))}
.medal .sweep{transform:translateX(-8px)}
@keyframes medal-sweep{from{transform:translateX(-8px)}to{transform:translateX(64px)}}
/* Petite pointe sous la médaille ouverte, qui la relie à sa description */
.medal[aria-expanded=true]::after{content:"";position:absolute;left:50%;bottom:-13px;width:12px;height:12px;background:var(--bg2);border:2px solid var(--bc);border-right:0;border-bottom:0;transform:translateX(-50%) rotate(45deg);z-index:1}
.badge-panel{--bc:var(--violet);position:relative;margin:0 0 18px;padding:14px;background:var(--bg2);border:2px solid var(--bc);text-align:left}
.badge-panel>strong{display:block;margin-bottom:4px;font-family:var(--font-pixel);font-size:calc(18px*var(--pxs));line-height:1.1}
.badge-panel p{margin:0 0 10px;font-size:14.5px}
.badge-panel p small{color:var(--muted)}
.badge-panel .badge-note{color:var(--muted)}
.badge-panel p:last-of-type{margin-bottom:12px}.badge-panel .btn svg{flex:none;width:20px;height:20px}
.badge-panel .login-btns .btn{min-height:46px;font-size:15px}
.badge-panel .acct-msg{margin:12px 0 0}
.beta-form input.field{background:var(--bg2)}
.linklike{padding:0;background:none;border:0;color:var(--text);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.linklike:hover{color:var(--amber)}
/* Ecran de demarrage de l'application installee : le fond en tuiles et le logo, une seconde, puis le site. Android n'accepte qu'un fond uni pour son propre ecran de demarrage, d'ou celui-ci. */
#splash{display:none}
@media (display-mode:standalone){
  /* Depart : le meme ecran que celui d'Android (icone ronde sur fond uni), pour que le passage ne se voie pas. Puis les tuiles montent en fondu et l'icone laisse place au logo. */
  #splash{display:grid;place-items:center;position:fixed;inset:0;z-index:200;pointer-events:none;background:#0f111a;animation:splash-out .4s 1.9s forwards}
  #splash>*{grid-area:1/1}
  #splash i{width:100%;height:100%;image-rendering:pixelated;opacity:0;animation:splash-in .6s .2s forwards;
    background:radial-gradient(closest-side,transparent 35%,rgba(6,7,12,.9)),linear-gradient(rgba(15,17,26,.35),rgba(15,17,26,.35)),#0f111a url(../img/tuiles.svg) center/42vw}
  #splash .sp-ico{width:132px;height:132px;border-radius:50%;animation:splash-ico .55s .25s cubic-bezier(.5,0,.8,.4) forwards}
  #splash .sp-logo{width:66%;max-width:420px;opacity:0;animation:splash-logo .6s .5s cubic-bezier(.3,1.4,.5,1) forwards}
}
@keyframes splash-in{to{opacity:1}}
@keyframes splash-ico{to{opacity:0;transform:scale(.55)}}
@keyframes splash-logo{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes splash-out{to{opacity:0;visibility:hidden}}
html.reduce #splash{display:none!important}
@media (prefers-reduced-motion:reduce){#splash{display:none!important}}
/* Dans l'application Windows : pied de page reduit a deux boutons et aux mentions du bas (le centre d'aide s'ouvre dans le navigateur) */
.fmini{display:none}
html.in-app footer .fapp,html.in-app footer .fwrap{display:none}
html.in-app .fmini{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
html.in-app footer{padding-top:24px}

/* ---------- Style du trailer (page créateurs) ----------
   Fond de tuiles sombres, mots qui apparaissent l'un après l'autre (orange pour les mots clés), créatures qui sautillent. */
.tr-bg{background:radial-gradient(closest-side,transparent 30%,rgba(6,7,12,.92)),linear-gradient(rgba(15,17,26,.55),rgba(15,17,26,.55)),#0f111a url(../img/tuiles.svg) center/360px;image-rendering:pixelated}
.tr-words{font-family:var(--font-pixel);font-weight:600;line-height:1.15;letter-spacing:.02em}
.tr-words span{display:inline-block;animation:tr-word .45s calc(.25s + var(--i)*.09s) cubic-bezier(.3,1.4,.5,1) both}
.tr-words .hi{color:var(--amber)}
@keyframes tr-word{from{opacity:0;transform:translateY(10px) scale(.9)}}
.tr-mobs{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:14px;margin:18px 0}
.tr-mobs img{image-rendering:pixelated;animation:tr-mob .5s calc(1s + var(--i)*.08s) cubic-bezier(.3,1.6,.5,1) both}
@keyframes tr-mob{from{opacity:0;transform:translateY(16px)}}
html.reduce .poll-bar,html.reduce .tr-words span,html.reduce .tr-mobs img,html.reduce .welcome,html.reduce .wc-in>*,html.reduce .wc-logo,html.reduce .tour-spot,html.reduce .tour-tip,html.reduce .pc-card{animation:none;transition:none}
@media (prefers-reduced-motion:reduce){.poll-bar,.tr-words span,.tr-mobs img,.welcome,.wc-in>*,.wc-logo,.tour-spot,.tour-tip,.pc-card{animation:none;transition:none}}

/* Bienvenue (première visite) : écran assombri, le logo arrive d'un coup, puis la question */
body.wc-open{overflow:hidden}
.welcome{position:fixed;inset:0;z-index:96;display:flex;padding:24px var(--pad);background:rgba(4,5,9,.78);text-align:center;animation:rw-fade .5s ease}
.wc-in{margin:auto}
.wc-logo{display:block;height:84px;margin:0 auto 16px;image-rendering:pixelated;animation:wc-pop .6s .25s cubic-bezier(.3,1.7,.5,1) both}
.welcome h2{margin:0;font-family:var(--font-pixel);font-size:calc(40px*var(--pxs));line-height:1.1;animation:tr-word .4s .7s ease both}
.welcome p{margin:6px 0 22px;color:var(--muted);font-size:17px;animation:tr-word .4s .85s ease both}
.wc-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.wc-btns .btn{white-space:nowrap}
.welcome .wc-btns{animation:tr-word .4s 1s ease both}
@keyframes wc-pop{from{opacity:0;transform:scale(.3)}70%{transform:scale(1.12)}}
/* Visite des lieux : l'élément expliqué reste éclairé, tout le reste est assombri */
.tour{position:fixed;inset:0;z-index:96}
.tour-spot{position:fixed;box-shadow:0 0 0 200vmax rgba(4,5,9,.78);outline:2px solid var(--amber);transition:all .35s cubic-bezier(.3,.8,.3,1)}
.tour-tip{position:fixed;width:min(320px,calc(100vw - 24px));padding:16px 18px;background:var(--bg2);border:2px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.6);transition:top .35s cubic-bezier(.3,.8,.3,1),left .35s cubic-bezier(.3,.8,.3,1)}
.tour-tip h2{margin:0 0 4px;color:var(--amber);font-family:var(--font-pixel);font-size:calc(22px*var(--pxs))}
.tour-tip p{margin:0 0 14px;color:var(--muted);font-size:15px;line-height:1.5}
.tour-tip .wc-btns{justify-content:flex-start}
.tour-tip .btn{min-height:40px;padding:0 14px;font-size:15px}

/* Page « Pour les créateurs » */
.pc-hero{display:grid;justify-items:center;padding:44px var(--pad) 22px;text-align:center;border-bottom:4px solid #000}
.pc-hero h1{max-width:760px;margin:0;font-size:calc(42px*var(--pxs))}
.pc-hero p{margin:12px 0 0;color:var(--muted);font-size:17px}
.pc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:1080px;margin:28px auto 0;padding:0 var(--pad)}
/* Grand écran : les quatre blocs sur une seule ligne */
@media (min-width:1380px){.pc-grid{grid-template-columns:repeat(4,1fr);max-width:1320px}}
@media (min-width:760px) and (max-width:1379px){.pc-grid{grid-template-columns:repeat(2,1fr)}}
.pc-card{position:relative;container-type:inline-size;padding:20px 20px 18px;background:var(--surface);border:2px solid var(--line);animation:tr-word .45s calc(.4s + var(--i)*.1s) ease both}
.pc-n{position:absolute;top:-2px;right:-2px;display:grid;place-items:center;width:30px;height:30px;padding-top:2px;box-sizing:border-box;background:var(--amber);color:#1a1200;font-family:var(--font-pixel);font-size:calc(20px*var(--pxs));line-height:1}
/* Titre sur une seule ligne : il rapetisse avec la largeur du bloc (cqi) au lieu de passer à la ligne */
.pc-card h2{margin:0 36px 8px 0;font-family:var(--font-pixel);font-size:min(calc(24px*var(--pxs)),calc(7.6cqi*var(--pxs)));line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-card p{margin:0;color:var(--muted);line-height:1.55}
.pc-card strong{color:var(--text)}
.pc-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px var(--pad) 0}
.pc-cta .btn{white-space:nowrap}
.pc-mail{margin:14px var(--pad) 40px;color:var(--muted);text-align:center;font-size:14px}
@media (max-width:759px){.pc-hero h1{font-size:calc(30px*var(--pxs))}}

/* ---------- Page « Annonces » ----------
   Une carte par annonce. L'image de l'auteur déborde du coin en haut à gauche, et les boutons J'aime / Je n'aime pas / Partager
   du coin en bas à droite : chacun est entouré d'une marge couleur du fond, comme découpée dans la carte.
   Couleurs reprises de la maquette : carte #212538, orange #ff9f1b, texte #cfd5f1. */
.ann-page{max-width:920px;margin:0 auto}
.ann-post{position:relative;margin:34px 6px 0}
.ann-card{position:relative;padding:14px 20px 46px;background:#212538;border-radius:6px}
.ann-head{display:flex;flex-direction:column;padding-left:66px}
.ann-av{position:absolute;top:-11px;left:-8px;display:grid;place-items:center;box-sizing:border-box;width:68px;height:68px;background:#212538;border:2px solid #ff9f1b;outline:12px solid var(--bg)}
.ann-av img{width:54px;height:54px;image-rendering:pixelated}
.ann-head b{color:#ff9f1b;font-family:var(--font-pixel);font-size:calc(28px*var(--pxs));line-height:.8}
.ann-head small{margin-top:4px;color:#707798;font-size:12px;line-height:1.2}
.ann-card h2{margin:28px 0 10px;color:#fff;font-family:var(--font-body);font-size:18px;font-weight:800;line-height:1.3}
.ann-body{color:#cfd5f1;font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.ann-body p{margin:0}
.ann-body .gap{height:.7em}
.ann-body ul{margin:4px 0;padding-left:1.3em}
.ann-body a{color:#ff9f1b;font-weight:700;text-underline-offset:2px}
.ann-body strong{color:#fff}
.ann-body.clamp{max-height:8em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
/* Sondage : une barre par réponse, remplie selon le pourcentage une fois qu'on a répondu */
.ann-poll{display:grid;gap:8px;margin-top:16px}
.poll-opt{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;padding:0 14px;overflow:hidden;background:#2a2f45;border:2px solid #343a54;color:#cfd5f1;font:inherit;font-size:15px;text-align:left;cursor:pointer}
.poll-opt:hover{border-color:#ff9f1b}
.poll-bar{position:absolute;inset:0 auto 0 0;width:0;background:#3a4160;transition:width .8s cubic-bezier(.25,.8,.3,1)}
.poll-opt.on{border-color:#ff9f1b;color:#fff}
.poll-opt.on .poll-bar{background:#ff9f1b;opacity:.35}
.poll-l,.poll-pc{position:relative}
.poll-l{flex:1;min-width:0;overflow-wrap:anywhere}
.poll-pc{font-weight:700}
.poll-n{margin:2px 0 0;color:#707798;font-size:13px}
.ann-img{display:block;max-width:100%;max-height:420px;margin-top:16px;border-radius:4px}
.ann-more{margin:8px 0 0;padding:4px 0;color:#ff9f1b;font-weight:700}
.ann-link{margin-top:14px;gap:10px;white-space:nowrap}
.ann-acts{position:absolute;right:-10px;bottom:-22px;display:flex;gap:9px;padding:8px;background:var(--bg)}
.ann-act{display:grid;place-items:center;width:46px;height:46px;padding:0;background:#212538;border:0;color:#cfd5f1;cursor:pointer;transition:background-color .15s,color .15s;box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),inset 3px 3px 0 rgba(255,255,255,.12),0 0 0 2px rgba(0,0,0,.55)}
.ann-act svg{width:26px;height:24px;fill:currentColor}
.ann-act svg.down{transform:scaleY(-1)}
/* Au survol, le bouton s'enfonce (relief inversé), comme les autres boutons du site */
.ann-act:hover,.ann-act:active{box-shadow:inset 3px 3px 0 rgba(0,0,0,.3),inset -3px -3px 0 rgba(255,255,255,.12),0 0 0 2px rgba(0,0,0,.55)}
.ann-act:hover svg,.ann-act:active svg{translate:1px 1px}
.ann-act.on{background:#ff9f1b;color:#212538;box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),inset 3px 3px 0 rgba(255,255,255,.22),0 0 0 2px rgba(0,0,0,.55)}
.ann-act.on:hover,.ann-act.on:active{box-shadow:inset 3px 3px 0 rgba(0,0,0,.3),inset -3px -3px 0 rgba(255,255,255,.22),0 0 0 2px rgba(0,0,0,.55)}
.ann-post+.ann-post{margin-top:56px}
/* Vues : à gauche des boutons, en bas de la carte. « Nouveau » : étiquette orange dans le coin en haut à droite, découpée comme les boutons */
.ann-views{position:absolute;right:174px;bottom:8px;color:#707798;font-size:14px;line-height:18px;white-space:nowrap}
.ann-new{position:absolute;top:-9px;right:2px;padding:3px 12px 2px;background:#ff9f1b;outline:8px solid var(--bg);color:#fff;font-family:var(--font-pixel);font-size:calc(21px*var(--pxs));line-height:1;letter-spacing:.04em;text-transform:uppercase;text-shadow:2px 2px 0 rgba(0,0,0,.25)}
.ann-none{margin-top:18px;padding:28px 22px;background:#212538;border:2px dashed var(--line);color:var(--muted);text-align:center}
@media (max-width:759px){.ann-act{width:40px;height:40px}.ann-act svg{width:22px;height:20px}.ann-views{right:156px}}

/* ---------- Tête Minecraft (éditeur d'image de profil) ----------
   Aperçu : un vrai cube en 3D qui tourne doucement. Chaque face reprend un carré de 8 × 8 du haut du skin (--tex, 64 × 16). */
.av-skin{display:grid;gap:10px}
.skin-row{display:flex;gap:8px}
.skin-row .field{flex:1;min-width:0}
.skin-row .btn,.sk-file{white-space:nowrap}
.sk-file{justify-self:start}
.av-skin .btn{box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),inset 3px 3px 0 rgba(255,255,255,.22),0 0 0 2px rgba(0,0,0,.55)}
.sk-msg{margin:0;color:var(--muted);font-size:14px}
.sk-stage{display:grid;place-items:center;width:128px;height:128px;perspective:420px}
.sk-cube{--s:58px;position:relative;width:var(--s);height:var(--s);transform-style:preserve-3d;animation:sk-spin 9s linear infinite}
.sk-head,.sk-hat{position:absolute;inset:0;transform-style:preserve-3d}
.sk-hat{transform:scale3d(1.125,1.125,1.125)}
.sk-cube i{position:absolute;inset:0;background-image:var(--tex);background-size:800% 200%;image-rendering:pixelated;backface-visibility:hidden}
.sk-cube .fr{transform:translateZ(calc(var(--s)/2))}
.sk-cube .bk{transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.sk-cube .rt{transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.sk-cube .lt{transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.sk-cube .tp{transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.sk-cube .bt{transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.sk-head .lt,.sk-head .rt{filter:brightness(.8)}
.sk-head .bt{filter:brightness(.65)}
@keyframes sk-spin{from{transform:rotateX(-18deg) rotateY(0)}to{transform:rotateX(-18deg) rotateY(360deg)}}
html.reduce .sk-cube{animation:none;transform:rotateX(-18deg) rotateY(-35deg)}
@media (prefers-reduced-motion:reduce){.sk-cube{animation:none;transform:rotateX(-18deg) rotateY(-35deg)}}
@media (max-width:759px){.sk-stage{width:88px;height:88px}.sk-cube{--s:40px}}

/* ---------- Pseudo du profil ----------
   Le pseudo choisi en grand avec un crayon pour le modifier, le nom du compte (Discord / Google) en petit dessous. */
.pf-name{display:flex;justify-content:center}
.pf-name-btn{max-width:100%;padding:2px 8px;background:none;border:0;color:inherit;font:inherit;cursor:text;overflow-wrap:anywhere;text-decoration:underline transparent;text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color .15s}
.pf-name-btn:hover,.pf-name-btn:focus-visible{text-decoration-color:currentColor}
.pf-nick-in{field-sizing:content;width:auto;min-width:3ch;max-width:100%;padding:2px 8px;background:var(--bg);border:0;border-radius:4px;outline:2px solid var(--line);color:inherit;font:inherit;text-align:center;caret-color:var(--amber)}
.pf-nick-in:focus{outline-color:var(--amber)}
.pf-user{margin:-4px 0 6px;color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.pfp-id small+small{margin-top:0}