/* ==========================================================================
   Boutique de jeux (08/11/2026) : la feuille de la seule page jeux.html
   Liée sur cette page seulement, après site.css (déclarée dans la carte du site, rubrique « feuilles ») :
   « pour les éléments jeux, les ressources sont seulement sur la page en question » (Seeb, 08/11/2026 13:50).
   Les jetons de couleur et les polices viennent de site.css ; rien ici ne vaut ailleurs que sur la boutique.
   Dix fiches, comme dans une boutique de jeux vidéo, et « Coming soon » à la place de « Jouer ».
   Les fiches suivent les jetons du thème (fond, surface, encre, accent), dans tous les thèmes du pupitre, en clair
   comme en sombre. Les jaquettes, elles, sont des objets imprimés : dix fichiers SVG (assets/img/jeux/), qui gardent
   leurs couleurs partout (une nuit teintée, un lettrage crème, contraste bien au-dessus de AA) et leur typographie
   (le titre vectorisé). Chaque fiche porte sa teinte (--jq), que la jaquette et le losange du genre reprennent.
   Sans script : rien ne bouge, rien ne se charge, le bouton « Coming soon » est désactivé (aria-disabled).
   ========================================================================== */
.jq-0 { --jq: #7ad39a; }
.jq-1 { --jq: #e8a53a; }
.jq-2 { --jq: #2fb7a4; }
.jq-3 { --jq: #9a86f2; }
.jq-4 { --jq: #e8709e; }
.jq-5 { --jq: #f0803c; }
.jq-6 { --jq: #4c9be8; }
.jq-7 { --jq: #7fc35c; }
.jq-8 { --jq: #ec6a5c; }
.jq-9 { --jq: #3cc8d8; }
.jq-10 { --jq: #c46fd6; }

.boutique-rayon {
  margin: 0 0 2rem;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

.boutique-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .boutique-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jeu--affiche {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .boutique-grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 2rem;
  }
}

.jeu {
  display: flex;
  min-width: 0;
}

.jeu-fiche {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  min-width: 0;
  padding: 0.85rem 0.85rem 1.25rem;
  border: 1px solid var(--filet);
  border-radius: 12px;
  background: var(--surface);
}

.jeu-texte {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding-inline: 0.35rem;
}

.jeu-fiche h3 {
  margin-bottom: 0.4rem;
  font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem);
}

.jeu-etiquette {
  align-self: flex-start;
  margin: 0 0 0.75rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.jeu-genre {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* le losange de la teinte du jeu, comme sur sa jaquette */
.jeu-genre::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--jq, var(--accent));
  transform: translateY(-0.05rem) rotate(45deg);
}

.jeu-description {
  margin: 0 0 1rem;
  color: var(--encre);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.jeu-details {
  display: grid;
  gap: 0.8rem;
  margin: 0 0 1.4rem;
}

.jeu-details dt {
  margin-bottom: 0.15rem;
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.jeu-details dd {
  margin: 0;
  color: var(--encre-2);
  font-size: 1rem;
  line-height: 1.55;
}

.jeu-action {
  margin: auto 0 0;
}

/* « Coming soon » à la place de « Jouer » : un bouton qui dit qu'il ne fait rien encore, lisible et annoncé comme tel */
.jeu-jouer {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.15rem 0.5rem 1rem;
  border: 2px dashed var(--encre-3);
  border-radius: 999px;
  background: transparent;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
  cursor: not-allowed;
}

.jeu-jouer::before {
  content: "";
  content: "" / "";
  width: 0;
  height: 0;
  border-block: 0.4em solid transparent;
  border-left: 0.65em solid var(--encre-3);
}

.jeu-jouer:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.boutique-transparence {
  max-width: var(--mesure);
  margin: 3rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--filet);
  color: var(--encre-2);
  font-size: 1rem;
}

/* à l'affiche : la jaquette à gauche, la fiche à droite */
.jeu--affiche .jaquette {
  max-width: 21rem;
}

@media (min-width: 48rem) {
  .jeu--affiche .jeu-fiche {
    display: grid;
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
    padding: 1.1rem;
  }

  .jeu--affiche .jeu-texte {
    height: 100%;
    padding: 0.4rem 0.5rem 0.2rem 0;
  }

  .jeu--affiche h3 {
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  }

  .jeu--affiche .jeu-description {
    max-width: 36rem;
    font-size: 1.1875rem;
  }

  .jeu--affiche .jeu-details {
    max-width: 36rem;
  }
}

/* ---------- Les jaquettes : dix images SVG (assets/img/jeux/), chargées par cette page seulement ---------- */
/* Écrites par le script de la boutique ; chacune porte en dur la teinte de sa fiche (--jq ci-dessus).
   width et height (300 x 400) sont posés sur chaque <img> : la place est réservée avant le chargement. */
.jaquette {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  background: #0a0e1c;
  box-shadow: 0 0 0 1px var(--filet), 0 16px 30px -20px rgba(0, 0, 0, 0.6);
}

/* le premier jeu jouable (08/11/2026) : un vrai lien « Jouer », plein, vers la page du jeu ; « .jeu-action » le place au-dessus de la couleur des liens du thème Rétro */
.jeu-action .jeu-jouer--ouvert {
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--fond);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.jeu-action .jeu-jouer--ouvert::before {
  border-left-color: var(--fond);
}

.jeu-action .jeu-jouer--ouvert:hover {
  border-color: var(--accent-fort);
  background: var(--accent-fort);
}
.jeu-concept { display: inline-block; font-style: italic; color: var(--encre-3); }