/* Démineur : styles propres à l'outil. Couleurs tirées des variables du site (thèmes clair et sombre). */
.o-demineur {
  min-width: 0;
  --o-demineur-tuile: color-mix(in srgb, var(--marque) 15%, var(--surface-2));
  --o-demineur-tuile-survol: color-mix(in srgb, var(--marque) 26%, var(--surface-2));
  --o-demineur-relief: color-mix(in srgb, var(--texte) 16%, transparent);
  --o-demineur-ouverte: var(--surface);
  --o-demineur-fanion: var(--erreur-texte);
  --o-demineur-hampe: var(--texte);
  --o-demineur-reflet: var(--surface);
  --o-demineur-c1: var(--marque);
  --o-demineur-c2: var(--ok-texte);
  --o-demineur-c3: var(--erreur-texte);
  --o-demineur-c4: color-mix(in srgb, var(--marque) 55%, var(--erreur-texte));
  --o-demineur-c5: color-mix(in srgb, var(--erreur-texte) 60%, var(--texte));
  --o-demineur-c6: color-mix(in srgb, var(--ok-texte) 50%, var(--marque));
  --o-demineur-c7: var(--texte);
  --o-demineur-c8: var(--texte-2);
}
.o-demineur [hidden] { display: none !important; }
.o-demineur-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.o-demineur-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.o-demineur .o-demineur-niveaux { border-top: 0; padding-top: 0; justify-content: center; }
.atelier .o-demineur-niveaux .btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.15; }
.o-demineur-niveaux small { font-size: .74rem; font-weight: 500; opacity: .8; }
.atelier .o-demineur-niveaux .btn[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.o-demineur-perso { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: end; max-width: 640px; margin: 8px auto 0; }
.o-demineur-perso .btn { min-height: 42px; }
.o-demineur-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 10px 0 4px; }
.o-demineur-options label.case { display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--texte); }
.o-demineur-options input { width: 20px; height: 20px; accent-color: var(--marque); }

.o-demineur-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 12px 0; }
.o-demineur-barre p { margin: 0; }
.o-demineur-compteur { display: inline-flex; align-items: center; gap: 6px; color: var(--texte); }
.o-demineur-compteur svg { width: 22px; height: 22px; color: var(--texte); }
.o-demineur-compteur strong, .o-demineur-chrono { font: 700 1.25rem/1 var(--mono); font-variant-numeric: tabular-nums; min-width: 3ch; }
.o-demineur-chrono { color: var(--texte); text-align: center; min-width: 5ch; }
.atelier .o-demineur-mode { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; }
.o-demineur-mode svg { width: 20px; height: 20px; }
.atelier .o-demineur-mode[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); --o-demineur-fanion: var(--sur-marque); --o-demineur-hampe: var(--sur-marque); }
.o-demineur-zoom { display: inline-flex; gap: 4px; }
.atelier .o-demineur-zoom .btn { min-width: 42px; min-height: 42px; padding: 0; font: 700 1.2rem/1 var(--police); }
.atelier .o-demineur-barre [data-nouvelle] { min-height: 42px; }

/* Cadre : seul lui défile horizontalement quand la grille est plus large que l'écran */
.o-demineur-cadre { max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding: 10px; border-radius: var(--rayon); background: var(--surface-2); border: 1px solid var(--bord); scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.o-demineur-grille { --t: 32px; display: grid; grid-template-columns: repeat(var(--w, 9), var(--t)); grid-auto-rows: var(--t); gap: 3px; width: max-content; margin-inline: auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.o-demineur-rang { display: contents; }
.o-demineur-case {
  position: relative; display: grid; place-items: center; width: var(--t); height: var(--t); border-radius: calc(var(--t) * .24);
  background: var(--o-demineur-tuile); box-shadow: inset 0 -2px 0 var(--o-demineur-relief); cursor: pointer; outline: none;
  font: 800 calc(var(--t) * .58)/1 var(--police); color: var(--texte); touch-action: manipulation; transition: background-color .12s;
}
.o-demineur-case svg { width: 72%; height: 72%; pointer-events: none; }
.o-demineur-case.faux svg { position: absolute; }
@media (hover: hover) { .o-demineur-case:not(.ouverte):hover { background: var(--o-demineur-tuile-survol); } }
.o-demineur-case.ouverte { background: var(--o-demineur-ouverte); box-shadow: inset 0 0 0 1px var(--bord); cursor: default; }
.o-demineur-case.ouverte:not(.n0) { cursor: pointer; }
.o-demineur-case.n1 { color: var(--o-demineur-c1); }
.o-demineur-case.n2 { color: var(--o-demineur-c2); }
.o-demineur-case.n3 { color: var(--o-demineur-c3); }
.o-demineur-case.n4 { color: var(--o-demineur-c4); }
.o-demineur-case.n5 { color: var(--o-demineur-c5); }
.o-demineur-case.n6 { color: var(--o-demineur-c6); }
.o-demineur-case.n7 { color: var(--o-demineur-c7); }
.o-demineur-case.n8 { color: var(--o-demineur-c8); }
.o-demineur-case.question { color: var(--texte-2); font-weight: 700; }
.o-demineur-case.mine { color: var(--texte); }
.o-demineur-case.explosee { background: var(--erreur-fond); color: var(--erreur-texte); box-shadow: inset 0 0 0 2px var(--erreur-texte); }
.o-demineur-case:focus-visible, .o-demineur-grille:focus-within .o-demineur-case[tabindex="0"] { box-shadow: inset 0 0 0 3px var(--marque); z-index: 1; }
.o-demineur.mode-drapeau .o-demineur-cadre { border-color: var(--marque); box-shadow: 0 0 0 1px var(--marque); }

.o-demineur-message { display: block; min-height: 1.5em; margin-top: 10px; text-align: center; font-size: .98rem; line-height: 1.45; color: var(--texte); }
.o-demineur.gagne .o-demineur-cadre { border-color: var(--ok-texte); box-shadow: 0 0 0 2px var(--ok-texte); }
.o-demineur.gagne .o-demineur-message { padding: 8px 10px; border-radius: var(--rayon-petit); background: var(--ok-fond); color: var(--ok-texte); font-weight: 600; }
.o-demineur.perdu .o-demineur-message { padding: 8px 10px; border-radius: var(--rayon-petit); background: var(--erreur-fond); color: var(--erreur-texte); font-weight: 600; }
.o-demineur.gagne .o-demineur-grille { animation: o-demineur-gagne .5s ease-out; }
@keyframes o-demineur-gagne { 50% { transform: scale(1.015); } }
@media (prefers-reduced-motion: reduce) {
  .o-demineur.gagne .o-demineur-grille { animation: none; }
  .o-demineur-case { transition: none; }
}
.o-demineur .btn:focus-visible, .o-demineur input:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; }
.o-demineur .btn:disabled { opacity: .45; cursor: default; }

.o-demineur-bloc { display: grid; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--bord); }
.o-demineur-bloc h2 { margin: 0; font-size: 1.15rem; }
.o-demineur .o-demineur-aide { margin: 0; color: var(--texte-2); font-size: .92rem; line-height: 1.5; }
.o-demineur-stats { width: 100%; max-width: 560px; border-collapse: collapse; font-size: .95rem; }
.o-demineur-stats th, .o-demineur-stats td { padding: 6px 8px; border-bottom: 1px solid var(--bord); text-align: left; }
.o-demineur-stats td { font-variant-numeric: tabular-nums; }
.o-demineur-stats thead th { color: var(--texte-2); font-weight: 600; font-size: .85rem; }

@media (max-width: 560px) {
  .o-demineur-cadre { padding: 6px; }
  .atelier .o-demineur-niveaux .btn { padding-inline: 10px; }
  .o-demineur-stats { font-size: .88rem; }
  .o-demineur-stats th, .o-demineur-stats td { padding: 5px 4px; }
}