/* Taquin : styles propres à l'outil. Couleurs tirées des variables du site (thèmes clair et sombre). */
.o-taquin {
  min-width: 0;
  --n: 4;
  --o-taquin-tuile: color-mix(in srgb, var(--marque) 16%, var(--surface));
  --o-taquin-bien: color-mix(in srgb, var(--ok-texte) 18%, var(--surface));
  --o-taquin-relief: color-mix(in srgb, var(--texte) 18%, transparent);
}
.o-taquin [hidden] { display: none !important; }

.o-taquin .o-taquin-tailles { border-top: 0; padding-top: 0; justify-content: center; }
.atelier .o-taquin-tailles .btn { min-height: 42px; min-width: 64px; font-variant-numeric: tabular-nums; }
.atelier .o-taquin-tailles .btn[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }

.o-taquin-options { display: grid; justify-items: center; gap: 10px; margin: 4px 0 8px; }
.o-taquin-mode { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 20px; margin: 0; padding: 0; border: 0; }
.o-taquin-mode legend { float: left; margin-right: 6px; font-size: .9rem; font-weight: 600; color: var(--texte-2); }
.o-taquin label.case { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: .95rem; color: var(--texte); cursor: pointer; }
.o-taquin input[type="radio"], .o-taquin input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--marque); }
.o-taquin-image { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; max-width: 640px; }
.o-taquin-apercu { width: 96px; height: 96px; border-radius: var(--rayon-petit); border: 1px solid var(--bord); background: var(--surface-2); }
.o-taquin-image-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; flex: 1 1 260px; }
.atelier .o-taquin-image-choix .btn { min-height: 42px; font-size: .92rem; font-weight: 500; }
.o-taquin-fichier { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.o-taquin-fichier input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.o-taquin-fichier:focus-within { outline: 3px solid var(--marque); outline-offset: 2px; }
.o-taquin .o-taquin-aide { flex-basis: 100%; margin: 0; color: var(--texte-2); font-size: .88rem; line-height: 1.5; }
.o-taquin .o-taquin-centre { text-align: center; margin-top: 6px; }

.o-taquin-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; margin: 12px 0; }
.o-taquin-barre p { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; color: var(--texte-2); font-size: .92rem; }
.o-taquin-barre strong { font: 700 1.3rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--texte); min-width: 3ch; }
.atelier .o-taquin-barre .btn { min-height: 42px; }

.o-taquin-plateau {
  width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; padding: 6px; box-sizing: border-box;
  border-radius: var(--rayon); background: var(--surface-2); border: 1px solid var(--bord);
  container-type: inline-size; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none;
}
.o-taquin-plateau:focus-visible { box-shadow: 0 0 0 3px var(--marque); }
.o-taquin-grille { position: relative; width: 100%; height: 100%; }
.o-taquin-tuile {
  position: absolute; left: 0; top: 0; width: calc(100% / var(--n)); height: calc(100% / var(--n)); padding: 3px; margin: 0;
  border: 0; background: none; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
  transform: translate(calc(var(--x, 0) * 100%), calc(var(--y, 0) * 100%)); transition: transform .13s ease-out;
}
.o-taquin-face {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden;
  border-radius: calc(var(--rayon-petit) + 2px); background: var(--o-taquin-tuile); box-shadow: inset 0 -3px 0 var(--o-taquin-relief);
  font: 800 calc(38cqw / var(--n)) / 1 var(--police); color: var(--texte); font-variant-numeric: tabular-nums;
}
.o-taquin-tuile.bien .o-taquin-face { background: var(--o-taquin-bien); }
@media (hover: hover) { .o-taquin-tuile:hover .o-taquin-face { box-shadow: inset 0 -3px 0 var(--o-taquin-relief), inset 0 0 0 2px var(--marque); } }
.o-taquin-tuile:focus-visible { outline: none; }
.o-taquin-tuile:focus-visible .o-taquin-face { box-shadow: inset 0 0 0 3px var(--marque); }
.o-taquin-face canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }

/* Mode image : tuiles presque jointives, numéros discrets en option */
.o-taquin.mode-image .o-taquin-tuile { padding: 1px; }
.o-taquin.mode-image .o-taquin-face { border-radius: 3px; box-shadow: none; }
.o-taquin.mode-image .o-taquin-face canvas { display: block; }
.o-taquin.mode-image .o-taquin-num { display: none; }
.o-taquin.mode-image.numeros .o-taquin-num {
  display: block; position: absolute; top: 3px; left: 3px; z-index: 1; padding: 2px 5px; border-radius: 4px;
  font: 700 max(11px, calc(11cqw / var(--n))) / 1.1 var(--police); color: #fff; background: rgba(0, 0, 0, .55);
}
.o-taquin.mode-image .o-taquin-tuile.bien .o-taquin-face { background: none; }

.o-taquin-tuile.indice .o-taquin-face { box-shadow: inset 0 0 0 4px var(--ok-texte); animation: o-taquin-indice .9s ease-in-out 2; }
@keyframes o-taquin-indice { 50% { transform: scale(.92); } }

.o-taquin-aides { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.atelier .o-taquin-aides .btn { min-height: 42px; }
.atelier .o-taquin-aides .btn[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.o-taquin .btn:disabled { opacity: .45; cursor: default; }
.o-taquin .btn:focus-visible, .o-taquin input:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; }

.o-taquin-message { display: block; min-height: 1.5em; margin-top: 10px; text-align: center; font-size: .98rem; line-height: 1.45; color: var(--texte); }
.o-taquin.gagne .o-taquin-plateau { border-color: var(--ok-texte); box-shadow: 0 0 0 2px var(--ok-texte); }
.o-taquin.gagne .o-taquin-message { padding: 8px 10px; border-radius: var(--rayon-petit); background: var(--ok-fond); color: var(--ok-texte); font-weight: 600; }
.o-taquin.gagne .o-taquin-grille { animation: o-taquin-gagne .5s ease-out; }
@keyframes o-taquin-gagne { 50% { transform: scale(1.02); } }

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

@media (prefers-reduced-motion: reduce) {
  .o-taquin-tuile { transition: none; }
  .o-taquin-tuile.indice .o-taquin-face, .o-taquin.gagne .o-taquin-grille { animation: none; }
}
@media (max-width: 560px) {
  .o-taquin-plateau { padding: 4px; }
  .o-taquin-tuile { padding: 2px; }
  .o-taquin-scores { font-size: .88rem; }
  .o-taquin-scores th, .o-taquin-scores td { padding: 5px 4px; }
}