/* ════════════════════════════════════════════════════════════
   NAGA GYM (Laos)
   Page presentant la salle. Pour l'instant : hero plein ecran
   (photo + voile) avec titre, sous-titre et CTA.
   Palette Laos : or #B38A47 · rouge #CC2200 · bleu #1a4fa0
   ════════════════════════════════════════════════════════════ */

.ng-hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  padding: 0 clamp(24px, 6vw, 96px);
}
.ng-hero__bg {
  position: absolute;
  inset: 0;
  background: #0a0a0a url('../../assets/images/naga-gym/hero.webp') center / cover no-repeat;
}
.ng-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(10,10,10,0.20) 0%,
    rgba(10,10,10,0.30) 42%,
    rgba(10,10,10,0.82) 74%,
    rgba(10,10,10,0.92) 100%);
}
.ng-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 460px;
}

/* Mobile : la photo n'a plus assez de largeur pour dedier une zone
   sombre a droite, on repasse donc en voile uniforme + texte centre. */
@media (max-width: 768px) {
  .ng-hero { justify-content: center; text-align: center; }
  .ng-hero__inner { max-width: 460px; }
  .ng-hero__overlay { background: rgba(10, 10, 10, 0.66); }
}
.ng-hero__title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  color: var(--gold);
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin-bottom: 1.2rem;
}
.ng-hero__subtitle {
  font-family: 'Cinzel', serif;
  font-style: italic;
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  color: #CFCFCF;
  letter-spacing: 0.02em;
  margin-bottom: 2.4rem;
}
/* Petits boutons sociaux, sur une meme ligne sous le CTA */
.ng-hero__socials {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  justify-content: flex-end; /* aligne a droite comme le hero desktop */
}
.ng-hero__social {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(179,138,71,0.45);
  border-radius: 2px;
  background: rgba(10,10,10,0.4);
  color: #E8E8E8;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color .2s, border-color .2s, background .2s;
}
.ng-hero__social svg { width: 15px; height: 15px; flex-shrink: 0; }
.ng-hero__social:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(10,10,10,0.6);
}

/* ════════════════════ CHAPITRES (texte seul) ════════════════════
   Meme systeme que les cours prives (.pc-chapter--center) mais sans
   photo : eyebrow, grand numero filigrane, titre, separateur, texte.
   ═══════════════════════════════════════════════════════════════ */
.ng-chapter {
  position: relative;
  overflow: hidden;
  max-width: 1280px;
  margin: 0 auto;
  padding: 6rem 0;
  text-align: center;
}
.ng-chapter__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(190px, 27vw, 360px);
  line-height: 0.8;
  color: rgba(204, 34, 0, 0.14); /* un peu plus visible */
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* En-tete centre : eyebrow, titre, ligne rouge, paragraphe d'intro */
.ng-chapter__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
/* Paragraphe d'intro : centre, sous la ligne rouge */
.ng-chapter__intro {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.9;
  color: #D8D8D8;
  max-width: 640px;
}
/* Corps : aligne a gauche dans une colonne de lecture ~760px */
.ng-chapter__body {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 2.4rem auto 0;
  text-align: left;
}
.ng-chapter__eyebrow {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
}
/* Titre h2 Cinzel, toujours sur une seule ligne */
.ng-chapter__title {
  font-family: 'Cinzel', serif;
  /* 3.5vw suit la largeur de l'ecran pour que meme le titre le plus long
     tienne toujours sur une seule ligne (jusqu'aux petits mobiles). */
  font-size: clamp(12px, 3.5vw, 46px);
  text-transform: uppercase;
  color: #FFFFFF;
  margin-top: 12px;
  white-space: nowrap;
}
/* Ligne deco rouge : sa longueur = 50% du titre (posee par le JS).
   Valeur de repli avant execution du JS. */
.ng-chapter__divider {
  display: block;
  position: relative;
  width: 180px;
  height: 1px;
  background: var(--red);
  margin: 26px auto;
}
.ng-chapter__divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--red);
  transform: translate(-50%, -50%) rotate(45deg);
}
.ng-chapter__text {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.9;
  color: #C9C9C9;
  margin-bottom: 1.4rem;
}
.ng-chapter__text:last-child { margin-bottom: 0; }

/* ─── VARIANTES DEUX COLONNES (texte d'un cote, photo de l'autre) ─── */
.ng-chapter--media-right,
.ng-chapter--media-left {
  padding: 6rem 0;
}
.ng-chapter__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Colonne texte : aligne du bon cote selon la variante */
.ng-chapter__col-text {
  display: flex;
  flex-direction: column;
}
.ng-chapter--media-right .ng-chapter__col-text { text-align: left;  align-items: flex-start; }
.ng-chapter--media-left  .ng-chapter__col-text { text-align: right; align-items: flex-end; }

/* Titre des variantes : un cran plus petit pour tenir dans la colonne */
.ng-chapter--media-right .ng-chapter__title,
.ng-chapter--media-left  .ng-chapter__title {
  font-size: clamp(22px, 2.7vw, 38px);
}
/* Ligne rouge alignee sur le bord du texte (largeur posee par le JS) */
.ng-chapter--media-right .ng-chapter__divider { margin: 22px 0; }
.ng-chapter--media-left  .ng-chapter__divider { margin: 22px 0 22px auto; }

/* Filigrane place du cote du texte, pas sous la photo */
.ng-chapter--media-right .ng-chapter__watermark { left: 28%; }
.ng-chapter--media-left  .ng-chapter__watermark { left: 72%; }
/* Chapitre 02 : le grand numero passe en bleu, un peu plus visible */
.ng-chapter--media-left .ng-chapter__watermark { color: rgba(26, 79, 160, 0.20); }

/* Cadre photo (chapitre 01) : liseret dore facon cadre */
.ng-chapter__frame {
  position: relative;
  padding: 8px;
  border: 1px solid rgba(179,138,71,0.5);
  background: #0d0d0d;
}
.ng-chapter__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pentagone photo (chapitre 02) : liseret dore + image clippee */
.ng-chapter__penta {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 3px;
  background: linear-gradient(140deg, var(--gold), rgba(179,138,71,0.35));
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  filter: drop-shadow(0 0 16px rgba(179,138,71,0.18));
}
.ng-chapter__penta-frame {
  position: absolute;
  inset: 3px;
  overflow: hidden;
  background: #0d0d0d;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.ng-chapter__penta-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ════════════════════ CARROUSEL (octogone elargi) ════════════════
   Octogone au format paysage. Fond dore = fin liseret, image clippee
   a l'interieur. Defilement gere par js/pages/naga-gym.js (1s/photo).
   ═══════════════════════════════════════════════════════════════ */
.ng-carousel {
  background: var(--bg);
  padding: 2rem 24px 5rem;
  display: flex;
  justify-content: center;
}
/* Deux colonnes : octogone (largeur reduite) + annonce federation */
.ng-carousel__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 4vw, 64px);
  max-width: 1160px;
  width: 100%;
}
.ng-carousel__oct {
  position: relative;
  flex: 0 1 520px;
  width: 520px;
  aspect-ratio: 3 / 2;
  padding: 3px;
  background: linear-gradient(140deg, var(--gold), rgba(179,138,71,0.35));
  clip-path: polygon(19% 0%, 81% 0%, 100% 28%, 100% 72%, 81% 100%, 19% 100%, 0% 72%, 0% 28%);
  filter: drop-shadow(0 0 16px rgba(179,138,71,0.18));
}
.ng-carousel__frame {
  position: absolute;
  inset: 3px;
  overflow: hidden;
  background: #0d0d0d;
  clip-path: polygon(19% 0%, 81% 0%, 100% 28%, 100% 72%, 81% 100%, 19% 100%, 0% 72%, 0% 28%);
}
.ng-carousel__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ng-carousel__frame img.is-active { opacity: 1; }

/* Annonce federation, a cote du carrousel */
.ng-carousel__announce {
  flex: 1 1 340px;
  max-width: 440px;
  text-align: left;
}
.ng-carousel__eyebrow {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.ng-carousel__text {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.85;
  color: #E2E2E2;
}
.ng-carousel__fed {
  font-family: 'Cinzel', serif;
  color: var(--gold);
  letter-spacing: 0.02em;
}

/* ════════════════════ BANDE DECORATIVE ════════════════════
   Sous le hero. PC : deux groupes statiques + pastille au milieu.
   Mobile : bandeau defilant (marquee) + pastille centree par-dessus.
   ══════════════════════════════════════════════════════════ */
.ng-band {
  position: relative;
  background: #080808;
  border-top: 1px solid rgba(179,138,71,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(200px, 26vw, 300px); /* espace central reserve a la pastille */
  padding: 0 24px;
}

/* Groupes statiques (PC) */
.ng-band__static {
  display: flex;
  align-items: center;
  gap: 26px;
}
.ng-band__item {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9a9a9a;
  white-space: nowrap;
}
.ng-band__sep {
  width: 1px;
  height: 16px;
  flex: 0 0 auto;
  background: linear-gradient(to bottom,
    rgba(179,138,71,0) 0%,
    rgba(179,138,71,0.30) 50%,
    rgba(179,138,71,0) 100%);
}

/* Pastille de localisation, centree dans la bande */
.ng-band__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: #0f0f0f;
  border: 1px solid rgba(179,138,71,0.40);
  border-radius: 999px;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.25s, color 0.25s;
}
.ng-band__pin:hover {
  color: var(--blue);
  border-color: var(--blue);
}
.ng-band__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: currentColor;
}

/* Marquee (mobile uniquement) : masque par defaut */
.ng-band__marquee { display: none; }

/* ════════════════════ TARIFS ════════════════════ */
.ng-price {
  background: var(--bg);
  padding: 90px 24px 100px;
  text-align: center;
  border-top: 1px solid #161616;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ng-price__eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.ng-price__title {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-bottom: 34px;
}
.ng-price__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
}
.ng-tab {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #c9c9c9;
  background: transparent;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 11px 26px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.ng-tab:hover { color: var(--gold); border-color: #3a3a3a; }
.ng-tab.is-active {
  color: #fff;
  border-color: var(--gold);
  background: #1a1a1a;
}
.ng-price__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
}
.ng-price__amount {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(34px, 6vw, 54px);
  line-height: 1;
  color: #fff;
  transition: opacity 0.25s ease;
}
.ng-price__note {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--gold);
  transition: opacity 0.25s ease;
}
.ng-price__included {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-bottom: 22px;
}
.ng-price__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 760px;
}
.ng-incl {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #e2e2e2;
  background: #161616;
  border: 1px solid #232323;
  border-radius: 4px;
  padding: 18px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: ngInclIn 0.4s ease both;
}
@keyframes ngInclIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ng-incl { animation: none; }
}

/* ════════════════════ CTA FINAL (card logo + reseaux) ════════════════
   Card charcoal (echo du "Chapter Four" des cours prives) : phrase en
   haut, puis cadre rond avec le logo a gauche et les 2 reseaux a droite.
   ═══════════════════════════════════════════════════════════════════ */
.ng-final {
  background: var(--bg);
  padding: 2rem 24px 6rem;
  display: flex;
  justify-content: center;
}
.ng-final__card {
  position: relative;
  width: 100%;
  max-width: 700px;
  background: #15161A;
  border: 1px solid rgba(179,138,71,0.14);
  border-radius: 19px;
  padding: 52px 48px;
  box-shadow: 0 22px 44px rgba(0,0,0,0.45);
  text-align: center;
}
.ng-final__phrase {
  font-family: 'Cinzel', serif;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.35;
  color: var(--gold);
  margin-bottom: 38px;
}
.ng-final__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 48px);
}
/* Cadre rond avec le logo */
.ng-final__logo {
  flex-shrink: 0;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(140deg, var(--gold), rgba(179,138,71,0.4));
}
.ng-final__logo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #0d0d0d;
}
/* Les 2 boutons reseaux, empiles a droite du logo */
.ng-final__socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ════════════════════ MOBILE ════════════════════ */
@media (max-width: 768px) {
  /* Bande : on masque le statique, on affiche le marquee.
     La pastille passe SOUS le bandeau (colonne), centree. */
  .ng-band {
    flex-direction: column;
    gap: 0;
    padding: 16px 0 22px;
    min-height: 0;
  }
  .ng-band__static { display: none; }
  .ng-band__marquee {
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 4px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  /* Pastille : plus superposee, elle se place dans le flux, sous le bandeau */
  .ng-band__pin {
    position: static;
    transform: none;
    margin: 16px auto 0;
  }
  .ng-band__track {
    display: flex;
    width: max-content;
    animation: ng-marquee 26s linear infinite;
  }
  .ng-band__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .ng-band__marquee .ng-band__item {
    font-size: 12px;
    color: #cfcfcf;
    padding: 0 4px;
  }
  .ng-band__marquee .ng-band__sep { margin: 0 14px; }

  @keyframes ng-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* Tarifs : grille 1 colonne */
  .ng-price { padding: 64px 20px 72px; }
  .ng-price__grid { grid-template-columns: 1fr; max-width: 360px; }

  /* Chapitres : gouttieres laterales sur mobile */
  .ng-chapter { padding: 4.5rem 22px; }

  /* Boutons sociaux du hero : centres sous le CTA */
  .ng-hero__socials { justify-content: center; }

  /* Chapitres a deux colonnes : on empile (photo au-dessus, texte dessous) */
  .ng-chapter--media-right,
  .ng-chapter--media-left { padding: 4.5rem 22px; }
  .ng-chapter__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0;
  }
  .ng-chapter--media-right .ng-chapter__col-media { order: -1; }
  /* Texte aligne a gauche sur mobile pour les deux variantes (lecture) */
  .ng-chapter--media-left .ng-chapter__col-text {
    text-align: left;
    align-items: flex-start;
  }
  .ng-chapter--media-left .ng-chapter__divider { margin: 22px 0; }
  /* Photos : largeur maitrisee et centrees */
  .ng-chapter__frame,
  .ng-chapter__penta { max-width: 420px; margin: 0 auto; width: 100%; }
  /* Filigranes recentres */
  .ng-chapter--media-right .ng-chapter__watermark,
  .ng-chapter--media-left  .ng-chapter__watermark { left: 50%; }

  /* Carrousel + annonce : empiles */
  .ng-carousel { padding: 1.5rem 20px 3.5rem; }
  .ng-carousel__inner { flex-direction: column; gap: 32px; }
  .ng-carousel__oct { flex: 0 0 auto; width: min(520px, 100%); }
  .ng-carousel__announce {
    flex: 0 0 auto;
    max-width: 520px;
    text-align: center;
  }

  /* CTA final : card plus compacte, logo au-dessus des reseaux */
  .ng-final { padding: 1rem 20px 4.5rem; }
  .ng-final__card { padding: 40px 26px; }
  .ng-final__row { flex-direction: column; gap: 26px; }
  .ng-final__logo { width: 112px; height: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .ng-band__track { animation: none; }
}