/* ===== TO2026 — page GAMES : une disquette qui entre dans un lecteur ===== */
.to-games { padding: 56px 0 72px; }
html body .to-games h1 { font-size: 48px; line-height: 1.17; margin: 0; }
.to-games-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: end; margin-bottom: 56px; }
html body .to-games-head p { margin: 0; color: var(--to-muted); }

.to-game { display: grid; grid-template-columns: 420px 1fr; gap: 72px; align-items: center; }
.to-game > *, .to-cite-cols > *, .to-cite-prises > * { min-width: 0; }
.to-game-bureau { position: relative; display: flex; flex-direction: column; align-items: center; }

/* la disquette : elle entre par le cote du volet, de bas en haut. Son cadre passe devant le lecteur, et pendant l'insertion il la coupe a mi-hauteur de la fente */
.to-floppy-cadre { position: relative; z-index: 3; }
.to-game-bureau.is-insere .to-floppy-cadre { clip-path: inset(-63px -40px -60px -40px); }
.to-floppy {
  position: relative; z-index: 1; display: block; width: 340px; height: 356px; padding: 0; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(160deg, #33353a, #1b1c1f); box-shadow: 8px 8px 0 var(--to-ink);
  clip-path: polygon(0 0, 92% 0, 100% 7%, 100% 100%, 0 100%);
  transition: transform .15s steps(3);
}
.to-floppy:hover { transform: translateY(-8px); }
.to-floppy:focus-visible { outline: 4px solid var(--to-blue); outline-offset: 2px; }
.to-floppy-volet { position: absolute; left: 72px; top: 0; width: 176px; height: 72px; background: linear-gradient(90deg, #b9bcc2, #e3e5e9 45%, #9ea1a8); }
.to-floppy-volet i { position: absolute; left: 112px; top: 8px; width: 40px; height: 56px; background: #1b1c1f; }
.to-floppy-etiquette { position: absolute; left: 24px; right: 24px; top: 88px; height: 224px; box-sizing: border-box; background: #fbfbf8; padding: 8px; }
.to-floppy-etiquette img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.to-floppy-nom { position: absolute; left: 24px; right: 24px; bottom: 16px; font-size: 16px; line-height: 1.5; text-align: center; letter-spacing: .1em; }

/* le lecteur, au-dessus : sa fente en bas de facade, face a la disquette */
.to-lecteur {
  position: relative; z-index: 2; order: -1; width: 420px; height: 120px; margin-bottom: 32px; background: linear-gradient(#3a3b3e, #1f2022);
  border: 2px solid #0d0d0e; border-radius: 8px; color: #e9e9e9; font-size: 12px; line-height: 1.5;
}
.to-lecteur-fente { position: absolute; left: 32px; right: 32px; bottom: 24px; height: 10px; background: #050505; }
.to-lecteur-nom { position: absolute; right: 24px; top: 16px; text-align: right; }
.to-lecteur-led { position: absolute; left: 32px; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: #123a12; }

.to-game-bureau.is-insere .to-floppy { pointer-events: none; animation: to-glisse 1.2s cubic-bezier(.5, 0, .75, .6) forwards; }
.to-game-bureau.is-insere .to-lecteur-led { background: #36ff52; animation: to-clignote .24s steps(2) infinite; }
@keyframes to-glisse {
  0% { transform: translateY(-8px); }
  18% { transform: translateY(6px); }
  100% { transform: translateY(-430px); }
}
@keyframes to-clignote { 50% { background: #123a12; } }

.to-game-texte h2 { font-size: 32px; margin: 0 0 16px; }
html body .to-game-texte p { margin: 0 0 16px; color: var(--to-muted); }
.to-game-texte dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 24px 0; font-size: 12px; }
.to-game-texte dt { color: var(--to-muted); }
.to-game-texte dd { margin: 0; }
html body .to-game-aide { font-size: 12px; }
html body .to-game-texte .to-cta { display: inline-flex; margin-top: 8px; }

.to-game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
html body .to-game-lien { font-size: 12px; color: var(--to-ink); }
html body .to-game-texte h2 a { color: inherit; text-decoration: none; }
html body .to-game-texte h2 a:hover { text-decoration: underline; }
html body .to-game-texte h1 { font-size: 48px; line-height: 1.17; margin: 0 0 16px; }

/* la page de presentation d'un jeu */
.to-cite-hero { background: #0b0c10; }
.to-cite-hero img { display: block; width: 100%; max-width: 1280px; height: auto; margin: 0 auto; }
html body .to-games .to-label a { color: inherit; }
.to-cite-prises { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 72px 0 0; }
.to-cite-prises figure { margin: 0; }
.to-cite-prises img { display: block; width: 100%; height: auto; border: 2px solid var(--to-ink); image-rendering: pixelated; }
.to-cite-prises figcaption { margin-top: 12px; font-size: 12px; color: var(--to-muted); }
.to-cite-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin: 72px 0 0; }
.to-cite-cols h2 { font-size: 24px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--to-ink); }
.to-cite-cols ul { list-style: none; margin: 0; padding: 0; }
html body .to-cite-cols li { padding: 8px 0; color: var(--to-muted); font-size: 16px; line-height: 1.5; }
.to-cite-source { display: flex; align-items: center; justify-content: space-between; gap: 48px; margin: 72px 0 0; padding: 32px; border: 2px solid var(--to-ink); }
.to-cite-source h2 { font-size: 24px; margin: 0 0 12px; }
html body .to-cite-source p { margin: 0; color: var(--to-muted); }
html body .to-cite-source .to-cta { flex: none; }

@media (max-width: 1099px) {
  .to-cite-prises, .to-cite-cols { grid-template-columns: 1fr; }
  .to-cite-source { flex-direction: column; align-items: flex-start; }
  html body .to-game-texte h1 { font-size: 32px; }
  .to-games-head { grid-template-columns: 1fr; gap: 24px; }
  html body .to-games h1 { font-size: 32px; }
  .to-game { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 520px) {
  html body .to-game-texte .to-cta, html body .to-cite-source .to-cta { white-space: normal; font-size: 12px; }
  .to-cite-source { padding: 16px; }
  html body .to-games h1 { font-size: 24px; }
  .to-floppy { width: 280px; height: 300px; }
  .to-floppy-volet { left: 56px; width: 148px; height: 60px; }
  .to-floppy-etiquette { top: 72px; height: 188px; left: 16px; right: 16px; }
  .to-lecteur { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .to-game-bureau.is-insere .to-floppy { animation-duration: .01s; }
}