:root {
  color-scheme: dark;
  /* Couleurs du logo (le panda aux fleurs de cerisier) : prune de nuit et rose sakura. */
  --bg: #170f16;        /* fond de page */
  --bg-2: #1e141c;      /* barres et menu */
  --card: #261a24;      /* cartes */
  --card-2: #30212d;    /* tuiles */
  --well: #1b1219;      /* champs et boutons sombres */
  --line: #3d2a37;
  --text: #f3e9ef;
  --muted: #b9a5b2;
  --brand: #d94f86;
  --brand-text: #f5a3c0;
  --brand-soft: rgba(233, 120, 160, .16);
  --red: #ed4245;
  --green: #3ba55d;
  --accent: var(--brand);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 .95rem/1.5 var(--font); }
h1, h2, h3, p { margin: 0; }
a { color: var(--brand-text); }
code { font: 500 .72rem ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--muted); }
:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
.muted { color: var(--muted); }
.error { color: #ff7a7c; font-weight: 600; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Boutons */
.btn { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid transparent; border-radius: .5rem; padding: .6rem 1rem; cursor: pointer;
  background: var(--brand); color: #fff; font: 600 .9rem var(--font); text-decoration: none; white-space: nowrap; }
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.danger { background: var(--red); }
.btn.soft { background: var(--brand-soft); color: var(--brand-text); border-color: rgba(233, 120, 160, .4); }
.btn.outline-danger { background: rgba(237, 66, 69, .12); color: #ff7a7c; border-color: rgba(237, 66, 69, .45); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); padding: .4rem .8rem; font-size: .85rem; }

/* Barre du haut */
.top { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem 2rem; padding: .55rem 1rem;
  background: rgba(28, 17, 26, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(240, 170, 200, .14); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font: 700 1.1rem var(--font); color: var(--brand-text); text-decoration: none; }
.brand .icon { width: 1.4em; height: 1.4em; color: var(--brand); }
/* Le logo de Tokyara : le panda aux fleurs de cerisier, détouré. */
.brand-logo { width: 2.75rem; height: 2.75rem; margin: -.25rem 0; object-fit: contain; flex: none; filter: drop-shadow(0 1px 3px rgba(233, 120, 160, .3)); }
#topnav { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .4rem .9rem; }
.top-link { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: .5rem; color: var(--text); text-decoration: none; font-weight: 500; font-size: .9rem; }
.top-link:hover { background: rgba(233, 120, 160, .1); }
.top-link.active { background: var(--brand-soft); color: var(--brand-text); }
.lang-select { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: .5rem; padding: .45rem .6rem; font: 500 .85rem var(--font); cursor: pointer; width: auto; }
.credit-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: .5rem; text-decoration: none; font-size: .88rem;
  color: #f6c453; background: rgba(240, 160, 32, .12); border: 1px solid rgba(240, 160, 32, .45); }
.credit-pill:hover { background: rgba(240, 160, 32, .2); }
/* Étiquette « Premium : ON / OFF » de la barre du haut */
.premium-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: .5rem; text-decoration: none; font-size: .88rem; border: 1px solid var(--line); color: var(--muted); background: var(--card); }
.premium-pill strong { font-weight: 800; letter-spacing: .03em; }
.premium-pill.on { color: #7ee2a0; background: rgba(59, 165, 93, .14); border-color: rgba(59, 165, 93, .5); }
.premium-pill.off strong { color: #ff8e90; }
.premium-pill:hover { filter: brightness(1.15); }
.premium-pill { cursor: pointer; font: inherit; font-size: .88rem; }
.premium-pill.kind-staff strong, .premium-pill.kind-both strong { color: #f6c453; }
.premium-wrap { position: relative; display: inline-flex; }
.prem-pop { position: absolute; top: calc(100% + .5rem); left: 50%; transform: translateX(-50%); z-index: 60; width: min(24rem, calc(100vw - 2rem)); display: grid; gap: .6rem; padding: .9rem 1rem; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: .8rem; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); color: var(--text); font-size: .86rem; line-height: 1.45; }
.prem-pop[hidden] { display: none; }
.prem-pop-title { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .95rem; }
.prem-pop-title .icon { color: #f6c453; }
.prem-pop-part { border: 1px solid var(--line); border-radius: .6rem; padding: .55rem .7rem; background: var(--well); opacity: .78; }
.prem-pop-part.on { opacity: 1; border-color: rgba(240, 160, 32, .45); }
.prem-pop-part h4 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .25rem; font-size: .88rem; }
.prem-pop-part h4 .badge { margin-left: auto; }
.prem-pop-part h4 .icon { width: 1rem; height: 1rem; color: var(--brand-text); }
.prem-pop-part p { margin: 0 0 .3rem; font-size: .8rem; }
.prem-pop-part ul { margin: 0; padding-left: 1.05rem; display: grid; gap: .2rem; font-size: .8rem; }
.prem-pop-foot { margin-top: .4rem !important; padding: .4rem .5rem; border-radius: .4rem; background: rgba(59, 165, 93, .12); color: #b9f0cb; }
.prem-pop-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.prem-pop-actions .btn { font-size: .8rem; padding: .35rem .7rem; }
@media (max-width: 760px) { .prem-pop { position: fixed; top: 4.5rem; left: 1rem; right: 1rem; transform: none; width: auto; max-height: calc(100vh - 6rem); overflow: auto; } }
/* Écrans d'ordinateur portable : la barre se resserre pour rester sur une ligne avec l'étiquette Premium. */
@media (min-width: 1001px) and (max-width: 1500px) {
  .top { gap: .5rem 1rem; }
  #topnav { gap: .4rem .35rem; }
  .top-link { padding: .55rem .6rem; }
  .credit-pill, .premium-pill { padding: .5rem .65rem; }
}
.credit-pill strong { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Tableau de bord : menu à gauche, page à droite */
main.dash { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: calc(100vh - 3.4rem); }
.side { background: rgba(30, 20, 28, .86); border-right: 1px solid var(--line); }
.profile { display: grid; justify-items: center; gap: .2rem; padding: 1.8rem 1rem 1.4rem; border-bottom: 1px solid var(--line); text-align: center; }
.ring { position: relative; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 2px solid var(--brand); margin-bottom: .6rem; }
.profile-avatar { width: 3.7rem; height: 3.7rem; border-radius: 50%; object-fit: cover; background: var(--card-2); display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; }
.online { position: absolute; right: .15rem; bottom: .15rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--green); border: 2px solid var(--bg-2); }
.profile strong { font-size: 1rem; }
.profile small { color: var(--muted); font-size: .78rem; }
.side-label { padding: 1.1rem 1.2rem .5rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.side nav { display: grid; gap: .25rem; padding: 0 .6rem; }
.side nav a, .cats a { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-left: 3px solid transparent; border-radius: .5rem;
  color: var(--text); text-decoration: none; font-weight: 500; font-size: .9rem; }
.side nav a:hover, .cats a:hover { background: var(--card); }
.side nav a > .icon:last-child { margin-left: auto; width: .9em; height: .9em; color: var(--muted); }
.side nav a[aria-current="page"], .cats a[aria-current="page"] { background: var(--brand-soft); border-left-color: var(--brand); color: var(--brand-text); }

.page { padding: 1.4rem clamp(1rem, 2.5vw, 1.9rem) 2.5rem; min-width: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-bottom: 1.1rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.page-head h1 { display: flex; align-items: center; gap: .65rem; font-size: 1.6rem; font-weight: 700; }
.page-head h1 .icon { color: var(--brand); width: 1.2em; height: 1.2em; }
.page-head p { margin-top: .5rem; font-size: .82rem; }

.box { background: var(--card); border: 1px solid var(--line); border-radius: .9rem; }
.tile-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .6rem; background: var(--brand-soft); color: var(--accent); flex: none; }
.tile-icon .icon { width: 1.25rem; height: 1.25rem; }

/* Cartes de statistiques */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.stat { display: grid; gap: .15rem; padding: 1.2rem; border-top: 3px solid var(--accent); }
.stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.stat .tile-icon { color: var(--brand); }
.stat .mark { color: var(--green); font-size: .8rem; }
.stat strong { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-weight: 600; font-size: .85rem; margin-top: .5rem; }
.stat small { color: var(--muted); font-size: .72rem; }

/* Cartes des serveurs */
.servers { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; }
.server { display: grid; justify-items: center; gap: .55rem; padding: 1.3rem 1rem; border-top: 3px solid var(--brand); color: var(--text); text-decoration: none; text-align: center; }
.server:hover { border-color: var(--brand); }
.server.absent { border-top-color: var(--line); }
.server-icon { width: 3.6rem; height: 3.6rem; border-radius: .9rem; border: 2px solid var(--brand); object-fit: cover; background: var(--card-2); display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; }
.server strong { font-size: 1.02rem; }

.staff-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem; margin-bottom: 1rem; }
.staff-form label { display: grid; gap: .25rem; flex: 1 1 12rem; font-size: .82rem; color: var(--muted); }
.staff-form small { min-height: 1em; }
.staff-grants { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.staff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.staff-list li { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .7rem; padding: .55rem .75rem; background: var(--well); border: 1px solid var(--line); border-radius: .5rem; }
.staff-list li > strong { min-width: 0; }
.staff-list li > .btn { margin-left: auto; }
.staff-list .when { font-size: .78rem; }
.staff-list .icon, .staff-list .tile-icon { color: var(--brand); flex: none; }
.staff-list .tile-icon { width: 1.8rem; height: 1.8rem; }
.section-head .count { margin-left: .4rem; font-size: .8rem; padding: .1rem .5rem; border-radius: 1rem; background: var(--card-2); color: var(--muted); }

.premium-all { padding: .9rem 1rem; margin: .5rem 0; background: rgba(240, 160, 32, .08); border: 1px solid rgba(240, 160, 32, .35); border-radius: .6rem; }
.premium-all h3.sub { margin-top: 0; padding-top: 0; border-top: 0; }
h3.sub { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; margin: 1.3rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
h3.sub:first-of-type { border-top: 0; padding-top: 0; margin-top: .5rem; }
h3.sub .icon { color: var(--brand); }
.user-result:empty { display: none; }
.user-result { margin-top: 1rem; display: grid; gap: .8rem; }
.user-head { display: flex; align-items: center; gap: .6rem; }
.user-head strong { font-size: 1.05rem; }
.user-badges { display: flex; flex-wrap: wrap; gap: .4rem; }

.raid-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.raid-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: .5rem; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--text); font: 600 .88rem var(--font); }
.raid-tab.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); }
.raid-tab.danger.active { background: rgba(237, 66, 69, .15); border-color: var(--red); color: #ff8e90; }
.raid-tab .count { font-size: .78rem; padding: .05rem .5rem; border-radius: 1rem; background: var(--card-2); color: var(--muted); }
.notice.danger { border-left-color: var(--red); color: #ff8e90; }
.raid-list { display: grid; gap: 1rem; }
.raid-card { padding: 1.1rem 1.2rem; border-left: 4px solid var(--line); }
.raid-card.ongoing { border-left-color: var(--red); }
.raid-card.resolved { border-left-color: var(--green); }
.raid-card.stale { border-left-color: var(--brand); }
.raid-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; }
.raid-dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; background: var(--brand); }
.raid-dot.ongoing { background: var(--red); box-shadow: 0 0 0 4px rgba(237, 66, 69, .2); }
.raid-dot.resolved { background: var(--green); }
.raid-title { display: grid; }
.raid-title strong { font-size: 1.02rem; }
.raid-title .muted { font-size: .82rem; }
.raid-head .badge:last-child { margin-left: auto; }
.badge.sev-crit { color: #ff8e90; border-color: rgba(237, 66, 69, .5); background: rgba(237, 66, 69, .12); }
.badge.sev-high { color: #f6c453; border-color: rgba(240, 160, 32, .5); background: rgba(240, 160, 32, .12); }
.badge.sev-mid { color: var(--brand-text); }
.raid-diag { margin: .7rem 0; color: #e2d2db; font-size: .9rem; }
.raid-meta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .4rem .9rem; font-size: .85rem; }
.raid-meta li { display: grid; gap: .1rem; }
.raid-meta .muted { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.raid-timeline { margin-top: .8rem; }
.raid-timeline summary { cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--brand-text); }
.raid-timeline ul { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; }
.raid-timeline li { display: flex; gap: .7rem; font-size: .84rem; padding: .35rem .6rem; background: var(--well); border-radius: .4rem; }
.raid-timeline .muted { white-space: nowrap; }

/* Votes : classement des serveurs */
.section { display: grid; gap: 1rem; padding: 1.3rem; margin-bottom: 1.2rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.section-head h2, .ranking h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; font-weight: 700; }
.section-head h2 .icon, .ranking h2 .icon { color: var(--brand); }
.section-tools { display: flex; align-items: center; gap: .6rem; }
.section-tools select { width: auto; max-width: 14rem; }
.vote-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .7rem; }
.vote-tile { display: grid; justify-items: center; gap: .3rem; padding: 1.1rem; border-radius: .6rem; border: 1px solid var(--line); text-align: center; }
.vote-tile strong { font-size: 1.6rem; font-weight: 700; }
.vote-tile span { font-size: .8rem; color: #e2d2db; }
.vote-tile.blue { background: rgba(233, 120, 160, .22); } .vote-tile.blue strong { color: var(--brand-text); }
.vote-tile.green { background: rgba(59, 165, 93, .22); } .vote-tile.green strong { color: #57d98a; }
.vote-tile.grey { background: var(--card-2); }
.vote-list { display: grid; gap: .6rem; }
.vote-row { display: flex; align-items: flex-start; gap: .9rem; padding: .9rem 1rem; background: var(--well); border: 1px solid var(--line); border-radius: .7rem; }
.rank { min-width: 2.2rem; font-weight: 800; font-size: 1.05rem; color: var(--brand-text); padding-top: .6rem; }
.vote-main { flex: 1; min-width: 0; display: grid; gap: .4rem; }
.vote-main p { color: #e2d2db; font-size: .88rem; overflow-wrap: anywhere; }
.chips.small .chip { padding: .15rem .6rem; border-radius: 1rem; font-size: .74rem; font-weight: 500; cursor: default; background: var(--brand-soft); border-color: transparent; color: #f6cfe0; }
.vote-side { display: grid; justify-items: end; gap: .1rem; text-align: right; white-space: nowrap; }
.vote-side strong { font-size: 1.3rem; color: var(--brand-text); line-height: 1.1; }
.vote-side small { font-size: .72rem; }
.vote-side .btn { margin-top: .5rem; }
.ranking { display: grid; gap: .7rem; margin-top: 2.2rem; }
.ranking:empty { display: none; }

.board-head { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 1.5rem; }
.board-head h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; }
.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.2rem; align-items: start; }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.board li { display: flex; align-items: center; gap: .8rem; padding: .5rem .75rem; background: var(--well); border-radius: .5rem; }
.board .rank { padding: 0; min-width: 2.4rem; }
.board strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.badge.gold { color: #f6c453; border-color: rgba(240, 160, 32, .5); background: rgba(240, 160, 32, .12); margin-left: .5rem; }
.shop-items { display: grid; gap: .6rem; }
.shop-item { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; background: var(--well); border: 1px solid var(--line); border-radius: .7rem; }
.shop-item > div:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.shop-item p { font-size: .85rem; }
.shop-buy { display: grid; justify-items: end; gap: .4rem; white-space: nowrap; }
.shop-buy > strong { color: #f6c453; }
.section > .toast { margin: 0; }

/* Page serveur et avis */
.vote-name { text-decoration: none; color: inherit; }
.vote-name:hover strong { text-decoration: underline; }
.server-head { display: flex; gap: 1.2rem; align-items: flex-start; margin: 1rem 0 1.5rem; flex-wrap: wrap; }
.server-big { width: 5rem; height: 5rem; border-radius: 1rem; border: 2px solid var(--brand); object-fit: cover; background: var(--card-2); display: grid; place-items: center; font: 700 1.6rem var(--font); flex: none; }
.server-head > div { flex: 1; min-width: 0; display: grid; gap: .6rem; }
.server-head h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.server-desc { color: #e2d2db; max-width: 60ch; }
.server-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.stars { display: inline-flex; gap: .1rem; }
.stars .icon { width: 1em; height: 1em; color: #5b616c; fill: none; }
.stars .icon.on { color: #f6c453; fill: #f6c453; }
.star-pick { display: flex; gap: .3rem; margin: .4rem 0 .8rem; }
.star-pick .icon { width: 1.8rem; height: 1.8rem; color: #5b616c; cursor: pointer; }
.star-pick .icon.on { color: #f6c453; fill: #f6c453; }
.review-form { padding: 1.2rem; display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.review-form h2 { font-size: 1.2rem; }
.review-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.reviews { display: grid; gap: .8rem; }
.reviews h2 { font-size: 1.3rem; }
.review-list { display: grid; gap: .7rem; }
.review { padding: .9rem 1rem; background: var(--well); border: 1px solid var(--line); border-radius: .7rem; }
.review-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.review-top .when { margin-left: auto; font-size: .78rem; }
.review p { color: #e2d2db; font-size: .92rem; overflow-wrap: anywhere; }

/* Fenêtre de configuration */
.overlay { position: fixed; inset: 0; z-index: 10; display: grid; justify-items: center; align-items: start; padding: clamp(.5rem, 2vw, 1.5rem); background: rgba(14, 6, 12, .7); overflow-y: auto; }
.modal { width: min(78rem, 100%); background: #221821; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .5); }
.modal.small { width: min(28rem, 100%); padding: 1.5rem; display: grid; gap: 1rem; justify-items: start; }
.modal-head { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.5rem; background: linear-gradient(180deg, #33232f, #261a24); }
.modal-head h2 { font-size: 1.3rem; font-weight: 700; }
.modal-head p { font-size: .8rem; margin-top: .2rem; }
.modal-icon { width: 3rem; height: 3rem; border-radius: .7rem; object-fit: cover; background: var(--card-2); display: grid; place-items: center; font-weight: 700; flex: none; }
.close { margin-left: auto; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .5rem; background: var(--card-2); color: var(--text); }
.modal-tools { display: flex; flex-wrap: wrap; gap: .6rem; padding: .9rem 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.searchbox { flex: 1 1 14rem; display: flex; align-items: center; gap: .6rem; padding: 0 .85rem; background: var(--well); border: 1px solid var(--line); border-radius: .5rem; color: var(--muted); }
.searchbox input { flex: 1; border: 0 !important; background: transparent !important; padding: .6rem 0 !important; outline: none; }
.toast { display: block; margin: .9rem 1.5rem 0; padding: .6rem .85rem; border-radius: .5rem; background: rgba(59, 165, 93, .14); border: 1px solid rgba(59, 165, 93, .4); font-weight: 500; }
.toast.error { background: rgba(237, 66, 69, .12); border-color: rgba(237, 66, 69, .45); }
.toast:empty { display: none; }
.modal-body { display: grid; grid-template-columns: 14rem minmax(0, 1fr) 15rem; gap: 1.25rem; align-items: start; padding: 1.25rem 1.5rem 1.6rem; }
.cats { display: grid; gap: .25rem; padding: .7rem; background: #1d141b; border-radius: .8rem; }
.cats .count, .cat-list .count, .feature .count { margin-left: auto; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cfg-panel { display: grid; gap: 1.1rem; align-content: start; min-width: 0; padding: 1.4rem; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: .9rem; }
.panel-title { display: flex; align-items: center; gap: .9rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.panel-title h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.panel-title .tile-icon { background: var(--card-2); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; background: var(--well); border: 1px solid var(--line); border-radius: .55rem;
  color: var(--text); font: 600 .86rem var(--font); text-decoration: none; cursor: pointer; }
a.chip:hover, button.chip:hover { border-color: var(--accent); }
button.chip:disabled { opacity: .5; cursor: not-allowed; }
.chip .icon { color: var(--accent); }
.chip .dot { width: .5rem; height: .5rem; border-radius: 50%; background: #5b616c; }
.chip.on .dot { background: var(--green); }
.quick { display: grid; gap: .8rem; padding: 1rem 1.1rem; background: rgba(233, 120, 160, .09); border: 1px solid rgba(233, 120, 160, .45); border-radius: .8rem; --accent: var(--brand); }
.quick-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .8rem; }
.quick-head h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.quick-head h3 .icon { color: #f0a020; }
.tiles { display: grid; gap: 1rem; }
.sec-tile { grid-column: 1 / -1; align-items: stretch; text-align: left; gap: .4rem; }
.sec-head { display: flex; align-items: center; gap: .9rem; }
.sec-ring { width: 3.4rem; height: 3.4rem; flex: none; }
.sec-value { display: grid; line-height: 1.1; }
.sec-value strong { font-size: 1.5rem; }
.sec-value small { color: var(--muted); font-size: .78rem; }
.sec-label { font-weight: 600; font-size: .9rem; }
.sec-advice { margin-top: .3rem; }
.sec-advice ul { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.sec-advice li { font-size: .74rem; padding: .1rem .5rem; border-radius: 1rem; background: rgba(237, 66, 69, .14); color: #ff9c9e; }
.tile { display: grid; gap: .35rem; justify-items: center; padding: 1.3rem 1rem; background: var(--card-2); border-radius: .7rem; }
.tile strong { font-size: 1.5rem; font-weight: 700; color: var(--brand-text); }
.tile span { color: #e2d2db; font-size: .85rem; }
.cat-list { display: grid; gap: .5rem; }
.cat-list a { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; background: var(--well); border: 1px solid var(--line); border-radius: .6rem; color: var(--text); text-decoration: none; }
.cat-list a:hover { border-color: var(--accent); }
.cat-list a > span:nth-child(2) { display: grid; }
.cat-list small { color: var(--muted); font-size: .78rem; }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.history li { display: flex; flex-wrap: wrap; gap: .3rem .7rem; padding: .55rem .75rem; background: var(--well); border-radius: .5rem; font-size: .88rem; }
/* Journal du staff : filtres, et liste qui défile au-delà de 20 actions */
.log-filters { margin-bottom: .8rem; gap: .5rem; align-items: center; }
.log-filters input[type=search] { flex: 2 1 16rem; min-width: 12rem; width: auto; }
.log-filters select { flex: 1 1 9.5rem; width: auto; min-width: 8rem; }
.log-filters .btn { flex: 0 0 auto; }
.section-head .log-count { margin-left: auto; font-size: .85rem; }
.history.staff-log.scroll { position: relative; overflow-y: auto; overscroll-behavior: contain; padding-right: .35rem; scrollbar-gutter: stable; }
.facts { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; color: var(--muted); font-size: .88rem; }
.source { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; background: var(--well); border: 1px solid var(--line); border-radius: .6rem; }
.source strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.back { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .88rem; text-decoration: none; justify-self: start; }

/* Réglages d'un module */
.panel { min-width: 0; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.panel-head h2 { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; font-size: 1.25rem; font-weight: 700; }
.panel-head h2 > .icon { color: var(--accent); }
.panel > p { max-width: 65ch; }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border: 1px solid var(--line); border-radius: 1rem; font: 600 .74rem var(--font); color: var(--muted); white-space: nowrap; }
.badge .icon { width: 1em; height: 1em; }
.notice { background: var(--well); border: 1px solid var(--line); border-left: 3px solid #f0a020; border-radius: .5rem; padding: .7rem .9rem; max-width: 70ch; margin: .75rem 0 0; }
.fields { display: grid; gap: 1.1rem; margin: 1.3rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.field { display: grid; gap: .3rem; max-width: 34rem; }
.field > label, .field > span.label { font-weight: 600; font-size: .9rem; }
.field small { color: var(--muted); font-size: .8rem; }
.field.inline { grid-template-columns: auto 1fr; align-items: center; column-gap: .7rem; }
.field.inline small { grid-column: 2; }
.field.wide { max-width: none; }
h3.section { font-size: 1rem; font-weight: 700; margin: .8rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); display: grid; gap: .25rem; }
h3.section small { font-weight: 400; font-size: .82rem; color: var(--muted); max-width: 60ch; }
.fields > h3.section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
input[type=text], input[type=search], input[type=number], input[type=url], select, textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: .45rem;
  background: var(--well); color: var(--text); font: 400 .92rem var(--font); }
input[type=number] { max-width: 9rem; }
input[type=color] { width: 3.5rem; height: 2.3rem; padding: 0; border: 1px solid var(--line); border-radius: .45rem; background: none; }
textarea { min-height: 6rem; resize: vertical; }
input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
.rows { display: grid; gap: .6rem; justify-items: start; }
.row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; width: 100%; padding: .7rem; border: 1px solid var(--line); border-radius: .5rem; background: rgba(0, 0, 0, .12); }
.row label { display: grid; gap: .2rem; flex: 1 1 11rem; font-size: .82rem; color: var(--muted); }
.row label.wide { flex-basis: 100%; }
/* Interrupteur dans une ligne : l'interrupteur d'abord, son libellé à côté */
.row label.tog { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: .55rem; flex: 1 1 16rem; align-self: center; color: var(--text); font-size: .86rem; cursor: pointer; }
.row label.tog .switch { flex: none; }
.row:has(label.tog) > label:not(.tog) { flex-basis: 100%; max-width: 24rem; }
.row .row-title { flex-basis: 100%; }
.row textarea { min-height: 3.5rem; }
.row-title { flex-basis: 100%; font-size: .9rem; }
/* Ligne repliable : un en-tête (nom modifiable, résumé, bouton Ouvrir / Fermer), puis son contenu une fois ouverte */
.row.row-fold { align-items: center; }
.row-head { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.row.row-fold.open > .row-head { padding-bottom: .6rem; border-bottom: 1px dashed var(--line); margin-bottom: .2rem; }
.row .row-head label.row-name-box { flex: 1 1 11rem; min-width: 8rem; max-width: 22rem; display: flex; flex-direction: row; align-items: center; gap: .35rem; }
.row-name-box .icon { width: .9em; height: .9em; flex: none; color: var(--muted); opacity: .7; }
.row-name-box:focus-within .icon { opacity: 0; }
.row-head .row-name { flex: 1 1 auto; min-width: 0; width: 100%; font-weight: 700; font-size: .95rem; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: .45rem; padding: .3rem .5rem; }
.row-head .row-name::placeholder { color: var(--text); opacity: 1; }
.row-head .row-name:hover { border-color: var(--line); }
.row-head .row-name:focus { border-color: var(--accent); background: var(--well); outline: none; }
.row-head .row-name:focus::placeholder { opacity: .4; }
/* Nom obligatoire (un article sans nom n'est pas mis en vente) : bordure d'avertissement tant qu'il est vide */
.row-head .row-name.missing { border: 1px dashed var(--warn, #f2a900); }
.row-head .row-name.missing::placeholder { color: var(--muted); }
.row-summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .82rem; }
.row-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; }
.row-toggle .icon { width: 1em; height: 1em; transform: rotate(90deg); transition: transform .15s; }
.row-toggle.open .icon { transform: rotate(-90deg); }
.row-advanced { flex-basis: 100%; border-top: 1px dashed var(--line); padding-top: .5rem; }
.row-advanced summary { cursor: pointer; font-size: .82rem; color: var(--muted); }
.row-advanced-body { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.switch { appearance: none; width: 2.7rem; height: 1.5rem; border-radius: 1rem; background: #5b616c; position: relative; cursor: pointer; margin: 0; flex: none; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch:checked { background: var(--green); }
.switch:checked::after { transform: translateX(1.2rem); }
.switch:disabled { opacity: .5; cursor: not-allowed; }
.power { display: flex; align-items: center; gap: .6rem; font-weight: 600; white-space: nowrap; }
.save { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.save output { font-weight: 600; }

/* Page d'accueil publique */
main.public { max-width: 72rem; margin: 0 auto; padding: clamp(1.25rem, 4vw, 2.5rem); }
.hero { max-width: 46rem; padding: clamp(1rem, 5vw, 3.5rem) 0 clamp(1.5rem, 4vw, 3rem); display: grid; gap: 1.2rem; justify-items: start; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.hero p { font-size: 1.08rem; color: #e2d2db; max-width: 60ch; }
/* Petite accroche au-dessus du titre, et la première phrase du texte mise en avant. */
.hero p.hero-kicker { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem; border-radius: 2rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-text); background: var(--brand-soft); border: 1px solid rgba(233, 120, 160, .35); }
.hero-hook { color: #fff; font-weight: 700; }
/* Accueil : moitié-moitié, les serveurs les plus votés (à gauche) et la vitrine des modules (à droite), à la même hauteur. */
.home-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.showcase { --accent: var(--brand); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 1rem; padding: 1.2rem; border-top: 3px solid var(--accent); outline: none; transition: border-color .25s; }
.showcase:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.showcase-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.showcase-tabs::-webkit-scrollbar { display: none; }
.showcase-tab { display: inline-flex; align-items: center; gap: .45rem; flex: none; padding: .45rem .8rem; border-radius: 2rem; border: 1px solid var(--line); background: var(--well); color: var(--muted); font: 600 .82rem var(--font); cursor: pointer; }
.showcase-tab .icon { color: var(--accent); width: 1rem; height: 1rem; }
.showcase-tab:hover { color: var(--text); border-color: var(--accent); }
.showcase-tab.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--well)); }
.showcase-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; }
.showcase-arrow { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line); background: var(--well); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.showcase-arrow:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--well)); }
.showcase-arrow .icon { width: 1.2rem; height: 1.2rem; }
.showcase-body { display: grid; gap: .55rem; min-width: 0; }
.showcase-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.showcase-head h2 { display: flex; align-items: center; gap: .7rem; font-size: 1.2rem; }
.showcase-head .tile-icon .icon { color: var(--accent); }
.showcase-where { margin-left: auto; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.showcase-desc { margin: 0; }
/* Une colonne de six modules : la hauteur reste la même d'une page à l'autre, les flèches ne bougent pas. */
.showcase-grid { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; min-height: calc(6 * 5.1rem + 5 * .6rem); align-content: start; }
.showcase-item { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .8rem; border-radius: .6rem; background: var(--well); border: 1px solid var(--line); }
.showcase-item .tile-icon { flex: none; }
.showcase-item .tile-icon .icon { color: var(--accent); }
.showcase-item strong { display: block; font-size: .92rem; }
.showcase-item small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: .8rem; line-height: 1.35; margin-top: .15rem; }
.showcase-grid.slide-left { animation: showcase-in-left .28s ease; }
.showcase-grid.slide-right { animation: showcase-in-right .28s ease; }
@keyframes showcase-in-left { from { opacity: 0; transform: translateX(1.2rem); } to { opacity: 1; transform: none; } }
@keyframes showcase-in-right { from { opacity: 0; transform: translateX(-1.2rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .showcase-grid.slide-left, .showcase-grid.slide-right { animation: none; } }
.showcase-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem; }
.showcase-dot { width: .55rem; height: .55rem; padding: 0; border-radius: 1rem; border: 0; background: var(--line); cursor: pointer; transition: width .2s, background .2s; }
.showcase-dot.on { width: 1.4rem; background: var(--accent); }
.top-servers { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .7rem; padding: 1.2rem; border-top: 3px solid #f0a020; }
.top-servers h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; }
.top-servers h2 .icon { color: #f0a020; }
.top-servers > .muted { margin: 0; font-size: .85rem; }
.top-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.top-srv { display: grid; grid-template-columns: 1.7rem 2.2rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: .6rem; background: var(--well); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.top-srv:hover { border-color: #f0a020; }
.top-rank { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; font-weight: 800; font-size: .85rem; color: var(--muted); background: var(--card-2); }
.top-rank.medal-1 { background: #f6c453; color: #3b2a00; }
.top-rank.medal-2 { background: #cfd6e0; color: #23262d; }
.top-rank.medal-3 { background: #d99a6c; color: #3a1f0b; }
.top-icon { width: 2.2rem; height: 2.2rem; border-radius: .6rem; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); font-weight: 700; object-fit: cover; }
.top-main { min-width: 0; display: grid; }
.top-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.top-main small { font-size: .75rem; }
.top-votes { display: grid; justify-items: end; line-height: 1.1; }
.top-votes strong { font-size: 1.05rem; color: #f6c453; font-variant-numeric: tabular-nums; }
.top-votes small { font-size: .7rem; color: var(--muted); }
.top-empty { margin: 0; padding: .9rem; border-radius: .6rem; background: var(--well); border: 1px dashed var(--line); color: var(--muted); font-size: .88rem; }
.top-all { justify-self: start; max-width: 100%; white-space: normal; }
.top-free { background: transparent; border-style: dashed; color: var(--muted); }
.top-free .top-icon { background: transparent; border: 1px dashed var(--line); }
.top-free .top-main strong { font-weight: 600; }
/* À côté du classement, les onglets de la vitrine ne montrent que l'icône, sur une seule ligne. */
.home-main .showcase-tab { padding: .5rem .65rem; }
.home-main .showcase-tab span { display: none; }
.home-main .showcase-tab .icon { width: 1.15rem; height: 1.15rem; }
/* Le classement et la vitrine restent côte à côte, moitié-moitié, tant qu'il y a la place : ils ne passent l'un
   sous l'autre que sur un téléphone. */
@media (max-width: 980px) {
  .home-main { gap: .8rem; }
  .showcase, .top-servers { padding: 1rem; }
  .showcase-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem .1rem; }
  .showcase-stage { gap: .5rem; }
  .showcase-arrow { width: 2.2rem; height: 2.2rem; }
}
@media (max-width: 760px) {
  .top-servers h2 { font-size: 1rem; }
  /* Classement plus étroit : sans l'icône, et le nombre de votes passe sous le nom du serveur. */
  .top-srv { grid-template-columns: 1.5rem minmax(0, 1fr); gap: .15rem .5rem; padding: .5rem .6rem; }
  .top-srv .top-icon { display: none; }
  .top-rank { grid-row: span 2; width: 1.5rem; height: 1.5rem; font-size: .78rem; }
  .top-votes { grid-column: 2; display: flex; align-items: baseline; gap: .3rem; }
  .top-votes strong { font-size: .95rem; }
  .top-all { justify-self: stretch; justify-content: center; text-align: center; }
  /* Les flèches passent sous la liste pour laisser toute la largeur aux modules. */
  .showcase-stage { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "body body body" "prev . next"; row-gap: .7rem; }
  .showcase-body { grid-area: body; }
  .showcase-arrow.prev { grid-area: prev; }
  .showcase-arrow.next { grid-area: next; }
}
@media (max-width: 560px) {
  .home-main { grid-template-columns: minmax(0, 1fr); }
  .showcase-grid { min-height: 0; }
  .top-srv { grid-template-columns: 1.6rem 2.2rem minmax(0, 1fr) auto; gap: .55rem; row-gap: 0; }
  .top-srv .top-icon { display: grid; }
  .top-rank { grid-row: auto; }
  .top-votes { grid-column: auto; display: grid; justify-items: end; gap: 0; }
  .top-all { justify-self: start; }
  .top-free-slot { display: none; }
  .home-main .showcase-tab { padding: .45rem .8rem; }
  .home-main .showcase-tab span { display: inline; }
  .home-main .showcase-tab .icon { width: 1rem; height: 1rem; }
}

@media (max-width: 1000px) {
  .modal-body { grid-template-columns: minmax(0, 1fr); }
  .cats { display: flex; overflow-x: auto; }
  .cats a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
  .cats a[aria-current="page"] { border-bottom-color: var(--brand); }
  .cats .count { display: none; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
  .tile { padding: .8rem .4rem; }
}
@media (max-width: 760px) {
  main.dash { grid-template-columns: minmax(0, 1fr); }
  .side { border-right: 0; border-bottom: 1px solid var(--line); }
  .profile, .side-label { display: none; }
  .side nav { display: flex; overflow-x: auto; padding: .5rem; }
  .side nav a { white-space: nowrap; border-left: 0; }
  .side nav a > .icon:last-child { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-head { flex-direction: column; }
  .top { justify-content: space-between; }
  .vote-row, .shop-item { flex-wrap: wrap; }
  .shop-buy { justify-items: start; flex-basis: 100%; }
  .vote-side { justify-items: start; text-align: left; flex-basis: 100%; padding-left: 3.1rem; }
}
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }

.site-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: .9rem; color: var(--muted); }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--brand-text); text-decoration: underline; }

/* Page Premium : une ligne par serveur */
.premium-list { display: grid; gap: .5rem; padding: 0; }
.premium-server { display: flex; align-items: center; gap: .6rem; list-style: none; }
.premium-server strong { flex: 1; }

/* Icône d'un serveur dans la page Premium : taille fixe (sans règle, l'image s'affiche en grand) */
.premium-icon { width: 2.4rem; height: 2.4rem; flex: none; border-radius: .6rem; object-fit: cover; background: var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.premium-pick { align-items: flex-end; margin-bottom: .4rem; }

/* Aide sous un champ d'une liste de lignes */
.cell-help { display: block; margin-top: .25rem; color: var(--muted, #9aa1ad); font-size: .78rem; line-height: 1.35; font-weight: 400; }

/* Boutique : l'offre Premium (une seule carte, deux boutons) */
.premium-offer { display: grid; gap: .9rem; padding: 1.1rem; background: var(--well); border: 1px solid rgba(240, 160, 32, .45); border-radius: .8rem; }
.premium-offer-head { display: flex; align-items: center; gap: .9rem; }
.premium-offer-head > div:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.premium-offer-head > div:nth-child(2) strong { font-size: 1.05rem; }
.premium-price { display: grid; justify-items: end; white-space: nowrap; }
.premium-price strong { color: #f6c453; font-size: 1.35rem; line-height: 1.1; }
.premium-price span, .premium-offer-head span.muted { font-size: .8rem; }
.premium-offer > p { font-size: .9rem; }
.premium-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; }
.premium-perks > div { display: grid; gap: .4rem; align-content: start; }
.premium-perks strong { font-size: .85rem; }
.premium-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.premium-actions > div { display: grid; gap: .4rem; align-content: start; justify-items: start; }
.premium-actions small { font-size: .8rem; }
/* Boutique, encadré Premium : il ne s'élargit jamais au-delà de l'écran ; les étiquettes du haut passent à la ligne. */
.premium-box { grid-template-columns: minmax(0, 1fr); }
.premium-box .section-tools { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.premium-box .section-tools .badge { white-space: normal; }
.premium-halves { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin-top: .9rem; }
.premium-halves-intro { margin: 0; font-size: .88rem; }
/* Les deux cartes prennent toute la largeur (deux colonnes, une seule sur téléphone), chacune à sa hauteur. */
.premium-halves-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: .9rem; align-items: start; }
.premium-offer-half { border-color: var(--line); }
.premium-offer-half.kind-member { border-color: rgba(167, 139, 250, .45); }
.premium-offer-half.kind-server { border-color: rgba(59, 130, 246, .45); }
.premium-offer-half { display: flex; flex-direction: column; }
/* Chaque carte garde sa propre hauteur : pas de grand vide avant le bouton quand l'autre carte a plus d'avantages. */
.premium-offer-half .premium-actions { grid-template-columns: 1fr; }
.premium-state { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .86rem; color: #f6c453; font-weight: 600; }
.premium-state .icon { flex: none; width: 1rem; height: 1rem; }
.premium-offer-half .premium-offer-head { flex-wrap: wrap; }
.shop-target { display: flex; align-items: center; gap: .5rem; font-size: .82rem; margin-top: .3rem; }
.shop-target select { width: auto; max-width: 14rem; }
@media (max-width: 40rem) { .premium-offer-head { flex-wrap: wrap; } .premium-price { justify-items: start; flex-basis: 100%; } }
.toast.shop-status { margin: 0 0 1rem; }

/* ---------- Éditeur de messages (Créateur d'annonces) ---------- */
.builder-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .9rem; margin-top: 1.2rem; padding: .9rem 1rem; background: var(--brand-soft); border: 1px solid rgba(233, 120, 160, .4); border-radius: .7rem; }
.builder-cta > div { flex: 1 1 16rem; display: grid; gap: .25rem; }
.builder-cta p { font-size: .84rem; }
.mb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.mb-editor { display: grid; gap: 1rem; min-width: 0; }
.mb-side { position: sticky; top: 1rem; min-width: 0; }
.mb-card { display: grid; gap: .8rem; padding: 1.1rem; }
.mb-card h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.mb-card h3 .icon { color: var(--brand); }
.mb-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
.mb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .7rem; }
.mb-field { display: grid; gap: .25rem; font-size: .82rem; color: var(--muted); min-width: 0; align-content: start; }
.mb-field.wide, .mb-check.wide { grid-column: 1 / -1; }
.mb-field > span { display: flex; justify-content: space-between; gap: .5rem; font-weight: 600; }
.mb-field textarea { min-height: 0; }
.mb-count, .mb-total { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.mb-count.over, .mb-total.over { color: #ff8e90; font-weight: 700; }
.mb-inline { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.mb-inline > input[type=text] { flex: 1 1 12rem; width: auto; }
.mb-color input[type=color] { width: 3.2rem; height: 2.2rem; padding: .15rem; border: 1px solid var(--line); border-radius: .45rem; background: var(--well); cursor: pointer; }
.mb-check { display: flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--text); cursor: pointer; }
.mb-embed { border: 1px solid var(--line); border-left: 4px solid var(--bar, #4e5058); border-radius: .6rem; background: var(--well); }
.mb-embed > summary { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .65rem .8rem; cursor: pointer; font-weight: 600; list-style: none; }
.mb-embed > summary::-webkit-details-marker { display: none; }
.mb-embed > summary::before { content: '▸'; color: var(--muted); margin-right: .2rem; }
.mb-embed[open] > summary::before { content: '▾'; }
.mb-embed-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-tools, .mb-row-tools { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.mb-tool { padding: .25rem .5rem; min-width: 2rem; justify-content: center; }
.mb-tool .icon { width: 1em; height: 1em; }
.mb-embed-body { display: grid; gap: .7rem; padding: .2rem .8rem .9rem; }
.mb-embed-body h4 { margin-top: .4rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mb-embed-body h4:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.mb-rows { display: grid; gap: .6rem; }
.mb-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .6rem; padding: .7rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--card); }
.mb-row .mb-field.wide { grid-column: auto; }
.mb-row-tools { grid-column: 1 / -1; }
.mb-row-tools .mb-check { margin-right: auto; }
.mb-more > summary { cursor: pointer; color: var(--brand-text); font-size: .86rem; font-weight: 600; }
.mb-more[open] > summary { margin-bottom: .6rem; }
.mb-more { display: grid; gap: .6rem; }
.mb-more > * + * { margin-top: .6rem; }
.mb-editing { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.mb-editing .badge.gold { margin-left: 0; }
.mb-notice { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem; }
.mb-templates { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mb-templates li { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .5rem .7rem; background: var(--well); border: 1px solid var(--line); border-radius: .5rem; }
.mb-templates li strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mb-json { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.toast.mb-status { margin: 0; }
.mb-status a { color: inherit; font-weight: 700; }
.mb-preview-box { overflow: hidden; border-radius: .6rem; }

/* Aperçu : le message comme sur Discord (thème sombre) */
.dc { background: #313338; color: #dbdee1; padding: 1rem; font: 400 .94rem/1.375 "gg sans", "Noto Sans", Inter, "Helvetica Neue", Arial, sans-serif; overflow-wrap: anywhere; }
.dc-msg { display: flex; gap: .9rem; }
.dc-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.dc-avatar-default { display: grid; place-items: center; background: #5865f2; color: #fff; font-size: 0; }
.dc-avatar-default .icon { width: 22px; height: 22px; }
.dc-avatar.dc-broken { background: #4e5058; font-size: 0; }
.dc-body { flex: 1; min-width: 0; display: grid; gap: .25rem; justify-items: start; }
.dc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; }
.dc-name { color: #f2f3f5; font-weight: 500; }
.dc-tag { align-self: center; background: #5865f2; color: #fff; font-size: .62rem; font-weight: 600; padding: .05rem .3rem; border-radius: .2rem; }
.dc-date { color: #949ba4; font-size: .75rem; }
.dc-content, .dc-embed-desc, .dc-field-value { white-space: pre-wrap; }
.dc a { color: #00a8fc; text-decoration: none; }
.dc a:hover { text-decoration: underline; }
.dc code { background: #2b2d31; border-radius: .2rem; padding: .05rem .25rem; font: .85em ui-monospace, Consolas, monospace; }
.dc pre { background: #2b2d31; border: 1px solid #1e1f22; border-radius: .25rem; padding: .5rem; margin: .2rem 0; font: .85em/1.3 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.dc-mention { background: rgba(88, 101, 242, .3); color: #c9cdfb; border-radius: .2rem; padding: 0 .15rem; font-weight: 500; }
.dc-time-pill { background: rgba(255, 255, 255, .06); border-radius: .2rem; padding: 0 .15rem; }
.dc-spoiler { background: #1e1f22; color: #dbdee1; border-radius: .2rem; padding: 0 .15rem; }
.dc-emoji { width: 1.375em; height: 1.375em; vertical-align: bottom; object-fit: contain; }
/* Icônes du bot (à la place des emojis) : blanches, comme sur Discord. */
svg.dc-icon { color: #f2f3f5; stroke-width: 2.3; padding: .08em; box-sizing: border-box; }
.dc-mask { display: inline-block; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
/* Couleur des icônes du bot : pastilles et échantillon. */
.look-icons { margin-top: .4rem; }
.look-icons-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1rem 1.6rem; align-items: start; }
.look-icons-body > p { margin: 0; }
.icon-colors { display: grid; gap: .7rem; }
.icon-swatches { display: flex; flex-wrap: wrap; gap: .45rem; }
.icon-swatch { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem .3rem .35rem; border-radius: 999px; border: 1px solid var(--line); background: var(--well); color: var(--text); font: 600 .8rem var(--font); cursor: pointer; }
.icon-swatch i { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--c); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.icon-swatch i .icon { width: .8rem; height: .8rem; color: #111; stroke-width: 3.2; }
.icon-swatch.on { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent); }
.icon-swatch[data-value="auto"] { --c: #f472b6; }
.icon-swatch[data-value="auto"] i { background: conic-gradient(#f472b6, #a78bfa, #60a5fa, #22d3ee, #4ade80, #facc15, #fb923c, #f87171, #f472b6); }
.icon-state { display: flex; align-items: center; gap: .35rem; margin: 0; }
.icon-state .icon { width: 14px; height: 14px; }
.icon-state.ok { color: var(--green); }
.icon-sample { display: flex; flex-wrap: wrap; gap: .55rem; padding: .7rem .8rem; border-radius: .6rem; background: #2b2d31; }
.icon-sample .icon { width: 1.35rem; height: 1.35rem; stroke-width: 2.3; }
@media (max-width: 760px) { .look-icons-body { grid-template-columns: 1fr; } }
.dc-h { font-weight: 700; color: #f2f3f5; margin: .3rem 0 .1rem; line-height: 1.25; }
.dc-h1 { font-size: 1.5em; } .dc-h2 { font-size: 1.25em; } .dc-h3 { font-size: 1.05em; }
.dc-sub { font-size: .8em; color: #949ba4; }
.dc-quote { border-left: 4px solid #4e5058; padding-left: .7rem; }
.dc-li { padding-left: 1em; text-indent: -1em; }
.dc-li::before { content: '•'; display: inline-block; width: 1em; text-indent: 0; }
.dc-embed { max-width: 32.5rem; width: 100%; background: #2b2d31; border-left: 4px solid #4e5058; border-radius: .25rem; padding: .55rem 1rem .9rem .75rem; display: grid; gap: .5rem; font-size: .875rem; }
.dc-embed-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.dc-embed-top.with-thumb { grid-template-columns: minmax(0, 1fr) auto; }
.dc-embed-main { display: grid; gap: .45rem; min-width: 0; align-content: start; }
.dc-embed-author { display: flex; align-items: center; gap: .5rem; color: #f2f3f5; font-weight: 600; font-size: .875rem; margin-top: .25rem; }
.dc-author-icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.dc-embed-title { display: block; color: #f2f3f5; font-weight: 600; font-size: 1rem; }
a.dc-embed-link .dc-embed-title { color: #00a8fc; }
.dc-embed-desc { display: block; }
.dc-fields { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.dc-field { flex: 1 1 100%; min-width: 0; display: grid; gap: .1rem; }
.dc-field.inline { flex: 1 1 28%; }
.dc-field-name { color: #f2f3f5; font-weight: 600; }
.dc-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: .25rem; margin-top: .3rem; }
.dc-image { max-width: 100%; max-height: 300px; border-radius: .25rem; object-fit: contain; justify-self: start; }
.dc-files { display: grid; gap: .3rem; justify-items: start; }
.dc-file-image { max-width: min(100%, 550px); max-height: 350px; border-radius: .5rem; object-fit: contain; display: block; }
.dc-broken { display: inline-grid; place-items: center; padding: .4rem .6rem; background: #1e1f22; color: #949ba4; font-size: .75rem; border-radius: .25rem; }
.dc-embed-footer { display: flex; align-items: center; gap: .5rem; color: #dbdee1; font-size: .75rem; font-weight: 500; }
.dc-footer-icon { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.dc-empty { color: #949ba4; font-style: italic; }
@media (max-width: 1100px) { .mb { grid-template-columns: minmax(0, 1fr); } .mb-side { position: static; order: -1; } }
@media (max-width: 40rem) { .mb-row { grid-template-columns: minmax(0, 1fr); } }

/* Modules réservés au Premium */
.chip-gem { display: inline-flex; color: #f6c453; }
.chip-gem .icon { width: .95em; height: .95em; }
.chip.mod.premium-locked { opacity: .7; }
.chip:disabled { opacity: .5; cursor: not-allowed; }
.premium-notice { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem; border-left-color: #f0a020; }
.premium-notice > span { display: inline-flex; align-items: center; gap: .5rem; flex: 1 1 16rem; }
.premium-notice .icon { color: #f6c453; flex: none; }

/* Page Premium : tuiles du logo et de la bannière, avec un crayon pour choisir l'image */
.brand-tiles { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .4rem 0 .5rem; }
.brand-pick { display: grid; gap: .4rem; justify-items: start; }
.brand-pick > strong { font-size: .86rem; }
.brand-pick > small { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-tile { position: relative; display: grid; place-items: center; height: 7.5rem; border-radius: .8rem; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #e66d9b, #b03e6c) center / cover no-repeat; border: 1px solid rgba(255, 255, 255, .08); transition: filter .15s; }
.brand-tile.logo { width: 7.5rem; }
.brand-tile.banner { width: min(20rem, 70vw); }
.brand-tile:hover, .brand-tile:focus-visible { filter: brightness(1.1); outline: none; box-shadow: 0 0 0 2px var(--brand-text); }
.brand-tile > .icon { width: 2rem; height: 2rem; opacity: .95; }
.brand-tile.filled > .icon { display: none; }
.brand-edit, .brand-clear { position: absolute; top: .45rem; display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: .5rem; background: rgba(22, 24, 28, .85); color: #fff; cursor: pointer; }
.brand-edit { right: .45rem; }
.brand-clear { left: .45rem; }
.brand-clear[hidden] { display: none; }
.brand-edit:hover, .brand-clear:hover { background: var(--bg); }
.brand-edit .icon, .brand-clear .icon { width: 1rem; height: 1rem; }
.brand-now { margin: .5rem 0 0; font-size: .82rem; }
/* Panel d'un serveur, page « Apparence du bot » : profil du bot rien que sur ce serveur (Premium serveur) */
.brand-panel { margin-top: 1.2rem; padding: .9rem 1rem 1rem; background: var(--brand-soft); border: 1px solid rgba(233, 120, 160, .4); border-radius: .7rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.brand-panel .brand-editor { min-width: 0; }
.brand-panel .staff-form label { min-width: 0; flex: 1 1 12rem; }
.brand-panel .brand-pick { max-width: 100%; min-width: 0; }
.brand-panel .brand-pick.banner { flex: 1 1 13rem; }
.brand-panel .brand-tile.banner { width: 100%; max-width: 20rem; }
.brand-panel .section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.brand-panel h3 { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: 1rem; }
.brand-panel > p { font-size: .86rem; margin: 0; }
.brand-panel .premium-notice { max-width: none; margin: 0; }
.brand-panel .premium-notice > span { flex-basis: 100%; }
.brand-panel .toast { margin: .3rem 0 0; }
.premium-bonus { display: flex; align-items: center; gap: .5rem; color: #f6c453; font-weight: 600; font-size: .9rem; }
.premium-bonus .icon { flex: none; }

/* Panel staff : signalements de bugs */
.bug-card { display: grid; gap: .7rem; }
.bug-text { white-space: pre-wrap; overflow-wrap: anywhere; padding: .7rem .85rem; background: var(--well); border: 1px solid var(--line); border-radius: .5rem; font-size: .92rem; }
.bug-card .staff-form { margin-bottom: 0; }

/* Résolution d'un raid (Logs Raid et panel du serveur) */
.raid-resolve { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); display: grid; gap: .5rem; }
.raid-resolve-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.raid-resolve-opt { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; cursor: pointer; }
.raid-resolve .muted { font-size: .8rem; margin: 0; max-width: 75ch; }
.raid-restored { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .85rem; }
.raid-restored li { display: flex; gap: .5rem; align-items: flex-start; }
.raid-restored svg { width: 1rem; height: 1rem; flex: none; color: #3ba55d; margin-top: .15rem; }
.notice.danger.raid-banner { max-width: none; margin: .75rem 1.5rem 0; color: var(--text); }
.raid-banner > strong { display: flex; align-items: center; gap: .5rem; color: #ff8e90; }
.raid-banner > strong svg { width: 1.1rem; height: 1.1rem; }
.raid-banner ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.raid-cmd { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .3rem; font-size: .78rem; color: var(--muted, #9aa0aa); }
.raid-cmd code { font-size: .8rem; padding: .1rem .4rem; border-radius: .3rem; background: var(--well); color: var(--brand-text); user-select: all; }
.raid-meta { align-items: start; }
.raid-meta li { align-content: start; }

/* Rôles en libre-service : envoyer le panneau ou les réactions depuis le site */
.send-box { margin-top: 1.4rem; padding: 1rem 1.1rem; display: grid; gap: .8rem; background: var(--brand-soft); border: 1px solid rgba(233, 120, 160, .4); border-radius: .7rem; }
.send-box h3 { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.send-box h3 svg { width: 1.1rem; height: 1.1rem; }
.send-box > .muted { margin: 0; font-size: .84rem; }
.send-row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; padding-top: .8rem; border-top: 1px solid rgba(233, 120, 160, .25); }
.send-row > div { flex: 1 1 15rem; display: grid; gap: .15rem; }
.send-row small { font-size: .78rem; }
.send-row select { flex: 0 1 14rem; min-width: 10rem; }
.send-box .toast:empty { display: none; }
/* Page Protections : une ligne par protection, rangées par famille */
.protect-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; }
.protect-top p { margin: 0; flex: 1 1 22rem; font-size: .86rem; }
.protect-family { display: grid; gap: .35rem; margin-top: 1.2rem; }
.protect-family h3 { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .25rem; font-size: 1rem; }
.protect-family h3 .count { font-size: .8rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.protect-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .5rem .9rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: .6rem; background: rgba(0, 0, 0, .12); }
.protect-row.on { border-color: rgba(59, 165, 93, .5); background: rgba(59, 165, 93, .07); }
.protect-text { display: grid; gap: .1rem; min-width: 0; }
.protect-text strong { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; }
.protect-text small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.protect-sanction { width: auto; min-width: 9.5rem; padding: .35rem .6rem; font-size: .84rem; }
.protect-fixed { min-width: 9.5rem; font-size: .84rem; color: var(--muted); text-align: left; padding-left: .2rem; }
.protect-link { display: inline-flex; padding: .35rem; border-radius: .45rem; color: var(--muted); }
.protect-link:hover, .protect-link:focus-visible { color: var(--text); background: var(--well); }
.protect-link svg { width: 1.05rem; height: 1.05rem; }
@media (max-width: 640px) { .protect-row { grid-template-columns: auto minmax(0, 1fr) auto; } .protect-sanction, .protect-fixed { grid-column: 2 / 3; justify-self: start; min-width: 0; } .protect-fixed:empty { display: none; } }
/* Configuration assistée : quatre étapes */
.wizard-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.wizard-steps { list-style: none; margin: 1rem 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; counter-reset: none; }
.wizard-steps li { padding-top: .5rem; border-top: 4px solid var(--line); font-size: .82rem; color: var(--muted); }
.wizard-steps li.done { border-top-color: var(--green); }
.wizard-steps li[aria-current="step"] { color: var(--text); font-weight: 600; }
.wizard-card { display: grid; gap: .8rem; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(0, 0, 0, .14); }
.wizard-card h3 { margin: 0; font-size: 1.05rem; }
.wizard-card > .muted { margin: -.5rem 0 0; font-size: .86rem; }
.wizard-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; }
.wizard-choice { display: grid; gap: .3rem; padding: .85rem .95rem; text-align: left; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: .6rem; cursor: pointer; }
.wizard-choice:hover { border-color: var(--muted); }
.wizard-choice.on { border-color: var(--green); background: rgba(59, 165, 93, .14); }
.wizard-choice strong { display: inline-flex; align-items: center; gap: .45rem; font-size: .95rem; }
.wizard-choice strong svg { width: 1.05rem; height: 1.05rem; flex: none; }
.wizard-choice small { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.wizard-count { margin: 0; font-size: .88rem; }
.wizard-select { max-width: 24rem; }
.wizard-note { display: flex; gap: .6rem; align-items: flex-start; margin: 0; padding: .7rem .9rem; border-radius: .55rem; background: var(--well); color: var(--muted); font-size: .84rem; line-height: 1.4; }
.wizard-note svg { width: 1rem; height: 1rem; flex: none; margin-top: .15rem; }
.wizard-list { max-height: 21rem; overflow-y: auto; border: 1px solid var(--line); border-radius: .6rem; }
.wizard-item { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: baseline; gap: .6rem; padding: .55rem .8rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.wizard-item:last-child { border-bottom: 0; }
.wizard-item svg { width: .95rem; height: .95rem; color: var(--green); align-self: center; }
.wizard-item small { color: var(--muted); font-size: .8rem; }
.wizard-item .wizard-sanction { color: var(--muted); font-size: .84rem; white-space: nowrap; }
.wizard-item.same strong, .wizard-item.same .wizard-sanction { color: var(--muted); font-weight: 500; }
.wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.wizard-nav .btn { display: inline-flex; align-items: center; gap: .4rem; }
.wizard-nav .btn svg { width: 1rem; height: 1rem; }
/* Pages de sécurité : liste blanche, liste noire, rôles et membres */
.sec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem); gap: 1rem; align-items: start; }
@media (max-width: 820px) { .sec-grid { grid-template-columns: 1fr; } }
.sec-main { display: grid; gap: 1rem; min-width: 0; }
.sec-card { display: grid; gap: .5rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(0, 0, 0, .14); margin-top: 1rem; }
.sec-main .sec-card { margin-top: 0; }
.sec-card h3 { margin: 0; font-size: 1rem; }
.sec-card > .muted { margin: 0 0 .3rem; font-size: .84rem; }
.sec-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--card); font-size: .9rem; }
.sec-row code { font-size: .74rem; }
.sec-row .btn { margin-left: auto; padding: .25rem .6rem; font-size: .8rem; }
.sec-row.role .chips { flex: 1 1 12rem; }
.sec-kind { display: inline-flex; color: var(--muted); }
.sec-kind svg { width: 1rem; height: 1rem; }
.sec-reason { flex: 1 1 10rem; color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
.sec-date { font-size: .78rem; white-space: nowrap; }
.sec-empty { margin: .4rem 0; padding: 1rem; text-align: center; color: var(--muted); font-size: .88rem; border: 1px dashed var(--line); border-radius: .55rem; }
.sec-add { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .6rem; }
.sec-add input, .sec-add select { flex: 1 1 10rem; min-width: 0; width: auto; }
.sec-add .btn { display: inline-flex; align-items: center; gap: .35rem; }
.sec-add .btn svg { width: 1rem; height: 1rem; }
.sec-help { display: grid; gap: .5rem; padding: 1rem; border-radius: .8rem; background: var(--well); font-size: .84rem; line-height: 1.45; color: var(--muted); }
.sec-help strong { display: flex; align-items: center; gap: .45rem; color: var(--text); font-size: .9rem; }
.sec-help strong svg { width: 1rem; height: 1rem; }
.sec-help p { margin: 0; }
.sec-foot { margin: 0; font-size: .82rem; }
.role-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--muted); flex: none; }
.badge.warn { background: rgba(240, 160, 32, .18); color: #f0b54a; }
.chips.small .chip.danger { background: rgba(237, 66, 69, .16); color: #f29a9c; }
.sec-inspect:empty { display: none; }
.sec-member { display: grid; gap: .5rem; margin-top: .6rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--card); }
.sec-member-head { display: flex; align-items: center; gap: .7rem; }
.sec-member-head div { display: grid; }
.sec-member h4 { margin: .4rem 0 0; font-size: .86rem; }
.sec-member .facts { margin: 0; }
.sec-verdict { display: flex; gap: .5rem; align-items: flex-start; margin: 0; padding: .55rem .75rem; border-radius: .5rem; background: rgba(240, 160, 32, .12); font-size: .86rem; }
.sec-verdict.ok { background: rgba(59, 165, 93, .12); }
.sec-verdict svg { width: 1rem; height: 1rem; flex: none; margin-top: .12rem; }
/* Scan de sécurité */
.scan { display: grid; gap: .9rem; margin: 1rem 0 1.4rem; }
.scan-start, .scan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.scan-start { padding: 1.1rem 1.2rem; border: 1px dashed var(--line); border-radius: .8rem; }
.scan-start p { margin: .2rem 0 0; font-size: .86rem; }
.scan-head h3 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.05rem; }
.scan-head h3 svg { width: 1.1rem; height: 1.1rem; }
.scan .btn { display: inline-flex; align-items: center; gap: .4rem; }
.scan .btn svg { width: 1rem; height: 1rem; }
.scan-grid { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 860px) { .scan-grid { grid-template-columns: 1fr; } }
.scan-score { display: grid; gap: .6rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(0, 0, 0, .14); }
.scan-score p { margin: 0; font-size: .9rem; line-height: 1.4; }
.scan-ring { --p: 0; --c: var(--green); width: 6.2rem; height: 6.2rem; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--bg-2, #1b1d22) 79%, transparent 80% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0); }
.scan-ring.mid { --c: #f0a020; } .scan-ring.bad { --c: #ed4245; }
.scan-ring strong { font-size: 1.7rem; line-height: 1; }
.scan-ring small { color: var(--muted); font-size: .72rem; }
.scan-bars { display: grid; gap: .55rem; margin-top: .3rem; }
.scan-bar { display: grid; grid-template-columns: 1fr auto; gap: .2rem .5rem; font-size: .82rem; }
.scan-track { grid-column: 1 / -1; height: .32rem; border-radius: 1rem; background: var(--line); overflow: hidden; }
.scan-track span { display: block; height: 100%; border-radius: 1rem; background: var(--green); }
.scan-track.mid span { background: #f0a020; } .scan-track.bad span { background: #ed4245; }
.scan-list { display: grid; gap: .6rem; min-width: 0; }
.scan-tabs { display: flex; flex-wrap: wrap; gap: .3rem; }
.scan-tabs button { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; font: inherit; font-size: .84rem; color: var(--muted); background: var(--well); border: 1px solid transparent; border-radius: .5rem; cursor: pointer; }
.scan-tabs button.on { color: var(--text); border-color: var(--line); background: var(--card); font-weight: 600; }
.scan-tabs button span { font-size: .74rem; color: var(--muted); }
.scan-item { display: grid; gap: .4rem; padding: .85rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: .6rem; background: rgba(0, 0, 0, .12); }
.scan-item.important { border-left-color: #ed4245; } .scan-item.review { border-left-color: #f0a020; }
.scan-item header { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; }
.scan-item header svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--muted); }
.scan-item.important header svg { color: #ed4245; } .scan-item.review header svg { color: #f0a020; }
.scan-item header strong { font-size: .95rem; }
.scan-item header .muted { font-size: .78rem; }
.scan-item p { margin: 0; font-size: .87rem; line-height: 1.45; }
.scan-fix { color: var(--muted); }
.badge.sev { font-size: .72rem; }
.badge.sev.important { background: rgba(237, 66, 69, .18); color: #f29a9c; } .badge.sev.review { background: rgba(240, 160, 32, .18); color: #f0b54a; } .badge.sev.tip { background: var(--well); color: var(--muted); }
.scan-link { font-size: .86rem; color: var(--green); text-decoration: none; }
.scan-link:hover { text-decoration: underline; }
.scan-strong { padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .6rem; }
.scan-strong summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 600; font-size: .92rem; }
.scan-strong summary svg { width: 1rem; height: 1rem; color: var(--green); }
.scan-strong ul { margin: .7rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; font-size: .87rem; color: var(--muted); }
/* Champ avec un exemple proposé (description de la fiche de bienvenue) */
textarea.with-example { min-height: 12rem; line-height: 1.45; }
textarea.with-example::placeholder { color: var(--muted); opacity: .7; }
.example-row { display: flex; justify-content: flex-start; }
.example-btn { font-size: .82rem; padding: .3rem .7rem; }
textarea.with-hint::placeholder, input.with-hint::placeholder { color: var(--muted); opacity: .7; }
/* Colonne d'une liste de lignes avec son bouton « Insérer l'exemple » */
.row .cell-ex { display: grid; gap: .35rem; flex: 1 1 11rem; }
.row .cell-ex.wide { flex-basis: 100%; }
.row .cell-ex > label { flex: none; }
.row:has(label.tog) > .cell-ex { flex-basis: 100%; max-width: 24rem; }
.row:has(label.tog) > .cell-ex.wide { max-width: none; }
/* Bienvenue : aperçu en direct de la carte en image */
.card-part { display: grid; gap: .8rem; }
.card-part[hidden] { display: none; }
.card-part > .muted { margin: 0; font-size: .84rem; }
.card-part[hidden] + .send-row { border-top: 0; padding-top: 0; }
.card-canvas { display: block; width: 100%; max-width: 46rem; height: auto; aspect-ratio: 1000 / 320; border-radius: .9rem; box-shadow: 0 .5rem 1.4rem rgba(0, 0, 0, .35); }
.card-canvas.off { opacity: .35; filter: grayscale(1); }
.card-note { font-size: .82rem; color: var(--muted); }
.card-note:empty { display: none; }
.card-note.bad { color: var(--danger, #f87171); }
.mb-send-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.mb-send-big { padding: .7rem 1.4rem; font-size: 1rem; }

/* Page Premium : acheter une place en plus avec ses crédits */
.slot-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem; margin-top: 1rem; padding: .9rem 1rem; background: var(--well); border: 1px solid var(--line); border-radius: .7rem; }
.slot-buy > div { flex: 1 1 18rem; display: grid; gap: .25rem; }
.slot-buy strong { display: flex; align-items: center; gap: .5rem; }
.slot-buy strong svg { width: 1.05rem; height: 1.05rem; color: var(--brand-text); }
.slot-buy p { margin: 0; font-size: .86rem; }
.shop-target a { margin-left: .4rem; }

/* Listes dans une liste : des boutiques, chacune avec ses articles */
.row.row-group { width: 100%; padding: 1rem 1.1rem; border: 1px solid rgba(233, 120, 160, .45); border-left: 3px solid var(--brand); background: rgba(233, 120, 160, .05); border-radius: .7rem; }
.row.row-group.kind-market { border-color: rgba(154, 161, 173, .5); border-left-color: #9aa1ad; background: rgba(0, 0, 0, .18); }
.row.row-group > .row-title { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.row .nested { flex-basis: 100%; display: grid; gap: .5rem; }
/* Dans une ligne : titres de section, cases à cocher, rôles multiples (hubs de salons vocaux temporaires) */
.row .row-section { flex-basis: 100%; display: grid; gap: .15rem; margin-top: .7rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.row .row-section strong { font-size: .95rem; }
.row .row-section small { color: var(--muted); font-size: .8rem; }
.row .multi { flex: 1 1 18rem; display: grid; gap: .35rem; align-content: start; font-size: .82rem; color: var(--muted); }
.row .multi.wide { flex-basis: 100%; }
.row.row-group > .multi, .row.row-group > label.tog { flex-basis: 100%; }
.row.row-group > label.tog { flex-wrap: wrap; }
.row.row-group > label.tog .cell-help { flex-basis: 100%; order: 3; color: var(--muted); font-size: .8rem; }
.row .multi > .label, .field > .label { font-size: .82rem; color: var(--muted); }
.checks { display: flex; flex-wrap: wrap; gap: .4rem; }
.check, .row label.check { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .4rem; padding: .32rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font-size: .84rem; cursor: pointer; }
.check:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.check input { accent-color: var(--brand); margin: 0; }
.role-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.role-chips .chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .3rem .25rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font-size: .84rem; }
.role-chips .chip button { border: 0; background: none; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .3rem; }
.role-chips .chip button:hover { color: var(--text); }
.role-chips select { flex: 0 1 12rem; min-width: 9rem; }
.member-search { position: relative; flex: 1 1 12rem; min-width: 10rem; }
.member-search .member-input { width: 100%; }
.member-results { position: absolute; z-index: 30; top: calc(100% + .25rem); left: 0; right: 0; display: grid; gap: .15rem; background: var(--card); border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 .8rem 2rem rgba(0,0,0,.35); padding: .3rem; }
.member-results:empty { display: none; }
.member-hit { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .4rem .5rem; border: 0; border-radius: .45rem; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.member-hit:hover, .member-hit:focus-visible { background: var(--well); }
.member-hit img, .member-hit .member-dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none; background: var(--well); }
.member-hit small { margin-left: auto; color: var(--muted); font-size: .78rem; }
.member-none { margin: .3rem .5rem; font-size: .85rem; }
.row .nested > .label { font-weight: 600; font-size: .9rem; }
.row .nested .rows { width: 100%; }
.row .nested .row { width: 100%; background: var(--card); }
.add-choices { width: 100%; display: grid; gap: .7rem; padding: 1rem 1.1rem; border: 1px dashed var(--line); border-radius: .7rem; justify-items: start; }
.add-choices-list { display: flex; flex-wrap: wrap; gap: .7rem; width: 100%; }
.add-choice { flex: 1 1 15rem; display: grid; gap: .3rem; text-align: left; padding: .9rem 1rem; background: var(--well); color: var(--text); border: 1px solid var(--line); border-radius: .6rem; cursor: pointer; font: inherit; }
.add-choice:hover, .add-choice:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
.add-choice small { color: var(--muted); font-size: .8rem; line-height: 1.35; }

/* Page Accès : owners et tableau « Qui peut faire quoi » */
.sec-card h3 .count { margin-left: .5rem; font: 600 .74rem var(--font); color: var(--muted); }
.sec-foot svg { width: .9rem; height: .9rem; vertical-align: -.12rem; }
.can-wrap { overflow-x: auto; }
.can-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.can-table th, .can-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); text-align: center; }
.can-table thead th { font: 600 .74rem var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.can-table tbody th { text-align: left; font-weight: 500; line-height: 1.35; }
.can-table tbody tr:last-child th, .can-table tbody tr:last-child td { border-bottom: 0; }
.can { display: inline-flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; border-radius: 50%; }
.can svg { width: .9rem; height: .9rem; }
.can.yes { background: rgba(59, 165, 93, .18); color: #57c27d; }
.can.no { background: rgba(237, 66, 69, .14); color: #ff8e90; }

/* Importer / Copier un serveur */
.io-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.io-card { display: grid; gap: .7rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(0, 0, 0, .14); min-width: 0; }
.io-card h3 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1rem; }
.io-card h3 > svg { width: 1.1rem; height: 1.1rem; color: var(--brand-text); }
.io-card h3 .badge { margin-left: auto; }
.io-card > .muted, .io-card .facts { margin: 0; font-size: .86rem; }
.io-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.io-actions .btn { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; white-space: normal; text-align: left; }
.io-actions .btn svg { width: 1rem; height: 1rem; }
.io-list { display: grid; gap: .5rem; font-size: .88rem; }
.io-ids { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .6rem; align-items: end; }
.io-ids label { display: grid; gap: .3rem; font-size: .8rem; color: var(--muted); min-width: 0; }
.io-ids input { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.io-ids input[readonly] { opacity: .75; }
.io-arrow { padding-bottom: .55rem; color: var(--muted); }
@media (max-width: 520px) { .io-ids { grid-template-columns: 1fr; } .io-arrow { display: none; } }
.io-check { display: flex; align-items: center; gap: .6rem; font-size: .88rem; }
.io-result { display: grid; gap: .6rem; }
.io-result:empty { display: none; }
.io-result p { margin: 0; }
.io-result .facts .error { color: #ff8e90; }
.io-bar { height: .55rem; border-radius: 1rem; background: var(--well); overflow: hidden; }
.io-bar span { display: block; height: 100%; background: var(--brand); border-radius: 1rem; transition: width .3s; }
@media (prefers-reduced-motion: reduce) { .io-bar span { transition: none; } }

/* ---------- Thème du logo sur tout le site : cerisiers en fleurs, la nuit ----------
   Fond prune avec des lueurs roses qui dérivent lentement, des lucioles qui montent, des pétales qui tombent en
   tournoyant et une branche de cerisier qui se balance. Tout est derrière le contenu (z-index négatif) et ne gêne
   jamais les clics. Sur la page d'accueil, en plus : une grande lune cerclée avec un cerisier en fleurs, comme le rond du logo. */
body { background: linear-gradient(180deg, #1d121b 0%, #150d14 100%) fixed; }
.hero h1 { text-shadow: 0 2px 24px rgba(23, 15, 22, .8); }
.hero p { text-shadow: 0 1px 12px rgba(23, 15, 22, .9); }
body.is-home .box { background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 10px 40px rgba(8, 3, 8, .35); }

.sakura-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* Lueurs roses : de grands halos qui dérivent très lentement. */
.sky-glow { position: absolute; border-radius: 50%; will-change: transform; animation: glow-drift var(--d) ease-in-out var(--w) infinite alternate; }
.sky-glow.g1 { --d: 38s; --w: 0s; width: 60rem; height: 60rem; top: -26rem; right: -20rem; background: radial-gradient(circle, rgba(236, 128, 168, .26), transparent 62%); }
.sky-glow.g2 { --d: 46s; --w: -14s; width: 52rem; height: 52rem; bottom: -24rem; left: -20rem; background: radial-gradient(circle, rgba(214, 92, 150, .18), transparent 62%); }
@keyframes glow-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-7vw, 5vh, 0) scale(1.12); }
  100% { transform: translate3d(5vw, -4vh, 0) scale(.94); }
}
/* La branche de cerisier qui monte du coin en bas à droite (les autres pages ; l'accueil a la sienne, plus
   grande). L'image est retournée par son cadre, et se balance depuis le coin. */
.sky-branch-wrap { position: absolute; right: -2.5rem; bottom: -1.5rem; width: min(32rem, 64vw); transform: scaleY(-1); }
.sky-branch { display: block; width: 100%; opacity: .65; transform-origin: 100% 7%; animation: branch-sway 9s ease-in-out infinite alternate; }
body.is-home .sky-branch-wrap { display: none; }
@keyframes branch-sway { from { transform: rotate(-1.8deg); } to { transform: rotate(1.4deg); } }
/* Lucioles roses : de petits points lumineux qui montent en clignotant. */
.firefly { position: absolute; left: var(--x); bottom: -1rem; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: #ffe1ec; box-shadow: 0 0 6px 2px rgba(255, 160, 200, .75), 0 0 16px 4px rgba(236, 110, 160, .35);
  animation: firefly-rise var(--d) ease-in-out var(--w) infinite; will-change: transform, opacity; }
@keyframes firefly-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: var(--o); }
  30% { opacity: calc(var(--o) * .35); }
  48% { transform: translate3d(var(--dx), -52vh, 0); opacity: var(--o); }
  66% { opacity: calc(var(--o) * .4); }
  85% { opacity: var(--o); }
  100% { transform: translate3d(calc(var(--dx) * -.6), -104vh, 0); opacity: 0; }
}
/* Pétales : ils tombent en se balançant et tournoient sur eux-mêmes. */
.petal { position: absolute; top: -3rem; left: var(--x); animation: petal-fall var(--d) linear var(--w) infinite; will-change: transform; }
.petal i { display: block; width: var(--s); height: calc(var(--s) * .78); opacity: var(--o, .8); border-radius: 150% 0 150% 0;
  background: linear-gradient(135deg, #ffe6ee, #f4a3bf 60%, #e7799f); animation: petal-tumble var(--t) ease-in-out var(--w) infinite; }
@keyframes petal-fall {
  0% { transform: translate3d(0, -4vh, 0) rotate(0deg); }
  25% { transform: translate3d(calc(var(--drift) * .45), 24vh, 0) rotate(95deg); }
  50% { transform: translate3d(calc(var(--drift) * -.15), 52vh, 0) rotate(185deg); }
  75% { transform: translate3d(calc(var(--drift) * .7), 80vh, 0) rotate(275deg); }
  100% { transform: translate3d(var(--drift), 108vh, 0) rotate(360deg); }
}
@keyframes petal-tumble { 0% { transform: rotate3d(1, .4, .2, 0deg); } 50% { transform: rotate3d(1, .4, .2, 180deg); } 100% { transform: rotate3d(1, .4, .2, 360deg); } }

/* Page d'accueil : la lune (qui respire doucement) et la grande branche (qui se balance). */
.sakura-scene { position: absolute; top: 0; left: 0; right: 0; height: 48rem; overflow: hidden; pointer-events: none; z-index: -1;
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.sakura-scene > img, .sakura-moon { position: absolute; display: block; user-select: none; }
.sakura-moon img { display: block; width: 100%; animation: moon-float 10s ease-in-out infinite alternate; }
.sakura-moon::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(246, 160, 192, .34), transparent 62%); animation: moon-halo 6s ease-in-out infinite alternate; }
@keyframes moon-float { from { transform: translateY(0) scale(1); } to { transform: translateY(-.6rem) scale(1.015); } }
@keyframes moon-halo { from { opacity: .35; transform: scale(.95); } to { opacity: 1; transform: scale(1.05); } }
/* À droite du texte de présentation, sans passer dessous. */
.sakura-moon { width: 26rem; top: 5rem; right: max(1.5rem, calc(50% - 38rem)); opacity: .85; }
/* La grande branche passe au-dessus de la lune, sans cacher le cerisier qui est dedans. */
.sakura-branch { width: 24rem; top: 2.4rem; right: max(-3rem, calc(50% - 47rem)); opacity: .85; transform-origin: 100% 8%; animation: branch-sway 8s ease-in-out infinite alternate; }
@media (max-width: 1200px) {
  .sakura-moon { width: 20rem; top: 6rem; right: 1rem; }
  .sakura-branch { width: 18rem; top: 2.6rem; right: -2.5rem; }
}
@media (max-width: 980px) {
  .sakura-moon { width: 18rem; top: 7rem; right: -4rem; opacity: .5; }
  .sakura-branch { width: 16rem; top: 3.5rem; right: -4rem; opacity: .7; }
}
@media (max-width: 560px) {
  .sakura-scene { height: 34rem; }
  /* Sur téléphone, la barre du haut est plus haute : le décor descend un peu. */
  .sakura-moon { width: 14rem; top: 14rem; right: -5rem; opacity: .35; }
  .sakura-branch { width: 13rem; top: 11rem; right: -4rem; opacity: .55; }
  .sky-branch-wrap { width: 18rem; right: -3rem; }
  .sky-branch { opacity: .4; }
  .brand-logo { width: 2.4rem; height: 2.4rem; }
}
/* Si l'appareil demande moins d'animations : le décor reste, immobile, sans pétales ni lucioles. */
@media (prefers-reduced-motion: reduce) {
  .petal, .firefly { display: none; }
  .sky-glow, .sky-branch, .sakura-branch, .sakura-moon img, .sakura-moon::before { animation: none; }
}
.vote-now { margin: .4rem 0 .2rem; font-size: .88rem; }
.vote-now:empty { display: none; }
/* Staff Bot, votes : le nombre s'écrit sur la ligne du serveur, avec Ajouter et Retirer à côté. */
.vote-quick { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; }
.vote-quick .vote-n { width: 6rem; padding: .4rem .55rem; }
.vote-quick .btn { padding: .4rem .7rem; }
/* Logs Raid : les comptes d'un raid, à cocher pour le blacklist. */
.raiders { margin: .8rem 0; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--well); }
.raiders > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: .5rem; color: var(--brand-text); }
.raiders-tools { margin: .7rem 0 .4rem; }
.raider-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; max-height: 24rem; overflow-y: auto; }
.raider-list li { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; padding: .45rem .6rem; border-radius: .5rem; background: var(--card); border: 1px solid var(--line); font-size: .88rem; }
.raider-list li.off { opacity: .65; }
.raider-list input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--brand); }
.raider-confirm { margin: .6rem 0; padding: .8rem .9rem; border-radius: .6rem; border: 1px solid rgba(237, 66, 69, .5); background: rgba(237, 66, 69, .1); display: grid; gap: .6rem; }
.raider-confirm label { display: grid; gap: .3rem; font-size: .85rem; }
.raiders-none { margin: .6rem 0; }
/* Staff Bot : message privé à un utilisateur. */
#staff-dm textarea { width: 100%; margin-top: .7rem; }
.dm-count { display: block; text-align: right; margin-top: .2rem; }
.dm-result { display: block; margin-top: .5rem; font-size: .9rem; }
.dm-result:empty { display: none; }
.check-inline { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: .45rem; align-self: end; padding-bottom: .55rem; }
.check-inline input { width: 1.05rem; height: 1.05rem; accent-color: var(--brand); }
.dm-excerpt { flex: 1 1 14rem; min-width: 0; }

/* Partenariats : aperçu de l'annonce, listes */
.partner-wrap { display: grid; gap: .8rem; margin-top: 1.2rem; }
.partner-preview { border-radius: .6rem; overflow: hidden; }
.dc-buttons { display: flex; gap: .4rem; padding: 0 1rem 1rem 4.4rem; background: #313338; }
.dc-button { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .8rem; border-radius: .25rem; background: #4e5058; color: #fff; font: 500 .85rem var(--font); }
.dc-button.success { background: #248046; } /* bouton vert de Discord (ex. « Accepter le règlement ») */
.rules-preview { margin-top: 1rem; }
.rules-preview h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-size: 1rem; }
.partner-group { display: grid; gap: .6rem; }
.partner-group > h3.section { display: flex; align-items: center; gap: .5rem; }
.partner-group > h3.section .count { font-size: .76rem; font-weight: 600; padding: .05rem .55rem; border-radius: 1rem; background: var(--card-2); color: var(--muted); font-variant-numeric: tabular-nums; }
.partner-card { display: grid; gap: .6rem; }
.partner-card .staff-form { margin-bottom: 0; }
.partner-end { display: flex; gap: .5rem; flex: 1 1 22rem; align-items: center; }
.partner-end input { flex: 1 1 auto; }
/* Volets qui s'ouvrent et se ferment : historique des partenariats, historique d'une carte */
.partner-group.partner-fold { display: block; }
.partner-repair { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--well); }
.partner-repair > div { flex: 1 1 22rem; display: grid; gap: .2rem; }
.partner-repair small { color: var(--muted); font-size: .84rem; line-height: 1.4; }
.partner-repair .btn { flex: none; }
.partner-wrap > output.toast { white-space: pre-line; }
.partner-fold > summary, .partner-history > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; }
.partner-fold > summary::-webkit-details-marker, .partner-history > summary::-webkit-details-marker { display: none; }
.partner-fold > summary { margin-top: .8rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.partner-fold > summary > h3.section { flex: 1 1 auto; margin: 0; padding: 0 1.3rem; border: 0; display: flex; align-items: center; gap: .5rem; }
.partner-fold > summary .count, .partner-history > summary .count { font-size: .76rem; font-weight: 600; padding: .05rem .55rem; border-radius: 1rem; background: var(--card-2); color: var(--muted); font-variant-numeric: tabular-nums; }
.partner-fold[open] > summary { margin-bottom: .6rem; }
.partner-history > summary { color: var(--muted); font-size: .88rem; }
.partner-history > summary > span:first-child { display: inline-flex; align-items: center; gap: .5rem; }
.partner-history[open] > summary { margin-bottom: .5rem; }
.fold-state { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border: 1px solid var(--line); border-radius: .45rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
summary:hover .fold-state { color: var(--text); border-color: var(--accent); }
.fold-state .icon { width: 1em; height: 1em; transform: rotate(90deg); transition: transform .15s; }
details[open] > summary .fold-state .icon { transform: rotate(-90deg); }
details > summary .fold-state .when-open, details[open] > summary .fold-state .when-closed { display: none; }
details[open] > summary .fold-state .when-open { display: inline; }
/* Liste des membres (panneau de configuration) */
.cats .cats-sep { display: block; height: 1px; margin: .5rem .6rem; background: var(--line); }
.member-filters input[type=search] { flex: 1 1 14rem; }
.member-count { margin: 0; }
.member-list { display: grid; gap: .5rem; }
.member-list.scroll { overflow-y: auto; overscroll-behavior: contain; padding-right: .35rem; scrollbar-gutter: stable; }
.member-row { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--well); }
.member-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover; background: var(--card-2); }
.member-avatar.empty { display: grid; place-items: center; font-weight: 700; color: var(--muted); }
.member-main { display: grid; gap: .25rem; min-width: 0; flex: 1 1 auto; }
.member-names { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.member-names strong { overflow-wrap: anywhere; }
.member-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-size: .82rem; }
.member-id { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .45rem; border: 1px solid var(--line); border-radius: .4rem; background: transparent; color: var(--text); cursor: pointer; font: inherit; }
.member-id .icon { width: .9em; height: .9em; opacity: .7; }
.member-id:hover { border-color: var(--accent); }
.member-id.done { border-color: #3ba55d; }
.member-roles { display: flex; flex-wrap: wrap; gap: .3rem; }
.role-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 1rem; border: 1px solid var(--line); font-size: .78rem; }
.role-pill i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--role, var(--muted)); }
.pager { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: .6rem; }
/* Suggestions reçues */
.sugg-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sugg-votes { display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.sugg-bar { position: relative; flex: 0 0 9rem; height: .5rem; border-radius: 1rem; background: rgba(200, 65, 59, .45); overflow: hidden; }
.sugg-bar i { position: absolute; inset: 0 auto 0 0; background: #3ba55d; border-radius: 1rem; }
.sugg-answer select { flex: 0 0 auto; }
.sugg-answer input { flex: 1 1 14rem; }
/* Statistiques des tickets */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.stat-tile { display: grid; gap: .15rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--well); }
.stat-tile strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.stat-tile small { color: var(--muted); font-size: .8rem; }
.stat-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: .8rem; }
.stat-table th, .stat-table td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.stat-table th { color: var(--muted); font-weight: 600; font-size: .8rem; }
/* Au-delà de 10 lignes : le tableau du staff et les derniers avis défilent */
.stat-scroll { position: relative; margin-bottom: .8rem; }
.stat-scroll .stat-table { margin-bottom: 0; }
.stat-scroll.scroll, .stat-recent.scroll { overflow-y: auto; overscroll-behavior: contain; padding-right: .35rem; scrollbar-gutter: stable; }
.stat-scroll.scroll thead th { position: sticky; top: 0; background: var(--card, #241a22); z-index: 1; }
/* Candidatures reçues (module Candidatures) */
.apps-stats { margin: 0; }
.app-answers dl { display: grid; gap: .3rem; margin: 0; }
.app-answers dt { font-weight: 600; font-size: .86rem; color: var(--text); }
.app-answers dd { margin: 0 0 .45rem; padding: .5rem .7rem; background: var(--well); border-radius: .45rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; }
/* Au-delà de 5 éléments, la liste défile */
.partner-scroll.scroll, .partner-history .history.scroll { overflow-y: auto; overscroll-behavior: contain; padding-right: .35rem; scrollbar-gutter: stable; }

/* ---------- Guide ---------- */
.guide { display: grid; gap: 1rem; max-width: 64rem; }
.guide-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.guide-tools .searchbox { flex: 1 1 18rem; }
.guide-tools .searchbox input { font-size: .95rem; }
.guide-server { display: flex; align-items: center; gap: .5rem; font-size: .85rem; white-space: nowrap; }
.guide-server select { max-width: 14rem; }
.guide-toc { display: flex; flex-wrap: wrap; gap: .45rem; }
.guide-toc .chip { cursor: pointer; font: inherit; font-size: .82rem; color: var(--text); }
.guide-toc .chip:hover { border-color: var(--accent, var(--brand)); }
.guide-count { font-size: .82rem; margin: -.2rem 0 0; }
.guide-block { padding: 1.1rem 1.2rem; }
.guide-block-head { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .8rem; }
.guide-block-head h2 { font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; }
.guide-block-head h2 .count { font-size: .74rem; font-weight: 500; padding: .1rem .5rem; border-radius: 1rem; background: var(--card-2); color: var(--muted); }
.guide-block-head p { margin-top: .25rem; font-size: .85rem; }
.guide-steps { display: grid; gap: .45rem; padding-left: 1.4rem; line-height: 1.5; font-size: .9rem; }
.guide-steps.big { gap: .6rem; font-size: .93rem; }
.guide-steps li::marker { color: var(--accent, var(--brand)); font-weight: 700; }
.guide-tips { display: grid; gap: .4rem; padding-left: 1.2rem; line-height: 1.5; font-size: .88rem; color: var(--muted); }
.guide-pages { display: grid; gap: .55rem; }
.guide-pages > div { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.guide-pages > div:first-child { border-top: 0; }
.guide-pages dt { font-weight: 600; font-size: .9rem; }
.guide-pages dd { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.guide-cat { display: grid; gap: .55rem; padding-top: .4rem; }
.guide-mods { display: grid; gap: .5rem; }
.guide-mod { background: var(--card); border: 1px solid var(--line); border-radius: .8rem; }
.guide-mod[open] { border-color: var(--accent, var(--brand)); }
.guide-mod > summary { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; cursor: pointer; list-style: none; }
.guide-mod > summary::-webkit-details-marker { display: none; }
.guide-mod > summary > .icon { margin-left: auto; color: var(--muted); transition: transform .15s; flex: none; }
.guide-mod[open] > summary > .icon { transform: rotate(90deg); }
.guide-mod-head { display: grid; gap: .15rem; min-width: 0; }
.guide-mod-head strong { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .95rem; }
.guide-mod-head strong .badge { margin-left: 0; font-size: .7rem; }
.guide-mod-head small { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.guide-mod-body { padding: .2rem 1rem 1rem; display: grid; gap: .6rem; font-size: .9rem; line-height: 1.5; border-top: 1px solid var(--line); }
.guide-mod-body > p { margin-top: .6rem; }
.guide-mod-body h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-text); margin-top: .3rem; }
.guide-mod-body h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.guide-mod-body code, .guide-block code, .guide-faq code { background: var(--well); border: 1px solid var(--line); border-radius: .3rem; padding: .02rem .3rem; font-size: .84em; }
.guide-cmds { list-style: none; display: grid; gap: .35rem; padding: 0; margin: 0; }
.guide-cmds li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; }
.guide-cmds .guide-cmd { font-weight: 600; color: var(--text); }
.guide-cmd-desc { color: var(--muted); font-size: .86rem; }
.guide-other { font-size: .74rem; }
.guide-opts { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.guide-opt { font-size: .72rem; padding: .05rem .4rem; border-radius: .3rem; background: var(--card-2); color: var(--muted); cursor: help; }
.guide-opt.req { color: var(--text); }
.guide-subs { display: block !important; }
.guide-subs > ul { list-style: none; display: grid; gap: .3rem; margin: .1rem 0 .2rem .9rem; padding-left: .7rem; border-left: 2px solid var(--line); }
.guide-settings > summary { cursor: pointer; font-size: .84rem; color: var(--brand-text); font-weight: 600; }
.guide-settings[open] > summary { margin-bottom: .5rem; }
.guide-set-group { margin-bottom: .5rem; font-size: .84rem; }
.guide-set-group strong { display: block; font-size: .8rem; margin-bottom: .15rem; }
.guide-set-group ul { padding-left: 1.1rem; color: var(--muted); display: grid; gap: .1rem; }
.guide-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.guide-faq { display: grid; gap: .4rem; }
.guide-faq details { border-top: 1px solid var(--line); padding: .55rem 0 .2rem; }
.guide-faq details:first-child { border-top: 0; }
.guide-faq summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.guide-faq p { margin: .4rem 0 .3rem; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.guide [hidden] { display: none !important; }
@media (max-width: 560px) {
  .guide-pages > div { grid-template-columns: 1fr; gap: .2rem; }
  .guide-mod > summary { padding: .6rem .7rem; gap: .6rem; }
  .guide-mod > summary .tile-icon { width: 2.1rem; height: 2.1rem; }
  .guide-mod-body { padding: .2rem .75rem .8rem; }
  .guide-server { width: 100%; }
  .guide-server select { flex: 1; max-width: none; }
}
.guide-mod-body ol, .guide-mod-body ul, .guide-block ol, .guide-pages, .guide-pages dd { margin-top: 0; margin-bottom: 0; }
.guide-mod-body h4 { margin-bottom: -.25rem; }
/* Guide : toutes les commandes, page par page */
.cmd-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.cmd-tab { cursor: pointer; font: inherit; font-size: .8rem; color: var(--text); padding: .4rem .7rem; }
.cmd-tab .count { font-size: .7rem; padding: 0 .4rem; border-radius: 1rem; background: var(--card-2); color: var(--muted); }
.cmd-tab.on { border-color: var(--accent, var(--brand)); background: var(--brand-soft); }
.cmd-pager { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .4rem 0 .7rem; }
.cmd-pager .btn { gap: .35rem; }
.cmd-pager .btn:disabled { opacity: .45; cursor: default; }
.cmd-page { font-size: .84rem; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .65rem; }
.cmd-card { display: flex; flex-direction: column; gap: .45rem; padding: .8rem .9rem; background: var(--well); border: 1px solid var(--line); border-left: 3px solid var(--accent, var(--brand)); border-radius: .7rem; min-width: 0; }
.cmd-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.cmd-name { font-weight: 700; font-size: .92rem; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: .35rem; padding: .08rem .4rem; overflow-wrap: anywhere; }
.cmd-cat-badge { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; padding: .12rem .5rem; border-radius: 1rem; color: var(--accent, var(--brand)); border: 1px solid var(--accent, var(--brand)); white-space: nowrap; }
.cmd-cat-badge .icon { width: .8rem; height: .8rem; }
.cmd-what { margin: 0; font-size: .9rem; line-height: 1.45; }
.cmd-line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8rem; }
.cmd-line code, .cmd-options code { background: var(--card); border: 1px solid var(--line); border-radius: .3rem; padding: .02rem .32rem; font-size: .8rem; overflow-wrap: anywhere; }
.cmd-options { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; font-size: .8rem; line-height: 1.4; }
.cmd-options li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; }
.cmd-req { font-size: .66rem; padding: 0 .35rem; border-radius: .3rem; background: var(--card-2); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cmd-req.on { color: #f6c453; background: rgba(240, 160, 32, .12); }
.cmd-none { margin: 0; font-size: .8rem; }
.cmd-card-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; padding-top: .35rem; border-top: 1px solid var(--line); }
.cmd-who { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; color: #f6c453; }
.cmd-who.open { color: var(--muted); }
.cmd-who .icon { width: .85rem; height: .85rem; }
.cmd-mod-link { padding: .2rem .5rem; font-size: .76rem; gap: .35rem; white-space: normal; max-width: 100%; justify-content: flex-start; line-height: 1.25; }
.cmd-mod-link .icon { width: .9rem; height: .9rem; color: var(--accent, var(--brand)); }
.cmd-shortcuts { margin-top: 1rem; }
.cmd-shortcuts h3 { font-size: .95rem; }
.cmd-shortcuts p { font-size: .84rem; margin: .25rem 0 .5rem; }
.cmd-shortcuts ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .35rem .8rem; font-size: .85rem; }
.cmd-shortcuts code { background: var(--well); border: 1px solid var(--line); border-radius: .3rem; padding: .02rem .3rem; font-size: .82rem; }
@media (max-width: 560px) {
  .cmd-grid { grid-template-columns: 1fr; }
  .cmd-pager .btn span { display: none; }
  .cmd-cat-badge { margin-left: 0; }
}
.cmd-short { padding: .3rem .45rem; border-radius: .4rem; background: rgba(240, 160, 32, .08); border: 1px dashed rgba(240, 160, 32, .35); }
.cmd-short-label { display: inline-flex; align-items: center; gap: .25rem; color: #f6c453; font-weight: 600; }
.cmd-short-label .icon { width: .85rem; height: .85rem; }
.cmd-short code { color: #f6c453; }
/* Guide : commandes ou raccourcis */
.cmd-views { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.cmd-view { gap: .45rem; background: var(--well); color: var(--text); border: 1px solid var(--line); }
.cmd-view .count { font-size: .72rem; padding: 0 .45rem; border-radius: 1rem; background: var(--card-2); color: var(--muted); }
.cmd-view.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cmd-view.on .count { background: rgba(255, 255, 255, .2); color: #fff; }
.cmd-view-short.on { background: #c9821a; border-color: #c9821a; }
.cmd-short-note { margin: -.2rem 0 .7rem; font-size: .84rem; }
.short-name { color: #f6c453; font-size: 1rem; }
@media (max-width: 560px) { .cmd-view { flex: 1 1 0; justify-content: center; } }
/* Guide : commandes réservées à l'équipe du bot */
.badge.bot-only { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; color: #c4b5fd; border-color: rgba(167, 139, 250, .5); background: rgba(167, 139, 250, .12); margin-left: 0; white-space: nowrap; }
.badge.bot-only .icon { width: .8rem; height: .8rem; }
.guide-opt.bot { color: #c4b5fd; outline: 1px solid rgba(167, 139, 250, .5); }
.cmd-who.bot { color: #c4b5fd; }
.cmd-bot-note { display: flex; gap: .4rem; align-items: flex-start; margin: 0; padding: .4rem .55rem; font-size: .8rem; line-height: 1.4; color: #ddd6fe; background: rgba(167, 139, 250, .1); border: 1px solid rgba(167, 139, 250, .35); border-radius: .45rem; }
.cmd-bot-note .icon { width: .95rem; height: .95rem; flex: none; margin-top: .1rem; color: #c4b5fd; }
/* Liste des membres : rôles (propriétaire du serveur et staff du bot) */
.member-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 .2rem; }
.member-tools:empty { display: none; }
.notice .icon { width: 1rem; height: 1rem; vertical-align: -.15rem; margin-right: .35rem; color: #f0a020; }
.member-edit { justify-self: start; align-self: flex-start; padding: .25rem .55rem; font-size: .78rem; gap: .3rem; margin-top: .15rem; }
.member-edit .icon { width: .85rem; height: .85rem; }
.member-role-editor { display: grid; gap: .45rem; margin-top: .35rem; padding: .6rem .7rem; border: 1px dashed var(--line); border-radius: .5rem; background: var(--card); }
.member-role-add { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.member-role-add select { min-width: 12rem; flex: 1 1 12rem; }
.role-x { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; padding: 0; margin-left: .1rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.role-x:hover { background: rgba(237, 66, 69, .2); color: #ff8e90; }
.role-x .icon { width: .7rem; height: .7rem; }
.roles-admin { display: grid; gap: .7rem; margin: .5rem 0 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--well); }
.role-create { border: 1px solid var(--line); border-radius: .6rem; background: var(--card); }
.role-create > summary { display: flex; align-items: center; gap: .4rem; padding: .6rem .8rem; cursor: pointer; font-weight: 600; }
.role-create .role-form { padding: 0 .8rem .8rem; }
.role-form { display: grid; gap: .6rem; }
.role-form-top { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.role-form-top input[type=text] { flex: 1 1 14rem; }
.role-color { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; }
.role-color input[type=color] { width: 2.4rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: .35rem; background: transparent; }
.role-form-flags, .role-form-quick { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: .85rem; }
.role-form-flags label { display: inline-flex; align-items: center; gap: .35rem; }
.role-form-quick .btn { padding: .25rem .6rem; font-size: .78rem; }
.perm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.perm-group { margin: 0; padding: .5rem .65rem .6rem; border: 1px solid var(--line); border-radius: .5rem; display: grid; gap: .25rem; align-content: start; min-width: 0; }
.perm-group legend { padding: 0 .3rem; font-size: .76rem; font-weight: 600; color: var(--brand-text); text-transform: uppercase; letter-spacing: .03em; }
.perm-item { display: flex; align-items: center; gap: .4rem; font-size: .82rem; cursor: pointer; }
.perm-item.danger span { color: #ffb4b5; }
.perm-item .icon { width: .8rem; height: .8rem; color: #ff8e90; margin-left: auto; flex: none; }
.role-admin-list { display: grid; gap: .4rem; }
.role-admin-row { border: 1px solid var(--line); border-radius: .55rem; padding: .5rem .7rem; background: var(--card); display: grid; gap: .5rem; }
.role-admin-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.role-admin-head .badge { margin-left: 0; }
.role-admin-actions { margin-left: auto; display: flex; gap: .35rem; }
.role-admin-actions .btn { padding: .25rem .55rem; font-size: .78rem; }
@media (max-width: 560px) { .role-admin-actions { margin-left: 0; width: 100%; } .perm-groups { grid-template-columns: 1fr; } }

/* Sans JavaScript : court texte de présentation (robots, navigateurs sans JS). */
.noscript { max-width: 42rem; margin: 2rem auto; padding: 0 1rem; line-height: 1.6; color: var(--text, #f3e9ef); }

/* Commandes hors du menu « / » (plus de 100 activées) */
.slash-notice p { margin: .35rem 0 0; }
.slash-hidden { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Réglages rangés en sections qui s'ouvrent et se ferment (longs modules) */
.fields-wrap { display: grid; gap: .7rem; }
.fold-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .82rem; }
.fold-bar .btn.small { padding: .3rem .7rem; font-size: .8rem; }
.fold-hide { display: none !important; }
.fields.folded h3.section.fold-title { border: 1px solid var(--line); border-radius: .7rem; background: var(--well); padding: 0; margin: .15rem 0 0; display: grid; gap: 0; }
.fields.folded h3.section.fold-title.open { background: var(--card-2); border-color: var(--brand-soft); }
.fields.folded h3.section.fold-title small { padding: 0 .95rem .65rem; }
.fold-toggle { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .75rem .95rem; background: none; border: 0; color: var(--text); font: 700 .95rem var(--font); text-align: left; cursor: pointer; border-radius: .7rem; }
.fold-toggle:hover { background: var(--card); }
.fold-toggle:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
.fold-name { flex: 1 1 auto; }
.fold-count { font: 600 .74rem var(--font); color: var(--muted); padding: .1rem .55rem; border-radius: 1rem; background: var(--card); white-space: nowrap; }
.fold-toggle .icon { width: 1em; height: 1em; transform: rotate(90deg); transition: transform .15s ease; color: var(--muted); }
h3.fold-title.open .fold-toggle .icon { transform: rotate(-90deg); }
.fields.folded > .fold-item { margin-left: .5rem; padding-left: .9rem; border-left: 2px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .fold-toggle .icon { transition: none; } }

/* Description d'un module : « Lire la suite » */
.linklike { background: none; border: 0; padding: 0; color: var(--brand-text); font: inherit; text-decoration: underline; cursor: pointer; }

/* Commandes d'un module, coupables une par une */
.cmd-box { border: 1px solid var(--line); border-radius: .7rem; padding: .2rem .95rem; margin-top: .4rem; }
.cmd-box > summary { cursor: pointer; padding: .65rem 0; font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.cmd-box > summary .count { margin-left: auto; font: 600 .74rem var(--font); color: var(--muted); padding: .1rem .55rem; border-radius: 1rem; background: var(--card-2); }
.cmd-box > p { font-size: .84rem; margin-bottom: .6rem; }
.cmd-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .86rem; }
.cmd-row code { color: var(--text); font-size: .8rem; }
.cmd-row.off code, .cmd-row.off .muted { opacity: .55; text-decoration: line-through; }
.cmd-box output { display: block; margin: .3rem 0 .6rem; }
@media (max-width: 640px) { .cmd-row { grid-template-columns: auto 1fr; } .cmd-row .muted, .cmd-row .badge { grid-column: 2; } }

/* Commandes les plus utilisées et démarrage rapide (accueil de la configuration) */
.usage-box { border: 1px solid var(--line); border-radius: .8rem; padding: .9rem 1.1rem; display: grid; gap: .5rem; }
.usage-box h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.usage-box ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .25rem; font-size: .86rem; }
.usage-box li code { color: var(--text); margin-right: .5rem; }
.usage-box .small { font-size: .78rem; }
.starter { display: grid; gap: .7rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--card); }
.starter-plan { display: grid; gap: .7rem; padding-top: .3rem; border-top: 1px solid var(--line); }
.starter-plan p { font-size: .88rem; }
.starter .chip.on { border-color: var(--brand); background: var(--brand-soft); }

/* Page Accès : éditeurs du site */
.editor-form { display: grid; gap: .7rem; margin-top: .4rem; }
.editor-pick > summary { cursor: pointer; font-weight: 600; font-size: .88rem; padding: .3rem 0; }
.editor-mods { display: grid; gap: .6rem; margin-top: .5rem; }
.editor-mods fieldset { border: 1px solid var(--line); border-radius: .6rem; padding: .5rem .7rem; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .1rem .6rem; min-width: 0; }
.editor-mods .check { padding: .2rem 0; border: 0; background: none; font-size: .84rem; }
.editor-mods legend { font: 700 .78rem var(--font); color: var(--muted); padding: 0 .3rem; }
.editor-list { flex: 1 1 12rem; font-size: .82rem; }

/* ---------- Événements du site (choisis par le staff du bot) ----------
   Le thème sakura change de couleurs ; la lune et les branches sont teintées ; des émojis tombent avec les pétales.
   Les surfaces suivent les variables de couleur, tout le reste du site garde sa mise en page. */
.petal.glyph i { width: auto; height: auto; background: none; border-radius: 0; font-style: normal; font-size: calc(var(--s) * 1.35); line-height: 1; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .35)); }
:root[data-event] .sakura-moon img, :root[data-event] .sakura-branch, :root[data-event] .sky-branch { transition: filter .6s ease; }

/* Halloween : sakura orange, un peu horreur (nuit plus noire, lune orangée, braises, chauves-souris, toile d'araignée). */
:root[data-event="halloween"] { --bg: #0f0a0c; --bg-2: #161013; --card: #1d1417; --card-2: #261a1c; --well: #130d10; --line: #3a2622; --text: #f6ece6; --muted: #c2aa9d;
  --brand: #e8641c; --brand-text: #ffad6b; --brand-soft: rgba(232, 100, 28, .18); }
:root[data-event="halloween"] .sky-glow.g1 { background: radial-gradient(circle, rgba(232, 110, 30, .26), transparent 62%); }
:root[data-event="halloween"] .sky-glow.g2 { background: radial-gradient(circle, rgba(120, 30, 90, .22), transparent 62%); }
:root[data-event="halloween"] .firefly { background: #ffd2a1; box-shadow: 0 0 6px 2px rgba(255, 140, 40, .8), 0 0 18px 5px rgba(220, 70, 20, .4); }
:root[data-event="halloween"] .petal:not(.glyph) i { background: linear-gradient(135deg, #ffc58f, #e8641c 60%, #9c2f12); }
:root[data-event="halloween"] .sakura-moon img { filter: hue-rotate(38deg) saturate(1.8) brightness(.95); }
:root[data-event="halloween"] .sakura-moon::before { background: radial-gradient(circle, rgba(255, 120, 30, .38), transparent 62%); }
:root[data-event="halloween"] .sakura-branch, :root[data-event="halloween"] .sky-branch { filter: hue-rotate(38deg) saturate(1.5) brightness(.85); }
:root[data-event="halloween"] body::after { content: ""; position: fixed; top: 0; left: 0; width: 13rem; height: 13rem; pointer-events: none; z-index: 0; opacity: .32;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23e8dccf' stroke-width='1.2'%3E%3Cpath d='M0 0L200 70M0 0L150 150M0 0L70 200M0 0L200 20M0 0L20 200'/%3E%3Cpath d='M40 14Q30 30 14 40M80 28Q62 62 28 80M120 42Q93 93 42 120M160 56Q124 124 56 160M195 68Q155 155 68 195'/%3E%3C/svg%3E") no-repeat top left / contain; }

/* Saint-Valentin : rose et rouge, des cœurs qui tombent. */
:root[data-event="valentine"] { --bg: #170a10; --bg-2: #1f0e16; --card: #28121c; --card-2: #331722; --well: #1b0b12; --line: #47202f;
  --brand: #e8335f; --brand-text: #ff8fab; --brand-soft: rgba(232, 51, 95, .18); }
:root[data-event="valentine"] .sky-glow.g1 { background: radial-gradient(circle, rgba(255, 70, 110, .28), transparent 62%); }
:root[data-event="valentine"] .firefly { background: #ffd6e0; box-shadow: 0 0 6px 2px rgba(255, 90, 130, .8), 0 0 16px 4px rgba(232, 51, 95, .4); }
:root[data-event="valentine"] .sakura-moon img, :root[data-event="valentine"] .sakura-branch, :root[data-event="valentine"] .sky-branch { filter: hue-rotate(-12deg) saturate(1.5); }

/* Noël : nuit bleu sapin, rouge et vert, neige qui tombe et branches givrées. */
:root[data-event="christmas"] { --bg: #0b1216; --bg-2: #10191e; --card: #152128; --card-2: #1b2a32; --well: #0e171c; --line: #24363f; --text: #eef6f4; --muted: #a7bcb8;
  --brand: #d62839; --brand-text: #ff8a8a; --brand-soft: rgba(214, 40, 57, .18); }
:root[data-event="christmas"] .sky-glow.g1 { background: radial-gradient(circle, rgba(214, 40, 57, .22), transparent 62%); }
:root[data-event="christmas"] .sky-glow.g2 { background: radial-gradient(circle, rgba(42, 157, 110, .24), transparent 62%); }
:root[data-event="christmas"] .firefly { background: #ffffff; box-shadow: 0 0 6px 2px rgba(255, 255, 255, .8), 0 0 14px 4px rgba(170, 220, 255, .35); }
:root[data-event="christmas"] .petal.glyph i { color: #ffffff; font-size: calc(var(--s) * 1.1); }
:root[data-event="christmas"] .petal:not(.glyph) i { background: radial-gradient(circle, #ffffff, #dff3ff 70%); border-radius: 50%; width: calc(var(--s) * .5); height: calc(var(--s) * .5); }
:root[data-event="christmas"] .sakura-moon img { filter: grayscale(.6) brightness(1.15); }
:root[data-event="christmas"] .sakura-branch, :root[data-event="christmas"] .sky-branch { filter: grayscale(.85) brightness(1.35); }

/* Pâques : pastel, des œufs et des fleurs qui tombent. */
:root[data-event="easter"] { --bg: #13111b; --bg-2: #1a1724; --card: #221e2e; --card-2: #2b2639; --well: #17141f; --line: #3a3349;
  --brand: #9b7be8; --brand-text: #cdb8ff; --brand-soft: rgba(155, 123, 232, .18); }
:root[data-event="easter"] .sky-glow.g1 { background: radial-gradient(circle, rgba(160, 230, 170, .22), transparent 62%); }
:root[data-event="easter"] .sky-glow.g2 { background: radial-gradient(circle, rgba(255, 220, 120, .18), transparent 62%); }
:root[data-event="easter"] .firefly { background: #fff6c8; box-shadow: 0 0 6px 2px rgba(255, 230, 140, .75), 0 0 16px 4px rgba(160, 230, 170, .35); }
:root[data-event="easter"] .sakura-branch, :root[data-event="easter"] .sky-branch { filter: hue-rotate(-50deg) saturate(1.1) brightness(1.05); }

/* Poisson d'avril : bleu océan, des poissons qui nagent dans le ciel. */
:root[data-event="aprilfools"] { --bg: #07121c; --bg-2: #0b1824; --card: #10202e; --card-2: #152838; --well: #0a1621; --line: #1f3a50;
  --brand: #1f9fe0; --brand-text: #7fd0ff; --brand-soft: rgba(31, 159, 224, .18); }
:root[data-event="aprilfools"] .sky-glow.g1 { background: radial-gradient(circle, rgba(40, 170, 240, .26), transparent 62%); }
:root[data-event="aprilfools"] .sky-glow.g2 { background: radial-gradient(circle, rgba(40, 220, 200, .18), transparent 62%); }
:root[data-event="aprilfools"] .firefly { background: #d8f4ff; box-shadow: 0 0 6px 2px rgba(120, 210, 255, .8), 0 0 16px 4px rgba(31, 159, 224, .35); border-radius: 50%; }
:root[data-event="aprilfools"] .sakura-moon img, :root[data-event="aprilfools"] .sakura-branch, :root[data-event="aprilfools"] .sky-branch { filter: hue-rotate(185deg) saturate(1.3); }
:root[data-event="aprilfools"] .petal.glyph { animation-name: fish-swim; }
@keyframes fish-swim {
  0% { transform: translate3d(0, -4vh, 0); } 25% { transform: translate3d(calc(var(--drift) * 1.4), 26vh, 0); }
  50% { transform: translate3d(calc(var(--drift) * -.8), 54vh, 0); } 75% { transform: translate3d(calc(var(--drift) * 1.2), 80vh, 0); }
  100% { transform: translate3d(var(--drift), 108vh, 0); }
}
/* Nouvel An : nuit de minuit, or et étoiles, confettis de couleur. */
:root[data-event="newyear"] { --bg: #07080f; --bg-2: #0c0e18; --card: #121522; --card-2: #181c2c; --well: #0a0c15; --line: #262b40; --text: #f3f1ea; --muted: #b3b0a2;
  --brand: #e3b341; --brand-text: #ffd978; --brand-soft: rgba(227, 179, 65, .18); }
:root[data-event="newyear"] .sky-glow.g1 { background: radial-gradient(circle, rgba(227, 179, 65, .22), transparent 62%); }
:root[data-event="newyear"] .sky-glow.g2 { background: radial-gradient(circle, rgba(123, 92, 255, .2), transparent 62%); }
:root[data-event="newyear"] .firefly { background: #fff3c4; box-shadow: 0 0 6px 2px rgba(255, 210, 110, .8), 0 0 16px 4px rgba(227, 179, 65, .35); }
:root[data-event="newyear"] .petal:not(.glyph) i { width: calc(var(--s) * .32); height: calc(var(--s) * .62); border-radius: 1px; background: #ffd978; }
:root[data-event="newyear"] .petal:nth-child(4n):not(.glyph) i { background: #ff6b8a; }
:root[data-event="newyear"] .petal:nth-child(4n + 1):not(.glyph) i { background: #7fd0ff; }
:root[data-event="newyear"] .petal:nth-child(4n + 2):not(.glyph) i { background: #b9a8ff; }
:root[data-event="newyear"] .sakura-moon img { filter: grayscale(.5) sepia(.7) saturate(1.4) brightness(1.1); }
:root[data-event="newyear"] .sakura-moon::before { background: radial-gradient(circle, rgba(255, 210, 110, .32), transparent 62%); }
:root[data-event="newyear"] .sakura-branch, :root[data-event="newyear"] .sky-branch { filter: grayscale(.7) sepia(.5) brightness(.9); }

/* Nouvel An lunaire : rouge et or, enveloppes rouges et fleurs de prunier qui tombent. */
:root[data-event="lunarnewyear"] { --bg: #140707; --bg-2: #1c0a0a; --card: #250f0e; --card-2: #301412; --well: #180808; --line: #4a1f1a; --text: #fbefe2; --muted: #d0b39a;
  --brand: #e8382c; --brand-text: #ffcf5c; --brand-soft: rgba(232, 56, 44, .2); }
:root[data-event="lunarnewyear"] .sky-glow.g1 { background: radial-gradient(circle, rgba(232, 56, 44, .3), transparent 62%); }
:root[data-event="lunarnewyear"] .sky-glow.g2 { background: radial-gradient(circle, rgba(255, 207, 92, .2), transparent 62%); }
:root[data-event="lunarnewyear"] .firefly { background: #ffe3a0; box-shadow: 0 0 6px 2px rgba(255, 190, 80, .8), 0 0 16px 4px rgba(232, 56, 44, .4); }
:root[data-event="lunarnewyear"] .petal:not(.glyph) i { background: linear-gradient(135deg, #ffd0d0, #ff5a5a 60%, #b81d1d); }
:root[data-event="lunarnewyear"] .sakura-moon img { filter: hue-rotate(15deg) saturate(1.7) brightness(1.05); }
:root[data-event="lunarnewyear"] .sakura-moon::before { background: radial-gradient(circle, rgba(255, 90, 50, .36), transparent 62%); }
:root[data-event="lunarnewyear"] .sakura-branch, :root[data-event="lunarnewyear"] .sky-branch { filter: hue-rotate(-15deg) saturate(1.5); }

/* Carnaval : violet, vert et or, confettis de toutes les couleurs. */
:root[data-event="carnival"] { --bg: #120a1a; --bg-2: #190e24; --card: #21122f; --card-2: #2a173b; --well: #150b1f; --line: #3d2554;
  --brand: #b14fe8; --brand-text: #e2a8ff; --brand-soft: rgba(177, 79, 232, .18); }
:root[data-event="carnival"] .sky-glow.g1 { background: radial-gradient(circle, rgba(177, 79, 232, .28), transparent 62%); }
:root[data-event="carnival"] .sky-glow.g2 { background: radial-gradient(circle, rgba(47, 191, 113, .2), transparent 62%); }
:root[data-event="carnival"] .firefly { background: #fff1b0; box-shadow: 0 0 6px 2px rgba(255, 207, 58, .8), 0 0 16px 4px rgba(177, 79, 232, .4); }
:root[data-event="carnival"] .petal:not(.glyph) i { width: calc(var(--s) * .34); height: calc(var(--s) * .34); border-radius: 50%; background: #ffcf3a; }
:root[data-event="carnival"] .petal:nth-child(4n):not(.glyph) i { background: #2fbf71; }
:root[data-event="carnival"] .petal:nth-child(4n + 1):not(.glyph) i { background: #ff5fa2; }
:root[data-event="carnival"] .petal:nth-child(4n + 2):not(.glyph) i { background: #4fb8ff; }
:root[data-event="carnival"] .sakura-moon img, :root[data-event="carnival"] .sakura-branch, :root[data-event="carnival"] .sky-branch { filter: hue-rotate(-45deg) saturate(1.5); }

/* Saint-Patrick : vert trèfle et or. */
:root[data-event="stpatrick"] { --bg: #06120b; --bg-2: #0a1a10; --card: #0f2216; --card-2: #142b1c; --well: #08160d; --line: #1f3f2a; --text: #eef7ef; --muted: #a9c2ae;
  --brand: #2fbf62; --brand-text: #8ff0b0; --brand-soft: rgba(47, 191, 98, .18); }
:root[data-event="stpatrick"] .sky-glow.g1 { background: radial-gradient(circle, rgba(47, 191, 98, .26), transparent 62%); }
:root[data-event="stpatrick"] .sky-glow.g2 { background: radial-gradient(circle, rgba(255, 207, 92, .16), transparent 62%); }
:root[data-event="stpatrick"] .firefly { background: #eaffc8; box-shadow: 0 0 6px 2px rgba(170, 240, 120, .75), 0 0 16px 4px rgba(255, 207, 92, .3); }
:root[data-event="stpatrick"] .petal:not(.glyph) i { background: linear-gradient(135deg, #c8f5c8, #3fcf6a 60%, #1c7a3a); }
:root[data-event="stpatrick"] .sakura-moon img { filter: hue-rotate(105deg) saturate(1.1) brightness(1.05); }
:root[data-event="stpatrick"] .sakura-branch, :root[data-event="stpatrick"] .sky-branch { filter: hue-rotate(110deg) saturate(1.2); }

/* Fête de la musique : violet néon, des notes qui tombent. */
:root[data-event="music"] { --bg: #0b0816; --bg-2: #110c20; --card: #17112b; --card-2: #1e1636; --well: #0e0a1b; --line: #2f2550;
  --brand: #7b5cff; --brand-text: #b9a8ff; --brand-soft: rgba(123, 92, 255, .2); }
:root[data-event="music"] .sky-glow.g1 { background: radial-gradient(circle, rgba(123, 92, 255, .3), transparent 62%); }
:root[data-event="music"] .sky-glow.g2 { background: radial-gradient(circle, rgba(255, 95, 210, .22), transparent 62%); }
:root[data-event="music"] .firefly { background: #d8f7ff; box-shadow: 0 0 6px 2px rgba(80, 220, 255, .8), 0 0 16px 4px rgba(255, 95, 210, .35); }
:root[data-event="music"] .petal.glyph i { color: #cbbcff; text-shadow: 0 0 8px rgba(123, 92, 255, .8); }
:root[data-event="music"] .petal:not(.glyph) i { background: linear-gradient(135deg, #ffd0f4, #ff5fd2 60%, #7b5cff); }
:root[data-event="music"] .sakura-moon img, :root[data-event="music"] .sakura-branch, :root[data-event="music"] .sky-branch { filter: hue-rotate(-70deg) saturate(1.6); }

/* Été : coucher de soleil sur la mer, la lune devient un soleil, des fleurs d'hibiscus tombent. */
:root[data-event="summer"] { --bg: #06121a; --bg-2: #0a1923; --card: #0f212d; --card-2: #142a38; --well: #09161f; --line: #1f3b4d; --text: #f2f6f5; --muted: #a9bec4;
  --brand: #ff8a3d; --brand-text: #ffc08a; --brand-soft: rgba(255, 138, 61, .18); }
:root[data-event="summer"] .sky-glow.g1 { background: radial-gradient(circle, rgba(255, 138, 61, .3), transparent 62%); }
:root[data-event="summer"] .sky-glow.g2 { background: radial-gradient(circle, rgba(40, 200, 220, .2), transparent 62%); }
:root[data-event="summer"] .firefly { background: #fff0c8; box-shadow: 0 0 6px 2px rgba(255, 190, 110, .8), 0 0 16px 4px rgba(255, 138, 61, .35); }
:root[data-event="summer"] .petal:not(.glyph) i { background: linear-gradient(135deg, #ffd1c2, #ff7a59 60%, #d9365a); }
:root[data-event="summer"] .sakura-moon img { filter: sepia(1) saturate(3.5) hue-rotate(-12deg) brightness(1.15); }
:root[data-event="summer"] .sakura-moon::before { background: radial-gradient(circle, rgba(255, 150, 60, .45), transparent 62%); }
:root[data-event="summer"] .sakura-branch, :root[data-event="summer"] .sky-branch { filter: hue-rotate(-20deg) saturate(1.3); }
@media (prefers-reduced-motion: reduce) { :root[data-event] .petal.glyph { display: none; } }

/* Panel Staff Bot : événements et Premium du bot */
/* Couleurs de chaque événement (cartes, calendrier, grand bandeau). */
.ev-none { --ev1: #e978a0; --ev2: #3a1830; }
.ev-halloween { --ev1: #e8641c; --ev2: #2a0f1c; }
.ev-valentine { --ev1: #ff4f7b; --ev2: #4a1028; }
.ev-christmas { --ev1: #d62839; --ev2: #17543c; }
.ev-easter { --ev1: #f2c94c; --ev2: #6fbf8a; }
.ev-aprilfools { --ev1: #29a8e8; --ev2: #0b3552; }
.ev-newyear { --ev1: #e3b341; --ev2: #141a38; }
.ev-lunarnewyear { --ev1: #ff4b3a; --ev2: #5a0f0b; }
.ev-carnival { --ev1: #b14fe8; --ev2: #17543a; }
.ev-stpatrick { --ev1: #2fbf62; --ev2: #0d3b20; }
.ev-music { --ev1: #ff5fd2; --ev2: #2a1460; }
.ev-summer { --ev1: #ff8a3d; --ev2: #0b4a66; }
.event-now { font-size: .95rem; margin: .2rem 0 0; }
/* Le panda déguisé : interrupteur, aperçu du logo et ce qui est en place sur Discord. */
.panda-box { display: flex; gap: .8rem; align-items: center; margin-top: .9rem; padding: .7rem .8rem; border-radius: .8rem; background: var(--well); border: 1px solid var(--line); }
.panda-now { width: 3.4rem; height: 3.4rem; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--brand) 14%, transparent); object-fit: contain; }
.panda-text { display: grid; gap: .25rem; min-width: 0; }
.event-toggle.panda-toggle { padding: 0; background: none; border: 0; }
.panda-status { color: var(--muted); }
.panda-status.bad { color: var(--brand-text); }
.event-panda { position: absolute; left: .45rem; bottom: .3rem; width: 3.6rem; height: 3.6rem; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.event-next { margin: .35rem 0 0; font-size: .88rem; }
/* Grand bandeau : l'événement affiché, et le grand bouton qui allume ou coupe tous les événements. */
.event-hero { display: grid; grid-template-columns: 11rem 1fr; gap: 1.2rem; align-items: center; }
.event-hero h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.15rem; }
.event-hero-art { position: relative; height: 9rem; border-radius: .9rem; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--ev1) 70%, transparent), transparent 60%), linear-gradient(160deg, var(--ev2), color-mix(in srgb, var(--ev2) 55%, #000)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.event-hero-emoji { position: relative; font-size: 3.6rem; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.event-hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .9rem; }
.event-master { display: inline-flex; align-items: center; gap: .8rem; padding: .55rem 1.1rem .55rem .55rem; border-radius: 2rem; border: 1px solid var(--line);
  background: var(--well); color: var(--text); cursor: pointer; font: inherit; text-align: left; transition: background .2s, border-color .2s, box-shadow .2s; }
.event-master:hover { border-color: var(--brand); }
.event-master:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.event-master-knob { position: relative; width: 3.4rem; height: 1.9rem; border-radius: 1rem; background: #5b616c; flex: none; transition: background .2s; }
.event-master-knob::after { content: ""; position: absolute; top: .22rem; left: .22rem; width: 1.46rem; height: 1.46rem; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.event-master.on { border-color: color-mix(in srgb, var(--green) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.event-master.on .event-master-knob { background: var(--green); }
.event-master.on .event-master-knob::after { transform: translateX(1.5rem); }
.event-master-text { display: grid; line-height: 1.25; }
.event-master-text strong { font-size: 1rem; }
.event-master-text small { color: var(--muted); font-size: .78rem; }
/* Petits dessins qui flottent dans le bandeau et sur les cartes. */
.event-deco { position: absolute; inset: 0; pointer-events: none; }
.event-deco i { position: absolute; font-style: normal; font-size: .95rem; opacity: .55;
  animation: ev-float 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
.event-deco i:nth-child(even) { font-size: .75rem; opacity: .4; }
@keyframes ev-float { 50% { transform: translateY(-.45rem) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .event-deco i { animation: none; } }
/* Calendrier de l'année. */
.tl-track { position: relative; height: calc(2.3rem + var(--rows, 1) * 2.1rem); margin: .4rem .2rem .2rem; border-radius: .6rem; background: var(--well); border: 1px solid var(--line); }
.tl-months { position: absolute; inset: auto 0 .25rem 0; display: grid; grid-template-columns: repeat(12, 1fr); }
.tl-months span { font-size: .68rem; color: var(--muted); text-align: center; border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent); text-transform: capitalize; }
.tl-months span:first-child { border-left: 0; }
.tl-seg { position: absolute; top: calc(.45rem + var(--row, 0) * 2.1rem); height: 1.9rem; min-width: 1.9rem; display: grid; place-items: center; border-radius: .5rem; font-size: 1rem;
  background: linear-gradient(135deg, var(--ev1), color-mix(in srgb, var(--ev2) 80%, var(--ev1))); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); transform: translateX(0); cursor: default; }
.tl-seg.off { filter: grayscale(1); opacity: .35; }
.tl-seg.live { outline: 2px solid #fff; outline-offset: 1px; }
.tl-today { position: absolute; top: .15rem; bottom: 1.25rem; width: 2px; margin-left: -1px; background: #fff; border-radius: 1px; box-shadow: 0 0 6px rgba(255, 255, 255, .7); }
.tl-today::before { content: ""; position: absolute; top: -.2rem; left: -.22rem; width: .5rem; height: .5rem; border-radius: 50%; background: #fff; }
.is-off .tl-seg, .is-off .event-card { opacity: .55; }
.event-off-note { max-width: none; margin: 0 0 .9rem; }
/* Cartes des événements. */
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .9rem; }
.event-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: .9rem; background: var(--well); overflow: hidden; transition: border-color .2s, transform .2s, opacity .2s; }
.event-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ev1) 55%, var(--line)); }
.event-card.live { border-color: var(--ev1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev1) 22%, transparent); }
.event-card.off .event-banner { filter: grayscale(.85) brightness(.75); }
.event-banner { position: relative; height: 5.6rem; display: grid; place-items: center;
  background: radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--ev1) 75%, transparent), transparent 62%), linear-gradient(150deg, var(--ev2), color-mix(in srgb, var(--ev2) 50%, #000)); }
.event-banner .event-emoji { position: relative; font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.event-banner .badge { position: absolute; top: .55rem; right: .55rem; background: rgba(0, 0, 0, .55); border-color: rgba(255, 255, 255, .25); color: #fff; backdrop-filter: blur(4px); }
.badge.live .dot { width: .45rem; height: .45rem; border-radius: 50%; background: #5ee08a; box-shadow: 0 0 6px #5ee08a; animation: live-dot 1.6s ease-in-out infinite; }
@keyframes live-dot { 50% { opacity: .35; } }
.event-body { display: grid; gap: .55rem; padding: .85rem 1rem 1rem; align-content: start; }
.event-body p { margin: 0; font-size: .86rem; }
.event-head { display: grid; gap: .1rem; }
.event-head strong { font-size: 1.02rem; }
.event-decos { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.event-decos li { font-size: .74rem; padding: .16rem .5rem; border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--ev1) 45%, var(--line)); background: color-mix(in srgb, var(--ev1) 12%, transparent); color: var(--text); }
.event-card.off .event-decos li { border-color: var(--line); background: none; color: var(--muted); }
.event-toggle { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9rem; cursor: pointer; padding: .45rem .6rem; border-radius: .6rem; background: var(--card); border: 1px solid var(--line); }
.event-card.off .event-toggle span { color: var(--muted); }
.event-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.event-actions .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 640px) {
  .event-hero { grid-template-columns: 1fr; }
  .event-hero-art { height: 6.5rem; }
  .event-master { width: 100%; }
  .tl-months span { font-size: .58rem; }
}
.premium-switch.off { border-color: var(--line); }
/* Le fond dégradé de la page suit l'événement. */
:root[data-event="halloween"] body { background: linear-gradient(180deg, #170e0c 0%, #0b0709 100%) fixed; }
:root[data-event="valentine"] body { background: linear-gradient(180deg, #210d17 0%, #14080e 100%) fixed; }
:root[data-event="christmas"] body { background: linear-gradient(180deg, #0f1a20 0%, #0a1114 100%) fixed; }
:root[data-event="easter"] body { background: linear-gradient(180deg, #1b1826 0%, #121019 100%) fixed; }
:root[data-event="aprilfools"] body { background: linear-gradient(180deg, #0b1a28 0%, #061019 100%) fixed; }
:root[data-event="newyear"] body { background: linear-gradient(180deg, #0d1020 0%, #05060c 100%) fixed; }
:root[data-event="lunarnewyear"] body { background: linear-gradient(180deg, #230b09 0%, #120505 100%) fixed; }
:root[data-event="carnival"] body { background: linear-gradient(180deg, #1d1029 0%, #100817 100%) fixed; }
:root[data-event="stpatrick"] body { background: linear-gradient(180deg, #0c2014 0%, #050f09 100%) fixed; }
:root[data-event="music"] body { background: linear-gradient(180deg, #160f2a 0%, #080612 100%) fixed; }
:root[data-event="summer"] body { background: linear-gradient(180deg, #2a1a24 0%, #0b2533 55%, #06121a 100%) fixed; }

/* ---------- Décorations des événements (voir eventDecor dans app.js) ----------
   Deux couches fixes où rien n'est cliquable : derrière les pages, et devant mais seulement sur les bords (sous les
   fenêtres de configuration, qui sont au niveau 10). Seuls transform et opacity sont animés : léger pour le navigateur. */
.decor-back, .decor-front { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.decor-back { z-index: -1; }
.decor-front { z-index: 5; }
.event-decor span, .event-decor i { position: absolute; font-style: normal; line-height: 1; }
/* Guirlande du haut : un fil en quatre arcs, et ce qui y pend. */
.deco-garland { position: absolute; top: 0; left: 0; right: 0; height: 2.1rem; }
.deco-garland::before { content: ""; position: absolute; inset: 0; background: var(--wire, rgba(255, 255, 255, .45));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q12.5 9 25 0T50 0T75 0T100 0' fill='none' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q12.5 9 25 0T50 0T75 0T100 0' fill='none' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.deco-garland > span { transform: translateX(-50%); transform-origin: 50% 0; }
@keyframes deco-sway { 0%, 100% { transform: translateX(-50%) rotate(-7deg); } 50% { transform: translateX(-50%) rotate(7deg); } }
/* Noël : ampoules de couleur qui clignotent tour à tour. */
.deco-garland.lights { --wire: #355c47; }
.deco-bulb { width: .55rem; height: .78rem; margin-top: .14rem; border-radius: 45% 45% 50% 50% / 35% 35% 65% 65%; background: var(--c);
  box-shadow: 0 0 6px 2px var(--c), 0 0 16px 5px color-mix(in srgb, var(--c) 45%, transparent); animation: deco-blink 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.deco-bulb::before { content: ""; position: absolute; top: -.16rem; left: 50%; width: .3rem; height: .2rem; margin-left: -.15rem; border-radius: 1px; background: #4a5a52; }
.deco-bulb.c0 { --c: #ff4d5e; } .deco-bulb.c1 { --c: #ffd25e; } .deco-bulb.c2 { --c: #4fe08a; } .deco-bulb.c3 { --c: #5ec8ff; }
@keyframes deco-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* Saint-Valentin : cœurs suspendus qui se balancent. */
.deco-garland.hearts { --wire: rgba(255, 170, 200, .5); }
.deco-pendant { margin-top: .32rem; font-size: 1rem; color: #ff4f7b; text-shadow: 0 0 8px rgba(255, 79, 123, .65); animation: deco-sway 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
.deco-pendant::before { content: ""; position: absolute; left: 50%; top: -.34rem; width: 1px; height: .4rem; background: rgba(255, 170, 200, .55); }
.deco-pendant.c1 { color: #ff9fbd; font-size: .8rem; } .deco-pendant.c2 { color: #e8335f; font-size: 1.15rem; }
/* Pâques : fanions pastel. */
.deco-garland.bunting { --wire: rgba(255, 255, 255, .5); }
.deco-flag { width: 1.1rem; height: 1.35rem; background: var(--c); clip-path: polygon(0 0, 100% 0, 50% 100%); opacity: .92; animation: deco-sway 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
.deco-flag.c0 { --c: #f7a8c4; } .deco-flag.c1 { --c: #ffe08a; } .deco-flag.c2 { --c: #a8e6b8; } .deco-flag.c3 { --c: #a8d4ff; } .deco-flag.c4 { --c: #d4b8ff; }
/* Halloween : araignées qui descendent et remontent, seconde toile, fantôme, brume. */
.deco-spider { top: 0; width: 1px; height: var(--len); background: linear-gradient(rgba(235, 225, 215, .1), rgba(235, 225, 215, .6)); animation: deco-drop 8s ease-in-out infinite; animation-delay: calc(var(--i) * -2.7s); }
.deco-spider i { bottom: -1.05rem; left: -.6rem; font-size: 1.2rem; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); transform-origin: 50% 0; animation: deco-wiggle 1.6s ease-in-out infinite; }
@keyframes deco-wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes deco-drop { 0%, 100% { height: calc(var(--len) * .45); } 45%, 62% { height: var(--len); } }
.deco-web.right { top: 0; right: 0; width: 10rem; height: 10rem; opacity: .26; transform: scaleX(-1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23e8dccf' stroke-width='1.2'%3E%3Cpath d='M0 0L200 70M0 0L150 150M0 0L70 200M0 0L200 20M0 0L20 200'/%3E%3Cpath d='M40 14Q30 30 14 40M80 28Q62 62 28 80M120 42Q93 93 42 120M160 56Q124 124 56 160M195 68Q155 155 68 195'/%3E%3C/svg%3E") no-repeat top left / contain; }
.deco-ghost { right: 4vw; font-size: 2.6rem; opacity: .3; filter: blur(.3px); animation: deco-float 9s ease-in-out infinite; }
@keyframes deco-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3.5rem) rotate(5deg); } }
.deco-fog { left: -10%; right: -10%; bottom: -3rem; height: 30vh; filter: blur(8px);
  background: radial-gradient(ellipse 45% 70% at 25% 100%, rgba(210, 180, 200, .2), transparent 70%), radial-gradient(ellipse 40% 60% at 75% 100%, rgba(232, 100, 28, .14), transparent 70%);
  animation: deco-fog 26s ease-in-out infinite alternate; }
.deco-fog.f2 { opacity: .75; animation-duration: 33s; animation-direction: alternate-reverse; }
@keyframes deco-fog { to { transform: translateX(7%); } }
/* Ce qui traverse l'écran de droite à gauche, de temps en temps (une traversée, puis une pause). */
.deco-fly { top: var(--top); left: 0; font-size: 1.6rem; opacity: 0; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); animation: deco-across var(--d) linear infinite; animation-delay: var(--w); }
.deco-fly.small { font-size: 1.1rem; }
@keyframes deco-across { 0% { transform: translate(105vw, 0); opacity: 0; } 2% { opacity: .95; } 12% { transform: translate(70vw, -3vh); } 22% { transform: translate(35vw, 2vh); }
  32% { transform: translate(-12vw, -4vh); opacity: .95; } 33%, 100% { transform: translate(-12vw, -4vh); opacity: 0; } }
.deco-fly.bat { animation-name: deco-across, deco-flap; animation-duration: var(--d), .35s; animation-timing-function: linear, ease-in-out; }
@keyframes deco-flap { 50% { scale: 1 .7; } }
.deco-fly.sleigh { font-size: 1.5rem; letter-spacing: -.15em; }
/* Coins du bas et petit sol. */
.deco-corner { bottom: .45rem; font-size: 1.7rem; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.deco-corner.big { font-size: 2.2rem; }
.deco-corner.left { left: .7rem; }
.deco-corner.right { right: .8rem; }
.deco-corner.right2 { right: 3.6rem; font-size: 1.3rem; }
.deco-halloween .deco-corner { animation: deco-glow 3s ease-in-out infinite; }
@keyframes deco-glow { 50% { filter: drop-shadow(0 0 10px rgba(255, 130, 30, .9)); } }
.deco-ground { left: 0; right: 0; bottom: 0; height: 1rem; }
.deco-ground.snow { height: 1.1rem; background: #f4fbff; opacity: .92;
  -webkit-mask: radial-gradient(circle at 1rem 1.5rem, #000 1.3rem, transparent 1.32rem) 0 0 / 2rem 100% repeat-x; mask: radial-gradient(circle at 1rem 1.5rem, #000 1.3rem, transparent 1.32rem) 0 0 / 2rem 100% repeat-x; }
.deco-ground.grass { background: linear-gradient(#7fd18c, #4ea866); opacity: .9;
  -webkit-mask: linear-gradient(135deg, transparent 33%, #000 34%) 0 0 / .6rem 100% repeat-x, linear-gradient(225deg, transparent 33%, #000 34%) .3rem 0 / .6rem 100% repeat-x;
  mask: linear-gradient(135deg, transparent 33%, #000 34%) 0 0 / .6rem 100% repeat-x, linear-gradient(225deg, transparent 33%, #000 34%) .3rem 0 / .6rem 100% repeat-x; }
.deco-ground.sea { height: .8rem; background: linear-gradient(#e9d9b0, #c9b07a); opacity: .85;
  -webkit-mask: radial-gradient(ellipse 1.6rem .6rem at 50% 0, transparent 98%, #000) 0 0 / 3rem 100% repeat-x; mask: radial-gradient(ellipse 1.6rem .6rem at 50% 0, transparent 98%, #000) 0 0 / 3rem 100% repeat-x; }
.deco-flower { bottom: .45rem; font-size: 1rem; transform-origin: 50% 100%; animation: deco-sway 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
/* Étincelles, bulles, cœurs qui montent, algues. */
.deco-twinkle { font-size: .8rem; color: #fff; opacity: 0; text-shadow: 0 0 6px currentColor; animation: deco-twinkle var(--d) ease-in-out infinite; animation-delay: var(--w); }
.deco-valentine .deco-twinkle { color: #ffd6e4; } .deco-halloween .deco-twinkle { color: #ffb36b; } .deco-easter .deco-twinkle { color: #fff2b0; }
@keyframes deco-twinkle { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: .85; transform: scale(1.1); } }
.deco-rise, .deco-bubble { left: var(--x); bottom: -2rem; font-size: var(--s); opacity: 0; animation: deco-rise var(--d) linear infinite; animation-delay: var(--w); }
.deco-bubble { width: calc(var(--s) * .7); height: calc(var(--s) * .7); border-radius: 50%; border: 1px solid rgba(200, 240, 255, .55);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), rgba(150, 220, 255, .08) 60%); }
@keyframes deco-rise { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .75; } 50% { transform: translate(var(--sway), -55vh); } 90% { opacity: .6; } 100% { transform: translate(0, -112vh); opacity: 0; } }
.deco-weed { bottom: -.5rem; width: .7rem; height: 5.5rem; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: linear-gradient(#2fbf8f, #136b55); opacity: .55;
  transform-origin: 50% 100%; animation: deco-weed 4.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.1s); }
@keyframes deco-weed { from { transform: rotate(-9deg) scaleY(.9); } to { transform: rotate(9deg) scaleY(1.05); } }
/* Poisson d'avril : le poisson en papier accroché en haut à droite, comme dans le dos de quelqu'un. */
.deco-prank { top: 0; right: 4vw; width: 1px; height: 2.6rem; background: rgba(255, 255, 255, .5); transform-origin: 50% 0; animation: deco-swing 3.6s ease-in-out infinite; }
.deco-prank i { bottom: -1.5rem; left: -.95rem; font-size: 1.9rem; transform: rotate(-90deg); filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }
@keyframes deco-swing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
/* Feux d'artifice (Nouvel An, Nouvel An lunaire) : une gerbe de rayons qui grandit puis s'éteint. */
.deco-firework { width: calc(9rem * var(--s)); height: calc(9rem * var(--s)); margin: calc(-4.5rem * var(--s)) 0 0 calc(-4.5rem * var(--s)); border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(var(--c) 0 3deg, transparent 3deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 24%, #000 44%, transparent 50%); mask: radial-gradient(circle, transparent 18%, #000 24%, #000 44%, transparent 50%);
  filter: drop-shadow(0 0 6px var(--c)); animation: deco-burst var(--d) ease-out infinite; animation-delay: var(--w); }
@keyframes deco-burst { 0% { transform: scale(.1) rotate(0deg); opacity: 0; } 6% { opacity: .95; } 30% { transform: scale(1) rotate(8deg); opacity: .75; } 42%, 100% { transform: scale(1.12) rotate(10deg); opacity: 0; } }
/* Nouvel An : guirlande d'étoiles dorées. */
.deco-garland.gold { --wire: rgba(255, 217, 120, .55); }
.deco-star { margin-top: .2rem; font-size: .9rem; color: #ffd978; text-shadow: 0 0 8px rgba(255, 200, 80, .8); animation: deco-sway 3.6s ease-in-out infinite, deco-blink 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
.deco-star.c1 { font-size: .7rem; color: #fff3c4; } .deco-star.c2 { font-size: 1.05rem; color: #e3b341; }
.deco-newyear .deco-twinkle { color: #ffe9a8; } .deco-lunarnewyear .deco-twinkle { color: #ffcf5c; } .deco-carnival .deco-twinkle { color: #ffcf3a; }
.deco-stpatrick .deco-twinkle { color: #ffd978; } .deco-music .deco-twinkle { color: #7fe8ff; } .deco-summer .deco-twinkle { color: #ffe0a8; }
/* Nouvel An lunaire : lanternes rouges suspendues, avec un gland doré. */
.deco-garland.lanterns { --wire: rgba(255, 207, 92, .5); }
.deco-lantern { width: .85rem; height: 1rem; margin-top: .32rem; border-radius: 45%; border-top: .1rem solid #ffcf5c; border-bottom: .1rem solid #ffcf5c;
  background: radial-gradient(circle at 50% 40%, #ff8a5c, #d81e1e 60%, #8f0d0d); box-shadow: 0 0 8px 2px rgba(255, 80, 40, .45); animation: deco-sway 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.deco-lantern::before { content: ""; position: absolute; left: 50%; top: -.42rem; width: 1px; height: .32rem; background: rgba(255, 207, 92, .6); }
.deco-lantern::after { content: ""; position: absolute; left: 50%; bottom: -.44rem; width: .2rem; height: .34rem; margin-left: -.1rem; border-radius: 0 0 .1rem .1rem; background: linear-gradient(#ffcf5c, #c98a1a); }
.deco-lunarnewyear .deco-corner, .deco-newyear .deco-corner { animation: deco-glow 3s ease-in-out infinite; }
.deco-fly.dragon { font-size: 2rem; }
/* Carnaval : fanions de toutes les couleurs et serpentins qui pendent. */
.deco-carnival .deco-flag.c0 { --c: #b14fe8; } .deco-carnival .deco-flag.c1 { --c: #2fbf71; } .deco-carnival .deco-flag.c2 { --c: #ffcf3a; }
.deco-carnival .deco-flag.c3 { --c: #ff5fa2; } .deco-carnival .deco-flag.c4 { --c: #4fb8ff; }
.deco-streamer { top: 0; width: .42rem; height: var(--len); background: var(--c); opacity: .75; transform-origin: 50% 0; animation: deco-swing 4.4s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40'%3E%3Cpath d='M5 0L9 5L1 10L9 15L1 20L9 25L1 30L9 35L5 40' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") 0 0 / 100% 2.5rem repeat-y;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40'%3E%3Cpath d='M5 0L9 5L1 10L9 15L1 20L9 25L1 30L9 35L5 40' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") 0 0 / 100% 2.5rem repeat-y; }
/* Saint-Patrick : trèfles suspendus et arc-en-ciel derrière la page. */
.deco-garland.clovers { --wire: rgba(170, 240, 150, .45); }
.deco-clover { margin-top: .3rem; font-size: .85rem; color: #3fcf6a; text-shadow: 0 0 8px rgba(63, 207, 106, .6); animation: deco-sway 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
.deco-clover::before { content: ""; position: absolute; left: 50%; top: -.32rem; width: 1px; height: .38rem; background: rgba(170, 240, 150, .5); }
.deco-clover.c1 { font-size: .7rem; color: #8ff0b0; } .deco-clover.c2 { font-size: .95rem; color: #1fa04c; }
.deco-rainbow { right: -12vmax; bottom: -20vmax; width: 40vmax; height: 40vmax; border-radius: 50%; opacity: .12;
  background: radial-gradient(circle, transparent 52%, #ff4b4b 52% 55%, #ff9f2e 55% 58%, #ffe44a 58% 61%, #4fd16a 61% 64%, #4fa8ff 64% 67%, #9a6bff 67% 70%, transparent 70%); }
/* Fête de la musique : notes qui montent, vinyle qui tourne, égaliseur en bas. */
.deco-rise.note { color: #cbbcff; text-shadow: 0 0 8px rgba(123, 92, 255, .8); }
.deco-vinyl { left: 5vw; top: 34vh; font-size: 3.2rem; opacity: .22; animation: deco-spin 6s linear infinite; }
@keyframes deco-spin { to { transform: rotate(360deg); } }
.deco-eq { left: 0; right: 0; bottom: 0; height: 1.5rem; display: flex; align-items: flex-end; gap: .3rem; padding: 0 1rem; opacity: .5; }
.event-decor .deco-eq i { position: relative; flex: 1; height: calc(100% * var(--h)); border-radius: .2rem .2rem 0 0; background: linear-gradient(#ff5fd2, #7b5cff);
  transform-origin: 50% 100%; animation: deco-eq 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.17s); }
@keyframes deco-eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
/* Été : rayons du soleil qui tournent lentement, vagues, voilier au loin. */
.deco-sunrays { top: -35vmax; right: -35vmax; width: 80vmax; height: 80vmax; border-radius: 50%; opacity: .12;
  background: repeating-conic-gradient(rgba(255, 200, 120, .9) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 68%); mask: radial-gradient(circle, #000 8%, transparent 68%); animation: deco-spin 120s linear infinite; }
.deco-ground.waves { left: -2rem; right: -2rem; height: 1.25rem; background: linear-gradient(#5fd0ff, #1f7fbf); opacity: .7;
  -webkit-mask: radial-gradient(ellipse .9rem .55rem at 50% 0, transparent 97%, #000) 0 0 / 1.8rem 100% repeat-x; mask: radial-gradient(ellipse .9rem .55rem at 50% 0, transparent 97%, #000) 0 0 / 1.8rem 100% repeat-x;
  animation: deco-waves 5s linear infinite; }
@keyframes deco-waves { to { transform: translateX(1.8rem); } }
.deco-fly.boat { font-size: 1.4rem; animation-timing-function: linear; }
/* Petit écran : moins de choses ; animations réduites : tout reste immobile et rien ne traverse l'écran. */
@media (max-width: 640px) {
  .deco-garland { height: 1.5rem; } .deco-garland > span:nth-child(even) { display: none; }
  /* Sur téléphone, le texte va jusqu'aux bords : pas d'objets dans les coins ni de fleurs sur le sol. */
  .deco-fly.small, .deco-corner, .deco-flower, .deco-ghost, .deco-web.right { display: none; }
  .deco-vinyl, .deco-streamer { display: none; } .deco-eq { height: 1rem; gap: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .event-decor span, .event-decor i { animation: none !important; }
  .deco-fly, .deco-rise, .deco-bubble, .deco-firework { display: none; }
  .deco-twinkle { opacity: .5; }
}

/* ---------- Personnalisation : thèmes, catégories, aperçu en direct, page Personnalisation ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); gap: .65rem; width: 100%; }
.theme-card { position: relative; display: grid; align-content: end; gap: .3rem; min-height: 5.6rem; padding: .6rem .65rem; border-radius: .7rem; cursor: pointer; text-align: left;
  border: 1px solid var(--line); color: #fff; font: 600 .82rem var(--font); background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.72)), var(--bg, none) center/cover, var(--card-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.theme-card.plain { background: linear-gradient(135deg, #2a2f45, #1d2030); }
.theme-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.28); }
.theme-card.on { border-color: var(--brand-text); box-shadow: 0 0 0 2px var(--brand), 0 8px 22px rgba(0,0,0,.35); }
.theme-card strong { text-shadow: 0 1px 3px rgba(0,0,0,.8); line-height: 1.2; }
.theme-swatches { display: flex; gap: .25rem; }
.theme-swatches i { width: .8rem; height: .8rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.75); }
.theme-check { position: absolute; top: .45rem; right: .45rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--brand); color: #fff; }
.theme-check .icon { width: .85rem; height: .85rem; stroke-width: 3; }
.choice-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.choice-pills button { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--well); color: var(--text); font: 600 .84rem var(--font); cursor: pointer; }
.choice-pills button.on { background: var(--brand-soft); border-color: var(--brand-text); color: var(--brand-text); }
.emoji-input { width: 4.5rem; text-align: center; }
.cat-table { display: grid; gap: .35rem; width: 100%; }
.cat-row { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) 3.8rem 3rem 3.6rem; align-items: center; gap: .45rem; padding: .35rem .5rem; border-radius: .55rem; background: var(--well); border: 1px solid var(--line); }
.cat-row > * { min-width: 0; }
.cat-row .cat-name { width: 100%; }
.cat-row .emoji-input { width: 100%; }
.cat-row.cat-head { background: none; border: 0; padding-block: 0; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; }
.cat-row.cat-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row .switch { justify-self: center; }
.cat-row.off { opacity: .55; }
.cat-row input[type=color] { width: 2.6rem; height: 2rem; padding: .1rem; }
.cat-order { display: inline-flex; align-items: center; gap: .2rem; }
.cat-order .btn.small { padding: .2rem .35rem; }
.cat-order .down .icon { transform: rotate(180deg); }
.cat-order b { min-width: 1.2rem; text-align: center; color: var(--muted); font-size: .8rem; }
.look-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem); gap: 1.2rem; align-items: start; }
/* Modules dont l'aperçu est une grande image (la carte du /help) : la colonne de l'aperçu est plus large. */
.look-layout.big-preview { grid-template-columns: minmax(21rem, 1fr) minmax(24rem, 36rem); }
.look-wrap { container-type: inline-size; min-width: 0; }
/* Barème des sanctions : l'éditeur a besoin de place, l'aperçu (une grande image) se lit en cliquant dessus. */
.look-layout.narrow-preview { grid-template-columns: minmax(0, 1fr) minmax(14rem, 19rem); }
/* Fenêtre trop étroite pour mettre côte à côte les réglages et l'aperçu : l'aperçu passe en dessous. */
@container (max-width: 47rem) {
  .look-layout, .look-layout.big-preview { grid-template-columns: minmax(0, 1fr); }
  .look-layout .live-preview { position: static; max-height: none; overflow: visible; }
}
/* Image jointe d'un aperçu : un clic l'ouvre en grand (comme sur Discord). */
.dc-file-image, .live-preview .dc-image, .look-help-preview .dc-image { cursor: zoom-in; }
.lp-hint { margin: 0; font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.lp-hint .icon { width: 14px; height: 14px; }
.zoom-view { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 2rem; background: rgba(8, 8, 12, .86); backdrop-filter: blur(4px); cursor: zoom-out; }
.zoom-view img { max-width: min(100%, 1200px); max-height: 100%; border-radius: 1rem; box-shadow: 0 24px 80px rgba(0, 0, 0, .55); }
.zoom-view button { position: absolute; top: 1rem; right: 1rem; }
/* Thème « Tokyara » pendant un événement du site : l'événement en cours, en petite étiquette. */
.theme-card .theme-event { position: absolute; top: .45rem; left: .45rem; font-size: .7rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; }
.look-fields { min-width: 0; }
.live-preview { position: sticky; top: .75rem; display: grid; gap: .6rem; padding: .8rem; border-radius: .8rem; background: var(--card); border: 1px solid var(--line); max-height: calc(100vh - 5rem); overflow-y: auto; overscroll-behavior: contain; }
.live-preview .dc, .look-help-preview .dc, .look-mini .dc { border-radius: .55rem; }
.lp-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.lp-head h3 { display: flex; align-items: center; gap: .45rem; font-size: .95rem; }
.lp-live { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .75rem; }
.lp-live i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(59,165,93,.25); }
.lp-tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.lp-tabs button { border: 1px solid var(--line); background: var(--well); color: var(--muted); border-radius: .45rem; padding: .25rem .6rem; font: 600 .78rem var(--font); cursor: pointer; }
.lp-tabs button.on { color: var(--text); border-color: var(--brand-text); }
.lp-note.error { color: #ff7a7c; font-size: .82rem; }
.live-preview.loading .lp-view, .look-help-preview.loading, .look-mini.loading { opacity: .55; transition: opacity .2s; }
.dc-components { display: grid; gap: .5rem; margin-top: .3rem; width: 100%; max-width: 32.5rem; }
.dc-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.dc-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; padding: .2rem .9rem; border-radius: .25rem; color: #fff; font: 500 .875rem "gg sans", "Noto Sans", Inter, sans-serif; background: #4e5058; }
.dc-btn.primary { background: #5865f2; } .dc-btn.success { background: #248046; } .dc-btn.danger { background: #da373c; } .dc-btn.link { background: #4e5058; }
.dc-btn.disabled { opacity: .5; }
.dc-btn .dc-emoji { width: 1.25rem; height: 1.25rem; font-size: 1.05rem; line-height: 1.25rem; text-align: center; }
.dc-btn .icon { width: .85rem; height: .85rem; }
.dc-select { width: 100%; max-width: 25rem; background: #1e1f22; border-radius: .25rem; border: 1px solid #1e1f22; color: #dbdee1; font-size: .875rem; }
.dc-select summary { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; cursor: pointer; list-style: none; }
.dc-select summary::-webkit-details-marker { display: none; }
.dc-select summary .icon { margin-left: auto; }
.dc-select .dc-placeholder { color: #949ba4; }
.dc-options { border-top: 1px solid #2b2d31; max-height: 15rem; overflow: auto; }
.dc-option { display: flex; align-items: center; gap: .55rem; padding: .45rem .75rem; }
.dc-option.on { background: #2e3035; }
.dc-option span { display: grid; }
.dc-option small { color: #949ba4; font-size: .75rem; }
.save .btn.done { background: var(--green); }
.save output.ok { color: #7ee2a0; font-weight: 600; animation: lookPop .35s ease; }
@keyframes lookPop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.look-help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 34rem); gap: 1.2rem; align-items: start; margin-top: .4rem; }
.look-help-side { display: grid; gap: .7rem; align-content: start; }
.look-help-side .btn { justify-self: start; }
.look-help-view { display: grid; gap: .55rem; padding: .8rem; border-radius: .8rem; background: var(--card); border: 1px solid var(--line); }
.look-title { margin-top: 1.4rem; }
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .8rem; }
.look-card { display: grid; gap: .6rem; align-content: start; padding: .8rem; border-radius: .8rem; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.look-card header { display: flex; align-items: center; gap: .5rem; }
.look-card header strong { flex: 1; min-width: 0; }
.look-state { font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background: var(--well); color: var(--muted); }
.look-state.on { background: rgba(59,165,93,.18); color: #7ee2a0; }
.look-mini-frame { height: 11.5rem; overflow: hidden; border-radius: .55rem; background: #313338; position: relative; }
.look-mini-frame::after { content: ''; position: absolute; inset: auto 0 0; height: 2.2rem; background: linear-gradient(transparent, #313338); }
.look-mini { transform: scale(.62); transform-origin: top left; width: 161%; pointer-events: none; }
.look-what { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .8rem; }
.look-card .btn { justify-self: start; }
.look-foot { display: flex; align-items: center; gap: .45rem; margin-top: 1.2rem; font-size: .82rem; }
@media (max-width: 1100px) {
  .look-layout, .look-help { grid-template-columns: 1fr; }
  .live-preview { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 640px) {
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-row { grid-template-columns: 4.2rem minmax(0, 1fr) 2.9rem 2.4rem 2.8rem; gap: .3rem; padding: .3rem; }
  .cat-order .btn.small { padding: .15rem .2rem; }
  .cat-order b { display: none; }
  .look-grid { grid-template-columns: 1fr; }
  /* Aperçu sur téléphone : comme dans l'appli Discord, avatar et marges plus petits, le texte garde la place. */
  .live-preview, .look-help-view { padding: .45rem; margin-inline: -.5rem; }
  .live-preview .dc, .look-help-preview .dc { padding: .7rem .5rem; font-size: .88rem; }
  .live-preview .dc-msg, .look-help-preview .dc-msg { gap: .55rem; }
  .live-preview .dc-avatar, .look-help-preview .dc-avatar { width: 32px; height: 32px; }
  .live-preview .dc-embed, .look-help-preview .dc-embed { padding: .5rem .6rem .7rem .6rem; }
  .live-preview .dc-thumb, .look-help-preview .dc-thumb { width: 52px; height: 52px; }
  .live-preview .dc-embed-top.with-thumb, .look-help-preview .dc-embed-top.with-thumb { gap: .5rem; }
}
/* Pages de personnalisation : plus de place (les tuiles de droite laissent la place à l'aperçu). */
@media (min-width: 1001px) {
  .modal-body:has(.look-wide) { grid-template-columns: 14rem minmax(0, 1fr); }
  .modal-body:has(.look-wide) .tiles { display: none; }
}

/* ---------- Page « Activité » : tickets, staff et commandes ---------- */
.act { display: grid; gap: 1rem; transition: opacity .2s; }
.act.loading { opacity: .55; }
.act-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.act-seg { display: inline-flex; padding: .2rem; border-radius: .7rem; background: var(--well); border: 1px solid var(--line); }
.act-seg button { border: 0; background: transparent; color: var(--muted); font: 600 .85rem var(--font); padding: .38rem .8rem; border-radius: .55rem; cursor: pointer; }
.act-seg button.on { background: var(--accent); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.act-nav { display: inline-flex; align-items: center; gap: .35rem; }
.act-range { display: inline-flex; align-items: center; gap: .4rem; min-width: 9.5rem; justify-content: center; font-size: .95rem; }
.act-range .icon { width: 15px; height: 15px; color: var(--accent); }
.act-compare { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; white-space: nowrap; }
.act-compare select { padding: .3rem .5rem; }
.act-actions { display: inline-flex; gap: .45rem; margin-left: auto; }
.act-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.act-kpi { display: grid; gap: .2rem; text-align: left; padding: .75rem .85rem; border-radius: .8rem; border: 1px solid var(--line); background: var(--well); color: var(--text); font: inherit; cursor: pointer; position: relative; overflow: hidden; transition: border-color .15s, transform .15s; }
.act-kpi::before { content: ''; position: absolute; inset: .7rem auto .7rem 0; width: 3px; border-radius: 3px; background: var(--accent); opacity: .5; }
.act-kpi:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); transform: translateY(-1px); }
.act-kpi.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.act-kpi.on::before { opacity: 1; }
.act-kpi:disabled { opacity: .45; cursor: default; }
.act-kpi small { color: var(--muted); font-size: .78rem; }
.act-kpi strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.act-kpi em { font-style: normal; color: var(--muted); font-size: .74rem; }
.act-delta { display: inline-flex; width: max-content; align-items: center; padding: .05rem .45rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: rgba(148, 163, 184, .16); color: var(--muted); }
.act-delta.good { background: rgba(34, 197, 94, .15); color: #4ade80; }
.act-delta.bad { background: rgba(239, 68, 68, .15); color: #f87171; }
.act-card { border: 1px solid var(--line); border-radius: .9rem; background: var(--card); padding: .9rem 1rem; min-width: 0; }
.act-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem .8rem; margin-bottom: .6rem; }
.act-card-head h3 { display: flex; align-items: center; gap: .45rem; font-size: 1rem; margin: 0; }
.act-card-head h3 .icon { color: var(--accent); }
.act-card-head > .muted { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; }
.act-chart > svg { width: 100%; height: auto; display: block; }
.act-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.act-axis { fill: var(--muted); font: 500 11px var(--font); }
.act-barfill { fill: var(--accent); opacity: .85; transition: opacity .15s; }
.act-barfill:hover { opacity: 1; }
.act-empty { padding: 2.5rem 0; text-align: center; }
.act-table-wrap { overflow-x: auto; }
.act-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.act-table th { text-align: right; font-weight: 600; color: var(--muted); font-size: .78rem; padding: .35rem .5rem; white-space: nowrap; }
.act-table th:first-child { text-align: left; }
.act-table th button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .2rem; }
.act-table th button .icon { width: 12px; height: 12px; }
.act-table th[aria-sort="descending"] button .icon { transform: rotate(90deg); }
.act-table td { padding: .45rem .5rem; border-top: 1px solid var(--line); }
.act-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.act-table tr.mvp td { background: rgba(250, 204, 21, .09); }
.act-table tr.mvp td:first-child { box-shadow: inset 3px 0 #facc15; }
.act-table tr.idle td { background: rgba(239, 68, 68, .07); color: #fca5a5; }
.act-table tr.idle td:first-child { box-shadow: inset 3px 0 #ef4444; }
.act-who { display: inline-flex; align-items: center; gap: .55rem; }
.act-face { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--accent) 30%, var(--well)); color: #fff; font-weight: 700; font-size: .8rem; object-fit: cover; }
.act-tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; }
.act-tag .icon { width: 12px; height: 12px; }
.act-tag.mvp { background: rgba(250, 204, 21, .18); color: #facc15; }
.act-tag.idle { background: rgba(239, 68, 68, .16); color: #f87171; }
.act-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.act-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.act-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; align-items: baseline; }
.act-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-row small { grid-column: 1; font-size: .74rem; }
.act-count { grid-column: 2; grid-row: 1; display: inline-flex; gap: .45rem; align-items: baseline; font-variant-numeric: tabular-nums; }
.act-diff { font-size: .72rem; font-weight: 700; }
.act-diff.good { color: #4ade80; }
.act-diff.bad { color: #f87171; }
.act-meter { display: block; height: 4px; border-radius: 4px; background: var(--well); margin-top: .3rem; overflow: hidden; }
.act-meter i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), #8b5cf6); }
.act-foot { display: flex; align-items: center; gap: .4rem; margin: 0; }
.act-foot .icon { width: 14px; height: 14px; }
.act-report { width: min(32rem, 100%); display: grid; gap: .8rem; }
.act-report-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.act-report-head h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin: 0; }
.act-report-dates { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.act-report-dates label, .act-report-row { display: grid; gap: .3rem; font-size: .85rem; }
.act-report input[type=date], .act-report select { width: 100%; padding: .5rem .6rem; border-radius: .5rem; border: 1px solid var(--line); background: var(--well); color: var(--text); font: inherit; color-scheme: dark; }
.act-report-meas { display: flex; flex-wrap: wrap; gap: .4rem 1rem; border: 1px solid var(--line); border-radius: .6rem; padding: .5rem .8rem .7rem; margin: 0; }
.act-report-meas legend { font-size: .85rem; padding: 0 .3rem; }
.act-report-meas .check { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; }
.act-report-foot { display: flex; justify-content: flex-end; gap: .5rem; }
.act-report-out:empty { display: none; }
.act-report-out .ok { color: var(--green); display: flex; align-items: center; gap: .35rem; margin: .4rem 0 0; }
.act-file { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
@media (max-width: 900px) { .act-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .act-lists { grid-template-columns: 1fr; } .act-actions { margin-left: 0; } }
@media (max-width: 480px) { .act-report-dates { grid-template-columns: 1fr; } .act-kpi strong { font-size: 1.2rem; } }

/* ---------- Barème des sanctions : éditeur (une carte par motif, paliers en pastilles) ---------- */
.scale-editor { display: grid; gap: .7rem; }
.scale-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.scale-ro { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.scale-ro svg { width: 14px; height: 14px; }
.scale-editor.read-only input:disabled, .scale-editor.read-only select:disabled { opacity: 1; cursor: default; color: var(--text); }
.scale-editor.read-only .scale-step select:disabled { appearance: none; -webkit-appearance: none; background-image: none; padding-right: .4rem; }
.is-locked, .is-locked input:disabled, .is-locked select:disabled { cursor: not-allowed; }
.scale-search { display: inline-flex; align-items: center; gap: .4rem; flex: 1 1 14rem; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--well); }
.scale-search input { border: 0; background: none; color: var(--text); font: inherit; width: 100%; outline: none; }
.scale-legend { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .75rem; color: var(--muted); }
.scale-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.scale-legend i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--ac); }
.scale-list { display: grid; gap: .55rem; }
.scale-motif { position: relative; display: grid; gap: .5rem; padding: .6rem .7rem .7rem 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--well); overflow: hidden; }
.scale-motif::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--lv); }
.scale-motif-head { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.scale-name { flex: 1 1 14rem; font-weight: 600; }
.scale-level { display: inline-flex; align-items: center; gap: .35rem; }
.scale-level i { width: .7rem; height: .7rem; border-radius: 50%; }
.scale-level select { padding: .3rem .4rem; }
.scale-warn { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); }
.scale-del { margin-left: auto; }
.scale-steps { display: flex; flex-wrap: wrap; gap: .4rem; align-items: stretch; }
.scale-step { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .35rem .25rem .5rem; border-radius: .55rem; background: color-mix(in srgb, var(--ac) 22%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 55%, transparent); }
.scale-step small { font-size: .68rem; font-weight: 800; color: color-mix(in srgb, var(--ac) 70%, #fff); text-transform: uppercase; }
.scale-step.warn { --ac: #94a3b8; padding-right: .6rem; flex-direction: column; align-items: flex-start; gap: 0; }
.scale-step.warn strong { font-size: .8rem; }
.scale-step select { padding: .15rem .25rem; font-size: .8rem; max-width: 9.5rem; background: transparent; border: 0; color: var(--text); font-weight: 600; }
.scale-step select option { background: var(--card); }
.scale-durs { display: inline-flex; align-items: center; gap: .2rem; }
.scale-durs i { color: var(--muted); font-style: normal; }
.scale-dur { width: 4.4rem; padding: .2rem .35rem; font-size: .8rem; border-radius: .4rem; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.scale-dur.bad { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, .25); }
.scale-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: .1rem; display: inline-grid; place-items: center; }
.scale-x .icon { width: 14px; height: 14px; }
.scale-x:hover { color: #f87171; }
.scale-add { align-self: center; }