/* ==========================================================================
   SudokuSimple — feuille de style principale
   Bootstrap 5 reste la base : ce fichier définit les jetons de design
   (couleurs, rayons, typographie), ajuste les composants Bootstrap et décrit
   l'interface de jeu. Thème clair par défaut, thème sombre via data-bs-theme.
   ========================================================================== */

/* --- Jetons : thème clair ------------------------------------------------ */
:root,
[data-bs-theme=light] {
  --paper: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --line-soft: #e0e4eb;
  --ink: #1c2333;
  --ink-rgb: 28, 35, 51;
  --muted: #5a6172;
  --accent: #3b5ab8;
  --accent-rgb: 59, 90, 184;
  --accent-hover: #304b9c;
  --accent-ink: #3352b0;
  --accent-soft: #e8edf9;
  --accent-border: #b9c6ec;
  --focus-ring: #d97f00;
  --shadow-sm: 0 1px 2px rgba(28, 35, 51, .05), 0 1px 1px rgba(28, 35, 51, .03);

  /* Grille */
  --cell-bg: #ffffff;
  --grid-line: #d9dce4;
  --grid-bold: #2a3142;
  --cell-related: #f1f3f8;
  --cell-same: #dce4f8;
  --cell-selected: #c7d4f6;
  --cell-given: #1c2333;
  --cell-entry: #3352b0;
  --cell-note: #5d6475;
  --cell-error-ink: #b42318;
  --cell-error-bg: #fdeceb;
  --cell-hint: #c27c00;
  --cell-hint-bg: #fff4dc;
  --cage-line: #8c94a6;

  /* Compatibilité avec les anciens noms de variables */
  --line: var(--grid-line);
  --entry: var(--cell-entry);
  --related: var(--cell-related);

  /* Bootstrap */
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-bg: var(--paper);
  --bs-body-bg-rgb: 246, 247, 249;
  --bs-body-color: var(--ink);
  --bs-body-color-rgb: var(--ink-rgb);
  --bs-emphasis-color: #121826;
  --bs-emphasis-color-rgb: 18, 24, 38;
  --bs-secondary-color: var(--muted);
  --bs-secondary-color-rgb: 90, 97, 114;
  --bs-secondary-bg: var(--surface-2);
  --bs-secondary-bg-rgb: 238, 241, 246;
  --bs-tertiary-bg: var(--surface-2);
  --bs-tertiary-bg-rgb: 238, 241, 246;
  --bs-border-color: var(--line-soft);
  --bs-primary: var(--accent);
  --bs-primary-rgb: var(--accent-rgb);
  --bs-primary-bg-subtle: var(--accent-soft);
  --bs-primary-border-subtle: var(--accent-border);
  --bs-primary-text-emphasis: var(--accent-hover);
  --bs-link-color: var(--accent-ink);
  --bs-link-color-rgb: 51, 82, 176;
  --bs-link-hover-color: var(--accent-hover);
  --bs-link-hover-color-rgb: 48, 75, 156;
  --bs-focus-ring-color: rgba(var(--accent-rgb), .3);
  --bs-border-radius: .55rem;
  --bs-border-radius-lg: .75rem;
  --bs-border-radius-xl: 1rem;
}

/* --- Jetons : thème sombre ----------------------------------------------- */
[data-bs-theme=dark] {
  --paper: #0f131a;
  --surface: #161b24;
  --surface-2: #1d232e;
  --line-soft: #2a3140;
  --ink: #e6e9f0;
  --ink-rgb: 230, 233, 240;
  --muted: #a3aaba;
  --accent: #4a68cc;
  --accent-rgb: 74, 104, 204;
  --accent-hover: #5a77d8;
  --accent-ink: #9fb3f2;
  --accent-soft: #1f2a46;
  --accent-border: #3a4c84;
  --focus-ring: #f0a336;
  --shadow-sm: none;

  --cell-bg: #171c26;
  --grid-line: #2d3544;
  --grid-bold: #8a93a6;
  --cell-related: #1f2633;
  --cell-same: #27365a;
  --cell-selected: #304784;
  --cell-given: #eef1f7;
  --cell-entry: #a9bdf7;
  --cell-note: #a0a8b8;
  --cell-error-ink: #ffa197;
  --cell-error-bg: #3c1e22;
  --cell-hint: #e0a43a;
  --cell-hint-bg: #37301b;
  --cage-line: #77819a;

  --bs-body-bg: var(--paper);
  --bs-body-bg-rgb: 15, 19, 26;
  --bs-body-color: var(--ink);
  --bs-body-color-rgb: var(--ink-rgb);
  --bs-emphasis-color: #f5f7fb;
  --bs-emphasis-color-rgb: 245, 247, 251;
  --bs-secondary-color: var(--muted);
  --bs-secondary-color-rgb: 163, 170, 186;
  --bs-secondary-bg: var(--surface-2);
  --bs-secondary-bg-rgb: 29, 35, 46;
  --bs-tertiary-bg: var(--surface-2);
  --bs-tertiary-bg-rgb: 29, 35, 46;
  --bs-border-color: var(--line-soft);
  --bs-primary-rgb: 159, 179, 242;
  --bs-link-color: var(--accent-ink);
  --bs-link-color-rgb: 159, 179, 242;
  --bs-link-hover-color: #c3d0f8;
  --bs-link-hover-color-rgb: 195, 208, 248;
}

/* --- Base ------------------------------------------------------------------ */
body {
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { min-height: 75vh; }

h1, h2, h3, .h1, .h2, .h3, .display-5 { letter-spacing: -.015em; }
.display-5 { font-weight: 700; }
.lead { max-width: 700px; }

:focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.icon { flex-shrink: 0; vertical-align: -.2em; }

kbd {
  padding: .1rem .4rem;
  border: 1px solid var(--line-soft);
  border-bottom-width: 2px;
  border-radius: .35rem;
  background: var(--surface);
  color: var(--ink);
  font-size: .75rem;
  font-family: inherit;
}

/* --- Composants Bootstrap ajustés ------------------------------------------ */
.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--line-soft);
  box-shadow: var(--shadow-sm);
}

.btn { --bs-btn-font-weight: 500; }

.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--accent-ink);
  --bs-btn-border-color: var(--accent-border);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-disabled-color: var(--accent-ink);
  --bs-btn-disabled-border-color: var(--accent-border);
  --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}

.btn-outline-secondary,
.btn-ghost {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--line-soft);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--line-soft);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--surface-2);
  --bs-btn-active-border-color: var(--grid-line);
  --bs-btn-disabled-color: var(--muted);
  --bs-btn-disabled-bg: var(--surface);
  --bs-btn-disabled-border-color: var(--line-soft);
}

.btn-link { --bs-btn-color: var(--accent-ink); --bs-btn-hover-color: var(--accent-hover); }

.btn[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; }

.text-bg-primary,
.bg-primary { background-color: var(--accent) !important; color: #fff !important; }
.text-primary { color: var(--accent-ink) !important; }
.text-bg-secondary { background-color: var(--surface-2) !important; color: var(--ink) !important; }

.form-control,
.form-select { background-color: var(--surface); border-color: var(--line-soft); }
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 .25rem rgba(var(--accent-rgb), .2);
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-switch .form-check-input { cursor: pointer; }

.breadcrumb { --bs-breadcrumb-font-size: .875rem; }

/* --- En-tête et navigation ------------------------------------------------- */
.site-navbar { padding-block: .6rem; }

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .55rem;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
}

.navbar-brand { color: var(--ink); }

.site-navbar .nav-link {
  padding: .5rem .75rem;
  border-radius: .5rem;
  color: var(--muted);
  font-weight: 500;
}
.site-navbar .nav-link:hover { color: var(--ink); background: var(--surface-2); }
.site-navbar .nav-link[aria-current=page] { color: var(--ink); background: var(--surface-2); }

.theme-select { width: 6.25rem; }

.navbar-toggler { padding: .4rem .55rem; border-color: var(--line-soft); }
.navbar-toggler:focus { box-shadow: none; }

@media (max-width: 991.98px) {
  .site-navbar .nav-link { padding: .7rem .75rem; }
}

/* Très petits écrans : marque, thème et menu tiennent sur une ligne. */
@media (max-width: 359.98px) {
  .site-navbar .navbar-brand { gap: .4rem !important; margin-right: 0 !important; font-size: 1.1rem; }
  .brand-mark { width: 1.75rem; height: 1.75rem; font-size: .95rem; }
  .theme-select { width: 4.9rem; padding-right: 1.6rem; background-position: right .4rem center; }
  .navbar-toggler { padding: .3rem .45rem; }
}

/* --- Panneaux génériques ------------------------------------------------- */
.panel {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--bs-border-radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

details.panel > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  min-height: 2rem;
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::after {
  content: "";
  width: .5rem;
  height: .5rem;
  margin-left: auto;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
details.panel[open] > summary::after { transform: rotate(-135deg); }
details.panel > summary .icon { color: var(--muted); }

.content-panel { max-width: 860px; margin-inline: auto; }

/* --- Pages de jeu : mise en page -------------------------------------------- */
.game-header { margin: -.5rem 0 1rem; text-align: center; }
.game-title { margin: 0; font-size: clamp(1.3rem, 1rem + 1.4vw, 1.85rem); font-weight: 700; }
.game-subtitle { margin: .25rem 0 0; color: var(--muted); font-size: .95rem; }

.game-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 560px;
  margin-inline: auto;
}

.game-side { display: grid; gap: .75rem; align-content: start; }

@media (min-width: 992px) {
  .game-header { text-align: left; margin-bottom: 1.5rem; }
  .game-shell {
    --board-size: clamp(420px, calc(100vh - 230px), 600px);
    max-width: none;
    grid-template-columns: minmax(0, var(--board-size)) minmax(300px, 360px);
    grid-template-rows: auto 1fr;
    grid-template-areas: "board controls" "board side";
    justify-content: center;
    align-items: start;
    column-gap: 2.5rem;
    row-gap: 1rem;
  }
  .game-board { grid-area: board; }
  .game-controls { grid-area: controls; }
  .game-side { grid-area: side; }
  .game-header { max-width: calc(var(--board-size, 600px) + 360px + 2.5rem); margin-inline: auto; }
}

/* Barre d'état : niveau, chronomètre, pause */
.game-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .6rem;
}

.level-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: .2rem .75rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: .82rem;
  font-weight: 600;
}
.level-chip:empty { visibility: hidden; }

.game-timer {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--muted);
}
.timer-value {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.pause-button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.5rem;
  padding-inline: .75rem;
}
.pause-button .icon { width: 16px; height: 16px; }
.pause-button .icon-play,
.pause-button.is-paused .icon-pause { display: none; }
.pause-button.is-paused .icon-play { display: inline; }

.game-counters {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: .55rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}
.game-counters dt { display: inline; font-weight: 400; }
.game-counters dd {
  display: inline;
  margin: 0 0 0 .3rem;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.game-message {
  min-height: 1.5rem;
  margin: .75rem 0;
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}
.game-message:empty { margin-block: .25rem; min-height: .5rem; }

.cage-info { margin: .75rem 0 0; color: var(--muted); font-size: .85rem; text-align: center; }

/* --- Grille ---------------------------------------------------------------- */
.board-wrap {
  position: relative;
  container-type: inline-size;
}

.sudoku-grid,
.killer-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--grid-bold);
  border-radius: .6rem;
  background: var(--cell-bg);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  border-radius: 0;
  background: var(--cell-bg);
  color: var(--cell-entry);
  font-size: clamp(1.1rem, 5.6vw, 2rem);
  font-size: calc(100cqi * .058);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  transition: background-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Séparations des blocs 3 × 3 */
.cell:nth-child(3n),
.killer-cell:nth-child(3n) { border-right: 2px solid var(--grid-bold); }
.cell:nth-child(9n),
.killer-cell:nth-child(9n) { border-right: 0; }
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54),
.killer-cell:nth-child(n+19):nth-child(-n+27),
.killer-cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid var(--grid-bold); }
.cell:nth-child(n+73),
.killer-cell:nth-child(n+73) { border-bottom: 0; }

@media (hover: hover) {
  .cell:hover,
  .killer-cell:hover { background-color: var(--cell-related); }
}

.cell.given { color: var(--cell-given); font-weight: 650; }
.cell.related { background: var(--cell-related); }
.cell.same { background: var(--cell-same); }
.cell.selected {
  background: var(--cell-selected);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cell.hint {
  background: var(--cell-hint-bg);
  box-shadow: inset 0 0 0 3px var(--cell-hint);
}

/* Erreur : couleur + soulignement, pour ne pas reposer sur la couleur seule. */
.cell.error { color: var(--cell-error-ink); background: var(--cell-error-bg); }
.cell.error.selected { box-shadow: inset 0 0 0 2px var(--cell-error-ink); }
.cell.error::after,
.killer-error::after {
  content: "";
  position: absolute;
  left: 32%;
  right: 32%;
  bottom: 14%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.cell:focus-visible,
.killer-cell:focus-visible {
  z-index: 1;
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: -3px;
}

/* Notes (candidats) */
.notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  padding: 6%;
  color: var(--cell-note);
  font-size: clamp(.5rem, 1.9vw, .8rem);
  font-size: max(.5rem, calc(100cqi * .025));
  font-weight: 500;
}
.notes span { display: grid; place-items: center; }
.notes .note-match { color: var(--accent-ink); font-weight: 700; }

/* Pause : la grille est masquée pour ne pas avantager le joueur. */
.paused,
.killer-paused .killer-grid { visibility: hidden; }

.pause-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-soft);
  border-radius: .6rem;
  background: var(--surface-2);
  color: var(--ink);
}
.pause-mask .btn { display: inline-flex; align-items: center; gap: .4rem; }

/* --- Commandes ------------------------------------------------------------- */
.tool-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .35rem;
}

.tool-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: 3.5rem;
  padding: .4rem .15rem;
  border: 1px solid transparent;
  border-radius: .7rem;
  background: transparent;
  color: var(--ink);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.1;
  touch-action: manipulation;
  transition: background-color .12s ease, color .12s ease;
}
.tool-button .icon { width: 22px; height: 22px; color: var(--muted); }
.tool-button:hover:not(:disabled) { background: var(--surface-2); }
.tool-button:disabled { opacity: .4; cursor: not-allowed; }
.tool-button[aria-pressed=true] {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.tool-button[aria-pressed=true] .icon { color: var(--accent-ink); }
.tool-button[aria-pressed=true] span::after { content: " ✓"; }

.number-pad {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: .3rem;
  margin-top: .6rem;
}

.pad-button {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 3.25rem;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: .65rem;
  background: var(--surface);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
  touch-action: manipulation;
  transition: background-color .12s ease, border-color .12s ease;
}
.pad-button:hover:not(:disabled) { border-color: var(--accent-border); background: var(--accent-soft); }
.pad-button:active:not(:disabled) { background: var(--cell-same); }
.pad-button:disabled { opacity: .45; }
.pad-digit { font-size: 1.45rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.pad-count {
  position: absolute;
  right: .3rem;
  bottom: .15rem;
  color: var(--muted);
  font-size: .62rem;
  font-variant-numeric: tabular-nums;
}
.pad-button.is-complete { color: var(--muted); background: var(--surface-2); box-shadow: none; }
.pad-button.is-complete .pad-digit { opacity: .55; }

/* Mode notes : chiffres du pavé réduits et décalés, comme des candidats. */
.number-pad.is-notes .pad-button { border-style: dashed; border-color: var(--accent-border); }
.number-pad.is-notes .pad-digit { font-size: 1.05rem; transform: translate(-25%, -25%); }

/* Ancien pavé à boutons Bootstrap (solveur) */
.number-pad .btn { min-height: 3rem; padding: 0; font-size: 1.2rem; }

.new-game-panel { margin-top: .25rem; }
.new-game-panel .btn { display: inline-flex; align-items: center; gap: .4rem; }

.shortcut-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.shortcut-list > div:last-child { border-bottom: 0; }
.shortcut-list dt { font-weight: 400; white-space: nowrap; }
.shortcut-list dd { margin: 0; color: var(--muted); text-align: right; }

@media (min-width: 992px) {
  .tool-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .tool-button {
    flex-direction: row;
    justify-content: flex-start;
    gap: .5rem;
    min-height: 2.9rem;
    padding: .5rem .7rem;
    border-color: var(--line-soft);
    background: var(--surface);
    font-size: .85rem;
  }
  .tool-button .icon { width: 18px; height: 18px; }
  .number-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
  .pad-button { min-height: 4rem; }
  .pad-digit { font-size: 1.75rem; }
  .pad-count { right: .5rem; bottom: .35rem; font-size: .7rem; }
  .game-message { text-align: left; }
  .cage-info { text-align: left; }
  .number-pad .btn { min-height: 3.25rem; }
}

@media (max-width: 359.98px) {
  .number-pad { gap: .2rem; }
  .tool-bar { gap: .2rem; }
  .tool-button { font-size: .66rem; }
  .tool-button .icon { width: 20px; height: 20px; }
  .pad-digit { font-size: 1.25rem; }
  .pad-count { display: none; }
}

/* --- Fenêtres de dialogue -------------------------------------------------- */
dialog {
  width: 450px;
  max-width: calc(100% - 24px);
  padding: 2rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--bs-border-radius-xl);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 20px 50px rgba(15, 19, 26, .2);
}
dialog::backdrop { background: rgba(15, 19, 26, .55); }

.result-summary {
  margin-bottom: 1.5rem;
  padding: .85rem 1rem;
  border-radius: var(--bs-border-radius-lg);
  background: var(--surface-2);
  font-size: .95rem;
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- Pages de contenu (héritage) ------------------------------------------- */
.hero { padding: 2rem 0; }
.hero h1 { max-width: 760px; font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; }
.status { min-height: 3rem; margin-top: 1rem; }
.content { max-width: 800px; }
.content h2 { margin-top: 2rem; }
.site-nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.theme-control { max-width: 130px; }
.game-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 520px) minmax(220px, 1fr); max-width: 920px; margin: auto; }

/* --- Impression ------------------------------------------------------------ */
.print-sheet { max-width: 800px; margin: 1rem auto; padding: 1rem; border: 1px solid var(--line-soft); border-radius: var(--bs-border-radius-lg); background: var(--surface); }
.print-group { display: grid; gap: 1rem; }
.per-2 .print-group,
.per-4 .print-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.print-grid { display: grid; grid-template-columns: repeat(9, 1fr); aspect-ratio: 1; max-width: 450px; margin: auto; border: 2px solid #111; background: #fff; color: #111; }
.print-grid span { display: grid; place-items: center; border-right: 1px solid #888; border-bottom: 1px solid #888; font-size: clamp(1rem, 3vw, 1.7rem); }
.print-grid span:nth-child(3n) { border-right: 2px solid #111; }
.print-grid span:nth-child(9n) { border-right: 0; }
.print-grid span:nth-child(n+19):nth-child(-n+27),
.print-grid span:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid #111; }
.print-grid span:nth-child(n+73) { border-bottom: 0; }
.print-sheet h3 { margin-top: 1rem; font-size: .85rem; text-align: center; }

@media (max-width: 700px) {
  .game-layout { grid-template-columns: minmax(0, 1fr); }
  .container { padding-left: 12px; padding-right: 12px; }
  .site-nav { gap: .65rem; }
  .hero { padding: 1rem 0; }
  .per-2 .print-group { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@page { size: A4; margin: 12mm; }

@media print {
  body { background: #fff !important; color: #000 !important; }
  header, footer, main > h1, main > .intro, .no-print { display: none !important; }
  .container { max-width: none; padding: 0; }
  .print-sheet { height: 270mm; margin: 0; padding: 0; border: 0; break-after: page; page-break-after: always; }
  .print-sheet:last-child { break-after: auto; }
  .print-group { grid-template-columns: 1fr !important; }
  .per-2 .print-grid { width: 108mm; }
  .per-4 .print-group { grid-template-columns: repeat(2, 1fr) !important; }
  .per-4 .print-grid { width: 80mm; }
  .per-1 .print-grid { width: 170mm; }
  .print-sheet h2 { font-size: 16pt; }
  .print-grid span { font-size: 16pt; }
  .per-4 .print-grid span { font-size: 12pt; }
  a { text-decoration: none; }
}

/* --- Accueil : choix du niveau --------------------------------------------- */
.level-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.level-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--bs-border-radius-lg);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .12s ease, background-color .12s ease;
}
.level-option:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--ink); }
.level-meter { display: flex; gap: 3px; }
.level-meter i { width: 14px; height: 4px; border-radius: 2px; background: var(--line-soft); }
.level-meter i.on { background: var(--accent); }

/* --- Wiki : articles, grilles illustrées et parcours ---------------------- */
.wiki-article { max-width: 860px; margin-inline: auto; }
.wiki-article > section { margin-bottom: 3rem; }
.wiki-article h2 { margin-bottom: 1rem; }
.wiki-article h3 { margin-top: 1.75rem; }
.wiki-toc ol { padding-left: 1.25rem; columns: 2 16rem; }
.wiki-essentials { border-left: 4px solid var(--accent); }

.wiki-figure { max-width: 460px; margin: 1.75rem auto; }
.wiki-figure figcaption { margin-top: .75rem; color: var(--muted); font-size: .9rem; }
.wiki-coords {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  grid-template-rows: 1.4rem auto;
}
.wiki-col-labels,
.wiki-row-labels { display: grid; color: var(--muted); font-size: .62rem; font-weight: 600; }
.wiki-col-labels { grid-template-columns: repeat(9, 1fr); align-items: end; text-align: center; padding-bottom: .15rem; }
.wiki-row-labels { grid-template-rows: repeat(9, 1fr); align-items: center; }

.wiki-grid .cell { cursor: default; }
.wiki-grid .cell:hover { background-color: var(--cell-bg); }
/* Zones étudiées : teinte d'accent légère, plus visible que la surbrillance du jeu. */
.wiki-grid .cell.is-house,
.wiki-grid .killer-cell.is-box { background: color-mix(in srgb, var(--accent) 11%, var(--cell-bg)); }
.wiki-grid .cell.is-scan { background: var(--cell-hint-bg); }
.wiki-grid .cell.is-scan.is-house { background: var(--cell-related); }
.wiki-grid .cell.is-digit { background: var(--cell-same); color: var(--accent-ink); font-weight: 700; }
.wiki-grid .cell.is-pattern,
.wiki-grid .killer-cell.is-house { background: var(--cell-same); }
.wiki-grid .cell.is-pattern { box-shadow: inset 0 0 0 2px var(--accent); }
.wiki-grid .cell.is-color-a { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.wiki-grid .cell.is-color-b { background: var(--cell-hint-bg); box-shadow: inset 0 0 0 2px var(--cell-hint); }
.wiki-grid .cell.is-target { box-shadow: inset 0 0 0 2px var(--cell-error-ink); }
.wiki-grid .cell.is-found,
.wiki-grid .killer-cell.is-found { background: var(--cell-selected); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-ink); font-weight: 700; }
.wiki-grid .cell.is-wrong { background: var(--cell-error-bg); color: var(--cell-error-ink); font-weight: 700; }
.wiki-grid .cell.is-blocked .wiki-mark { color: var(--cell-error-ink); }

.wiki-grid .notes span.keep { color: var(--accent-ink); font-weight: 800; }
.wiki-grid .notes span.strike { color: var(--cell-error-ink); font-weight: 800; text-decoration: line-through; text-decoration-thickness: 2px; }

.wiki-mark {
  position: absolute;
  top: 3%;
  right: 6%;
  color: var(--muted);
  font-size: max(.5rem, calc(100cqi * .022));
  font-weight: 700;
  line-height: 1;
}
.wiki-grid .cell.is-blocked .wiki-mark { inset: 0; display: grid; place-items: center; font-size: calc(100cqi * .05); font-weight: 400; }

.wiki-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .75rem 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .8rem; }
.wiki-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.wiki-swatch { display: inline-block; width: .95rem; height: .95rem; border: 1px solid var(--grid-line); border-radius: .2rem; background: var(--cell-bg); }
.wiki-swatch.is-house { background: color-mix(in srgb, var(--accent) 11%, var(--cell-bg)); }
.wiki-swatch.is-placed { background: var(--cell-bg); color: var(--cell-entry); }
.wiki-swatch.is-scan { background: var(--cell-hint-bg); }
.wiki-swatch.is-pattern, .wiki-swatch.is-digit { background: var(--cell-same); box-shadow: inset 0 0 0 2px var(--accent); }
.wiki-swatch.is-found { background: var(--cell-selected); box-shadow: inset 0 0 0 2px var(--accent); }
.wiki-swatch.is-target { box-shadow: inset 0 0 0 2px var(--cell-error-ink); }
.wiki-swatch.is-color-a { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.wiki-swatch.is-color-b { background: var(--cell-hint-bg); box-shadow: inset 0 0 0 2px var(--cell-hint); }
.wiki-swatch.is-wrong { background: var(--cell-error-bg); }

.wiki-steps { counter-reset: none; padding-left: 0; list-style: none; }
.wiki-steps > li { padding: .55rem 0; border-bottom: 1px solid var(--line-soft); }
.wiki-table { font-size: .9rem; }
.wiki-table td, .wiki-table th { vertical-align: top; }
.wiki-checklist > li { margin-bottom: .75rem; }
.wiki-exercise { padding: 1rem 1.1rem; border: 1px dashed var(--accent-border); border-radius: var(--bs-border-radius-lg); background: var(--surface); }
.wiki-exercise > summary { font-weight: 600; cursor: pointer; }

.wiki-practice { background: var(--accent-soft); border-color: var(--accent-border) !important; }
.wiki-pager-link {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  height: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--bs-border-radius-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.wiki-pager-link:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--ink); }

.wiki-path { counter-reset: path; }
.wiki-path-step { position: relative; }
.wiki-path-step .wiki-path-number {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: .85rem;
}