/* La vitrine d'Heptanor. Engendré par tools/site_html.gd, ne pas éditer à la main.
   Les couleurs sont celles du jeu, lues dans ui/palette.gd et ui/tokens.gd. */
:root {
  --fond: #14131c; --fond2: #0d0d13; --fond3: #1c1b22;
  --trait: #2b2a33; --texte: #f0f2f7; --doux: #b8bcc8; --leg: #8a8d99;
  --or: #eab145;
  --lien-fort: #5cdb7a; --disc-forte: #f53d4d;
  --eau: #2e9be0;
  --feu: #f0561e;
  --nature: #3fbf4a;
  --terre: #a8763c;
  --ombre: #5b2e8c;
  --foudre: #f2d024;
  --air: #bfe0ff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--texte);
       font: 16px/1.65 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       -webkit-font-smoothing: antialiased; }
.dedans { max-width: 1060px; margin: 0 auto; padding: 0 20px; }
.bande { padding: 70px 0; }
.alt { background: var(--fond2); }
h1 { font-size: clamp(40px, 8vw, 72px); margin: 0 0 16px; letter-spacing: 3px;
     font-weight: 800; text-transform: uppercase; }
h2 { font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 12px; color: var(--or); }
h2.apres { margin-top: 52px; }
h3 { font-size: 19px; margin: 0 0 6px; }
p { color: var(--doux); max-width: 66ch; }
strong { color: var(--texte); }
.leg { color: var(--leg); font-size: 14px; }

.hero { text-align: center; padding: 84px 0 70px; border-bottom: 1px solid var(--trait);
        background: radial-gradient(1100px 620px at 50% -10%, #2321309e 0%, transparent 70%),
                    linear-gradient(180deg, var(--fond2), var(--fond)); }
.hero p { margin-left: auto; margin-right: auto; }
.chapo { font-size: clamp(17px, 2.2vw, 21px); color: var(--texte); max-width: 56ch; }
.logo { display: block; width: min(100%, 620px); height: auto; margin: 0 auto 8px; }

/* ── LE MELANGE DES GLYPHES : `screen`, ET SEULEMENT LA OU LE DEFAUT EXISTE ────────────────────────
   Les images tirees de `art/` sont OPAQUES a pourtour NOIR PUR, parce que le jeu les dessine en additif ou
   un noir n'ajoute rien. Posees telles quelles sur une page dont le fond vaut #14131c, chacune dessine donc
   un rectangle plus SOMBRE que le fond — mesure au canvas : bord a 0/0/0 pour le logo et les deux emblemes,
   contre 20/19/28 pour le fond du corps.
   `screen` rend exactement ce que le jeu affiche : le noir devient neutre, la lueur s'ajoute. C'est le meme
   remede que le gabarit du build web applique a `#status-splash`, et il est deja documente dans
   `tools/fond_chargement.gd` — « cela se corrige par mix-blend-mode: screen, pas par une couleur ».

   ⚠⚠ LES ORBES N'EN ONT PAS BESOIN, ET LEUR EN DONNER ETAIT UNE ERREUR — attrapee par la mesure et non par
   la lecture. `.orbe` et `.galerie img` portent DEJA `border-radius: 50%` et `background: #000` : leurs coins
   sont coupes en cercle, donc il n'y a aucun carre a fondre. Deux captures du meme cadre, un seul reglage
   change, l'ont dit sans ambiguite : ecart au fond de 7/255 AVANT comme APRES. Le blend y aurait ete inerte
   dans le meilleur cas, et actif au mauvais moment dans le pire — `.elem.pale .orbe` descend a
   `opacity: .26` et le survol applique un `transform`, deux choses qui creent un contexte d'empilement.
   La regle ne couvre donc que `.logo` et `.mode img`, les deux seules surfaces sans rayon ni fond.

   ⚠ LES CAPTURES EN SONT EXCLUES, et ce n'est pas un oubli : leur noir est STRUCTUREL — c'est le fond du jeu
   photographie, pas un pourtour a neutraliser. Les passer en `screen` les rendrait translucides et melangerait
   le plateau au fond de la carte qui les porte.
   ⚠ Les sept insignes de rang en sont exclus aussi : leur bord vaut 12-14/13-14/20-23, donc a moins de huit
   niveaux du fond, et leur medaillon porte un fond PEINT que `screen` rendrait translucide. */
.glyphe, .logo { mix-blend-mode: screen; }
.lu-seulement { position: absolute; width: 1px; height: 1px; overflow: hidden;
                clip-path: inset(50%); white-space: nowrap; }

.boutons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 30px 0 4px; }
.bouton { display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px;
          border-radius: 10px; text-decoration: none; font-weight: 700;
          border: 1px solid var(--trait); background: var(--fond3); color: var(--texte);
          transition: transform .12s ease, border-color .12s ease; }
.bouton:hover { transform: translateY(-2px); border-color: var(--or); }
.bouton.jouer { background: linear-gradient(180deg, #f6c95f, var(--or)); color: #191307;
                border-color: #f7d47a; font-size: 17px; padding: 17px 36px;
                box-shadow: 0 8px 30px -12px var(--or); }
/* Un bouton inerte doit se voir inerte : sans traitement visuel, on clique, rien ne se passe, et on
   conclut que le site est cassé. */
.bouton.bientot { opacity: .5; cursor: not-allowed; }
.bouton.bientot em { color: var(--or); font-size: 11px; letter-spacing: 1px;
                     text-transform: uppercase; font-style: normal; }

.grille { display: grid; gap: 18px; margin-top: 24px;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.carte { background: var(--fond3); border: 1px solid var(--trait); border-radius: 12px;
         padding: 22px; }
.carte p { margin: 6px 0 0; font-size: 15px; }
.mode img { width: 54px; height: 54px; display: block; margin-bottom: 10px; }
.points { margin: 12px 0 0; padding-left: 18px; }
.points li { color: var(--doux); font-size: 14.5px; margin-bottom: 3px; }

/* ── LES CAPTURES ───────────────────────────────────────────────────────────────────────────────
   Une par ligne sur mobile, deux puis trois quand la place vient. Le cadre doré rappelle les
   filets du jeu. */
.captures { display: grid; gap: 20px; margin: 24px 0 0; padding: 0; list-style: none;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.captures .loupe { display: block; width: 100%; padding: 0; border: 0; background: none;
                   cursor: zoom-in; border-radius: 10px; }
.captures img { width: 100%; height: auto; border-radius: 10px;
                border: 1px solid var(--trait); display: block;
                transition: transform .14s ease, border-color .14s ease; }
.captures .loupe:hover img, .captures .loupe:focus-visible img {
  transform: translateY(-3px); border-color: var(--or); }
.captures .leg { display: block; margin-top: 8px; }

/* ── LA LIGHTBOX ───────────────────────────────────────────────────────────────────────────────
   Plein écran, fond très sombre, image contenue. `hidden` la retire du flux tant qu'elle n'a pas
   servi ; le JS pose la source au clic, donc la grande image ne coûte rien à ceux qui n'ouvrent
   pas. */
.loupe-fond { position: fixed; inset: 0; z-index: 50; display: flex;
              align-items: center; justify-content: center; padding: 24px;
              background: #05050adb; cursor: zoom-out; }
.loupe-fond[hidden] { display: none; }
.loupe-fond img { max-width: 100%; max-height: 100%; border-radius: 10px;
                  border: 1px solid var(--trait); }
.loupe-fermer { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px;
                font-size: 30px; line-height: 1; cursor: pointer; border-radius: 10px;
                color: var(--texte); background: var(--fond3); border: 1px solid var(--trait); }
.loupe-fermer:hover { border-color: var(--or); }

.elements { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
            margin: 26px 0 0; padding: 0; list-style: none; }
.elem { width: 112px; text-align: center; cursor: pointer; padding: 10px 4px;
        border-radius: 12px; border: 1px solid transparent; transition: border-color .12s ease; }
.elem:hover, .elem.actif { border-color: var(--trait); background: var(--fond3); }
/* L'orbe a un fond NOIR, pas transparent : sans le rayon, ses quatre coins sombres dépasseraient. */
.orbe { display: block; width: 78px; height: 78px; border-radius: 50%; margin: 0 auto 8px;
        box-shadow: 0 0 26px -6px var(--teinte); background: #000;
        transition: transform .12s ease, opacity .12s ease; }
.elem:hover .orbe { transform: scale(1.06); }
.nom { display: block; font-size: 15px; color: var(--texte); }
.verdict { display: block; min-height: 18px; font-size: 12px; margin-top: 4px; font-weight: 700; }
.elem.bat .verdict { color: var(--lien-fort); }
.elem.subit .verdict { color: var(--disc-forte); }
.elem.pale .orbe { opacity: .26; }

/* Six vignettes : deux ou trois par ligne, donc jamais une seule orpheline en bas. */
.galerie { display: grid; gap: 18px; margin: 24px 0 8px; padding: 0; list-style: none;
           grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(6, 1fr); } }
.galerie li { text-align: center; }
.galerie img { width: 100%; max-width: 122px; height: auto; aspect-ratio: 1;
               border-radius: 50%; background: #000; display: block; margin: 0 auto 8px;
               box-shadow: 0 0 24px -8px #6d7ba0; transition: transform .14s ease; }
.galerie li:hover img { transform: scale(1.05); }
.galerie .leg { display: block; text-transform: capitalize; }

.rangs { display: grid; gap: 14px; margin: 26px 0 12px; padding: 0; list-style: none;
         grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.rangs li { text-align: center; }
.rangs img { width: 100%; max-width: 84px; height: auto; display: block; margin: 0 auto 6px; }
.rangs .nom { font-size: 14px; color: var(--doux); }

.chiffres { display: grid; gap: 16px; margin: 26px 0 0; padding: 0; list-style: none;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.chiffres li { text-align: center; padding: 18px 10px; border: 1px solid var(--trait);
               border-radius: 12px; background: var(--fond3); }
.chiffres b { display: block; font-size: 34px; color: var(--or); line-height: 1.15; }
.chiffres span { font-size: 13px; color: var(--leg); }

.faq { margin: 20px 0 0; }
.faq dt { font-weight: 700; margin-top: 18px; }
.faq dd { margin: 4px 0 0; color: var(--doux); }

.final { text-align: center; }
.pied { padding: 30px 0 50px; border-top: 1px solid var(--trait); text-align: center; }
.pied p { margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}