/* =============================================================================
   ZTSFicheJeu — la feuille du rendu partage des explications de jeu
   -----------------------------------------------------------------------------
   Lot C, 2026-09-09. Meme apparence que la fiche statique /jeux/<slug>.html
   apres #101 et #102 : cartes papier, titres ZoneTotalSportZTSP alternes
   cyan / jaune, corps AnnieZTS, etiquettes Luckiest Guy. Deux accents, pas de
   rouge : la modale de apps/jeux posait des titres en Luckiest Guy #FF2D2D.

   POURQUOI UN FICHIER, ET PAS UN AJOUT AU BLOC DE shared/zts.css :
   ce bloc est scope `body:has(main.fiche-wrap)` et gouverne les 1 537 fiches
   statiques servies en production. Y greffer un second selecteur, c'est
   risquer ces 1 537 pages pour habiller une modale. Les valeurs sont donc
   reprises — meme charte, portee independante. Quand le generateur sera
   remis en phase avec le mur (inscrit au tableau), il produira ce balisage-ci
   et les deux portees fusionneront d'elles-memes.

   PORTEE : `.zts-fiche-jeu`, la racine que le module ecrit. Rien d'autre.
   L'app garde la main sur ce qui l'entoure (modale, actions, mur).
   ============================================================================= */

/* Les familles sont declarees au §21 du shell (lot A) pour les 41 apps ; sur
   une page qui charge cette feuille sans le shell, ce repli suffit. */
.zts-fiche-jeu {
  --zts-fj-encre: #1A1A2E;
  --zts-fj-papier: #FFFEF7;
  --zts-fj-cyan: #00E5FF;
  --zts-fj-jaune: #FFEA00;
  font-family: var(--font-body, 'AnnieZTS', 'Quicksand', 'Helvetica Neue', sans-serif);
  color: var(--zts-fj-encre);
  display: block;
}

/* ── Cartes papier ────────────────────────────────────────────────────────── */
.zts-fiche-jeu .zts-fj-hero,
.zts-fiche-jeu .zts-fj-sec {
  background: var(--zts-fj-papier);
  color: var(--zts-fj-encre);
  border: 3px solid var(--zts-fj-encre);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--zts-fj-encre);
  padding: 18px 20px 16px;
  margin: 0 0 16px;
}
.zts-fiche-jeu .zts-fj-hero { box-shadow: 6px 6px 0 var(--zts-fj-encre); border-radius: 20px; padding: 22px 24px 20px; }

/* ── Titres : police de marque, contour, ombre dure ───────────────────────── */
/* !important « a regret », et une seule fois : apps/jeux force
   `.font-lucky,h1,h2,h3,h4,…{font-family:'Luckiest Guy'…!important}` dans son
   <style> en ligne (index.html l.509). Mesure : sans cette marque, les titres
   du rendu partage tombaient sur Luckiest Guy — bonne couleur, bonne
   alternance, mauvaise police. La ligne d'app est generale (tous les h2 de
   la page) ; la notre est bornee a `.zts-fiche-jeu`. */
.zts-fiche-jeu .zts-fj-titre,
.zts-fiche-jeu .zts-fj-sec h2 {
  font-family: 'ZoneTotalSportZTSP', 'LuckiestGuy', 'Luckiest Guy', sans-serif !important;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: .05em;
  color: var(--zts-fj-cyan);
  -webkit-text-stroke: 2.5px #000;
  paint-order: stroke fill;
  filter: drop-shadow(4px 4px 0 #000);
  text-shadow: none;
  /* de l'air DANS la boite : WebKit coupe le filtre au bord (lecon #97) */
  padding: .2em .35em .15em .12em;
  margin: 0 0 10px -.12em;
  overflow: visible;
  overflow-wrap: anywhere;
}
.zts-fiche-jeu .zts-fj-titre { font-size: clamp(28px, 4.4vw, 44px); }
.zts-fiche-jeu .zts-fj-sec h2 { font-size: 1.6rem; -webkit-text-stroke: 1.5px #000; filter: drop-shadow(3px 3px 0 #000); }
/* Alternance cyan / jaune dans l'ordre d'affichage, comme la fiche statique. */
.zts-fiche-jeu .zts-fj-sec:nth-of-type(even) h2 { color: var(--zts-fj-jaune); }

/* ── Texte courant ────────────────────────────────────────────────────────── */
.zts-fiche-jeu .zts-fj-sec p,
.zts-fiche-jeu .zts-fj-sec li,
.zts-fiche-jeu .zts-fj-but {
  font-family: var(--font-body, 'AnnieZTS', 'Quicksand', 'Helvetica Neue', sans-serif);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--zts-fj-encre);
  text-transform: none;
}
.zts-fiche-jeu .zts-fj-but { margin: 0 0 10px; }
.zts-fiche-jeu .zts-fj-sec ol,
.zts-fiche-jeu .zts-fj-sec ul { margin: 0; padding-left: 1.3em; }
.zts-fiche-jeu .zts-fj-sec li { margin: 0 0 6px; }
.zts-fiche-jeu .zts-fj-sec p { margin: 0 0 8px; }
.zts-fiche-jeu .zts-fj-sec > :last-child { margin-bottom: 0; }

/* ── Etiquettes, faits, tags : Luckiest Guy, pilules papier ───────────────── */
.zts-fiche-jeu .zts-fj-cat,
.zts-fiche-jeu .zts-fj-fait,
.zts-fiche-jeu .zts-fj-tag {
  display: inline-block;
  font-family: 'LuckiestGuy', 'Luckiest Guy', sans-serif;
  font-weight: 400;
  font-size: .9rem;
  letter-spacing: .04em;
  background: var(--zts-fj-papier);
  color: var(--zts-fj-encre);
  border: 2px solid var(--zts-fj-encre);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--zts-fj-encre);
  padding: 3px 12px;
  margin: 0 6px 6px 0;
}
.zts-fiche-jeu .zts-fj-cat { background: var(--zts-fj-cyan); }
.zts-fiche-jeu .zts-fj-faits { display: flex; flex-wrap: wrap; margin-top: 4px; }
.zts-fiche-jeu .zts-fj-tags { display: flex; flex-wrap: wrap; margin: 0; }
.zts-fiche-jeu .zts-fj-tag { font-size: .8rem; }

@media (max-width: 767px) {
  .zts-fiche-jeu .zts-fj-titre { font-size: 1.9rem; -webkit-text-stroke: 1.5px #000; filter: drop-shadow(3px 3px 0 #000); }
  .zts-fiche-jeu .zts-fj-sec h2 { font-size: 1.3rem; }
  .zts-fiche-jeu .zts-fj-sec p,
  .zts-fiche-jeu .zts-fj-sec li { font-size: 1.15rem; }
  .zts-fiche-jeu .zts-fj-hero,
  .zts-fiche-jeu .zts-fj-sec { padding: 14px 14px 12px; }
}

/* ── /apps/suppleance/ : sa banque de 808 jeux est independante du catalogue
   (lot donnees, inscrit au tableau). Elle n'appelle donc PAS le module JS ;
   elle prend seulement les trois voix, pour que ce soit pareil a l'oeil. ── */
html.ztsh-on body #modal-game-title,
html.ztsh-on body .modal-game-title {
  font-family: 'ZoneTotalSportZTSP', 'LuckiestGuy', 'Luckiest Guy', sans-serif;
  font-weight: 400; text-transform: uppercase; letter-spacing: .05em; line-height: 1.1;
  color: #00E5FF; -webkit-text-stroke: 2.5px #000; paint-order: stroke fill;
  filter: drop-shadow(4px 4px 0 #000); text-shadow: none;
  padding: .2em .35em .15em .12em; margin-left: -.12em; overflow: visible;
}
html.ztsh-on body #modal-game-meta span {
  display: inline-block;
  font-family: 'LuckiestGuy', 'Luckiest Guy', sans-serif; font-weight: 400;
  font-size: .85rem; letter-spacing: .04em;
  background: #FFFEF7; color: #1A1A2E; border: 2px solid #1A1A2E; border-radius: 999px;
  box-shadow: 2px 2px 0 #1A1A2E; padding: 3px 12px; margin: 0 6px 6px 0;
}
html.ztsh-on body #modal-game-desc,
html.ztsh-on body #modal-game-desc p {
  font-family: var(--font-body, 'AnnieZTS', 'Quicksand', 'Helvetica Neue', sans-serif);
  font-size: 1.3rem; font-weight: 400; line-height: 1.4; color: #1A1A2E;
}