/* ═══════════════════════════════════════════════════════════════════════
   sudoku-kids-4x4.css — surcharges propres à la grille 4x4
   Pages : sudoku-enfant.html, en/sudoku-kids.html

   Créé le 2026-09-06 avec sudoku-kids.css (point 21). 17 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…).
   ═══════════════════════════════════════════════════════════════════════ */

/* Header enfant */
    .site-title {
      font-family: 'Baloo 2', sans-serif;
      font-size: clamp(2.4rem, 7vw, 3.8rem);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -1px;
    }

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

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

.stars-row { display: flex; justify-content: center; gap: 4px; margin-top: 8px; font-size: 1rem; opacity: 0.6; }

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

/* Grille 4×4 */
    .grid-container {
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      padding: 14px;
    }

/* Séparateurs 2×2 via pseudo-éléments */
    .grid-container::before {
      content: '';
      position: absolute;
      top: 14px; bottom: 14px;
      left: calc(50% - 2px);
      width: 4px;
      background: var(--separator);
      border-radius: 3px;
      pointer-events: none;
    }

.grid-container::after {
      content: '';
      position: absolute;
      left: 14px; right: 14px;
      top: calc(50% - 2px);
      height: 4px;
      background: var(--separator);
      border-radius: 3px;
      pointer-events: none;
    }

/* Cellules enfant (plus grandes, police Baloo) */
    .cell {
      border-radius: 12px;
      font-size: clamp(1.6rem, 8vw, 2.4rem);
    }

/* Numpad 4 colonnes */
    .numpad { grid-template-columns: repeat(4, 1fr); margin-top: 14px; }

.num-btn { font-size: clamp(1.4rem, 6vw, 2rem); border-radius: 12px; }

/* Pavé un peu plus grand en mode côté (validé par Jean-Christophe le
       2026-08-07, ~66px → 74px). Surcharge locale, pas dans sudoku-core.css. */
    #numpad.side-mode { width: 74px; }

/* Légende */
    .legend-dot { width: 22px; height: 22px; border-radius: 6px; font-size: 0.85rem; }

.legend-item { font-size: 0.75rem; gap: 5px; }

/* Howto */
    .howto { margin-top: 20px; font-size: 0.78rem; }

/* Bouton "⇅ Bas" rééquilibré (validé par Jean-Christophe le 2026-08-07) :
       flex réduit (il partageait sa ligne 50/50 avec .ring-row, qui cède elle-
       même de la place à son bouton ⓘ — donc "⇅ Bas" paraissait plus gros que
       "Anneau ON"), align-self:center car .action-row étire ses enfants à la
       hauteur du plus grand par défaut (sinon le padding n'a aucun effet sur
       la hauteur visible), padding réduit. Ombre passée en marche verticale
       colorée le 11/09 (survol "ascenseur", voir sudoku-core.css) — c'était
       avant `3px 3px 0 var(--border)`, diagonale et grise comme
       Effacer/Indice/Anneau à l'époque.
       Surcharge locale, pas dans sudoku-core.css. */
    #layout-btn {
      flex: 0.65;
      align-self: center;
      padding: 11px 10px;
      border-color: var(--accent);
      box-shadow: 0 3px 0 var(--accent), 0 8px 14px rgba(0,0,0,.2);
    }

/* ── Aide bouton Anneau ──
   ⚠️ margin-top retiré le 11/09 : c'était la cause du désalignement vertical
   entre "⇅ Bas" (align-self:center ci-dessus) et "⊙ Anneau ON" signalé par
   JC — ce margin-top n'existait que sur cette taille (absent de
   sudoku-kids-6x6.css et sudoku-kids-8x8.css), Junior/Junior+ n'avaient
   donc jamais eu le problème. */
    .ring-row { display: flex; align-items: center; gap: 8px; }