/* Charte visuelle de Grimoire — refonte 2026-08 inspirée de TeamCraft
   (voir docs/superpowers/specs/2026-08-11-refonte-visuelle-teamcraft-design.md).
   Fond neutre profond, accent cuivré, Rajdhani pour tout le texte UI/corps.
   Cinzel réservé au seul mot "Grimoire" du logo (dégradé doré — seul
   vestige assumé de l'identité précédente, pas un thème à part entière) —
   partout ailleurs (titres de carte, features, glossaire...) c'est Rajdhani.

   Migration en 3 phases : Fondations (tokens + nav + boutons, livrée)
   -> pages connectées cœur (livrée : Dashboard/Équipe/Mon Stuff/Distribution/
   Gestion) -> pages publiques (en cours). Le socle partagé .page, .card,
   .corner (coins ornés) et les formulaires (.errorlist, label, input,
   select, .code) a été retinté à cette occasion : Connexion/Inscription en
   héritent mécaniquement (même classes CSS) même si leur passage en revue
   dédié n'a pas encore eu lieu.
   Les sélecteurs plus bas dans ce fichier qui n'ont pas encore été repris
   gardent l'ancienne palette codée en dur jusqu'à leur phase —
   cohabitation transitoire assumée. */

:root {
  --bg-base: #15161a;
  --bg-surface: #1c1c20;
  --border: #33312a;

  --text: #e7e3d8;
  --text-muted: #93897a;
  --text-faint: #8d8375;

  --accent: #c9924f;
  --accent-hover: #e0ac6c;
  --accent-contrast: #1c1c20;

  --loot-purple: #8a72b5;
  --loot-blue: #4a89c9;
  --loot-green: #6fa87a;
  --loot-yellow: #d4b23f;
  --loot-red: #c1706f;
  --loot-neutral: #3a382f;

  --radius-sm: 6px;
  --radius-md: 8px;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
}

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

select,
input {
  font-family: 'Rajdhani', sans-serif;
}

::selection {
  background: #c9924f4d;
}

/* Skip-link (audit code/design/DB, 2026-08-12) : hors écran tant qu'il n'a
   pas le focus clavier — évite à un utilisateur clavier/lecteur d'écran de
   traverser toute la nav latérale (jusqu'à 9 liens) à chaque page pour
   atteindre le contenu. Pas de outline:none nulle part dans ce fichier
   (voir <main id="main-content"> visé) : le focus par défaut du
   navigateur suffit à le rendre visible dès qu'il apparaît. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 100;
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
}
.skip-link:focus {
  top: 8px;
}

/* --- Coquille applicative (connecté) : sidebar + zone de contenu --- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 200px;
  flex: none;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  gap: 2px;
  overflow: hidden;
  transition: width 0.15s ease;
}
#app-shell.sidebar-collapsed .sidebar {
  width: 64px;
}

.sidebar-logo {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 19px;
  background: linear-gradient(135deg, #e8c67e, #a9803f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 2px 8px 4px;
}
#app-shell.sidebar-collapsed .sidebar-logo {
  margin: 2px 0 4px;
  font-size: 17px;
  text-align: center;
}

.sidebar-guild-name {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 8px 16px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* .sidebar-link habille aussi bien des <a> que le <button> de déconnexion
   (id sidebar-toggle inclus) : margin-top/width neutralisent explicitement
   le sélecteur global `button` (grimoire.css, section Formulaires) qui
   imposerait sinon le style pleine largeur des boutons de formulaire à ces
   deux boutons de sidebar. text-transform/letter-spacing ci-dessous sont
   des resets défensifs actuellement inertes (le sélecteur global `button`
   ne pose plus ces propriétés) — gardés au cas où. */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  background: none;
  border: none;
  margin-top: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: 'Rajdhani', sans-serif;
}
.sidebar-link:hover {
  color: var(--text);
  background: none;
}
.sidebar-link.active {
  background: var(--accent);
  color: var(--accent-contrast);
}
.sidebar-icon {
  width: 18px;
  height: 18px;
  flex: none;
}
#app-shell.sidebar-collapsed .sidebar-label {
  display: none;
}
#app-shell.sidebar-collapsed .sidebar-guild-name {
  display: none;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.sidebar-logout {
  color: var(--text-faint);
}
.sidebar-logout:hover {
  color: var(--text-muted);
}
.sidebar-toggle {
  color: var(--text-faint);
  font-size: 13px;
}
.sidebar-toggle:hover {
  color: var(--text-muted);
}
#app-shell.sidebar-collapsed .sidebar-toggle .sidebar-icon {
  transform: rotate(180deg);
}

.app-main {
  flex: 1;
  min-width: 0;
  padding: 28px 32px;
}

/* --- Nav publique (déconnecté) --- */

.topbar {
  background: var(--bg-surface);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.topbar-logo {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 19px;
  background: linear-gradient(135deg, #e8c67e, #a9803f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topbar-links {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-link {
  color: var(--text-muted);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
}
.topbar-link:hover {
  color: var(--text);
}
.topbar-link-primary {
  background: var(--accent);
  color: var(--accent-contrast);
}
.topbar-link-primary:hover {
  color: var(--accent-contrast);
  background: var(--accent-hover);
}

/* --- Carte à coins ornés (formulaires connexion/inscription) --- */

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 80px 32px;
}
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 36px 32px;
  position: relative;
}
.corner {
  position: absolute;
  width: 12px;
  height: 12px;
}
.corner-tl { top: 8px; left: 8px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.corner-tr { top: 8px; right: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.corner-bl { bottom: 8px; left: 8px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.corner-br { bottom: 8px; right: 8px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }

.card h1 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 6px;
  text-align: center;
  color: var(--text);
}
.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: 0 0 24px;
}

/* --- Formulaires (rendu par {{ form.as_p }} : Django enveloppe chaque
   champ dans un <p>, avec un <label> et un <input>/<select> à l'intérieur) --- */

form p {
  margin: 0 0 16px;
}
label {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
input,
select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-base);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 2px;
  font-size: 16.5px;
  font-family: 'Rajdhani', sans-serif;
}
button {
  width: 100%;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  padding: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-top: 10px;
}
button:hover {
  background: var(--accent-hover);
}

/* Erreurs de formulaire Django (ul.errorlist, avant chaque champ fautif) */
.errorlist {
  list-style: none;
  margin: -6px 0 12px;
  padding: 0;
  text-align: center;
  font-size: 15.5px;
  color: var(--loot-red);
}

.footer-line {
  text-align: center;
  font-size: 15.5px;
  margin: 20px 0 0;
  color: var(--text-muted);
}

/* --- Lien retour (pages sous /gestion/, ex. Membres/Réglages) ---
   Pas de sous-menu façon Yomiko : avec seulement 2 destinations, un lien
   discret suffit à retrouver le hub sans ajouter un second système de nav
   à côté de la barre horizontale déjà présente partout dans l'appli. */

.back-link {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.back-link:hover {
  color: var(--accent-hover);
}

/* Messages Django (django.contrib.messages) */
.messages {
  list-style: none;
  max-width: 480px;
  margin: 16px auto 0;
  padding: 0 32px;
}
.messages li {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
}
.messages li.error {
  border-left-color: var(--loot-red);
  /* color-mix, pas un hex en dur (audit code/design/DB, 2026-08-12) : même
     formule de contraste que .team-matrix td.cell-red et le reste des
     couleurs loot sur fond teinté, cf. norme de design du projet. */
  color: color-mix(in srgb, var(--loot-red) 65%, var(--text));
}

/* --- Page large (listes avec actions, ex. demandes en attente) ---
   Nom différent de .page (déjà pris par la carte étroite à 480px) :
   contrairement à Svelte qui scope le CSS par composant, cette feuille
   est partagée par tous les templates — même nom de classe = collision. */

.page-wide {
  max-width: 1020px;
  margin: 0 auto;
  padding: 36px 32px 72px;
}
.page-wide h1 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 28px;
  margin: 0 0 6px;
  color: var(--text);
}
.page-wide h2 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--accent);
  margin: 40px 0 12px;
}

/* --- Tableau (porté depuis l'ancienne page "Gestion" du frontend Svelte) --- */

table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Rajdhani', sans-serif;
  font-size: 16.5px;
  margin-bottom: 16px;
}
thead tr {
  text-align: left;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
thead th {
  padding: 8px 6px;
  font-weight: 600;
}
tbody tr {
  border-bottom: 1px solid var(--border);
}
tbody tr:last-child {
  border-bottom: none;
}
tbody td {
  padding: 9px 6px;
}

/* --- Boutons secondaires (portés depuis "Gestion") ---
   button seul (déjà dans grimoire.css) reste le bouton principal pleine
   largeur des formulaires de carte ; .btn-primary/.btn-outline sont pour
   des actions groupées côte à côte (ex. Valider/Refuser par ligne). */

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
  cursor: pointer;
}
.btn-outline:hover {
  background: transparent;
  color: var(--text);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  padding: 9px 18px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--accent-contrast);
}
.btn-outline,
.btn-primary {
  width: auto;
  margin-top: 0;
}

/* --- Code d'invitation (affichage monospace) --- */

.code {
  font-family: ui-monospace, monospace;
  letter-spacing: 0.05em;
  background: var(--bg-base);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 2px;
}

/* --- Page Équipe : matrice joueurs × équipement (portée depuis
   l'ancienne page /team du frontend Svelte) --- */

.team-matrix {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: 'Rajdhani', sans-serif;
  font-size: 15.5px;
}
.team-matrix thead tr {
  text-align: left;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.team-matrix thead th {
  padding: 14px 6px;
  font-weight: 600;
}
/* table-layout: fixed distribue les colonnes selon ces largeurs plutôt que
   selon le contenu — c'est ce qui permet au tableau de tenir dans
   .page-full (1800px) sans jamais scroller horizontalement, y compris sur
   un écran PC 1366px de large. Joueur/Classe gardent plus de place que les
   12 slots, qui se partagent le reste à parts égales. */
.team-matrix th.col-name, .team-matrix td.name { width: 9%; }
.team-matrix th.col-role, .team-matrix td.role { width: 9%; }
.team-matrix thead th[data-slot] {
  width: 6.83%;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.15s, color 0.15s;
}
.team-matrix thead th[data-slot]:hover {
  color: var(--accent-hover);
}
.team-matrix thead th.col-focused {
  color: var(--accent-hover);
  box-shadow: inset 0 -2px var(--accent);
}
.team-matrix thead th.col-dimmed {
  opacity: 0.4;
}
.team-matrix tbody tr {
  border-bottom: 1px solid var(--border);
}
.team-matrix tbody tr:last-child {
  border-bottom: none;
}
.team-matrix tbody tr.row-focused {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.team-matrix tbody td {
  padding: 10px 6px;
  vertical-align: middle;
}
.team-matrix td.name,
.team-matrix td.role {
  cursor: pointer;
  transition: opacity 0.15s;
}
.team-matrix td.name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 14px 10px;
}
.team-matrix td.role {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 14px 10px;
}
.team-matrix td[data-slot] {
  text-align: center;
  transition: opacity 0.15s;
}
.team-matrix td.row-dimmed,
.team-matrix td.cell-dimmed {
  opacity: 0.35;
}
.team-matrix .gearval {
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: 3px;
  text-align: left;
  line-height: 1.35;
}
.team-matrix .gearval .mark {
  text-align: right;
  opacity: 0.85;
}
.team-matrix .gearval .dest {
  opacity: 0.85;
}
.team-matrix td.cell-purple { background: color-mix(in srgb, var(--loot-purple) 22%, transparent); color: color-mix(in srgb, var(--loot-purple) 65%, var(--text)); }
.team-matrix td.cell-blue { background: color-mix(in srgb, var(--loot-blue) 22%, transparent); color: color-mix(in srgb, var(--loot-blue) 65%, var(--text)); }
.team-matrix td.cell-green { background: color-mix(in srgb, var(--loot-green) 22%, transparent); color: color-mix(in srgb, var(--loot-green) 65%, var(--text)); }
.team-matrix td.cell-red { background: color-mix(in srgb, var(--loot-red) 22%, transparent); color: color-mix(in srgb, var(--loot-red) 65%, var(--text)); }
.team-matrix td.cell-empty { color: var(--text-faint); }

.team-matrix-intro {
  font-size: 16.5px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 20px;
}

.legend {
  display: flex;
  gap: 18px;
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--text-muted);
  font-family: 'Rajdhani', sans-serif;
  flex-wrap: wrap;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.legend-dot-purple { background: var(--loot-purple); }
.legend-dot-blue { background: var(--loot-blue); }
.legend-dot-green { background: var(--loot-green); }
.legend-dot-red { background: var(--loot-red); }

/* --- Page Mon Stuff : édition du stuff personnel + bouquins + portrait
   Lodestone (portée depuis l'ancien /gear du frontend Svelte). La légende
   couleur (.legend/.legend-item/.legend-dot*) est déjà définie globalement
   depuis le chantier Équipe — réutilisée telle quelle ici, pas redéfinie. */

.mystuff-intro {
  font-size: 16.5px;
  color: var(--text-muted);
  margin: 0 0 28px;
  font-style: italic;
}
.mystuff-identity {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  font-family: 'Rajdhani', sans-serif;
}
.mystuff-identity-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 21px;
  color: var(--text);
}
.mystuff-identity-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 16px;
  letter-spacing: 0.03em;
}

/* --- Icônes de job (logo officiel, un par classe) ---
   Réutilisées telles quelles sur Mon Stuff/Équipe/Dashboard. */
.job-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  vertical-align: middle;
  flex: none;
}
.dash-identity {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
/* Équipe : colonne Classe en icône seule (pas de texte) — la table est
   dense et chaque pixel de largeur compte (voir le chantier largeur de
   colonnes plus haut dans ce fichier). Nom complet toujours disponible
   au survol via un tooltip maison (voir .tooltip ci-dessous) — le
   title natif du navigateur a un délai d'affichage trop long et non
   ajustable en CSS. */
.job-icon-lg {
  width: 30px;
  height: 30px;
  border-radius: 6px;
}

.tooltip {
  position: relative;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease 0.1s;
  z-index: 10;
}
.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

.mystuff-split {
  display: flex;
  gap: 44px;
  align-items: flex-start;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.mystuff-col {
  flex: 1;
  min-width: 260px;
}
.mystuff-col-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.mystuff-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.mystuff-row:last-child {
  border-bottom: none;
}
.mystuff-label {
  width: 60px;
  flex: none;
  font-size: 15px;
}
/* input/select ont width:100% en global (voir plus haut dans ce fichier) —
   sans cet override, chaque select de la grille prendrait toute la largeur
   de sa colonne flex. Largeur fixe (92px) plutôt que flex:1 : porte la
   disposition compacte de l'ancien frontend Svelte (frontend/src/routes/gear/
   +page.svelte, .w-select) — un flex:1 étirait les selects sur toute la
   largeur de la colonne, très différent visuellement de la prod. */
.mystuff-row select {
  width: 92px;
  flex: none;
  box-sizing: border-box;
  text-align: center;
  /* Le padding/font-size globaux (10px 12px / 16.5px, pensés pour un champ
     de formulaire pleine largeur) tronquaient le texte dans 92px ("Catchup"
     -> "Catchu") — resserré pour matcher la densité de l'ancien frontend
     Svelte (padding: 4px 6px, font-size: 14px). */
  padding: 4px 6px;
  font-size: 14px;
}
.mystuff-row .legend-dot,
.mystuff-row .mystuff-dot-dash {
  flex: none;
}

.mystuff-portrait {
  flex: none;
  width: 200px;
  display: flex;
  justify-content: center;
}
.mystuff-portrait-img {
  width: 200px;
  aspect-ratio: 880 / 1200;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-sizing: border-box;
}
.mystuff-portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-size: 14.5px;
  color: var(--text-faint);
  font-family: 'Rajdhani', sans-serif;
}

.mystuff-tokens-table {
  margin-bottom: 24px;
}
.mystuff-tokens-table input[type="number"] {
  max-width: 100px;
}
.mystuff-col-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 10px;
  font-size: 13px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mystuff-col-header .mystuff-label {
  width: 60px;
  flex: none;
}
.mystuff-col-header-select {
  width: 92px;
  flex: none;
  text-align: center;
}
.mystuff-dot-dash {
  width: 8px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14.5px;
  display: inline-block;
  flex: none;
}
.mystuff-form-error {
  color: var(--loot-red);
  font-size: 14.5px;
  margin: 0 0 12px;
}

/* --- Gestion : cartes stats (hub + membres) ---
   Même structure que l'ancien tableau de bord "admin" (chiffre + libellé,
   accent coloré à gauche) mais avec la palette Grimoire — carte identique
   à .card (fond var(--bg-surface), bordure var(--border)), pas de fond plein coloré. Les
   3 teintes réutilisent les tokens --loot-blue/--loot-green/--loot-red
   déjà utilisés ailleurs dans l'appli, pour ne pas inventer de nouvelles
   couleurs qui n'existeraient nulle part ailleurs. */

.stat-cards {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.stat-card {
  flex: 1;
  min-width: 160px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
}
.stat-card-value {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--accent);
  line-height: 1.2;
}
.stat-card-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.stat-card-blue { border-left-color: var(--loot-blue); }
.stat-card-blue .stat-card-value { color: var(--loot-blue); }
.stat-card-red { border-left-color: var(--loot-red); }
.stat-card-red .stat-card-value { color: var(--loot-red); }
/* Rien en attente : la carte "Demandes" reste discrète plutôt que
   d'afficher un rouge alarmant pour un compte à zéro. */
.stat-card-quiet { border-left-color: var(--border); }
.stat-card-quiet .stat-card-value { color: var(--text-muted); }
.stat-card-link {
  display: block;
  color: inherit;
}
.stat-card-link:hover {
  border-left-color: var(--accent-hover);
}
.stat-card-link:hover .stat-card-value {
  color: var(--accent-hover);
}

/* --- Tuiles tableau de bord (contenu textuel multi-ligne, contrairement
   à .stat-card qui n'affiche qu'un seul gros chiffre) --- */
.dash-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.dash-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
}
.dash-card-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.dash-card-body {
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
}
.dash-card-body p {
  margin: 0 0 6px;
}
.dash-card-body p:last-child {
  margin-bottom: 0;
}
.dash-card-empty {
  color: var(--text-muted);
  font-style: italic;
}
.dash-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-card-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* --- Hub Gestion : cartes d'action vers Membres/Réglages --- */

.gestion-hub-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.gestion-hub-links a {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 18px 20px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 17px;
}
.gestion-hub-links a:hover {
  border-color: var(--accent);
}

/* --- Réglages : layout ouvert (page large, sans boîte) ---
   Deuxième itération après le premier essai en carte (.settings-card,
   retirée) : Alexandre a trouvé que ça faisait encore "à part" par
   rapport à Membres, qui n'a jamais eu de boîte autour de sa table.
   Ici, plus aucun conteneur visuel — juste des sections h2/rule comme le
   reste de l'appli (mystuff.html), avec les champs contraints en largeur
   individuellement plutôt que par un cadre englobant. */

.settings-hint {
  font-size: 15.5px;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.settings-form {
  max-width: 640px;
}
.settings-form input {
  max-width: 320px;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
  gap: 4px 24px;
}
.settings-grid input {
  max-width: 100%;
}

/* Interrupteur (remplace la coche native pour "Static ouverte") */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 6px 0 20px;
  cursor: pointer;
}
.toggle-row span:first-child {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex: none;
}
.toggle input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.15s, background 0.15s;
}
.toggle input:checked ~ .toggle-slider {
  background: var(--border);
  border-color: var(--accent);
}
.toggle input:checked ~ .toggle-slider::before {
  transform: translateX(20px);
  background: var(--accent-hover);
}
.toggle input:focus-visible ~ .toggle-slider {
  border-color: var(--accent-hover);
}

/* --- Badges de statut (rôle, actif/remplaçant) ---
   Rôle en bleu neutre (information, pas un jugement) ; Actif en vert ;
   Remplaçant en doré (couleur d'identité de l'appli, plutôt qu'une des
   3 teintes data — un remplaçant n'est ni "bon" ni "mauvais"). */

.badge {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 2px;
}
.badge-blue {
  background: color-mix(in srgb, var(--loot-blue) 20%, var(--bg-surface));
  color: color-mix(in srgb, var(--loot-blue) 65%, var(--text));
}
.badge-green {
  background: color-mix(in srgb, var(--loot-green) 20%, var(--bg-surface));
  color: color-mix(in srgb, var(--loot-green) 65%, var(--text));
}
.badge-gold {
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-surface));
  color: color-mix(in srgb, var(--accent) 65%, var(--text));
}

/* --- Statut du sidecar (app Windows, Phase 2) — icône compacte + dropdown,
   sur le modèle Teamcraft plutôt qu'un pill texte permanent (retour direct
   d'Alexandre en test réel, 2026-08-20) : au repos, une seule petite icône
   colorée ; le détail (libellé + bouton Réinjecter) n'apparaît qu'au clic. */

.sidecar-status { position: relative; }
.sidecar-status[hidden] { display: none; }

.sidecar-status-icon {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--loot-neutral);
  transition: transform 0.15s ease;
}
.sidecar-status-icon:hover { transform: scale(1.12); }
.sidecar-status-icon-gold { background: var(--accent); }
.sidecar-status-icon-green { background: var(--loot-green); }
.sidecar-status-icon-red { background: var(--loot-red); }

/* position: fixed (pas absolute) : la sidebar a overflow:hidden (pour le
   texte des libellés pendant l'animation de repli) — un panneau en
   absolute plus large que la sidebar (200px) s'y faisait découper
   silencieusement, cachant le bouton Réinjecter à droite de la ligne.
   Bug réel vécu par Alexandre en test (2026-08-20). fixed échappe au
   overflow:hidden de tout ancêtre ; top/left sont posés en JS
   (app_sidecar_status.js) via getBoundingClientRect() de l'icône, pas en
   CSS, puisque fixed n'a plus de parent positionné comme repère. */
.sidecar-status-panel {
  position: fixed;
  min-width: 250px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 60;
}
.sidecar-status-panel[hidden] { display: none; }

.sidecar-status-panel-title {
  margin: 0 0 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.sidecar-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: var(--text);
}

.sidecar-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--loot-neutral);
  flex-shrink: 0;
}
.sidecar-status-dot-green { background: var(--loot-green); }
.sidecar-status-dot-gold { background: var(--accent); }
.sidecar-status-dot-red { background: var(--loot-red); }

.sidecar-status-label { flex: 1; }

.sidecar-status-reinject {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.sidecar-status-reinject svg { width: 14px; height: 14px; }
.sidecar-status-reinject:hover { background: var(--loot-neutral); }
.sidecar-status-reinject:disabled { opacity: 0.5; cursor: default; }
.sidecar-status-reinject[hidden] { display: none; }

/* --- Distribution : floors à cocher + message d'erreur config --- */

.distribution-floors {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-bottom: 18px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 15.5px;
}
.distribution-floors label {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  margin-bottom: 0;
}
.distribution-floors input[type="checkbox"] {
  width: auto;
  accent-color: var(--accent);
}
.distribution-floors-form button {
  width: auto;
}
.distribution-error {
  font-size: 15.5px;
  color: var(--loot-red);
}

/* --- Distribution : tableau de proposition (réattribution + slot d'application) --- */

/* input/select ont width:100% en global (voir en tête de fichier) — dans
   une cellule de tableau, ça les étire inutilement ; resserré pour rester
   lisible à côté du nom du destinataire proposé, même logique que
   .mystuff-row select. */
.distribution-proposal-table select {
  width: auto;
  min-width: 160px;
  box-sizing: border-box;
  padding: 6px 8px;
  font-size: 14.5px;
}
.distribution-proposal-table td {
  vertical-align: middle;
}

/* Badge générique (utilisé par le lien Vitrine dans la sidebar et par le
   badge "preprod" de l'accès rapide sur /connexion/). */
.tag {
  font-size: 10.5px;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1px 4px;
}

/* --- Pages large format (Équipe, Vitrine) : leur contenu (tableau 12
   colonnes, grille 4 blocs) a besoin de plus que les 1020px de
   .page-wide pour ne pas scroller/s'entasser sur un écran PC normal.
   Deuxième classe ajoutée EN PLUS de .page-wide (pas un remplacement) :
   garde son padding et son style h1/h2, n'override que max-width —
   l'ordre des règles dans ce fichier (après .page-wide) lui donne la
   priorité à spécificité égale. --- */
.page-full {
  max-width: 1800px;
}

/* --- Vitrine (superuser) --- */
.vitrine-guild-picker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

/* Grille 4 colonnes plutôt qu'une longue liste empilée 1 par 1 — plus
   confortable à parcourir avec 8+ joueurs dans une static. */
.vitrine-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 28px;
}
.vitrine-player-block {
  min-width: 0;
}
.vitrine-player-block h2 {
  margin-top: 0;
}

/* Variante compacte de .mystuff-split, réservée à Vitrine : Armure et
   Accessoires empilés au lieu de côte à côte, sinon 4 blocs par ligne ne
   tiennent pas sur un écran PC normal (chaque .mystuff-col veut déjà
   min-width: 260px). Ne touche pas .mystuff-split lui-même : /mon-stuff/
   garde sa mise en page côte à côte inchangée. */
.mystuff-split-compact {
  flex-direction: column;
  gap: 20px;
}

/* --- Landing (visiteur déconnecté sur "/") et rappel de CTA sur les
   pages d'accueil connectées (home_no_guild/home_guild) --- */
.landing-intro {
  max-width: 640px;
  margin: 24px 0 56px;
}
/* h1 = le mot "Grimoire" en toutes lettres, en plus grand que partout
   ailleurs sur le site : seul autre endroit, avec sidebar-logo/topbar-logo,
   à porter Cinzel + le dégradé doré (le "vestige assumé" du fichier). */
.landing-intro h1 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 44px;
  background: linear-gradient(135deg, #e8c67e, #a9803f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 8px;
}
.landing-tagline {
  font-size: 19px;
  color: var(--accent);
  margin: 0 0 20px;
}
.landing-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 28px;
}
.landing-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.landing-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 40px;
}
.landing-feature {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 24px;
}
.landing-feature h2 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  margin: 0 0 10px;
}
.landing-feature p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

/* --- /help --- */
.help-steps {
  padding-left: 24px;
  line-height: 1.7;
}
.help-steps li {
  margin-bottom: 10px;
}
.help-pages dt {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  color: var(--accent);
  margin-top: 16px;
}
.help-pages dd {
  margin: 4px 0 0;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- Accès rapide (preprod uniquement, /connexion/) --- */
.quick-login {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.quick-login-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.quick-login form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- OAuth (Connexion/Inscription) : Google/Discord en placeholders —
   pas de backend OAuth branché côté Django, boutons desactivated + badge
   ".tag" "Bientôt" plutôt que des liens morts. Inspiré du séparateur/
   boutons OAuth de Projet-Yomiko, réhabillé sur les tokens Fondations
   (pas le style Bootstrap/dégradé violet d'origine). Les icônes Google/
   Discord gardent leurs couleurs de marque officielles même désactivées,
   pour rester identifiables. --- */
.oauth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--text-faint);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.oauth-divider::before,
.oauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn-oauth {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-base);
  color: var(--text-muted);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: not-allowed;
  opacity: 0.65;
  margin-top: 0;
}
.btn-oauth:hover {
  background: var(--bg-base);
}
.btn-oauth svg {
  flex: none;
}
.btn-oauth .tag {
  margin-left: auto;
}

/* --- Inscription : indicateur de force du mot de passe (JS, voir
   static/js/password_strength.js) — même concept que Projet-Yomiko
   (barre + libellé qui réagissent à la frappe), réhabillé sur la palette
   Grimoire (--loot-*/--accent) plutôt que les couleurs Bootstrap. --- */
.pw-strength {
  margin: 8px 0 4px;
}
.pw-strength-bar {
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.pw-strength-fill {
  height: 100%;
  width: 0%;
  background: var(--loot-red);
  transition: width 0.15s ease, background 0.15s ease;
}
.pw-strength-label {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-faint);
}

/* Badge numérique sur un lien de sidebar (notifications non lues) —
   .sidebar-link est déjà display:flex, margin-left:auto pousse le badge
   à droite sans toucher au reste de la mise en page. */
.sidebar-badge {
  margin-left: auto;
  background: var(--loot-red);
  color: var(--accent-contrast);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
}

/* Liste de notifications sur /gestion/ — mêmes tokens que .messages
   (bannière de django.contrib.messages) mais sans son max-width/margin
   centré : ce bloc vit dans .page-wide, pas sous la topbar. */
.notification-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.notification-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--loot-red);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
}
.notification-item time {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 2px;
}

/* --- Panneau Scanner (Mon Stuff, app Windows Phase 2) --- */

.scan-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.scan-panel[hidden] { display: none; }

.scan-job-reminder {
  color: var(--accent);
  font-weight: 600;
}

.mystuff-scan-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.mystuff-scan-badge[hidden] { display: none; }

.scan-apply-btn,
.scan-ignore-btn {
  font-size: 11px;
  padding: 2px 7px;
}