/* ==========================================================================
   Jeux-en-ligne — feuille de style commune (catalogue + lanceur)
   Thème « Galaxie » : bleu nuit, gris ardoise, blanc cassé, accent lavande.
   Pensée mobile d'abord. Animations minimales, coupées si l'appareil
   demande de réduire les mouvements.
   ========================================================================== */

:root {
  --fond: #0b1020;            /* bleu nuit profond */
  --fond-haut: #111934;       /* haut de page, à peine plus clair */
  --surface: #161f38;         /* cartes, champs, boutons */
  --surface-2: #1d2745;       /* surface au survol */
  --trait: #2c3650;           /* gris ardoise : séparateurs */
  --trait-fort: #434e6b;      /* contours des boutons et des champs */
  --liseré: rgba(236, 234, 228, .07);
  --encre: #eceae4;           /* blanc cassé : texte principal */
  --encre-douce: #a3adc2;     /* ardoise clair : texte secondaire */
  --accent: #a8b3f0;          /* bleu lavande : sélection, focus */
  --accent-encre: #0b1020;    /* texte posé sur l'accent */
  --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px -12px rgba(0, 0, 0, .7);
  --ombre-haute: 0 2px 4px rgba(0, 0, 0, .3), 0 16px 32px -14px rgba(0, 0, 0, .8);
  --rayon: 16px;
  --police: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  /* Pouce au trait (compteurs des jaquettes), utilisé comme masque. */
  --icone-pouce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10.5v9.5M7 10.5l3.4-6.2a1.9 1.9 0 0 1 3.6.9V9h4.4a2 2 0 0 1 2 2.4l-1.3 6.7a2.3 2.3 0 0 1-2.3 1.9H4.8A1.8 1.8 0 0 1 3 18.2v-5.9a1.8 1.8 0 0 1 1.8-1.8z'/%3E%3C/svg%3E");
  /* Globe au trait (bouton de langue) */
  --icone-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E");
  /* Horloge au trait (temps joué, Tendances) */
  --icone-horloge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  /* Le fond passe au « canevas » de la page : les étoiles se dessinent par-dessus.
     Légère lueur en haut, éteinte avant la barre de filtres (pas de marche visible). */
  background: radial-gradient(130% 150px at 50% 0, var(--fond-haut), transparent) no-repeat, var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Champ d'étoiles fixe (CSS seul)
   Deux calques de motifs de tailles différentes, pour que la répétition ne
   se voie pas. Seul le second scintille, très doucement (opacité seulement).
   -------------------------------------------------------------------------- */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Étoiles fines, immobiles */
body::before {
  background-image:
    radial-gradient(1px 1px at 23px 41px, rgba(236, 234, 228, .55), transparent),
    radial-gradient(1px 1px at 87px 152px, rgba(236, 234, 228, .4), transparent),
    radial-gradient(1.2px 1.2px at 141px 22px, rgba(236, 234, 228, .6), transparent),
    radial-gradient(1px 1px at 198px 233px, rgba(236, 234, 228, .45), transparent),
    radial-gradient(1.3px 1.3px at 262px 97px, rgba(236, 234, 228, .55), transparent),
    radial-gradient(1px 1px at 52px 268px, rgba(236, 234, 228, .4), transparent),
    radial-gradient(.8px .8px at 176px 121px, rgba(236, 234, 228, .45), transparent),
    radial-gradient(1px 1px at 283px 203px, rgba(168, 179, 240, .5), transparent),
    radial-gradient(1px 1px at 118px 291px, rgba(236, 234, 228, .35), transparent);
  background-size: 310px 310px;
}

/* Étoiles un peu plus visibles, qui scintillent */
body::after {
  background-image:
    radial-gradient(1.4px 1.4px at 64px 88px, rgba(236, 234, 228, .8), transparent),
    radial-gradient(1.2px 1.2px at 312px 43px, rgba(236, 234, 228, .7), transparent),
    radial-gradient(1.5px 1.5px at 201px 276px, rgba(236, 234, 228, .75), transparent),
    radial-gradient(1.2px 1.2px at 421px 190px, rgba(168, 179, 240, .7), transparent),
    radial-gradient(1.3px 1.3px at 130px 371px, rgba(236, 234, 228, .65), transparent),
    radial-gradient(1.4px 1.4px at 383px 334px, rgba(236, 234, 228, .7), transparent);
  background-size: 470px 410px;
  animation: scintiller 7s ease-in-out infinite alternate;
}

@keyframes scintiller {
  from { opacity: .55; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   En-tête du catalogue
   -------------------------------------------------------------------------- */

/* Accueil compact : en-tête et tuiles serrés pour que les premières jaquettes
   apparaissent en bas de l'écran dès l'arrivée, surtout sur téléphone. */
.entete {
  padding: 12px 16px 4px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Marque à gauche, sélecteur de langue à droite */
.entete-haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}

.marque {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  font-size: clamp(21px, 5vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.marque-logo {
  width: 1.55em;
  height: 1.55em;
  flex: none;
}

.marque small {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--encre-douce);
  margin-top: 2px;
}

/* Sélecteur de langue (créé par i18n/i18n.js) : code de la langue, et son nom
   sur grand écran. La liste s'ouvre vers la gauche, sous le bouton. */
.entete-langue { flex: none; }

.selecteur-site .jel-langue-bouton {
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--trait-fort);
  background: var(--surface);
  color: var(--encre);
  font-family: var(--police);
  font-size: 14px;
}

.selecteur-site .jel-langue-bouton::before {
  content: "";
  width: 17px;
  height: 17px;
  background: var(--accent);
  -webkit-mask: var(--icone-globe) center / contain no-repeat;
  mask: var(--icone-globe) center / contain no-repeat;
}

.selecteur-site .jel-langue-nom { display: none; }

.selecteur-site .jel-langue-menu {
  right: 0;
  font-family: var(--police);
}

@media (min-width: 720px) {
  .selecteur-site .jel-langue-nom { display: inline; font-weight: 500; color: var(--encre-douce); }
}

@media (hover: hover) {
  .selecteur-site .jel-langue-bouton:hover { border-color: var(--encre-douce); }
}

.recherche {
  position: relative;
}

.recherche svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--encre-douce);
  pointer-events: none;
}

/* 16 px au moins : en dessous, l'iPhone zoome sur le champ quand on le touche. */
.recherche input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  border: 1.5px solid var(--trait-fort);
  border-radius: 999px;
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-size: 16px;
}

.recherche input::placeholder {
  color: var(--encre-douce);
  opacity: 1;
}

.recherche input:focus {
  outline: none;
  border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Regroupements : tuiles (raccourcis, âge, genres, univers)
   Chaque tuile reçoit sa teinte (--teinte, 0 à 360) depuis app.js : un fond
   sombre légèrement coloré, comme une nébuleuse. La sélection garde l'accent
   lavande. Sur téléphone, genres et univers forment une bande de deux rangées
   qui défile (« Tout voir » la déplie) ; sur grand écran, tout est déplié.
   -------------------------------------------------------------------------- */

.explorer {
  max-width: 1200px;
  margin: 0 auto;
}

.groupe { margin-top: 4px; }

/* Le bouton « Tout voir » garde 44 px de haut : ses marges négatives
   l'empêchent d'agrandir la ligne de titre. */
.groupe-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
  padding: 0 16px;
}

.groupe-tete h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.groupe-tete h2 small {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--encre-douce);
}

.tout-voir {
  flex: none;
  min-height: 44px;
  margin: -10px -10px -10px 0;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* Le rembourrage laisse la place au contour de focus et à la coche. */
.tuiles {
  display: grid;
  gap: 6px;
  padding: 4px 16px;
}

.tuiles-raccourcis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2px;
}

.tuiles-ages { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tuiles-bande {
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: 80px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}

.tuiles-bande::-webkit-scrollbar { display: none; }

.tuiles-bande.deplie {
  grid-auto-flow: row;
  grid-template-rows: none;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  overflow: visible;
}

@media (min-width: 720px) {
  .tuiles-bande,
  .tuiles-bande.deplie {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    overflow: visible;
  }
  .tout-voir { display: none; }
  .tuiles-raccourcis { grid-template-columns: repeat(3, minmax(0, 200px)); }
  .tuiles-ages { grid-template-columns: repeat(4, minmax(0, 150px)); }
}

.tuile {
  --teinte: 230;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 56px;
  padding: 4px 4px 5px;
  border: 1.5px solid hsl(var(--teinte) 35% 40% / .45);
  border-radius: 11px;
  background: linear-gradient(160deg, hsl(var(--teinte) 38% 24%), hsl(var(--teinte) 32% 14%));
  box-shadow: var(--ombre);
  color: var(--encre);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.tuile-picto {
  font-size: 19px;
  line-height: 1.15;
}

/* Noms longs (allemand…) : coupés avec un trait d'union plutôt que débordés. */
.tuile-nom {
  max-width: 100%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.tuile-compte {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--encre-douce);
}

.tuile:active:not(:disabled) { transform: scale(.96); }

/* Tuile choisie : contour lavande et coche */
.tuile[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), var(--ombre);
  background: linear-gradient(160deg, hsl(var(--teinte) 48% 33%), hsl(var(--teinte) 40% 20%));
}

.tuile[aria-pressed="true"] .tuile-compte { color: var(--encre); }

.tuile[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-encre);
  font-size: 10px;
  font-weight: 800;
}

/* Aucun jeu avec les autres filtres choisis */
.tuile-zero { opacity: .5; }

/* Regroupement encore vide : grisé, en pointillés, pas cliquable */
.tuile-bientot {
  border-style: dashed;
  border-color: var(--trait-fort);
  background: rgba(22, 31, 56, .6);
  box-shadow: none;
  cursor: default;
}

.tuile-bientot .tuile-picto {
  filter: grayscale(1);
  opacity: .45;
}

.tuile-bientot .tuile-nom { color: var(--encre-douce); }
.tuile-bientot .tuile-compte { font-style: italic; }

/* Autres thèmes (tags rangés dans aucun univers) : petites puces */
.autres-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 16px 0;
}

.autres-themes[hidden] { display: none; }

.puce {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 13px;
  border: 1.5px solid var(--trait-fort);
  border-radius: 999px;
  background: var(--surface);
  color: var(--encre-douce);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;   /* textes longs (allemand…) : retour à la ligne */
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.puce-picto { font-size: 15px; }

.puce[aria-pressed="true"],
.puce-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-encre);
}

/* Filtre choisi, rappelé au-dessus des jeux : toucher pour le retirer */
.puce-active::after {
  content: "✕";
  font-size: 13px;
  font-weight: 800;
}

.puce-effacer {
  border-color: transparent;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   En-tête des jeux : titre, nombre, tri
   -------------------------------------------------------------------------- */

.resultats-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 0 0 10px;
  padding-top: 10px;
  border-top: 1px solid var(--trait);
  scroll-margin-top: 8px;
}

.resultats-tete h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.compte {
  font-size: 14px;
  font-weight: 600;
  color: var(--encre-douce);
}

/* Menu de tri : une liste déroulante native (sélecteur du téléphone) */
.tri {
  position: relative;
  display: inline-block;
  max-width: 100%;
  color: var(--accent);       /* couleur des deux icônes */
}

.tri select {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  min-height: 44px;
  padding: 0 38px 0 40px;     /* texte à 16 px : en dessous, l'iPhone zoome */
  border: 1.5px solid var(--trait-fort);
  border-radius: 999px;
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-weight: 700;
  text-overflow: ellipsis;
  cursor: pointer;
}

.tri select option {
  background: var(--surface);
  color: var(--encre);
}

.tri svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.tri-icone { left: 15px; }
.tri-fleche { right: 14px; }

.filtres-actifs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.filtres-actifs[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Tendances : les jeux les plus joués de la semaine, en haut de l'accueil.
   Une seule bande de petites cartes qui défile (barre de défilement fine
   avec une souris), pour laisser le catalogue en vue. Rang dans une
   pastille lavande.
   -------------------------------------------------------------------------- */

.tendances {
  max-width: 1200px;
  margin: 2px auto 6px;
}

.tendances[hidden] { display: none; }

.tendances-liste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 132px;
  gap: 10px;
  margin: 0;
  padding: 6px 16px 8px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 16px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.tendances-liste::-webkit-scrollbar { display: none; }
.tendances-liste > li { scroll-snap-align: start; }

@media (min-width: 720px) {
  .tendances-liste {
    grid-auto-columns: 156px;
    gap: 12px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .tendances-liste {
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--trait-fort) transparent;
  }
  .tendances-liste::-webkit-scrollbar { display: block; height: 8px; }
  .tendances-liste::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--trait-fort); }
}

.carte-tendance .carte-titre {
  padding: 26px 9px 8px;
  font-size: 13.5px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.carte-tendance .badge-nouveau {
  top: 7px;
  right: 7px;
  padding: 2px 7px;
  font-size: 10px;
}

.carte-tendance .carte-texte { padding: 7px 9px 9px; }

.carte-tendance .carte-infos {
  font-size: 11.5px;
  line-height: 1.3;
}

@media (min-width: 720px) {
  .carte-tendance .carte-titre { padding: 28px 10px 9px; font-size: 14.5px; }
  .carte-tendance .carte-infos { font-size: 12px; }
}

.tendance-rang {
  position: absolute;
  top: 7px;
  left: 7px;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  color: var(--accent-encre);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

/* Temps total joué cette semaine, avec une horloge au trait. */
.tendance-temps {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 2px;
  color: var(--encre);
  font-size: 14px;
  font-weight: 700;
}

.tendance-temps::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  -webkit-mask: var(--icone-horloge) center / contain no-repeat;
  mask: var(--icone-horloge) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Grille de jaquettes
   -------------------------------------------------------------------------- */

main.catalogue {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px 48px;
}

/* Choix Monde / Mon pays */
.portee {
  display: inline-flex;
  flex: none;
  margin: 0 0 10px;
  padding: 2px;
  border: 1.5px solid var(--trait-fort);
  border-radius: 999px;
  background: var(--surface);
}

.portee[hidden] { display: none; }

.portee button {
  min-height: 44px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--encre-douce);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.portee button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-encre);
}

/* Explication du classement (hors connexion, pays avec peu de votes…) */
.note-tri {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--encre-douce);
}

.note-tri[hidden] { display: none; }

.grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px)  { .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 900px)  { .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .grille { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.carte {
  display: block;
  height: 100%;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--liseré);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.carte:active { transform: scale(.98); }

.jaquette {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #111830;
}

.jaquette img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Titre du jeu, dans la langue choisie, en bandeau sur le bas de la jaquette
   (les jaquettes ne contiennent aucun texte). Fond bleu nuit dégradé pour rester
   lisible sur toutes les images ; jusqu'à 3 lignes, mots longs coupés. */
.carte-titre {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 34px 12px 11px;
  background: linear-gradient(to bottom, rgba(11, 16, 32, 0), rgba(11, 16, 32, .78) 42%, rgba(11, 16, 32, .94));
  color: var(--encre);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

@media (max-width: 380px) {
  .carte-titre { font-size: 15px; padding: 30px 10px 9px; }
}

.badge-nouveau {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-encre);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Jeu déjà gardé sur l'appareil (jouable sans connexion) */
.badge-hors-ligne {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  padding: 3px 9px;
  border: 1px solid rgba(236, 234, 228, .14);
  border-radius: 999px;
  background: rgba(11, 16, 32, .88);
  color: var(--encre);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.badge-hors-ligne::before {
  content: "✓ ";
  color: var(--accent);
}

.carte-texte {
  padding: 10px 12px 12px;
}

.carte-infos {
  margin: 0;
  font-size: 13px;
  color: var(--encre-douce);
  overflow-wrap: break-word;
}

/* Compteurs de pouces : le nombre seul, le pouce est dessiné ici */
.carte-pouces {
  display: flex;
  gap: 14px;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--encre-douce);
}

.carte-pouces span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.carte-pouces span::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--icone-pouce) center / contain no-repeat;
  mask: var(--icone-pouce) center / contain no-repeat;
}

.carte-pouces .pouce-bas::before { transform: rotate(180deg); }

.archives {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--trait);
}

.archives h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
}

.archives > p {
  margin: 4px 0 14px;
  font-size: 14px;
  color: var(--encre-douce);
}

.archives .carte { opacity: .75; }

.vide {
  text-align: center;
  padding: 48px 16px;
  color: var(--encre-douce);
}

.vide strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--encre);
  margin-bottom: 6px;
}

.pied {
  text-align: center;
  font-size: 13px;
  color: var(--encre-douce);
  padding: 0 16px 32px;
}

/* Survol : seulement avec une souris (sur écran tactile, il resterait « collé »). */
@media (hover: hover) {
  .recherche input:hover:not(:focus),
  .tri select:hover,
  .puce:hover:not([aria-pressed="true"]):not(.puce-active):not(.puce-effacer) {
    border-color: var(--encre-douce);
  }

  .puce:hover:not([aria-pressed="true"]):not(.puce-active),
  .portee button:hover:not([aria-pressed="true"]) {
    color: var(--encre);
  }

  .tuile:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: hsl(var(--teinte) 45% 60% / .8);
  }

  .tuile[aria-pressed="true"]:hover { border-color: var(--accent); }

  .carte:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-haute);
    border-color: rgba(236, 234, 228, .14);
  }

  .archives .carte:hover { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Lanceur de jeu (play.html)
   -------------------------------------------------------------------------- */

body.lanceur {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Pendant le jeu, les étoiles sont cachées derrière : inutile de les animer. */
body.lanceur::after { animation: none; }

.barre-jeu {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 8px;
  padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
  color: var(--encre);
}

.barre-jeu h1 {
  flex: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bouton-rond {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(236, 234, 228, .1);
  border-radius: 999px;
  background: rgba(236, 234, 228, .07);
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}

.bouton-rond svg { width: 22px; height: 22px; }
.bouton-rond[hidden] { display: none; }

@media (hover: hover) {
  .bouton-rond:hover { background: rgba(236, 234, 228, .14); }
}

/* Pouces : au trait, et remplis quand c'est mon vote */
.bouton-vote:active { transform: scale(.92); }

.bouton-vote[aria-pressed="true"],
.bouton-vote[aria-pressed="true"]:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-encre);
}

.bouton-vote[aria-pressed="true"] svg { fill: currentColor; }

.scene {
  position: relative;
  flex: 1;
  min-height: 0;
}

.scene iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.scene iframe[hidden] { display: none; }   /* jeu introuvable : le fond étoilé reste visible */

.scene:fullscreen iframe { height: 100vh; }

.message-jeu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  color: var(--encre-douce);
}

.message-jeu strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--encre);
}

.message-jeu[hidden] { display: none; }

/* Petit message après un vote (« Merci pour ton vote ! ») ;
   les messages plus longs (hors connexion) passent sur deux lignes. */
.info-vote {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--trait-fort);
  border-radius: 22px;
  background: var(--surface);
  color: var(--encre);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  pointer-events: none;
}

.info-vote[hidden] { display: none; }

/* Vérification anti-robot : invisible, sauf si Cloudflare demande de cocher une case */
.zone-turnstile {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
}

.bouton {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-encre);
  font-weight: 700;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Mouvements réduits : ni scintillement, ni déplacement, ni transition.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }

  *, *::before, *::after {
    transition: none !important;
  }

  .carte:hover,
  .carte:active,
  .tuile:hover,
  .tuile:active,
  .bouton-vote:active {
    transform: none;
  }
}