/* EnjeuxPuzzle — moteur puzzle maison (W1). Variables surchargeables par la charte. */
.pz {
  --pz-cols: 5;
  --pz-rows: 4;
  --pz-accent: #3fa9c9;
  --pz-fond: #eef3f7;
  --pz-encre: #10161c;
  --pz-radius: 10px;
  font-family: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--pz-encre);
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}
.pz *, .pz *::before, .pz *::after { box-sizing: inherit; }
.pz-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pz-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; background: #fff; border: 1px solid #e6eef2; border-radius: 12px;
  margin-bottom: 10px;
}
.pz-chrono { font-weight: 800; font-size: 15px; min-width: 78px; font-variant-numeric: tabular-nums; }
.pz-btn {
  border: 1px solid #CFDDE4; background: #fff; color: var(--pz-encre); border-radius: 100px;
  min-height: 32px; min-width: 32px; padding: 6px 11px; font-weight: 700; font-size: 12px; line-height: 1; font-family: inherit; cursor: pointer;
}
.pz-btn:hover { border-color: var(--pz-accent); color: var(--pz-accent); }
.pz-btn:disabled { opacity: .45; cursor: default; }
.pz-switch { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; cursor: pointer; font-size: 12px; font-weight: 700; }
.pz-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pz-switch-ui { width: 40px; height: 22px; border-radius: 100px; background: #cfd8dc; position: relative; transition: background .15s; }
.pz-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pz-switch input:checked + .pz-switch-ui { background: var(--pz-accent); }
.pz-switch input:checked + .pz-switch-ui::after { left: 21px; }
.pz-switch input:focus-visible + .pz-switch-ui { box-shadow: 0 0 0 3px rgba(63,169,201,.35); }

/* Retour client 2026-08-19 : le puzzle est CENTRÉ dans l'espace de jeu et le modèle
   (exemple) est centré verticalement à côté (à mi-hauteur du plateau). */
.pz-zone { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.pz-modele { flex: 0 0 160px; }
.pz-modele img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 6px 18px rgba(16,22,28,.18); }

/* Retour client 2026-08-26 : AUCUN trait entre les tuiles — l'image doit être
   CONTINUE (gap/padding/fond supprimés, coins des tuiles à vif). Les états de
   sélection/survol restent lisibles via des liserés INTÉRIEURS (box-shadow inset). */
.pz-board {
  flex: 0 1 640px; /* ne s'étire pas au-delà de sa taille : reste centré */
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--pz-cols), 1fr);
  gap: 0;
  aspect-ratio: var(--pz-cols) / var(--pz-rows);
  max-width: 640px;
  border-radius: var(--pz-radius);
  overflow: hidden; /* coins arrondis du PLATEAU, tuiles jointives dedans */
  box-shadow: 0 6px 18px rgba(16,22,28,.14);
  touch-action: none; /* le glisser-déposer gère lui-même le doigt */
}
.pz-tile {
  border: 0; padding: 0; margin: 0;
  background-repeat: no-repeat;
  background-size: calc(var(--pz-cols) * 100%) calc(var(--pz-rows) * 100%);
  cursor: grab; border-radius: 0;
  outline: none; position: relative;
  transition: transform .08s, box-shadow .12s, opacity .12s;
}
.pz-tile:focus-visible { box-shadow: inset 0 0 0 3px var(--pz-accent); z-index: 2; }
.pz-tile.pz-sel { box-shadow: inset 0 0 0 4px var(--pz-accent), 0 0 0 2px #fff; transform: scale(.94); z-index: 2; }
.pz-tile.pz-over { box-shadow: inset 0 0 0 4px #ffd54f; z-index: 2; }
.pz-tile.pz-drag { z-index: 5; cursor: grabbing; box-shadow: 0 10px 24px rgba(16,22,28,.35); opacity: .95; pointer-events: none; transition: none; }
/* Indice : le halo vert dure plus longtemps et pulse (retour client 2026-08-26 —
   il passait inaperçu, donnant l'impression d'un placement aléatoire). */
.pz-tile.pz-hint { animation: pz-hint 1.6s ease; z-index: 3; }
@keyframes pz-hint {
  0% { box-shadow: inset 0 0 0 0 #43a047; }
  15% { box-shadow: inset 0 0 0 6px #43a047; }
  45% { box-shadow: inset 0 0 0 3px #43a047; }
  70% { box-shadow: inset 0 0 0 6px #43a047; }
  100% { box-shadow: inset 0 0 0 0 #43a047; }
}
.pz-fini .pz-board { box-shadow: 0 8px 26px rgba(16,22,28,.22); }
.pz-fini .pz-tile { cursor: default; }
@media (prefers-reduced-motion: reduce) { .pz-tile { transition: none; } .pz-tile.pz-hint { animation: none; } }

@media (max-width: 640px) {
  /* Responsive (retour client 2026-08-18) : le MODÈLE AU-DESSUS de la grille, centré. */
  .pz-zone { flex-direction: column; align-items: center; }
  /* En colonne, flex-basis s'appliquerait à la HAUTEUR (aspect-ratio → débordement) : largeur pleine. */
  .pz-board { flex: none; width: 100%; max-width: 100%; }
  .pz-modele { flex-basis: auto; width: 150px; margin: 0 auto; }
  .pz-switch { margin-left: 0; }
  .pz-bar { justify-content: center; }
}