/* Les jeux quotidiens Krinein : l'aire de jeu, dans le langage du magazine.
 *
 * Décision Guillaume (26 juillet 2026, après second panel) : alignement complet sur le
 * design system du site. L'identité risographie du premier jet est abandonnée : plus de
 * papier teinté, plus de grain, plus de bordures noires de 2,5px, plus de titre en trois
 * calques. L'aire de jeu est un panneau du site (surface, filet 1px, rayon 12px, ombre),
 * signé par un filet supérieur à la couleur de la rubrique et par Bricolage Grotesque,
 * réservée à DEUX éléments : le logotype du jeu et le verdict.
 *
 * Tout est scopé sous .kj-* : aucun token sur :root, aucun reset global (leçon du forum).
 * Les couleurs viennent des tokens --kr-* : zéro surcharge de thème sombre à maintenir,
 * à une exception près, l'encre de rubrique, dérivée par color-mix (voir --kj-encre-rub).
 */

/* ==========================================================================
   POLICE DISPLAY AUTO-HÉBERGÉE
   Bricolage Grotesque, variable 400 à 800, sous-ensembles latin et latin-ext.
   Space Mono a été retirée avec l'alignement : les compteurs passent en Inter
   tabular-nums, l'aperçu de partage en monospace système. Licence SIL OFL.
   ========================================================================== */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/bricolage-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/bricolage-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   ENCRE DE RUBRIQUE
   Les --kr-cat-* du site sont des fonds de badge : en couleur de texte, la moitié
   échoue sous 4,5:1. L'encre est donc un mélange 70/30 avec la couleur de texte du
   thème : elle fonce en clair, s'éclaircit en sombre, sans une ligne de surcharge.
   La couleur brute reste réservée aux aplats (filet supérieur, pastille).
   ========================================================================== */
.kj-aire, .kj-carte {
  --kj-rub: var(--kr-primary);
  --kj-encre-rub: color-mix(in oklab, var(--kj-rub) 70%, var(--kr-text));
}
.kj-aire[data-rubrique="cinema"],   .kj-carte[data-rubrique="cinema"]   { --kj-rub: var(--kr-cat-cinema); }
.kj-aire[data-rubrique="series"],   .kj-carte[data-rubrique="series"]   { --kj-rub: var(--kr-cat-series); }
.kj-aire[data-rubrique="manga"],    .kj-carte[data-rubrique="manga"]    { --kj-rub: var(--kr-cat-manga); }
.kj-aire[data-rubrique="bd"],       .kj-carte[data-rubrique="bd"]       { --kj-rub: var(--kr-cat-bd); }
.kj-aire[data-rubrique="livres"],   .kj-carte[data-rubrique="livres"]   { --kj-rub: var(--kr-cat-livres); }
.kj-aire[data-rubrique="jv"],       .kj-carte[data-rubrique="jv"]       { --kj-rub: var(--kr-cat-jv); }
.kj-aire[data-rubrique="musique"],  .kj-carte[data-rubrique="musique"]  { --kj-rub: var(--kr-cat-musique); }
.kj-aire[data-rubrique="sortir"],   .kj-carte[data-rubrique="sortir"]   { --kj-rub: var(--kr-cat-sortir); }
.kj-aire[data-rubrique="jds"],      .kj-carte[data-rubrique="jds"]      { --kj-rub: var(--kr-cat-jds); }
.kj-aire[data-rubrique="sciences"], .kj-carte[data-rubrique="sciences"] { --kj-rub: var(--kr-cat-sciences); }

/* ==========================================================================
   BARRE « LES JEUX » : le chrome, déjà sur les tokens du site
   ========================================================================== */
.kj-barre {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  height: 48px; padding: 0 16px;
  background: var(--kr-bg);
  border-bottom: 1px solid var(--kr-border);
}
.kj-barre__marque { display: block; color: var(--kr-text); }
.kj-barre__marque svg { height: 18px; width: auto; display: block; }
.kj-barre__jeux {
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--kr-text-2); text-decoration: none;
}
.kj-barre__jeux:hover { color: var(--kr-text); }
.kj-barre__theme {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--kr-text-2);
  cursor: pointer;
}
.kj-barre__theme:hover { background: var(--kr-surface-2); color: var(--kr-text); }
.kj-barre__theme svg { width: 18px; height: 18px; }
.kj-barre__theme .kj-soleil { display: none; }
html[data-theme="dark"] .kj-barre__theme .kj-lune   { display: none; }
html[data-theme="dark"] .kj-barre__theme .kj-soleil { display: inline; }

/* ==========================================================================
   L'AIRE DE JEU : un panneau du site
   ========================================================================== */
.kj-main { padding: 24px 16px 56px; }
.kj-aire {
  max-width: 660px;
  margin: 0 auto;
  padding: 24px 22px 28px;
  background: var(--kr-surface);
  border: 1px solid var(--kr-border);
  border-top: 3px solid var(--kj-rub);
  border-radius: var(--kr-radius);
  box-shadow: var(--kr-shadow);
  color: var(--kr-text-2);
  font-size: 16px;
  line-height: 1.6;
}
.kj-aire :focus-visible { outline: 2px solid var(--kj-encre-rub); outline-offset: 2px; }

/* ---------- en-tête du jeu ---------- */
.kj-entete { margin-bottom: 22px; }
.kj-rubrique {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--kj-encre-rub);
  background: color-mix(in srgb, var(--kj-rub) 12%, transparent);
  border-radius: 6px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.kj-titre {
  font-family: "Bricolage Grotesque", var(--kr-font);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--kr-text);
  margin-bottom: 8px;
}
.kj-regle { font-size: 15px; max-width: 52ch; color: var(--kr-text-2); }

/* ---------- métadonnées de manche ---------- */
.kj-manche {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--kr-text-3);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

/* ---------- le dossier (pitch) ---------- */
.kj-pitch {
  background: var(--kr-surface-2);
  border-radius: var(--kr-radius-s);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.kj-pitch__etiquette {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--kj-encre-rub);
  margin-bottom: 8px;
}
.kj-pitch__texte { font-size: 17px; color: var(--kr-text); }

/* ---------- la mise ---------- */
.kj-mise {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--kr-text-3);
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}
.kj-mise__pt {
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--kr-border);
  display: inline-block;
}
.kj-mise__pt.est-actif { background: var(--kj-rub); }

/* ---------- retour au joueur ---------- */
.kj-retour {
  background: var(--kr-surface-2);
  border-left: 4px solid var(--kr-border);
  border-radius: var(--kr-radius-s);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 15px;
}
.kj-retour--faux   { border-left-color: var(--kr-score-low); }
.kj-retour--indice { border-left-color: var(--kj-rub); }
.kj-retour--refus  { border-left-color: var(--kr-text-3); }
.kj-retour__essais {
  display: block; margin-top: 4px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--kr-text-3);
}

/* ---------- formulaire ---------- */
.kj-forme { margin-bottom: 6px; }
.kj-champ__label {
  display: block;
  font-weight: 700; font-size: 17px;
  color: var(--kr-text);
  margin-bottom: 8px;
}
.kj-champ__combo { position: relative; }
.kj-champ__input {
  width: 100%;
  font: inherit; font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--kr-border);
  border-radius: 10px;
  background: var(--kr-surface);
  color: var(--kr-text);
}
.kj-champ__input::placeholder { color: var(--kr-text-3); opacity: 1; }

.kj-liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--kr-surface);
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-radius-s);
  box-shadow: var(--kr-shadow);
  max-height: 264px; overflow-y: auto;
  z-index: 20;
  list-style: none; margin: 0; padding: 4px;
}
.kj-liste li { padding: 8px 10px; cursor: pointer; font-size: 15px; border-radius: 6px; color: var(--kr-text-2); }
.kj-liste li:hover, .kj-liste li.est-actif { background: var(--kr-surface-2); color: var(--kr-text); }

.kj-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: center; }
.kj-btn {
  font: inherit; font-size: 15px; font-weight: 700;
  border: 0; border-radius: 10px;
  padding: 12px 20px;
  background: var(--kr-primary); color: var(--kr-on-primary);
  cursor: pointer;
  text-decoration: none;
}
.kj-btn:hover { background: var(--kr-primary-700); }
.kj-btn--indice {
  background: transparent;
  border: 1px solid var(--kr-border);
  color: var(--kr-link);
  font-weight: 600;
}
.kj-btn--indice:hover { background: var(--kr-surface-2); color: var(--kr-link); }
.kj-btn:disabled { opacity: .55; cursor: not-allowed; }
.kj-btn:disabled:hover { background: var(--kr-primary); }
.kj-btn--indice:disabled:hover { background: transparent; }

/* abandon : un lien discret, loin du bouton Proposer */
.kj-abandon { margin-top: 18px; }
.kj-btn--abandon {
  background: transparent; border: 0; padding: 6px 2px;
  font-size: 13px; font-weight: 500;
  color: var(--kr-text-3);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.kj-btn--abandon:hover { background: transparent; color: var(--kr-text); }
.kj-abandon__confirme {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--kr-text-2);
}
.kj-abandon__confirme .kj-btn { padding: 8px 14px; font-size: 14px; }

/* ---------- indices ---------- */
.kj-indices { display: grid; gap: 10px; margin: 18px 0; }
.kj-indice {
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-radius-s);
  padding: 12px 14px;
}
.kj-indice__num {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--kr-text-3);
  margin-bottom: 4px;
}
.kj-indice .kj-indice__verrou { color: var(--kr-text-3); font-style: italic; }
.kj-indice.est-ouvert { background: var(--kr-surface-2); border-color: transparent; }
.kj-indice.est-ouvert .kj-indice__num { color: var(--kj-encre-rub); }
.kj-indice.est-ouvert p:last-child { color: var(--kr-text); }

/* ---------- essais ratés ---------- */
.kj-essais { list-style: none; margin: 0 0 16px; padding: 0; }
.kj-essais li {
  font-size: 14px; color: var(--kr-text-3);
  text-decoration: line-through;
  padding: 2px 0 2px 22px;
  position: relative;
}
.kj-essais li::before {
  content: "✗"; text-decoration: none;
  position: absolute; left: 0;
  color: var(--kr-score-low); font-weight: 700;
}

/* ---------- résolution ---------- */
.kj-fin {
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-radius);
  box-shadow: var(--kr-shadow);
  overflow: hidden;
  margin-top: 20px;
}
.kj-fin__verdict {
  font-family: "Bricolage Grotesque", var(--kr-font);
  font-weight: 800;
  font-size: 28px; line-height: 1;
  padding: 14px 18px;
  color: #ffffff;   /* grand corps sur aplat : 3,3:1 minimum requis 3:1 */
}
.kj-fin--gagne .kj-fin__verdict { background: var(--kr-score-good); }
.kj-fin--perdu .kj-fin__verdict { background: var(--kr-score-low); }
.kj-fin__reponse { padding: 16px 18px 0; font-size: 17px; color: var(--kr-text); }
.kj-fin__credit { color: var(--kr-text-3); font-size: 15px; }
.kj-fin__score { padding: 10px 18px 0; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--kr-text-2); }
.kj-squares { letter-spacing: 2px; }
.kj-fin__serie { padding: 10px 18px 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--kr-text-2); }
.kj-fin__serie::before {
  content: ""; display: inline-block;
  width: 9px; height: 9px; margin-right: 8px;
  border-radius: 999px;
  background: var(--kr-score-good);
}
/* ---------- le peloton du jour ---------- */
.kj-peloton { margin: 14px 18px 0; padding: 14px 16px; background: var(--kr-surface-2); border-radius: var(--kr-radius-s); }
.kj-peloton__titre { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--kr-text-3); margin: 0 0 2px; }
.kj-peloton__resume { font-size: 14px; color: var(--kr-text); margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.kj-peloton__ligne { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.kj-peloton__score { width: 44px; color: var(--kr-text-3); }
.kj-peloton__ligne.est-moi .kj-peloton__score { color: var(--kj-encre-rub); font-weight: 700; }
.kj-peloton__barre { flex: 1; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--kr-border) 55%, transparent); overflow: hidden; }
.kj-peloton__barre span { display: block; height: 100%; border-radius: 999px; background: var(--kr-border); }
.kj-peloton__ligne.est-moi .kj-peloton__barre span { background: var(--kj-rub); }
.kj-peloton__nb { width: 42px; text-align: right; color: var(--kr-text-3); }
.kj-peloton__rang { font-size: 13px; color: var(--kr-text-2); margin: 10px 0 0; }

.kj-fin__partage { padding: 16px 18px 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kj-btn--x {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--kr-border);
  color: var(--kr-text-2); font-weight: 600;
}
.kj-btn--x:hover { background: var(--kr-surface-2); color: var(--kr-text); }
.kj-btn--x svg { width: 14px; height: 14px; }
.kj-fin__copie { font-size: 13px; color: var(--kr-text-2); }
.kj-fin__apercu {
  margin: 8px 18px 18px;
  padding: 12px 14px;
  background: var(--kr-surface-2);
  border-radius: var(--kr-radius-s);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; color: var(--kr-text-2);
  white-space: pre-wrap; word-break: break-word;
}
.kj-fin__suite { margin: 0 18px 16px; padding-top: 14px; border-top: 1px solid var(--kr-border); }
.kj-fin__suite p {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--kr-text-3); margin: 0 0 6px;
}
.kj-fin__suite a { color: var(--kr-link); font-size: 16px; text-underline-offset: 3px; }
.kj-fin__demain { padding: 0 18px 18px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--kr-text-3); }

/* ---------- divers ---------- */
.kj-vide {
  background: var(--kr-surface-2);
  border-radius: var(--kr-radius-s);
  padding: 20px;
  color: var(--kr-text-2);
}

/* ==========================================================================
   LE HUB /jeux/ : cartes des dix jeux
   ========================================================================== */
.kj-large { max-width: 960px; margin: 0 auto; }
.kj-hub {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
/* avec un seul jeu, la carte unique respire au lieu de s'étirer sur toute la grille */
.kj-hub .kj-carte:only-child { max-width: 420px; }
.kj-hub-note { margin-top: 18px; font-size: 14px; color: var(--kr-text-3); max-width: 68ch; }
.kj-carte {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--kr-surface);
  border: 1px solid var(--kr-border);
  border-top: 3px solid var(--kj-rub);
  border-radius: var(--kr-radius);
  box-shadow: var(--kr-shadow);
  padding: 18px 18px 16px;
  text-decoration: none;
  color: var(--kr-text-2);
}
a.kj-carte:hover { border-color: var(--kj-rub); }
.kj-carte__rubrique {
  align-self: flex-start;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--kj-encre-rub);
  background: color-mix(in srgb, var(--kj-rub) 12%, transparent);
  border-radius: 6px;
  padding: 2px 8px;
}
.kj-carte__titre {
  font-family: "Bricolage Grotesque", var(--kr-font);
  font-weight: 800; font-size: 22px; line-height: 1.1;
  color: var(--kr-text);
}
.kj-carte__promesse { font-size: 14px; }
.kj-carte__verbe { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--kr-text-3); }
.kj-carte__jouer { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 14px; color: var(--kr-link); }
.kj-carte--bientot { opacity: .62; }
.kj-carte--bientot .kj-carte__jouer { display: none; }

/* ==========================================================================
   PETIT ÉCRAN
   ========================================================================== */
@media (max-width: 480px) {
  .kj-main { padding: 14px 10px 40px; }
  .kj-aire { padding: 18px 14px 22px; }
  .kj-entete { margin-bottom: 16px; }
  .kj-pitch__texte { font-size: 16px; }
  .kj-actions .kj-btn { flex: 1 1 auto; text-align: center; }
}