/* Vistavert — thème « Console » : sombre, barre du haut + barre latérale, lignes à fins contours.
   La couleur d'accent se change avec le sélecteur de couleur (voir « Thèmes de couleur » plus bas). */
:root {
  --bg: #050507;
  --surface: #0a0a0d;
  --op: #0e0e12;
  --border: #25252b;
  --text: #f3f3f6;
  --muted: #a4a4ae;
  --faint: #8a8a95;
  --hint: #7d7d88;
  --accent: #34e0a1;
  --on-accent: #04120c;
  --green: #6fe3a8;
  --link: #cfb2ff;
  --sel: #2a0f5e;
  --danger: #ff8a7a;
  --on-danger: #1a0805;
  --sans: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --topbar: 52px;
  --sidew: 272px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--sans); }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
img, video { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--sans); letter-spacing: -0.01em; }
h1 { font-size: 2rem; font-weight: 500; letter-spacing: -0.03em; margin: 0.4rem 0 0.6rem; line-height: 1.15; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.5rem; }
code { font-family: var(--mono); }
.lead { color: var(--muted); margin: 0.2rem 0 0; }
.hint { font-size: 0.8rem; color: var(--faint); }

/* --- Barre du haut --- */
nav.top { display: flex; align-items: stretch; min-height: var(--topbar); border-bottom: 1px solid var(--border); background: var(--bg); }
nav.top a { color: var(--muted); text-decoration: none; }
nav.top a:hover, nav.top a:focus-visible { color: var(--text); }
nav.top .brand { display: flex; align-items: center; gap: 0.7rem; padding: 0 1.2rem; border-right: 1px solid var(--border); font-weight: 600; font-size: 1.05rem; color: var(--text); }
.brand .mark { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border-radius: 7px; background: var(--accent); color: var(--on-accent); font-style: normal; font-weight: 700; font-size: 1rem; }
.boards { display: none; }
nav.top .right { margin-left: auto; display: flex; align-items: stretch; }
nav.top .right > * { display: flex; align-items: center; padding: 0 1rem; border-left: 1px solid var(--border); }
nav.top .lang { gap: 0.9rem; font-size: 0.9rem; }
.lang a[aria-current] { color: var(--text); font-weight: 500; }
nav.top .adminlink { font-size: 0.9rem; }
nav.top .search { display: flex; margin: 0; padding: 0 0.7rem; }
nav.top .search input { font: inherit; font-size: 0.88rem; width: 13rem; padding: 0.3rem 0.6rem; border: 1px solid var(--border); border-right: 0; background: var(--surface); color: var(--text); border-radius: 3px 0 0 3px; }
nav.top .search input::placeholder { color: var(--faint); }
nav.top .search button { font: inherit; font-size: 0.85rem; padding: 0.3rem 0.55rem; border: 1px solid var(--border); background: var(--op); color: var(--text); cursor: pointer; border-radius: 0 3px 3px 0; }

/* --- Mise en page : barre latérale + contenu --- */
.shell { display: grid; grid-template-columns: var(--sidew) minmax(0, 1fr); min-height: calc(100vh - var(--topbar)); }
.side { border-right: 1px solid var(--border); padding: 1.1rem 0.6rem 0; display: flex; flex-direction: column; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; }
.sidecats { display: flex; flex-direction: column; gap: 2px; }
.grp { padding: 1.3rem 0.65rem 0.45rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.grp:first-child { padding-top: 0.4rem; }
.it { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.65rem; border-radius: 3px; color: #e4e4ea; text-decoration: none; min-width: 0; }
.it svg { flex: none; color: var(--faint); }
.it .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it .n { margin-left: auto; font-size: 0.78rem; color: var(--faint); }
.it:hover { background: var(--op); }
.it[aria-current="page"] { background: var(--sel); color: #fff; }
.it[aria-current="page"] svg { color: #fff; }
.it[aria-current="page"] .n { color: #d8d8e0; }
.side footer { margin-top: auto; border-top: 1px solid var(--border); padding: 0.9rem 0.65rem 1.1rem; }
.side footer nav.legal { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.85rem; }
.side footer nav.legal a { color: var(--muted); text-decoration: none; }
.side footer nav.legal a:hover, .side footer nav.legal a:focus-visible { color: var(--text); text-decoration: underline; }
.side footer nav.legal a[aria-current="page"] { color: var(--text); font-weight: 600; }
main { min-width: 0; padding: 0 2.25rem 2.5rem; overflow-wrap: anywhere; }
main:has(> .legalpage) { max-width: 52rem; }

/* En-tête de page */
.pagehead { margin: 0 -2.25rem 1.5rem; padding: 1.6rem 2.25rem 1.3rem; border-bottom: 1px solid var(--border); }
.pagehead .lab, .back.lab { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.pagehead .lab a, .back.lab a { color: var(--muted); text-decoration: none; }
.pagehead .lab a:hover, .back.lab a:hover { color: var(--text); }
.pagehead h1 { margin-bottom: 0.7rem; }
.pagehead .lead { margin: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; color: var(--muted); font-size: 0.9rem; }
.bdg { font-size: 0.8rem; font-weight: 500; padding: 0.15rem 0.6rem; border-radius: 3px; background: #17171c; border: 1px solid #2c2c33; color: #e8e8ee; display: inline-flex; gap: 0.4rem; align-items: center; }
.bdg.g { background: color-mix(in srgb, var(--accent) 14%, #050507); border-color: color-mix(in srgb, var(--accent) 35%, #050507); color: var(--accent); }
.bdg.p { background: #3a12a0; border-color: #3a12a0; color: #fff; }

/* Boutons : plein blanc */
.postform button, .gate button, .btn, .mod button, .admin button, .live .lf button {
  font: inherit; font-weight: 500; padding: 0.6rem 1.1rem; border: 1px solid #fff; border-radius: 2px; background: #fff; color: #0a0a0c; cursor: pointer;
}
.postform button:hover, .gate button:hover, .btn:hover { background: #e6e6ea; }
.mod button, .admin button { padding: 0.35rem 0.8rem; font-size: 0.88rem; }
.mod button.danger, .admin button.danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.live .lf button[type="button"] { background: transparent; color: var(--text); border-color: #3a3a42; }
.live .lf button:disabled { opacity: 0.5; cursor: wait; }

/* --- Accueil et catégories --- */
.cols { display: flex; flex-direction: column; gap: 1.25rem; }
.cols > aside, .cols > div { min-width: 0; }
@media (min-width: 62rem) {
  .cols { flex-direction: row-reverse; align-items: flex-start; gap: 2rem; }
  .cols > div { flex: 1 1 auto; }
  .cols > aside { flex: 0 0 22.5rem; }
}
.boardlist { list-style: none; padding: 0; margin: 0 0 1.5rem; border: 1px solid var(--border); }
.boardlist li { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; padding: 0.9rem 1.1rem; border-top: 1px solid var(--border); min-width: 0; }
.boardlist li:first-child { border-top: 0; }
.boardlist li > * { min-width: 0; }
.boardlist a { font-weight: 600; text-decoration: none; }
.boardlist a:hover { text-decoration: underline; }
.boardlist span { color: var(--muted); font-size: 0.9rem; }
ul.results span a { color: inherit; }

/* --- Fils et messages --- */
.thread { margin: 0 0 1.5rem; border: 1px solid var(--border); }
.thread h2 { margin: 0; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border); font-size: 1.05rem; font-weight: 600; background: var(--surface); }
.thread h2 a { color: var(--link); text-decoration: none; }
.thread h2 a:hover { text-decoration: underline; }
.post { background: transparent; border: 0; border-top: 1px solid var(--border); border-left: 3px solid transparent; border-radius: 0; padding: 0.9rem 1.1rem; margin: 0; max-width: 100%; }
.thread > h2 + .post, .thread > .post:first-child { border-top: 0; }
.post.op { border-left-color: var(--accent); background: var(--surface); }
.post::after { content: ""; display: block; clear: both; }
.post header { font-family: var(--mono); font-size: 0.76rem; color: var(--faint); display: flex; flex-wrap: wrap; gap: 0 0.8rem; align-items: baseline; }
.post header a { text-decoration: none; color: var(--faint); padding: 0.1rem 0; }
.post header a:hover { color: var(--text); }
.post .name { color: var(--green); font-weight: 500; }
.post .trip { font-family: var(--mono); }
.post .report { margin-left: auto; font-size: 0.74rem; }
.post .no { margin-left: auto; color: var(--accent); }
.post .report + .no { margin-left: 0; }
.post .body { margin: 0.45rem 0; font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.greentext { color: var(--green); }
.ref { font-size: 0.95em; }
.post .img { float: left; margin: 0.4rem 0.9rem 0.4rem 0; }
.post .img img { display: block; max-width: 250px; max-height: 250px; width: auto; height: auto; border: 1px solid var(--border); border-radius: 2px; }
.omitted, .empty { color: var(--muted); margin: 0; padding: 0.7rem 1.1rem; border-top: 1px solid var(--border); font-size: 0.9rem; }
.empty { border: 1px solid var(--border); }
.omitted a { margin-left: 0.5rem; }
.back { margin: 0; }
.sortbar { margin: 0; font-size: 0.88rem; color: var(--muted); }
.sortbar select { font: inherit; padding: 0.2rem 0.5rem; border: 1px solid var(--border); border-radius: 2px; background: var(--surface); color: var(--text); }

.vote { display: inline-flex; gap: 0.4rem; margin: 0.25rem 0 0; }
.vote .vb { font: inherit; font-size: 0.82rem; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.6rem; background: transparent; color: var(--muted); border: 1px solid #2c2c33; border-radius: 999px; cursor: pointer; filter: grayscale(1); opacity: 0.8; }
.vote .vb:hover, .vote .vb:focus-visible { opacity: 1; border-color: var(--accent); }
.vote .vb.on { filter: none; opacity: 1; color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 600; }
.vote .n:empty { display: none; }

/* --- Formulaires : nom du champ, champ, aide en dessous --- */
.postform { display: grid; gap: 1rem; background: var(--surface); border: 1px solid var(--border); padding: 1.1rem; margin: 0.5rem 0 1rem; }
.postform label { display: grid; gap: 0.35rem; font-family: var(--mono); font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); }
.postform .hint { font-family: var(--sans); font-size: 0.75rem; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.4; color: var(--hint); }
.postform input, .postform textarea, .postform select, .mod input[name="reason"], .mod select, .live .lf input:not([type="file"]), .live .lf textarea {
  font: inherit; font-size: 0.92rem; font-weight: 400; text-transform: none; letter-spacing: 0; width: 100%; min-width: 0; padding: 0.55rem 0.7rem;
  background: #0b0b0e; color: var(--text); border: 1px solid #2c2c33; border-radius: 2px;
}
.postform input:focus, .postform textarea:focus, .postform select:focus { border-color: var(--accent); outline: none; }
.postform ::placeholder { color: #6b6b78; opacity: 1; }
.postform input[type="file"] { padding: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.postform input[type="file"]::file-selector-button { font-family: var(--mono); font-size: 0.8rem; margin-right: 0.7rem; padding: 0.3rem 0.8rem; border: 1px solid #3a3a42; border-radius: 2px; background: var(--op); color: var(--text); cursor: pointer; }
.postform input[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }
.postform button { justify-self: start; padding: 0.7rem 1.4rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
details.newthread summary { cursor: pointer; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0.5rem 0; }
.notice { background: var(--surface); border: 1px solid var(--border); padding: 0.7rem 1rem; }

/* --- En direct --- */
.live { background: var(--bg); border: 1px solid var(--border); margin: 0 0 1.25rem; overflow: hidden; }
.live h2 { margin: 0; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 0.76rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); display: flex; align-items: center; gap: 0.6rem; }
.live .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: livepulse 1.6s ease-in-out infinite; }
.live.offline .dot { background: var(--faint); box-shadow: none; animation: none; }
@keyframes livepulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .live .dot { animation: none; } }
.live ul { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
.live li { padding: 0.7rem 1.1rem; border-top: 1px solid #1b1b20; font-size: 0.92rem; overflow-wrap: anywhere; }
.live li:first-child { border-top: 0; }
.live li > a:first-child { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); text-decoration: none; }
.live .lm, .live .lt { color: var(--faint); font-size: 0.8rem; font-family: var(--mono); }
.live .lt a { color: var(--link); font-weight: 500; text-decoration: none; }
.live .lt a:hover { text-decoration: underline; }
.live .lx { display: block; margin-top: 0.1rem; }
.live .empty { color: var(--muted); border: 0; }
.live .ic { cursor: zoom-in; border-bottom: 1px dotted var(--muted); }
.live .lv { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 0.15rem; font-size: 0.85rem; border: 0; padding: 0; }
.live .lv .vi { flex: none; cursor: default; }
.live .lv a { min-width: 0; overflow-wrap: anywhere; }
.live .note, .live .ls { font-size: 0.85rem; color: var(--muted); margin: 0; }
.live .note { padding: 0 1.1rem 0.6rem; }
.live .note:empty { display: none; }
.live ul:has(.lf) { max-height: none; }
.live .lf { display: grid; gap: 0.4rem; margin: 0.5rem 0 0.2rem; padding: 0.6rem; border: 1px solid var(--border); background: var(--surface); }
.live .lf input[type="file"] { font-size: 0.85rem; color: var(--muted); }
.live-preview { position: fixed; z-index: 50; max-width: min(320px, 80vw); max-height: 320px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); pointer-events: none; }
.live-preview[hidden] { display: none; }
.live a.lr, .live a.lr:visited { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; margin: 0.15rem 0 0 -0.4rem; background: transparent; color: var(--faint); border: 0; border-radius: 50%; text-decoration: none; transition: background 0.15s, color 0.15s; }
.live a.lr:hover, .live a.lr:focus-visible { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }

/* --- Modération et administration --- */
.right .adminlink { color: var(--accent); }
.mod { margin: 0.4rem 0 0.2rem; font-size: 0.85rem; clear: both; }
.mod summary { cursor: pointer; color: var(--faint); }
.mod form { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: flex-end; margin: 0.4rem 0; padding: 0.6rem; border: 1px dashed #34343c; }
.mod label { display: grid; gap: 0.15rem; color: var(--muted); }
.mod label.check { display: flex; gap: 0.4rem; align-items: center; }
.mod input[name="reason"], .mod select { padding: 0.3rem 0.5rem; width: auto; }
.admin { padding-top: 1.5rem; }
.admin h2 { margin: 2rem 0 0.5rem; }
.adminbar { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.adminbar h1 { margin-bottom: 0; }
form.inline { display: inline; margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin: 1rem 0; }
.stats div { background: var(--surface); border: 1px solid var(--border); padding: 0.6rem 0.85rem; border-radius: 3px; }
.stats dt { font-size: 0.8rem; color: var(--muted); }
.stats dd { margin: 0; font-size: 1.5rem; font-weight: 600; font-family: var(--mono); }
.modcard { margin: 1rem 0; }
.modcard .where { margin: 0 0 0.25rem; font-size: 0.85rem; color: var(--muted); }
.reportinfo { margin: 0.25rem 0; }
.notes { margin: 0.25rem 0 0.5rem 1.2rem; color: var(--muted); }
.scroll { max-width: 100%; overflow-x: auto; }
table.bans { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
table.bans th, table.bans td { border: 1px solid var(--border); padding: 0.4rem 0.65rem; text-align: left; background: var(--surface); overflow-wrap: anywhere; }
.scroll table.bans { min-width: 30rem; }
.scroll table.bans th { white-space: nowrap; overflow-wrap: normal; }
.scroll table.bans td { overflow-wrap: normal; word-break: normal; }
.scroll table.bans td:first-child { min-width: 11rem; overflow-wrap: anywhere; }
.scroll table.bans td code { white-space: nowrap; }
.admintabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin: 0.5rem 0 1rem; }
.admintabs a { padding: 0.5rem 1rem; text-decoration: none; color: var(--muted); border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
.admintabs a:hover { color: var(--text); }
.admintabs a[aria-current="page"] { color: var(--text); font-weight: 600; background: var(--surface); border-color: var(--border); border-bottom: 1px solid var(--surface); }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 9rem; padding: 0.4rem; background: var(--surface); border: 1px solid var(--border); }
.bars .bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.bars .bar i { display: block; width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 0; }
.bars .bar:hover i { opacity: 0.75; }
.barsaxis { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; font-family: var(--mono); }
.numbers { margin: 0.6rem 0; }
.numbers summary { cursor: pointer; color: var(--muted); padding: 0.3rem 0; }
.topliked { padding-left: 1.3rem; }
.topliked li { margin-bottom: 0.5rem; }
.topliked .votes { white-space: nowrap; margin-left: 0.4rem; }
.topliked .excerpt { color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }

/* --- Vidéo YouTube (16:9) --- */
.video { position: relative; width: 100%; max-width: 34rem; aspect-ratio: 16 / 9; margin: 0.5rem 0; background: #111; border: 1px solid var(--border); overflow: hidden; }
.video .vplay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem; text-align: center; color: #fff; text-decoration: none; font-weight: 600; background: linear-gradient(135deg, #1b1b1b, #3a3a3a); }
.video .vplay .tri { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 2.5rem; border-radius: 0.7rem; background: #e02222; font-size: 1.2rem; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.video .vplay:hover .tri, .video .vplay:focus-visible .tri { background: #ff3a3a; }
.video .vplay:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.video .vplay img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video .vplay > span:last-child { position: relative; padding: 0.15rem 0.6rem; border-radius: 3px; background: rgba(0, 0, 0, 0.6); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Pages légales --- */
.legalpage { padding-top: 1.5rem; }
.legalpage h2 { margin: 1.6rem 0 0.4rem; font-size: 1.15rem; }
.legalpage p, .legalpage li { line-height: 1.65; }
.legalpage ul { margin: 0.3rem 0 0.6rem; padding-left: 1.3rem; }
.legalpage li + li { margin-top: 0.3rem; }
.legalpage .updated { color: var(--muted); font-size: 0.85rem; margin-top: -0.4rem; }
.legalpage p a, .legalpage li a { display: inline; padding: 0; }

/* --- Avertissement « contenu pour adultes » --- */
.shell:has(.gate) { grid-template-columns: minmax(0, 1fr); }
.shell:has(.gate) .side { position: static; height: auto; border: 0; order: 2; }
.shell:has(.gate) .sidecats { display: none; }
.shell:has(.gate) .side footer nav.legal { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.2rem; }
.gate { max-width: 34rem; margin: 3rem auto; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 3px; }
.gate h1 { margin-top: 0; font-size: 1.6rem; }
.gate form { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin: 1.25rem 0 0.5rem; }
.gate button { font-size: 1rem; padding: 0.8rem 1.4rem; }
.gate .leave { color: var(--muted); }

/* --- Sélecteur de couleur --- */
.dot[data-theme] { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--border); vertical-align: middle; }
.dot[data-theme="green"] { background: #34e0a1; }
.dot[data-theme="blue"] { background: #6cb6ff; }
.dot[data-theme="red"] { background: #ff7a7a; }
.dot[data-theme="black"] { background: #e6e6e6; }
.dot[data-theme="gray"] { background: #aab4bd; }
.dot[data-theme="yellow"] { background: #ffc857; }
.dot[data-theme="purple"] { background: #c3a1ff; }
nav.top details.theme { position: relative; padding: 0; }
nav.top details.theme summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 1rem; height: 100%; }
nav.top details.theme summary::-webkit-details-marker { display: none; }
nav.top details.theme[open] summary { background: var(--op); }
nav.top .themelist { position: absolute; right: 0; top: 100%; z-index: 20; display: flex; gap: 0.35rem; padding: 0.55rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); }
nav.top .themelist a { display: inline-flex; padding: 0.2rem; border-radius: 50%; }
nav.top .themelist a[aria-current="true"] { outline: 2px solid var(--text); outline-offset: 1px; }
nav.top .themelist .dot[data-theme] { width: 1.5rem; height: 1.5rem; border-color: var(--surface); }

/* --- Thèmes de couleur : accent, sélection, liens --- */
:root[data-theme="blue"] { --accent: #6cb6ff; --on-accent: #06101a; --sel: #0f2a55; --link: #a9d3ff; }
:root[data-theme="red"] { --accent: #ff7a7a; --on-accent: #1a0606; --sel: #4a1414; --link: #ffb0b0; }
:root[data-theme="black"] { --accent: #e6e6e6; --on-accent: #0a0a0a; --sel: #2a2a2e; --link: #e6e6e6; }
:root[data-theme="gray"] { --accent: #aab4bd; --on-accent: #0c0e10; --sel: #25282c; --link: #c9d0d6; }
:root[data-theme="yellow"] { --accent: #ffc857; --on-accent: #1a1203; --sel: #3d3008; --link: #ffe29a; }
:root[data-theme="purple"] { --accent: #c3a1ff; --on-accent: #12081f; --sel: #2a0f5e; --link: #cfb2ff; }

/* ===== Mobile et tablette ===== */
@media (max-width: 900px) {
  :root { --topbar: 0px; }
  nav.top { flex-wrap: wrap; align-items: center; }
  nav.top .brand { border-right: 0; padding: 0.6rem 0.9rem; }
  nav.top .right { margin-left: auto; flex: 1 1 11rem; justify-content: flex-end; min-width: 0; }
  nav.top .right > * { padding: 0 0.6rem; border-left: 0; }
  nav.top .search { flex: 1 1 auto; min-width: 0; }
  nav.top .search input { width: 100%; min-width: 0; flex: 1 1 auto; }
  nav.top .boards { display: flex; order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 0.3rem; padding: 0 0.6rem 0.6rem; border-top: 1px solid var(--border); font-size: 0.9rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  nav.top .boards::-webkit-scrollbar { display: none; }
  nav.top .boards a { white-space: nowrap; padding: 0.55rem 0.6rem; margin-top: 0.4rem; border: 1px solid var(--border); border-radius: 3px; }
  nav.top .boards a.more { font-style: italic; }
  .shell { display: flex; flex-direction: column; min-height: 0; }
  main { order: 1; padding: 0 1rem 2rem; }
  .pagehead { margin: 0 -1rem 1.2rem; padding: 1.1rem 1rem; }
  h1 { font-size: 1.6rem; }
  .side { order: 2; position: static; height: auto; border-right: 0; border-top: 1px solid var(--border); padding: 0; }
  .sidecats { display: none; }
  .side footer { border-top: 0; padding: 1rem; }
  .side footer nav.legal { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.1rem; }
}
@media (max-width: 480px) {
  .post .img img { max-width: 140px; max-height: 140px; }
  .video { max-width: none; }
  nav.top .right { display: contents; }
  nav.top .brand { order: 1; }
  nav.top .adminlink { order: 2; }
  nav.top .lang { order: 2; padding: 0 0.7rem; }
  nav.top .acctlink { order: 2; margin-left: auto; padding: 0 0.7rem; }
  nav.top .adminlink { margin-left: 0; }
  nav.top .adminlink:first-child { margin-left: auto; }
  nav.top .acctlink ~ .lang { margin-left: 0; }
  nav.top details.theme { order: 3; }
  nav.top .search { order: 4; flex: 1 1 100%; padding: 0 0.8rem 0.6rem; }
  nav.top .boards { order: 5; }
  nav.top .themelist { position: fixed; left: 0.75rem; right: 0.75rem; top: auto; justify-content: space-around; margin-top: 0.4rem; }
  nav.top .themelist .dot[data-theme] { width: 1.6rem; height: 1.6rem; }
  .bars { height: 7rem; gap: 1px; padding: 0.3rem; }
}
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]), textarea, select { font-size: 16px !important; }
  button, .vote .vb { min-height: 40px; }
  .vote .vb { padding: 0.25rem 0.9rem; }
  .post header { align-items: center; gap: 0 0.5rem; }
  .post header a { padding: 0.55rem 0.35rem; }
  summary { padding: 0.5rem 0; }
  .mod label.check input { width: 22px; height: 22px; }
  .mod label.check { min-height: 40px; }
  .live li { padding: 0.8rem 1.1rem; }
  .live li a:not(.lr) { padding: 0.2rem 0; display: inline-block; }
  .live a.lr { width: 2.75rem; height: 2.75rem; }
  .live .lv a { display: inline-block; padding: 0.25rem 0; }
  nav.top .search button { min-width: 2.5rem; }
  .lang a, nav.top .right a { padding: 0.4rem 0.1rem; }
  nav.top details.theme summary { min-height: 2.5rem; min-width: 2.5rem; }
  .boardlist a, .notice a { display: inline-block; padding: 0.3rem 0; }
  .omitted a, .thread h2 a, p > a:only-child { display: inline-block; padding: 0.45rem 0; }
  .side footer nav.legal a { padding: 0.4rem 0; }
  .admintabs a { padding: 0.7rem 1rem; }
  .numbers summary { padding: 0.6rem 0; }
  .gate .leave { display: inline-block; padding: 0.6rem 0; }
}

/* --- Votes : flamme et caca, avec éclat quand quelqu'un vote --- */
.vote { position: relative; }
.vote .vb.pop { animation: votepop 0.45s ease-out; }
@keyframes votepop { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; opacity: 0; animation: burstfly 0.8s ease-out forwards; }
.burst.holy i { background: radial-gradient(circle, #fffbe0 0%, #ffd84d 55%, #f0a91c 100%); box-shadow: 0 0 9px #ffd84d; }
.burst.evil i { background: radial-gradient(circle, #ff9aa5 0%, #ff4d5a 55%, #a3122b 100%); box-shadow: 0 0 8px #ff4d5a; }
.burst::before { content: ""; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; opacity: 0; animation: burstring 0.6s ease-out; }
.burst.holy::before { background: radial-gradient(circle, rgba(255, 216, 77, 0.7), rgba(255, 216, 77, 0) 70%); }
.burst.evil::before { background: radial-gradient(circle, rgba(255, 77, 90, 0.65), rgba(255, 77, 90, 0) 70%); }
@keyframes burstfly { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.3); } }
@keyframes burstring { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(2.2); } }
@media (prefers-reduced-motion: reduce) { .vote .vb.pop { animation: none; } }

/* --- Comptes --- */
.authpage { max-width: 26rem; }
.authpage .postform { margin-top: 0; }
.authalt { color: var(--muted); font-size: 0.9rem; }
nav.top .acctlink { font-size: 0.9rem; color: var(--text); font-weight: 500; }
.post .acct { color: var(--accent); font-family: var(--mono); font-size: 0.8rem; cursor: help; }
.postform label.asuser { display: grid; gap: 0.35rem; }
.postform .chk { display: flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-size: 0.9rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.postform .chk input { width: auto; }

/* --- Espace membre --- */
.member { max-width: 40rem; }
.member h2 { margin: 2rem 0 0.6rem; }
.member .postform { max-width: 26rem; }
.notice.ok { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); }
.btn.ghost, button.btn.ghost { background: transparent; color: var(--text); border-color: #3a3a42; }
.btn.ghost:hover { background: var(--op); }
.logoutform { margin: 1.5rem 0 0; }
details.danger { margin-top: 2rem; border: 1px solid #4a2a26; padding: 0.4rem 1rem 0.2rem; border-radius: 3px; }
details.danger summary { cursor: pointer; color: var(--danger); font-weight: 500; padding: 0.4rem 0; }
.postform .dangerbtn, .postform button.dangerbtn { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.cf-turnstile { min-height: 65px; }

/* --- Appareils connectés --- */
.devices { list-style: none; padding: 0; margin: 0 0 1rem; border: 1px solid var(--border); }
.devices li { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; padding: 0.8rem 1.1rem; border-top: 1px solid var(--border); }
.devices li:first-child { border-top: 0; }
.devices .hint { font-size: 0.8rem; color: var(--faint); }
.devices form { margin: 0; }
button.btn.small { padding: 0.3rem 0.8rem; font-size: 0.85rem; }

/* --- Mes votes --- */
.vcount { font-family: var(--mono); font-size: 0.8rem; font-weight: 400; color: var(--muted); margin-left: 0.5rem; }
.boardlist .vv { font-size: 1.1rem; }

/* --- Profils publics --- */
.post a.name { color: var(--green); font-weight: 500; text-decoration: none; }
.post a.name:hover { text-decoration: underline; }
.profilehead { display: flex; gap: 1.2rem; align-items: center; }
.profilehead h1 { margin-bottom: 0.4rem; }
.profilehead .bio { color: var(--text); margin: 0 0 0.6rem; overflow-wrap: anywhere; }
.avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 12px; color: #fff; font-size: 2rem; font-weight: 600; }
.avatar.blank { background: #1c1c22; color: var(--faint); border: 1px dashed #3a3a42; }
@media (max-width: 480px) { .avatar { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; } }

/* Cartes collectionnables — design B « Console » */
.cardshelf{display:flex;flex-wrap:wrap;gap:20px;margin:12px 0 24px}
.tcard{margin:0;width:300px;max-width:100%;box-sizing:border-box;padding:14px;position:relative;overflow:hidden;background:repeating-linear-gradient(0deg,#050508 0,#050508 3px,#0a0a10 3px,#0a0a10 4px);border:2px solid #ff4d6a;border-radius:6px;display:flex;flex-direction:column;gap:10px;font-family:"JetBrains Mono",ui-monospace,monospace;color:#f2f2f5}
.tcard .tc-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;letter-spacing:.14em;color:#a4a4b0}
.tcard .tc-tag{background:#ff4d6a;color:#050508;padding:3px 8px;transform:rotate(2deg)}
.tcard .tc-art{position:relative;height:210px;background:#0d0d12;border:1px solid #3a3a46;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tcard .tc-art svg{position:absolute;width:250px;height:250px;opacity:.9}
.tcard .tc-art img{position:relative;width:120px;height:120px;border-radius:8px;transform:rotate(-4deg);box-shadow:5px 5px 0 #ff4d6a}
.tcard .tape{position:absolute;width:70px;height:18px;background:rgba(242,242,245,.22);transform:rotate(-35deg)}
.tcard .tape.a{top:8px;left:-16px}.tcard .tape.b{bottom:8px;right:-16px}
.tcard .tc-subj{position:absolute;left:8px;bottom:6px;font-size:10px;color:#a4a4b0}
.tcard figcaption{display:flex;flex-direction:column;gap:5px}
.tcard .tc-title{font-family:Inter,system-ui,sans-serif;font-size:24px;font-weight:600;line-height:1.1;text-shadow:2px 0 #ff4d6a,-2px 0 #2ee6a6;transform:rotate(-1.5deg)}
.tcard .tc-scrawl{font-family:"Permanent Marker","Segoe Print","Bradley Hand","Marker Felt",cursive;font-size:15px;color:#ff4d6a;transform:rotate(1deg)}
.tcard .tc-lines{font-size:11px;color:#a4a4b0;line-height:1.5}
.tcard .tc-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed #3a3a46;padding-top:8px;font-size:11px;color:#a4a4b0}
.tcard .tc-foot span{display:flex;align-items:center;gap:8px}
.tcard .tc-v{width:16px;height:16px;background:#2ee6a6;color:#050508;display:inline-flex;align-items:center;justify-content:center;transform:rotate(8deg)}
@media (prefers-reduced-motion:no-preference){.tcard{transition:transform .2s}.tcard:hover{transform:rotate(-1deg) translateY(-3px)}}

/* Espace membre : listes repliables au lieu de boîtes empilées */
.memberlinks{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin:.5rem 0}
.memberlinks .logoutform{margin:0}
.setlist{border:1px solid var(--border);border-radius:4px;background:var(--surface)}
.setlist details.srow{margin:0;border:0;border-radius:0;padding:0}
.setlist details.srow+details.srow{border-top:1px solid var(--border)}
.srow summary{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;cursor:pointer;list-style:none;color:var(--text);font-weight:500}
.srow summary::-webkit-details-marker{display:none}
.srow summary::after{content:"›";margin-left:.25rem;color:var(--muted);transition:transform .15s}
.srow[open] summary::after{transform:rotate(90deg)}
.srow summary .rt{flex:1}
.srow summary .rv{color:var(--muted);font-weight:400;font-size:.9em;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow summary:hover{background:var(--op)}
.srow .rb{padding:.2rem 1rem 1rem}
.srow.danger summary{color:var(--danger)}
.srow.danger .rb p:first-child{margin-top:0}
/* Remplissage automatique du navigateur : pas de fond jaune/olive criard */
input:-webkit-autofill,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--text);caret-color:var(--text);box-shadow:0 0 0 100px var(--op) inset;transition:background-color 9999s}
.setlist .srow summary{padding:.8rem 1rem}
.setlist .srow .postform{border:0;background:none;padding:0;margin:0}
.setlist .srow .notice{margin:.4rem 0 .8rem}

/* Carte de fil : auras selon l'écart Holy/Evil (≥ +50 : Rare, dorée ; ≤ −50 : Malpropre, vert moisi) */
.tcard .tc-title a{color:inherit;text-decoration:none}
.tcard .tc-title a:hover{text-decoration:underline}
.tcard .tc-title{overflow-wrap:anywhere}
.tcard .tc-votes b{font-weight:700;color:#f2f2f5;margin-right:.6em}
.tcard.rare{border-color:#ffc83d;box-shadow:0 0 0 1px #ffc83d,0 0 28px rgba(255,200,61,.55),inset 0 0 40px rgba(255,200,61,.14)}
.tcard.rare .tc-tag{background:#ffc83d}
.tcard.rare .tc-scrawl{color:#ffc83d}
.tcard.rare .tc-art svg *{stroke:#ffc83d}
.tcard.rare .tc-art img{box-shadow:5px 5px 0 #ffc83d}
.tcard.dirty{border-color:#8fa31e;box-shadow:0 0 0 1px #8fa31e,0 0 28px rgba(111,129,16,.6),inset 0 0 40px rgba(111,129,16,.22)}
.tcard.dirty .tc-tag{background:#8fa31e}
.tcard.dirty .tc-scrawl{color:#a9bf2a}
.tcard.dirty .tc-art svg *{stroke:#8fa31e}
.tcard.dirty .tc-art img{box-shadow:5px 5px 0 #6f8110;filter:saturate(.7) sepia(.35) hue-rotate(35deg)}

/* Jeu des âmes : boîte 250 × 250 au-dessus des liens du bas du menu de gauche */
.soulbox{position:relative;width:250px;height:250px;margin:auto auto .8rem;flex:none;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,#10261f 0,#080a10 60%,#05050a 100%)}
.soulbox canvas{display:block;width:250px;height:250px;touch-action:manipulation;cursor:pointer}
.soulbox .sb-hud{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--border);border-radius:999px;background:rgba(5,5,7,.7);color:#e6fff5;font:700 13px var(--mono);pointer-events:none}
.soulbox .sb-hud .ghost{color:#e6fff5}
.soulbox .sb-login{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;text-align:center;font-size:.75rem;color:var(--muted);background:rgba(5,5,7,.75);text-decoration:none}
.soulbox .sb-login:hover,.soulbox .sb-login:focus-visible{color:var(--text);text-decoration:underline}
.side .soulbox + footer{margin-top:0}
.bdg.s{background:#12241f;color:#bff5e0;border-color:#1f3d34}
@media (max-width:900px){.soulbox{margin:1rem auto}}

/* Icônes de vote : Holy (ange) et Evil (diable) */
.vi{width:20px;height:20px;vertical-align:-5px;display:inline-block}
.vote .vb .vi{vertical-align:middle}
.boardlist .vv .vi{width:24px;height:24px}
.vcount .vi,.tc-votes .vi{width:16px;height:16px;vertical-align:-3px}
.vote .vb .vi{width:24px;height:24px}
.vcount .vi,.tc-votes .vi{width:20px;height:20px;vertical-align:-5px}

/* Deux monnaies : âmes Holy (dorées) et Evil (rouges) */
.soulbox .sb-hud{padding:0;border:0;background:none;gap:6px}
.soulbox .sb-hud .chip{display:flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--border);border-radius:999px;background:rgba(5,5,7,.7);font:700 13px var(--mono)}
.soulbox .sb-hud .chip.h{color:#ffd84d}.soulbox .sb-hud .chip.h .ghost{color:#ffd84d}
.soulbox .sb-hud .chip.e{color:#ff6b78}.soulbox .sb-hud .chip.e .ghost{color:#ff4d5a}
.bdg.s.h{background:#2a2208;color:#ffd84d;border-color:#5a4a12}
.bdg.s.e{background:#2a0c10;color:#ff8d98;border-color:#5a1a22}

/* Voter coûte une âme : message quand il n'en reste plus */
.vote .vmsg{align-self:center;margin-left:.4rem;font-size:.8rem;color:var(--danger);font-weight:600;animation:vshake .4s}
@keyframes vshake{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.vote .vmsg{animation:none}}

/* Suivis et notifications */
nav.top .right > .bell{position:relative;gap:4px;color:var(--muted);text-decoration:none}
nav.top .right > .bell:hover,nav.top .right > .bell:focus-visible,nav.top .right > .bell.on{color:var(--text)}
nav.top .right > .bell .bn{min-width:16px;padding:0 4px;border-radius:999px;background:#ff4d6a;color:#050508;font:700 .68rem/16px ui-monospace,Menlo,Consolas,monospace;text-align:center}
.followform{display:inline;margin:0}
.followbtn{display:inline-flex;align-items:center;gap:5px}
.followbtn.on{color:var(--text);border-color:var(--text)}
.follows .fi{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.follows .fi .fk{font:600 .68rem ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.follows .fi.new a{font-weight:700}
.follows .fi .unfollow{margin:0 0 0 auto}