/*
 * Pages du site de Windfire (/jeu/, /guide/), lisibles sans le script du jeu : générées par tools/pages-site.mjs
 * (client/src/site/pages.ts). Même identité que le jeu (client/src/style.css) : ciel bleu, contours bleu nuit, jaune
 * pour l'action principale, titres en Lilita One, texte en Nunito. Tout est centré sur une colonne de 1080 px, avec
 * une seule marge (--marge) partout.
 */
@font-face {
  font-family: 'Lilita One';
  src: url('./polices/lilita-one-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('./polices/nunito-latin.woff2') format('woff2');
  font-weight: 600 900;
  font-display: swap;
}

:root {
  --jaune: #ffd23f;
  --jaune-clair: #ffe46b;
  --jaune-fonce: #ffbc14;
  --jaune-trait: #7a4600;
  --orange: #ff9a1a;
  --ciel: #2f7de1;
  --ciel-fonce: #2b64bd;
  --marine: #0d1d3a;
  --panneau: rgba(26, 56, 104, 0.94);
  --panneau-2: #29548f;
  --texte: #ffffff;
  --texte-doux: #c3d6f5;
  --f-titre: 'Lilita One', 'Arial Rounded MT Bold', sans-serif;
  --f-texte: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --contour: 0 2px 0 var(--marine), 1px 0 0 var(--marine), -1px 0 0 var(--marine), 0 -1px 0 var(--marine);
  --marge: 24px;
  --ecart: 16px;
  --largeur: 1080px;
  --rayon: 16px;
  color-scheme: dark;
}

@media (max-width: 640px) {
  :root {
    --marge: 16px;
    --ecart: 12px;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--ciel-fonce) 0, var(--ciel) 520px, #4b90ea 900px, var(--ciel-fonce) 100%) fixed;
  background-color: var(--ciel);
  color: var(--texte);
  font-family: var(--f-texte);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.55;
  text-align: center;
}

a {
  color: var(--jaune);
}

img {
  display: block;
  max-width: 100%;
}

.nowrap {
  white-space: nowrap;
}

/* Colonne unique : même marge à gauche et à droite, contenu centré. */
.colonne {
  width: min(100%, calc(var(--largeur) + 2 * var(--marge)));
  margin: 0 auto;
  padding: 0 var(--marge);
}

/* Barre du haut : trois parts égales, comme la barre d'onglets du jeu ; « Jouer » en jaune. */
.barre {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 12px 0;
  background: rgba(13, 29, 58, 0.55);
  backdrop-filter: blur(6px);
}

.onglets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 3px solid var(--marine);
  border-radius: 14px;
  background: var(--panneau);
}

.onglets a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 8px;
  border-left: 2px solid var(--marine);
  color: var(--texte);
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-shadow: var(--contour);
  white-space: nowrap;
}

.onglets a:first-child {
  border-left: 0;
}

.onglets a[aria-current='page'] {
  background: var(--panneau-2);
}

.onglets a.jouer {
  background: linear-gradient(var(--jaune-clair), var(--jaune-fonce));
  color: var(--marine);
  text-shadow: none;
}

/* Haut de page : logo, titre, phrase, bouton, trois pastilles. */
.entete {
  display: grid;
  justify-items: center;
  gap: var(--ecart);
  padding: 32px 0 var(--marge);
}

.logo {
  width: min(560px, 100%);
  height: auto;
  overflow: visible;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.15;
  text-shadow: var(--contour);
}

h1 {
  font-size: clamp(30px, 5vw, 46px);
}

h2 {
  font-size: clamp(26px, 4vw, 36px);
}

h3 {
  font-size: 23px;
}

.chapeau {
  max-width: 720px;
  margin: 0;
  color: var(--texte);
  font-size: 19px;
  text-shadow: 0 1px 0 rgba(13, 29, 58, 0.6);
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  min-height: 64px;
  padding: 0 36px;
  border: 3px solid var(--marine);
  border-radius: 16px;
  background: linear-gradient(var(--jaune-clair), var(--jaune-fonce));
  box-shadow: 0 5px 0 var(--marine);
  color: var(--marine);
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.08s;
}

.bouton:hover {
  transform: translateY(-2px);
}

.bouton:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--marine);
}

.pastilles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ecart);
  width: min(100%, 720px);
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.pastilles li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 10px;
  border: 2px solid var(--marine);
  border-radius: 99px;
  background: var(--panneau);
  font-weight: 900;
  font-size: 15px;
  white-space: nowrap;
}

/* Sections : titre centré, puis leur contenu. */
.section {
  display: grid;
  justify-items: center;
  gap: var(--ecart);
  padding: calc(var(--marge) * 1.5) 0;
}

.section > p {
  max-width: 720px;
  margin: 0;
}

.cadre {
  overflow: hidden;
  width: 100%;
  border: 3px solid var(--marine);
  border-radius: var(--rayon);
  background: var(--marine);
  box-shadow: 0 6px 0 rgba(13, 29, 58, 0.5);
}

.cadre img {
  width: 100%;
  height: auto;
}

/* Rangées de tuiles de même taille : les lignes (image, titre, texte) s'alignent d'une tuile à l'autre. */
.tuiles {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: var(--ecart);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tuile {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  padding: var(--ecart);
  border: 3px solid var(--marine);
  border-radius: var(--rayon);
  background: var(--panneau);
}

.tuile p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 16px;
}

.tuile .image {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--marine);
  border-radius: 10px;
  background: var(--marine);
}

.tuile .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tuile .numero {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 8px;
  border: 2px solid var(--marine);
  border-radius: 50%;
  background: linear-gradient(var(--jaune-clair), var(--jaune-fonce));
  color: var(--marine);
  font-size: 19px;
  text-shadow: none;
  vertical-align: 2px;
}

.tuile .picto {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--marine);
  border-radius: 50%;
  background: var(--panneau-2);
  color: var(--jaune);
}

.tuile .picto svg {
  width: 28px;
  height: 28px;
}

/* Cartes du jeu : même gabarit que la vignette (commune bleue, rare orange). */
/*
 * Chaque carte prend deux demi-colonnes : une rangée incomplète (9 cartes sur 4 colonnes) se centre au lieu de rester
 * collée à gauche.
 */
.cartes {
  display: grid;
  grid-template-columns: repeat(calc(var(--n, 4) * 2), minmax(0, 1fr));
  gap: var(--ecart);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cartes > .carte {
  grid-column: span 2;
}

.cartes > .carte:nth-child(4n + 1):nth-last-child(3) {
  grid-column: 2 / span 2;
}

.cartes > .carte:nth-child(4n + 1):nth-last-child(2) {
  grid-column: 3 / span 2;
}

.cartes > .carte:nth-child(4n + 1):nth-last-child(1) {
  grid-column: 4 / span 2;
}

.carte {
  display: grid;
  grid-row: span var(--lignes, 2);
  grid-template-rows: subgrid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px 10px 14px;
  border: 3px solid var(--marine);
  border-radius: var(--rayon);
  background: var(--panneau);
}

/* Le dessin tient dans un cadre 4 / 3 de même taille pour toutes les cartes, quelle que soit sa forme. */
.carte .art {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--marine);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 35%, #8fc0ff, #3d7fd6 70%);
}

.carte.rare .art {
  background: radial-gradient(circle at 50% 35%, #ffd27a, #f08a1c 70%);
}

.carte .art img {
  position: absolute;
  inset: 10%;
  width: 80%;
  height: 80%;
  object-fit: contain;
}

/*
 * Un nom long rétrécit avec la carte (« Forces spéciales » sur téléphone) au lieu d'être coupé : --c est son nombre de
 * lettres, la boîte autour mesure la largeur (pas la carte elle-même : une sous-grille ne peut pas l'être).
 */
.carte .nom-boite {
  display: flex;
  justify-content: center;
  justify-self: stretch;
  container-type: inline-size;
}

.carte .nom {
  overflow: hidden;
  max-width: 100%;
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: min(21px, calc(100cqi / (var(--c, 10) * 0.56)));
  line-height: 1.1;
  text-overflow: ellipsis;
  text-shadow: var(--contour);
  white-space: nowrap;
}

.carte .famille {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  padding: 1px 12px;
  border: 2px solid var(--marine);
  border-radius: 99px;
  background: var(--panneau-2);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

/* (texte blanc lisible : contraste 4,5 au moins) */
.carte.rare .famille {
  background: #a65306;
}

.carte p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 15px;
  line-height: 1.45;
}

.carte .duel {
  display: grid;
  gap: 2px;
  width: 100%;
  padding-top: 8px;
  border-top: 2px solid rgba(13, 29, 58, 0.6);
  font-size: 14px;
}

.carte .duel b {
  color: var(--jaune);
  font-weight: 900;
}

/* Un grade du guide : bandeau (nom, trophées), puis ses cartes. */
.grade {
  display: grid;
  gap: var(--ecart);
  width: 100%;
  padding: var(--ecart);
  border: 3px solid var(--marine);
  border-radius: calc(var(--rayon) + 4px);
  background: rgba(13, 29, 58, 0.35);
}

.grade-titre {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--ecart);
}

.grade-titre::before,
.grade-titre::after {
  content: '';
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.grade-titre h3 {
  white-space: nowrap;
}

.grade-titre .trophees {
  margin-left: 10px;
  color: var(--jaune);
  font-family: var(--f-texte);
  font-size: 16px;
  font-weight: 900;
  text-shadow: none;
}

/* Texte suivi (règles du guide) : un panneau centré, paragraphes justifiés au centre. */
.panneau {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: var(--marge);
  border: 3px solid var(--marine);
  border-radius: var(--rayon);
  background: var(--panneau);
}

.panneau p {
  margin: 0;
}

.sommaire {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sommaire a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 2px solid var(--marine);
  border-radius: 12px;
  background: var(--panneau);
  color: var(--texte);
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.sommaire a:hover {
  background: var(--panneau-2);
}

/* Questions fréquentes : une colonne de panneaux qu'on ouvre. */
.questions {
  display: grid;
  gap: 10px;
  width: min(100%, 820px);
}

.questions details {
  border: 3px solid var(--marine);
  border-radius: 14px;
  background: var(--panneau);
}

.questions summary {
  padding: 14px var(--ecart);
  cursor: pointer;
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.3px;
  list-style: none;
  text-shadow: var(--contour);
}

.questions summary::-webkit-details-marker {
  display: none;
}

.questions details[open] summary {
  border-bottom: 2px solid rgba(13, 29, 58, 0.6);
}

.questions details p {
  margin: 0;
  padding: 12px var(--ecart) 16px;
  color: var(--texte-doux);
}

/* Pied de page : trois liens à parts égales, puis l'éditeur. */
.pied {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: var(--marge);
  padding: var(--marge) 0 calc(var(--marge) * 1.5);
  background: rgba(13, 29, 58, 0.55);
  color: var(--texte-doux);
  font-size: 15px;
}

.pied nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ecart);
  width: min(100%, 600px);
}

.pied a {
  color: var(--texte);
  white-space: nowrap;
}

.pied p {
  margin: 0;
}

@media (max-width: 900px) {
  .cartes {
    --n: 3;
  }

  .cartes > .carte:nth-child(n):nth-last-child(n) {
    grid-column: span 2;
  }

  .cartes > .carte:nth-child(3n + 1):nth-last-child(2) {
    grid-column: 2 / span 2;
  }

  .cartes > .carte:nth-child(3n + 1):nth-last-child(1) {
    grid-column: 3 / span 2;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .onglets a {
    font-size: 17px;
  }

  .entete {
    padding-top: 20px;
  }

  .bouton {
    width: 100%;
    min-width: 0;
  }

  .pastilles {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tuiles {
    --n: 1;
  }

  .tuiles.atouts {
    --n: 2;
  }

  .tuiles.atouts .tuile {
    padding: 12px 10px;
  }

  .tuiles.atouts h3 {
    font-size: 19px;
  }

  .tuiles.atouts p {
    font-size: 14px;
  }

  .cartes {
    --n: 2;
  }

  .cartes > .carte:nth-child(n):nth-last-child(n) {
    grid-column: span 2;
  }

  .cartes > .carte:nth-child(2n + 1):nth-last-child(1) {
    grid-column: 2 / span 2;
  }

  /* 3 par rangée ; la rangée de 2 se centre (chaque lien prend deux demi-colonnes) */
  .sommaire {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sommaire li {
    grid-column: span 2;
  }

  .sommaire li:nth-child(3n + 1):nth-last-child(2) {
    grid-column: 2 / span 2;
  }

  .sommaire li:nth-child(3n + 1):nth-last-child(1) {
    grid-column: 3 / span 2;
  }

  .pied nav {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}