/* =================================================================
 * myworldmc — design système v2
 * Palette : héraldique moderne (rouge templier, or, brun nuit, bleu)
 * Police : système (Inter / -apple-system pour perf)
 * ================================================================= */

:root {
  --bg-deep: #0d0d1f;
  --bg: #131329;
  --bg-soft: #1c1c3a;
  --bg-card: #20204a;
  --bg-card-hover: #262657;
  --border: #2f2f5c;
  --border-strong: #3f3f7a;
  --text: #e8e8f0;
  --text-soft: #b8b8c8;
  --dim: #6b6b85;
  --bright: #f5e6c8;

  --accent: #d4af37;
  --accent-soft: #b8951a;
  --accent-glow: rgba(212, 175, 55, 0.35);

  --red: #c92a2a;
  --red-bright: #e85050;
  --red-pale: #ffb0b0;
  --red-soft: #5a0f0f;
  --green: #2a8a3e;
  --green-bright: #6ee07f;
  --green-soft: #1a3d22;
  --blue: #4a78c7;
  --blue-bright: #6e9aea;
  --warn: #e08a30;
  --warn-bright: #ffc890;
  --warn-soft: #4a2e10;

  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-serif: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background:
    radial-gradient(ellipse at top, rgba(212, 175, 55, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(74, 120, 199, 0.04) 0%, transparent 50%),
    var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 15px;
}
a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--bright); }
code {
  background: var(--bg-deep);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.92em;
  font-family: var(--font-mono);
  color: var(--accent);
  border: 1px solid var(--border);
}
pre {
  background: var(--bg-deep);
  padding: 14px 16px;
  border-radius: var(--radius);
  overflow-x: auto;
  border: 1px solid var(--border);
}
pre code { background: transparent; border: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--bright);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
h1 { font-size: 36px; margin: 0 0 16px; }
h2 { font-size: 26px; margin: 0 0 12px; }
h3 { font-size: 20px; margin: 0 0 8px; }
p { margin: 0 0 12px; color: var(--text-soft); }
p:last-child { margin-bottom: 0; }

/* ---------- HEADER ---------- */
header.site-header {
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
}
header.site-header .logo {
  color: var(--bright);
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
}
header.site-header .logo .accent {
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
}
header.site-header nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-left: auto;
  align-items: center;
}
header.site-header nav a {
  padding: 8px 14px;
  border-radius: 6px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
  position: relative;
}
header.site-header nav a:hover {
  background: var(--bg-card);
  color: var(--bright);
}
header.site-header nav a.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color: var(--bg-deep);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}
header.site-header nav a.bell {
  font-size: 18px;
  padding: 6px 10px;
  position: relative;
}
header.site-header nav a.bell .badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--red-bright);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
  border: 2px solid var(--bg-deep);
  min-width: 18px;
  text-align: center;
}
.banner-warn {
  background: linear-gradient(90deg, var(--red) 0%, var(--red-bright) 100%);
  color: white;
  padding: 12px 24px;
  text-align: center;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(201, 42, 42, 0.4);
}
.banner-warn a { color: white; text-decoration: underline; font-weight: 700; }

/* ---------- MAIN ---------- */
main.site-main {
  flex: 1;
  max-width: 1080px;
  margin: 32px auto;
  padding: 0 24px;
  width: 100%;
  animation: fadeIn 0.3s ease-out;
}
/* Cadre large : la page pose $page_large = true (templates/page-header.php) et <main> prend
   toute la largeur de l'ecran. Pour un grand tableau seulement — admin/users.php, dix
   colonnes qui defilaient de cote dans 1080 px, et admin/logement.php, onze colonnes pour les
   actes de propriete (JM, 2026-10-13). Les autres pages gardent leur cadre. */
main.site-main.site-main-large { max-width: none; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- FOOTER ---------- */
footer.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  padding: 24px;
  text-align: center;
  color: var(--dim);
  font-size: 13px;
  margin-top: 48px;
}
footer.site-footer a {
  color: var(--text-soft);
  margin: 0 6px;
}
footer.site-footer a:hover { color: var(--accent); }

/* ---------- CARDS ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease;
}
.card:hover {
  border-color: var(--border-strong);
}
.card-title {
  font-size: 12px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--accent);
}

/* ---------- BADGES ---------- */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* DEUX APPARENCES, PAS SIX. Un vert pour ce qui est en ligne ou accorde, un rouge pour ce
   qui est tombe : la declaration verte etait recopiee deux fois et la rouge quatre fois.
   Le jour ou l'on voudra distinguer refusee de suspendu, il y a un seul bloc a ouvrir.
   AUCUNE classe ne disparait ici : les statuts arrivent par concatenation, du genre
   class="badge badge-" suivi du statut, dans dashboard.php, history.php et
   admin/applications.php. En particulier badge-revoked n'apparait jamais en clair mais
   'revoked' est bien ecrit en base (lib/admin_actions.php lignes 67, 112, 147 et
   public/action.php ligne 154), et badge-suspended sert au detail d'une candidature
   (admin/applications.php ligne 25). L'ordre importe peu : aucun element ne porte deux de
   ces classes, et admin-live.js retire les trois classes d'etat avant d'en ajouter une. */
.badge-online,
.badge-approved  { background: var(--green-soft); color: var(--green-bright); border: 1px solid var(--green); }
.badge-offline,
.badge-denied,
.badge-revoked,
.badge-suspended { background: var(--red-soft); color: var(--red-bright); border: 1px solid var(--red); }
.badge-warn      { background: var(--warn-soft); color: var(--warn-bright); border: 1px solid var(--warn); }
.badge-pending   { background: rgba(212, 175, 55, 0.15); color: var(--accent); border: 1px solid var(--accent); }
.badge-withdrawn { background: var(--bg-soft); color: var(--dim); border: 1px solid var(--border); }

/* ---------- HERO ---------- */
.hero {
  text-align: center;
  padding: 56px 28px;
  background:
    radial-gradient(ellipse at top, var(--accent-glow) 0%, transparent 60%),
    linear-gradient(135deg, var(--bg-card) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  margin-bottom: 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 80px, rgba(212,175,55,0.025) 80px, rgba(212,175,55,0.025) 81px),
    repeating-linear-gradient(-45deg, transparent, transparent 80px, rgba(212,175,55,0.025) 80px, rgba(212,175,55,0.025) 81px);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero .crest {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  filter: drop-shadow(0 4px 16px var(--accent-glow));
}
.hero h1 {
  font-size: clamp(36px, 5vw, 56px);
  margin: 0 0 12px;
  color: var(--bright);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero h1 .accent {
  color: var(--accent);
}
.hero .motd {
  color: var(--text-soft);
  font-style: italic;
  font-size: 16px;
  margin: 0 0 28px;
  font-family: var(--font-serif);
}
.hero .status-line {
  margin: 24px 0;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero .players {
  color: var(--bright);
  font-weight: 700;
  font-family: var(--font-mono);
}

.hero-compact {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 24px;
  text-align: center;
}
.hero-compact h1 { margin: 0; }
.hero-compact .subtitle { color: var(--text-soft); margin-top: 8px; font-family: var(--font-serif); font-style: italic; }

/* ---------- GRID ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 24px; }

.stat-tile { text-align: center; }
.stat-tile .stat-value {
  font-size: 36px;
  color: var(--bright);
  font-weight: 800;
  margin: 8px 0;
  font-family: var(--font-mono);
}
.stat-tile .stat-label {
  color: var(--dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

/* ---------- FORMS ---------- */
form { margin: 0; }
label {
  display: block;
  color: var(--text-soft);
  font-size: 13px;
  margin-bottom: 6px;
  font-weight: 600;
}
label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 10px 0;
  font-weight: 500;
}
label.checkbox input {
  width: auto;
  margin-top: 3px;
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field { margin-bottom: 18px; }
.field .help {
  font-size: 12px;
  color: var(--dim);
  margin-top: 6px;
  line-height: 1.5;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color: var(--bg-deep);
  padding: 11px 24px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
  transition: all 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
  filter: brightness(1.1);
  text-decoration: none;
}
.btn:active { transform: translateY(0); }
.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--bg-card-hover); color: var(--bright); }
.btn-danger {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-bright) 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(201, 42, 42, 0.3);
}
.btn-danger:hover { box-shadow: 0 4px 16px rgba(201, 42, 42, 0.5); }
.btn-warn {
  background: linear-gradient(135deg, var(--warn) 0%, var(--warn-bright) 100%);
  color: var(--warn-soft);
  box-shadow: 0 2px 8px rgba(224, 138, 48, 0.3);
}
.btn-warn:hover { box-shadow: 0 4px 16px rgba(224, 138, 48, 0.5); }
/* Un lien habille en bouton : a:hover (l.69) est plus specifique que .btn-warn et lui
   volait sa couleur de texte au survol. Ces quatre regles rendent a chaque variante la
   sienne. L'ordre est significatif, elles ont toutes la meme specificite. */
a.btn:hover           { color: var(--bg-deep); }
a.btn-secondary:hover { color: var(--bright); }
a.btn-danger:hover    { color: white; }
a.btn-warn:hover      { color: var(--warn-soft); }
.btn-small { padding: 6px 14px; font-size: 12px; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ---------- ALERTS ---------- */
.alert {
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  border-left: 4px solid;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert::before {
  font-size: 18px;
  line-height: 1;
}
.alert-success { background: var(--green-soft); border-color: var(--green-bright); color: var(--green-bright); }
.alert-success::before { content: '✓'; }
.alert-error { background: var(--red-soft); border-color: var(--red); color: var(--red-pale); }
.alert-error::before { content: '✕'; }
.alert-warning { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-bright); }
.alert-warning::before { content: '⚠'; }
.alert-info { background: rgba(74, 120, 199, 0.15); border-color: var(--blue); color: var(--blue-bright); }
.alert-info::before { content: 'ℹ'; }

/* ---------- TABLES ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th, td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
th {
  color: var(--dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  background: var(--bg-deep);
}
tr:hover td { background: var(--bg-soft); }
tr:last-child td { border-bottom: 0; }

/* ---------- NOTIF ---------- */
.notif-item {
  padding: 14px 16px;
  border-left: 3px solid var(--blue);
  background: var(--bg-card);
  margin-bottom: 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: background 0.15s ease;
}
.notif-item:hover { background: var(--bg-card-hover); }
.notif-item.unread {
  border-left-color: var(--accent);
  background: var(--bg-soft);
}
.notif-item .notif-title { color: var(--bright); font-weight: 600; font-size: 15px; }
/* La teinte du titre dit le type de la notification. Elle vient d'une classe et non d'un
   style en ligne : une couleur ne se decide qu'ici. Et ce sont les variantes CLAIRES de
   la palette, comme pour les pastilles — les variantes sombres sont faites pour servir
   de fond, et en texte sur cette carte elles tombent a 1,27 contre 1. */
.notif-item .notif-title.notif-success { color: var(--green-bright); }
.notif-item .notif-title.notif-warning { color: var(--warn-bright); }
.notif-item .notif-title.notif-danger  { color: var(--red-pale); }
.notif-item .notif-meta { color: var(--dim); font-size: 11px; margin-top: 4px; }
.notif-item .notif-body { margin-top: 6px; font-size: 14px; color: var(--text-soft); }

/* ---------- DETAILS / SUMMARY ---------- */
details summary {
  list-style: none;
  padding: 10px 0;
  position: relative;
  padding-left: 24px;
}
details summary::before {
  content: '▶';
  position: absolute;
  left: 0;
  top: 10px;
  font-size: 10px;
  color: var(--accent);
  transition: transform 0.15s ease;
}
details[open] summary::before { transform: rotate(90deg); }
details summary::-webkit-details-marker { display: none; }

/* Un <summary> habille en bouton n'est PAS un depliant ordinaire. Le triangle pose juste
   au-dessus est en position absolue sur le bord gauche du summary : dans un bouton, il
   tombe a l'interieur et decale le libelle par rapport aux vrais boutons voisins. Le
   panneau d'administration en compte quinze, sur cinq pages.
   La barre de navigation avait deja recu ce correctif, mais chez elle seule
   (.admin-grp > summary::before, plus bas). Ici on le pose a la racine, pour tous. */
details > summary.btn::before,
details > summary.btn-ico::before { content: none; display: none; }

/* Une rangee de boutons d'action : ils s'alignent sur le meme bord haut et passent a la
   ligne proprement quand la colonne est etroite, au lieu de flotter chacun a sa facon.
   Le gap remplace les marges posees a la main sur chaque bouton. */
/* Un tableau large tenu dans sa carte. Sans ce contenant, un tableau dont une colonne
   refuse de se comprimer — une rangee d'icones, par exemple — deborde de la carte et vient
   mordre sur la page. Avec, il defile a l'horizontale et la carte reste entiere. La barre
   de defilement n'apparait que si elle sert. */
.table-defile { overflow-x: auto; }

/* Tableau resserre (admin/users.php, actes de propriete de admin/logement.php) : moins de
   marge dans chaque case, pour que les colonnes tiennent sur un ecran d'ordinateur courant
   sans barre de defilement. */
.table-serree th, .table-serree td { padding: 8px 6px; }
/* Ses icones d'action : l'ecart de la rangee (4 px) et rien d'autre. Le margin:2px ecrit dans
   la page sur chaque depliant et sur le formulaire VIP bat la regle .btn-rangee > details plus
   bas (un style en ligne passe avant toute classe) et doublait l'ecart : 24 px de plus. */
.table-serree .btn-rangee > details,
.table-serree .btn-rangee > form { margin: 0 !important; }
/* L'infobulle de la DERNIERE icone de la rangee (Notes) s'aligne sur son bord droit au lieu
   d'etre centree. Centree, elle depassait du tableau de quelques pixels : invisible, mais
   comptee, et la barre de defilement revenait des que la colonne etait a son minimum. */
.table-serree .btn-rangee-ico > :last-child > .btn-ico::after { left: auto; right: 0; transform: none; }
/* Actes de propriete (admin/logement.php) : TOUTES les infobulles de la rangee s'alignent sur le
   bord droit de leur icone et s'etendent vers la gauche, au-dessus des colonnes voisines. Les
   actions sont la derniere colonne : centree, celle de l'avant-derniere icone (« Mettre en
   pause », 119 px) finissait a 3,4 px du bord du tableau, a 1280 px de large (mesure dans
   Chromium le 2026-10-13). Un mot a peine plus long ramenait la barre de defilement. */
.table-actes .btn-rangee-ico .btn-ico::after { left: auto; right: 0; transform: none; }
/* Actes de propriete : « monde normal » et « 256 b² » ne passent pas a la ligne, sur un
   appareil a survol seulement. La rangee d'icones y tient sur une ligne, et ces deux mots
   coupes doublaient la hauteur de l'acte. Au telephone, les boutons montrent leur mot et
   s'empilent : leur pile fait deja la hauteur de la ligne, et insecables ces deux cases n'y
   faisaient qu'elargir le tableau a faire glisser (1067 px au lieu de 998 a 360 px de large,
   mesure dans Chromium le 2026-10-13). */
@media (hover: hover) {
  .table-actes .acte-insecable { white-space: nowrap; }
}

/* Pour une cellule qui contient un mot insecable trop long — une adresse de courriel n'a
   aucune espace ou revenir a la ligne, alors elle elargit sa colonne autant qu'il faut. */
.coupe-mot { overflow-wrap: anywhere; }

/* A POSER SUR UNE BOITE, JAMAIS SUR UN <td>. Une cellule de tableau passee en flex cesse
   d'etre une cellule : elle sort du calcul des colonnes du tableau, et les bordures de
   ligne cessent de s'aligner d'une ligne a l'autre. Mettre un <div> dans la cellule. */
.btn-rangee { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }

/* Un bouton d'action de ligne, reduit a son icone. Le style .btn est celui d'un bouton
   PRINCIPAL — gras a 700, degrade, ombre portee — et six d'entre eux dans une cellule de
   tableau ecrasaient tout le reste. Ici : un carre sobre, la couleur au survol seulement,
   et le rouge reserve a ce qui detruit.

   LE MOT N'EST PAS SUPPRIME. Il reste dans le document, masque a l'oeil mais lu par les
   lecteurs d'ecran, et il REAPPARAIT plus bas sur les appareils sans survol — ou
   l'infobulle n'existe tout simplement pas. */
.btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; padding: 0;
  background: transparent; color: var(--text-soft);
  border: 1px solid var(--border); border-radius: 5px;
  font-size: 14px; font-family: inherit; line-height: 1;
  cursor: pointer; text-decoration: none; position: relative;
  transition: background .12s, color .12s, border-color .12s;
}
.btn-ico:hover { background: var(--bg-card-hover); color: var(--bright); border-color: var(--accent); z-index: 2; }
.btn-ico-danger:hover { background: var(--red-soft); color: var(--red-pale); border-color: var(--red); }
a.btn-ico:hover { color: var(--bright); }

/* Le libelle, masque a l'oeil mais present pour qui n'a pas d'yeux. */
.btn-ico-txt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.btn-ico::after {
  content: attr(data-lbl);
  position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  background: var(--bg-deep); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 4px;
  padding: 3px 8px; font-size: 11px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.btn-ico:hover::after, .btn-ico:focus-visible::after { opacity: 1; }

/* Pas de survol — un doigt sur un telephone : l'infobulle n'existerait jamais. On rend
   le mot plutot que de laisser l'usager deviner six pictogrammes. */
@media (hover: none) {
  .btn-ico { width: auto; height: auto; padding: 5px 10px; gap: .4em; }
  .btn-ico-txt { position: static; width: auto; height: auto; margin: 0;
                 overflow: visible; clip-path: none; font-size: 12px; }
  .btn-ico::after { content: none; }
}
.btn-rangee > details, .btn-rangee > .btn, .btn-rangee > form { margin: 0; }

/* Une rangee d'ICONES tient sur une seule ligne : six carres de trente pixels demandent a
   peine deux cents pixels, et le tableau elargit la colonne pour les loger. Sans ca elles
   se cassaient en deux rangees des que la colonne se serrait.
   On ne l'impose QUE sur un appareil a survol : sur un telephone les libelles reapparaissent
   a cote des icones, et forcer une seule ligne ferait deborder la page. */
@media (hover: hover) {
  .btn-rangee-ico { flex-wrap: nowrap; }
}

/* ---------- FENETRE D'ACTION (admin/users.php, admin/logement.php) ----------
   Un <dialog> ouvert par assets/fenetre-action.js (showModal) : le formulaire d'une action
   (ou, pour un acte de propriete, la liste de ses piliers) s'ouvre au milieu de l'ecran,
   par-dessus la page, au lieu de gonfler sa case du tableau (JM, 2026-10-13 : « une fenetre
   a l'interieur de la page »). Fermee, le navigateur la cache ; sans JavaScript elle ne
   s'ouvre jamais et les depliants font le travail.
   Elle ne depasse jamais l'ecran (12 px de marge tout autour) : si le formulaire est plus
   haut, c'est le corps qui defile, la tete et sa croix restent en vue. */
dialog.fenetre {
  width: 34rem;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
dialog.fenetre[open] { display: flex; flex-direction: column; }
dialog.fenetre::backdrop { background: rgba(5, 5, 15, 0.72); }
.fenetre-tete {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 20px;
  border-bottom: 1px solid var(--border);
}
.fenetre-titre {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  overflow-wrap: anywhere;
}
.fenetre-fermer {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 5px;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.fenetre-fermer:hover { background: var(--bg-card-hover); color: var(--bright); border-color: var(--accent); }
/* Le bouton « Copier » du nom (Supprimer, admin/users.php), juste après le titre : le titre ne
   s'étire plus et ✕ reste à droite. Caché, il le reste malgré le display de .btn-copy (thème). */
.fenetre-tete.avec-copier .fenetre-titre { flex: 0 1 auto; }
.fenetre-tete.avec-copier .fenetre-fermer { margin-left: auto; }
.fenetre-copier { flex: none; }
.fenetre-copier[hidden] { display: none !important; }
.fenetre-corps {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px 20px;
  overflow-wrap: anywhere;
}
/* Le contenu deplace (un formulaire, ou le panneau des piliers d'un acte) garde ses champs et
   ses styles de texte. Seuls tombent l'aplat, la marge et la largeur minimale faits pour la
   case du tableau : la fenetre est deja la carte, et ces 240 a 300 px minimum debordaient d'un
   petit telephone. Le !important bat le style en ligne, ici seulement : rendu a son depliant,
   le contenu retrouve son allure. */
.fenetre-corps > * {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
  body { font-size: 14px; }
  header.site-header { padding: 10px 16px; }
  header.site-header .logo { font-size: 22px; }
  header.site-header nav { gap: 0; margin-left: 0; width: 100%; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  header.site-header nav a { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
  main.site-main { padding: 0 16px; margin: 16px auto; }
  .card { padding: 18px 20px; border-radius: var(--radius); }
  .fenetre-tete { padding: 10px 10px 10px 16px; }
  .fenetre-titre { font-size: 16px; }
  .fenetre-corps { padding: 14px 16px 16px; }
  /* Au téléphone, Copier passe sous le titre : à côté, il ne laissait au nom qu'une dizaine de
     lettres par ligne. ✕ reste en haut à droite. */
  .fenetre-tete.avec-copier { flex-wrap: wrap; row-gap: 8px; }
  .fenetre-tete.avec-copier .fenetre-titre { flex: 1 1 calc(100% - 56px); }
  .fenetre-tete.avec-copier .fenetre-fermer { order: 1; margin-left: 0; }
  .fenetre-tete.avec-copier .fenetre-copier { order: 2; }
  .hero { padding: 32px 20px; }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  .grid-3, .grid-2 { gap: 12px; }
  .stat-tile .stat-value { font-size: 28px; }
}

/* ------------- Bouton "Copier l'adresse" ------------- */
.btn-copy {
  display: inline-block;
  padding: 6px 12px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.18s, transform 0.05s;
  user-select: none;
}
.btn-copy:hover {
  background: #e6c14a;
}
.btn-copy:active {
  transform: scale(0.96);
}
.btn-copy.copied {
  background: #34d399;
  color: #0a2818;
}
.btn-copy.copy-fail {
  background: var(--red);
  color: #fff;
}


/* --- États soft-delete des comptes du site --- */
/* Archivé : le compte supprimé depuis sept jours. JM, 2026-10-12 : sur le site, « prison »
   veut dire la prison en jeu ; un compte du site n'y va jamais, il est archivé. */
.badge-archive {
  background: #444;
  color: #ddd;
  border: 1px solid #666;
}
.badge-pending-del {
  background: #5d3d0a;
  color: #ffd180;
  border: 1px solid #d4a017;
}
/* --- Prison EN JEU : membre de guilde emprisonné (admin/guildes.php) --- */
.badge-prison {
  background: #444;
  color: #ddd;
  border: 1px solid #666;
}


/* --- Sous-menu admin sticky --- */
.admin-subnav {
  background: linear-gradient(180deg, rgba(212,175,55,0.08), rgba(212,175,55,0.02));
  border-bottom: 1px solid rgba(212,175,55,0.25);
  padding: 8px 16px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  z-index: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.admin-subnav-label {
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.5px;
  margin-right: 12px;
  padding: 4px 8px;
  border-right: 1px solid rgba(212,175,55,0.3);
}
.admin-subnav a {
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  font-weight: 500;
}
.admin-subnav a:hover {
  background: rgba(212,175,55,0.15);
  color: var(--accent);
}
.admin-subnav a.active {
  background: var(--accent);
  color: #131329;
  font-weight: 600;
}
@media (max-width: 720px) {
  .admin-subnav { font-size: 12px; padding: 6px 10px; }
  .admin-subnav-label { display: block; width: 100%; margin: 0 0 6px 0; border-right: none; border-bottom: 1px solid rgba(212,175,55,0.3); padding-bottom: 4px; }
}

/* --- Toggle langue FR/EN --- */
.lang-toggle button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 18px;
  padding: 2px 6px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, border-color 0.2s, background 0.2s;
  line-height: 1;
}
.lang-toggle button:hover {
  opacity: 1;
  background: rgba(212,175,55,0.15);
}
.lang-toggle button.lang-active {
  opacity: 1;
  border-color: var(--accent);
  background: rgba(212,175,55,0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Groupes du menu d'administration

   Vingt et une entrees alignees ne se balaient pas ; sept tetes, si. La tete se comporte
   exactement comme un lien de la barre — meme taille, meme survol dore — et le panneau
   reprend le style d'une carte : fond --bg-card, filet dore, ombre du theme. Une pointe le
   raccroche a sa tete pour qu'on voie d'ou il sort.

   La fleche PIVOTE au lieu de changer de caractere : substituer un glyphe change sa largeur,
   et la tete sursaute a chaque ouverture.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.admin-grp { position: relative; }

.admin-grp > summary {
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  transition: background 0.15s, color 0.15s;
}
.admin-grp > summary::-webkit-details-marker { display: none; }
/* Le site pose deja un triangle devant CHAQUE summary (voir « details summary::before » plus
   haut). Utile dans une page, mais dans une barre de navigation il alourdit chaque tete —
   et l'etat ouvert se lit deja au fond dore. On le retire ici seulement. */
.admin-grp > summary::before { content: none; display: none; }

.admin-grp > summary:hover { background: rgba(212,175,55,0.15); color: var(--accent); }

.admin-grp[open] > summary { background: rgba(212,175,55,0.15); color: var(--accent); }

/* Le groupe qui contient la page courante reste dore meme referme : sans ce repere, on ne
   sait plus dans quelle famille on se trouve des qu'on a ferme le menu. */
.admin-grp-ici > summary { color: var(--accent); }

.admin-grp > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.admin-grp-liste {
  position: absolute;
  z-index: 95;
  left: 0;
  top: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 12.5rem;
  padding: 6px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid rgba(212,175,55,0.28);
  box-shadow: var(--shadow-lg);
}
.admin-grp-liste::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 14px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: var(--bg-card);
  border-left: 1px solid rgba(212,175,55,0.28);
  border-top: 1px solid rgba(212,175,55,0.28);
}
.admin-grp-liste a { padding: 5px 10px; border-radius: 5px; }

/* Au telephone, un panneau flottant recouvrirait la moitie de l'ecran : il se pose dans le
   flux, et la pointe n'a plus de sens. */
@media (max-width: 640px) {
  .admin-subnav { flex-wrap: wrap; }
  .admin-grp-liste { position: static; box-shadow: none; margin-top: 4px; min-width: 0; }
  .admin-grp-liste::before { display: none; }
}
/* Certains usagers demandent a leur systeme de reduire les animations : vertiges,
   migraines vestibulaires. Ce bloc etait tronque et ne s'appliquait a rien. On coupe
   large plutot que regle par regle, sinon chaque transition ajoutee plus tard
   rouvrirait le trou en silence. 0.01ms et non 0 : une duree nulle empeche certains
   navigateurs d'emettre les evenements de fin d'animation dont depend du code. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Horloge du serveur, dans l'en-tete

   Elle affiche l'heure de l'Est, pas celle du visiteur : un joueur en France doit lire
   l'heure du serveur, sinon elle contredirait l'annonce horaire qu'il recoit en jeu.

   tabular-nums est indispensable — sans lui, les chiffres n'ont pas la meme largeur et la
   ligne tressaute a chaque seconde.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.horloge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  margin-left: 14px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(212,175,55,0.05);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.horloge-h {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 500;
  color: var(--bright);
  letter-spacing: 0.02em;
}
.horloge-z {
  font-size: 0.68em;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Au telephone, la barre est deja serree : on garde l'heure, on laisse tomber le fuseau. */
@media (max-width: 640px) {
  .horloge { margin-left: 8px; padding: 3px 7px; }
  .horloge-z { display: none; }
}

/* ── Panneau des piliers d'un terrain ────────────────────────────────────────────────────
   Remplace l'ancien champ numerique de 42 px, ou il fallait deviner le numero du pilier a
   couper. Chaque pilier a maintenant sa carte : numero, position, etat, et un bouton qui dit
   ce qu'il fait.
   Le panneau est le contenu du depliant 🧱 de la ligne de l'acte (admin/logement.php) : il
   s'ouvre dans la fenetre d'action, ou, sans JavaScript, dans la case, avec l'allure des
   formulaires de confirmation voisins. Il remplace la ligne entiere « Piliers et reperes »
   qui doublait la hauteur de chaque acte (JM, 2026-10-13). */

.pilier-panneau {
  margin-top: 6px;
  padding: 8px;
  background: var(--bg-soft);
  border-radius: 4px;
  min-width: 240px;
}

.pilier-compte { font-size: 12px; color: var(--dim); margin: 0; }

.pilier-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  padding: 10px 4px 4px;
}

.pilier-carte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  background: var(--bg-card);
  border-left: 3px solid var(--green-bright);
}

.pilier-carte.pilier-rouge { border-left-color: var(--warn); }

.pilier-titre { font-weight: 600; font-size: 13px; }

.pilier-pos {
  font-size: 12px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.pilier-etats { display: flex; flex-wrap: wrap; gap: 4px; }

.pilier-vide { font-size: 12px; color: var(--dim); padding: 8px 4px; }

/* Le règlement à titres (JM, 2026-10-13 : « 1. Triche. », puis un saut de ligne et la règle décalée). Le titre est le
   premier paragraphe de la règle ; la règle, en dessous, est décalée. Page Règles (.regle-titree, lib/page_md.php) et
   sujet « reglement » du guide (public/guide.php, une puce par règle). */
.regle-titree { margin-bottom: 16px; }
.regle-titree > p:first-child,
.gp-regles li[id^="reglement-"] > p:first-of-type { font-weight: 700; margin-bottom: 4px; }
.regle-titree > p + p,
.gp-regles li[id^="reglement-"] > p + p { margin-top: 0; margin-left: 2em; }

/* ---------- LES VACANCES : le calendrier (templates/vacances-calendrier.php) ----------
   Repris de la maquette approuvée (maquette-vacances.php, c463cbc), avec une grille fluide : un mois
   tient dans 320 à 360 px au téléphone (T12 du plan). Les cases à cocher ne sont cachées qu'avec le
   script (classe js posée par assets/vacances-calendrier.js) : sans lui, elles restent visibles et
   l'enregistrement marche. Les règles portent .vac-cal devant .vac-jour : elles passent ainsi
   devant « label » de style.css et « .theme-nether label » de l'habillage Nether. */
.vac-cal { margin: 8px 0; }
.vac-compteur { font-weight: 700; color: var(--accent); margin: 6px 0; }
.vac-compteur-suivant { font-size: 13px; color: var(--text-soft); margin: 0 0 6px; }
.vac-alerte { color: var(--warn-bright); background: var(--warn-soft); border-left: 3px solid var(--warn); padding: 8px 12px; margin: 6px 0; font-size: 14px; }
.vac-calendrier { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin: 12px 0; }
.vac-mois { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.vac-titre { font-size: 16px; font-weight: 700; color: var(--bright); margin-bottom: 6px; text-transform: capitalize; }
.vac-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.vac-entete { font-size: 12px; color: var(--dim); text-align: center; }
.vac-cal .vac-jour {
  position: relative; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; margin: 0; padding: 2px 0; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--bg-deep);
  color: var(--text); cursor: pointer; font-size: 15px; font-weight: 400; line-height: 1.1; letter-spacing: 0; text-shadow: none;
  user-select: none; -webkit-user-select: none;
}
.vac-cal .vac-jour input { margin: 0; }
.vac-cal.js .vac-jour input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.vac-cal .vac-jour.choisi,
.vac-cal .vac-jour:has(input:checked) { background: var(--green-bright); color: #000; border-color: var(--green-bright); font-weight: 700; }
/* Les marques d'un jour choisi passent DEVANT le vert du jour choisi : « .vac-jour:has(input:checked) »
   compte un élément de plus (0,3,1) que « .vac-jour.supp » (0,3,0) ; d'où la même règle répétée avec
   :has(input:checked), qui l'emporte (0,4,1). Sinon un jour pas couvert ou supplémentaire restait d'un
   vert ordinaire, alors que la légende les montre en rouge et en pointillé foncé. */
.vac-cal .vac-jour.supp,
.vac-cal .vac-jour.supp:has(input:checked) { border: 2px dashed #0d3b1a; }
.vac-cal .vac-jour.non-couvert,
.vac-cal .vac-jour.non-couvert:has(input:checked) { border: 2px dashed var(--red-bright); background: var(--red-pale); color: #000; }
.vac-cal .vac-jour.passe { opacity: .35; cursor: default; }
.vac-cal .vac-jour.fin-fenetre { box-shadow: inset 0 0 0 2px #ff4d4d; }
/* La Clémence : le coin noir d'un jour posé par l'administrateur (JM, 2026-10-17 : « je veux pouvoir distinguer
   aussi quelle date l'admin a ajouté dans le calendrier »). Un triangle en haut à droite, visible sur le vert et
   sur le rouge pâle, dans les deux thèmes. */
.vac-cal .vac-jour.par-admin::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 12px 12px 0; border-color: transparent #000 transparent transparent; }
.vac-cal .vac-jour.auj .vac-num { text-decoration: underline; text-underline-offset: 3px; }
.vac-cal .vac-jour.evenement .vac-num { text-decoration: underline dotted var(--accent); color: var(--accent); }
.vac-cal .vac-jour:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.vac-cal .vac-jour:not(.passe):hover { border-color: var(--accent); }
.vac-pastilles { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 9px; }
.vac-pt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.vac-pt.fin { background: transparent; border: 2px solid #ff4d4d; }
.vac-pt.vide { visibility: hidden; }
.vac-legende { font-size: 13px; color: var(--text-soft); margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.vac-leg { display: inline-flex; align-items: center; gap: 6px; }
.vac-jour-ex { display: inline-block; flex: none; width: 14px; height: 14px; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--bg-deep); }
.vac-jour-ex.choisi { background: var(--green-bright); border-color: var(--green-bright); }
.vac-jour-ex.supp { background: var(--green-bright); border: 2px dashed #0d3b1a; }
.vac-jour-ex.non-couvert { background: var(--red-pale); border: 2px dashed var(--red-bright); }
.vac-jour-ex.fin-fenetre { box-shadow: inset 0 0 0 2px #ff4d4d; }
.vac-jour-ex.par-admin { position: relative; }
.vac-jour-ex.par-admin::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent #000 transparent transparent; }
.vac-liste { font-size: 14px; color: var(--text-soft); margin: 6px 0 10px; }
/* La barre collée au bas de l'écran, sous les mois : le message d'un jour refusé, le compteur et le
   bouton restent sous les yeux au téléphone, quel que soit le mois où l'on choisit (l'en-tête du site
   colle déjà en haut : la barre colle en bas). */
.vac-barre { position: sticky; bottom: 0; z-index: 5; background: var(--bg-card); border-top: 1px solid var(--border); margin: 8px 0 0; padding: 8px 0; }
.vac-barre .vac-alerte { margin: 0 0 6px; }
.vac-barre-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.vac-barre-ligne .vac-compteur { margin: 0; }
.vac-barre-ligne p { margin: 0; }
.vac-supp-liste { font-weight: 700; color: var(--warn-bright); margin: 6px 0; }
.vac-sous-titre { margin: 16px 0 4px; font-size: 16px; color: var(--bright); }
.vac-note { font-size: 13px; color: var(--text-soft); margin: 6px 0; }
/* Quoi faire, pas à pas : au-dessus du calendrier de la Clémence, et sous chaque demande en attente. */
.vac-etapes { border-left: 3px solid var(--accent); background: var(--bg-soft); padding: 8px 12px; margin: 6px 0 12px; }
.vac-etapes p { margin: 4px 0; }
.vac-etapes ol { margin: 6px 0; padding-left: 22px; }
.vac-actes td .vac-pt { margin-right: 4px; }
.vac-impaye { color: var(--red-bright); }
.vac-encadre { border-left: 3px solid var(--green-bright); }
.vac-demande textarea { min-height: 80px; }
.vac-demandes-liste { list-style: none; padding: 0; margin: 8px 0; }
.vac-demandes-liste > li { padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.vac-demandes-liste .vac-texte,
.vac-etapes .vac-texte { white-space: pre-wrap; }

/* Ancres sans thème (#u12 de Utilisateurs, #r3 des Signalements…) : la cible tombait sous l'en-tête
   collant. Même règle que theme-nether.css, à ses hauteurs ; :where() garde le poids d'une classe. */
:where(.site-main [id]) { scroll-margin-top: 145px; }
@media (min-width: 721px) and (max-width: 1239px) { :where(.site-main [id]) { scroll-margin-top: 186px; } }
@media (max-width: 720px) { :where(.site-main [id]) { scroll-margin-top: 277px; } }

/* Un pseudo cliquable dans un titre de carte (Signalements) : souligné, pour qu'on le voie au téléphone. */
.card h3 a > code { text-decoration: underline; text-underline-offset: 3px; }

/* La fiche du joueur, partie administrateur (admin/joueur.php). Des paires « libellé : valeur » et des
   listes plutôt que des tableaux : au téléphone (360 px), rien ne défile de côté ; les paires passent
   l'une sous l'autre. Seuls les mouvements d'émeraudes sont un tableau, dans un cadre qui défile au besoin. */
.fiche-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 8px; }
.fiche-entete h1 { margin: 0; overflow-wrap: anywhere; }
.fiche-intro { color: var(--text-soft); max-width: 75ch; }
.fiche-liens { margin: 0 0 16px; }
.fiche-sommaire { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 16px; font-size: 14px; }
.fiche-dl { display: grid; grid-template-columns: minmax(10em, max-content) minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.fiche-dl dt { color: var(--dim); }
.fiche-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fiche-rien { color: var(--dim); font-style: italic; }
.fiche-meta { font-size: 13px; color: var(--dim); }
.fiche-texte { white-space: pre-wrap; overflow-wrap: anywhere; }
.fiche-uuid { font-size: 12px; overflow-wrap: anywhere; }
.fiche-liste { list-style: none; padding: 0; margin: 0; }
.fiche-liste > li { padding: 8px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.fiche-liste > li:first-child { border-top: 0; padding-top: 0; }
.fiche-sous-titre { font-size: 15px; margin: 16px 0 6px; color: var(--bright); }
.fiche-suite { margin: 12px 0 0; font-size: 14px; }
.fiche-nowrap { white-space: nowrap; }
.fiche-montant-plus { color: var(--green-bright); }
.fiche-montant-moins { color: var(--red-bright); }
@media (max-width: 560px) {
  .fiche-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fiche-dl dd { margin-bottom: 10px; }
}

/* ---------- LA PRISON (admin/prisons.php, admin/guildes.php ; templates/prison-durees.php) ----------
   Les trois durées en tuiles (JM, 2026-10-14 : « la durée je dois ÉCRIRE ?? ») : trois boutons radio,
   aucun coché. Tuile libre : la dalle des boutons secondaires ; tuile choisie : l'or du bouton principal,
   par label:has(input:checked), sans script. Le bouton radio reste visible : un navigateur qui ne connaît
   pas :has montre quand même le choix. Trois tuiles par rangée jusqu'au téléphone de 360 px ; 44 px de
   haut au moins, une cible de doigt. Les règles portent .choix-tuiles devant .choix-tuile : elles passent
   devant « label » de style.css et « .theme-nether label » de l'habillage. */
.choix-tuiles { border: 0; margin: 10px 0 0; padding: 0; min-width: 0; }
.choix-tuiles legend { padding: 0; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.choix-tuiles-rangee { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 440px; }
.choix-tuiles .choix-tuile {
  display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 6px 10px;
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border-strong); border-radius: 6px;
  box-shadow: var(--shadow-sm); cursor: pointer; font-size: 14px; font-weight: 400; line-height: 1.15;
}
.choix-tuiles .choix-tuile input { margin: 0; flex: none; }
.choix-tuiles .choix-tuile-txt { display: flex; flex-direction: column; min-width: 0; }
.choix-tuiles .choix-tuile-txt strong { font-size: 15px; }
.choix-tuiles .choix-tuile-txt small { font-size: 11px; color: var(--text-soft); }
.choix-tuiles .choix-tuile:hover { border-color: var(--accent); }
.choix-tuiles .choix-tuile:has(input:checked) {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color: var(--bg-deep); border-color: var(--accent); font-weight: 700;
}
.choix-tuiles .choix-tuile:has(input:checked) small { color: var(--bg-deep); }
.choix-tuiles .choix-tuile:has(input:focus-visible) { outline: 2px solid #a46bff; outline-offset: 2px; }
.choix-tuiles-note { font-size: 12px; color: var(--dim); margin: 6px 0 10px; }
@media (max-width: 400px) {
  .choix-tuiles .choix-tuile { gap: 5px; padding: 6px 7px; }
}

/* Le formulaire et la liste des prisonniers. Une carte par prisonnier plutôt qu'un tableau : au
   téléphone, rien ne défile de côté, et les boutons Rallonger et Libérer passent sous sa ligne. */
.prison-form { display: flex; flex-direction: column; gap: 4px; max-width: 640px; }
.prison-form .prison-champ { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.prison-form select, .prison-form textarea { width: 100%; }
.prison-form .btn { align-self: flex-start; margin-top: 8px; }
.prison-note { font-size: 12px; color: var(--dim); margin: 6px 0; }
.prison-avis { color: var(--warn-bright); background: var(--warn-soft); border-left: 3px solid var(--warn); padding: 8px 12px; margin: 0 0 10px; font-size: 14px; }
.prison-avis a { color: inherit; text-decoration: underline; }
.prison-liste { list-style: none; padding: 0; margin: 0; }
.prison-item { padding: 12px 0; border-top: 1px solid var(--border); }
.prison-item:first-child { border-top: 0; padding-top: 0; }
.prison-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px; overflow-wrap: anywhere; }
.prison-compte { font-size: 12px; color: var(--dim); }
.prison-dl { margin-bottom: 8px; }
.prison-actions { align-items: center; }
.prison-actions-titre { font-size: 13px; color: var(--text-soft); margin-right: 2px; }
.report-prison { align-items: center; margin: 0 0 10px; }
.report-prison-note { font-size: 12px; color: var(--dim); }

/* Signalements (admin/reports.php) : les phrases du chat gardées avec la plainte, une case chacune, et la case
   « Preuve vidéo vérifiée par les administrateurs ». Rien n'est coché d'avance (JM, 2026-10-15). Une phrase longue
   ou un mot sans espace (du « spam ») passe à la ligne : rien ne défile de côté au téléphone de 360 px. */
.report-preuves { margin: 0 0 10px; }
.report-chat { border: 1px solid var(--border); border-radius: 6px; padding: 4px 12px 6px; margin: 0 0 6px; min-width: 0; }
.report-chat legend { padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--text-soft); overflow-wrap: anywhere; }
.report-chat-liste { list-style: none; padding: 0; margin: 0; }
.report-chat-liste li + li { border-top: 1px solid var(--border); }
.report-chat-liste label.checkbox, .report-video { margin: 0; overflow-wrap: anywhere; }
.report-chat-heure { font-variant-numeric: tabular-nums; color: var(--dim); margin-right: 4px; }
.report-chat-texte { color: var(--text); }
/* Le texte du plaignant : un long lien sans espace passait de côté sans thème (le thème Nether coupe déjà ses .alert). */
.report-texte { overflow-wrap: anywhere; }
/* L'historique du plaignant, juste sous « Par X le … » (JM, 2026-10-15) : discret comme cette ligne-là, collé à elle,
   et il passe à la ligne au téléphone. */
.report-historique { font-size: 13px; color: var(--dim); margin: -8px 0 12px; overflow-wrap: anywhere; }