/* Sudoku en ligne et à imprimer : styles propres à l'outil. */
.o-sudoku { min-width: 0; --o-sudoku-trait: color-mix(in srgb, var(--texte) 22%, var(--surface)); --o-sudoku-fort: var(--texte); }
.o-sudoku .o-sudoku-niveaux { border-top: 0; padding-top: 0; justify-content: center; }
.atelier .o-sudoku-niveaux .btn[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }

.o-sudoku-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 12px 0; }
.o-sudoku-barre p { margin: 0; }
.o-sudoku-code { color: var(--texte-2); font-size: .92rem; }
.o-sudoku-code strong { color: var(--texte); font: 700 1rem var(--mono); letter-spacing: .04em; user-select: all; }
.o-sudoku-chrono { font: 700 1.25rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--texte); min-width: 5ch; text-align: center; }
.o-sudoku-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-sudoku-jeu { display: grid; grid-template-columns: minmax(0, 480px) minmax(220px, 300px); gap: 18px 24px; justify-content: center; align-items: start; }
.o-sudoku-plateau { position: relative; width: 100%; }

/* Grille de jeu */
.o-sudoku-grille { display: grid; grid-template-columns: repeat(9, 1fr); width: 100%; aspect-ratio: 1; border: 3px solid var(--o-sudoku-fort); border-radius: 6px; overflow: hidden; background: var(--surface); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.o-sudoku-rangee { display: contents; }
.o-sudoku-case { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; border-right: 1px solid var(--o-sudoku-trait); border-bottom: 1px solid var(--o-sudoku-trait); font: 500 clamp(1.15rem, 5.4vw, 1.8rem)/1 var(--police); color: var(--marque); cursor: pointer; outline: none; }
.o-sudoku-case:nth-child(9) { border-right: 0; }
.o-sudoku-rangee:last-child .o-sudoku-case { border-bottom: 0; }
.o-sudoku-case.bord-d { border-right: 2px solid var(--o-sudoku-fort); }
.o-sudoku-case.bord-b { border-bottom: 2px solid var(--o-sudoku-fort); }
.o-sudoku-case.donne { color: var(--texte); font-weight: 700; }
.o-sudoku-case.revele { color: var(--ok-texte); font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; }
.o-sudoku-case.zone { background: var(--surface-2); }
.o-sudoku-case.meme { background: color-mix(in srgb, var(--marque) 20%, var(--surface)); }
.o-sudoku-case.choisie { background: color-mix(in srgb, var(--marque) 34%, var(--surface)); }
.o-sudoku-case.choisie:focus-visible, .o-sudoku-grille:focus-within .o-sudoku-case.choisie { box-shadow: inset 0 0 0 3px var(--marque); }
.o-sudoku-case.conflit, .o-sudoku-case.faux { color: var(--erreur-texte); background: var(--erreur-fond); }
.o-sudoku-case.donne.conflit { color: var(--texte); }
.o-sudoku-case.faux { text-decoration: line-through; text-decoration-thickness: 2px; }
.o-sudoku-notes { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; padding: 1px; font: 500 clamp(.5rem, 1.9vw, .72rem)/1 var(--police); color: var(--texte-2); }
.o-sudoku-notes span { display: grid; place-items: center; }
.o-sudoku-grille.masque .o-sudoku-case { color: transparent; background: var(--surface-2); }
.o-sudoku-grille.masque .o-sudoku-notes { visibility: hidden; }

.o-sudoku-voile { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 6px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.o-sudoku-voile[hidden] { display: none; }
.o-sudoku-voile p { margin: 0; font-weight: 700; font-size: 1.15rem; color: var(--texte); }

.o-sudoku.gagne .o-sudoku-grille { border-color: var(--ok-texte); animation: o-sudoku-gagne .6s ease-out; }
@keyframes o-sudoku-gagne { 50% { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .o-sudoku.gagne .o-sudoku-grille { animation: none; } }

/* Commandes */
.o-sudoku-commandes { display: flex; flex-direction: column; gap: 12px; }
.o-sudoku-pave { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.atelier .o-sudoku-pave .btn { min-height: 54px; padding: 0; font: 600 1.45rem/1 var(--police); color: var(--marque); }
.atelier .o-sudoku-pave .btn.complet { opacity: .45; }
.o-sudoku-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.atelier .o-sudoku-actions .btn { min-height: 44px; }
.atelier .o-sudoku-actions .btn[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.o-sudoku.mode-notes .o-sudoku-case.choisie { box-shadow: inset 0 0 0 3px var(--marque); }
.o-sudoku label.case.o-sudoku-option { display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--texte); }
.o-sudoku-option input { width: 20px; height: 20px; accent-color: var(--marque); }
.o-sudoku-message { display: block; min-height: 1.4em; color: var(--texte); font-size: .95rem; line-height: 1.45; }
.o-sudoku-message:empty { min-height: 0; }
.o-sudoku.gagne [data-message] { padding: 8px 10px; border-radius: var(--rayon-petit); background: var(--ok-fond); color: var(--ok-texte); font-weight: 600; }
.o-sudoku-nouvelle { min-height: 46px; }
.o-sudoku .btn:focus-visible, .o-sudoku input:focus-visible, .o-sudoku select:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; }
.o-sudoku .btn:disabled { opacity: .5; cursor: default; }

.o-sudoku-ouvrir { margin-top: 20px; align-items: end; grid-template-columns: minmax(0, 260px) auto; justify-content: start; }
.o-sudoku-ouvrir .btn { min-height: 42px; }
.o-sudoku-ouvrir input { font-family: var(--mono); text-transform: uppercase; }

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

.o-sudoku-solveur { display: grid; grid-template-columns: minmax(0, 400px) minmax(220px, 1fr); gap: 16px 24px; align-items: start; }
.o-sudoku-saisie { display: grid; grid-template-columns: repeat(9, 1fr); width: 100%; aspect-ratio: 1; border: 3px solid var(--o-sudoku-fort); border-radius: 6px; overflow: hidden; background: var(--surface); }
.o-sudoku .o-sudoku-entree { width: 100%; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; border-right: 1px solid var(--o-sudoku-trait); border-bottom: 1px solid var(--o-sudoku-trait); background: var(--surface); color: var(--texte); font: 700 clamp(1rem, 4.6vw, 1.5rem)/1 var(--police); text-align: center; caret-color: var(--marque); }
.o-sudoku .o-sudoku-entree:nth-child(9n) { border-right: 0; }
.o-sudoku .o-sudoku-entree:nth-child(n+73) { border-bottom: 0; }
.o-sudoku .o-sudoku-entree.bord-d { border-right: 2px solid var(--o-sudoku-fort); }
.o-sudoku .o-sudoku-entree.bord-b { border-bottom: 2px solid var(--o-sudoku-fort); }
.o-sudoku .o-sudoku-entree:focus { outline: none; background: color-mix(in srgb, var(--marque) 22%, var(--surface)); }
.o-sudoku .o-sudoku-entree.trouve { color: var(--marque); font-weight: 400; }
.o-sudoku .o-sudoku-entree.erreur { color: var(--erreur-texte); background: var(--erreur-fond); }
.o-sudoku-res-commandes { display: flex; flex-direction: column; gap: 12px; }
.o-sudoku-ligne { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--texte-2); }
.o-sudoku-ligne input { font-family: var(--mono); font-size: .85rem; }
.o-sudoku-res-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.o-sudoku-res-boutons .btn { min-height: 42px; }

@media (max-width: 760px) {
  .o-sudoku-jeu, .o-sudoku-solveur { grid-template-columns: minmax(0, 1fr); }
  .o-sudoku-pave { grid-template-columns: repeat(9, 1fr); gap: 4px; }
  .atelier .o-sudoku-pave .btn { min-height: 48px; font-size: 1.3rem; }
  .o-sudoku-actions { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .atelier .o-sudoku-actions .btn { padding-inline: 4px; font-size: .88rem; }
  .o-sudoku-ouvrir { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Écrans tactiles : pas de survol « collant » qui ferait croire qu'un bouton est resté enfoncé */
@media (hover: none) {
  .atelier .o-sudoku-pave .btn-outline:hover, .atelier .o-sudoku-actions .btn-outline:not([aria-pressed="true"]):hover { background: var(--surface); }
}