/* === Guide Règles du démineur — CSS spécifique === */
/* Mini-grilles d'exemple */
.grille-demo { display: inline-grid; gap: 2px; background: #1e293b; padding: 8px; border-radius: 8px; margin: 16px auto; border: 1px solid rgba(255,255,255,0.1); }
.grille-demo-wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin: 24px 0; }
.grille-demo-wrap figure { text-align: center; margin: 0; }
.grille-demo-wrap figcaption { font-size: 0.82rem; color: #94a3b8; margin-top: 8px; max-width: 220px; }
.case { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.95rem; font-family: 'Courier New', monospace; border-radius: 3px; }
.case.cachee { background: linear-gradient(145deg, #475569, #334155); border: 1px solid #1e293b; }
.case.revele { background: #cbd5e1; color: #0f172a; }
.case.vide { background: #cbd5e1; }
.case.c1 { color: #1d4ed8; }
.case.c2 { color: #15803d; }
.case.c3 { color: #b91c1c; }
.case.c4 { color: #6d28d9; }
.case.c5 { color: #7c2d12; }
.case.mine { background: #fecaca; color: #991b1b; font-size: 1rem; }
.case.drapeau { background: linear-gradient(145deg, #475569, #334155); border: 1px solid #1e293b; font-size: 0.95rem; }
/* Callout d'avertissement */
.callout { background: rgba(251, 191, 36, 0.08); border-left: 3px solid #fbbf24; padding: 14px 18px; margin: 20px 0; border-radius: 0 8px 8px 0; font-size: 0.92rem; }
.callout strong { color: #fcd34d; }