/* ============================================
   FICHIER : table.css
   VERSION : 2026.09.30
   OBJET   : Styles des tableaux "jeux" et "infos"
   CHANGTS :
     - Séparation des règles table.games / table.info
     - Ajout table-layout:fixed sur table.games
   ============================================ */

/* ✅ 2026.09.30e : la colonne « Score » masquée a disparu. Sa valeur vit
   désormais dans la 1re colonne, « Votes », à côté de l'icône 👍/👎 (donc
   visible et triable) — plus aucune colonne cachée dans le tableau. */

/* ============================================================
   ✅ 2026.09.30 : CATALOGUE « PLAT » (plus de tables imbriquées)
   Les cellules « Titre », « Joueurs max. » et « Pour jouer... » sont
   désormais composées de cellules plates : la géométrie des anciennes
   tables imbriquées (marges, paddings et bordures héritées de table.games)
   est reproduite à l´identique par la boîte « héritée » ci-dessous, mais
   plus aucune <table> imbriquée ne peut être « remontée » hors de sa
   cellule par un re-parsing HTML (extension, proxy, sérialisation).
   ============================================================ */

/* Boîte « héritée » : même espacement que les anciennes cellules imbriquées
   (margin 10px 0 2px + padding 6px 10px + bordures 2px de table.games tr) */
#gamesRanking .cell-ligne-flex,
#gamesRanking .cell-joueurs__liens {
  margin: 10px 0 2px 0;
  padding: 6px 10px;
  border-top: 2px solid rgba(0,0,0,0.08);
  border-bottom: 2px solid rgba(0,0,0,0.08);
}

/* Ligne interne d’une cellule composite (Titre / Joueurs / Pour jouer...) */
#gamesRanking .cell-ligne-flex {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Rang affiché juste après l’icône : même retrait que l’ancienne cellule imbriquée */
#gamesRanking .rezoo-rank {
  padding-left: 10px;
}

/* ✅ 2026.09.30e : colonne « Votes » (1re) = icône de vote cliquable.
   ✅ 2026.09.30f : la VALEUR du score n'est plus affichée (demande utilisateur) :
   l'icône est donc la seule occupante de la cellule et se retrouve exactement
   centrée dans la colonne. Le score continue d'être trié (data-rezoo-score).
   ✅ 2026.09.30i : centrage HORIZONTAL + VERTICAL de l'icône dans chaque ligne,
   SANS aucune technique dépendante du moteur de rendu (demande utilisateur) :
   - la cellule n'est plus un `display: flex`. Un <td> rendu `flex` par un moteur
     qui n'applique pas le flex reste un `table-cell` : `justify-content` n'avait
     alors AUCUN effet et l'icône partait à gauche. Ici, c'est `text-align:
     center` — universel, identique à l'attribut `align="center"` posé sur la
     cellule par votes.js — qui centre ;
   - l'icône devient une BOÎTE PLEINE LARGEUR (`inline-flex; width: 100%`) :
     elle occupe toute la colonne et son glyphe est centré dedans
     (`justify-content/align-items: center`, doublés par `text-align: center`
     qui suffit à un moteur sans flex). Plus besoin de `max-width` : la boîte ne
     peut plus dépasser la colonne, y compris à 769 px (colonne de 26 px) où le
     débordement du glyphe est désormais SYMÉTRIQUE ;
   - centrage VERTICAL : `vertical-align: middle` (doublé par `valign="middle"`
     posé par votes.js) + boîte `inline-flex` de 24 px avec `align-items: center` :
     centrer la BOÎTE du glyphe (`<i>`) ne dépend plus de la ligne de base du
     texte (mesure : la boîte du `<i>` tombait 1,00 px au-dessus du centre avec
     un simple `line-height`) → boîte ET encre tombent maintenant sur l'axe ;
   - les fonds (padding) de la cellule sont symétriques (`6px 0`) : l'axe du
     centrage est donc l'axe de la COLONNE, pas celui d'une boîte réduite.
   Les trois états 👉 / 👍 / 👎 partagent la même boîte : leur encre tombe sur
   le même axe, à la verticale de la flèche de tri de l'en-tête. */
#gamesRanking .cell-votes {
  text-align: center;
  vertical-align: middle;
  padding: 6px 0;
  white-space: nowrap;
}
#gamesRanking .cell-votes .rezoo-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 24px;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}

/* Colonne « Joueurs max. » : nombre à droite (50%) + liens Co-Optimus centrés */
#gamesRanking .cell-joueurs__nb {
  flex: 0 0 50%;
  text-align: right;
}
#gamesRanking .cell-joueurs__liens {
  flex: 1 1 auto;
  text-align: center;
}

/* Colonne « Pour jouer... » : icône crack (largeur fixe) + prix à gauche */
#gamesRanking .crack-icon {
  flex: 0 0 auto;
  width: 32px;
  text-align: center;
}
#gamesRanking .toplay-links {
  flex: 1 1 auto;
  text-align: left;
}

/* Tableaux jeux */
table.games {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 2px 0;
  background-color: var(--bg-light) /* thématique clair/sombre */;
  table-layout: fixed; /* clé pour éviter l’étirement */
}

table.games th,
table.games td {
  padding: 6px 10px;
  vertical-align: middle;
}

table.games th {
  background-color: #222;
  color: #ffcc88;
  font-weight: bold;
}

table.games tbody tr:nth-child(even) {
  background-color: rgba(240,240,240,0.6);
}

table.games tr {
  border-top: 2px solid rgba(0,0,0,0.08);
  border-bottom: 2px solid rgba(0,0,0,0.08);
}

/* ============================================================
   FICHIER : table.css (extrait "infos")
   VERSION : 2026.08.24-5 — Option A : fiches empilées
   OBJET   : Chaque ligne du tableau "info" (Déroulement/Lieu/
              Joueurs/Ne pas oublier) devient une CARTE verticale :
              badge th + contenu td.
              ❌ Aucune modif HTML/JSON : compatible contenu statique
              ReZoo.html ET editor_content.json (admin).
   ============================================================ */

/* Tableau → pile de cartes */
table.info {
  display: block;
  width: 100%;
  border-collapse: collapse;
  margin: 2px 0 15px 0;
  background: transparent;
}

table.info tbody {
  display: block;
  width: 100%;
}

/* Chaque ligne = une carte */
table.info tbody tr {
  display: flex;
  flex-direction: row;      /* badge à gauche, texte à droite (desktop) */
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 6px 0;  /* ✅ 2026.08.24-5 : resserré 8px → 6px */
  padding: 10px 12px; /* ✅ 2026.08.24-5 : cadre réduit 14px 16px → 10px 12px */
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px var(--card-shadow);
}

/* Badge label */
table.info th {
  flex: 0 0 auto;
  min-width: 170px;
  align-self: flex-start;
  background: var(--accent);
  color: #2f2100;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.82em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* Contenu */
table.info td {
  padding: 2px;
  color: var(--text-main);
  line-height: 1.45;
}

/* Icônes décoratives par position (ordre stable du contenu admin) */
table.info tbody tr:nth-of-type(1) th::before { content: "📅 "; }
table.info tbody tr:nth-of-type(2) th::before { content: "📍 "; }
table.info tbody tr:nth-of-type(3) th::before { content: "👥 "; }
table.info tbody tr:nth-of-type(4) th::before { content: "🎒 "; }

/* En-têtes fixes */
table thead th {
  position: sticky;
  top: 34px;
  background: #222;
  color: #ffcc88;
  z-index: 2;
}

table.games {
  table-layout: fixed;
}

/* ✅ 2026.09.30e : largeurs des 8 colonnes (somme = 100 %).
   Ordre : Votes · Titre · Joueurs max. · Genre · Bots · Divers ·
           Pour jouer (Patch) · Taille
   ✅ 2026.09.30f : « Votes » ne contient plus qu'une icône → 6 % → 4 %, les
   2 % libérés vont à « Divers » (colonne la plus dense). */
table.games th:nth-child(1) { width: 4%;  } /* Votes (icône seule) */
table.games th:nth-child(2) { width: 18%; } /* Titre */
table.games th:nth-child(3) { width: 20%; } /* Joueurs */
table.games th:nth-child(4) { width: 5%;  } /* Genre */
table.games th:nth-child(5) { width: 5%;  } /* Bots */
table.games th:nth-child(6) { width: 25%; } /* Divers */
table.games th:nth-child(7) { width: 17%; } /* Pour jouer */
table.games th:nth-child(8) { width: 6%;  } /* Taille */

/* ============================================================
   ✅ 2026.09.30e : EN-TÊTES PILOTES DU CATALOGUE
   Le tri vit dans les en-têtes (motif identique à admin-users.js : classe
   « sortable » + flèche ▲/▼). Ici le contrôle est un vrai <button> dans le
   <th> : clic souris ET clavier (Entrée / Espace) sans perdre la sémantique
   de colonne (`aria-sort` est publié par votes.js).
   ============================================================ */
#gamesRanking .th-tri { padding: 0; }          /* le bouton occupe la cellule */
#gamesRanking .th-tri__btn {
  display: block;
  width: 100%;
  padding: 6px 10px;                            /* = padding des autres th */
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
#gamesRanking .th-tri__btn:hover { background: rgba(255, 255, 255, 0.12); }
#gamesRanking .th-tri__btn:focus-visible {
  outline: 2px solid var(--accent, #ffcc88);
  outline-offset: -2px;
}
/* La colonne « Votes » n'affiche QUE la flèche → flex centré : le centrage est
   exact (un `text-align:center` laisserait un espace parasite décaler la flèche)
   et la colonne reste un vrai bouton cliquable, nommé par aria-label. */
#gamesRanking .th-votes .th-tri__btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Flèche de tri : largeur réservée pour que le libellé ne bouge pas.
   ✅ 2026.09.30f : ⇅ (colonne triable mais inactive) est atténué. */
#gamesRanking .th-fleche { display: inline-block; min-width: 0.9em; }
#gamesRanking .th-fleche--inactif { opacity: 0.45; }
/* Compteur « Titre (76) » : discret, et mis à jour par votes.js */
#gamesRanking .th-compte { font-weight: normal; opacity: 0.85; }
/* ✅ 2026.09.30h : l'en-tête de la colonne « Pour jouer… » n'affiche plus que
   son libellé (la case « ✅ uniquement », qui filtrait la liste, a été retirée)
   et sa police est légèrement réduite : le libellé tient sur UNE ligne à partir
   de ~1200 px, ce qui ramène la ligne d'en-têtes à une seule ligne (elle en
   faisait deux à cause de ce texte + de la case, cf. mesures du CHANGELOG).
   Sous ce seuil, il reste autorisé à passer à la ligne plutôt que de déborder
   sur la colonne voisine. */
#gamesRanking .th-patch { font-size: 0.85em; white-space: nowrap; }
@media (max-width: 1199px) { #gamesRanking .th-patch { white-space: normal; } }

/* ✅ 2026.09.30h : le « ✅/❌ » du libellé EST le bouton du filtre « patchés
   uniquement ». Inline (il vit dans la phrase, entre « (Patch ? » et « ) ») :
   aucune bordure, police héritée, curseur main ; « ✅/❌ » ⇄ « ✅ » au clic. */
#gamesRanking .th-patch__toggle {
  display: inline;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 3px;
}
#gamesRanking .th-patch__toggle:hover { background: rgba(255, 255, 255, 0.16); }
#gamesRanking .th-patch__toggle:focus-visible {
  outline: 2px solid var(--accent, #ffcc88);
  outline-offset: 1px;
}
/* État actif (filtre en marche) : le glyphe « ✅ » est mis en avant */
#gamesRanking .th-patch__toggle[aria-pressed="true"] {
  background: rgba(34, 170, 34, 0.35);
  font-weight: bold;
}


.col-joueurs .links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Bloc promo Steam */
.steam-discount {
  display: inline-flex;
  align-items: stretch;
  font-size: 0.8em;
  border-radius: 3px;
  overflow: hidden;
  margin-left: 6px; /* espace entre "Steam" et le badge */
}

.steam-discount .discount-badge {
  background: #2d6a2d;
  color: #aaffaa;
  padding: 1px 4px;
  display: flex;
  align-items: center;
}

.steam-discount .discount-prices {
  background: #1b2838;
  color: #aaffaa;
  padding: 2px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.steam-discount .discount-prices .old {
  text-decoration: line-through;
  color: #ccc;
  font-size: 0.8em;
}

.steam-discount .discount-prices .new {
  font-size: 1em;
}