/* Page « Résoudre un cube » : patron, cube 3D (CSS pur, sans bibliothèque), lecteur de solution. */
main:has(.atelier) { max-width: 75rem; }
.atelier { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) {
  .atelier { grid-template-columns: 1fr 1fr; }
  .atelier__resolution { grid-column: 1 / -1; }
}
.boutons { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; align-items: center; }
.bouton--secondaire { background: var(--fond); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.champ--ligne { flex-direction: row; align-items: center; gap: .75rem; }
select { font: inherit; padding: .5rem; border: 1px solid var(--bordure); border-radius: 4px; background: var(--fond); color: var(--texte); }

/* Palette de couleurs */
.palette { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.pastille { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--bordure); cursor: pointer; padding: 0; }
.pastille[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--fond), 0 0 0 6px var(--texte); }

/* Patron : les six faces dépliées en croix */
.patron {
  --case: min(1.9rem, calc((100vw - 5rem) / 13));
  display: grid; gap: .35rem; justify-content: start;
  grid-template-columns: repeat(4, calc(var(--case) * 3 + 6px));
  grid-template-areas: ". U . ." "L F R B" ". D . .";
}
.patron__face { display: grid; grid-template-columns: repeat(3, var(--case)); gap: 3px; position: relative; padding-top: 1.1rem; }
.patron__face--U { grid-area: U; } .patron__face--D { grid-area: D; } .patron__face--L { grid-area: L; }
.patron__face--R { grid-area: R; } .patron__face--F { grid-area: F; } .patron__face--B { grid-area: B; }
.patron__nom { position: absolute; top: 0; left: 0; font-size: .7rem; line-height: 1; white-space: nowrap; }
.case {
  width: var(--case); height: var(--case); padding: 0; border: 1px solid #222; border-radius: 3px;
  background-size: cover; background-position: center; cursor: pointer;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.case:disabled { cursor: default; }
.case.bouge { box-shadow: inset 0 0 0 3px #222, 0 0 0 2px var(--fond); }

/* Cube 3D */
.scene { perspective: 900px; display: flex; justify-content: center; padding: 3rem 0; touch-action: none; user-select: none; }
.cube3d { --taille: 11rem; width: var(--taille); height: var(--taille); position: relative; transform-style: preserve-3d; transition: transform .35s ease; }
.face3d {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
  background: #111; border-radius: 6px; backface-visibility: hidden;
}
.face3d .case { width: auto; height: auto; border-radius: 4px; }
.face3d--U { transform: rotateX(90deg) translateZ(calc(var(--taille) / 2)); }
.face3d--D { transform: rotateX(-90deg) translateZ(calc(var(--taille) / 2)); }
.face3d--F { transform: translateZ(calc(var(--taille) / 2)); }
.face3d--B { transform: rotateY(180deg) translateZ(calc(var(--taille) / 2)); }
.face3d--R { transform: rotateY(90deg) translateZ(calc(var(--taille) / 2)); }
.face3d--L { transform: rotateY(-90deg) translateZ(calc(var(--taille) / 2)); }
.face3d .case.bouge { box-shadow: inset 0 0 0 4px #111, 0 0 12px 2px #fff; }

/* Photo */
.photo { margin-top: 1rem; border: 1px solid var(--bordure); border-radius: 6px; padding: .5rem 1rem; }
.photo summary { cursor: pointer; font-weight: 600; }
.consigne { font-weight: 600; }
.viseur { position: relative; width: min(100%, 18rem); aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #000; }
.viseur video { width: 100%; height: 100%; object-fit: cover; }
.viseur__grille { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.viseur__grille span { border: 2px solid rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); }

/* Lecteur et solution écrite */
.position { font-weight: 600; font-size: 1.1rem; }
.etapes { max-height: 28rem; overflow-y: auto; padding-left: 1.5rem; border: 1px solid var(--bordure); border-radius: 6px; padding: .5rem 1rem .5rem 2.5rem; }
.etapes li { margin-bottom: 1rem; }
.etapes p { margin: .25rem 0; }
.mouvements { display: flex; flex-wrap: wrap; gap: .25rem; }
.mouvement {
  font: 600 .95rem/1 ui-monospace, monospace; min-width: 2.75rem; min-height: 2.25rem; padding: .25rem .5rem; cursor: pointer;
  border: 1px solid var(--bordure); border-radius: 4px; background: var(--fond); color: var(--texte);
}
.mouvement.fait { background: color-mix(in srgb, var(--accent) 18%, var(--fond)); }
.mouvement[aria-current="step"] { background: var(--accent); color: var(--fond); border-color: var(--accent); }

/* Listes de progressions et de skins */
.liste-cartes { list-style: none; padding: 0; display: grid; gap: 1rem; }
.carte { border: 1px solid var(--bordure); border-radius: 6px; padding: 1rem; }
.vignettes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.vignettes li { display: flex; align-items: center; gap: .35rem; }
.vignettes img { object-fit: cover; border-radius: 4px; border: 1px solid var(--bordure); }