/* =====================================================================
   Style du hub — volontairement neutre : la direction visuelle reste à
   choisir. Pour changer l'ambiance, modifie surtout les variables
   ci-dessous (couleurs, arrondis, police).
   ===================================================================== */
:root {
  --fond: #f6f7fb;
  --surface: #ffffff;
  --texte: #1c1f2a;
  --texte-doux: #5a6072;
  --bordure: #dfe2ec;
  --accent: #4b3fd6;
  --accent-texte: #ffffff;
  --premium: #b8860b;
  --succes: #1d7a46;
  --erreur: #b3261e;
  --arrondi: 12px;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #12141c;
    --surface: #1c1f2b;
    --texte: #eceef5;
    --texte-doux: #a3a9bc;
    --bordure: #2e3243;
    --accent: #8f86ff;
    --accent-texte: #12141c;
    --premium: #e0b84a;
    --succes: #5fd394;
    --erreur: #ff8a80;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; padding-block: 1.5rem 3rem; }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 0; }
a { color: var(--accent); }

.conteneur { width: min(100% - 2rem, 900px); margin-inline: auto; }
.etroit { max-width: 440px; margin-inline: auto; }

/* En-tête et pied de page */
header { background: var(--surface); border-bottom: 1px solid var(--bordure); }
.entete { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 1rem; }
.logo { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; text-decoration: none;
  background: linear-gradient(90deg, var(--accent), var(--premium)); -webkit-background-clip: text;
  background-clip: text; color: transparent; display: inline-flex; align-items: center; gap: 0.4rem; }
.logo-icone { width: 1.9rem; height: 1.9rem; }
.marque { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 0.75rem; }
/* Slogan à côté de « Sacripland » (dessous si l'écran est étroit) ; il mène à « Qui sommes-nous ? ».
   Sur la page d'accueil, le titre de la bannière reste dans la page (lecteurs d'écran) mais n'est plus affiché. */
.slogan-mobile { font-size: 0.85rem; color: var(--texte-doux); line-height: 1.2; text-decoration: none; }
/* Mobile : un seul bouton « Sacripland » vers l'accueil, le slogan (lien « Qui sommes-nous ? ») est masqué. */
@media (max-width: 759px) { .slogan-mobile { display: none; } }
.accroche h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
nav { display: flex; gap: 0 1rem; flex-wrap: wrap; }
.entete nav { justify-content: flex-end; }
nav a { padding: 0.5rem 0; }

/* Menu déroulant de l'en-tête */
.menu { position: relative; flex: none; }
.menu-bouton { font: inherit; cursor: pointer; padding: 0.5rem 1rem; color: inherit; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: 0.6rem; }
.menu-bouton[aria-expanded="true"] .menu-fleche { display: inline-block; transform: rotate(180deg); }
.menu-liste { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 50; min-width: 13rem; margin: 0;
  padding: 0.35rem; list-style: none; background: var(--surface); border: 1px solid var(--bordure);
  border-radius: 0.7rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.menu-liste a { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; border-radius: 0.5rem; color: inherit; text-decoration: none; }
.menu-liste .menu-separateur { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid rgba(127, 127, 127, 0.3); }
.menu-deconnexion { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.65rem 0.8rem; border: 0; border-radius: 0.5rem; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.menu-deconnexion:hover, .menu-deconnexion:focus-visible { background: rgba(127, 127, 127, 0.18); }
.menu-liste a:hover, .menu-liste a:focus-visible { background: rgba(127, 127, 127, 0.18); }
.menu-icone { flex: none; display: inline-flex; width: 1.3rem; height: 1.3rem; color: var(--accent); }
.menu-icone svg { width: 100%; height: 100%; }
/* Recherche des jeux : tout en haut, entre le logo et le bouton Menu */
.entete .recherche { flex: 1 1 auto; min-width: 0; max-width: 26rem; margin: 0; }
.entete .recherche input { min-height: 40px; padding-block: 0.35rem; }
@media (max-width: 480px) { .entete { gap: 0.5rem; } .entete .logo { font-size: 1.05rem; } .logo-icone { width: 1.6rem; height: 1.6rem; }
  .menu-bouton { padding: 0.5rem 0.7rem; } .entete .recherche input { padding-inline: 0.75rem; font-size: 0.95rem; } }
/* Accueil mobile : pas d'encadré d'accroche en haut de page */
@media (max-width: 759px) { .accroche-accueil { display: none; } }
footer { border-top: 1px solid var(--bordure); color: var(--texte-doux); font-size: 0.9rem; }
.pied { padding-block: 1.25rem; }
.pied p { margin: 0 0 0.5rem; }

/* Thèmes équipés dans la boutique : ils ne changent ni les droits ni les jeux. */
:root[data-hub-theme="sombre"] {
  --fond: #0c1220; --surface: #172135; --texte: #f1f5ff; --texte-doux: #b6c1d8;
  --bordure: #35425d; --accent: #8ca8ff; --accent-texte: #10182a; --premium: #ffd166;
  color-scheme: dark;
}
:root[data-hub-theme="retro_arcade"] {
  --fond: #100b24; --surface: #21133d; --texte: #e9ffe9; --texte-doux: #a8dcb5;
  --bordure: #654691; --accent: #41f0a0; --accent-texte: #071a13; --premium: #ff5bd8;
  color-scheme: dark;
}
:root[data-hub-theme="or_imperial"] {
  --fond: #26101f; --surface: #3b1930; --texte: #fff8df; --texte-doux: #dfc5b8;
  --bordure: #a7772c; --accent: #f2c14e; --accent-texte: #241407; --premium: #ffe28a;
  color-scheme: dark;
}

/* Blocs */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--arrondi);
  padding: 1.25rem;
}
.grille { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grille .carte { display: flex; flex-direction: column; gap: 0.75rem; }
.grille .carte { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.grille .carte:hover { transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 18%, transparent); }
.icone-jeu { font-size: 2rem; line-height: 1; width: 3.5rem; height: 3.5rem; display: grid; place-items: center;
  border-radius: 16px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
@media (prefers-reduced-motion: reduce) { .grille .carte, .puce { transition: none; } .grille .carte:hover, .puce:hover:not(:disabled) { transform: none; } }
.grille .carte h3 { margin: 0; }
.entete-boutique { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.entete-boutique h1 { margin-bottom: 0.25rem; }
.solde-boutique { flex: none; margin: 0; padding: 0.65rem 1rem; border: 1px solid var(--premium);
  border-radius: 999px; background: var(--surface); font-size: 1.15rem; }
.filtres-boutique { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.25rem 0 0.75rem; margin-bottom: 0.75rem; }
.filtres-boutique .puce { flex: none; }
.grille-boutique { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin-bottom: 2rem; }
.apparence { display: grid; gap: 0.75rem; }
.champ-apparence { display: grid; gap: 0.25rem; }
.champ-apparence label { font-weight: 600; }
.champ-apparence select { min-height: 44px; padding: 0.4rem 0.75rem; border-radius: 10px; font: inherit; color: inherit; background: var(--carte, transparent); border: 1px solid currentColor; width: 100%; }
.apparence-jeu { border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 10px; padding: 0.25rem 0.75rem; }
.apparence-jeu summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.ligne-skin { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.4rem 0 0.6rem; flex-wrap: wrap; }
.carte-cosmetique { min-width: 0; }
.carte-cosmetique:hover { transform: none !important; }
.carte-cosmetique.est-equipe { border-color: var(--succes); }
.apercu-cosmetique { width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 1rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); font-size: 2.35rem; }
.description-cosmetique { color: var(--texte-doux); margin: 0; }
.prix-cosmetique { margin: 0; font-size: 1.15rem; }
.badge-equipe { color: var(--succes); border-color: var(--succes); }
.profil-apparence { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 1rem; }
.avatar-equipe { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--bordure); font-size: 2rem; overflow: hidden; white-space: nowrap; }
.titre-equipe { color: var(--premium); }
.titre-god-mode { display: inline-flex; width: fit-content; align-items: center; padding: 0.15rem 0.5rem;
  border: 1px solid #f6c945; border-radius: 999px; background: #241447; color: #fff4dc;
  font-size: 0.78rem; font-weight: 900; letter-spacing: 0.06em; }
.carte-cosmetique[data-code="titre.god_mode"] { border-color: #f6c945;
  background: linear-gradient(145deg, color-mix(in srgb, #241447 12%, var(--surface)), var(--surface)); }
.liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
/* Bannière d'accueil : toujours sombre, quel que soit le thème */
.accroche { padding: 2rem 1.5rem; border-radius: calc(var(--arrondi) * 1.5); text-align: center;
  background-color: #1A1238; color: #FFF4DC; border: 1px solid #2A1D5E; }
.accroche h1 { font-size: clamp(1.6rem, 5vw, 2.6rem); letter-spacing: -0.02em; color: #FFF4DC; }
.accroche p { color: #d8d2ec; font-size: 1.05rem; }
.accroche .bouton { background: #FFC83D; color: #1A1238; box-shadow: 0 2px 0 #b8901f; }
@media (min-width: 760px) {
  .accroche { text-align: left; min-height: 260px; display: flex; flex-direction: column; justify-content: center;
    padding: 2.5rem 2rem; padding-right: 48%;
    background-image: url("../img/banniere-jeux.svg"); background-repeat: no-repeat;
    background-position: right center; background-size: auto 100%; }
}

/* Encadré d'annonce */
.annonce { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: var(--arrondi);
  border: 1px solid var(--premium); border-left-width: 6px;
  background: color-mix(in srgb, var(--premium) 10%, var(--surface)); }
.annonce h2 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.annonce p { margin: 0 0 0.35rem; white-space: pre-line; }
.annonce p:last-child { margin: 0; }
.annonce .note:empty, .annonce h2:empty { display: none; }

/* Catégories de jeux */
.filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.puce { flex: 0 1 auto; min-height: 44px; padding: 0.4rem 1rem; border-radius: 999px; font: inherit; font-weight: 600;
  cursor: pointer; border: 1px solid var(--bordure); background: var(--surface); color: var(--texte);
  transition: background 0.12s ease, transform 0.12s ease; }
.puce:hover:not(:disabled) { transform: translateY(-1px); }
.puce[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.puce:disabled { opacity: 0.55; cursor: not-allowed; }
.puce small { font-weight: 400; }
.categorie h3 { font-size: 1.1rem; margin: 1.5rem 0 0.75rem; }
.categorie h4 { font-size: 1.05rem; margin: 0; }
.note { color: var(--texte-doux); font-size: 0.9rem; margin: 0; }
.badge { align-self: flex-start; font-size: 0.8rem; padding: 0.15rem 0.6rem;
  border-radius: 999px; background: var(--fond); border: 1px solid var(--bordure); }

/* Portefeuille et gains */
.solde .montant { font-size: 1.8rem; font-weight: 700; }
.solde.premium { border-color: var(--premium); }
.solde.premium .montant { color: var(--premium); }
.gain { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.positif { color: var(--succes); font-weight: 600; }
.negatif { color: var(--erreur); font-weight: 600; }

/* Tableaux */
.defilement { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--arrondi); overflow: hidden; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--bordure); }
th { font-size: 0.85rem; color: var(--texte-doux); font-weight: 600; }

/* Formulaires */
form { display: grid; gap: 1rem; }
label { display: grid; gap: 0.35rem; font-weight: 500; }
label.case { grid-template-columns: auto 1fr; align-items: start; gap: 0.6rem; font-weight: 400; }
label > * { min-width: 0; }
input:not([type="checkbox"]) {
  width: 100%; min-width: 0;
  font: inherit; min-height: 44px; padding: 0.5rem 0.75rem;
  border: 1px solid var(--bordure); border-radius: 8px; background: var(--fond); color: var(--texte);
}
textarea {
  width: 100%; min-width: 0; font: inherit; padding: 0.5rem 0.75rem; resize: vertical;
  border: 1px solid var(--bordure); border-radius: 8px; background: var(--fond); color: var(--texte);
}
input[type="checkbox"] { width: 22px; height: 22px; margin: 0.1rem 0 0; accent-color: var(--accent); }
.en-ligne { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
section.carte { margin-top: 2rem; }
.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }

/* Boutons (zones tactiles de 44 px minimum) */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 8px; border: 1px solid transparent;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--accent); color: var(--accent-texte);
  text-align: center; text-wrap: balance; line-height: 1.25;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 60%, #000);
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}
.bouton:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.bouton:active:not(:disabled) { transform: translateY(1px); box-shadow: none; filter: brightness(0.95); }
.bouton.secondaire { background: transparent; color: var(--texte); border-color: var(--bordure); box-shadow: none; }
.bouton.secondaire:hover:not(:disabled) { background: var(--fond); }
.bouton.danger { background: var(--erreur); color: #fff; box-shadow: 0 2px 0 color-mix(in srgb, var(--erreur) 60%, #000); }
.bouton:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.grille .carte .bouton { margin-top: auto; }
.entete-jeu { display: flex; align-items: center; gap: 0.75rem; }
.entete-jeu .icone-jeu { flex: none; }
.grille .carte .entete-jeu .bouton { flex: 1; margin-top: 0; }
.entete-jeu .note { margin: 0; }
@media (prefers-reduced-motion: reduce) { .bouton { transition: none; } .bouton:hover:not(:disabled), .bouton:active:not(:disabled) { transform: none; } }
.lien { background: none; border: 0; padding: 0.5rem 0; font: inherit; color: var(--accent);
  text-decoration: underline; cursor: pointer; justify-self: start; min-height: 44px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Onglets connexion / inscription */
.onglets { display: flex; gap: 0.5rem; margin-bottom: 1rem; max-width: 440px; margin-inline: auto; }
.onglets button { flex: 1; min-height: 44px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); color: var(--texte); }
.onglets button[aria-selected="true"] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }

/* Messages */
.message { padding: 0.75rem 1rem; border-radius: 8px; margin: 0 0 1rem; border: 1px solid var(--bordure); }
.message:empty { display: none; }
.message-succes { border-color: var(--succes); color: var(--succes); }
.message-erreur { border-color: var(--erreur); color: var(--erreur); }
#message { max-width: 440px; margin-inline: auto; }

/* Zone sensible */
details.danger { margin-top: 1.5rem; border-top: 1px solid var(--bordure); padding-top: 1rem; }
details.danger summary { cursor: pointer; color: var(--erreur); font-weight: 600; min-height: 44px; }

/* Pages légales */
.brouillon { border: 2px dashed var(--erreur); color: var(--erreur); }
.a-completer { background: color-mix(in srgb, var(--premium) 20%, transparent); padding: 0 0.25rem; border-radius: 4px; }

/* Recherche, favoris */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.recherche { margin: 0 0 1rem; }
.recherche input { width: 100%; min-height: 44px; padding: 0.5rem 1rem; border-radius: 999px;
  border: 1px solid var(--bordure); background: var(--surface); color: var(--texte); font: inherit; }
.recherche input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.favoris { margin-top: 1.5rem; }
.favoris-entete { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 0.5rem; margin-bottom: 0.75rem; }
.favoris-entete h2 { margin: 0; }
.etoile, .couronne { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bordure);
  background: var(--surface); color: var(--premium); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.etoile:hover, .couronne:hover { border-color: var(--premium); }
.etoile[aria-pressed="true"] { background: color-mix(in srgb, var(--premium) 18%, var(--surface));
  border-color: var(--premium); }
.couronne { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.carte-favori { align-items: center; text-align: center; }
.carte-favori h4 { margin: 0; }
.actions-favori { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0.5rem; width: 100%; margin-top: auto; }
.grille .carte-favori .actions-favori .bouton { flex: 1 1 7rem; margin-top: 0; }

/* Statistiques du joueur */
.tuiles { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.tuile { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--arrondi); padding: 1rem; }
.tuile .valeur { display: block; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tuile .etiquette { color: var(--texte-doux); font-size: 0.85rem; }
.barres { display: flex; align-items: flex-end; gap: 0.5rem; height: 9rem; padding-top: 1rem; }
.barre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; gap: 0.25rem; font-size: 0.8rem; color: var(--texte-doux); }
.barre-fut { width: 100%; max-width: 3rem; min-height: 2px; border-radius: 6px 6px 0 0; background: var(--accent); }
.barre-valeur { font-variant-numeric: tabular-nums; color: var(--texte); font-weight: 600; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* =====================================================================
   Retouches esthétiques : onglets des jeux, boutons, cartes de jeux.
   Tout passe par les variables du haut du fichier (thème clair/sombre).
   ===================================================================== */

/* Onglets de catégories (accueil) : une rangée qui défile sur mobile et reste visible en haut */
.onglets-jeux { flex-wrap: nowrap; gap: 0.5rem; margin: 0 -1rem 1rem; padding: 0.6rem 1rem;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fond) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure); }
.onglets-jeux::-webkit-scrollbar { display: none; }
.onglet { flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0.35rem 0.95rem; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer;
  white-space: nowrap; color: var(--texte); background: var(--surface); border: 1px solid var(--bordure);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.onglet:hover:not(:disabled):not([aria-selected="true"]) { border-color: var(--accent); transform: translateY(-1px); }
.onglet[aria-selected="true"] { color: var(--accent-texte); border-color: transparent;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #ec4899));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.onglet-nb { font-weight: 700; font-size: 0.75rem; min-width: 1.5rem; padding: 0.05rem 0.45rem; text-align: center;
  border-radius: 999px; background: color-mix(in srgb, var(--texte) 9%, transparent); font-variant-numeric: tabular-nums; }
.onglet[aria-selected="true"] .onglet-nb { background: color-mix(in srgb, var(--accent-texte) 22%, transparent); }
.onglet-vide:not([aria-selected="true"]) { opacity: 0.55; }
.onglet:disabled { opacity: 0.5; cursor: not-allowed; }
@media (min-width: 760px) { .onglets-jeux { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; position: static;
  backdrop-filter: none; background: none; border-bottom: 0; overflow: visible; } }

/* Boutons : relief doux, survol plus vivant, focus net */
.bouton { border-radius: 10px; letter-spacing: 0.01em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); }
.bouton:hover:not(:disabled) { filter: none; transform: translateY(-2px);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 60%, #000), 0 8px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.bouton.secondaire { background: transparent; }
.bouton.secondaire:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color: var(--accent); box-shadow: none; }
.bouton.danger { background: var(--erreur); }
.puce[aria-pressed="true"] { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #ec4899)); }
.etoile { transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
.etoile:hover { transform: scale(1.1) rotate(-8deg); }
.etoile[aria-pressed="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--premium) 22%, transparent); }

/* Cartes de jeux : icône en dégradé, liseré d'accent, titres plus lisibles */
.grille .carte { position: relative; overflow: hidden; }
.grille .carte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: 0;
  background: linear-gradient(90deg, var(--accent), var(--premium)); transition: opacity 0.15s ease; }
.grille .carte:hover::before { opacity: 1; }
.icone-jeu { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface)),
  color-mix(in srgb, var(--premium) 16%, var(--surface))); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--bordure)); }
.grille .carte h4 { font-size: 1.05rem; line-height: 1.25; }
.grille .carte .note { line-height: 1.4; }
.badge { font-weight: 600; background: color-mix(in srgb, var(--premium) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--premium) 40%, var(--bordure)); }
.categorie h3 { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.4rem;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 25%, var(--bordure)); }
@media (max-width: 480px) { .grille { grid-template-columns: 1fr; } }
/* Mosaïque des catégories : grosses tuiles colorées (une teinte par catégorie, via --h) */
.bascule-vue { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.mosaique { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.tuile-cat { width: 100%; height: 100%; min-height: 160px; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end; gap: 0.2rem; padding: 1rem 1.1rem; text-align: left; font: inherit; color: var(--texte); cursor: pointer;
  border-radius: calc(var(--arrondi) * 1.4); border: 1px solid color-mix(in srgb, hsl(var(--h) 70% 55%) 35%, var(--bordure));
  background: linear-gradient(145deg, color-mix(in srgb, hsl(var(--h) 75% 55%) 24%, var(--surface)), var(--surface) 75%);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.tuile-cat:hover { transform: translateY(-4px); border-color: hsl(var(--h) 70% 55%);
  box-shadow: 0 10px 24px color-mix(in srgb, hsl(var(--h) 70% 50%) 25%, transparent); }
.tuile-icone { font-size: 2.6rem; line-height: 1; margin-bottom: auto; }
.tuile-cat strong { font-size: 1.1rem; line-height: 1.2; }
.tuile-apercu { font-size: 1.05rem; letter-spacing: 0.1em; opacity: 0.9; margin-top: 0.35rem; white-space: nowrap; overflow: hidden; }
.retour-mosaique { margin-bottom: 0.5rem; }
@media (max-width: 480px) { .mosaique { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; } .tuile-cat { min-height: 140px; padding: 0.85rem; } }
@media (prefers-reduced-motion: reduce) { .tuile-cat { transition: none; } .tuile-cat:hover { transform: none; } }

/* Écran large : icône + étoile sur une ligne, bouton « Jouer » en pleine largeur dessous (plus de bouton écrasé) */
@media (min-width: 481px) {
  .grille .carte .entete-jeu { flex-wrap: wrap; }
  .grille .carte .entete-jeu .etoile { order: 1; margin-left: auto; }
  .grille .carte .entete-jeu .bouton, .grille .carte .entete-jeu > .note { order: 2; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .onglet, .etoile, .grille .carte::before { transition: none; }
  .onglet:hover:not(:disabled), .etoile:hover, .bouton:hover:not(:disabled) { transform: none; } }

/* Tournois : inscription, dotation et classement sans défilement horizontal. */
.tournois-entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem; border: 1px solid var(--bordure); border-radius: calc(var(--arrondi) * 1.4);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface)),
  color-mix(in srgb, var(--premium) 15%, var(--surface))); }
.tournois-entete h1 { margin: 0 0 0.4rem; }
.tournois-entete p:last-child { margin: 0; }
.tournois-surtitre { margin: 0 0 0.25rem; color: var(--premium); font-size: 0.8rem;
  font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.solde-tournois { flex: none; margin: 0; padding: 0.65rem 1rem; border: 1px solid var(--premium);
  border-radius: 999px; background: var(--surface); font-weight: 800; white-space: nowrap; }
.regle-tournois { margin: 1rem 0; }
.filtres-tournois { margin-bottom: 0.75rem; }
#resume-tournois { margin-bottom: 0.75rem; }
.grille-tournois { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.carte-tournoi { min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; margin: 0; }
.carte-tournoi.statut-en_cours { border-color: color-mix(in srgb, var(--accent) 60%, var(--bordure)); }
.entete-tournoi { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.entete-tournoi h2 { margin: 0; }
.entete-tournoi .badge { flex: none; }
.badge-en_cours { color: var(--succes); border-color: var(--succes); }
.description-tournoi, .jeu-tournoi, .infos-tournoi p, .mon-score { margin: 0; }
.description-tournoi { color: var(--texte-doux); }
.jeu-tournoi, .mon-score { font-weight: 700; }
.infos-tournoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem;
  padding: 0.75rem; border-radius: 10px; background: var(--fond); }
.infos-tournoi strong { display: block; color: var(--texte-doux); font-size: 0.8rem; text-transform: uppercase; }
.actions-tournoi { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: auto; }
.actions-tournoi .bouton { flex: 1 1 10rem; }
.zone-classement { border-top: 1px solid var(--bordure); padding-top: 0.75rem; }
.zone-classement h3 { margin-bottom: 0.6rem; }
.classement-tournoi { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.ligne-classement { display: grid; grid-template-columns: 2rem auto minmax(0, 1fr) auto;
  align-items: center; gap: 0.55rem; padding: 0.55rem; border-radius: 8px; background: var(--fond); }
.ligne-classement.moi { outline: 1px solid var(--accent); }
.rang-tournoi, .score-tournoi { font-variant-numeric: tabular-nums; }
.ligne-classement .avatar-mini { width: 2rem; height: 2rem; font-size: 1.25rem; }
.joueur-tournoi { min-width: 0; display: flex; flex-direction: column; }
.joueur-tournoi strong, .joueur-tournoi small { overflow-wrap: anywhere; }
.score-tournoi { white-space: nowrap; }
.vide-tournois { grid-column: 1 / -1; text-align: center; color: var(--texte-doux); }
@media (max-width: 600px) {
  .tournois-entete { align-items: flex-start; flex-direction: column; }
  .solde-tournois { align-self: stretch; text-align: center; }
  .infos-tournoi { grid-template-columns: 1fr; }
  .ligne-classement { grid-template-columns: 1.8rem auto minmax(0, 1fr); }
  .score-tournoi { grid-column: 3; font-size: 0.9rem; }
}
/* Pass de saison et défis quotidiens */
.accueil-pass { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.accueil-pass h2 { margin: 0 0 0.25rem; }
.accueil-pass .bouton { flex: none; }
.pass-entete { padding: 1.5rem; margin-bottom: 1rem; border-radius: calc(var(--arrondi) * 1.4);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, var(--surface)),
  color-mix(in srgb, var(--premium) 18%, var(--surface))); border: 1px solid var(--bordure); }
.pass-entete h1 { margin: 0 0 0.5rem; }
.pass-entete p:last-child { margin: 0; }
.pass-surtitre { margin: 0 0 0.3rem; color: var(--premium); font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; }
.ligne-progression, .entete-palier { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ligne-progression h2, .entete-palier h3 { margin: 0; }
.xp-pass { margin: 1rem 0 0.35rem; font-size: 1.6rem; font-weight: 800; }
.barre-xp { height: 0.75rem; overflow: hidden; border-radius: 999px; background: var(--fond); border: 1px solid var(--bordure); }
.barre-xp span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--premium));
  transition: width 0.25s ease; }
.liste-quetes { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.carte-quete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
.details-quete h3, .details-quete p { margin: 0 0 0.45rem; }
.details-quete progress { display: block; width: 100%; height: 0.65rem; accent-color: var(--accent); }
.actions-quete { min-width: 7.5rem; text-align: right; }
.carte-premium { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-color: color-mix(in srgb, var(--premium) 60%, var(--bordure)); }
.carte-premium h2 { margin: 0 0 0.5rem; }
.action-premium { flex: none; }
.paliers { list-style: none; padding: 0; display: grid; gap: 1rem; }
.palier.est-atteint { border-color: var(--succes); }
.voies-palier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.voie-palier { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; min-width: 0;
  padding: 0.85rem; border: 1px solid var(--bordure); border-radius: 10px; background: var(--fond); }
.voie-palier.premium { border-color: color-mix(in srgb, var(--premium) 55%, var(--bordure));
  background: color-mix(in srgb, var(--premium) 8%, var(--surface)); }
.voie-palier .bouton, .voie-palier .badge { margin-top: auto; }
.nom-voie { margin: 0; color: var(--texte-doux); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; }
.recompense-palier { margin: 0; font-weight: 700; }
@media (max-width: 600px) {
  .carte-quete { grid-template-columns: 1fr; }
  .actions-quete { min-width: 0; text-align: left; }
  .actions-quete .bouton { width: 100%; }
  .voies-palier { grid-template-columns: 1fr; }
  .action-premium, .action-premium .bouton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .barre-xp span { transition: none; } }

/* Jeux d'une catégorie : cartes améliorées + mode tuiles (icône, titre, joystick / étoile / couronne) */
.bascule-vue { flex-wrap: wrap; }
.categorie h3 .cat-nb { margin-left: auto; font-weight: 500; color: var(--texte-doux); font-size: 0.85rem; }
.carte-jeu .titre-jeu { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; }
.carte-jeu .titre-jeu h4 { overflow-wrap: anywhere; }
.carte-jeu .note { margin: 0; flex: 1; }
.actions-jeu { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: auto; width: 100%; }
/* Par défaut (PC et mode tuiles) : trois boutons ronds de 44 px (étoile, joystick, couronne). */
.actions-jeu .btn-jouer { flex: none; width: 44px; height: 44px; min-height: 44px; margin-top: 0; padding: 0;
  border-radius: 50%; font-size: 1.3rem; }
.btn-jouer-texte { display: none; }
/* Mobile en mode « cartes » : le bouton dédié affiche « 🕹️ Jouer » ; toute la carte reste cliquable. */
@media (max-width: 759px), (hover: none), (pointer: coarse) {
  .carte-jeu .actions-jeu .btn-jouer { flex: 1 1 auto; width: auto; max-width: 12rem; padding: 0 0.9rem;
    border-radius: 999px; gap: 0.4rem; font-size: 0.95rem; white-space: nowrap; }
  .carte-jeu .btn-jouer-texte { display: inline; }
}
@media (max-width: 540px) { .grille:not(.grille-tuiles) { grid-template-columns: 1fr; } }
.carte-jeu.jeu-cliquable { cursor: pointer; }
.grille .carte .actions-jeu .bouton { margin-top: 0; }
.grille-tuiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; }
.tuile-jeu { align-items: center; text-align: center; padding: 1rem 0.8rem; }
.tuile-jeu .icone-jeu { width: 4rem; height: 4rem; font-size: 2.3rem; }
.tuile-jeu h4 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.tuile-jeu .actions-jeu { justify-content: center; gap: 0.4rem; }
@media (max-width: 480px) {
  .grille-tuiles { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .tuile-jeu { padding: 0.8rem 0.5rem; }
  .tuile-jeu .actions-jeu { gap: 0.3rem; }
}

/* Règles d'un jeu en mode tuiles : bulle au survol + clic jeu (PC), texte déplié au toucher (mobile) */
.tuile-jeu { cursor: default; }
.tuile-jeu .regles-bulle { margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--texte); text-align: left; }
@media (hover: hover) and (pointer: fine) {
  .tuile-jeu.jeu-cliquable { cursor: pointer; }
  .grille .tuile-jeu { overflow: visible; }
  .tuile-jeu::before { border-radius: var(--arrondi) var(--arrondi) 0 0; }
  .tuile-jeu .regles-bulle { display: none; position: absolute; z-index: 20; left: 50%; top: calc(100% + 6px);
    width: max(100%, 230px); transform: translateX(-50%); padding: 0.7rem 0.85rem; border-radius: var(--arrondi);
    background: var(--surface); border: 1px solid var(--accent); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
  .tuile-jeu:hover, .tuile-jeu:focus-within { z-index: 21; }
  .tuile-jeu:hover .regles-bulle, .tuile-jeu:focus-within .regles-bulle { display: block; }
}
@media (hover: none), (pointer: coarse) {
  .tuile-jeu { cursor: pointer; }
  .tuile-jeu .regles-bulle { display: none; width: 100%; padding-top: 0.5rem; border-top: 1px dashed var(--bordure); }
  .tuile-jeu.regles-ouvertes .regles-bulle { display: block; }
}

/* Connexion Google (compte.html) : bouton blanc, comme le demande la charte Google. */
.bloc-google { display: grid; gap: 0.5rem; }
.bloc-google .note { margin: 0; }
.bouton.bouton-google { background: #fff; color: #1f1f1f; border-color: #747775; box-shadow: none; }
.bouton.bouton-google:hover:not(:disabled) { background: #f2f2f2; box-shadow: none; }

/* Lien vers la vitrine publique d'un joueur (classements, accueil, tournois, troupes, forum). */
.lien-joueur { color: inherit; text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent);
  transition: color 0.12s ease, border-color 0.12s ease; }
.lien-joueur:hover, .lien-joueur:focus-visible { color: var(--accent); border-bottom-color: var(--accent); border-bottom-style: solid; }

/* Menu de choix d'un badge, avec le dessin de chaque badge. */
.selecteur-badge { position: relative; }
.selecteur-bouton { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 44px; padding: 0.3rem 0.75rem;
  font: inherit; color: inherit; text-align: left; cursor: pointer; background: var(--carte, transparent);
  border: 1px solid currentColor; border-radius: 10px; }
.selecteur-bouton:disabled { opacity: 0.6; cursor: not-allowed; }
.selecteur-fleche { margin-left: auto; opacity: 0.7; }
.selecteur-liste { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 0.3rem;
  list-style: none; max-height: 20rem; overflow-y: auto; background: var(--surface); color: var(--texte);
  border: 1px solid var(--bordure); border-radius: 12px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.25); }
.selecteur-option { display: flex; align-items: center; gap: 0.7rem; min-height: 48px; padding: 0.3rem 0.5rem; border-radius: 8px; cursor: pointer; }
.selecteur-option.actif, .selecteur-option:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.selecteur-option[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.selecteur-option.bloque { opacity: 0.45; cursor: not-allowed; }
.selecteur-option em { margin-left: auto; font-size: 0.8rem; font-style: normal; color: var(--texte-doux); }
.selecteur-nom { display: grid; line-height: 1.2; }
.selecteur-nom small { color: var(--texte-doux); font-size: 0.75rem; }
.selecteur-vide { display: inline-flex; width: 1.8rem; justify-content: center; opacity: 0.6; }