/* ═══════════════════════════════════════════════════════════════════════ sudoku-kids.css — feuille partagée des 6 pages Enfant / Junior / Junior+ (sudoku-enfant, sudoku-junior, sudoku-junior-plus × FR/EN) Créé le 2026-09-06 par extraction du CSS inline de ces 6 pages (point 21). Contient les 48 règles STRICTEMENT identiques sur les 6 pages. Les règles qui dépendent de la taille de grille (4×4 / 6×6 / 8×8) sont dans sudoku-kids-4x4.css, sudoku-kids-6x6.css et sudoku-kids-8x8.css. ⚠️ ORDRE DE CHARGEMENT STRUCTUREL — ne jamais inverser : sudoku-core.css → sudoku-kids.css → sudoku-kids-.css Plusieurs règles d'ici surchargent volontairement sudoku-core.css À SPÉCIFICITÉ ÉGALE (.cell, .num-btn, .howto, .legend, body…) : elles ne gagnent que parce qu'elles sont déclarées après. Idem pour le fichier de taille, qui doit rester le dernier des trois. ⚠️ Les 6 pages portent class="kids" sur leur (posé le 2026-09-05, voir CLAUDE.md) — ne pas le retirer. ═══════════════════════════════════════════════════════════════════════ */ /* ── Surcharges enfant ── */ /* Palette : on reprend --accent/--accent2/--c1-c4 du core (cohérence avec Junior/Junior+) */ body { font-family: 'Nunito', sans-serif; } .win-card .win-title { font-family: 'Baloo 2', sans-serif; font-size: 2rem; font-weight: 900; color: var(--accent-text); margin-bottom: 8px; } /* ── Bloc SEO (texte parents + FAQ) ── */ .seo-content { max-width: 640px; width: 100%; margin: 32px auto 0; text-align: left; position: relative; z-index: 1; } .seo-content h2 { font-family: 'Baloo 2', sans-serif; font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight: 800; color: var(--text); margin-bottom: 10px; } .seo-content h3 { font-family: 'Baloo 2', sans-serif; font-size: clamp(1rem, 3vw, 1.15rem); font-weight: 700; color: var(--accent2-text); margin: 24px 0 10px; } .seo-content p { font-size: 0.86rem; line-height: 1.75; color: var(--muted); margin-bottom: 10px; } .seo-content p:last-child { margin-bottom: 0; } .seo-content a { color: var(--accent2-text); font-weight: 700; text-decoration: underline; } .seo-content p a, .seo-content li a { display: inline-block; padding: 4px 3px; margin: -4px -3px; } .seo-content ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } .seo-content li { font-size: 0.84rem; line-height: 1.6; color: var(--muted); background: var(--surface); border: 2px solid var(--border); border-radius: 12px; padding: 10px 14px; } .seo-content li strong { color: var(--accent-text); } .faq-mini details { background: var(--surface); border: 2px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; } .faq-mini summary { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 0.88rem; color: var(--text); cursor: pointer; } .faq-mini p { margin-top: 8px; margin-bottom: 0 !important; } #layout-btn:hover { transform: translate(-1px,-1px); } .ring-help-btn { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--accent2); background: var(--surface); color: var(--accent2-text); font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 0.85rem; cursor: pointer; box-shadow: 2px 2px 0 var(--border); } .ring-help-btn:hover { transform: translate(-1px,-1px); } .ring-help-text { display: none; font-size: 0.82rem; color: var(--muted); text-align: center; margin: 6px 0 0; padding: 0 6px; } .ring-help-text.visible { display: block; } .footer-links { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--border); display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .footer-link { font-family: 'Baloo 2', sans-serif; font-size: 0.72rem; font-weight: 700; color: var(--muted); text-decoration: none; transition: color 0.2s; background: none; border: none; cursor: pointer; padding: 6px 4px; margin: -6px -4px; display: inline-block;} .footer-link:hover { color: var(--accent2-text); } .legal-footer { margin: 40px auto 0; padding-top: 14px; border-top: 1px solid var(--border); display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; max-width: 640px; opacity: 0.55; } .legal-footer a, .legal-footer button { font-family: 'Baloo 2', sans-serif; font-size: 0.66rem; color: var(--muted); text-decoration: none; background: none; border: none; cursor: pointer; transition: opacity 0.2s; display: inline-block; padding: 7px 6px; margin: -7px -6px; } .legal-footer a:hover, .legal-footer button:hover { opacity: 1; text-decoration: underline; } /* ── "🆘 Help" animated panel (déployé le 2026-08-22, voir enfant.md) ── Généralisé depuis sudoku-enfant.html/en/sudoku-kids.html (4×4) et sudoku-junior.html/en/sudoku-junior.html (6×6) sans aucune modification de CSS/JS — le moteur (admin/solver-engine-kids.js) et le pilote (sudoku-anim-kids.js) sont déjà paramétrés par window.SUDOKU_CONFIG (N, BLOCK_ROWS, BLOCK_COLS). Positionné en absolute juste sous la grille (#grid), par-dessus les boutons (Erase/Undo/Help, Side/Ring) — la grille reste visible, seuls les boutons du dessous sont recouverts. Le "top" exact est calculé en JS (positionAidePanel(), dans le script plus bas) car la hauteur de la grille change selon la disposition (⇄ Side) et la difficulté. .game-wrapper est déjà position:relative (sudoku-core.css). */ .aide-panel { display: none; position: absolute; left: 0; right: 0; z-index: 40; background: var(--surface); border: 3px solid var(--accent2); border-radius: 20px; padding: 16px 18px; text-align: center; box-shadow: 0 12px 28px rgba(0,0,0,0.28), 5px 5px 0 var(--border); } .aide-panel.show { display: block; } .aide-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .aide-title { font-family: 'Baloo 2', sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--accent2-text); } .aide-close { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; } .aide-close:hover { border-color: var(--accent2); color: var(--accent2-text); } .aide-hints-left { font-size: 0.72rem; color: var(--muted); font-weight: 700; margin-top: 10px; min-height: 1em; } .aide-body { font-size: 0.88rem; line-height: 1.65; color: var(--text); min-height: 40px; padding: 4px 2px; /* display:flex ici cassait le texte : chaque nœud de texte / devient un flex-item séparé au lieu d'un paragraphe normal — bug repéré par Jean-Christophe le 2026-08-19 (texte éclaté en morceaux). text-align:center hérité de .aide-panel suffit à centrer. */ } .aide-body strong { color: var(--accent2-text); } .aide-notice { display: block; font-size: 0.74rem; color: var(--accent2-text); background: rgba(255,107,107,0.1); border: 2px solid var(--accent2); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; } .aide-actions { margin-top: 12px; min-height: 1px; } .aide-btn { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 0.88rem; padding: 9px 24px; background: var(--accent); /* contraste : var(--bg) donnait du creme sur or, 2,2:1 en clair (audit 07/09 §2.4). Valeur fixe et non var(--text) : le fond or reste or dans les deux themes, une encre foncee y passe partout — 7,05:1 en clair, 10,16:1 en sombre. Meme choix que .win-btn et .solver-btn.primary, qui portaient deja #1a1a2e. */ color: #1a1a2e; border: none; border-radius: 50px; cursor: pointer; box-shadow: 4px 4px 0 #b8952e; transition: transform 0.1s; } .aide-btn:hover { transform: translate(-2px,-2px); } .aide-btn-dev { background: var(--surface); color: var(--muted); border: 2px dashed var(--muted); box-shadow: none; } /* Cellules pendant l'animation Aide détaillée (classes ajoutées/ retirées par sudoku-anim-kids.js — voir ce fichier pour la séquence complète : balayage → bloqueurs (grossit/rouge/ propage) → case trouvée (vert) → écriture (pop). */ .cell.anim-scan { background: rgba(255,107,107,0.14) !important; transition: background 0.3s; } .cell.anim-grow { transform: scale(1.35) !important; z-index: 5; transition: transform 0.3s ease; } .cell.anim-red { background: rgba(239,68,68,0.4) !important; border-color: #ef4444 !important; color: #ef4444 !important; transition: background 0.3s, border-color 0.3s; } .cell.anim-elim { background: rgba(239,68,68,0.2) !important; border-color: #ef4444 !important; transition: background 0.3s, border-color 0.3s; } .cell.anim-green { background: rgba(34,197,94,0.3) !important; border-color: #22c55e !important; transform: scale(1.12) !important; box-shadow: 0 0 0 4px rgba(34,197,94,0.22); transition: all 0.3s; } @keyframes aidePop { 0% { transform: scale(1.7); } 55% { transform: scale(0.92); } 100% { transform: scale(1); } } .cell.anim-pop { animation: aidePop 0.55s ease; z-index: 5; } /* Surlignage "même chiffre" en rouge quand ce chiffre est celui que "Aide" va dévoiler (2026-08-19, demande de Jean-Christophe) — classe ajoutée par sudoku-core.js (voir render()) à la place de .highlight normal (crème) uniquement dans ce cas précis. */ .cell.highlight-aide { background: rgba(239,68,68,0.22) !important; border-color: #ef4444 !important; }