/* Habillage du site (toutes les vues sous .kikole-board, cf. Views/Shared/_Layout.cshtml
   qui enveloppe chaque page) + la navigation globale (.site-nav, presente sur toutes les
   pages, en dehors de .kikole-board) + le fond de page (body/footer, hors .kikole-board).
   Direction visuelle (2026-09-26, validee sur maquette) : mode sombre par defaut, contraste
   eleve, une seule couleur d'accent (vert) reservee a l'action/la reussite, le rouge pour
   le cout/l'erreur, l'or pour le score et les recompenses. Voir
   C:\Users\LPI\.claude\plans\linear-pondering-wind.md pour le detail du scope des fichiers. */

:root {
  --bg: #0a0d12;
  --surface: #141922;
  --surface-2: #1b212c;
  --surface-3: #232a37;
  --border: #2a3140;
  --border-soft: #1e2530;
  --border-strong: #3f4a5f;
  --text: #f2f4f8;
  --text-muted: #c9d0dd;
  --text-faint: #99a3b6;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --accent: #35d07f;
  --accent-ink: #06210f;
  --accent-soft: rgba(53, 208, 127, 0.14);
  --warn: #ff7a6b;
  --warn-soft: rgba(255, 122, 107, 0.13);
  --gold: #e8b44c;
  --gold-soft: rgba(232, 180, 76, 0.14);
  --shadow: rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------- fond de page
   Hors .kikole-board : le footer (copyright) et le <hr/> de _Layout.cshtml sont des
   freres de RenderBody(), pas des enfants de .kikole-board. */

/* base typographique + box-sizing : reprise a la main de ce que fournissait Bootstrap
   silencieusement avant sa suppression (2026-09-29) - seul ce que le site en utilisait
   reellement (aucun composant Bootstrap, juste ce reset). */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.42857143;
}

.body-content > hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 28px 0 14px;
}

.body-content footer {
  color: var(--text-faint);
  font-size: 12px;
  text-align: center;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-bottom: 10px;
}

/* couleur explicite (jusqu'ici fournie silencieusement par le `a { color }` global de
   Bootstrap, retire le 2026-09-29) - alignee sur la convention deja en place ailleurs
   sur le site pour les liens de contenu (.form-card a, .hint a...). */
.site-footer-links a { color: var(--accent); }

/* ---------------------------------------------------------- navigation globale
   Chrome de _Layout.cshtml, presente sur toutes les pages (pas seulement sous
   .kikole-board) : remplace l'ancienne navbar Bootstrap fixe. */

body { padding-top: 0; }

.site-nav {
  font-family: var(--font-sans);
  background: var(--surface-2);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}

.site-nav * { box-sizing: border-box; }

.site-nav-inner {
  max-width: 836px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  height: 64px;
}

.site-nav-brand {
  font-family: "Bebas Neue", sans-serif;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-decoration: none;
  flex: none;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

.site-nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-nav-icon,
.site-nav-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

/* pastille "message a lire" (icones Contact et Actions admin, cf. _Layout.cshtml) */
.site-nav-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  border: 1.5px solid var(--surface-2);
}

.site-nav-badge-inline {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--warn);
}

.site-nav-icon svg,
.site-nav-icon-btn svg {
  width: 23px;
  height: 23px;
}

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

.site-nav-logout-form { display: contents; }

.site-nav-logout:hover {
  background: var(--warn-soft);
  color: var(--warn);
}

.site-nav-flag img {
  width: 22px;
  height: 22px;
  border-radius: 2px;
}

.site-nav-user {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.site-nav-login {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
  padding: 6px 12px;
}

.site-nav-login:hover {
  background: var(--accent-soft);
}

.site-nav-burger {
  display: none;
  flex: none;
  /* 44px : taille minimale recommandee pour une cible tactile confortable
     (le trait visuel reste fin, seule la zone cliquable grandit) */
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-left: auto;
}

.site-nav-burger:hover { background: var(--surface-3); }

.site-nav-burger span {
  display: block;
  width: 17px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav-burger.open span:nth-child(2) { opacity: 0; }
.site-nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-nav-drawer {
  display: none;
  max-height: 0;
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  transition: max-height 0.25s ease;
}

.site-nav-drawer.open { max-height: 80vh; overflow-y: auto; }

.site-nav-drawer-inner { padding: 8px 18px 14px; }

.site-nav-drawer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
}

.site-nav-drawer-row:hover { color: var(--accent); }

.site-nav-drawer-row svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
  flex: none;
}

.site-nav-drawer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
}

.site-nav-drawer-foot .site-nav-user { color: var(--accent); }
.site-nav-drawer-foot .site-nav-icon-btn { color: var(--text); }
.site-nav-drawer-foot .site-nav-icon-btn:hover { background: var(--surface-3); }
.site-nav-drawer-foot .site-nav-logout:hover { background: var(--warn-soft); color: var(--warn); }
.site-nav-drawer-foot-actions { display: flex; align-items: center; gap: 4px; }

@media (max-width: 680px) {
  .site-nav-links,
  .site-nav-right { display: none; }
  .site-nav-burger { display: inline-flex; }
  .site-nav-drawer { display: block; }
}

.kikole-board {
  font-family: var(--font-sans);
  color: var(--text);
  max-width: 800px;
  margin: 20px auto 0;
}

.kikole-board * { box-sizing: border-box; }

/* ---------------------------------------------------------- masthead */

.kikole-board .masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.kikole-board .day-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.kikole-board .day-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* cible tactile confortable (cf. .site-nav-burger) : le bouton grandit,
     l'icone (16px) garde sa taille */
  width: 40px;
  height: 40px;
  flex: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kikole-board .day-nav-arrow svg { width: 16px; height: 16px; }

.kikole-board a.day-nav-arrow:hover { color: var(--text); border-color: var(--text-faint); }

.kikole-board .day-nav-arrow.disabled {
  color: var(--text-faint);
  opacity: 0.45;
  cursor: default;
}

.kikole-board .day-nav .small-link { margin-left: 4px; }

.kikole-board .date-field {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 10px;
  background: var(--surface-2);
  color: var(--text);
  width: 116px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.kikole-board .date-field:hover { border-color: var(--text-faint); }

.kikole-board .date-field:focus-visible {
  outline: none;
  border-color: var(--accent);
}

/* tri "% de badges" du classement general : les dates n'ont pas de sens (cumul sans
   notion de periode), desactivees plutot que masquees. Opacite moderee, pas plus bas,
   pour rester lisible. */
.kikole-board .date-field:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.kikole-board .day-nav .date-field { width: 104px; }

.kikole-board .masthead-score {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* serie de jours consecutifs trouves a temps (cf. HomeModel.Streak) : pictogramme +
   deux lignes de texte, directement a gauche du cadran de points. */
.kikole-board .streak {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kikole-board .streak-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent);
}

.kikole-board .streak-lines {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: right;
  white-space: nowrap;
}

.kikole-board .streak-line {
  font-size: 11px;
}

.kikole-board .streak-line.current {
  font-weight: 700;
  color: var(--text);
}

.kikole-board .streak-line.best {
  color: var(--text-faint);
}

.kikole-board .scoreboard {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 18px 7px;
  text-align: right;
  box-shadow: 0 6px 14px var(--shadow);
  flex: none;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 2px;
}

.kikole-board .scoreboard .label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.kikole-board .scoreboard .value {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

/* joueur du jour trouve : le cadran devient la seule source du score (la ligne
   "score final" a disparu, redondante) - surbrillance verte plutot qu'un badge
   separe, tant qu'on est sur cet ecran de victoire */
.kikole-board .scoreboard.success {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 6px 14px var(--shadow);
}

.kikole-board .scoreboard.success .value { color: var(--accent); }

/* jour consulte different d'aujourd'hui : le cadran reste exact (le score affiche est
   deja celui du jour consulte, cf. CurrentDay), mais attenue pour signaler que ce n'est
   pas le score du jour present - evite de le confondre avec un score "live". .found
   garde une trace discrete (teinte verte, sans le halo de .success) plutot que de
   perdre completement l'info "ce jour-la a ete trouve" en s'eloignant d'aujourd'hui. */
.kikole-board .scoreboard.other-day {
  border-color: var(--border);
  box-shadow: none;
}

.kikole-board .scoreboard.other-day .label,
.kikole-board .scoreboard.other-day .value { opacity: 0.55; }

.kikole-board .scoreboard.other-day .value { color: var(--text); }

.kikole-board .scoreboard.other-day.found .value { color: var(--accent); }

/* ---------------------------------------------------------- formulaires generiques
   (page Compte, presentation/regles) : reprennent .banner/.blank/.actions ci-dessous
   dans un habillage plus simple qu'un dossier de joueur. */

.kikole-board .form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px var(--shadow);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.kikole-board .form-card h3 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 22px 0 12px;
}

.kikole-board .form-card h3:first-child { margin-top: 0; }

.kikole-board .form-card p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.kikole-board .form-card p:last-child { margin-bottom: 0; }

.kikole-board .form-card ul {
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-muted);
}

.kikole-board .form-card a { color: var(--accent); }

/* sections repliables (Statistics/Stats.cshtml) : le JS (site.js, deja en place) ne
   gere que l'ouverture/fermeture (classe .active + display block/none), tout l'habillage
   vient d'ici - remplace le look gris plat de site.css dans ce scope. */
.kikole-board .collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 4px 0;
  background: transparent;
  border: none;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.kikole-board .collapsible:hover,
.kikole-board .collapsible.active { background: transparent; color: var(--accent); }

.kikole-board .collapsible::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
}

.kikole-board .collapsible.active::after { content: "\2212"; }

.kikole-board .collapsiblecontent { padding-top: 16px; }

.kikole-board .chart-empty {
  font-size: 13px;
  color: var(--text-faint);
  font-style: italic;
  padding: 4px 0 12px;
}

.kikole-board .redtext { color: var(--warn); }
.kikole-board .greentext { color: var(--accent); }

/* ligne "vous" dans un tableau (classement, podiums) : la cellule utilisateur
   passe du rouge/or/argent/bronze habituel (lien generique, ou couleur de
   medaille sur les podiums) au vert, en gras, avec un petit marqueur textuel -
   le fond de ligne (even/odd/creator) n'est pas touche, les deux se superposent
   sans conflit. Specificite (type + classe) plutot que !important : gagne face
   a .redtext/.medal-gold/-silver/-bronze (deux classes) sans devoir lister
   chaque combinaison. */
.kikole-board td.you { color: var(--accent); font-weight: 700; }

.kikole-board .form-field { margin-bottom: 14px; }

.kikole-board .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.kikole-board .form-row .form-field { margin-bottom: 14px; }

.kikole-board .form-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.kikole-board .form-field .blank { max-width: 320px; }

.kikole-board .form-static {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.kikole-board .form-hint {
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.5;
  margin: -6px 0 14px;
}

/* .spaced : le -6px par defaut colle trop un hint qui suit une checkbox ou un
   <select> plutot qu'un champ texte classique (Admin/Index.cshtml). */
.kikole-board .form-hint.spaced { margin-top: 6px; }

.kikole-board .form-hint a { color: var(--accent); }

/* upload de media d'indice (site.js, injecte apres chaque .clue-field) */
.kikole-board .clue-upload-input {
  display: block;
  margin-top: 6px;
  max-width: 320px;
  font-size: 12px;
  color: var(--text-muted);
}

.kikole-board .clue-upload-status {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-faint);
}

.kikole-board .clue-upload-status.success { color: var(--accent); }
.kikole-board .clue-upload-status.error { color: var(--warn); }

.kikole-board .auth-notice p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.kikole-board .auth-notice p:last-child { margin-bottom: 0; }
.kikole-board .auth-notice a { color: var(--accent); font-weight: 600; }

.kikole-board hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 28px 0;
}

/* ---------------------------------------------------------- bandeaux */

.kikole-board .banner {
  font-size: 13px;
  padding: 11px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
  border: 1px solid transparent;
  border-left-width: 4px;
  box-shadow: 0 8px 20px var(--shadow);
}

.kikole-board .banner.success {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  border-left-color: var(--accent);
  color: var(--text);
}

.kikole-board .banner.error {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  border-left-color: var(--warn);
  color: var(--text);
}

.kikole-board .banner.info {
  background: var(--surface-2);
  border-color: var(--border);
  border-left-color: var(--accent);
  color: var(--text-muted);
}

/* bandeau d'annonce admin (page d'accueil) : icone + libelle + replier/deplier +
   "ne plus afficher" (persiste en cookie, cf. site.js). Composants scopes a
   .announcement plutot qu'a .banner directement, pour ne pas alourdir les autres
   usages de .banner (formulaires, page Compte...). */
.kikole-board .announcement { padding: 0; overflow: hidden; }

.kikole-board .announcement-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px 9px 14px;
}

.kikole-board .announcement-icon {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.kikole-board .announcement-label {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.kikole-board .announcement-toggle,
.kikole-board .announcement-dismiss {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.kikole-board .announcement-toggle:hover,
.kikole-board .announcement-dismiss:hover {
  background: var(--surface-3);
  color: var(--text);
}

.kikole-board .announcement-chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}

.kikole-board .announcement-dismiss {
  font-size: 15px;
  line-height: 1;
}

.kikole-board .announcement-body {
  padding: 0 14px 12px 37px;
  font-size: 13px;
}

.kikole-board .announcement.collapsed .announcement-body { display: none; }

.kikole-board .announcement.collapsed .announcement-chevron { transform: rotate(-90deg); }

.kikole-board .creator-line {
  font-size: 12px;
  color: var(--text-faint);
  margin: -8px 0 14px;
}

/* ---------------------------------------------------------- dossier card */

.kikole-board .dossier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px var(--shadow);
}

.kikole-board .dossier-head {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.kikole-board .dossier-head h1 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 14px;
}

/* nom du joueur ("Le joueur du jour est X" / "Le joueur du ... etait X", ce dernier
   vient du resx avec la classe .redtext) */
.kikole-board .player-name,
.kikole-board .dossier-head h1 .redtext { color: var(--gold); }

.kikole-board .clue {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.kikole-board .clue + .clue { margin-top: 10px; }

.kikole-board .clue .tag {
  flex: none;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 7px;
  padding: 4px 8px;
  margin-top: 0;
}

.kikole-board .clue p { margin: 0; color: var(--text); line-height: 1.5; }

/* indice image/audio/video : pas de ligne de base a aligner, le libelle reste en haut */
.kikole-board .clue:has(.clue-image, .clue-audio, .clue-video) { align-items: flex-start; }

/* indice d'epoque heberge en image (ex. i.imgur.com/xxx.png) plutot qu'en texte */
.kikole-board .clue-image {
  display: block;
  max-width: 220px;
  max-height: 140px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* indice audio/video uploade dans wwwroot (AdminController.UploadClueMedia) */
.kikole-board .clue-audio {
  display: block;
  max-width: 260px;
  height: 34px;
}

.kikole-board .clue-video {
  display: block;
  max-width: 260px;
  max-height: 160px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* ---------------------------------------------------------- rows */

.kikole-board .rows { padding: 4px 18px 2px; }

.kikole-board .dossier-row {
  display: grid;
  grid-template-columns: 172px 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  margin: 0;
}

.kikole-board .dossier-row:last-child { border-bottom: none; }

.kikole-board .dossier-row.solved {
  background: linear-gradient(90deg, var(--accent-soft), transparent 55%);
  margin: 0 -10px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 8px;
}

.kikole-board .dossier-row .field {
  padding-top: 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.kikole-board .dossier-row .cost { padding-top: 10px; }

.kikole-board .dossier-row.solved .field { padding-top: 4px; }
.kikole-board .dossier-row.solved .cost { padding-top: 4px; }

.kikole-board .dossier-row .field .hint {
  display: block;
  margin-top: 5px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.35;
  color: var(--text-faint);
}

.kikole-board .dossier-row .field .hint a { color: var(--accent); }

/* essais rates : visible qu'une categorie soit encore ouverte ou deja trouvee -
   chips arrondies, barrees, empilables (maquette "propositions fausses",
   2026-09-26) plutot qu'une simple liste de lignes. */

.kikole-board .attempts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.kikole-board .dossier-row.solved .attempts { margin: 0 0 8px; }

.kikole-board .attempt {
  /* neutre (pas --warn) : une tentative deja faite est de l'historique resolu, pas un
     avertissement actif - la confondre avec le cout en points (.cost, orange lui aussi
     dans la meme rangee) rendait les deux illisibles d'un coup d'oeil */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 5px 11px;
}

.kikole-board .attempt s { color: var(--text-faint); text-decoration-color: color-mix(in srgb, var(--text-faint) 55%, transparent); font-weight: 700; }

.kikole-board .attempt .tag {
  font-style: normal;
  color: var(--text-faint);
}

/* etat trouve */

.kikole-board .dossier-row.solved .value {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.kikole-board .dossier-row.solved .value svg,
.kikole-board .club svg {
  flex: none;
  width: 12px;
  height: 12px;
  padding: 4px;
  box-sizing: content-box;
  background: var(--accent);
  border-radius: 50%;
  color: var(--accent-ink);
  stroke: var(--accent-ink);
  stroke-width: 3;
  margin-top: 0;
}

.kikole-board .dossier-row.solved .cost {
  font-size: 11px;
  color: var(--text-faint);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--text-faint) 60%, transparent);
}

/* champ a completer */

.kikole-board .blank-wrap {
  position: relative;
  max-width: 260px;
}

.kikole-board .blank {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
}

/* champ mot de passe avec bascule afficher/masquer (oeil) : meme .blank en dessous,
   juste de la place en plus a droite pour le bouton icone. Bascule permanente (jusqu'a
   re-clic), pas seulement pendant l'appui - plus confortable a lire qu'un maintien. */
.kikole-board .password-wrap {
  position: relative;
  max-width: 560px; /* aligne sur .form-field .blank, cf. plus bas dans ce fichier */
}

.kikole-board .password-wrap .blank { padding-right: 42px; }

.kikole-board .password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-faint);
  cursor: pointer;
}

.kikole-board .password-toggle:hover { color: var(--text); background: var(--surface-3); }
.kikole-board .password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kikole-board .password-toggle .icon-eye { width: 18px; height: 18px; }
.kikole-board .password-toggle .icon-eye-slash { display: none; }
.kikole-board .password-toggle.showing { color: var(--accent); }
.kikole-board .password-toggle.showing .icon-eye-slash { display: block; }

/* boutons "Ok" caches (declenches en JS apres autocompletion) : sortis du flux, sinon
   leur ligne invisible ajoute du vide sous chaque champ */
.kikole-board .dossier-row input[type="submit"] {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
}

.kikole-board .blank::placeholder { color: var(--text-faint); font-style: italic; }

.kikole-board .blank:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.kikole-board select.blank {
  padding: 9px 12px;
  max-width: 220px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6afc1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 32px;
}

/* liste deroulante personnalisee (cf. site.js) : le bouton et les elements du panneau
   partagent le meme style, le <select> natif reste cache derriere */
.kikole-board .dd { position: relative; max-width: 220px; }

.kikole-board .dd-native { display: none; }

.kikole-board .dd-btn {
  display: block;
  text-align: left;
  cursor: pointer;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6afc1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

.kikole-board .dd-btn.placeholder { color: var(--text-faint); font-style: italic; }

.kikole-board .dd.open .dd-btn { border-color: var(--accent); }

.kikole-board .dd-list {
  display: none;
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 14px 34px var(--shadow);
  max-height: 260px;
  overflow-y: auto;
}

.kikole-board .dd.open .dd-list { display: block; }

.kikole-board .dd-item {
  padding: 9px 12px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.kikole-board .dd-item.placeholder { color: var(--text-faint); font-style: italic; }

.kikole-board .dd-item:hover { background: var(--surface-3); }

.kikole-board .dd-item.selected { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.kikole-board input[type="checkbox"] { accent-color: var(--accent); }

.kikole-board input[type="datetime-local"] {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 9px;
  background: var(--surface-2);
  color: var(--text);
}

.kikole-board textarea.blank {
  border-radius: 9px;
  padding: 10px 12px;
  min-height: 120px;
  resize: vertical;
  max-width: 100%;
}

.kikole-board .dossier-row.locked .cost {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: 999px;
  padding: 4px 11px;
  margin-top: 6px;
  width: 82px;
  text-align: center;
  white-space: nowrap;
}

.kikole-board .small-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
}

.kikole-board .small-link a { color: var(--accent); }

/* clubs deja trouves */

.kikole-board .club-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.kikole-board .club {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.kikole-board .club .loan {
  flex: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
}

/* ---------------------------------------------------------- final answer */

.kikole-board .final {
  margin: 14px 18px 18px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1.5px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.kikole-board .final .field {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.kikole-board .final-input {
  display: flex;
  gap: 10px;
  max-width: none;
  background: transparent;
  border: none;
  overflow: visible;
}

.kikole-board .final-input input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--text);
  min-width: 0;
}

.kikole-board .final-input input::placeholder { color: var(--text-faint); }

.kikole-board .final-input input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.kikole-board .final-input input.invalid {
  border-color: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-soft);
}

.kikole-board .final-error {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--warn);
}

.kikole-board .final-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

.kikole-board .final-submit,
.kikole-board .final-reveal {
  flex: none;
  border: none;
  border-radius: 9px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
}

.kikole-board .final-submit {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0 22px;
}

.kikole-board .final-submit:hover { filter: brightness(1.08); }
.kikole-board .final-submit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* "Devoiler" (jours precedents seulement) : meme gabarit que Valider, couleur distincte
   (--warn) pour ne pas laisser croire que c'est une simple variante de validation. */
.kikole-board .final-reveal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--warn);
  color: var(--bg);
  padding: 0 16px;
}

.kikole-board .final-reveal:hover { filter: brightness(1.08); }
.kikole-board .final-reveal:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kikole-board .final-reveal .icon-eye { width: 16px; height: 16px; flex: none; }

.kikole-board .final .attempts { margin-top: 12px; }

.kikole-board .final .caption {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--text-faint);
}

.kikole-board .final .caption strong { color: var(--warn); font-weight: 600; }

/* ---------------------------------------------------------- actions */

.kikole-board .actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* bouton "Decouvrez le classement" sous le message "resultats masques" (Leaderboard/Index) :
   un peu plus d'air qu'un .actions ordinaire, qui suit d'habitude un titre de section plutot
   qu'une simple ligne de texte juste au-dessus */
.kikole-board .daily-unlock-actions { margin-top: 10px; }

/* cellule "resultats masques" : centree plutot qu'alignee a gauche comme le reste du
   tableau - se lit comme un etat vide avec appel a l'action (pattern usuel), pas comme
   une ligne de donnees ordinaire */
.kikole-board .hidden-board-cell { text-align: center; }
.kikole-board .hidden-board-cell .daily-unlock-actions { justify-content: center; }

.kikole-board .actions button,
.kikole-board .actions a,
.kikole-board .confirm-modal-actions button {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 11px 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.kikole-board .confirm-modal-actions button.secondary {
  color: var(--text-muted);
  background: transparent;
  border-color: var(--border);
}

.kikole-board .actions button .cost { color: var(--warn); font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; }

.kikole-board .actions button:hover,
.kikole-board .actions a:hover,
.kikole-board .confirm-modal-actions button:hover { background: var(--surface-2); border-color: var(--text-faint); }
.kikole-board .actions button:focus-visible,
.kikole-board .actions a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kikole-board .actions button:disabled {
  cursor: default;
  opacity: 0.5;
}

.kikole-board .actions button:disabled:hover { background: var(--surface); border-color: var(--border); }
.kikole-board .actions button:disabled .cost { color: var(--text-faint); }

/* modale de confirmation (remplace confirm() natif du navigateur, cf. bouton "Give
   up") : cachee par defaut, .open l'affiche - meme convention que .site-nav-drawer.open */
.kikole-board .confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 10, 0.7);
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.kikole-board .confirm-modal.open { display: flex; }

.kikole-board .confirm-modal-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
  max-width: 320px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.kikole-board .confirm-modal-box p {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--text);
}

.kikole-board .confirm-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* popup de victoire (Home/Index.cshtml, JS site.js) : affichee ouverte des le
   rendu serveur quand HomeModel.JustWon est vrai (une seule fois, au moment reel
   ou le kikole est trouve - jamais sur une simple re-consultation), pas d'auto-
   fermeture, un clic n'importe ou dessus la ferme. Le feu d'artifice (canvas,
   site.js) est positionne derriere la carte et s'estompe seul, la carte reste
   affichee tant qu'on n'a pas clique. */
.kikole-board .win-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 10, 0.75);
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
  cursor: pointer;
}

.kikole-board .win-modal.open { display: flex; }

.kikole-board .win-modal-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.kikole-board .win-modal-box {
  position: relative;
  z-index: 1;
  background: var(--surface-2);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 26px 28px 22px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  text-align: center;
  cursor: default;
}

.kikole-board .win-modal-box .banner { text-align: left; }

.kikole-board .win-modal-scoreboard {
  display: inline-flex;
  margin: 4px 0 6px;
}

.kikole-board .win-modal-box .badges-grid {
  padding: 0;
  margin-top: 14px;
  grid-template-columns: repeat(2, 1fr);
  text-align: left;
}

@media (max-width: 480px) {
  .kikole-board .win-modal-box .badges-grid { grid-template-columns: 1fr; }
}

.kikole-board .win-modal-hint {
  margin: 16px 0 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* ---------------------------------------------------------- discussion
   (Home/Contact, Admin/Discussion) : fil de messages rendu par le partial
   Shared/Partial/DiscussionThread, "self"/"other" au lieu de "user"/"admin" pour
   fonctionner du point de vue de n'importe quel des deux lecteurs. */

.kikole-board .discussion-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.kikole-board .discussion-empty {
  font-size: 13px;
  color: var(--text-faint);
  font-style: italic;
}

.kikole-board .discussion-message {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.kikole-board .discussion-message.self {
  align-self: flex-end;
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.kikole-board .discussion-message-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.kikole-board .discussion-message p {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
}

/* puce "non lu" (Admin/Discussions) : meme forme que .same-day-tag, palette --warn
   (deja la couleur "a traiter" du projet) plutot que --accent (vert, deja pris
   par .same-day-tag pour un tout autre sens). */
.kikole-board .unread-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------- badges */

.kikole-board .badges-label {
  padding: 0 18px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.kikole-board .badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 0 18px 16px;
}

.kikole-board .badge-card {
  position: relative;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kikole-board .badge-card.secret {
  background: linear-gradient(165deg, color-mix(in srgb, var(--gold) 22%, var(--surface-3)), var(--surface-3) 70%);
  border-color: color-mix(in srgb, var(--gold) 55%, var(--border-strong));
}

.kikole-board .badge-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.kikole-board .badge-icon {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--accent);
}

.kikole-board .badge-card.secret .badge-icon { color: var(--gold); }

.kikole-board .badge-name {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--text);
  padding-top: 2px;
}

.kikole-board .badge-card.secret .badge-name { color: color-mix(in srgb, var(--gold) 70%, var(--text)); }

.kikole-board .badge-seal {
  margin-left: auto;
  flex: none;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 5px;
  padding: 2px 5px;
  white-space: nowrap;
}

.kikole-board .badge-desc { font-size: 12.5px; }

.kikole-board .badge-desc summary {
  cursor: pointer;
  list-style: none;
  color: var(--text-muted);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 1px;
}

.kikole-board .badge-desc summary::-webkit-details-marker { display: none; }

.kikole-board .badge-desc summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--text-muted);
  font-size: 10px;
  line-height: 1;
}

.kikole-board .badge-desc[open] summary::before { content: "\2212"; }

.kikole-board .badge-desc summary:hover { color: var(--accent); }
.kikole-board .badge-desc summary:hover::before { border-color: var(--accent); color: var(--accent); }

.kikole-board .badge-desc p {
  margin: 6px 0 0;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.45;
}

.kikole-board .badge-foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.kikole-board .badge-date {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
}

.kikole-board .badge-date.secret {
  color: var(--gold);
  border-color: var(--gold);
}

.kikole-board .badge-holders {
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
}

.kikole-board .badge-holders b { color: var(--warn); font-weight: 600; }

.kikole-board .badge-holders.solo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: color-mix(in srgb, var(--gold) 70%, var(--text));
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: 5px;
  padding: 2px 6px;
}

.kikole-board .badge-holders.solo svg { width: 11px; height: 11px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .kikole-board .actions button { transition: none; }
}

@media (max-width: 480px) {
  .kikole-board .dossier-row { grid-template-columns: 1fr; row-gap: 10px; }
  .kikole-board .dossier-row .cost { justify-self: start; }
  .kikole-board .dossier-row.solved { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .kikole-board .actions { flex-direction: column; }
  .kikole-board .actions button,
  .kikole-board .actions a { width: 100%; }
  .kikole-board .final-input { flex-direction: column; }
  .kikole-board .final-submit { padding: 13px; flex: 1; }
  /* "Devoiler" perd son libelle et devient un bouton carre (juste l'oeil) : sur une
     colonne deja etroite, un deuxieme bouton pleine largeur ferait beaucoup de hauteur
     pour une action secondaire */
  .kikole-board .final-reveal {
    flex: none;
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .kikole-board .final-reveal-label { display: none; }
  .kikole-board .dossier-head,
  .kikole-board .rows { padding-left: 18px; padding-right: 18px; }
  .kikole-board .final { margin-left: 18px; margin-right: 18px; }
}

/* ---------------------------------------------------------- tableaux de donnees
   (classement, podiums, statistiques utilisateur) : classes historiques de site.css
   (tabData, tabDataHead, even/odd/creator, fillN...) reprises telles quelles - certaines
   sont regenerees par site.js (tableaux du classement, cf. loadGlobalLeaderboard /
   loadDailyLeaderboard) donc ni les noms de classe ni les id ne peuvent changer. */

.kikole-board .table-wrap { overflow-x: auto; }

.kikole-board table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text);
}

.kikole-board thead th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--accent);
  padding: 8px 10px;
  white-space: nowrap;
  background: transparent;
}

.kikole-board tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.kikole-board tbody tr:last-child td { border-bottom: none; }

.kikole-board .even td { background: var(--surface-2); }
.kikole-board .odd td { background: var(--surface); }

.kikole-board .creator td {
  background: var(--gold-soft);
  font-weight: 600;
}

.kikole-board .tabDataBold { font-weight: 700; color: var(--text); }
.kikole-board .tabDataHeadBg { background: transparent; }

/* puce "le jour meme" (Leaderboard/User.cshtml, colonnes Tente ?/Trouve ?) : teinte de
   fond + texte en gras, lisible directement sans avoir a lire une legende sous le
   tableau - le titre HTML natif (survol) donne le detail pour qui le cherche. */
.kikole-board .same-day-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.kikole-board .fillCorrect { background: var(--accent-soft); }
.kikole-board .fillIncorrect { background: var(--warn-soft); }

.kikole-board .fill1 { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.kikole-board .fill2 { background: color-mix(in srgb, var(--gold) 24%, var(--surface)); }
.kikole-board .fill3 { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); }
.kikole-board .fill4 { background: color-mix(in srgb, var(--accent) 32%, var(--surface)); }
.kikole-board .fill5 { background: color-mix(in srgb, #4a6fa5 30%, var(--surface)); }
.kikole-board .fill6 { background: color-mix(in srgb, #8a6fb0 28%, var(--surface)); }
.kikole-board .fill7 { background: color-mix(in srgb, #b0784a 28%, var(--surface)); }
.kikole-board .fill8 { background: color-mix(in srgb, var(--text-faint) 22%, var(--surface)); }

.kikole-board .table-caption {
  font-size: 11px;
  color: var(--text-faint);
  margin: -4px 0 12px;
}

@media (max-width: 480px) {
  .kikole-board table { font-size: 11.5px; }
  .kikole-board thead th,
  .kikole-board tbody td { padding: 6px 7px; }
}

.kikole-board .medal-gold { color: var(--gold); font-weight: 700; }
.kikole-board .medal-silver { color: #c3ccd8; font-weight: 700; }
.kikole-board .medal-bronze { color: #c9884f; font-weight: 700; }

.kikole-board .profile-name {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 14px;
}

.kikole-board .badge-card.missing {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-strong);
}

.kikole-board .badge-card.missing .badge-icon { color: var(--text-faint); opacity: 0.6; }
.kikole-board .badge-card.missing .badge-name { color: var(--text-faint); }

/* ---------------------------------------------------------- autocompletion jQuery UI
   Le widget s'attache en enfant direct de <body>, hors de .kikole-board : override
   global necessaire, sans risque puisque c'est le meme composant partout sur le site. */

.ui-autocomplete {
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 14px 34px var(--shadow);
  padding: 4px;
}

.ui-autocomplete .ui-menu-item-wrapper {
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--text);
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  margin: 0;
}

/* ------------------------------------------------------------ datepicker jQuery UI
   Meme contrainte que .ui-autocomplete ci-dessus : #ui-datepicker-div s'attache en
   enfant direct de <body>. */

.ui-datepicker {
  font-family: var(--font-sans);
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 34px var(--shadow);
  padding: 8px;
  width: 240px;
}

.ui-datepicker .ui-datepicker-header {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 7px;
  padding: 4px 0;
}

.ui-datepicker .ui-datepicker-title {
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 4px;
  cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
  filter: invert(1) brightness(0.2);
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background: transparent;
  border: none;
  top: 4px;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 6px;
  height: auto;
}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-month { width: 52%; margin-right: 2%; }
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { width: 40%; }

.ui-datepicker table {
  margin: 6px 0 0;
}

.ui-datepicker th {
  color: var(--text-faint);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
}

.ui-datepicker td {
  padding: 1px;
}

.ui-datepicker td a.ui-state-default,
.ui-datepicker td span.ui-state-default {
  text-align: center;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 5px 0;
}

.ui-datepicker td span.ui-state-default { color: var(--text-faint); }

.ui-datepicker td a.ui-state-default:hover {
  background: var(--accent-soft);
  border: none;
}

.ui-datepicker td a.ui-state-default.ui-state-active {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.ui-datepicker td.ui-datepicker-unselectable .ui-state-default { opacity: 0.4; }

.ui-datepicker td.ui-datepicker-today a.ui-state-default {
  border: 1px solid var(--gold);
}

.ui-datepicker .ui-datepicker-buttonpane {
  border-top: 1px solid var(--border);
}

.ui-datepicker .ui-datepicker-buttonpane button {
  font-family: var(--font-sans);
  color: var(--text);
  background: transparent;
  border: none;
}

/* ---------------------------------------------------------- polices
   IBM Plex Sans (500) pour le texte, IBM Plex Mono pour les etiquettes, couts, dates,
   essais rates et tableaux (choix valide sur la page d'essais, variante E). Place en fin
   de fichier pour l'emporter sans toucher aux regles de mise en page ci-dessus. */

.kikole-board { font-weight: 500; }

.kikole-board input,
.kikole-board select,
.kikole-board textarea { font-weight: 500; }

.kikole-board .clue .tag,
.kikole-board .attempt,
.kikole-board .dossier-row.locked .cost,
.kikole-board .actions button .cost,
.kikole-board .club .loan,
.kikole-board .badge-date,
.kikole-board .badge-seal,
.kikole-board .date-field,
.kikole-board .scoreboard .label,
.kikole-board .scoreboard .value,
.kikole-board .streak-line,
.kikole-board table,
.kikole-board .same-day-tag,
.kikole-board .unread-tag {
  font-family: var(--font-mono);
}

.kikole-board .scoreboard .value { font-weight: 700; font-size: 28px; }

/* ---------------------------------------------------------- audit des pages (2026-09-26) */

/* controles natifs (icone du calendrier, barres de defilement, cases) en sombre */
:root { color-scheme: dark; }

/* le fond de ligne vient des cellules (.even td / .odd td) ; celui de site.css (blanc) doit disparaitre */
.kikole-board tr.even,
.kikole-board tr.odd { background: transparent; }

/* tableaux : le rouge historique des noms/entetes n'a plus de sens, on garde le vert des liens */
.kikole-board thead .redtext { color: var(--text-muted); }
.kikole-board td.redtext { color: var(--text); }
.kikole-board td.redtext.you { color: var(--accent); }

/* liens texte cotes a cotes (Admin/Actions) */
.kikole-board .small-link { margin-right: 18px; }

/* champs texte plus larges : les indices et noms etaient tronques dans un champ de 320px */
.kikole-board .form-field .blank { max-width: 560px; }

/* separe le bloc obligatoire du bloc facultatif (Account/Index, creation de compte) */
.kikole-board .form-hint.section-break {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}

/* boutons d'action : meme survol vert que les icones du menu - .confirm-modal-actions
   partage le style de base (cf. plus haut) mais avait ete oublie ici, son survol restait
   sur l'ancien gris neutre */
.kikole-board .actions button:hover,
.kikole-board .actions a:hover,
.kikole-board .confirm-modal-actions button:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.kikole-board .actions button:disabled:hover { background: var(--surface); border-color: var(--border); color: var(--text); }

/* case a cocher + libelle sur une ligne, centres verticalement (Admin/Index : "Pret ?", "Rester anonyme") */
.kikole-board .check-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kikole-board .check-line .blank { flex: 1; min-width: 0; }

.kikole-board .club-line-input { margin-bottom: 6px; }

.kikole-board .check-line input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
}

.kikole-board .form-field .check-label {
  display: inline;
  margin: 0;
  white-space: nowrap;
  cursor: pointer;
}

/* "vous gagnerez quand meme 1000 points" (resx, classe .greentext) */
.kikole-board strong.greentext { font-weight: 700; }

/* login affiche en vert (Account/Index, "Vous etes connecte en tant que") */
.kikole-board .form-static.accent { color: var(--accent); }
/* zone de saisie d'un message (Contact, Admin/Discussion) : pleine largeur, comme les bulles */
.kikole-board .form-field textarea.blank { max-width: 100%; }
/* ---------------------------------------------------------- classements (2026-09-26) */

/* ligne du joueur connecte : fond teinte + barre d'accent a gauche + nom en gras ; remplace
   l'ancien "(vous)" et ne repose pas sur la couleur seule (barre + graisse) */
.kikole-board tr.you-row td { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.kikole-board tr.you-row td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.kikole-board tr.you-row td.you a { color: var(--accent); font-weight: 700; }

/* pagination (site.js, paginateTable) : fleches uniquement, plage affichee au centre */
.kikole-board .pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.kikole-board .pager-range {
  min-width: 96px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.kikole-board .pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kikole-board .pager-btn svg { width: 18px; height: 18px; }

.kikole-board .pager-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.kikole-board .pager-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kikole-board .pager-btn:disabled { opacity: 0.35; cursor: default; }
/* nom du joueur en tete des fiches (Leaderboard/User, UserDay) */
.kikole-board .profile-name { color: var(--accent); }

/* pagination par mois : libelle du mois capitalise ("Septembre 2026") */
.kikole-board .pager[data-for="monthlyPodiumTable"] .pager-range,
.kikole-board .pager[data-for="userStatsByDayTable"] .pager-range { text-transform: capitalize; min-width: 110px; font-family: var(--font-sans); font-size: 14px; }
/* fleches jour joue precedent / suivant (Leaderboard/UserDay) : meme composant que la
   navigation de jour de la page de jeu, titre "Kikole du ..." entre les deux */
.kikole-board .user-day-nav { margin: -2px 0 16px; gap: 10px; }
.kikole-board .user-day-title { margin: 0; font-size: 13px; }
/* liste deroulante : le panneau prend au moins la largeur du bouton mais s'elargit a son
   contenu (l'element selectionne est en gras et plus large), sans retour a la ligne */
.kikole-board .dd-list {
  right: auto;
  min-width: 100%;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
}

.kikole-board .dd-item { white-space: nowrap; }
/* podiums : le nom (lien) prend la couleur de la medaille de sa colonne au lieu du vert des
   liens ; le joueur connecte reste en vert d'accent, en gras, sur fond teinte */
.kikole-board td[class*="medal-"] a { color: inherit; }

.kikole-board td.you {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  font-weight: 700;
}
/* ---------------------------------------------------------- badges "metal" (2026-09-26)
   Badge obtenu = plaque de metal sombre a bordure epaisse (3px) en degrade d'or terni :
   le fond est un degrade bronze/noir (padding-box), la bordure un degrade or clair -> or
   sombre (border-box), plus un reflet diagonal et un liseré interieur. Le texte reste
   clair sur fond sombre (contraste eleve). Badge secret : meme plaque, bord plus vif et
   halo. Badge manquant : inchange (pointilles, aucun metal - on ne l'a pas gagne). */

.kikole-board .badge-card {
  position: relative;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(155deg, #3b3320 0%, #221e14 38%, #2e2718 62%, #1b1810 100%) padding-box,
    linear-gradient(135deg, #d8b356 0%, #7b5d1d 27%, #c39b3f 52%, #5b4413 78%, #b18831 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 228, 150, 0.22),
    inset 0 -2px 6px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.5);
}

.kikole-board .badge-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 28%, rgba(255, 236, 170, 0.11) 46%, transparent 62%);
}

.kikole-board .badge-card .badge-icon {
  color: #e6bf58;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}

.kikole-board .badge-card .badge-name { color: #f8ebc0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); }

.kikole-board .badge-card .badge-desc summary { border-bottom-color: rgba(230, 191, 88, 0.45); }
.kikole-board .badge-card .badge-desc summary:hover { color: #f3d98a; }
.kikole-board .badge-card .badge-desc summary:hover::before { border-color: #f3d98a; color: #f3d98a; }

.kikole-board .badge-card .badge-date {
  color: #f0cf78;
  border-color: rgba(230, 191, 88, 0.7);
  background: rgba(0, 0, 0, 0.25);
}

.kikole-board .badge-card .badge-holders b { color: #f8ebc0; }

.kikole-board .badge-card.secret {
  background:
    linear-gradient(155deg, #4a3d1e 0%, #2a2213 40%, #37301a 62%, #1f1b0f 100%) padding-box,
    linear-gradient(135deg, #f0d27c 0%, #9a7622 27%, #e2bd55 52%, #7a5c19 78%, #d3a63d 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 160, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(232, 180, 76, 0.32),
    0 4px 10px rgba(0, 0, 0, 0.5);
}

.kikole-board .badge-card.missing {
  border: 2px dashed var(--border-strong);
  background: transparent;
  box-shadow: none;
}

.kikole-board .badge-card.missing::after { display: none; }
.kikole-board .badge-card.missing .badge-icon { color: var(--text-faint); filter: none; }
.kikole-board .badge-card.missing .badge-name { color: var(--text-faint); text-shadow: none; }

/* feu d'artifice : le canvas passe devant la popin (pointer-events: none deja en place,
   les clics traversent) */
.kikole-board .win-modal-confetti { z-index: 2; }
/* badge pas encore obtenu : la meme plaque, en version tres attenuee (metal presque eteint,
   bordure de 3px brun-gris, reflet supprime) ; texte assez clair pour rester lisible */
.kikole-board .badge-card.missing {
  border: 3px solid transparent;
  background:
    linear-gradient(155deg, #23211c 0%, #1a1916 45%, #201e19 70%, #161512 100%) padding-box,
    linear-gradient(135deg, #5f5843 0%, #3a3628 30%, #55503c 55%, #32301f 80%, #4d4735 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.06), inset 0 -2px 5px rgba(0, 0, 0, 0.45);
}

.kikole-board .badge-card.missing .badge-icon { color: #8b7d55; filter: none; }
.kikole-board .badge-card.missing .badge-name { color: #cbc3ad; text-shadow: none; }
.kikole-board .badge-card.missing .badge-desc summary { border-bottom-color: rgba(203, 195, 173, 0.35); }
.kikole-board .badge-card.missing .badge-holders,
.kikole-board .badge-card.missing .badge-holders b { color: #b3ab96; }
/* page d'accueil : regles en trois sections (h2), avec sous-sections (h3) dans la derniere */
.kikole-board .rules-card h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
  margin: 0 0 14px;
}

.kikole-board .rules-card h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  color: var(--accent);
  margin: 26px 0 8px;
}

.kikole-board .rules-card h2 + h3 { margin-top: 4px; }

/* page de gestion des utilisateurs (Admin/Users.cshtml) */
.kikole-board .user-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.kikole-board .user-actions button { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.kikole-board #usersTable td { white-space: nowrap; }
.kikole-board #usersTable tr.user-disabled td {
  background: linear-gradient(180deg, #5a454d 0%, #3f323a 55%, #4d3c44 100%);
  border-bottom: 1px solid #6d565f;
}
.kikole-board .user-email { margin-top: 2px; font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: var(--text-muted); }
.kikole-board .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.kikole-board .form-card a.pager-btn { color: var(--text); }
.kikole-board .form-card a.pager-btn:hover { color: var(--accent); }
.kikole-board .pager-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.kikole-board .confirm-modal-box textarea,
.kikole-board .confirm-modal-box input[type="password"] { width: 100%; box-sizing: border-box; }

/* bouton "Partager mon resultat" (Home/Partial/ShareButton.cshtml) */
.kikole-board .share { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; flex-wrap: wrap; }
.kikole-board .share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
.kikole-board .share-btn svg { width: 18px; height: 18px; }
.kikole-board .share-btn:hover { background: var(--accent); color: var(--accent-ink); }
.kikole-board .share-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kikole-board .share-feedback { color: var(--accent); font-weight: 600; font-size: 14px; }
.kikole-board .user-actions button.danger { background: var(--warn-soft); border: 1px solid var(--warn); color: var(--warn); }
.kikole-board .user-actions button.danger:hover { background: var(--warn); color: var(--accent-ink); }

/* journal des erreurs (Admin/Errors.cshtml) */
.kikole-board .error-entry { display: grid; gap: 6px; }
.kikole-board .error-entry-head { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.kikole-board .error-entry-type { font-weight: 700; color: var(--warn); word-break: break-word; }
.kikole-board .error-entry summary { cursor: pointer; color: var(--accent); }
.kikole-board .error-entry pre { margin: 8px 0 0; padding: 10px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: 12px; background: var(--surface-2); border-radius: 8px; }