/*
 * La feuille commune aux pages de rubrique d'AlloGames.
 *
 * Elle est externe, contrairement au style de la page d'accueil qui est en
 * ligne : celle-ci est seule et se charge en une requête, les rubriques sont
 * dix et partageraient dix copies du même bloc. Une feuille de mille octets
 * mise en cache une fois vaut mieux que dix kilo-octets recopiés.
 *
 * Les couleurs et la police sont celles de l'application. Quelqu'un qui arrive
 * ici depuis une recherche doit reconnaître ce qu'il verra en ouvrant l'app.
 */

:root {
  --encre: #08070c;
  --surface: #131218;
  --filet: #232028;
  --texte: #f4f2f7;
  --gris: #a5a1b0;
  --pale: #6f6b7a;
  --vert: #3ddc97;
  --vert-sombre: #067a52;
}

* { box-sizing: border-box; }

/* `clip` et non `hidden`, et sur `html` autant que sur `body`. La teinte du
   héros déborde de `-50vw` de chaque côté pour occuper toute la largeur ;
   `hidden` posé sur le seul `body` se propage à la fenêtre, qui devient la
   boîte de défilement — le débordement est masqué mais la page glisse
   toujours. `clip` ne crée aucune boîte de défilement : il coupe, point. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--encre);
  color: var(--texte);
  font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}
a { color: var(--vert); }
img { max-width: 100%; }

.wrap { max-width: 900px; margin: 0 auto; padding: 40px 20px 80px; }

header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marque {
  display: inline-flex; align-items: center;
  text-decoration: none;
  font-weight: 900; letter-spacing: 0; font-size: 20px; line-height: 1.24;
  /* La marque ne prend pas le blanc plein : il est réservé aux titres, qui
     doivent primer sur elle. Comme dans l'application. */
  color: rgba(255, 255, 255, 0.55);
}
.disque {
  display: block;
  /* Le disque déborde la hauteur des capitales : un cercle inscrit dans leur
     hauteur paraît plus petit qu'elles, l'œil comparant les aires. */
  width: 0.983em; height: 0.983em; margin-top: 0.067em;
}

/* Le sélecteur de langue : deux liens, pas un menu. À deux entrées, un menu
   demande un clic de plus pour montrer ce qu'un texte dit déjà. */
.langues { display: flex; gap: 2px; font-size: 13px; font-weight: 700; }
.langues a {
  text-decoration: none; color: var(--pale);
  padding: 5px 10px; border-radius: 8px;
}
.langues a[aria-current="true"] { color: var(--texte); background: var(--surface); }
.langues a:hover { color: var(--texte); }

/* Le fil d'Ariane. Il sert deux fois : au lecteur qui arrive par une recherche
   et ne sait pas où il est tombé, et au moteur, qui lit la hiérarchie du site
   dans ce ruban autant que dans les liens. */
.fil { margin: 28px 0 0; font-size: 13px; color: var(--pale); }
.fil a { color: var(--gris); text-decoration: none; }
.fil a:hover { text-decoration: underline; }

.heros { position: relative; padding: 44px 0 8px; }
.heros::before {
  content: "";
  position: absolute; inset: -40px -50vw 40% -50vw;
  background: linear-gradient(180deg, var(--vert-sombre) 0%, var(--encre) 100%);
  opacity: 0.5;
  z-index: -1;
}
.surtitre {
  display: inline-block;
  font-size: 12px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--vert);
  margin: 0 0 10px;
}
h1 {
  font-size: clamp(32px, 5.4vw, 52px);
  line-height: 1.06; letter-spacing: -1.4px;
  margin: 0 0 16px; max-width: 17ch;
}
.chapo { font-size: 19px; color: var(--gris); max-width: 48ch; margin: 0 0 30px; }

.badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.badge { display: inline-block; line-height: 0; }
/* Même hauteur pour les deux, malgré des marges internes différentes : Apple
   en réserve dans son SVG, Google presque pas. */
.badge img { height: 48px; width: auto; display: block; }

/* ── Le corps : des paragraphes et une capture ─────────────────────────────
   Une rubrique n'a pas à répéter la mise en page de l'accueil. Une colonne de
   texte, une image posée au milieu, et des sous-titres qui disent ce que la
   section explique — c'est ce qui se lit et ce qui s'indexe. */
.corps { margin-top: 56px; display: grid; gap: 44px; }
.corps h2 {
  font-size: clamp(23px, 3vw, 30px); line-height: 1.18;
  letter-spacing: -0.6px; margin: 0 0 10px; max-width: 22ch;
}
.corps h3 { font-size: 18px; margin: 0 0 6px; letter-spacing: -0.2px; }
.corps p { margin: 0 0 14px; color: var(--gris); font-size: 17px; max-width: 62ch; }
.corps p:last-child { margin-bottom: 0; }
.corps strong { color: var(--texte); font-weight: 700; }

/* ── La galerie ────────────────────────────────────────────────────────────
   Une rubrique qui décrit cinq écrans et n'en montre qu'un demande au lecteur
   de croire sur parole. Sur un téléphone les figures défilent horizontalement,
   parce qu'empilées elles feraient une page de six mille pixels ; dès qu'il y a
   la place, elles se rangent en grille. */
.galerie {
  display: grid; gap: 24px;
  grid-auto-flow: column; grid-auto-columns: 220px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* Le débordement latéral est celui de la galerie, pas de la page : elle sort
     de la colonne pour que la dernière figure ne semble pas coupée par une
     marge, et récupère la même marge en rembourrage. */
  margin: 8px calc(50% - 50vw) 0; padding: 0 max(20px, calc(50vw - 450px)) 8px;
  scrollbar-width: thin;
}
@media (min-width: 720px) {
  .galerie {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    overflow-x: visible;
    margin: 8px 0 0; padding: 0;
  }
}
.galerie figure { margin: 0; scroll-snap-align: center; }
.galerie figcaption {
  margin-top: 12px; text-align: center;
  color: var(--pale); font-size: 13px; line-height: 1.4;
}

.figure { margin: 8px 0 0; display: flex; justify-content: center; }
/* Le cadre reprend l'arrondi d'un téléphone et pose la capture sur une
   surface : sans lui, une image au fond sombre se fond dans la page et on ne
   sait plus où elle commence. */
.cadre {
  width: 100%; max-width: 290px;
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--filet);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.cadre img { display: block; width: 100%; height: auto; }
.legende {
  margin: 14px auto 0; text-align: center;
  color: var(--pale); font-size: 14px; max-width: 44ch;
}

/* Les points : ce qu'une rubrique promet, en trois ou quatre lignes qu'on lit
   sans les lire. C'est aussi ce qu'un moteur cite en extrait. */
.points { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.points li {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: 14px; padding: 16px 18px;
  color: var(--gris); font-size: 16px;
}
.points strong { display: block; color: var(--texte); font-weight: 700; margin-bottom: 2px; }

/* Les questions fréquentes, doublées en JSON-LD dans l'en-tête : les moteurs
   les affichent dépliées sous le résultat, et les modèles de langue les citent
   telles quelles. Le texte visible et le balisage disent exactement la même
   chose — les faire diverger est ce qui fait retirer un site des résultats
   enrichis. */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: 14px; padding: 14px 18px;
}
.faq summary {
  cursor: pointer; font-weight: 700; color: var(--texte);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: " +"; color: var(--vert); }
.faq details[open] summary::after { content: " −"; }
.faq p { margin: 10px 0 0; color: var(--gris); font-size: 16px; }

/* Les rubriques voisines. Un lecteur arrivé sur « les salons » par une
   recherche ne sait pas que le tournoi existe ; ces liens sont la seule chose
   qui le lui apprend, et ils tissent le maillage interne que le moteur suit. */
.voisines { margin-top: 64px; }
.voisines h2 { font-size: 20px; margin: 0 0 16px; letter-spacing: -0.3px; }
.liens { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.liens a {
  display: block; text-decoration: none;
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: 14px; padding: 16px 18px;
  color: var(--texte); font-weight: 700; font-size: 16px;
}
.liens a span { display: block; color: var(--gris); font-weight: 400; font-size: 14px; margin-top: 3px; }
.liens a:hover { border-color: var(--vert); }

.appel {
  margin-top: 64px; padding: 40px 28px;
  border: 1px solid var(--filet); border-radius: 24px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(61, 220, 151, 0.14), transparent 60%),
    var(--surface);
  text-align: center;
}
.appel h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 auto 20px; max-width: 22ch; letter-spacing: -0.4px; }
.appel .badges { justify-content: center; }

footer {
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--filet);
  color: var(--pale); font-size: 14px;
}
footer a { color: var(--gris); }