/* ═══════════════════════════════════════════════════════════════
   KELLY GAMING — SOCLE DE STYLE PARTAGÉ
   Disposition inspirée des applications de jeu (cartes arrondies,
   puces de catégories, barre de navigation en bas), gardée aux
   couleurs et polices de la marque: rouge, violet, Orbitron/Rajdhani.

   Ce fichier est volontairement autonome: il ne dépend d'aucun CSS
   déjà présent dans les pages, et tous ses noms de classe commencent
   par "kg-" pour ne rien écraser de l'existant.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --kg-red: #ff2244;
  --kg-purple: #7c3aed;
  --kg-purple-light: #a855f7;
  --kg-amber: #f5a623;
  --kg-bg: #07070d;
  --kg-surface: #12121c;
  --kg-surface-2: #1a1a26;
  --kg-line: rgba(255, 255, 255, 0.08);
  --kg-text: #e8e8f0;
  --kg-muted: #8a8a9b;
  --kg-radius: 22px;
  --kg-radius-sm: 16px;
  --kg-head: 'Orbitron', sans-serif;
  --kg-body: 'Rajdhani', sans-serif;
  /* Hauteur de la barre du bas + encoche des téléphones récents.
     Sert à réserver l'espace en bas des pages pour que la barre ne
     recouvre jamais la fin du contenu. */
  --kg-nav-h: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* ─── BARRE DU HAUT : avatar · points · cloche ─────────────────── */
.kg-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--kg-bg);
}

.kg-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--kg-purple);
  background: var(--kg-surface-2);
  flex-shrink: 0;
}

.kg-topbar-spacer { flex: 1; }

/* La pastille de points reprend l'ambre déjà utilisé sur le site. */
.kg-points {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--kg-amber), #ffcf5c);
  color: #241a04;
  font-family: var(--kg-head);
  font-weight: 900;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.28);
}

.kg-iconbtn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--kg-line);
  background: var(--kg-surface-2);
  color: var(--kg-text);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
}

.kg-iconbtn:active { transform: scale(0.94); }

.kg-iconbtn .kg-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kg-red);
  border: 2px solid var(--kg-bg);
}

/* ─── RACCOURCIS (Roue · Top Clients · FAQ) ────────────────────
   Ces liens vivent dans la barre du haut du site sur grand écran.
   Sur téléphone cette barre est masquée (voir plus bas), donc ils
   sont repris ici sous une forme qui tient dans la largeur. */
.kg-quick {
  display: none;
  gap: 8px;
  padding: 0 16px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.kg-quick::-webkit-scrollbar { display: none; }

.kg-quick a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--kg-surface);
  border: 1px solid var(--kg-line);
  color: var(--kg-text);
  font-family: var(--kg-body);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.kg-quick a:active { transform: scale(0.96); }

/* La cloche de notifications est déplacée dans cette barre par le
   script de l'accueil. On lui redonne l'allure des autres boutons
   ronds, sans toucher à son menu déroulant qui reste géré par la page. */
.kg-topbar .bell-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--kg-line);
  background: var(--kg-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── UN SEUL EN-TÊTE, À TOUTES LES TAILLES ────────────────────
   La barre du haut d'origine faisait doublon avec cet en-tête: deux
   rangées superposées, et deux boutons "Connexion" sur ordinateur.
   Elle est donc masquée partout, et tout ce qu'elle contenait est
   repris ici (liens de menu, cloche, portefeuille, connexion). */

/* :not(.kg-bottomnav) est indispensable — la barre du bas est elle
   aussi un <nav> enfant direct de <body>, et se masquait avec l'autre. */
body.kg-app > nav:not(.kg-bottomnav) { display: none; }
body.kg-app .kg-app-head { padding-top: 0 !important; }
body.kg-app .kg-quick { display: flex; }

@media (max-width: 899px) {
  /* Le hero réservait une hauteur d'écran entière parce qu'il était le
     premier bloc de la page. Maintenant qu'il vient après l'en-tête, cette
     réserve se voyait comme un grand vide juste sous les cartes. */
  body.kg-app .hero {
    min-height: auto;
    padding-top: 24px;
  }
}

/* Nom du site, à côté du logo. Masqué sur les petits écrans, où la
   place doit aller à la pastille de points et aux boutons. */
.kg-brand {
  font-family: var(--kg-head);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 1.5px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 560px) { .kg-brand { display: none; } }

/* Liens de menu du site, déplacés dans cette barre par le script de
   l'accueil. Ils ne réapparaissent qu'à partir de 900px: entre 769 et
   899px, leur propre CSS les réaffichait alors que la rangée n'était pas
   encore assez large, et la page débordait sur le côté. */
.kg-topbar .nav-links { margin: 0 0 0 22px; }

@media (max-width: 899px) {
  .kg-topbar .nav-links { display: none; }
}

/* ─── RECHERCHE ────────────────────────────────────────────────── */
.kg-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 16px 16px;
  padding: 0 18px;
  height: 52px;
  border-radius: 999px;
  background: var(--kg-surface);
  border: 1px solid var(--kg-line);
}

.kg-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--kg-text);
  font-family: var(--kg-body);
  font-size: 1rem;
  font-weight: 500;
  min-width: 0;
}

.kg-search input::placeholder { color: var(--kg-muted); }

/* ─── PUCES DE CATÉGORIES ──────────────────────────────────────── */
.kg-chips {
  display: flex;
  gap: 10px;
  padding: 0 16px 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.kg-chips::-webkit-scrollbar { display: none; }

.kg-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--kg-surface);
  border: 1px solid var(--kg-line);
  color: var(--kg-text);
  font-family: var(--kg-body);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s, background .2s, transform .15s;
}

.kg-chip:active { transform: scale(0.96); }

.kg-chip.on {
  background: linear-gradient(135deg, var(--kg-red), var(--kg-purple));
  border-color: transparent;
  color: #fff;
}

/* ─── EN-TÊTE DE SECTION ───────────────────────────────────────── */
.kg-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 16px 12px;
}

.kg-section-head h2 {
  font-family: var(--kg-head);
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--kg-text);
  margin: 0;
}

.kg-section-head a {
  color: var(--kg-purple-light);
  font-family: var(--kg-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

/* ─── RAIL HORIZONTAL (jeux populaires) ────────────────────────── */
.kg-rail {
  display: flex;
  gap: 14px;
  padding: 0 16px 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Sans cette ligne, l'accrochage aligne la première carte sur le bord
     du conteneur en ignorant sa marge intérieure: le rail se décalait
     tout seul de 16px et les cartes ne tombaient pas dans l'axe des
     puces au-dessus. */
  scroll-padding-left: 16px;
  scrollbar-width: none;
}

.kg-rail::-webkit-scrollbar { display: none; }

.kg-rail > * { scroll-snap-align: start; }

/* ─── CARTE DE JEU ─────────────────────────────────────────────── */
.kg-card {
  position: relative;
  display: block;
  width: 168px;
  flex-shrink: 0;
  border-radius: var(--kg-radius);
  overflow: hidden;
  background: var(--kg-surface);
  border: 1px solid var(--kg-line);
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s, border-color .2s;
}

.kg-card:active { transform: scale(0.97); }
.kg-card:hover { border-color: rgba(255, 34, 68, 0.45); }

.kg-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

/* Dégradé pour que le texte reste lisible sur n'importe quelle image */
.kg-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 13px;
  background: linear-gradient(to top, rgba(5, 5, 10, 0.96) 30%, transparent);
}

.kg-card-name {
  font-family: var(--kg-head);
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

/* Une seule ligne, coupée par des points de suspension: sur une carte
   étroite, "Diamants • Abonnements" passait sur deux lignes et
   déséquilibrait toute la rangée. */
.kg-card-sub {
  font-family: var(--kg-body);
  font-size: 0.8rem;
  color: var(--kg-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kg-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(7, 7, 13, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid var(--kg-line);
  font-family: var(--kg-head);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #4ade80;
}

.kg-badge.neuf { color: var(--kg-amber); }

/* ─── GRILLE (2 colonnes sur téléphone) ────────────────────────── */
.kg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 14px;
  padding: 0 16px 20px;
}

.kg-grid .kg-card { width: auto; }

/* ─── BARRE DE NAVIGATION EN BAS ───────────────────────────────── */
/* Les pages du site stylent l'élément <nav> lui-même en barre du HAUT
   (position:fixed; top:0; height:70px; padding:0 5%). Comme cette
   barre est aussi un <nav>, il faut annuler explicitement ces valeurs,
   sinon elle se colle en haut par-dessus le contenu. */
.kg-bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  z-index: 99998;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: var(--kg-nav-h);
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  margin: 0;
  background: rgba(12, 12, 20, 0.94);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--kg-line);
  border-bottom: none;
}

.kg-navitem {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 0;
  color: var(--kg-muted);
  text-decoration: none;
  font-family: var(--kg-body);
  font-size: 0.68rem;
  font-weight: 600;
  transition: color .2s;
}

.kg-navitem .kg-navicon { font-size: 1.3rem; line-height: 1; }

.kg-navitem.on { color: var(--kg-red); }

.kg-navitem .kg-navcount {
  position: absolute;
  transform: translate(16px, -4px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--kg-red);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La barre est faite pour le téléphone: sur grand écran, le menu du
   haut suffit et la garder masquerait du contenu pour rien. */
@media (min-width: 900px) {
  .kg-bottomnav { display: none; }
  body.kg-has-nav { padding-bottom: 0 !important; }
}

/* ─── GRAND ÉCRAN ──────────────────────────────────────────────
   L'ancienne barre était fixe en haut; pour ne pas perdre cet accès
   permanent, la barre du haut devient collante. Son fond occupe toute
   la largeur pendant que son contenu reste centré, sinon on verrait un
   bandeau flottant au milieu de la page. */
@media (min-width: 900px) {
  .kg-topbar {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(7, 7, 13, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--kg-line);
    padding-left: max(16px, calc((100% - 1200px) / 2));
    padding-right: max(16px, calc((100% - 1200px) / 2));
  }

  /* Deux largeurs différentes pour un seul alignement visuel: les
     rangées ci-dessous ont 16px de marge intérieure, la recherche n'en a
     pas. 1232 = 1200 + 2×16, si bien que leur contenu démarre exactement
     au même endroit que le bord de la recherche et de la barre du haut. */
  .kg-quick,
  .kg-chips,
  .kg-section-head,
  .kg-rail,
  .kg-grid {
    max-width: 1232px;
    margin-left: auto;
    margin-right: auto;
  }

  .kg-search {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  .kg-quick { padding-top: 16px; }
}