/**
 * La grille de cartes des jeux — feuille de l'accueil.
 *
 * Nee comme feuille d'une page d'essai, et gardee a part apres son adoption : ce
 * qu'elle contient ne concerne QUE la nouvelle presentation de l'accueil. Tant
 * que l'ancienne presentation est conservee (public/ancien.html), elle doit
 * pouvoir vivre sans ce fichier — d'ou la separation.
 *
 * Elle ne redefinit rien : ni couleur de fond, ni police, ni encart. Tout cela
 * vient de style.css, et la grille s'y insere.
 */

/* Le choix du departement adverse, au-dessus de la grille : il vaut pour la
   partie qu'on lance, quel que soit le jeu choisi. */
.apercu-cible {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

/* Les listes d'origine restent dans la page — la grille les remplit et soumet
   leur formulaire — mais on ne les montre pas. « display: none » suffirait ; on
   garde tout de meme la place a zero pour ne rien deranger de la mise en page. */
.formes-cachees {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le classement et les records cote a cote.
 *
 * « main » est deja une grille de deux colonnes, mais inegales (1fr et 1,2fr) et
 * l'encart des records y demandait toute la largeur. On ne touche a rien de cela :
 * on pose un bloc qui prend la largeur entiere et se partage en DEUX MOITIES
 * egales. Les autres encarts gardent ainsi la mise en page qu'ils avaient.
 *
 * « align-items » reste a sa valeur d'origine — les deux encarts s'etirent a la
 * meme hauteur, celle du plus grand. C'est ce qui fait deux encarts de meme taille. */
.deux-colonnes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* Sans cela, la regle de style.css lui ferait reprendre les deux colonnes. */
.deux-colonnes #records-panel {
  grid-column: auto;
}

/* En colonne, et non sur plusieurs : un record par ligne, en face du classement.
   Et la meme hauteur maximale que le classement, pour que ni l'un ni l'autre
   n'entraine son voisin en longueur. */
.deux-colonnes .records {
  grid-template-columns: minmax(0, 1fr);
}
.deux-colonnes #records-liste {
  max-height: 560px;
  overflow-y: auto;
}

/* CHAQUE BLOC SUR SA PROPRE LIGNE, sur la largeur entiere.
 *
 * « main » est une grille de deux colonnes : sans cette regle, « Rejoindre la
 * partie » et l'encart suivant se rangeraient cote a cote, et « Indicateurs clés »
 * n'occuperait qu'une moitie. La seule paire qui se lit cote a cote est le
 * classement et les records, et elle a son bloc a elle.
 *
 * Les jeux ont besoin de la largeur entiere pour montrer deux cartes et demie. */
#auth-panel,
#duel-panel,
main .super {
  grid-column: 1 / -1;
}

/* « Indicateurs clés » et « Les accélérateurs » vivaient hors du bloc principal,
   ou ils se centraient eux-memes. Entres dedans pour passer sous les jeux, ils
   n'ont plus a le faire — la grille les place. */
main .super {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Pendant la partie, style.css efface le classement. L'encart des records, lui,
   reste — il n'a jamais ete de ceux qu'on cache. On lui rend alors toute la
   largeur, plutot que de le laisser dans sa moitie a cote d'un vide. */
body.en-partie .deux-colonnes {
  grid-template-columns: minmax(0, 1fr);
}

/* Sur un ecran etroit, les deux encarts s'empilent — deux demi-classements de
   320 pixels ne se lisent plus. Le meme seuil que la grille de main. */
@media (max-width: 860px) {
  .deux-colonnes {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

/* Une bande qui defile, et non une grille.
 *
 * Dix-huit grandes cartes faisaient une page interminable : on ne voyait plus les
 * jeux, on les subissait. Quatre cartes en vue les reduisaient a des lamelles de
 * soixante-quinze pixels. DEUX ET DEMIE : les deux premieres se lisent en entier,
 * la troisieme depasse a moitie — et cette moitie coupee dit d'elle-meme qu'il y a
 * une suite, ce qu'aucune fleche ni aucun texte ne dit aussi bien.
 *
 * Le defilement est celui du navigateur, avec accrochage : sur un ecran tactile on
 * balaye du doigt sans qu'une ligne de code s'en mele, et les fleches ne servent
 * qu'a la souris. */
.jeux-bande {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.jeux-piste {
  --ecart: 0.7rem;
  display: flex;
  flex: 1;
  gap: var(--ecart);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Quand les cartes se reordonnent, le navigateur deplace de lui-meme le
     defilement pour garder a sa place ce qu'il croit qu'on regarde. Bonne idee
     ailleurs, genante ici : c'est le code qui decide quelle carte rester sous
     les yeux, et les deux corrections se contrariaient. */
  overflow-anchor: none;
  padding: 0.15rem 0.1rem 0.5rem;
  /* Une barre discrete : elle dit qu'il y a une suite, sans encombrer. */
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 50, 82, 0.25) transparent;
}

/* Format paysage : l'image a gauche, le texte a droite. Une carte en hauteur
   aurait fait, a cette largeur, une colonne de six cents pixels de haut.
   Deux et demie en vue : on retire les deux ecarts avant de diviser. */
.jeu-carte {
  display: flex;
  flex: 0 0 calc((100% - 2 * var(--ecart)) / 2.5);
  flex-direction: row;
  /* Toutes de la meme taille : la hauteur ne depend pas de ce que la carte porte
     — une mention « hors classement » de plus ne la fait pas grandir. */
  min-height: 7.6rem;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(43, 50, 82, 0.12);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 6px rgba(43, 50, 82, 0.06);
  transition: transform 0.12s, box-shadow 0.12s;
}
.jeu-carte:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(43, 50, 82, 0.13);
}

/* L'image prend un peu moins de la moitie de la carte : a cette hauteur, cela
   lui laisse presque exactement ses trois pour deux, et le texte respire. */
.jeu-image {
  flex: 0 0 46%;
  background: #eef1f9;
}
.jeu-image img,
.jeu-image svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jeu-image.sans-image img {
  display: none;
}

/* L'ENCRE EST DITE ICI, et ce n'est pas un detail : le site est sombre, sa
   couleur de texte est donc un blanc casse. Pose sur une carte blanche, le titre
   heritait de ce blanc et devenait illisible. Une carte claire porte son encre
   sombre, sans rien demander au theme. */
.jeu-corps {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.55rem 0.65rem 0.6rem;
  color: #3a4265;
}
.jeu-corps h3 {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.15;
  font-weight: 700;
  color: #171c33;
}

.jeu-mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  min-height: 1rem;
}

/* Deux renseignements de nature differente, deux couleurs — les memes que sous la
   liste deroulante : le BLEU pour l'instant present, le LAVANDE pour les trois
   dernieres heures.
   
   Les teintes du theme (« --neon », « --neon-alt ») sont pensees pour le fond
   sombre du site : claires, elles s'evanouissent sur une carte blanche. On garde
   donc les deux teintes et on descend leur encre jusqu'a se lire ici. */
.jeu-mention {
  padding: 0.1rem 0.45rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.35;
}

/* Maintenant : ce qui appelle a agir tout de suite. */
.jeu-mention.maintenant {
  color: #0b5aa2;
  border-color: rgba(11, 90, 162, 0.35);
  background: rgba(125, 211, 252, 0.22);
}

/* Les trois dernieres heures : une indication de fond, plus calme. */
.jeu-mention.recemment {
  color: #5b21b6;
  border-color: rgba(91, 33, 182, 0.3);
  background: rgba(196, 181, 253, 0.25);
}

.jeu-hors {
  margin: 0;
  font-size: 0.66rem;
  color: #b45309;
}

.jeu-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: auto;
}
.jeu-boutons .btn,
.jeu-boutons .btn-ghost {
  flex: 1;
  min-width: 4.6rem;
  padding: 0.32rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
}

/* Meme cause que le titre des cartes : « btn-ghost » emprunte au theme sombre une
   encre et une bordure pales, invisibles sur blanc. On les redit ici. */
.jeu-boutons .btn-ghost {
  color: #2b3252;
  border-color: rgba(43, 50, 82, 0.4);
  background: #f4f6fc;
}
.jeu-boutons .btn-ghost:hover {
  color: #171c33;
  border-color: rgba(43, 50, 82, 0.75);
  background: #e8ecf8;
}

/* Les fleches, pour la souris. Le doigt, lui, balaye la bande. */
.jeux-fleche {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 2.6rem;
  border: 1px solid rgba(43, 50, 82, 0.15);
  border-radius: 8px;
  background: #ffffff;
  color: #2b3252;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.jeux-fleche:hover {
  background: #eef1f9;
}
.jeux-fleche:disabled {
  opacity: 0.3;
  cursor: default;
}

.jeux-reperes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: #626d92;
}
.jeux-aller {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Sur un telephone : une carte a la fois, et LES FLECHES RESTENT.
 *
 * Elles avaient disparu ici, au motif que le doigt balaye. C'etait oublier que
 * rien ne DIT qu'il faut balayer : une carte seule au milieu de l'ecran ressemble
 * a une carte seule, pas au premier element d'une bande. Les fleches sont ce qui
 * l'annonce, et elles servent aussi a qui prefere viser que glisser.
 *
 * Elles sont plus etroites qu'ailleurs — la largeur qu'elles prennent est prise a
 * la carte — et la moitie de la suivante depasse, ce qui double le signal. */
@media (max-width: 700px) {
  /* La bande va chercher les bords de l'encart, dont les 24 pixels de marge sont
     autant de largeur perdue pour les cartes. C'est ce qui paye les fleches :
     sans cela, la colonne de texte tombait a 116 pixels et « 1 joueur cherche un
     adversaire » s'y ecrivait sur quatre lignes. */
  .jeux-bande {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
  .jeu-carte {
    /* 92 % : le bord de la suivante depasse encore, mais les fleches portent
       maintenant l'essentiel du message. */
    flex: 0 0 92%;
  }
  .jeux-fleche {
    width: 1.5rem;
    height: 2.4rem;
    font-size: 1rem;
  }
  .jeux-piste {
    --ecart: 0.4rem;
  }
  /* Les deux boutons restent EMPILES ici : mesure faite, ils ne tiennent pas cote
     a cote dans 120 pixels de texte. Empiles, ils font deux cibles pleine largeur,
     plus faciles a viser du pouce — la ligne de hauteur est bien depensee. */
}

/* Direction A, seconde passe : les vraies cartes de jeux deviennent des
   epreuves du championnat. Aucune classe ne porte de comportement JS. */
.jeux-bande { gap: .5rem; }
.jeux-piste { --ecart: .75rem; padding: .25rem .15rem .55rem; }
.jeu-carte {
  min-height: 12.8rem;
  flex-direction: column;
  border: 1px solid rgba(201, 154, 82, .72);
  border-radius: 2px;
  background: linear-gradient(155deg, #18313d, #07131c 60%, #0e202b);
  box-shadow: inset 0 0 0 3px rgba(201,154,82,.08), 0 8px 15px rgba(0,0,0,.28);
}
.jeu-carte::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(201,154,82,.2); pointer-events: none; }
.jeu-carte:hover { transform: translateY(-4px); border-color: #f0d39b; box-shadow: inset 0 0 0 3px rgba(201,154,82,.14), 0 12px 22px rgba(0,0,0,.38); }
.jeu-image { position: relative; flex: 0 0 7.2rem; background: #091720; border-bottom: 1px solid rgba(201,154,82,.5); }
.jeu-image::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,12,17,.8),transparent 55%); pointer-events:none; }
.jeu-corps { position:relative; z-index:1; padding:.55rem .7rem .7rem; color:#ead8b5; }
.jeu-corps h3 { color:#f4e6c9; font-size:.92rem; letter-spacing:.045em; }
.jeu-hors { color:#dfa36d; }.jeu-boutons { gap:.4rem; }
.jeu-boutons .btn,.jeu-boutons .btn-ghost { min-width:0; padding:.4rem .35rem; font-size:.7rem; }
.jeu-boutons .btn-ghost { color:#eed097; border-color:rgba(201,154,82,.65); background:transparent; }
.jeu-boutons .btn-ghost:hover { color:#201506; background:#c99a52; }

@media (max-width: 700px) {
  .jeu-carte { min-height: 15rem; }
  .jeu-image { flex-basis: 8rem; }
}