/* Page d'accueil publique — la seule page du portail visible sans compte.
 *
 * Ajoutée à l'audit du 03/09/2026. Elle remplace un écran qui ne contenait
 * qu'un titre, une phrase et un bouton Google : un visiteur ne pouvait pas
 * savoir ce qu'on lui proposait, ni pourquoi créer un compte.
 *
 * Deux règles de conduite pour tout ce qui s'écrit ici :
 *   - aucun chiffre qui ne soit pas mesuré (pas de latence annoncée, pas de
 *     nombre de joueurs, pas de disponibilité) ;
 *   - l'état réel du projet est une SECTION de la page, pas une note en bas.
 *     C'est le positionnement retenu par Julien : bêta privée assumée.
 *
 * Complète /commun/base.css. Rien de ce qui sert ailleurs ne se définit ici.
 */

.vitrine {
  /* Largeur de lecture unique pour toutes les bandes : sans elle, chaque
     section retrouve sa propre marge et la page part en accordéon. */
  --largeur: 68rem;
}

.bandeau--vitrine {
  background: rgba(14, 17, 22, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
}

.nav-vitrine {
  display: flex;
  gap: var(--espace-4);
}

.action-bandeau {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* Sous 640 px, les liens d'ancre du bandeau passeraient à la ligne et
   pousseraient le bouton de connexion hors de vue. Le bouton est ce qui
   compte : les ancres se retrouvent en défilant. */
@media (max-width: 640px) {
  .nav-vitrine { display: none; }
}

.bouton--compact {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.bouton--grand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  /* espace-4 et non espace-5 : à 1280 px les deux boutons du héros
     dépassaient leur colonne de quelques pixels et passaient à la ligne. */
  padding: 0 var(--espace-4);
  font-size: 1rem;
  text-decoration: none;
}

.bandeau-erreur {
  max-width: var(--largeur);
  margin: var(--espace-4) auto 0;
}

/* ── Héros ───────────────────────────────────────────────────────────────── */

.heros {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--espace-6);
  align-items: center;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: var(--espace-6) var(--espace-4);
}

/* minmax(0, …) sur les deux colonnes : sans le 0, l'illustration impose sa
   largeur intrinsèque et ramène le défilement horizontal que la convention
   « PC et téléphone » interdit. */
@media (max-width: 900px) {
  .heros {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--espace-5);
  }
}

.heros h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin: var(--espace-3) 0 var(--espace-4);
}

.pastille {
  display: inline-block;
  margin: 0;
  padding: var(--espace-1) var(--espace-3);
  background: var(--fond-info);
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.accroche {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--texte-att);
  max-width: 34rem;
}

.actions-heros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3);
  margin: var(--espace-5) 0 var(--espace-3);
}

/* Même rangée que le héros, mais réutilisée dans .bande--appel, qui centre
   son texte — sans ceci les boutons restaient collés à gauche malgré le
   titre et le texte centrés au-dessus (#204). */
.actions-heros--centre {
  justify-content: center;
}

/* ── Illustration de l'écran de pilotage ─────────────────────────────────── */

/* Dessinée en CSS plutôt qu'en image : aucune photo du véhicule n'existe dans
   le dépôt, et une image d'archive prise ailleurs mentirait sur le produit.
   Celle-ci ne montre que la STRUCTURE de l'écran réel — cadre vidéo, pastille
   d'armement, pavé de touches — sans afficher la moindre valeur mesurée. */
.heros-illustration {
  display: flex;
  justify-content: center;
}

.ecran {
  width: 100%;
  max-width: 26rem;
  background: var(--fond-panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: var(--espace-3);
  box-shadow: var(--ombre-3);
}

.ecran-barre {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  margin-bottom: var(--espace-3);
  font-size: 0.75rem;
  color: var(--texte-att);
}

.ecran-pastille {
  padding: 2px var(--espace-2);
  background: var(--fond-ok);
  color: var(--ok);
  border-radius: var(--rayon-sm);
  font-weight: 600;
}

.ecran-video {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #05070a;
  border: 2px solid var(--ok);
  border-radius: var(--rayon-md);
  overflow: hidden;
}

/* Un sol et un ciel, rien de plus : l'idée d'une vue embarquée sans prétendre
   montrer un paysage qui n'a pas été filmé. */
.ecran-horizon {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #0d1722 0%, #101b26 55%, #17212b 55%, #0b1016 100%);
}

.ecran-mention {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--texte-att);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ecran-commandes {
  display: flex;
  justify-content: center;
  gap: var(--espace-2);
  margin-top: var(--espace-3);
}

.touche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  background: var(--fond-eleve);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  color: var(--texte-att);
}
.touche--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #06101f;
}

/* ── Bandes de contenu ───────────────────────────────────────────────────── */

.bande {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: var(--espace-6) var(--espace-4);
  border-top: 1px solid var(--bordure);
}

.bande h2 {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  margin: 0 0 var(--espace-5);
}

/* Bande pleine largeur : le FOND court d'un bord à l'autre, le CONTENU reste
   dans la largeur de lecture. D'où le conteneur interne plutôt qu'un
   `.bande--sombre > *` : `.bande h2` (une classe + un type) l'emportait en
   spécificité et remettait sa propre marge, ce qui collait le titre au bord
   gauche de l'écran. */
.bande--sombre {
  max-width: none;
  background: var(--fond-panneau);
  padding-left: 0;
  padding-right: 0;
}
.bande-contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--espace-4);
}

.bande--appel {
  text-align: center;
}
.bande--appel .texte-large {
  margin-left: auto;
  margin-right: auto;
}

.texte-large {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--texte-att);
  max-width: 44rem;
  margin: 0 0 var(--espace-5);
}

/* ── Cartes ──────────────────────────────────────────────────────────────── */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--espace-4);
}

.carte {
  background: var(--fond-panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: var(--espace-5);
}
.carte h3 {
  margin: 0 0 var(--espace-3);
  font-size: 1.05rem;
}
.carte p {
  margin: 0;
  color: var(--texte-att);
  line-height: 1.6;
}
.carte ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--texte-att);
  line-height: 1.7;
}

/* Deux colonnes qui se répondent : ce qui marche, ce qui manque. La couleur
   porte le sens (vert / ambre) et le titre le répète — jamais la couleur
   seule, elle ne dit rien à qui ne la distingue pas. */
/* Un lien dans une carte : même raison que `.note a` (base.css). */
.carte a { color: var(--accent); }
.carte a:hover { color: var(--accent-vif); }
.carte--fait { border-left: 3px solid var(--ok); }
.carte--reste { border-left: 3px solid var(--alerte); }

/* ── Étapes ──────────────────────────────────────────────────────────────── */

.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--espace-5);
  margin: 0;
  padding: 0;
  counter-reset: etape;
  list-style: none;
}

.etapes li {
  counter-increment: etape;
  padding-top: var(--espace-5);
  border-top: 2px solid var(--bordure);
  position: relative;
}
.etapes li::before {
  content: counter(etape);
  position: absolute;
  top: calc(-1 * var(--espace-4));
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  background: var(--fond);
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
}
.etapes h3 { margin: 0 0 var(--espace-2); font-size: 1.05rem; }
.etapes p { margin: 0; color: var(--texte-att); line-height: 1.6; }

/* `.pied` est monté dans `commun/base.css` avec les pages légales (#169) :
   l'espace joueur porte désormais le même pied, il n'appartenait plus à la
   seule vitrine. */

.lien-nav--inline {
  min-height: 0;
  display: inline;
}