/* ═══════════════════════════════════════════════════════════════════════
   sudoku-kids-8x8.css — surcharges propres à la grille 8x8
   Pages : sudoku-junior-plus.html, en/sudoku-junior-plus.html

   Créé le 2026-09-06 avec sudoku-kids.css (point 21). 22 règles qui
   diffèrent d'une taille de grille à l'autre : géométrie de la grille et du
   pavé numérique, tailles de police, séparateurs de blocs.

   ⚠️ À CHARGER APRÈS sudoku-core.css ET sudoku-kids.css — plusieurs règles
   d'ici surchargent les deux à spécificité égale (.cell, .num-btn, .numpad,
   .howto, .legend, #numpad.side-mode…).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Surcharges junior+ (8×8) ── */
    :root {
      /* noms alternatifs utilisés par le CSS original (--c7-s, --c8-s) */
      --c7-s: var(--c7-shadow);
      --c8-s: var(--c8-shadow);
    }

.site-title { font-family: 'Baloo 2', sans-serif; font-size: clamp(1.4rem,4vw,2rem); font-weight: 800; line-height: 1.1; }

.site-title .w1 { color: var(--accent-text); }

.site-title .w2 { color: var(--accent2-text); }

.game-wrapper { max-width: 520px; }

/* Grille 8 colonnes */
    .grid-container {
      grid-template-columns: repeat(8, 1fr);
      gap: 3px;
      padding: 10px;
    }

/* Séparateurs de blocs 2×4 via overlay (même technique que FR sudoku-junior-plus) */
    .grid-container::before {
      content: '';
      position: absolute;
      top: 10px; bottom: 10px;
      left: calc(50% - 1px);
      width: 2px;
      background: var(--separator);
      border-radius: 2px;
      pointer-events: none;
    }

.grid-container::after {
      content: '';
      position: absolute;
      top: 10px; bottom: 10px;
      left: 10px; right: 10px;
      background-image:
        linear-gradient(var(--separator), var(--separator)),
        linear-gradient(var(--separator), var(--separator)),
        linear-gradient(var(--separator), var(--separator));
      background-repeat: no-repeat;
      background-size: 100% 2px;
      background-position:
        0 calc(25% - 0.75px),
        0 calc(50%),
        0 calc(75% + 1.75px);
      pointer-events: none;
    }

/* Cellule plus petite */
    .cell {
      border-radius: 6px;
      font-size: clamp(0.75rem, 3.5vw, 1.25rem);
    }

/* Notes 8 = grille 4×2 */
    .cell .notes-grid {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
    }

.cell .notes-grid span { font-size: clamp(0.8rem, 0.8vw, 0.38rem); }

/* Numpad 8 colonnes */
    .numpad { grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top: 10px; }

.numpad.side-mode { grid-template-columns: 1fr; margin-top: 0; }

.numpad.side-mode .num-btn { width: 48px; height: 48px; }

.num-btn { border-radius: 8px; font-size: clamp(0.85rem, 3vw, 1.3rem); }

/* Couleurs pastel 7 & 8 (déjà dans core mais nommage alternatif dans ce fichier) */
    .num-btn:nth-child(7) { color: var(--c7); border-color: var(--c7-shadow); box-shadow: 3px 3px 0 var(--c7-shadow); }

.num-btn:nth-child(8) { color: var(--c8); border-color: var(--c8-shadow); box-shadow: 3px 3px 0 var(--c8-shadow); }

/* Légende compacte */
    .legend { gap: 4px; }

.legend-dot { width: 18px; height: 18px; border-radius: 4px; font-size: 0.75rem; }

.legend-item { font-size: 0.7rem; gap: 3px; }

/* Ombre manquante sur layout-btn par rapport aux autres boutons
       (Effacer/Indice/Anneau ont tous box-shadow: 3px 3px 0 var(--border),
       pas layout-btn dans le core). Taille jugée correcte par
       Jean-Christophe, seule l'ombre manquait. */
    #layout-btn { box-shadow: 3px 3px 0 var(--border); }

/* ── Aide bouton Anneau ── */
    .ring-row { display: flex; align-items: center; gap: 8px; }