/*
 * Jeux & Goûts — Salle de jeux, Nkolfoulou (Yaoundé)
 * Surcouche de personnalisation du template.
 * Charger APRÈS main.css.
 */

:root {
  --jg-accent: #4DA6FF;
  --jg-accent-soft: #8FC7FF;
  --jg-ink: #0B0E13;
  --jg-panel: #14171D;
  --jg-line: rgba(255, 255, 255, 0.09);
}

::-moz-selection { background: var(--jg-accent); color: var(--jg-ink); }
::selection { background: var(--jg-accent); color: var(--jg-ink); }

/* ---------- Logo officiel ----------
   Le logo fourni est un bloc vertical (embleme au-dessus du nom) : on utilise
   un verrouillage horizontal recompose, ratio 3,5:1, lisible en barre de nav. */
.header-main .logo .header-logo img { width: 252px; height: auto; }
@media (max-width: 1699px) { .header-2 .header-main .logo .header-logo img { width: 226px; } }
@media (max-width: 1399px) { .header-2 .header-main .logo .header-logo img { width: 200px; } }
@media (max-width: 575px)  { .header-main .logo .header-logo img { width: 178px; } }
.gt-footer-section .gt-footer-logo img { width: 196px; max-width: 100%; height: auto; }
.offcanvas__wrapper .offcanvas__content .offcanvas__logo img { width: 172px; height: auto; }
@media (max-width: 1399px) { .offcanvas__wrapper .offcanvas__content .offcanvas__logo img { width: 148px; } }

/* ---------- Bandeau d'infos pratiques ---------- */
.jg-topbar {
  background: #0F1319;
  border-bottom: 1px solid var(--jg-line);
  color: #C7C9CE;
  font-size: 14px;
}
.jg-topbar .jg-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 0;
  flex-wrap: wrap;
}
.jg-topbar ul { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.jg-topbar li { display: flex; align-items: center; gap: 9px; }
.jg-topbar i { color: var(--jg-accent); font-size: 15px; }
.jg-topbar a { color: #C7C9CE; transition: color .3s; }
.jg-topbar a:hover { color: var(--jg-accent); }
.jg-topbar .jg-topbar-social a { margin-left: 14px; font-size: 14px; }
@media (max-width: 991px) { .jg-topbar { display: none; } }

/* ---------- Marquee texte ---------- */
.jg-marquee { border-top: 1px solid var(--jg-line); border-bottom: 1px solid var(--jg-line); padding: 26px 0; background: #0E1117; }
.jg-marquee .marquee-wrapper.text-slider { height: 54px; }
.jg-marquee .marquee-inner { align-items: center; gap: 34px; }
.jg-marquee .marqee-list { gap: 34px; align-items: center; height: 54px; }
.jg-marquee .marquee-item { display: flex; align-items: center; height: 54px; }
.jg-marquee .jg-marquee-text {
  font-family: "Days One", sans-serif;
  font-size: 40px;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.jg-marquee .jg-marquee-text.outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
}
.jg-marquee .jg-dot { color: var(--jg-accent); font-size: 22px; line-height: 1; }
@media (max-width: 767px) { .jg-marquee .jg-marquee-text { font-size: 26px; } .jg-marquee { padding: 18px 0; } }

/* ---------- Cartes activité ---------- */
.jg-price-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  background: var(--jg-accent);
  color: var(--jg-ink);
  font-weight: 700;
  font-size: 14px;
  padding: 7px 16px;
  border-radius: 100px;
  letter-spacing: .2px;
}
.gt-gaming-image { position: relative; }

.jg-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1199px) { .jg-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .jg-feature-grid { grid-template-columns: 1fr; } }
.jg-feature-card {
  background: var(--jg-panel);
  border: 1px solid var(--jg-line);
  border-radius: 20px;
  padding: 34px 28px;
  transition: all .4s ease;
  position: relative;
  overflow: hidden;
}
.jg-feature-card:hover { border-color: rgba(77, 166, 255, .5); transform: translateY(-6px); }
.jg-feature-card .jg-icon {
  width: 60px; height: 60px; border-radius: 16px;
  display: grid; place-items: center;
  background: rgba(77, 166, 255, .12);
  color: var(--jg-accent);
  font-size: 26px;
  margin-bottom: 22px;
  transition: all .4s ease;
}
.jg-feature-card:hover .jg-icon { background: var(--jg-accent); color: var(--jg-ink); }
.jg-feature-card h4 { color: #fff; font-size: 21px; margin-bottom: 12px; }
.jg-feature-card p { color: #ABABAB; margin-bottom: 0; font-size: 15px; }

/* ---------- Grille horaires ---------- */
.jg-hours { list-style: none; padding: 0; margin: 0; }
.jg-hours li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--jg-line);
  color: #ABABAB;
}
.jg-hours li:last-child { border-bottom: 0; }
.jg-hours li span:last-child { color: #fff; font-weight: 600; }
.jg-hours li.is-now span:last-child { color: var(--jg-accent); }

/* ---------- Bouton WhatsApp flottant ---------- */
.jg-whatsapp {
  position: fixed;
  left: 24px;
  bottom: 28px;
  z-index: 99;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .35);
  transition: transform .3s ease;
}
.jg-whatsapp:hover { color: #fff; transform: scale(1.08); }
@media (max-width: 575px) { .jg-whatsapp { left: 16px; bottom: 20px; width: 48px; height: 48px; font-size: 22px; } }

/* ---------- Divers ---------- */
.jg-note { color: #7E838C; font-size: 14px; }
.jg-eyebrow-line { display: inline-block; width: 42px; height: 2px; background: var(--jg-accent); vertical-align: middle; margin-right: 12px; }
.gt-newsletter-wrapper h4 span { color: var(--jg-accent); }
.jg-map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; filter: grayscale(1) invert(0.92) contrast(0.85); }

/* ---------- Footer : bloc contact ---------- */
.jg-footer-contact { list-style: none; padding: 0; margin: 0; }
.jg-footer-contact li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.jg-footer-contact li:last-child { margin-bottom: 0; }
.jg-footer-contact .ic {
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(77, 166, 255, .12);
  color: var(--jg-accent);
  font-size: 15px;
}
.jg-footer-contact .tx { color: #ABABAB; font-size: 15px; line-height: 1.55; }
.jg-footer-contact .tx strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }
.jg-footer-contact .tx a { color: #ABABAB; transition: color .3s; }
.jg-footer-contact .tx a:hover { color: var(--jg-accent); }

/* ---------- CTA ---------- */
.cta-wrapper .contact-info h3 { text-transform: uppercase; }

/* ---------- Héros ---------- */
.hero-2 .hero-content h1 { font-size: 132px; letter-spacing: -1px; }
@media (max-width: 1600px) { .hero-2 .hero-content h1 { font-size: 112px; } }
@media (max-width: 1399px) { .hero-2 .hero-content h1 { font-size: 96px; } }
@media (max-width: 991px)  { .hero-2 .hero-content h1 { font-size: 64px; } }
@media (max-width: 575px)  { .hero-2 .hero-content h1 { font-size: 52px; } }
.hero-2 .hero-content .hero-sub-content { margin: 32px auto 0; max-width: 430px; }
.hero-2 .hero-content { position: relative; z-index: 3; }

/* ---------- Blasons de tournoi ---------- */
.gt-match-logo .gt-match-thumb { max-width: 260px; width: 100%; height: auto; }

/* ---------- Typographie FR ----------
   Le template mettait une capitale à chaque mot (text-transform: capitalize),
   ce qui est fautif en français : neutralisé dans main.css.
   Les grands titres de section restent en capitales, comme le hero.        */
.section-title h2,
.section-title-2 h2,
.section-title-area h2,
.section-title-3 h2,
.gt-breadcrumb-wrapper .gt-page-heading h1 { text-transform: uppercase; }

/* ---------- Forme decorative equipe : plus discrete ---------- */
.team-section-2 .team-shape { opacity: 0.14; }
.news-section-2 .game-controll-shape { opacity: 0.5; }

/* ---------- Menu : 7 entrées + bouton, on resserre sur écrans moyens ---------- */
@media (min-width: 1200px) and (max-width: 1699px) {
  .header-main .main-menu ul li { margin-inline-end: 30px; }
  .header-main .main-menu ul li a { font-size: 15px; }
  .header-2 .header-main .logo .header-logo img { width: 150px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-main .main-menu ul li { margin-inline-end: 20px; }
  .header-main .main-menu ul li a { font-size: 14px; }
  .header-2 .header-main .logo .header-logo img { width: 136px; }
  .header-right-icon .header-button .theme-btn { padding: 0 20px; }
}

/* ---------- Fil d'ariane ---------- */
.gt-breadcrumb-wrapper { background-color: #0B0E13; }

/* Le template affichait un casque VR décoratif : hors sujet ici. */
.about-section-2 .about-shape-1 { display: none; }

/* ---------- Fiches activité ---------- */
.jg-activity { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 90px; }
.jg-activity:last-child { margin-bottom: 0; }
.jg-activity.reverse .jg-activity-media { order: 2; }
@media (max-width: 991px) {
  .jg-activity { grid-template-columns: 1fr; gap: 34px; margin-bottom: 60px; }
  .jg-activity.reverse .jg-activity-media { order: 0; }
}
.jg-activity-media img { width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--jg-line); display: block; }
.jg-activity-body h3 { color: #fff; font-size: 36px; margin-bottom: 16px; }
@media (max-width: 575px) { .jg-activity-body h3 { font-size: 28px; } }
.jg-activity-body > p { color: #ABABAB; }
.jg-activity-facts { list-style: none; padding: 0; margin: 24px 0 0; }
.jg-activity-facts li { display: flex; gap: 12px; color: #ABABAB; padding: 8px 0; align-items: flex-start; }
.jg-activity-facts i { color: var(--jg-accent); margin-top: 5px; font-size: 13px; }
.jg-tarif-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; padding: 0; list-style: none; }
.jg-tarif-chips li {
  border: 1px solid var(--jg-line);
  background: var(--jg-panel);
  border-radius: 100px;
  padding: 9px 20px;
  color: #C7C9CE;
  font-size: 15px;
}
.jg-tarif-chips li b { color: var(--jg-accent); font-weight: 700; }
.jg-eyebrow { display: block; color: var(--jg-accent); font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; font-size: 14px; margin-bottom: 10px; }

/* ---------- Tableaux de tarifs ---------- */
.jg-price-card {
  background: var(--jg-panel);
  border: 1px solid var(--jg-line);
  border-radius: 22px;
  padding: 34px 30px;
  height: 100%;
  transition: border-color .4s ease;
}
.jg-price-card:hover { border-color: rgba(77, 166, 255, .45); }
.jg-price-card .head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.jg-price-card .head .ic {
  width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center;
  background: rgba(77, 166, 255, .12); color: var(--jg-accent); font-size: 22px;
}
.jg-price-card h4 { color: #fff; margin: 0; font-size: 21px; }
.jg-price-card ul { list-style: none; margin: 0; padding: 0; }
.jg-price-card li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 13px 0; border-bottom: 1px dashed var(--jg-line); color: #ABABAB; font-size: 15px;
}
.jg-price-card li:last-child { border-bottom: 0; padding-bottom: 0; }
.jg-price-card li b { color: var(--jg-accent); font-weight: 700; white-space: nowrap; }
.jg-price-note {
  margin-top: 40px;
  background: var(--jg-panel);
  border: 1px solid var(--jg-line);
  border-radius: 20px;
  padding: 28px 32px;
  color: #ABABAB;
}
.jg-price-note h5 { color: #fff; margin-bottom: 12px; font-size: 18px; }
.jg-price-note ul { margin: 0; padding-left: 20px; }
.jg-price-note li { padding: 5px 0; }

/* ---------- Contact ---------- */
.gt-comment-form-wrap .form-clt select {
  width: 100%;
  height: 56px;
  background: var(--jg-panel);
  border: 1px solid var(--jg-line);
  border-radius: 10px;
  color: #fff;
  padding: 0 18px;
  outline: none;
}
.gt-comment-form-wrap .form-clt select option { background: #14171D; color: #fff; }
.gt-comment-form-wrap .form-clt input[type="date"],
.gt-comment-form-wrap .form-clt input[type="number"] { color-scheme: dark; }
.jg-map .googpemap iframe { width: 100%; min-height: 420px; border: 0; border-radius: 20px; }
.jg-price-note ul { list-style: disc; }
.jg-price-note ul li { list-style: disc; }

/* ---------- Héros : visuel de droite ----------
   Le template ne bornait cette image qu'en dessous de 1400 px ; au-delà elle
   s'affichait à sa taille native (1600 px) et recouvrait tout le héros.       */
.hero-2 .hero-image { max-width: 540px; }
.hero-2 .hero-image img { width: 100%; height: auto; display: block; }
@media (min-width: 1800px) { .hero-2 .hero-image { max-width: 640px; } }
@media (max-width: 1599px) { .hero-2 .hero-image { max-width: 470px; } }
@media (max-width: 1399px) { .hero-2 .hero-image { max-width: 400px; } }
@media (max-width: 1199px) { .hero-2 .hero-image { max-width: 460px; } }
@media (max-width: 575px)  { .hero-2 .hero-image { max-width: 300px; } }