/* ---------- Thème Elythera : pastel sakura ---------- */
:root {
  --bg: #f7fbf8;
  --toast-bg: #1d3d33;   /* pastille d'alerte : couple lisible imposé */
  --toast-fg: #ffffff;
  /* Textes posés sur une surface qui change avec la palette (clair) */
  --on-soft: #256349;
  --on-cream: #7a5a34;
  --on-sky: #1f5f73;
  --alert-hit: #a35c05;
  --alert-sunk: #c0272d;
  --alert-miss: #1e6289;
  --card: #ffffff;
  --border: #e6efe8;
  --text: #21453a;
  --text-muted: #7e988c;
  --heading: #1d3d33;

  --accent: #3f9070;
  --accent-dark: #35795e;
  --accent-soft: #e2f3ea;

  --progress: #7cc86a;
  --progress-track: #edf3ee;

  --peach: #fdf2e4;
  --mint: #eaf7ee;
  --cream: #fbf6ea;
  --sky: #ddf1f5;
  --lilac: #cfb5e0;

  --badge-active-bg: #dcf0f7;
  --badge-active-text: #3a7d92;
  --badge-done-bg: #dff3de;
  --badge-done-text: #2f7d43;
  --badge-locked-bg: #f4e9da;
  --badge-locked-text: #93714a;

  --chip-yellow-bg: #f8e9a0;
  --chip-yellow-text: #7c661c;
  --chip-purple-bg: #ecdff5;
  --chip-purple-text: #6d4b8a;

  --row-1: #e9e468;
  --row-2: #55b28b;
  --row-3: #c9a6d6;
  --row-rest: #f9f2e1;
  --lvl-pill: #232e3d;

  --danger: #d4574e;
  --shadow: 0 10px 30px rgba(33, 69, 58, 0.08);
  --radius: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* L'attribut hidden doit toujours gagner, même sur les éléments
   dont une classe définit display (boutons, labels flex…) */
[hidden] { display: none !important; }

body {
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

h1, h2, h3, .brand, .btn, .stat-value {
  font-family: "Quicksand", "Nunito", system-ui, sans-serif;
}

a { color: var(--accent); text-decoration: none; }

/* ---------- Barre du haut ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--card);
  padding: 16px 32px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 12px rgba(33, 69, 58, 0.06);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--heading);
}

.brand-logo {
  color: var(--accent);
  font-size: 26px;
  line-height: 1;
}

/* Navigation en pilules, regroupée dans un conteneur arrondi.
   min-width/overflow : quand la place manque, la nav DÉFILE horizontalement
   au lieu de pousser le profil et la déconnexion hors de l'écran.
   .nav-wrap porte les flèches ‹ › (affichées par nav.js quand ça déborde)
   pour que la souris puisse aussi défiler, pas seulement le tactile. */
.nav-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.nav {
  display: flex;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a { flex-shrink: 0; }
.brand,
.topbar-user { flex-shrink: 0; }

.nav-scroll {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 0 0 2px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 2px 10px rgba(33, 69, 58, 0.18);
}
.nav-scroll.show { display: flex; }
.nav-scroll:hover { background: var(--accent-soft); color: var(--accent); }
.nav-scroll-prev { left: 4px; }
.nav-scroll-next { right: 4px; }

.nav a {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 14px;
  font-family: "Quicksand", sans-serif;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.nav a:hover { color: var(--heading); background: var(--accent-soft); }

.nav a.active {
  color: #fff;
  background: var(--accent);
}

/* Un événement (chasse) est en cours : l'onglet brille pour attirer l'œil */
.nav a.nav-event {
  color: var(--heading);
  background: rgba(240, 178, 50, 0.16);
  animation: event-glow 2.2s ease-in-out infinite;
}
.nav a.nav-event:hover { background: rgba(240, 178, 50, 0.3); }
.nav a.nav-event.active {
  color: #fff;
  background: var(--accent);
  animation: none;
  box-shadow: 0 0 10px rgba(240, 178, 50, 0.55);
}
@keyframes event-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(240, 178, 50, 0.45); }
  50% { box-shadow: 0 0 0 2px rgba(240, 178, 50, 0.8), 0 0 12px rgba(240, 178, 50, 0.45); }
}

/* Bouton rond à icône (paramètres…) */
.btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

.btn-icon:hover { border-color: var(--accent); background: var(--accent-soft); }

.topbar-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-user .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
}

.topbar-user .user-name {
  font-weight: 700;
  color: var(--heading);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  border-radius: 999px;
  padding: 11px 24px;
  transition: transform 0.12s, background 0.15s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); }


.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 2px solid var(--border);
  padding: 8px 18px;
  font-size: 13px;
}

.btn-ghost:hover { color: var(--danger); border-color: var(--danger); }

/* ---------- Héro ---------- */
.hero {
  background: linear-gradient(115deg, #d5f0f4 0%, #e2f6ee 55%, #eef9f1 100%);
  padding: 56px 32px;
}

.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.hero h1 {
  font-size: 44px;
  color: var(--heading);
  margin-bottom: 14px;
}

.hero-level {
  font-size: 18px;
  color: var(--text);
  margin-bottom: 18px;
}

.hero-level .hero-xp { color: var(--accent); font-weight: 700; }

.hero-left { flex: 1; max-width: 520px; }

.xp-track {
  height: 16px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(33, 69, 58, 0.08);
}

.xp-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #8ed177, #6cc158);
  border-radius: 999px;
  transition: width 0.7s ease;
}

.hero-note {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.hero-avatar-wrap { position: relative; flex-shrink: 0; }

.hero-avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 7px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
  background: var(--accent-soft);
  object-fit: cover;
}

.hero-level-badge {
  position: absolute;
  right: 2px;
  bottom: 8px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--lilac);
  color: #3d2b4e;
  font-weight: 800;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fff;
  font-family: "Quicksand", sans-serif;
}

/* ---------- Conteneur ---------- */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 32px 40px;
}

/* ---------- Rythme vertical unifié ----------
   L'espacement entre les blocs d'une page vient d'ICI (plus aucune marge
   inline) : 20px entre blocs, un titre reste collé à son contenu, et une
   respiration plus grande précède chaque nouveau titre de section. */
.container > * + * { margin-top: 20px; }
.container > .section-title + * { margin-top: 12px; }
.container > * + .section-title { margin-top: 30px; }
/* Conteneurs imbriqués (sections de la page Progression) : pas de double
   cadre — le parent gère largeur et padding */
.prog-section > .container { max-width: none; padding: 0; }
.prog-section > .container > * + * { margin-top: 20px; }
/* Les contenus rendus en JS (#games-body, #hunt-body, #shop-body…) suivent
   le même rythme — sauf les .admin-stack qui ont déjà leur gap */
.page [id$="-body"]:not(.admin-stack) > * + * { margin-top: 20px; }

.page { display: none; }
.page.visible { display: block; }

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  color: var(--heading);
  margin: 28px 0 18px;
}

.section-title .brand-logo { font-size: 22px; }

/* ---------- Cartes stats ---------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: -34px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}

.stat-card.peach { background: var(--peach); border-color: #f3e2cb; }
.stat-card.mint { background: var(--mint); border-color: #d8ecdd; }

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.1;
}

.stat-label { font-size: 14px; color: var(--text-muted); font-weight: 600; }

/* ---------- Grille accueil ---------- */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}

.home-grid-left, .home-grid-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---------- Cartes ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.card > h2 {
  font-size: 19px;
  color: var(--heading);
  margin-bottom: 16px;
}

/* ---------- Quêtes ---------- */
.quests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.quest-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quest-card.completed { background: #f4fbf2; border-color: #d9eed6; }

.quest-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quest-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  /* Plusieurs emoji (données anciennes) : jamais de colonne qui déborde */
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}

.badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 999px;
  padding: 6px 14px;
  text-transform: uppercase;
  font-family: "Quicksand", sans-serif;
}

.badge-active { background: var(--badge-active-bg); color: var(--badge-active-text); }
.badge-done { background: var(--badge-done-bg); color: var(--badge-done-text); }
.badge-locked { background: var(--badge-locked-bg); color: var(--badge-locked-text); }

.quest-title { font-size: 18px; color: var(--heading); }

.quest-desc { font-size: 14px; color: var(--text-muted); line-height: 1.45; }

.quest-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.quest-progress-row .pct { color: var(--text-muted); }

.quest-bar {
  height: 8px;
  background: var(--progress-track);
  border-radius: 999px;
  overflow: hidden;
}

.quest-bar-fill {
  height: 100%;
  background: var(--progress);
  border-radius: 999px;
}

.chip {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
  padding: 7px 16px;
  font-family: "Quicksand", sans-serif;
}

.chip-yellow { background: var(--chip-yellow-bg); color: var(--chip-yellow-text); }
.chip-purple { background: var(--chip-purple-bg); color: var(--chip-purple-text); }

.quest-empty { color: var(--text-muted); font-size: 14px; }

/* ---------- Classement (carte accueil + rangées) ---------- */
.board { display: flex; flex-direction: column; }

.board-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 8px;
  background: var(--row-rest);
}

.board-row.r1 { background: var(--row-1); }
.board-row.r2 { background: var(--row-2); }
.board-row.r3 { background: var(--row-3); }
.board-row.me { outline: 3px solid rgba(63, 144, 112, 0.55); }

.board-rank {
  width: 26px;
  text-align: center;
  font-weight: 800;
  font-family: "Quicksand", sans-serif;
  font-size: 15px;
}

.board-row img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
}

.board-name {
  flex: 1;
  font-weight: 700;
  color: var(--heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lvl-pill {
  background: var(--lvl-pill);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border-radius: 8px;
  padding: 4px 10px;
  font-family: "Quicksand", sans-serif;
  white-space: nowrap;
}

/* Lien final d'une carte. Le filet SÉPARE le lien de ce qui le précède : sans
   rien au-dessus, il ne sépare rien et traverse la carte pour rien. La règle
   dit maintenant sa condition d'emploi, au lieu d'obliger chaque appel à la
   corriger d'un `style="border: none"`. */
.card-link {
  display: block;
  text-align: center;
  font-weight: 700;
}
.card-link:not(:first-child) {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}

/* ---------- 🚀 Page du launcher ---------- */
.launcher-page { max-width: 1080px; margin: 0 auto; }
.launcher-page .card { margin-bottom: 20px; }
.launcher-page .card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

/* Serveurs distribués : une ligne par serveur, l'icône à gauche */
.lau-servers { display: flex; flex-direction: column; gap: 14px; }
.lau-server {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px; border: 1px solid var(--border); border-radius: var(--radius);
}
/* Le serveur principal se distingue : c'est celui qu'on vient chercher */
.lau-server-main { border-color: var(--accent); }
.lau-server-icon { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.lau-server-body { min-width: 0; flex: 1; }
.lau-server-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
.lau-server-desc { margin: 0 0 6px; }
/* Fréquentation : la couleur dit l'état, le texte le dit aussi — un daltonien
   ne doit pas dépendre du vert pour savoir qu'un serveur répond. */
.lau-server-players { margin: 4px 0 0; font-weight: 700; font-size: 13px; }
.lau-online { color: var(--accent); }
.lau-offline { color: var(--text-muted); }

/* Notes de version : repliées, sauf la plus récente */
.lau-release { border-top: 1px solid var(--border); padding: 12px 0; }
.lau-release:first-child { border-top: none; padding-top: 0; }
.lau-release-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  cursor: pointer; list-style: none;
}
.lau-release-head::-webkit-details-marker { display: none; }
/* Le chevron dit que le bloc s'ouvre : sans lui, un titre cliquable ne se
   distingue pas d'un titre ordinaire */
.lau-release-head::before { content: "▸"; color: var(--accent); font-weight: 700; }
.lau-release[open] > .lau-release-head::before { content: "▾"; }
.lau-release-body { padding: 10px 0 4px 16px; }
.lau-release-assets { margin: 6px 0 0 16px; padding-left: 16px; font-size: 13px; }
.lau-release-assets li { margin: 3px 0; }

@media (max-width: 560px) {
  .lau-server { flex-direction: column; }
  .lau-server-icon { width: 48px; height: 48px; }
}

/* ---------- Récompenses ---------- */
.reward-list { display: flex; flex-direction: column; gap: 14px; }

.reward-row { display: flex; align-items: center; gap: 14px; }

.reward-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}

.reward-row.locked { opacity: 0.55; }

.reward-level { font-weight: 800; color: var(--heading); font-size: 15px; }
.reward-name { font-size: 13px; color: var(--text-muted); font-weight: 600; }

.rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.reward-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.reward-card.unlocked { background: var(--mint); border-color: #d8ecdd; }

/* ---------- Tableaux ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }

.table th {
  text-align: left;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border);
}

.table td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
.table tr:last-child td { border-bottom: none; }
.table tr.me td { background: var(--accent-soft); }
.table .member-cell { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--heading); }
.table .member-cell img { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); }

.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ---------- Serveur / infos ---------- */
.mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mini-stat {
  background: var(--bg);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.mini-stat .stat-value { font-size: 20px; }
.mini-stat .stat-label { font-size: 12px; }

.info-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.info-list li { display: flex; gap: 12px; align-items: baseline; font-size: 14px; line-height: 1.5; }
.info-list .reward-icon { width: 34px; height: 34px; font-size: 15px; align-self: center; }

/* ---------- Événements ---------- */
.event-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.event-name { font-size: 18px; font-weight: 700; color: var(--heading); }
.event-meta { font-size: 13px; color: var(--text-muted); font-weight: 600; }

.empty-note { color: var(--text-muted); font-size: 14px; }

/* ---------- Landing ---------- */
.landing-hero {
  background: linear-gradient(115deg, #d5f0f4 0%, #e2f6ee 55%, #eef9f1 100%);
  padding: 90px 32px;
  text-align: center;
}

.landing-hero h1 {
  font-size: 52px;
  color: var(--heading);
  margin-bottom: 16px;
}

.landing-hero p {
  max-width: 560px;
  margin: 0 auto 32px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
}

.error-box {
  max-width: 520px;
  margin: 0 auto 28px;
  background: #fdecec;
  border: 1px solid #f2c4c1;
  color: #a33c35;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.features {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  text-align: center;
}

.feature-card .stat-icon { margin: 0 auto 14px; background: var(--cream); }
.feature-card h3 { color: var(--heading); font-size: 17px; margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

/* ---------- Pied de page ---------- */
.footer {
  text-align: center;
  padding: 40px 16px 32px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}

.footer .brand-logo { font-size: 14px; }

/* ---------- Événements globaux ---------- */
.page-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.form-wide { grid-column: 1 / -1; }

.input {
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea.input { resize: vertical; }

/* `gap` manquait : « Rejouer » et « Revanche » se touchaient */
.form-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
/* Dans une partie, « Annuler » et « Abandonner » se centrent sous le plateau :
   collés au bord droit ils paraissaient rattachés à autre chose */
.game-view .form-actions { justify-content: center; }
.form-error { color: var(--danger); font-size: 14px; font-weight: 700; margin-top: 10px; }

.gevent {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 16px;
}

.gevent-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.gevent-title { font-size: 20px; color: var(--heading); }
.gevent-desc { color: var(--text-muted); font-size: 14px; line-height: 1.5; margin: 8px 0; }

.gevent-meta {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.gevent-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.my-status { font-size: 13px; font-weight: 800; color: var(--accent); }

.btn-small {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-family: "Quicksand", sans-serif;
  transition: filter 0.12s;
}

.btn-small:hover { filter: brightness(0.95); }
.btn-green { background: var(--accent); color: #fff; }
.btn-outline { background: transparent; border: 2px solid var(--border); color: var(--text-muted); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); filter: none; }

/* Aucune règle ne distinguait un bouton DÉSACTIVÉ : il restait vert vif et
   semblait cliquable alors qu'il ne répondait pas. Le défaut valait pour tous
   les boutons de l'application.
   ⚠️ Ce bloc doit rester APRÈS `.btn-small:hover` et `.btn-outline:hover` :
   à spécificité égale, c'est le dernier déclaré qui gagne — placé avant, le
   grisage était annulé au survol et le bouton se rallumait. */
.btn:disabled, .btn[disabled],
.btn-small:disabled, .btn-small[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.btn:disabled:hover, .btn[disabled]:hover,
.btn-small:disabled:hover, .btn-small[disabled]:hover {
  transform: none;
  filter: grayscale(0.6);
  border-color: var(--border);
  box-shadow: none;
}
/* Le fond n'est réaffirmé que sur les variantes PLEINES : le poser sur le
   sélecteur générique repeignait un bouton fantôme ou blurple en vert. */
.btn-primary:disabled:hover, .btn-primary[disabled]:hover { background: var(--accent); }
.btn-green:disabled:hover, .btn-green[disabled]:hover { background: var(--accent); }
.btn-danger { background: #fdecec; color: var(--danger); }

.badge-type { background: var(--cream); color: var(--on-cream); }
.badge-access { background: var(--chip-purple-bg); color: var(--chip-purple-text); }
.badge-status-planifie { background: var(--sky); color: var(--on-sky); }
.badge-status-en_cours { background: var(--badge-done-bg); color: var(--badge-done-text); }
.badge-status-termine { background: #eceff1; color: #607080; }
.badge-status-annule { background: #fdecec; color: var(--danger); }

.gevent-admin { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 14px; }
.gevent-detail { margin-top: 12px; background: var(--bg); border-radius: 12px; padding: 14px; }
.gevent-detail h4, .modal-body h4 {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 18px 0 8px;
}
.modal-body h4:first-child { margin-top: 0; }

/* ---------- Modales ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(29, 61, 51, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}

.modal {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(29, 61, 51, 0.35);
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-head h3 {
  font-size: 18px;
  color: var(--heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-close {
  border: none;
  background: var(--bg);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}

.modal-close:hover { color: var(--danger); background: #fdecec; }

.modal-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
}

.modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 20px;
}

.participants-scroll {
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 12px;
  padding: 4px 14px;
}

body.modal-open { overflow: hidden; }

@media (max-width: 560px) {
  .modal-overlay { padding: 12px 8px; }
  .modal { max-height: calc(100vh - 24px); }
  .modal-head, .modal-body { padding-left: 16px; padding-right: 16px; }
}

.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  flex-wrap: wrap;
}

.detail-row:last-child { border-bottom: none; }
.detail-row .who { font-weight: 700; color: var(--heading); }
.detail-row .meta { color: var(--text-muted); font-size: 13px; }
.detail-row .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.inline-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Sélecteur de membre avec suggestions (espace jeux : adversaire précis) */
.member-picker { position: relative; }
.member-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  z-index: 6;
  box-shadow: 0 6px 18px rgba(33, 69, 58, 0.14);
}
.member-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  text-align: left;
}
.member-option:hover { background: var(--accent-soft); }
.member-option img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}
.inline-form .input { flex: 1; min-width: 130px; padding: 8px 10px; }

/* Pastille d'alerte. Elle lisait `--heading` avec du texte blanc : dans les
   palettes où cette couleur est CLAIRE (sombre, halloween), le message
   tombait à 1,14:1 de contraste — la pastille se voyait, le texte non.
   Chaque palette déclare donc son propre couple, une fois pour toutes. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--toast-bg, var(--heading));
  color: var(--toast-fg, #fff);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 50;
  max-width: 90vw;
  text-align: center;
}

.toast.show { opacity: 1; }

/* ---------- Sélecteur de langue ---------- */
/* 🌍 Sélecteur de langue. Une pilule par langue devenait ingérable à quatre —
   et la barre du haut est déjà chargée. Une liste déroulante tient la même
   place quel que soit le nombre de langues, et c'est le contrôle que tout le
   monde sait manipuler. */
.lang-switch {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
}

.lang-switch select.lang-select {
  border: none;
  background: transparent;
  font-family: "Quicksand", sans-serif;
  font-weight: 800;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text);
  max-width: 132px;
}
.lang-switch select.lang-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Le menu déroulant natif hérite du fond de la PAGE, pas du bouton : sans
   cela, en thème sombre, les options s'affichaient noir sur noir. */
.lang-switch select.lang-select option { background: var(--card); color: var(--text); }

/* ---------- Vitrine ---------- */
.btn-blurple { background: #5865f2; color: #fff; }
.btn-blurple:hover { background: #4752c4; transform: translateY(-1px); }

.hero-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-statline {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
}

.vitrine-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 32px 8px;
}

.launcher-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: center;
}

.launcher-shot {
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: block;
}

.download-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.btn-download {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 18px;
  font-weight: 800;
  font-family: "Quicksand", sans-serif;
  color: var(--heading);
  box-shadow: var(--shadow);
  transition: transform 0.12s, border-color 0.12s;
}

.btn-download:hover { transform: translateY(-2px); border-color: var(--accent); }
.btn-download .dl-sub { display: block; font-size: 12px; color: var(--text-muted); font-weight: 600; font-family: "Nunito", sans-serif; }
.btn-download .dl-arrow { color: var(--accent); font-size: 20px; }
.btn-download.soon { opacity: 0.55; cursor: default; }
.btn-download.soon:hover { transform: none; border-color: var(--border); }

.dl-version {
  background: var(--accent-soft);
  color: var(--on-soft);
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 9px;
  margin-left: 8px;
  font-family: "Quicksand", sans-serif;
}

/* ---------- Page Paramètres ---------- */
.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.pref-row:last-child { border-bottom: none; }
.pref-title { font-weight: 700; color: var(--heading); font-size: 15px; }
.pref-desc { color: var(--text-muted); font-size: 13px; margin-top: 2px; line-height: 1.4; }

.q-off { opacity: 0.55; }

/* ---------- Page Profil ---------- */
.topbar-profile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  border-radius: 999px;
  padding: 3px 10px 3px 3px;
  transition: background 0.15s;
}

.topbar-profile:hover { background: var(--accent-soft); }

.profile-head {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--accent-soft);
  background: var(--bg);
  flex-shrink: 0;
}

.role-chip {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
  margin: 0 6px 6px 0;
  font-family: "Quicksand", sans-serif;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.pagination button:disabled { opacity: 0.4; cursor: default; }

/* Sous-onglets du panneau admin */
.subnav {
  margin-bottom: 20px;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
}

.subnav a { cursor: pointer; }
.admin-section[hidden] { display: none; }

.cat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--heading);
  cursor: pointer;
}

.cat-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
}

.pref-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.project-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.project-card.past { filter: grayscale(0.35); opacity: 0.85; }

.project-banner {
  height: 140px;
  background: linear-gradient(120deg, var(--sky), var(--mint));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
}

.project-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.project-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Le lien « classement complet » n'est plus enveloppé d'une carte : une carte
   qui ne contient qu'un lien promet un bloc et n'en livre pas. */
.vitrine-board { max-width: 560px; margin: 18px auto 0; text-align: center; }

/* Trois classements côte à côte (niveaux · bumps · votes). auto-fit + minmax :
   trois colonnes au large, une seule sous 560 px de contenu — même motif que
   la grille des archives de saison. */
.vitrine-boards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
/* Sans min-width: 0, le pseudo en ellipsis élargit sa colonne et fait
   déborder la grille entière */
.vitrine-boards > .card { min-width: 0; }
.vitrine-boards h3 { font-size: 15px; margin-bottom: 12px; }
.vitrine-season { text-align: center; color: var(--muted); font-weight: 700; margin: -6px 0 18px; }

/* ---------- Bannière d'événement (dashboard) ---------- */
.gevent-banner {
  margin: -22px -22px 16px;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}

.gevent-banner img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

/* ---------- Responsive ---------- */

/* Barre du haut : sous 1100px, la navigation passe sur sa propre ligne,
   sans retour à la ligne des liens (défilement horizontal si besoin) */
@media (max-width: 1420px) {
  .topbar {
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 8px 12px;
  }

  .brand { font-size: 19px; }
  .brand-logo { font-size: 22px; }

  .topbar-user { margin-left: auto; gap: 8px; }

  .topbar .btn {
    padding: 8px 14px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* La nav passe sur sa propre ligne, pleine largeur */
  .nav-wrap {
    order: 3;
    flex-basis: 100%;
  }

  .nav { width: 100%; }
}

/* Très petits écrans : on compacte encore la rangée du haut */
@media (max-width: 560px) {
  /* À 375 px : une colonne pleine largeur, et de quoi lire les pseudos */
  .vitrine-boards { gap: 14px; }
  .vitrine-boards > .card { padding: 16px; }
  .topbar-user .user-name { display: none; }
  .topbar .btn-blurple { display: none; } /* le bouton Discord reste dans le héro et le footer */
  .topbar-user .avatar { width: 32px; height: 32px; }
  .lang-switch select.lang-select { padding: 4px 6px; max-width: 116px; }
}

@media (max-width: 960px) {
  .home-grid { grid-template-columns: 1fr; }
  .launcher-grid { grid-template-columns: 1fr; }
  .hero-inner { flex-direction: column-reverse; text-align: center; }
  .hero h1 { font-size: 34px; }
  .stats-row { margin-top: 0; }
  .two-columns { grid-template-columns: 1fr; }
  .container, .hero { padding-left: 16px; padding-right: 16px; }
}

/* ================= Parc Créatif (galerie publique) ================= */
.crea-page { max-width: 1100px; }
.crea-tagline { color: var(--text-muted); margin: -6px 0 18px; }
.crea-pills { margin-bottom: 18px; }

.crea-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
@media (max-width: 640px) {
  .crea-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
}

.crea-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  cursor: zoom-in;
}
.crea-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.crea-tile:hover img { transform: scale(1.05); }

.crea-tile-overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 6px;
  padding: 26px 10px 8px;
  background: linear-gradient(transparent, rgba(20, 40, 32, 0.72));
  color: #fff;
  font-size: 12.5px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.crea-tile:hover .crea-tile-overlay { opacity: 1; }
.crea-tile-author { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crea-tile-section { flex-shrink: 0; opacity: 0.85; }

.crea-more-wrap { text-align: center; margin-top: 22px; }

/* Lightbox plein écran */
.crea-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 28, 23, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.crea-lightbox[hidden] { display: none; }
.crea-lightbox figure {
  margin: 0;
  max-width: min(1100px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.crea-lightbox img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}
.crea-lightbox figcaption {
  color: #f2f7f4;
  text-align: center;
  font-size: 14px;
  max-width: 700px;
}
.crea-lightbox figcaption p { margin: 6px 0 0; opacity: 0.85; white-space: pre-wrap; }
.crea-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
}
.crea-lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }

/* Mes créations (page Profil du dashboard) */
.crea-mine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.crea-mine {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
}
.crea-mine .crea-thumb {
  aspect-ratio: 1 / 1;
  display: block;
  width: 100%;
  object-fit: cover;
  cursor: zoom-in;
}
.crea-mine.is-hidden .crea-thumb { opacity: 0.35; filter: grayscale(0.8); }
.crea-mine-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Filtres de la galerie (vitrine + admin) */
.crea-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.crea-filters label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13.5px;
}
.crea-filters .input { width: auto; }
.crea-filters input[type="search"] { min-width: 180px; }

/* Modération de la galerie : puce d'ID + bouton « membres partis » */
.crea-id-chip {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  padding: 3px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  cursor: copy;
}
.crea-departed-wrap { margin: 4px 0 14px; }
.crea-departed-wrap .btn { width: 100%; justify-content: center; }

/* ================= Tickets ================= */
.tk-row .who { font-weight: 700; }
.tk-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px;
}
.tk-msg {
  max-width: 78%;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: 8px 12px;
  align-self: flex-start;
}
.tk-msg.tk-mine {
  align-self: flex-end;
  background: var(--cream);
  border-radius: 14px 14px 4px 14px;
}
.tk-msg-head { font-size: 11.5px; color: var(--text-muted); margin-bottom: 3px; }
.tk-msg-body { white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.tk-reply { display: flex; gap: 8px; align-items: stretch; }
.tk-reply textarea { flex: 1; }
.tk-reply-btns { display: flex; flex-direction: column; gap: 6px; }

/* Tickets : cases des rôles d'équipe par catégorie */
.tk-staff-toggles {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.tk-staff-toggles .cat-toggle { gap: 3px; }

/* ================= Modération : sous-onglets + mise en page aérée ================= */
.mod-section[hidden] { display: none; }

/* Note descriptive sous le titre d'une carte */
.section-note {
  color: var(--text-muted);
  font-size: 13.5px;
  margin: -6px 0 18px;
}

/* Listes « aérées » : chaque entrée devient une petite carte au lieu d'une
   ligne collée à la précédente (avertissements, historique, tickets…) */
.roomy-list { display: flex; flex-direction: column; gap: 10px; }
.roomy-list .detail-row {
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bg);
}
.roomy-list .detail-row:last-child { border-bottom: 1px solid var(--border); }
.roomy-list .detail-row .who { display: block; margin-bottom: 2px; }
.roomy-list .detail-row .meta { display: block; line-height: 1.5; }

/* Identité de membre dans les listes : avatar rond + nom + méta */
.row-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.row-id > div { min-width: 0; }
.row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  flex-shrink: 0;
  object-fit: cover;
  background: var(--accent-soft);
}
.crea-author-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.crea-author-line .row-avatar { width: 22px; height: 22px; }

/* Sous-onglets admin en plusieurs cartes empilées */
.admin-stack { display: flex; flex-direction: column; gap: 20px; }

/* Rangées configurables sur deux lignes (catégories de tickets…) */
.detail-row.stacked { flex-direction: column; align-items: stretch; }
.row-line {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.row-line .input { min-width: 110px; }
.row-line .grow { flex: 1; }
.row-line .row-end { margin-left: auto; display: flex; gap: 6px; }

/* Archives de saisons : trois classements côte à côte */
.arch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.arch-col h3 {
  font-size: 15px;
  color: var(--heading);
  margin-bottom: 10px;
}
.arch-col .detail-row { padding: 8px 10px; }

/* Avatars dans les bulles de conversation des tickets */
.tk-msg-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tk-msg-head .row-avatar { width: 22px; height: 22px; }

/* Espace Astres */
.astre-card { border: 1px solid #f0e2b6; background: linear-gradient(160deg, var(--card), #fdf9ec); }
.astre-color { padding: 4px; height: 42px; cursor: pointer; }

/* Pagination : numéros de pages + saut direct */
.pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.pagination .pg-jump { width: 76px; padding: 6px 8px; }

/* ================= Thèmes de chasse (halloween, été, hiver) ================= */
body[data-theme="halloween"] {
  --bg: #1d1526;
  --toast-bg: #ffb347;   /* halloween : texte sombre sur l'orange */
  --toast-fg: #2a1200;
  /* Textes posés sur une surface qui change avec la palette (halloween) */
  --on-soft: #f0b98a;
  --on-cream: #f0d9a0;
  --on-sky: #a9d8ea;
  --alert-hit: #ffb347;
  --alert-sunk: #ff9090;
  --alert-miss: #8fc9ea;
  --card: #2a1f38;
  --border: #453259;
  --text: #e8dff5;
  --text-muted: #a893c4;
  --heading: #ffb347;
  --accent: #e8842c;
  --accent-dark: #c96a15;
  --accent-soft: #3d2b52;
  --peach: #3a2a4d;
  --mint: #33244a;
  --cream: #362848;
  --sky: #302345;
  --progress-track: #3d2b52;
}
body[data-theme="ete"] {
  --bg: #fdf7e9;
  --toast-bg: #146b8a;   /* été */
  --toast-fg: #ffffff;
  /* Textes posés sur une surface qui change avec la palette (été) */
  --on-soft: #0d5f7e;
  --on-cream: #7a5a2a;
  --on-sky: #0d5f7e;
  --alert-hit: #9a5a05;
  --alert-sunk: #c0272d;
  --alert-miss: #12658c;
  --card: #ffffff;
  --border: #f3e3c2;
  --text: #4a3b23;
  --text-muted: #a58f66;
  --heading: #146b8a;
  --accent: #1d9bc9;
  --accent-dark: #14759c;
  --accent-soft: #dff2f9;
  --peach: #fdeed3;
  --mint: #e4f6f0;
  --cream: #fdf3da;
  --sky: #d8f1fa;
}
body[data-theme="hiver"] {
  --bg: #eef4fb;
  --toast-bg: #1d3d5c;   /* hiver */
  --toast-fg: #ffffff;
  /* Textes posés sur une surface qui change avec la palette (hiver) */
  --on-soft: #20537f;
  --on-cream: #4a5f7a;
  --on-sky: #1c5182;
  --alert-hit: #9a5a05;
  --alert-sunk: #c0272d;
  --alert-miss: #1b5c85;
  --card: #ffffff;
  --border: #d6e4f5;
  --text: #23384d;
  --text-muted: #7e97b3;
  --heading: #1d3d5c;
  --accent: #3b7fc4;
  --accent-dark: #2c649c;
  --accent-soft: #e0ecfa;
  --peach: #e8f0fb;
  --mint: #e2eefb;
  --cream: #edf3fc;
  --sky: #dcecfb;
}

/* Page Chasse */
.hunt-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hunt-hero .stat-value { font-size: 26px; }
.hunt-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.hunt-shop-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hunt-shop-item .price { font-weight: 800; color: var(--heading); }

/* Modal de quête : gestionnaire de récompenses multiples */
.rewards-wrap { display: flex; flex-direction: column; gap: 8px; }
.rewards-wrap .reward-line {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--bg);
}
.rewards-wrap .who { min-width: 130px; }

/* ================= Espace jeux (morpion, puissance 4) ================= */
.game-board {
  display: grid;
  gap: 6px;
  width: fit-content;
  margin: 16px auto;
}
.game-board.morpion {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 280px);
}
.game-board.puissance4 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: min(100%, 430px);
  background: var(--accent-soft);
  padding: min(10px, 2vw);
  border-radius: 14px;
}
.game-cell {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  font-size: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
  padding: 0;
}
.game-board.puissance4 .game-cell { border-radius: 50%; font-size: clamp(15px, 4.5vw, 26px); }
.game-board.morpion .game-cell { font-size: clamp(22px, 8vw, 34px); }
.game-cell:not(:disabled):hover { background: var(--accent-soft); transform: scale(1.05); }
.game-cell:disabled { cursor: default; }
.game-cell.win { outline: 3px solid var(--accent); }
/* Dernier pion posé (puissance 4, morpion) — un anneau INTÉRIEUR : un contour
   extérieur déborderait sur les cases voisines d'une grille sans espacement. */
/* 🟢 Rond de connexion d'un joueur, dans le salon d'une course de sudoku.
   Gris = la page n'est pas ouverte chez lui ; vert = il est là. */
.presence-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
  vertical-align: middle;
  flex: none;
}
.presence-dot.on {
  background: #57f287;
  box-shadow: 0 0 6px rgba(87, 242, 135, 0.75);
}
/* Un salon peut compter seize joueurs : les puces s'enroulent */

/* 🎫 Demande d'aide sur l'écran de blocage des non-vérifiés */
.vgate-help { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; width: 100%; }
.vgate-help-note { font-size: 13px; }
.vgate-ticket { text-align: left; }
.vgate-form { display: flex; flex-direction: column; gap: 10px; }
.vgate-form textarea { resize: vertical; min-height: 90px; }
.vgate-error { color: var(--danger, #dc2626); }
/* La conversation prend toute la carte : elle est la seule chose accessible */
.vgate-conversation { width: 100%; text-align: left; margin-top: 18px; }

.game-cell.last-move {
  box-shadow: inset 0 0 0 3px var(--accent), 0 0 8px var(--accent-soft);
}

.game-status {
  text-align: center;
  font-weight: 700;
  color: var(--heading);
  margin: 10px 0;
}
.game-players {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.game-players .player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
/* Deux sens distincts : `.me` dit « c'est moi », `.turn` dit « c'est son
   tour ». Les confondre n'a pas de conséquence tant qu'aucun jeu à sièges
   n'a de tour de jeu — ce ne sera plus vrai au premier. */
.game-players .player.turn { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.game-players .player.me { border-color: var(--accent-soft); font-weight: 700; }
/* 🪑 Salon d'attente : tout en COLONNE et centré. Les morceaux étaient
   auparavant posés à la suite dans des conteneurs qui les alignaient chacun
   à sa façon — d'où un bouton collé à son explication et un compte perdu à
   gauche. Vaut pour tous les jeux, pas seulement le sudoku. */
.game-lobby {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 18px 0 4px;
}
.game-lobby .game-players { justify-content: center; margin: 0; }
.game-lobby-count { color: var(--text-muted); font-size: 14px; margin: 0; }
.game-lobby-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.game-lobby-hint { color: var(--text-muted); font-size: 13px; margin: 0; max-width: 42ch; }

.game-share {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px auto 0;
  max-width: 520px;   /* un champ pleine largeur écrasait tout le reste */
}
.game-share .input { flex: 1; font-family: ui-monospace, monospace; font-size: 12.5px; }
.game-type-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.game-type-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  padding: 18px;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  color: var(--heading);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.game-type-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.game-type-card .emoji { font-size: 34px; display: block; margin-bottom: 8px; }
.game-type-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}
/* Jeu restreint (équipe/astres) ou en maintenance pour ce membre */
.game-type-card.locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.game-type-card.locked:hover { transform: none; border-color: var(--border); }
.gt-badge {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 8px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.gt-badge.gt-team { background: rgba(88, 101, 242, 0.14); color: #4b5cc4; }
.gt-badge.gt-astres { background: rgba(240, 178, 50, 0.18); color: #b07d18; }
.gt-badge.gt-maint { background: rgba(153, 170, 181, 0.22); color: #5d6a73; }
/* 🧪 Bêta : un violet qui ne ressemble à aucune autre pastille — « en essai »
   n'est ni une restriction d'équipe, ni un avantage Astre, ni une panne. */
.gt-badge.gt-beta { background: rgba(155, 89, 217, 0.18); color: #7b3fb5; }

/* Étapes du modal « Nouvelle partie » */
.modal-step { color: var(--heading); margin: 14px 0 8px; }
.modal-step:first-child { margin-top: 0; }

/* Compte à rebours d'inactivité d'une partie */
.game-timer {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  margin: 2px 0 6px;
}

/* Accueil : partie en cours où c'est à moi de jouer */
.detail-row.my-turn {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Bataille navale : grilles 10×10 compactes */
.game-board.navale {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  width: min(100%, 420px);
  gap: 3px;
  background: var(--accent-soft);
  padding: min(8px, 1.6vw);
  border-radius: 12px;
}
.game-board.navale .game-cell {
  border-radius: 6px;
  font-size: clamp(10px, 3.2vw, 17px);
}
.game-board.navale.mine .game-cell { background: var(--bg); }
.navale-title {
  text-align: center;
  color: var(--heading);
  margin: 14px 0 4px;
}

/* Bataille navale : case d'un navire coulé */
.game-cell.sunk-cell { background: rgba(220, 38, 38, 0.16); }

/* Alerte de tir (touché / coulé / à l'eau), animée à l'apparition */
.navale-alert {
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  margin: 4px 0;
  animation: alert-pop 0.35s ease;
}
/* Couleurs figées posées sur une carte qui, elle, change de palette :
   « coulé » tombait à 2,97:1 en sombre. Un jeton par issue. */
.navale-alert.hit { color: var(--alert-hit); }
.navale-alert.sunk { color: var(--alert-sunk); }
.navale-alert.miss { color: var(--alert-miss); }
@keyframes alert-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

/* État des flottes par navire : nom + cases (touchées en rouge) */
.fleet-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 10px 0 4px;
}
.fleet-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
}
.fleet-chip.sunk {
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(220, 38, 38, 0.07);
  color: #dc2626;
}
.fleet-chip.sunk .fleet-chip-name { text-decoration: line-through; }
.ship-squares { display: inline-flex; gap: 2px; }
.ship-squares i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  display: inline-block;
}
.ship-squares i.hit { background: #dc2626; border-color: #b91c1c; }

/* ---------- Mode sombre (html[data-appearance="dark"]).
   Le sélecteur « html[…] body » assure la priorité sur les thèmes de chasse
   (body[data-theme="…"]) : en sombre, le confort de lecture gagne. ---------- */
html[data-appearance="dark"],
html[data-appearance="dark"] body {
  --bg: #1b211e;
  --toast-bg: #e9f2ec;   /* sombre : pastille claire, texte sombre */
  --toast-fg: #12211b;
  /* Textes posés sur une surface qui change avec la palette (sombre) */
  --on-soft: #8fdcb4;
  --on-cream: #e0c48f;
  --on-sky: #8fd3e6;
  --alert-hit: #ffb457;
  --alert-sunk: #ff8a8a;
  --alert-miss: #7cc3ec;
  --card: #242c28;
  --border: #37413c;
  --text: #cfdcd4;
  --text-muted: #8aa094;
  --heading: #e9f2ec;
  --accent-soft: rgba(63, 144, 112, 0.22);
  --progress-track: #2d3631;
  --peach: #33302a;
  --mint: #273129;
  --cream: #2f2d26;
  --sky: #263135;
  /* Rangées du classement : versions sombres des podiums (le texte clair
     var(--heading) reste lisible — corrige les noms invisibles en sombre) */
  --row-1: #4d451f;
  --row-2: #26453a;
  --row-3: #3d3147;
  --row-rest: #2a322d;
}
html[data-appearance="dark"] .topbar { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }

/* Quête accomplie : le vert clair du thème jour rendait le texte illisible */
html[data-appearance="dark"] .quest-card.completed {
  background: rgba(63, 144, 112, 0.16);
  border-color: rgba(63, 144, 112, 0.4);
}
/* Héros (dashboard + vitrine) : dégradés pastel clairs → version sombre,
   sinon les titres clairs y deviennent invisibles */
html[data-appearance="dark"] .hero,
html[data-appearance="dark"] .landing-hero {
  background: linear-gradient(115deg, #1f2c30 0%, #223229 55%, #232e26 100%);
}
html[data-appearance="dark"] .nav a.active { color: #fff; }
html[data-appearance="dark"] img.avatar,
html[data-appearance="dark"] .row-avatar { filter: brightness(0.95); }

/* ---------- Doubles comptes ---------- */
.dup-banner {
  background: rgba(237, 66, 69, 0.12);
  border-left: 4px solid #ED4245;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
}

/* ---------- Bibliothèque de jeux & matchmaking ---------- */
.games-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.game-lib-cell {
  position: relative;
  background: var(--bg);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
}
.game-lib-cell img, .game-lib-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  background: rgba(0, 0, 0, 0.08);
}
.game-lib-name {
  font-weight: 600;
  font-size: 13px;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.game-lib-owners { font-size: 12px; opacity: 0.75; margin-top: 2px; }
.game-lib-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  line-height: 1;
}
.games-suggest .member-option img { border-radius: 4px; width: 32px; height: 42px; object-fit: cover; }
.mm-cover { width: 42px; height: 56px; object-fit: cover; border-radius: 6px; margin-right: 10px; }
.mm-desc { font-style: italic; opacity: 0.85; }
.mod-dup-list { margin-top: 24px; }

/* ---------- Rapports de modération (dossiers membres) ---------- */
.report-thread { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.report-msg {
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 14px;
}
.report-msg.from-web { border-left: 3px solid var(--accent, #3f9070); }
.report-msg p { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; }
.report-msg img {
  display: block;
  max-width: min(420px, 100%);
  border-radius: 8px;
  margin-top: 8px;
  cursor: zoom-in;
}
.report-msg a { display: inline-block; margin-top: 6px; }
.report-reply { align-items: stretch; margin-top: 16px; }
.report-reply textarea { flex: 1; min-width: 0; }

/* ---------- Écran de maintenance (503) ---------- */
.maintenance-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.maintenance-card {
  max-width: 440px;
  text-align: center;
}
.maintenance-card .invite-emoji { font-size: 54px; display: block; margin-bottom: 10px; }
.maintenance-card h1 { color: var(--heading); font-size: 24px; margin-bottom: 8px; }
.maintenance-card .btn { justify-content: center; margin-top: 14px; }

/* ---------- Cloche de notifications ---------- */
.notif-wrap { position: relative; }
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e2635c;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 5px;
  pointer-events: none;
}
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(340px, 86vw);
  max-height: 380px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(33, 69, 58, 0.18);
  padding: 8px;
  z-index: 40;
}
.notif-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.notif-item:hover { background: var(--accent-soft); }
.notif-item .meta { font-size: 11.5px; color: var(--text-muted); }

/* ---------- Succès du profil ---------- */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.ach-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--bg);
  opacity: 0.55;
}
.ach-chip.unlocked {
  opacity: 1;
  border-color: rgba(240, 178, 50, 0.55);
  background: rgba(240, 178, 50, 0.08);
}
.ach-emoji { font-size: 26px; }
.ach-chip .who { display: block; font-size: 14px; }
.ach-chip .meta { display: block; font-size: 12px; }

/* ---------- Confettis de victoire ---------- */
.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
}
.confetti {
  position: absolute;
  top: -14px;
  width: 10px;
  height: 14px;
  border-radius: 3px;
  animation: confetti-fall 2.6s ease-in forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(105vh) rotate(540deg); opacity: 0.6; }
}

/* ---------- Graphique d'activité admin ---------- */
.chart-scroll { overflow-x: auto; margin-top: 10px; }
.chart-scroll svg { display: block; min-width: 480px; }

/* ---------- Bracket de tournoi ---------- */
.bracket-scroll { overflow-x: auto; padding-bottom: 8px; }
.bracket {
  display: flex;
  gap: 18px;
  align-items: stretch;
  min-width: min-content;
}
.bracket-round {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: space-around;
  min-width: 170px;
}
.bracket-match {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bracket-player {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.bracket-player.winner { color: var(--heading); font-weight: 800; }
.bracket-match .btn-small { margin-top: 4px; align-self: flex-start; }

/* ---------- Corrections responsive mobiles ----------
   Chrome/Samsung Browser : on interdit tout débordement horizontal de la
   page (les contenus larges défilent DANS leur conteneur, jamais la page). */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; }
.who, .meta, .gevent-desc, .tk-msg-body, .stat-label { overflow-wrap: anywhere; }
.form-grid > *, .mini-grid > *, .two-columns > *, .home-grid > * { min-width: 0; }
.form-grid .input, .inline-form .input { min-width: 0; }

@media (max-width: 760px) {
  /* Tables larges : défilement interne plutôt que débordement de page */
  .table { display: block; overflow-x: auto; }
  .inline-form .input { flex: 1 1 140px; }
  /* Panneau de notifications : pleine largeur sous la topbar (l'ancrage à
     droite de la cloche déborde de l'écran sur mobile) */
  .notif-panel {
    position: fixed;
    top: 70px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: 60vh;
  }
}

/* 🔢 Sudoku : 9×9, carrés 3×3 marqués, indices figés, conflits soulignés */
.game-board.sudoku {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  width: min(100%, 420px);
  gap: 0;
  padding: 4px;
  border-radius: 12px;
}
.sud-cell {
  aspect-ratio: 1;
  font-size: clamp(14px, 3.4vw, 20px);
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--card);
  color: var(--accent-dark);
  padding: 0;
}
.sud-cell:disabled { cursor: default; opacity: 1; }
.sud-given { background: var(--accent-soft); color: var(--heading); }
.sud-conflict { color: #d3543e; text-decoration: underline wavy #d3543e 1.5px; }
.sud-selected { outline: 3px solid var(--accent); outline-offset: -3px; z-index: 1; }
.sud-bl { border-left-width: 3px; border-left-color: var(--accent-dark); }
.sud-bt { border-top-width: 3px; border-top-color: var(--accent-dark); }
.sud-br { border-right-width: 3px; border-right-color: var(--accent-dark); }
.sud-bb { border-bottom-width: 3px; border-bottom-color: var(--accent-dark); }
.sud-pad { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.sud-key { min-width: 38px; font-weight: 800; font-size: 1rem; }
.sud-other-bar { margin-top: 4px; opacity: 0.65; }

/* Dames : damier 10×10 (cases foncées jouables) */
.game-board.dames {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  width: min(100%, 460px);
  gap: 0;
  padding: 6px;
  border-radius: 12px;
  background: #7a5236;
}
.game-board.dames .game-cell {
  border: none;
  border-radius: 0;
  font-size: clamp(11px, 3.4vw, 21px);
  aspect-ratio: 1;
}
.game-board.dames .game-cell:disabled { opacity: 1; cursor: default; }
.game-cell.dm-light { background: #f3e2c7; }
.game-cell.dm-dark { background: #b98960; }
/* Sélection en OR, pas en accent : le vert d'accent sur le brun des cases
   (~1,25:1) rendait la pièce choisie quasi impossible à repérer. */
.game-cell.dm-sel { outline: 3px solid #ffd76a; outline-offset: -3px; }
.game-cell.dm-dest {
  background: #8fbf8f !important;
  box-shadow: inset 0 0 0 2px #3f9070;
}
.game-cell.dm-last { box-shadow: inset 0 0 0 2px rgba(240, 178, 50, 0.85); }
/* Le survol générique (accent-soft) ÉCRASAIT le dégradé radial des dames
   promues : la pastille de camp disparaissait sous la souris. Sur un damier,
   le survol garde le fond et ne fait que grossir. */
.game-board.dames .game-cell:not(:disabled):hover { background: inherit; transform: scale(1.06); }
.game-board.dames .game-cell.dk-host:not(:disabled):hover,
.game-board.dames .game-cell.dk-guest:not(:disabled):hover { background: inherit; }
/* Et seules les cases ACTIONNABLES invitent au clic : un curseur main sur
   les 100 cases promettait des actions qui n'existaient pas. */
.game-board.dames .game-cell { cursor: default; }
.game-board.dames .game-cell.dm-movable:not(:disabled),
.game-board.dames .game-cell.dm-dest:not(:disabled),
.game-board.dames .game-cell.dm-sel:not(:disabled) { cursor: pointer; }
/* Dames (pions promus) : pastille colorée sous la couronne pour le camp */
.game-cell.dk-host { background: radial-gradient(circle, rgba(214, 69, 69, 0.75) 0 42%, #b98960 46%); }
.game-cell.dk-guest { background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 42%, #b98960 46%); }

/* Pierre-feuille-ciseaux : score, boutons de choix, historique des manches */
.pfc-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 22px;
  font-weight: 800;
  color: var(--heading);
  margin: 10px 0 4px;
}
.pfc-vs { color: var(--text-muted); }
.pfc-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 14px 0;
}
.pfc-btn {
  width: 76px;
  height: 76px;
  font-size: 38px;
  border-radius: 18px;
  border: 2px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.pfc-btn:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--accent); }
.pfc-btn:disabled { opacity: 0.45; cursor: default; }
.pfc-btn.picked {
  opacity: 1;
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}
.pfc-history {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 460px;
  margin: 0 auto;
}
.pfc-round-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}
.pfc-round-row.last { border-color: var(--accent); }

/* Replay bataille navale : les deux flottes côte à côte */
.navale-replay-boards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 10px;
}
.navale-replay-boards .game-board.navale { margin: 6px auto 0; }

/* Page Chasse : mise en page en deux colonnes */
.hunt-columns { margin-top: 20px; align-items: start; }
.hunt-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* 🎖️ Badges : mur de collection (profil) et vignettes (admin) */
.badge-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.badge-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 2px solid var(--border, #e6efe8);
  border-radius: 12px;
  background: var(--card, #fff);
  min-width: 0;
}
.badge-chip-locked { opacity: 0.55; filter: grayscale(0.85); border-style: dashed; }
.badge-chip-img,
.badge-chip-emoji {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: cover;
}
.badge-chip-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: rgba(63, 144, 112, 0.12);
}
.badge-chip-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.badge-chip-text strong { font-size: 0.95rem; }
.badge-chip-text .meta { font-size: 0.78rem; }
.badge-chip-date { opacity: 0.8; }
.badge-thumb {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 10px;
}
.badge-thumb-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(63, 144, 112, 0.12);
}
input.badge-color { padding: 2px; height: 38px; cursor: pointer; }
/* var(--card)/var(--border) suivent déjà le mode sombre et les thèmes de chasse */
html[data-appearance="dark"] .badge-chip-emoji,
html[data-appearance="dark"] .badge-thumb-emoji { background: rgba(124, 200, 106, 0.14); }

/* Liste admin des badges : vignette + texte solidaires, actions à droite */
.badge-admin-row { align-items: flex-start; }
.badge-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 240px;
}
.badge-row-main .badge-thumb { margin-right: 0; }
.badge-row-text { display: flex; flex-direction: column; min-width: 0; }

/* Panneau des porteurs d'un badge (constructeur admin) */
.badge-holders-panel {
  margin: 4px 0 10px 46px;
  padding: 4px 12px;
  border-left: 3px solid var(--accent-soft, #e2f3ea);
  background: color-mix(in srgb, var(--card) 60%, var(--bg) 40%);
  border-radius: 0 10px 10px 0;
}
.astre-perms { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 10px 0 4px; }

/* Pastille de repli quand un avatar Discord ne charge plus */
.avatar-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  width: 34px;
  height: 34px;
  font-size: 15px;
  flex-shrink: 0;
}
.avatar-initial.profile-avatar { width: 84px; height: 84px; font-size: 34px; }
.avatar-initial.row-avatar { border-radius: 50%; }

/* 🖼️ Fonds de carte de profil */
.bg-wall { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.bg-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 2px solid var(--border, #e6efe8);
  border-radius: 12px;
  background: var(--card, #fff);
  cursor: pointer;
  width: 132px;
}
.bg-chip img, .bg-chip-default {
  width: 116px;
  height: 62px;
  object-fit: cover;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: var(--accent-soft, #e2f3ea);
}
.bg-chip-active { border-color: var(--accent, #3f9070); box-shadow: 0 0 0 2px var(--accent-soft, #e2f3ea); }
.bg-thumb { width: 64px; height: 36px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.theme-grid input[type="color"] { width: 100%; }
.avatar-initial.hero-avatar { width: 180px; height: 180px; font-size: 64px; border-radius: 50%; }
.avatar-initial.user-avatar { width: 34px; height: 34px; }

/* 🎛️ Vitrine de badges : outils de tri/visibilité sur les badges possédés */
.badge-chip { position: relative; flex-wrap: wrap; }
.badge-chip-tools { display: flex; gap: 4px; width: 100%; justify-content: flex-end; }
.badge-chip-tools .btn-small { padding: 2px 7px; font-size: 12px; }
.badge-chip-hidden { opacity: 0.6; border-style: dashed; }
.tv-subtitle { margin: 18px 0 6px; font-size: 1.02rem; }

/* ---------- Accueil : visite guidée + première configuration ---------- */
.ob-tour { position: fixed; inset: 0; z-index: 300; }
.ob-hole {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(20, 12, 24, 0.62);
  border: 2px solid var(--accent);
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
  pointer-events: none;
}
.ob-tip {
  position: fixed;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  transition: top 0.25s ease, left 0.25s ease;
}
.ob-tip-title { font-weight: 700; color: var(--heading); margin-bottom: 6px; }
.ob-tip-desc { font-size: 0.92rem; color: var(--text-muted); line-height: 1.45; }
.ob-tip-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ob-progress { font-size: 0.82rem; color: var(--text-muted); }
.ob-tip-btns { display: flex; gap: 8px; }

.ob-wizard {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20, 12, 24, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ob-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: min(460px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.ob-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 0;
}
.ob-card-head h3 { margin: 0; color: var(--heading); }
.ob-dots { display: flex; gap: 6px; padding: 10px 18px 0; }
.ob-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--progress-track);
}
.ob-dot.active { background: var(--accent); }
.ob-card-body { padding: 8px 18px 4px; }
.ob-step-title { margin: 8px 0 4px; color: var(--heading); }
.ob-step-desc { margin: 0 0 12px; font-size: 0.92rem; color: var(--text-muted); line-height: 1.45; }
.ob-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 18px 16px;
}
.ob-foot-btns { display: flex; gap: 8px; margin-left: auto; }
.ob-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.ob-lang-btn {
  padding: 12px; border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--text);
  cursor: pointer; font-size: 0.95rem;
}
.ob-lang-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; }
.ob-games-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ob-bday-line { display: flex; gap: 8px; flex-wrap: wrap; }
.ob-bday-line .input { flex: 1; min-width: 90px; }
.ob-wizard .pref-row { border: none; padding: 8px 0; }

/* Les retours (Enregistré, erreurs) doivent rester lisibles par-dessus
   la visite guidée et l'assistant (z-index 300) */
.toast { z-index: 400; }

/* ---------- 🌱 Clicker ---------- */
/* « minmax(0, 1fr) » et non « 1fr » : une piste « 1fr » prend pour minimum la
   largeur MINIMALE DE CONTENU de ce qu'elle héberge. La liste des améliorations
   (prix + ×10 + Max sur une ligne) réclamait 458 px, la grille dépassait donc
   l'écran et tout le côté droit était coupé sur mobile — visible surtout dans
   le navigateur intégré de Discord, où la fenêtre est encore plus étroite. */
.ck-layout {
  display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 18px; align-items: start;
}
@media (max-width: 900px) { .ck-layout { grid-template-columns: minmax(0, 1fr); } }
/* Même raison : un enfant de grille/flex a « min-width: auto » par défaut */
.ck-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ck-col > * { min-width: 0; }
.ck-click-card { text-align: center; }
.ck-counter {
  font-size: 2.6rem; font-weight: 800; color: var(--heading); line-height: 1.1;
  overflow-wrap: anywhere;
}
.ck-counter-unit { color: var(--text-muted); margin-bottom: 10px; }
.ck-btn-wrap { position: relative; display: flex; justify-content: center; padding: 18px 0; }
.ck-btn {
  width: 150px; height: 150px; border-radius: 50%;
  font-size: 4rem; cursor: pointer;
  border: 4px solid var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow);
  transition: transform 0.08s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ck-btn:active { transform: scale(0.93); }
.ck-btn.ck-pop { animation: ck-pop 0.18s ease; }
@keyframes ck-pop { 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.ck-floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ck-float {
  position: absolute; bottom: 45%;
  font-weight: 700; color: var(--accent-dark);
  animation: ck-float 0.7s ease-out forwards;
}
@keyframes ck-float { to { transform: translateY(-46px); opacity: 0; } }
.ck-rates { color: var(--text); font-size: 0.95rem; }
.ck-totals { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; }
.ck-group-title { margin: 14px 0 6px; color: var(--heading); }
.ck-up-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px;
  /* Sans « wrap », les trois boutons d'achat imposaient leur largeur à toute
     la colonne et poussaient le texte hors de l'écran */
  flex-wrap: wrap;
}
.ck-up-info { min-width: 0; flex: 1 1 120px; }
.ck-up-name, .ck-up-effect { overflow-wrap: anywhere; }
.ck-up-name { font-weight: 600; }
.ck-up-owned {
  margin-left: 8px; font-size: 0.8rem; font-weight: 700;
  background: var(--accent-soft); color: var(--accent-dark);
  border-radius: 10px; padding: 1px 8px;
}
.ck-up-effect { font-size: 0.85rem; color: var(--text-muted); }
.ck-up-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
/* Les trois boutons d'achat (×1, ×10, Max) portent .ck-buy : un bouton
   désactivé doit SE VOIR, sans effet de survol trompeur */
.ck-buy:disabled { opacity: 0.55; cursor: not-allowed; }
.ck-buy:disabled:hover { transform: none; filter: none; }
.ck-prestige-progress { font-size: 0.9rem; color: var(--text-muted); }
/* Barre de renaissance : même gabarit que les quêtes, avec la transition du
   clicker (la valeur bouge en continu, un saut brut serait désagréable) */
.ck-top-more-wrap { text-align: center; margin-top: 8px; }
/* Résultats de la recherche « ouvrir une conversation » (messagerie admin) */
.dm-lookup { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.dm-lookup-hit {
  border: 1px solid var(--border); background: var(--card);
  /* color et font : un <button> n'hérite ni de l'un ni de l'autre — le texte
     ressortait en noir sur fond sombre, illisible */
  color: var(--text); font-family: inherit;
  border-radius: 10px; padding: 4px 10px; cursor: pointer; font-size: 0.9rem;
}
.dm-lookup-hit:hover { background: var(--accent-soft); }

/* ---------- 🧭 Administration : hub + navigation latérale ---------- */
.admin-search { max-width: 420px; margin-bottom: 16px; }

/* 🔍 Résultats « réglages » : au-dessus des tuiles de sections, parce qu'un
   nom de réglage est une intention plus précise qu'un nom de section */
.admin-search-results {
  max-width: 420px;
  margin: -8px 0 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}
.admin-search-empty { margin: 0; padding: 12px 14px; color: var(--muted); font-size: 14px; }
.admin-search-hit {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-search-hit:last-child { border-bottom: 0; }
.admin-search-hit:hover, .admin-search-hit:focus-visible { background: var(--accent-soft); }
.admin-search-hit-label { flex: 1; font-weight: 600; }
.admin-search-hit-where { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Le réglage atteint clignote une fois : sans ça, on arrive au milieu d'une
   longue page sans savoir lequel on cherchait */
.admin-flash { animation: adminFlash 2.2s ease-out; border-radius: 10px; }
@keyframes adminFlash {
  0%, 55% { box-shadow: 0 0 0 3px var(--accent); background: var(--accent-soft); }
  100% { box-shadow: 0 0 0 3px transparent; background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-flash { animation-duration: 0.01ms; box-shadow: 0 0 0 3px var(--accent); }
}
.admin-hub {
  /* Grille étirée : la maçonnerie CSS (columns) entassait les 4 groupes dans
     les 2 premières colonnes sur grand écran, laissant la moitié droite vide
     (l'équilibrage par hauteur ignore break-inside). Ici chaque groupe prend
     UNE colonne pleine, alignée en haut, hauteur indépendante. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  align-items: start;
}
.admin-hub .admin-group {
  margin-bottom: 0;
  width: auto;
  display: block;
}
.admin-group-title { margin: 0 0 10px; color: var(--heading); }
.admin-tiles { display: flex; flex-direction: column; gap: 8px; }
.admin-tile {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--text);
  font-family: inherit; font-size: 0.95rem;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
}
.admin-tile:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateX(2px);
}
.admin-tile-icon { font-size: 1.35rem; flex-shrink: 0; }
.admin-tile-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.admin-tile-text strong { color: var(--heading); }
.admin-tile-desc { font-size: 0.82rem; color: var(--text-muted); }
/* Chaque groupe garde SA couleur, partout : bord et titre de la carte du
   hub, en-tête du latéral — les catégories se repèrent d'un coup d'œil */
.admin-group-progression { border-top: 3px solid #6aa9e0; }
.admin-group-activites { border-top: 3px solid #7cc86a; }
.admin-group-communaute { border-top: 3px solid #e0a06a; }
.admin-group-systeme { border-top: 3px solid #b08de0; }
.admin-group-progression .admin-group-title { color: #6aa9e0; }
.admin-group-activites .admin-group-title { color: #7cc86a; }
.admin-group-communaute .admin-group-title { color: #e0a06a; }
.admin-group-systeme .admin-group-title { color: #b08de0; }
.admin-sidenav-group.grp-progression { color: #6aa9e0; border-left: 3px solid #6aa9e0; }
.admin-sidenav-group.grp-activites { color: #7cc86a; border-left: 3px solid #7cc86a; }
.admin-sidenav-group.grp-communaute { color: #e0a06a; border-left: 3px solid #e0a06a; }
.admin-sidenav-group.grp-systeme { color: #b08de0; border-left: 3px solid #b08de0; }
/* Le sélecteur compact n'existe qu'en mobile */
.admin-picker { display: none; }

.admin-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
/* Filet : une carte à rangées-tableaux trop larges défile en interne, jamais
   hors de la page. Ciblé par :has pour ne pas clipper les menus de
   suggestions positionnés (recherche de membre) des autres cartes. */
.admin-content .card:has(.ck-adm-row) { overflow-x: auto; }
/* Sous-onglets d'une section (puces) : sous la barre latérale, au-dessus des cartes */
.admin-subtabs { margin-bottom: 14px; flex-wrap: wrap; }
.admin-sidenav {
  position: sticky; top: 82px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--card);
  max-height: calc(100vh - 100px); overflow-y: auto;
}
.admin-sidenav a {
  display: block; padding: 6px 10px; border-radius: 9px;
  color: var(--text); cursor: pointer; font-size: 0.92rem;
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-sidenav a:hover { background: var(--accent-soft); }
.admin-sidenav a.active { background: var(--accent); color: #fff; font-weight: 700; }
.admin-sidenav .admin-back {
  font-weight: 700; color: var(--accent-dark); margin-bottom: 6px;
}
.admin-sidenav-group {
  margin: 10px 0 2px; padding: 0 8px;
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.admin-sidenav-group:first-of-type { margin-top: 4px; }
@media (max-width: 900px) {
  /* Mobile : le latéral devient UNE rangée « ← retour + sélecteur » — la
     bande horizontale défilante écrasait les libellés jusqu'aux seuls emojis */
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .admin-sidenav {
    position: static; max-height: none;
    flex-direction: row; align-items: center; gap: 10px;
    padding: 8px 10px;
  }
  .admin-sidenav a[data-asection],
  .admin-sidenav .admin-sidenav-group { display: none; }
  .admin-sidenav .admin-back {
    margin-bottom: 0; flex-shrink: 0; white-space: nowrap;
  }
  .admin-picker { display: block; flex: 1 1 auto; min-width: 0; }
}

/* 🎁 Onglet « Avantages » du profil : deux cartes à identité forte */
.perks-card { margin-bottom: 14px; }
.perks-tag {
  background:
    linear-gradient(135deg, color-mix(in srgb, #f0b232 16%, transparent), transparent 60%),
    var(--card);
  border-color: color-mix(in srgb, #f0b232 45%, var(--border)) !important;
}
/* Le texte suivait --accent-dark, jamais redéfini dans le bloc sombre :
   vert foncé sur vert foncé, 2,09:1. Jeton dédié, lisible partout. */
.perks-on { background: color-mix(in srgb, #3f9070 22%, transparent); color: var(--on-soft); font-weight: 800; }

/* 🧪 Bandeau de simulation (admins) : impossible à rater, jamais discret */
.sim-banner {
  position: sticky; top: 0; z-index: 350;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 14px;
  background: repeating-linear-gradient(45deg, #b45309, #b45309 14px, #92400e 14px, #92400e 28px);
  color: #fff; font-weight: 700; font-size: 0.92rem;
  flex-wrap: wrap; text-align: center;
}
.sim-banner .btn-small { background: #fff; color: #92400e; border-color: #fff; }

/* Actions rapides de la fiche membre (modération) */
.mod-quick-actions { flex-wrap: wrap; }
.ck-prestige-bar { margin: 2px 0 12px; }
.ck-prestige-bar .quest-bar-fill { transition: width 0.4s ease; }
/* Palier atteint : la barre se distingue pour que le bouton « Renaître »
   ne soit pas la seule indication */
.ck-prestige-bar .quest-bar-fill.ready { background: var(--accent); }
.ck-adm-row {
  display: grid; gap: 6px; align-items: center;
  grid-template-columns: minmax(120px, 2fr) 52px 90px 62px 90px 70px 80px 70px 56px 24px auto;
}
.ck-adm-row .input { padding: 6px 8px; }
.ck-adm-actions { display: flex; gap: 4px; }
@media (max-width: 1400px) { .ck-adm-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 🌍 Clicker serveur + carte « continuer » */
.ck-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ck-server-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ck-server-head h3 { margin: 0; }
.ck-mode-badge {
  font-size: 0.78rem; font-weight: 700; padding: 2px 10px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-dark);
}
.ck-mode-evenement { background: var(--peach); color: #7a3b2e; }
.ck-server-total { font-size: 1.9rem; font-weight: 800; color: var(--heading); }
.ck-server-unit { font-size: 1rem; font-weight: 400; color: var(--text-muted); }
.ck-server-bar {
  height: 12px; border-radius: 8px; background: var(--progress-track);
  overflow: hidden; margin: 8px 0 4px;
}
.ck-server-bar-fill {
  height: 100%; border-radius: 8px; background: var(--progress);
  transition: width 0.4s ease;
}
.ck-server-goal, .ck-server-end, .ck-server-meta { font-size: 0.88rem; color: var(--text-muted); margin: 4px 0; }
.ck-continue-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ck-continue-info h2 { margin: 0 0 4px; }
.ck-continue-info .section-note { margin: 0; }
.ck-continue-btn { flex-shrink: 0; }

/* ---------- Squelettes de chargement (remplacent les « Chargement… ») ---------- */
.skeleton { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sk-bar {
  /* Variables dédiées : le reflet blanc translucide reste visible quel que
     soit le thème saisonnier (halloween unifie track et accent-soft) */
  --sk-base: var(--progress-track);
  --sk-glow: rgba(255, 255, 255, 0.5);
  height: 16px; border-radius: 8px; width: 100%;
  background: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-glow) 50%, var(--sk-base) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
html[data-appearance="dark"] .sk-bar { --sk-glow: rgba(255, 255, 255, 0.12); }
.sk-w40 { width: 40%; }
.sk-w75 { width: 75%; }
@keyframes sk-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-bar { animation: none; } }

/* ---------- Aération : listes moins « bloc dans un bloc », notes respirantes ---------- */
.roomy-list { gap: 6px; }
.roomy-list .detail-row {
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--accent-soft);
  padding: 10px 14px;
}
.roomy-list .detail-row:last-child { border-bottom-color: transparent; }
/* Les bordures/retraits qui portent du sens gardent le dessus */
.roomy-list .detail-row.my-turn { border-color: var(--accent); }
.arch-col .detail-row { padding: 8px 10px; }
/* Mode sombre : accent-soft translucide écrase le contraste des textes
   discrets — on garde le fond de base, plus lisible */
html[data-appearance="dark"] .roomy-list .detail-row { background: var(--bg); }
.section-note { line-height: 1.55; margin: -4px 0 16px; }
.mini-grid { row-gap: 16px; }
.pref-desc { line-height: 1.5; }

/* Rangées du CRUD des hubs vocaux (7 champs, pas la grille du clicker) */
.ck-adm-row.tv-hub-row {
  grid-template-columns: minmax(100px, 1.3fr) minmax(110px, 1.2fr) minmax(100px, 1.1fr) 88px 118px 118px 24px auto;
}
@media (max-width: 1400px) { .ck-adm-row.tv-hub-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Corrections mobile : barre du haut et sous-onglets ---------- */

/* Les sous-onglets (jusqu'à 15 en administration) passent à la ligne : un
   rayon « pilule » de 999px rogne alors le texte des première et dernière
   lignes. Un rayon modéré suit la forme réelle du bloc. */
.subnav { border-radius: 20px; }

@media (max-width: 760px) {
  .subnav { width: 100%; border-radius: 16px; }
  .subnav a { font-size: 13px; padding: 7px 11px; }
}

/* Petits écrans : les contrôles du haut (thème, cloche, langues, réglages,
   profil, déconnexion) ne tiennent plus sur la ligne de la marque — ils
   prennent leur propre rangée et peuvent passer à la ligne entre eux, au
   lieu de pousser la déconnexion hors de l'écran. */
@media (max-width: 560px) {
  .topbar-user {
    order: 2;
    flex: 1 1 100%;
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }
  .nav-wrap { order: 3; }

  /* Déconnexion en icône seule : le libellé coûtait ~95px de large */
  .topbar .btn-ghost .logout-label { display: none; }
  .topbar .btn-ghost { padding: 8px 12px; }

  /* Sélecteur de langues plus compact (4 boutons) */
  .topbar-user .lang-switch { padding: 2px; }
  /* Écran étroit : le drapeau suffit à reconnaître la langue, le nom déborde */
  .topbar-user .lang-switch select.lang-select { padding: 5px 6px; font-size: 11px; max-width: 92px; }

  .subnav a { font-size: 12.5px; padding: 6px 10px; }
}

/* ---------- ✨ Thème étoilé des Astres (boost, rôle ou passe) ----------
   Les étoiles sont peintes dans le FOND du body (pas en surcouche) : elles
   restent donc toujours derrière le contenu, sans z-index ni empilement —
   une surcouche passait au-dessus de la rangée de stats qui remonte sur le
   héros. Les teintes viennent des variables du thème actif : le rendu suit
   automatiquement les thèmes saisonniers de la chasse. */
body[data-astre="1"] {
  --astre-gold: #f5c451;
  background-image:
    radial-gradient(2.4px 2.4px at 12% 18%, var(--astre-gold) 45%, transparent 55%),
    radial-gradient(1.8px 1.8px at 78% 12%, var(--accent) 45%, transparent 55%),
    radial-gradient(2.6px 2.6px at 33% 72%, var(--astre-gold) 45%, transparent 55%),
    radial-gradient(1.7px 1.7px at 62% 44%, var(--accent-dark) 45%, transparent 55%),
    radial-gradient(2.2px 2.2px at 88% 66%, var(--astre-gold) 45%, transparent 55%),
    radial-gradient(1.8px 1.8px at 22% 92%, var(--accent) 45%, transparent 55%),
    radial-gradient(2px 2px at 52% 8%, var(--astre-gold) 45%, transparent 55%),
    radial-gradient(1.7px 1.7px at 95% 34%, var(--accent-dark) 45%, transparent 55%),
    radial-gradient(2.2px 2.2px at 8% 55%, var(--astre-gold) 45%, transparent 55%),
    radial-gradient(1.8px 1.8px at 70% 88%, var(--accent) 45%, transparent 55%),
    radial-gradient(2px 2px at 44% 28%, var(--astre-gold) 45%, transparent 55%),
    radial-gradient(1.7px 1.7px at 84% 84%, var(--accent) 45%, transparent 55%);
  background-size: 260px 260px;
  background-attachment: fixed;
  animation: astre-drift 90s linear infinite;
}
@keyframes astre-drift { to { background-position: 260px 260px; } }
@media (prefers-reduced-motion: reduce) {
  body[data-astre="1"] { animation: none; }
}

/* Barre du haut dorée : le signe le plus visible du statut Astre */
body[data-astre="1"] .topbar {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg,
    transparent, var(--astre-gold), color-mix(in srgb, var(--astre-gold) 45%, transparent), var(--astre-gold), transparent) 1;
  box-shadow: 0 2px 18px color-mix(in srgb, var(--astre-gold) 22%, transparent);
}
body[data-astre="1"] .brand-logo {
  color: var(--astre-gold);
  text-shadow: 0 0 10px color-mix(in srgb, var(--astre-gold) 55%, transparent);
}
body[data-astre="1"] .brand::after {
  content: "✦";
  margin-left: 2px;
  font-size: 13px;
  color: var(--astre-gold);
  animation: astre-sparkle 2.6s ease-in-out infinite;
}
@keyframes astre-sparkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body[data-astre="1"] .brand::after { animation: none; opacity: 0.8; }
}

/* Cartes légèrement liserées d'or, sans casser les thèmes saisonniers */
body[data-astre="1"] .card {
  border-color: color-mix(in srgb, var(--astre-gold) 28%, var(--border));
}

/* Carte d'abonnement : dégradé doré doux par-dessus le thème actif */
.astre-sub-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, #f5c451 16%, transparent), transparent 60%),
    var(--card);
  border-color: color-mix(in srgb, #f5c451 45%, var(--border)) !important;
}
.astre-sub-card h2 { margin-bottom: 4px; }
.sub-countdown { font-weight: 700; color: var(--heading); margin: 6px 0; }

/* ---------- 🎮 Catégories de l'espace jeux ---------- */
.games-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.game-tile { display: flex; flex-direction: column; gap: 6px; }
.game-tile-icon { font-size: 30px; line-height: 1; }
.game-tile h3 { margin: 0; color: var(--heading); }
.game-tile-lines { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.game-tile-line { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.game-tile .btn-small { align-self: flex-start; margin-top: 4px; }
.games-section[hidden] { display: none; }

/* ---------- Page Paramètres ----------
   La carte suivait un max-width de 680px hérité, trop étroit dès qu'une ligne
   porte plusieurs contrôles (l'anniversaire écrasait ses sélecteurs). */
.settings-card { max-width: 900px; }

/* Les contrôles d'une préférence ne descendent jamais sous une taille lisible */
.pref-row { gap: 16px; flex-wrap: wrap; }
.pref-row > div:first-child { flex: 1 1 260px; min-width: 0; }
.pref-row .inline-form { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.pref-row .inline-form select.input { min-width: 84px; }
.pref-row .inline-form select.input + select.input { min-width: 128px; }
.pref-row .inline-form input.input { min-width: 120px; max-width: 150px; }

@media (max-width: 720px) {
  .pref-row > div:first-child { flex-basis: 100%; }
  .pref-row .inline-form { justify-content: flex-start; width: 100%; }
}

/* ---------- ⏸️ Écran de pause (redémarrage du bot) ---------- */
/* Au-dessus de tout : visite guidée/assistant (300) et toasts (400) compris */
.restart-screen { z-index: 500; }
.restart-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.restart-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  animation: restart-pulse 1.2s ease-in-out infinite;
}
.restart-dots span:nth-child(2) { animation-delay: 0.2s; }
.restart-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes restart-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .restart-dots span { animation: none; opacity: 0.7; } }

/* ---------- 🌍 Podium repliable de l'événement Clicker ---------- */
.ck-srv-toggle {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--heading);
  padding: 8px 4px 4px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.ck-srv-toggle:hover { color: var(--accent); }
.ck-srv-top[hidden] { display: none; }

/* ---------- 🌱 Clicker : onglets de classement, bouton Max, note de champ ---------- */
.ck-top-tabs { margin-bottom: 12px; width: 100%; }
.ck-top-tabs a { flex: 1; text-align: center; }
.ck-buy-max { font-weight: 800; }
.adm-field-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Un seul onglet de classement : la barre est masquée, pas vide */
.ck-top-tabs:empty { display: none; }

/* ---------- 🔴 Graines rouges & ✨ bloc Astre du Clicker ---------- */
.ck-red-line {
  margin-top: 2px;
  font-weight: 800;
  font-size: 15px;
  color: #d9534f;
}
.ck-red-line[hidden] { display: none; }

.ck-up-red { border-left: 3px solid #d9534f; padding-left: 8px; }
.ck-up-locked { opacity: 0.6; }
.ck-up-lock { font-size: 12px; color: #d9534f; font-weight: 700; margin-top: 2px; }

.ck-auto-pick { display: flex; align-items: center; margin-right: 8px; }
.ck-auto-pick input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); }

.ck-astre-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, #f5c451 14%, transparent), transparent 60%),
    var(--card);
  border-color: color-mix(in srgb, #f5c451 45%, var(--border));
}
.ck-astre-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
}
.ck-astre-toggle input { margin-top: 3px; width: 17px; height: 17px; cursor: pointer; accent-color: #f5c451; }
.ck-astre-toggle span { display: flex; flex-direction: column; gap: 2px; }
.ck-astre-toggle .section-note { margin: 0; }
.ck-astre-picks { margin-top: 6px; font-weight: 700; color: var(--heading); }

/* ---------- 🟣 Carte « Streameur Twitch » ---------- */
.streamer-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, #9146ff 18%, transparent), transparent 62%),
    var(--card);
  border-color: color-mix(in srgb, #9146ff 45%, var(--border));
}
.streamer-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.streamer-head h2 { margin: 0; }
.badge-live {
  background: color-mix(in srgb, #9146ff 22%, transparent);
  color: #9146ff; font-weight: 800;
}
.badge-wait { background: var(--accent-soft); color: var(--text-muted); font-weight: 700; }
.streamer-input { min-width: 240px; flex: 1 1 240px; }
.btn-purple { background: #9146ff; color: #fff; }
.btn-purple:hover { background: #7a2ff2; }

.streamer-checks { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 6px; }
.streamer-check { display: flex; align-items: center; gap: 8px; font-size: 0.93rem; color: var(--text-muted); }
.streamer-check.done { color: var(--heading); font-weight: 700; }
.streamer-check-mark { font-size: 15px; line-height: 1; }

/* Autoclic actif : le bouton pulse doucement pour qu'on le voie tourner */
.ck-btn-auto { animation: ck-auto-pulse 0.4s ease-in-out infinite alternate; }
@keyframes ck-auto-pulse { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .ck-btn-auto { animation: none; } }


/* 🎁 Catégories de quêtes bonus : un bloc autonome par catégorie */
.quests-bonus-group { margin-bottom: 26px; }
.quests-bonus-group .section-note { margin-top: -6px; margin-bottom: 12px; }

/* 👤 Profil en onglets */
.profile-section[hidden] { display: none; }
/* Les cartes du profil étaient collées les unes aux autres */
.profile-section > .card { margin-bottom: 18px; }
.profile-section > .card:last-child { margin-bottom: 0; }
#profile-subnav { margin-bottom: 18px; }
/* Condition non remplie : la croix rouge doit se voir sans ambiguïté */
.streamer-check.missing { color: #d9534f; }
.streamer-check.done { color: var(--heading); font-weight: 700; }

/* 🎁 Ligne de catégorie bonus en administration */
.ck-adm-row.qbc-row {
  grid-template-columns: minmax(120px, 1.6fr) 56px minmax(150px, 1.2fr) 24px minmax(120px, 1fr) auto;
}
.qbc-state { font-size: 12px; color: var(--text-muted); }
@media (max-width: 1400px) { .ck-adm-row.qbc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 🧱 Créateur d'embeds Components V2 ---------- */
.emb-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  border: 1px solid var(--border); vertical-align: middle;
}
.emb-add-bar { flex-wrap: wrap; margin: 12px 0; }
.emb-blocks { display: flex; flex-direction: column; gap: 10px; }
.emb-block {
  border: 1px solid var(--border); border-radius: 12px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; background: var(--bg);
}
.emb-block-head { display: flex; align-items: center; gap: 6px; }
.emb-block-head strong { flex: 1; color: var(--heading); }
.emb-block textarea.input { resize: vertical; font-family: inherit; }
.emb-btn-row { display: flex; gap: 6px; align-items: center; }
.emb-btn-row .input:first-child { flex: 0 0 34%; }
.emb-btn-row .input { flex: 1; }
.emb-inline { display: flex; align-items: center; gap: 8px; }

/* Aperçu : la barre de couleur reproduit l'accent du conteneur Discord */
.emb-preview {
  border-left: 4px solid var(--accent);
  background: var(--card);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.emb-prev-text { position: relative; padding-right: 68px; line-height: 1.45; }
.emb-prev-thumb {
  position: absolute; top: 0; right: 0; width: 58px; height: 58px;
  object-fit: cover; border-radius: 8px;
}
.emb-prev-sep { border: none; border-top: 1px solid var(--border); margin: 2px 0; }
.emb-prev-sep.large { margin: 10px 0; }
.emb-prev-gallery { display: flex; flex-wrap: wrap; gap: 6px; }
.emb-prev-gallery img { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; }
.emb-prev-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.emb-prev-button {
  background: #5865f2; color: #fff; border-radius: 8px;
  padding: 6px 12px; font-size: 13px; font-weight: 700;
}

/* ---------- 🎯 Modération du matchmaking ---------- */
.lfg-session {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 12px; background: var(--bg);
}
.lfg-session-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lfg-session-head > div:first-child { flex: 1; display: flex; flex-direction: column; }

/* ---------- 💬 Messagerie privée ---------- */
.dm-layout { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .dm-layout { grid-template-columns: 1fr; } }
.dm-list { display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow-y: auto; }
.dm-conv {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
  background: var(--bg); cursor: pointer; font-family: inherit;
}
.dm-conv:hover { border-color: var(--accent); }
.dm-conv.active { border-color: var(--accent); background: var(--accent-soft); }
.dm-conv-name { font-weight: 700; color: var(--heading); }
.dm-conv-last, .dm-conv-date { font-size: 12px; color: var(--text-muted); }

.dm-thread { display: flex; flex-direction: column; gap: 10px; min-height: 320px; }
.dm-thread-head { display: flex; align-items: center; gap: 10px; }
.dm-thread-head strong { flex: 1; color: var(--heading); }
.dm-feed {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 420px; overflow-y: auto; padding: 4px;
}
.dm-msg { max-width: 82%; border-radius: 12px; padding: 8px 12px; }
.dm-recu { align-self: flex-start; background: var(--bg); border: 1px solid var(--border); }
.dm-envoye { align-self: flex-end; background: var(--accent-soft); }
.dm-msg-text { white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.dm-msg-meta { display: block; margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.dm-msg-file { display: block; font-size: 13px; }
.dm-reply { display: flex; gap: 8px; align-items: flex-end; }
.dm-reply textarea { flex: 1; resize: vertical; font-family: inherit; }

/* Plafond d'achat automatique, à côté de sa coche */
.ck-auto-pick input.ck-auto-cap {
  /* Plus spécifique que « .ck-auto-pick input » (prévue pour la case) */
  width: 52px; height: auto; padding: 3px 5px; font-size: 12px; text-align: center;
  cursor: text; accent-color: auto;
}
.ck-auto-cap[hidden] { display: none; }
.ck-auto-pick { gap: 4px; }

.check-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.adm-inline-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Cartes actualités & espace jeux (squelette des quêtes) ---------- */
.blog-card {
  position: relative;
  overflow: hidden;
}
/* Emoji « en fond du bloc » : grand filigrane discret, hors interaction */
/* 📌 Épingle en incrustation sur la rondelle du billet.
   Une troisième pastille dans la rangée du haut ne tenait pas dans la largeur
   d'une carte : le badge de date se cassait en deux lignes. L'épingle ne prend
   donc aucune place à elle — et l'emoji choisi par l'auteur est conservé.
   L'enveloppe existe parce que `.quest-icon` écrête son contenu. */
.quest-icon-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.blog-pin {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-size: 13px;
  line-height: 1;
  padding: 3px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* 🏷️ Étiquettes d'actualité : petites, discrètes, jamais au-dessus du titre */
.blog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.blog-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--on-soft, var(--heading));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
/* Sélecteur d'étiquettes de l'éditeur : les mêmes pastilles, cliquables */
.blog-tag-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-tag-pick {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.blog-tag-pick:hover { border-color: var(--accent); }
.blog-tag-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Sélection : fond ET bordure changent — la couleur seule ne suffit pas */
.blog-tag-pick.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Sur la page d'un article, la rangée est large : l'épingle s'y écrit. */
.badge-pinned {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.blog-card-bg {
  position: absolute;
  right: -12px;
  bottom: -18px;
  font-size: 96px;
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  /* Un billet ANCIEN à plusieurs emoji ne doit pas tapisser la carte */
  white-space: nowrap;
  overflow: hidden;
  max-width: 140px;
}
/* Image de bannière : pleine largeur, au ras du haut de la carte */
.blog-card-banner {
  margin: -22px -22px 0;
  width: calc(100% + 44px);
  max-width: none;
  height: 110px;
  object-fit: cover;
  display: block;
}
.blog-card-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.blog-card-content.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card .btn-small { align-self: flex-start; }
.blog-card .chip { align-self: flex-start; }

/* Cartes de l'espace jeux : cliquables, l'accent sur « à toi de jouer » */
.hg-card { cursor: pointer; transition: border-color 0.15s, transform 0.15s; }

/* Raccourci de remplissage de la ligne « Espace jeux ». Volontairement
   DISCRET mais pas fantomatique : ce sont de vraies destinations, pas des
   emplacements à venir — donc ni pointillés ni opacité réduite, seulement
   une teinte plus sobre que les cartes de contenu vivant. */
.hg-shortcut { background: var(--bg); }
.hg-shortcut .quest-icon, .hg-shortcut .hg-icon { opacity: 0.75; }
.hg-shortcut:hover { background: var(--card); }
.hg-card:hover, .hg-card:focus-visible {
  /* --accent suit les thèmes de chasse (halloween, été…) contrairement à un
     vert codé en dur */
  border-color: var(--accent, #3f9070);
  transform: translateY(-2px);
}
.hg-card.hg-my-turn { border-color: var(--accent, #3f9070); }
.hg-card .btn-small { align-self: flex-start; }
.hg-badge-event { animation: pulse-soft 2s infinite; }
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
/* La vitrine garde une grille contenue pour ne pas étirer les billets */
.blog-vitrine-grid { max-width: 980px; margin: 0 auto; }

/* Bandes de l'accueil (actualités, espace jeux) : même respiration que le
   bloc quêtes au-dessus d'elles */
.home-strip { margin-top: 6px; }
.home-strip .section-title { margin-top: 34px; }

/* ---------- Admin : pleine largeur sur grand écran ---------- */
/* Le conteneur commun (1180px) laissait le hub flotter au milieu d'un grand
   écran : l'administration mérite la place d'un vrai tableau de bord */
#page-admin .container { max-width: 1560px; }

/* ---------- Éditeur d'articles (barre BlogMD + aperçu) ---------- */
.md-toolbar { display: flex; gap: 6px; flex-wrap: wrap; }
.md-toolbar .btn-small { min-width: 34px; }
.md-preview {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--bg);
}

/* ---------- Contenu BlogMD (aperçu, article complet) ---------- */
.blog-md h3 { margin: 18px 0 8px; color: var(--heading); }
.blog-md h4 { margin: 14px 0 6px; color: var(--heading); }
.blog-md p { margin: 8px 0; overflow-wrap: anywhere; }
.blog-md ul { margin: 8px 0 8px 22px; }
.blog-md a { color: var(--accent, #3f9070); }
.blog-md-figure { margin: 14px 0; }
.blog-md-img {
  max-width: 100%;
  border-radius: 12px;
  display: block;
}
.blog-md-figure figcaption { font-size: 0.85rem; opacity: 0.7; margin-top: 6px; }

/* ---------- Article complet (onglet Actualités + page /article) ---------- */
.news-article {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 30px 30px;
  max-width: 860px;
  overflow: hidden;
}
.news-article-banner {
  margin: -26px -30px 18px;
  width: calc(100% + 60px);
  max-width: none;
  max-height: 280px;
  object-fit: cover;
  display: block;
}
.news-article-head { display: flex; align-items: center; gap: 12px; }
.news-article-icon { font-size: 34px; line-height: 1; }
.news-article-title { margin: 0; }
.news-article-meta { margin: 6px 0 14px; }
.article-container { padding-top: 24px; }

/* 📄 Page article : l'article à gauche, un rail à droite.
   La colonne unique laissait un tiers d'écran vide sur grand écran. */
.article-container { max-width: 1320px; }
.article-layout {
  display: grid;
  /* minmax(0, 1fr) et jamais 1fr : sans le minimum à zéro, un bloc de code
     large pousse la colonne et fait déborder toute la page */
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.article-layout > * { min-width: 0; }
/* Le plafond de 860 px de l'article devient nuisible une fois la grille posée */
.article-layout .news-article { max-width: none; }
.article-rail { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 82px; }
.article-rail .card { padding: 18px; }
.article-rail h2 { font-size: 15px; margin-bottom: 12px; }
.article-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.article-toc-list a { color: var(--text); text-decoration: none; font-size: 14px; }
.article-toc-list a:hover { color: var(--accent); text-decoration: underline; }
.article-toc-sub { font-size: 13px !important; color: var(--text-muted) !important; }
.article-toc-n1 { padding-left: 14px; }
.article-toc-n2 { padding-left: 28px; }
.article-nav-item { display: flex; flex-direction: column; gap: 2px; border: 0; padding: 8px 0; }
.article-nav-sens { font-size: 12px; color: var(--text-muted); }
.article-nav-title { font-weight: 700; }
.article-share .card-link { border: 0; padding: 8px 0; }

@media (max-width: 900px) {
  /* Le rail passe SOUS l'article. Le sommaire disparaît : des ancres placées
     après le texte ne servent plus à rien. */
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-rail { position: static; }
  .article-rail .article-toc { display: none; }
}
.article-back { display: inline-block; margin-bottom: 14px; }

/* Onglet Actualités : cartes plus GRANDES que la grille des quêtes */
.news-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.news-grid .blog-card-content.clamped { -webkit-line-clamp: 6; line-clamp: 6; }

/* ---------- Clicker : succès + Jardin d'Elythera ---------- */
.ck-ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.ck-ach {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  opacity: 0.55;
}
.ck-ach.done {
  opacity: 1;
  border-color: var(--accent, #3f9070);
}
.ck-ach-emoji { font-size: 1.5rem; flex-shrink: 0; }
.ck-ach-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ck-garden-plot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: var(--bg);
  margin-bottom: 12px;
}
.ck-garden-plant { font-size: 2.1rem; line-height: 1; cursor: help; }
.ck-adm-subtitle { margin: 18px 0 8px; color: var(--heading); }

/* Rangées du catalogue jardin (admin) : leur propre gabarit — .ck-adm-row a
   11 colonnes taillées pour les améliorations, la case à cocher héritait de
   la colonne 2fr et le nom finissait dans une colonne de 52px */
.garden-adm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.garden-adm-row input[type="text"], .garden-adm-row input:not([type]) { flex: 1 1 160px; min-width: 0; }
.garden-adm-row input[type="number"] { flex: 0 1 130px; min-width: 90px; }
.garden-adm-row .ck-adm-emoji { flex: 0 0 64px; }

/* Grille des commandes ouvertes en MP (admin Bot) */
.dm-cmd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

/* 🌟 Palier doré du clicker */
.ck-gold-line { color: #d4a72c; }
.ck-up-gold { border-left: 3px solid #d4a72c; }

/* Actualités en tête de colonne gauche : pas de sur-marge du premier titre */
.home-strip-first { margin-top: 0; }
.home-strip-first .section-title { margin-top: 0; }

/* 😀 Sélecteur d'emoji maison */
.emoji-picker {
  position: absolute;
  z-index: 60;
  width: 320px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
}
.emoji-picker-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.emoji-picker-tab {
  flex: 1;
  font-size: 18px;
  padding: 4px 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.emoji-picker-tab.active { background: var(--bg); }
.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}
.emoji-picker-item {
  font-size: 20px;
  padding: 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.emoji-picker-item:hover { background: var(--bg); }

/* ---------- Formatages riches des articles (BlogMD) ---------- */
.blog-md h2 { margin: 20px 0 10px; font-size: 1.55rem; color: var(--heading); }
.blog-md h5 { margin: 12px 0 6px; color: var(--heading); font-size: 0.98rem; }
/* Tailles de texte (classes fermées : aucune valeur libre dans le style) */
.blog-md-xl { font-size: 1.9em; line-height: 1.2; font-weight: 700; }
.blog-md-lg { font-size: 1.35em; line-height: 1.3; }
.blog-md-sm { font-size: 0.82em; }
/* Mention discrète, à la manière du « -# » de Discord */
.blog-md-note { font-size: 0.85rem; opacity: 0.72; margin: 4px 0; }
/* Citation */
.blog-md-quote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--accent, #3f9070);
  background: var(--bg);
  border-radius: 0 10px 10px 0;
  font-style: italic;
}
/* Alignements */
.blog-md-center { text-align: center; }

/* ── Formats d'actualités ajoutés : surlignage, spoiler, code, encadrés,
   lien-bouton, barre. Aucune couleur en dur : uniquement des jetons de
   palette, sinon le rendu casserait en sombre comme le faisait la pastille. */
.blog-md-mark {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: inherit;
  padding: 0 3px;
  border-radius: 4px;
}
/* Le texte EST dans la page : c'est un cache de lecture, pas un secret */
.blog-md-spoiler {
  background: var(--text);
  color: transparent;
  border-radius: 4px;
  padding: 0 3px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.blog-md-spoiler.shown { background: var(--accent-soft); color: inherit; }
.blog-md-spoiler:focus-visible { outline: 2px solid var(--accent); }
.blog-md-pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  overflow-x: auto;          /* une commande longue défile, elle ne déborde pas */
  font-size: 13px;
  line-height: 1.5;
}
.blog-md-pre code { background: none; padding: 0; white-space: pre; }
.blog-md-callout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-left: 4px solid var(--callout-tint);
  background: color-mix(in srgb, var(--callout-tint) 12%, transparent);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 14px 0;
}
.blog-md-callout p { margin: 0 0 6px; }
.blog-md-callout p:last-child { margin-bottom: 0; }
.blog-md-callout-icon { flex: none; font-size: 18px; line-height: 1.3; }
.blog-md-callout-warn { --callout-tint: var(--alert-hit); }
.blog-md-callout-info { --callout-tint: var(--alert-miss); }
.blog-md-callout-ok { --callout-tint: var(--accent); }
.blog-md-callout-danger { --callout-tint: var(--alert-sunk); }
.blog-md-btnrow { text-align: center; margin: 16px 0; }
.blog-md-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none !important;
}
.blog-md-btn:hover { background: var(--accent-dark, var(--accent)); }
.blog-md-bar {
  height: 12px;
  border-radius: 999px;
  background: var(--progress-track, var(--border));
  overflow: hidden;
  margin: 14px 0 6px;
}
.blog-md-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.blog-md-bar-label { text-align: center; color: var(--text-muted); font-size: 13px; margin: 0 0 14px; }
.blog-md-right { text-align: right; }
/* Espacement explicite : une ligne vide de plus = un vrai blanc */
.blog-md-space { height: 0.9em; }
/* Code en ligne */
.blog-md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.blog-md hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}
.blog-md ol { margin: 8px 0 8px 22px; }
.blog-md blockquote p { margin: 0; }

/* Sélecteur de pastilles (couleurs, tailles) */
.swatch-picker {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.swatch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-size: 0.9rem;
}
.swatch-item:hover { background: var(--bg); }
.swatch-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.swatch-glyph { width: 16px; text-align: center; flex-shrink: 0; font-weight: 700; }
.swatch-enorme { font-size: 1.3rem; }
.swatch-grand { font-size: 1.05rem; }
.swatch-petit { font-size: 0.75rem; }

/* 🖼️ Médiathèque du blog : réutiliser une image déjà envoyée */
.media-picker { width: 340px; max-height: 340px; overflow-y: auto; padding: 10px; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.media-grid .meta { grid-column: 1 / -1; margin: 6px 2px; }
.media-cell {
  position: relative; padding: 0; border: 1px solid var(--border, #d7dee4);
  border-radius: 8px; overflow: hidden; background: var(--card, #fff);
  aspect-ratio: 1; cursor: pointer;
}
.media-cell:hover { border-color: var(--accent, #3f9070); }
.media-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Pastille discrète : cette image sert déjà dans un billet */
.media-badge {
  position: absolute; top: 3px; right: 5px; color: var(--accent, #3f9070);
  font-size: 20px; line-height: 1; text-shadow: 0 0 3px rgba(0, 0, 0, .5);
}

/* ══ 🖼️ Bannière d'article avec texte incrusté ══════════════════════════════
   Le texte est posé SUR l'image : son contraste doit venir de son propre voile
   (dégradé + ombre portée), jamais des variables de thème — sinon il devient
   illisible dans l'un des deux modes. Les marges négatives des anciennes
   images migrent ici : c'est l'enveloppe qui déborde du padding de la carte,
   l'image reprend une largeur normale. */
.blog-banner { position: relative; display: block; overflow: hidden; }
.blog-banner-img {
  display: block;
  width: 100%;
  max-width: none;
  object-fit: cover;
}
/* Carte (accueil, onglet Actualités, vitrine) : ↔ padding 22px de .quest-card */
.blog-banner-card { margin: -22px -22px 0; width: calc(100% + 44px); }
.blog-banner-card .blog-banner-img { height: 110px; }
/* Page article : ↔ padding 26px 30px de .news-article */
.blog-banner-article { margin: -26px -30px 18px; width: calc(100% + 60px); }
/* Plancher de hauteur : une image très allongée (bandeau panoramique)
   écraserait la superposition jusqu'à rogner le texte */
.blog-banner-article .blog-banner-img { min-height: 140px; max-height: 280px; object-fit: cover; }

.blog-banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 14px;
  box-sizing: border-box;
  /* Voile sombre : le texte reste lisible sur une image claire comme sur une
     image chargée */
  background: linear-gradient(180deg, rgba(6, 12, 22, .18), rgba(6, 12, 22, .52));
  /* Le calque couvre toute la bannière : sans ça il volerait les clics du
     bouton « Lire l'article » et du lien de la vitrine */
  pointer-events: none;
}
.blog-banner-text { position: relative; max-width: 90%; }
.blog-banner-title {
  margin: 0;
  /* Nunito est chargée en 800 ; Quicksand s'arrête à 700 et produirait un gras
     synthétisé, très visible sur de grandes capitales */
  font-family: "Nunito", var(--font-body, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.12;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65), 0 1px 2px rgba(0, 0, 0, .8);
  /* S'adapte à la largeur : lisible sur une carte de 340 px comme en pleine page */
  font-size: clamp(15px, 4.2cqw, 34px);
  /* Un mot très long (URL, nom composé) doit se couper plutôt que déborder
     de l'image des deux côtés */
  overflow-wrap: anywhere;
}
.blog-banner-subtitle {
  margin: 6px 0 0;
  font-family: "Nunito", var(--font-body, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
  font-size: clamp(8px, 1.5cqw, 13px);
  overflow-wrap: anywhere;
}
/* Les tailles suivent la largeur de la BANNIÈRE, pas de la fenêtre : la même
   carte rend pareil sur l'accueil et dans une grille plus étroite */
.blog-banner { container-type: inline-size; }

/* Crochets d'angle décoratifs */
.blog-banner-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .85);
}
.blog-banner-card .blog-banner-corner { width: 10px; height: 10px; }
.blog-banner-corner-tl { top: 10px; left: 12px; border-right: 0; border-bottom: 0; }
.blog-banner-corner-tr { top: 10px; right: 12px; border-left: 0; border-bottom: 0; }
.blog-banner-corner-bl { bottom: 10px; left: 12px; border-right: 0; border-top: 0; }
.blog-banner-corner-br { bottom: 10px; right: 12px; border-left: 0; border-top: 0; }

/* Aperçu dans l'éditeur : hors carte, donc sans les marges négatives.
   Il prend EXACTEMENT la géométrie de la carte la plus étroite du site (220 px
   de la grille d'actualités, 110 px de haut). Sans ça l'aperçu mentait : les
   tailles suivent la largeur du conteneur (cqw), donc un texte confortable
   dans un aperçu large se retrouvait tranché sur une vraie carte. */
.blog-banner-preview .blog-banner {
  margin: 0;
  width: 220px;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.blog-banner-preview .blog-banner-img { height: 110px; max-height: 110px; }
.blog-banner-preview .blog-banner-article { width: 220px; }

/* Le texte incrusté ne doit jamais être tranché en plein milieu d'une ligne :
   on borne le nombre de lignes, l'excédent est coupé proprement */
.blog-banner-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-banner-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 📎 Pièces jointes d'un ticket */
.tk-msg-media { margin-top: 8px; }
.tk-msg-media img {
  max-width: min(360px, 100%);
  max-height: 260px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
  cursor: zoom-in;
}
.tk-msg-file {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--accent);
  word-break: break-all;
}

/* ✨ Carte « Bientôt » : comble la ligne sans faire croire à un contenu */
.blog-soon {
  border-style: dashed;
  box-shadow: none;
  background: transparent;
  justify-content: center;
  text-align: center;
  opacity: .75;
}
.blog-soon .quest-icon { opacity: .8; }
.blog-soon .quest-title { color: var(--text-muted, #7a8a93); }
.blog-soon .quest-desc { color: var(--text-muted, #7a8a93); }

/* 🫥 Mouvement réduit : six blocs ciblés existaient, mais aucun ne couvrait les
   animations de jeu (alerte de tir, confettis). Ce garde global les couvre
   toutes, y compris celles qu'on ajoutera. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ✿ ── Corolle ──────────────────────────────────────────────────────────
   Les quatre teintes sont ÉCRITES ici et ne suivent pas le thème : une carte
   rouge doit rester rouge dans les cinq apparences, sinon deux joueurs ne
   parlent plus du même jeu. Seul le tapis suit la palette. */
.game-actions-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 14px; }

/* Un jeu de cartes veut de la place. On élargit le CONTENEUR, sur le modèle de
   l'administration (`#page-admin .container`), plutôt que de faire déborder la
   carte avec une transformation : `transform` sur un ancêtre change le
   référentiel de tous ses descendants `position: fixed` — la carte qui vole et
   le sélecteur de couleur s'en trouveraient déplacés le jour où ils cesseraient
   d'être posés sur `body`.
   `:has(.co-tapis)` cible la SEULE partie de Corolle, sans une ligne de JS :
   le tapis n'existe que pendant une partie, et le retour à la liste vide
   `#games-body`, ce qui referme l'élargissement tout seul. */
#page-jeux > .container:has(.co-tapis) { max-width: 1560px; }
/* Le titre « Espace jeux » ne sert plus à rien une fois la table ouverte, et
   il coûte de la hauteur là où elle manque le plus */
#page-jeux > .container:has(.co-tapis) > .section-title { display: none; }
.co-tapis {
  background: radial-gradient(circle at 50% 30%, var(--accent-soft), transparent 70%);
  border-radius: 18px;
  padding: 26px 16px 18px;
  margin: 10px 0 4px;
  /* Le tapis occupe la hauteur disponible plutôt que de flotter en haut :
     c'est ce qui donne l'impression d'une table, pas d'une carte de site */
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ── Les autres joueurs, en couronne ── */
/* Les joueurs en ARC autour du haut de la table : le premier à jouer après
   moi est au centre, les suivants s'écartent — l'ordre du tour se lit dans la
   forme, pas seulement dans les numéros */
.co-couronne { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: flex-end; margin-bottom: 14px; }
.co-couronne .co-joueur:nth-child(odd) { margin-bottom: 10px; }
.co-joueur {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 12px; border-radius: 14px;
  border: 2px solid transparent; min-width: 92px;
}
/* Le joueur au trait est le seul mis en avant : c'est l'information qu'on
   cherche des yeux en permanence */
.co-joueur.co-actif { border-color: var(--accent); background: var(--accent-soft); }
.co-joueur.co-sorti { opacity: 0.55; }
/* Portrait : on reconnaît un joueur à son avatar bien avant son pseudo,
   surtout à huit autour de la table */
.co-portrait {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: visible;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border);
}
.co-portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.co-portrait-lettre { font-weight: 800; font-size: 18px; color: var(--heading); }
/* Le rond de connexion se pose SUR le portrait, comme sur les messageries */
.co-portrait-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 12px; height: 12px;
  border: 2px solid var(--card);
  margin: 0;
}
.co-joueur.co-actif .co-portrait { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.co-joueur-nom { font-weight: 700; font-size: 13px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-joueur-n { font-size: 12px; color: var(--text-muted); font-weight: 700; }
/* Une main se JAUGE d'un regard : des dos empilés disent mieux qu'un nombre */
.co-mini-main { display: flex; }
.co-mini {
  width: 9px; height: 15px; border-radius: 2px;
  background: linear-gradient(150deg, #4a3f6b, #241d38);
  border: 1px solid rgba(255, 255, 255, 0.55);
  margin-left: -4px;
}
.co-mini:first-child { margin-left: 0; }

/* ── Le centre ── */
.co-centre-table { display: flex; gap: 16px; justify-content: center; align-items: center; }
.co-pile { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; }
.co-pile-n { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.co-pioche { cursor: pointer; }
.co-pioche:not(:disabled):hover .co-carte { transform: translateY(-6px); box-shadow: 0 10px 22px rgba(0,0,0,.35); }
.co-pioche:disabled { cursor: default; opacity: 0.6; }
/* Pioche OBLIGATOIRE : plus aucune carte n'est jouable. Sans ce signal, on
   cherche pourquoi rien ne réagit dans sa main. */
.co-pioche-forcee .co-carte {
  animation: co-pulse 1.1s ease-in-out infinite;
  box-shadow: 0 0 0 3px var(--accent), 0 6px 16px rgba(0, 0, 0, 0.35);
}
@keyframes co-pulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.co-mon-tour-force { background: var(--alert-hit); }
.co-sens { font-size: 26px; color: var(--accent); transition: transform 0.25s; }
.co-sens-inverse { transform: scaleX(-1); }

/* ── Les cartes ── */
.co-carte {
  position: relative;
  width: 74px; height: 108px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  border: 3px solid rgba(255, 255, 255, 0.92);
  user-select: none; flex: none;
}
/* Les cartes de la main et du talon sont GRANDES : sur un téléphone, une
   carte de 62 px ne se lit ni ne se vise */
.co-grande { width: 104px; height: 152px; }
.co-pastille-centre {
  display: flex; align-items: center; justify-content: center;
  width: 60%; aspect-ratio: 1 / 1.35;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: inherit;
  font-size: 26px;
  transform: rotate(-18deg);
}
.co-grande .co-pastille-centre { font-size: 40px; }
.co-rouge .co-pastille-centre { color: #b8262b; }
.co-jaune .co-pastille-centre { color: #a06f00; }
.co-vert  .co-pastille-centre { color: #2a6b51; }
.co-bleu  .co-pastille-centre { color: #275a91; }
.co-noir  .co-pastille-centre { color: #17171c; }
.co-coin { position: absolute; font-size: 12px; font-weight: 800; line-height: 1; }
.co-grande .co-coin { font-size: 15px; }
.co-coin-hg { top: 5px; left: 6px; }
.co-coin-bd { bottom: 5px; right: 6px; transform: rotate(180deg); }
.co-rouge { background: linear-gradient(150deg, #e5484d, #a81f24); }
.co-jaune { background: linear-gradient(150deg, #f5b301, #b87f00); }
.co-vert  { background: linear-gradient(150deg, #3f9070, #24614a); }
.co-bleu  { background: linear-gradient(150deg, #3b7fc4, #21507f); }
.co-noir  { background: conic-gradient(#e5484d, #f5b301, #3f9070, #3b7fc4, #e5484d); }
.co-dos   { background: radial-gradient(circle at 50% 45%, #4a3f6b, #241d38); }
.co-embleme { font-size: 34px; opacity: 0.9; }
.co-vide { background: none; border-style: dashed; border-color: var(--border); box-shadow: none; }

/* ── Le journal ── */
.co-journal { text-align: center; margin: 12px 0 4px; }
.co-journal-l { margin: 2px 0; font-size: 13px; color: var(--text-muted); }
.co-journal-dernier { color: var(--heading); font-weight: 700; font-size: 14px; }
.co-alerte { text-align: center; font-weight: 700; color: var(--alert-hit); margin: 8px 0 0; }

/* ── Mon tour ── */
.co-bandeau { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
.co-mon-tour {
  background: var(--accent); color: #fff;
  padding: 6px 18px; border-radius: 999px;
  font-weight: 800; font-size: 14px;
}
.co-attente { color: var(--text-muted); font-size: 14px; }
.co-chrono { width: 160px; height: 6px; border-radius: 999px; background: var(--progress-track, var(--border)); overflow: hidden; }
.co-chrono > span { display: block; height: 100%; background: var(--accent); transition: width 1s linear; }
.co-chrono-urgent { background: var(--alert-sunk) !important; }

/* ── Ma main, en éventail ── */
.co-main {
  /* Une COLONNE de rangées : la main passe à la ligne au lieu de défiler.
     Un éventail qui défile cache des cartes — des rangées montrent tout. */
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 14px 0 4px; padding: 22px 8px 8px;
  min-height: 150px;
}
.co-rangee { display: flex; justify-content: center; align-items: flex-end; }
/* Joueur sorti : plus de cartes, pas de bande vide de 150 px à la place */
.co-main:empty { display: none; }
.co-main .co-carte { transition: transform 0.14s, box-shadow 0.14s, margin 0.14s; transform-origin: bottom center; }
/* Seules les cartes JOUABLES réagissent : le serveur seul décide lesquelles */
.co-jouable { cursor: pointer; }
.co-main .co-jouable:hover, .co-main .co-jouable:focus-visible {
  transform: translateY(-22px) scale(1.06) !important;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.4);
  z-index: 99 !important;
  outline: none;
}
/* AUCUNE transparence sur une carte : elles se chevauchent, et deux cartes
   translucides superposées donnent une bouillie où l'on voit à travers. Une
   carte non jouable est simplement DÉSATURÉE — elle reste opaque et lisible.
   La carte jouable, elle, porte un anneau accent. */
.co-main .co-carte { opacity: 1; }
.co-main .co-carte:not(.co-jouable) { filter: saturate(0.55) brightness(0.82); }
.co-main .co-jouable {
  box-shadow: 0 0 0 3px var(--accent), 0 6px 16px rgba(0, 0, 0, 0.45);
}

/* 🎬 La carte posée vole jusqu'au talon. Position fixe et hors flux : elle ne
   déplace rien, et sa disparition ne laisse aucun trou. */
.co-vol {
  position: fixed;
  z-index: 400;
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.22, 0.68, 0.35, 1), opacity 0.42s ease-out;
}

/* Replay : le talon se reconstitue, la plus récente carte devant */
.co-replay-pile { display: flex; justify-content: center; align-items: center; margin: 18px 0 8px; min-height: 160px; }

/* ── Sélecteur de couleur ── */
.co-choix-voile { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 500; }
.co-choix { background: var(--card); border-radius: 18px; padding: 24px; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.co-choix-titre { margin: 0; font-weight: 800; font-size: 16px; }
.co-choix-rangee { display: flex; gap: 14px; }
.co-pastille { width: 62px; height: 62px; border-radius: 50%; border: 3px solid rgba(255,255,255,.9); cursor: pointer; transition: transform .12s; }
.co-pastille:hover, .co-pastille:focus-visible { transform: scale(1.12); outline: none; }

@media (max-width: 560px) {
  /* Les cartes RESTENT grandes : c'est la cible du doigt, la rapetisser rend
     le jeu impraticable. La main passe À LA LIGNE quand elle ne tient pas
     (rangées calculées en JS) : tout est visible, rien ne défile. */
  .co-grande { width: 88px; height: 128px; }
  .co-grande .co-pastille-centre { font-size: 33px; }
  .co-carte { width: 58px; height: 86px; }
  /* Sur un téléphone, chaque bloc doit payer sa place : la main doit rester
     visible SANS défiler. On retire la hauteur imposée du tapis et on
     resserre tout ce qui n'est pas une carte. */
  .co-tapis { padding: 10px 4px 6px; min-height: 0; gap: 6px; }
  .game-view { padding: 12px 8px; }
  .co-couronne { margin-bottom: 8px; }
  .co-joueur { min-width: 68px; padding: 4px 6px; gap: 3px; }
  .co-portrait { width: 34px; height: 34px; }
  .co-joueur-nom { font-size: 12px; max-width: 74px; }
  .co-mini { width: 7px; height: 12px; }
  /* Les piles centrales : lisibles, mais elles n'ont pas à occuper un tiers
     de l'écran — c'est la MAIN qu'on manipule */
  .co-centre-table { gap: 10px; }
  .co-centre-table .co-grande { width: 74px; height: 108px; }
  .co-centre-table .co-grande .co-pastille-centre { font-size: 28px; }
  .co-centre-table .co-carte { width: 62px; height: 92px; }
  .co-sens { font-size: 20px; }
  .co-journal { margin: 6px 0 2px; }
  .co-journal-l { font-size: 12px; margin: 1px 0; }
  .co-journal-dernier { font-size: 13px; }
  .co-bandeau { margin-top: 6px; gap: 4px; }
  .co-mon-tour { padding: 5px 14px; font-size: 13px; }
  /* 22 px de rembourrage haut : le soulèvement d'une carte tapée (22 px) ne
     doit pas recouvrir le bandeau du tour posé juste au-dessus */
  .co-main { margin: 8px 0 0; min-height: 0; padding: 22px 10px 10px; gap: 4px; }
  .co-couronne { gap: 10px; }
  .co-joueur { min-width: 78px; padding: 6px 8px; }
  .co-portrait { width: 38px; height: 38px; }
}

/* 🃏 Sélection des bonus : des CARTES, pas des cases empilées. Une case posée
   au-dessus d'un libellé centré ne disait ni ce qu'on choisissait ni ce que ça
   faisait — et la colonne de cases flottait au milieu du formulaire. */
.co-bonus-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}
.co-bonus-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.co-bonus-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.co-bonus-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.co-bonus-emoji { font-size: 26px; line-height: 1; }
.co-bonus-nom { font-weight: 800; color: var(--heading); }
.co-bonus-effet { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
/* La sélection ne repose PAS que sur la couleur : la carte s'enfonce d'un
   anneau accent, et l'état est porté par `aria-pressed` pour l'annoncer. */
.co-bonus-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}
.co-bonus-card.selected .co-bonus-effet { color: var(--text); }

/* 📖 Aide des cartes, repliée par défaut */
.co-aide {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
  background: var(--bg);
}
.co-aide > summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--heading);
  list-style: none;
}
.co-aide > summary::-webkit-details-marker { display: none; }
/* Le chevron dit que le bloc s'ouvre : sans lui, un titre cliquable ne se
   distingue pas d'un titre ordinaire. */
.co-aide > summary::before { content: "▸ "; color: var(--accent); }
.co-aide[open] > summary::before { content: "▾ "; }
.co-aide-titre { margin: 14px 0 8px; font-size: 13px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; }
.co-aide-liste { display: flex; flex-direction: column; gap: 10px; }
.co-aide-ligne { display: flex; gap: 12px; align-items: flex-start; }
/* Largeur FIXE pour la face : sans elle, « 0-9 » et « 🛡️ » désalignent
   toutes les descriptions les unes par rapport aux autres. */
.co-aide-face {
  flex: 0 0 44px;
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  color: var(--heading);
}
.co-aide-effet { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.co-aide-regles { margin: 0; padding-left: 20px; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.co-aide-regles li { margin: 4px 0; }

@media (max-width: 560px) {
  .co-bonus-cards { grid-template-columns: 1fr 1fr; }
  .co-bonus-effet { font-size: 11px; }
}

/* 🩺 Diagnostic du launcher : d'où vient la version annoncée sur le site.
   Une grille clé/valeur, et trois teintes pour trancher d'un coup d'œil —
   vert quand la source est vivante, ambre quand c'est un repli, rouge pour
   l'erreur exacte. Sans ces couleurs, il faut lire pour comprendre. */
.lau-diag {
  display: grid;
  gap: 4px;
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-soft, rgba(127, 127, 127, 0.08));
  font-size: 13px;
}
.lau-diag-l { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.lau-diag-k { flex: 0 0 auto; min-width: 160px; opacity: 0.72; }
.lau-diag-v { flex: 1 1 220px; font-weight: 600; word-break: break-word; }
.lau-diag-l.ok .lau-diag-v { color: var(--green, #3fb950); }
.lau-diag-l.warn .lau-diag-v { color: var(--warn, #d29922); }
/* L'erreur est un message technique : en police à chasse fixe, on distingue
   un code de statut d'un nom d'hôte tronqué. */
.lau-diag-l.err .lau-diag-v {
  color: var(--red, #f85149);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.lau-forcer { margin-top: 12px; }
@media (max-width: 560px) { .lau-diag-k { min-width: 0; flex-basis: 100%; } }

/* 🔄 Bandeau de redémarrage — tout en haut, au-dessus de tout le reste.
   `position: fixed` et non `sticky` : la vitrine, le tableau de bord et la
   page du launcher ont chacun leur propre défilement, et un bandeau collé au
   flux disparaissait dès qu'on descendait sur l'une d'elles. */
.restart-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9000;
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #1b1200;
  background: linear-gradient(90deg, #f0b232, #ffd479);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
/* Le bandeau est HORS FLUX : sans cette marge, il recouvrirait l'en-tête de
   chaque page — donc le menu, donc le moyen d'aller ailleurs. */
.has-restart-bar body { padding-top: 42px; }
@media (max-width: 560px) {
  .restart-bar { font-size: 13px; padding: 8px 12px; }
  .has-restart-bar body { padding-top: 56px; }
}

/* Le voile d'attente : il couvre TOUT, y compris le bandeau. Cliquer pendant
   que le serveur est absent ne produirait que des erreurs — mieux vaut une
   porte fermée qu'une poignée qui casse. */
.restart-veil {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 12, 10, 0.92);
  backdrop-filter: blur(4px);
}
.restart-veil-box {
  max-width: 420px;
  text-align: center;
  color: #eaf3ee;
}
.restart-veil-box h2 { margin: 16px 0 8px; font-size: 20px; }
.restart-veil-box p { margin: 0; opacity: 0.82; line-height: 1.5; }
/* Le mot de l'équipe est un COMPLÉMENT : plus discret que la phrase qui dit
   au visiteur de ne rien faire, et qui doit rester la plus lisible. */
.restart-veil-note { margin-top: 10px !important; font-size: 13px; opacity: 0.62 !important; }
.restart-spin {
  width: 42px;
  height: 42px;
  margin: 0 auto;
  border: 4px solid rgba(255, 255, 255, 0.18);
  border-top-color: #3f9070;
  border-radius: 50%;
  animation: restart-spin 0.9s linear infinite;
}
@keyframes restart-spin { to { transform: rotate(360deg); } }
/* Mouvement réduit : la rotation devient un battement discret. Supprimer tout
   signe de vie laisserait croire que la page est figée. */
@media (prefers-reduced-motion: reduce) {
  .restart-spin { animation: restart-pulse 1.6s ease-in-out infinite alternate; }
}
@keyframes restart-pulse { from { opacity: 0.35; } to { opacity: 1; } }

/* 👥 Panneau clicker de l'administration : le volet d'édition s'insère sous la
   ligne du joueur, légèrement en retrait pour qu'on voie à qui il appartient. */
.ck-adm-edit {
  margin: 4px 0 10px 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent, #3f9070);
  border-radius: 0 8px 8px 0;
  background: var(--bg-soft, rgba(127, 127, 127, 0.08));
  display: grid;
  gap: 8px;
}
.ck-adm-edit .inline-form { align-items: center; }

/* 🎲 Filtre « viser un jeu » de l'éditeur de quête : une rangée de cases qui
   RETOURNE À LA LIGNE. Les sept jeux ne tiennent pas sur une ligne de modale,
   et un dépassement horizontal y est invisible — la modale ne défile pas. */
.qf-jeux-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 4px 0;
}
.qf-jeux-toggles .cat-toggle { font-weight: 600; }

/* 🧪 Vivier des bêta-testeurs : identité à gauche, cases au milieu, poubelle à
   droite. Les cases RETOURNENT À LA LIGNE — sept jeux ne tiennent pas sur une
   ligne d'écran étroit, et un dépassement horizontal y serait invisible. */
.beta-row {
  align-items: flex-start;
  gap: 12px;
}
.beta-jeux {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  flex: 1;
  min-width: 0;
}
.beta-jeux .cat-toggle { font-weight: 600; font-size: 0.92rem; }
/* Un jeu qui n'est PAS en bêta fermée aujourd'hui : la case sert à préparer la
   bêta suivante, pas à donner un accès actif. On le dit par la teinte. */
.beta-jeu-dormant { opacity: 0.55; }

/* 🌰 Graines libres et achats uniques dans l'administration du clicker. */
.ck-adm-color { width: 46px; padding: 2px; min-width: 46px; }
/* La description d'un achat unique prend TOUTE la largeur : c'est une phrase,
   pas un nombre, et la serrer entre deux champs la rendrait illisible. */
.ck-adm-desc { flex-basis: 100%; }

/* 🗃️ Archive des événements : un dépliant qui garde le passé à portée sans
   qu'il masque ce qui se prépare. */
.ev-archive {
  margin-top: 22px;
  /* ⚠️ `--border`, le token RÉEL de cette feuille (celui de .gevent) : un
     `--card-border` inventé retombait toujours sur son repli blanc — une ligne
     invisible en thème clair, et un token qui ne suit aucun thème. */
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.ev-archive > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--heading);
  padding: 6px 0;
  list-style: none;
}
.ev-archive > summary::-webkit-details-marker { display: none; }
.ev-archive > summary::before { content: "▸ "; display: inline-block; transition: transform 0.15s; }
.ev-archive[open] > summary::before { content: "▾ "; }
/* Même grille que la liste vivante : une archive qui s'afficherait autrement
   se lirait comme un autre type de contenu. */
.ev-archive-list { display: grid; gap: 18px; margin-top: 12px; }

/* 💤 L'absence de celui qu'on attend, à côté du bandeau d'attente du Corolle. */
.co-attente-absent {
  display: inline-block;
  margin-left: 10px;
  font-size: 0.9em;
  color: var(--text-muted);
  font-style: italic;
}

/* ⚪ Dames : ce qui peut jouer, et qui est qui. */
/* Halo doux sur les pièces JOUABLES : en prise obligatoire, c'est la seule
   chose qui dise pourquoi « rien ne se passe » sur les autres. */
.game-cell.dm-movable {
  box-shadow: inset 0 0 0 3px rgba(63, 144, 112, 0.85);
  animation: dm-respire 1.6s ease-in-out infinite;
}
@keyframes dm-respire {
  0%, 100% { box-shadow: inset 0 0 0 3px rgba(63, 144, 112, 0.85); }
  50% { box-shadow: inset 0 0 0 3px rgba(63, 144, 112, 0.35); }
}
@media (prefers-reduced-motion: reduce) { .game-cell.dm-movable { animation: none; } }
/* Les dames (♛) : le glyphe est TEXTE, la couleur dit le camp — la même
   couronne emoji pour les deux rendait les dames indistinguables. */
.game-board.dames .game-cell.dk-host { color: #d64545; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
.game-board.dames .game-cell.dk-guest { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }

/* 🌰 Bloc des monnaies spéciales (entre le clic et la renaissance). */
.ck-seeds-card h3 { margin-bottom: 8px; }
.ck-seeds-card .ck-red-line { text-align: left; }
.ck-libre-line { font-weight: 700; }

/* 🌼 Le BAC à fleurs : les places, pleines ou vides, en grille. */
.ck-bac {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin: 10px 0 16px;
}
.ck-bac-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--accent-soft);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.ck-bac-place:hover:not(.ck-bac-vide) { filter: brightness(1.08); }
.ck-bac-vide {
  background: transparent;
  border-style: dashed;
  cursor: default;
  opacity: 0.6;
}
.ck-bac-emoji { font-size: 26px; }
.ck-bac-nom { font-size: 12px; text-align: center; color: var(--text-muted); }
.ck-bac-boost { font-size: 12px; font-weight: 800; color: var(--accent); }
.ck-bac-bonus { font-weight: 700; margin: 4px 0 0; }

/* 🏆 Succès repliables. */
.ck-ach-pliant > summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 1.1em;
  color: var(--heading);
  list-style: none;
  padding: 2px 0;
}
.ck-ach-pliant > summary::-webkit-details-marker { display: none; }
.ck-ach-pliant > summary::before { content: "▸ "; }
.ck-ach-pliant[open] > summary::before { content: "▾ "; }

/* 🏷️ En-têtes du formulaire des graines libres (admin) : mêmes largeurs que
   les champs qu'ils titrent, pour que chaque colonne se lise. */
.ck-adm-entetes { opacity: 0.75; font-size: 12px; font-weight: 700; }
.ck-adm-entetes .ck-adm-entete:nth-child(1) { flex: 1; }
.ck-adm-entetes .ck-adm-entete { min-width: 56px; text-align: center; }

/* 🖐️ Glisser-déposer du bac : la place survolée s'allume, le ✖ de retrait se
   niche dans le coin. */
.ck-bac-place { position: relative; }
.ck-bac-place[draggable="true"] { cursor: grab; }
.ck-bac-survol { outline: 2px dashed var(--accent); outline-offset: 2px; }
.ck-bac-retirer {
  position: absolute;
  top: 2px;
  right: 4px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 2px;
}
.ck-bac-retirer:hover { color: #d64545; }
.ck-inv-row[draggable="true"] { cursor: grab; }
/* 📜 La description d'un achat unique : c'est le message principal. */
.ck-up-desc { font-weight: 600; color: var(--heading); }
/* Groupes du catalogue admin. */
.ck-adm-groupe { margin: 14px 0 4px; opacity: 0.85; }