/* Game : un grand bloc par jeu — le texte d'un côté, les captures de l'autre */
.jeux { display: grid; gap: 56px; }
.jeu { display: grid; grid-template-columns: 1fr 1.6fr; gap: 44px; align-items: center; padding: 44px 40px; }   /* les captures prennent la place */
.jeu-inverse { grid-template-columns: 1.6fr 1fr; }   /* un jeu sur deux : les captures à gauche, même place */
.jeu-inverse .jeu-texte { order: 2; }
.jeu-texte { display: flex; flex-direction: column; gap: 14px; }
.jeu-texte h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0; }
.jeu-texte p { margin: 0; }
.jeu-accroche { font-size: 1.15rem; color: var(--encre-titre); }
.jeu-texte p:not(.jeu-accroche):not(.etiquette) { color: var(--encre-douce); }
.jeu-infos { font: 13px/1.5 var(--police-mono); letter-spacing: .06em; }
.jeu-actions { margin-top: 6px; }
/* L'étiquette « Alpha » : petit cartouche au double trait, sous le titre du jeu */
.jeu-texte .etiquette {
  align-self: flex-start; margin-top: -2px;
  font: 600 11px/1 var(--police-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--encre-titre);
  padding: 7px 10px; border: 1px solid var(--trait-or); outline: 1px solid var(--trait); outline-offset: 2px; border-radius: 2px;
}

/* Les captures : une grande, deux petites dessous */
.jeu-captures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.capture { margin: 0; aspect-ratio: 16 / 9; border-radius: 3px; background: var(--fond-carte); }   /* cadre : .cadre-double */
.capture-grande { grid-column: 1 / -1; }
.jeu-captures-4 { grid-template-columns: repeat(3, 1fr); }   /* une grande, trois petites dessous */
.jeu-captures-5 { grid-template-columns: repeat(4, 1fr); }   /* une grande, quatre petites dessous */
.capture a { display: block; height: 100%; }
.capture img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, .8, .3, 1); }
.capture a:hover img { transform: scale(1.04); }
.capture-vide { display: grid; place-items: center; }
.capture-vide span { font: 11px/1 var(--police-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); }

/* Un bouton pas encore actif (jeu pas encore en vente) */
.bouton-inactif { opacity: .55; cursor: default; }
.bouton-inactif:hover { background: var(--bouton-fond); border-color: var(--bouton-trait); outline-color: var(--bouton-trait); }

@media (max-width: 860px) {
  .jeu, .jeu-inverse { grid-template-columns: 1fr; padding: 32px 24px; }
  .jeu-captures-4, .jeu-captures-5 { grid-template-columns: 1fr 1fr; }   /* vignettes assez grandes au doigt */
  .jeu-inverse .jeu-texte { order: 0; }
}
@media (prefers-reduced-motion: reduce) { .capture img { transition: none; } }

/* Titre du jeu cliquable (mène à sa page) */
.jeu-titre-lien { color: inherit; text-decoration: none; }
.jeu-titre-lien:hover, .jeu-titre-lien:focus-visible { color: var(--accent); }
.jeu-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Page d'un jeu */
.retour { color: inherit; text-decoration: none; display: inline-block; padding: 12px 0; }
.retour:hover { color: var(--accent-survol); }
.etiquette-centree { display: inline-block; margin: 0 0 18px; font: 600 11px/1 var(--police-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--encre-titre); padding: 7px 10px; border: 1px solid var(--trait-or); outline: 1px solid var(--trait); outline-offset: 2px; border-radius: 2px; }
.fiche-jeu { display: grid; gap: 56px; }
.fiche-texte { padding: 44px 40px; max-width: 860px; margin: 0 auto; width: 100%; }
.fiche-texte h2, .fiche-galerie h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.fiche-texte p { color: var(--encre-douce); }
.fiche-galerie h2 { text-align: center; }
.jeu-captures-galerie { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .fiche-texte { padding: 32px 24px; } .jeu-captures-galerie { grid-template-columns: 1fr; } }
