/* Nexus : noir et jaune par défaut, suit le thème clair du téléphone. Polices système (zéro téléchargement). */
:root{--bg:#000;--sf:#131313;--sf2:#1e1e1e;--tx:#f7f7f7;--mu:#a3a3a3;--ac:#ffc400;--on:#000;--ln:#2b2b2b;--er:#ff6b5e;--ok:#4ade80;color-scheme:dark}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#fff;--sf:#f3f3f3;--sf2:#e8e8e8;--tx:#111;--mu:#5c5c5c;--ln:#d6d6d6;--er:#c62828;--ok:#1b8a3a;color-scheme:light}}
:root[data-theme="light"]{--bg:#fff;--sf:#f3f3f3;--sf2:#e8e8e8;--tx:#111;--mu:#5c5c5c;--ln:#d6d6d6;--er:#c62828;--ok:#1b8a3a;color-scheme:light}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{padding-bottom:64px}
a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}
h1,h2,h3{margin:0 0 .5em;line-height:1.15;letter-spacing:-.02em}
h1{font-size:1.6rem;font-weight:900}h2{font-size:1.2rem;font-weight:800}h3{font-size:1rem;font-weight:700}
.muted{color:var(--mu)}.small{font-size:.85rem}
main{padding:12px 14px 24px;max-width:960px;margin:0 auto}
:focus-visible{outline:3px solid var(--ac);outline-offset:2px}

/* barre haute */
.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--ln);display:flex;gap:10px;align-items:center;padding:10px 14px}
.logo{background:var(--ac);color:#000;font-weight:900;letter-spacing:-.04em;padding:3px 9px;font-size:1.15rem;text-decoration:none;flex:none}
.top input{flex:1;min-width:0;background:var(--sf);border:1px solid var(--ln);color:var(--tx);padding:9px 12px;border-radius:6px;font:inherit;transition:border-color .2s}
.top input:focus{border-color:var(--ac);outline:none}

/* navigation basse */
.nav{position:fixed;bottom:0;left:0;right:0;z-index:20;background:var(--bg);border-top:1px solid var(--ln);display:flex}
.nav a{flex:1;text-align:center;padding:11px 2px 10px;text-decoration:none;font-size:.78rem;font-weight:700;color:var(--mu);position:relative;transition:color .2s}
.nav a::before{content:"";position:absolute;top:-1px;left:50%;width:0;height:3px;background:var(--ac);transition:width .25s,left .25s}
.nav a.on{color:var(--tx)}.nav a.on::before{width:60%;left:20%}
.nav .badge{position:absolute;top:5px;margin-left:4px;background:var(--ac);color:#000;border-radius:9px;font-size:.68rem;min-width:17px;padding:0 4px;line-height:17px}

/* boutons : remplissage jaune → noir, sans survol bleu */
.btn{display:inline-block;border:2px solid var(--ac);background:linear-gradient(var(--on),var(--on)) no-repeat left/0 100%,var(--ac);color:#000;font:inherit;font-weight:800;padding:10px 18px;border-radius:6px;cursor:pointer;text-decoration:none;text-align:center;transition:background-size .25s,color .25s,transform .1s}
.btn:active,.btn:focus-visible{background-size:100% 100%;color:var(--ac)}
@media (hover:hover){.btn:hover{background-size:100% 100%;color:var(--ac)}}
.btn:active{transform:scale(.97)}
.btn.block{display:block;width:100%}
.btn.ghost{background:transparent;color:var(--tx);border-color:var(--ln)}
.btn.ghost:active,.btn.ghost:focus-visible{border-color:var(--ac);color:var(--ac);background:transparent}
@media (hover:hover){.btn.ghost:hover{border-color:var(--ac);color:var(--ac);background:transparent}}
.btn.sm{padding:6px 12px;font-size:.85rem}
.btn.danger{border-color:var(--er);background:transparent;color:var(--er)}
.btn[disabled]{opacity:.5;pointer-events:none}

/* formulaires */
label{display:block;font-weight:700;font-size:.9rem;margin:14px 0 4px}
input,select,textarea{width:100%;background:var(--sf);color:var(--tx);border:1px solid var(--ln);border-bottom:2px solid var(--ln);border-radius:6px;padding:10px 12px;font:inherit;transition:border-color .2s}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--ac)}
textarea{min-height:90px;resize:vertical}
input[type=checkbox]{width:auto;margin-right:8px}
.check{display:flex;align-items:center;font-weight:600;margin:14px 0}
.err{color:var(--er);font-weight:600;margin:10px 0}

/* puces de filtre */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--ln);background:var(--sf);color:var(--tx);padding:6px 13px;border-radius:99px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.chip.on{background:var(--ac);color:#000;border-color:var(--ac)}

/* affiches : la bande jaune est la signature du site */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:820px){.grid{grid-template-columns:repeat(4,1fr)}}
.poster{display:block;text-decoration:none;background:var(--sf);border-radius:8px;overflow:hidden;transition:transform .15s}
.poster:active{transform:scale(.97)}
.poster .pic{aspect-ratio:2/3;background:var(--sf2);position:relative;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:900;color:var(--ac)}
.poster .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster .adult{position:absolute;top:6px;right:6px;background:#000;color:var(--ac);font-size:.7rem;font-weight:900;padding:2px 6px;border-radius:4px;z-index:1}
.poster .stub{background:var(--ac);color:#000;padding:7px 9px 8px;border-top:2px dashed #000}
.poster .stub b{display:block;font-size:.9rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poster .stub span{display:flex;justify-content:space-between;font-size:.72rem;font-weight:700;opacity:.8}

.card{background:var(--sf);border:1px solid var(--ln);border-radius:8px;padding:14px;margin:10px 0}
.row{display:flex;gap:12px;align-items:center}
.row.sp{justify-content:space-between}
.av{width:44px;height:44px;border-radius:50%;background:var(--ac);color:#000;font-weight:900;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.ann{flex:none;width:78%;max-width:320px;background:var(--ac);color:#000;border-radius:8px;padding:12px;text-decoration:none;display:block}
.ann img{border-radius:6px;margin-bottom:8px}
.ann b{display:block}
.tabs{display:flex;border-bottom:1px solid var(--ln);margin-bottom:10px;overflow-x:auto}
.tabs button{flex:none;background:none;border:0;color:var(--mu);font:inherit;font-weight:700;padding:10px 14px;border-bottom:3px solid transparent;cursor:pointer;transition:color .2s,border-color .2s}
.tabs button.on{color:var(--tx);border-color:var(--ac)}
.tag{display:inline-block;font-size:.72rem;font-weight:800;padding:2px 8px;border-radius:4px;background:var(--sf2)}
.tag.ok{color:var(--ok)}.tag.bad{color:var(--er)}
.hero-img{aspect-ratio:16/9;object-fit:cover;width:100%;border-radius:8px;background:var(--sf2)}

/* messagerie */
.conv{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--ln);text-decoration:none}
.conv .mid{flex:1;min-width:0}
.conv .mid b,.conv .mid span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unread{background:var(--ac);color:#000;border-radius:99px;font-size:.75rem;font-weight:800;min-width:22px;text-align:center;padding:1px 6px}
.chat{display:flex;flex-direction:column;height:calc(100vh - 64px - 57px);height:calc(100dvh - 64px - 57px)}
.chat .head{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--ln)}
.msgs{flex:1;overflow-y:auto;padding:10px 0;display:flex;flex-direction:column;gap:6px}
.b{max-width:82%;padding:8px 11px;border-radius:12px;background:var(--sf2);align-self:flex-start;word-wrap:break-word;overflow-wrap:anywhere}
.b.out{align-self:flex-end;background:var(--ac);color:#000;border-bottom-right-radius:3px}
.b.in{border-bottom-left-radius:3px}
.b .who{font-size:.72rem;font-weight:800;opacity:.7}
.b .meta{font-size:.68rem;opacity:.65;text-align:right;margin-top:2px}
.b audio{width:220px;max-width:100%;height:36px}
.b img{border-radius:8px;max-height:260px}
.compose{display:flex;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--ln)}
.compose input[type=text]{flex:1;border-radius:99px}
.round{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--ac);background:var(--ac);color:#000;font-weight:900;font-size:1.05rem;cursor:pointer;transition:background .2s,color .2s}
.round.ghost{background:transparent;color:var(--ac)}
.round.rec{background:var(--er);border-color:var(--er);color:#fff}
.toast{position:fixed;left:14px;right:14px;bottom:76px;z-index:50;background:var(--ac);color:#000;font-weight:700;padding:11px 14px;border-radius:8px;transition:opacity .3s,transform .3s;max-width:480px;margin:0 auto}
.toast.bad{background:var(--er);color:#fff}.toast.out{opacity:0;transform:translateY(8px)}
.empty{text-align:center;color:var(--mu);padding:36px 12px}
.empty b{display:block;color:var(--tx);margin-bottom:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
