/*
 * Tron 2.0 — identité visuelle de l'accueil.
 *
 * Ne contient QUE ce que le CSS partagé (css/accueil.css, servi par
 * proxies/css-accueil.php) ne fournit pas : le fond du hero (grille lumineuse
 * et traînées), la grille des bonus et le bloc FAQ. Tout le reste
 * (.hero-flex, .hero-visual, .modes, .mode-card, .rules, .blog-section...) vient
 * du partagé - ne rien redéfinir ici, surtout pas .hero-flex.
 *
 * Perf : pas de backdrop-filter permanent, pas de box-shadow animé en boucle,
 * pas de position: fixed décoratif. Animations en transform/opacity seulement.
 */

/* ================= HERO ================= */

/* Hero : patron partagé .hero-jeu (fichiers-partages-des-jeux/css/accueil.css),
   sans motif de coin comme à l'origine. Ici seulement ce qui est propre au jeu :
   le hero encadré (marge et arrondi d'origine) et sa nuit d'ardoise sous une
   lueur cyan, l'arène vue d'en haut. Tout tient en calques du fond, sans
   élément ni pseudo-élément (le ::after est réservé au motif du patron), du
   dessus vers le dessous :
   - l'ourlet cyan du bas, comme la ligne de départ d'une piste ;
   - trois traînées de lumière (cyan, ambre, rose), immobiles, là où les
     anciennes filaient en boucle d'un bord à l'autre ;
   - le quadrillage à l'intensité de l'ancien .hero-grille, sans son masque
     radial qui demandait un élément à part ;
   - la lueur cyan du haut, puis l'ardoise. */
.hero-jeu {
  --hero-marge: 0 0 30px;
  --hero-marge-mobile: 0 0 30px;
  --hero-radius: 18px;
  background:
    linear-gradient(90deg, rgba(34, 211, 238, 0) 0%, rgba(34, 211, 238, 0.8) 50%, rgba(34, 211, 238, 0) 100%) bottom / 100% 3px no-repeat,
    linear-gradient(90deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, 0.85)) right 5% top 7% / 130px 3px no-repeat,
    linear-gradient(90deg, rgba(251, 191, 36, 0), rgba(251, 191, 36, 0.85)) left 3% top 90% / 130px 3px no-repeat,
    linear-gradient(90deg, rgba(244, 114, 182, 0), rgba(244, 114, 182, 0.85)) right 5% top 86% / 130px 3px no-repeat,
    linear-gradient(to right, rgba(34, 211, 238, 0.065) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(to bottom, rgba(34, 211, 238, 0.065) 1px, transparent 1px) 0 0 / 34px 34px,
    radial-gradient(120% 90% at 50% 0%, rgba(34, 211, 238, 0.22) 0%, rgba(34, 211, 238, 0) 60%),
    linear-gradient(165deg, #0e3a4d 0%, #072634 48%, #030f16 100%);
  border: 1px solid rgba(34, 211, 238, 0.4);
}

@media (max-width: 640px) {
  /* Trois traînées sur un hero étroit, ça sature : on n'en garde qu'une, sous
     le texte, et le quadrillage se resserre. */
  .hero-jeu {
    background:
      linear-gradient(90deg, rgba(34, 211, 238, 0) 0%, rgba(34, 211, 238, 0.8) 50%, rgba(34, 211, 238, 0) 100%) bottom / 100% 3px no-repeat,
      linear-gradient(90deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, 0.85)) left 4% top 95% / 130px 3px no-repeat,
      linear-gradient(to right, rgba(34, 211, 238, 0.065) 1px, transparent 1px) 0 0 / 24px 24px,
      linear-gradient(to bottom, rgba(34, 211, 238, 0.065) 1px, transparent 1px) 0 0 / 24px 24px,
      radial-gradient(120% 90% at 50% 0%, rgba(34, 211, 238, 0.22) 0%, rgba(34, 211, 238, 0) 60%),
      linear-gradient(165deg, #0e3a4d 0%, #072634 48%, #030f16 100%);
  }
}

/* ================= CARTES DE MODES ================= */

/*
 * Les cartes de mode sont des <a> : sans ça, le navigateur les souligne en
 * bleu. (Le partagé style .mode-card mais suppose un conteneur non-lien.)
 */
a.mode-card { text-decoration: none; color: inherit; display: block; }
a.mode-card:hover { text-decoration: none; }

.modes-header {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-accent);
  margin: 26px 0 14px;
}

/* ================= LES QUATRE BONUS ================= */

/*
 * Ce que fait chaque bonus est la première question de quelqu'un qui découvre
 * le jeu : elle mérite mieux qu'une ligne de texte.
 */
.bonus-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin: 18px 0 8px;
}

.bonus-carte {
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border-left-width: 3px;
}
.bonus-energie  { border-left-color: #67e8f9; }
.bonus-nettoyage { border-left-color: #bef264; }
.bonus-points   { border-left-color: #fcd34d; }
.bonus-bouclier { border-left-color: #c4b5fd; }

.bonus-glyphe {
  display: inline-block;
  font-size: 1.1rem;
  line-height: 1;
  margin-right: 6px;
  vertical-align: -1px;
}
.bonus-nom {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: 4px;
}
.bonus-detail { display: block; font-size: 0.8rem; color: #94a3b8; line-height: 1.55; }

/* ================= FAQ ================= */

.faq-section { margin: 34px 0 10px; }

.faq-item {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: none;
  border: 0;
  color: #f1f5f9;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  /* Cible tactile confortable. */
  min-height: 54px;
}

.faq-question:hover { background: color-mix(in srgb, var(--color-mid) 12%, transparent); }
.faq-question:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* Chevron piloté par aria-expanded : l'état est dans l'ARIA, pas dans une
   classe à part - le script partagé ne gère que l'attribut. */
.faq-question::after {
  content: '';
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-light);
  border-bottom: 2px solid var(--color-light);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.faq-question[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }

.faq-answer { padding: 0 18px 16px; color: #94a3b8; line-height: 1.7; }
.faq-answer[hidden] { display: none; }
.faq-answer p { margin: 0 0 10px; }
.faq-answer p:last-child { margin-bottom: 0; }