/* ============================================================
   MUAY THAI EN LIBERTÉ — Refonte Moderne 2026
   Palette  : #0A0A0A | #C8102E | #EDEBE6
   Fonts    : Barlow Condensed + Inter + Oleo Script
   ============================================================

   HISTORIQUE DES MODIFICATIONS (Mai 2026)
   ────────────────────────────────────────
   1. Refonte complète du design → thème sombre "Combat Minimaliste"
      - Ancien fichier sauvegardé dans : style-mt-tel.CSS.backup-original
      - Palette sombre avec rouge (#C8102E) comme accent
      - Polices Google : Barlow Condensed (titres), Inter (texte), Oleo Script (accents)

   2. Page Muay-Thai.php redessinée :
      - Hero vidéo plein écran
      - Cartes de stages interactives
      - Système "Stage Finder" (quiz pour choisir son stage)
      - Section avis clients
      - Photos paysage (Muaythai-11,12,13,14 + champion43)

   3. Footer (pied de page) :
      - Rendu compact (br et séparateurs masqués)
      - Layout 2 colonnes côte à côte
      - Section "Renseignements Thaïlande" masquée (image sawadee300-texte.jpg absente)
        → Pour la réactiver : retrouver l'image, la placer dans /muay-thai/,
          puis changer "display: none" en "display: block" sur .pied .largeur-article-2:nth-child(2)
      - Bouton scroll-to-top : image to_top.png masquée (remplacée par SVG en JS)

   4. Liens stage-champion :
      - Pointent vers "Plus%20proposé/stage%20champion/stage-champion.php"
      - Le fichier reste dans son sous-dossier (ne pas le déplacer)

   FICHIER INTERDIT DE MODIFICATION :
      - presentation-mt-tel.php (partagé par toutes les pages, contient menu + footer)

   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;1,700&family=Inter:wght@300;400;500;600&family=Oleo+Script&display=swap");

/* ─── Variables ───
   Couleurs, polices, arrondis et transitions réutilisées partout.
   Pour changer la couleur rouge du site → modifier --red
   Pour changer la police des titres → modifier --fh
   ─── */
:root {
  --bg: #0a0a0a;
  --surface: #141414;
  --surface2: #1c1c1c;
  --surface3: #242424;
  --surfaceGoogle: #EEEECC; /* blanc très légèrement gris jaune pour le fond des avis Google pour ne pas trop trancher d'avec le noir ambiant */
/*  --red: #c8102e; */
  --red: #FFFF66;  /* jaune pale */ 
  --red-fonce: #CCCC00;  /* jaune plus foncé pour bandeau prix */ 
  --red-h: #e8293a;
  --red-glow: rgba(200, 16, 46, 0.35);
  --gold: #d4a017;
  --text: #edebe6;
/*  --text-m: #8a8680; */
  --text-m: #BaB6B0;
  --border: #2a2a2a;
/*  --fh: "Barlow Condensed", sans-serif; */
  --fh: "Times Roman";
 /* --fb: "Inter", sans-serif; */
  --fb: "Times Roman";
  --fs: "Oleo Script", cursive;
  --r: 6px;
  --rl: 12px;
  --t: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Reset ───
   Remet à zéro les marges/paddings de tous les éléments.
   Évite les différences entre navigateurs.
   ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============================================================
   BODY & GLOBAL
   Style de base de la page : fond noir, police, couleur texte.
   Les liens (a) ont un style uniforme sur tout le site.
   ============================================================ */
.body {
  /* background-color: var(--bg); */
  background-image: url("fond-BKK5a.jpg");
  font-family: var(--fb); 
  color: var(--text);
  line-height: 1.7;
}

a:link {
  color: var(--text);
  text-decoration: none;
}
a:visited {
  color: var(--text);
  text-decoration: none;
}
a:hover {
  color: var(--red-h);
  text-decoration: none;
  transition: color var(--t);
}
a:active {
  color: var(--red);
} 

.lien-jaune:link,
.lien-jaune:visited {
  color: #f5d76e;
  text-decoration: none;
}
.lien-jaune:hover {
  color: #ffffff;
}

/* b, */
strong {
  color: #ffffff;
  font-weight: 600;
}

/* ============================================================
   SCROLL REVEAL — Animation au défilement
   Les éléments avec classe .reveal apparaissent en fondu
   quand on scrolle jusqu'à eux (activé par JavaScript).
   ============================================================ */
@keyframes revealFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.reveal {
  opacity: 0;
}
.reveal.visible {
  animation: revealFade 1s ease-out forwards;
}

/* ============================================================
   BANDEAU
   Image en haut de page avec le titre "THAÏLANDE" et "en liberté".
   Utilise Muaythai-17.jpg en grand écran, version courte sur mobile.
   ============================================================ */
.bandeau {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
/*  background-image: url("bandeau2-petit.jpg"); */
  background-image: url("nouveau-bandeau2.jpg");
  background-size: cover;
  background-position: center 30%;
  overflow: hidden;
}
.bandeau::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0) 100%
  );
}

@media (min-width: 620px) {
  .bandeau {
    height: 200px;
    background-image: url("nouveau-bandeau2.jpg");
  }
}
/* @media (min-width: 1200px) {
   .bandeau {
    height: 300px;
  }
} */

.pays {
  position: absolute;
  left: 20px;
  top: 7px;
  font-family: var(--fh);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffffff;
  z-index: 2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}
@media (min-width: 620px) {
  .pays {
    left: 70px;
    top: 18px;
    font-size: 50px;
    letter-spacing: 6px;
  }
}
@media (min-width: 1000px) {
  .pays {
    left: 120px;
    top: 18px;
    font-size: 70px;
  }
} 

.liberte {
  position: absolute;
  left: 145px;
  top: 40px;
  font-family: var(--fs);
  font-size: 20px;
/*  color: var(--red); */
  z-index: 2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
@media (min-width: 620px) {
  .liberte {
    left: 300px;
    top: 82px;
    font-size: 40px;
  }
}
@media (min-width: 1000px) {
  .liberte {
    left: 370px;
    top: 92px;
    font-size: 48px;
  }
} 

/* titre, "guide francophone" */
.guide {
  position: absolute;
  left: 110px;
  top: 170px;
  font-size: 28px; 
  font-family: "Script MT Bold";
}
@media (min-width: 620px) { /* pour un écran d'au moins 620px */
.guide {
  position: absolute;
  left: 290px;
  top: 300px;
  font-size: 34px;
  font-family: "Script MT Bold";
  color: #EEEEEE;
}
}@media (min-width: 850px) { /* pour un écran d'au moins 850px */
.guide {
  position: absolute;
  left: 370px;
  top: 280px;
  font-size: 48px;
  font-family: "Script MT Bold";
  color: #EEEEEE;
}
}
@media (min-width: 1000px) { 
.guide {
  position: absolute;
  left: 450px;
  top: 280px;
  font-size: 48px;
  font-family: "Script MT Bold";
  color: #EEEEEE;
}
}
@media (min-width: 1200px) { 
.guide {
  position: absolute;
  left: 500px;
  top: 380px;
  font-size: 60px;
  font-family: "Script MT Bold";
  color: #EEEEEE;
}
}


/* ============================================================
   SÉPARATEURS POSITIONNÉS
   ============================================================ */
.separateur-haut {
  position: absolute;
  top: 101px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}
@media (min-width: 620px) {
  .separateur-haut {
    top: 201px;
  }
}
/* @media (min-width: 1200px) {
  .separateur-haut {
    top: 301px;
  }
} */

.separateur-bas-menu-horizontal {
  position: absolute;
  top: 176px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}
@media (min-width: 620px) {
  .separateur-bas-menu-horizontal {
    top: 286px;
  }
}
/* @media (min-width: 1200px) {
  .separateur-bas-menu-horizontal {
    top: 386px;
  }
} */

/* ============================================================
   BLOC VIDE
   ============================================================ */
.bloc-vide {
  position: relative;
  height: 165px;
  width: 100%;
}
@media (min-width: 620px) {
  .bloc-vide {
    height: 275px;
  }
}
/* @media (min-width: 1200px) {
  .bloc-vide {
    height: 375px;
  }
} */

.bloc-vide-bis {    			/* bloc vide pour mettre le bloc du corps en dessous du menu */
	position: relative;
	height: 150px;
	width: 100%;
}
@media (min-width: 620px) {  /* pour un écran d'au moins 620px */
	.bloc-vide-bis {
		position: relative;
		height: 237px;
		width: 100%;
	}
}
/* @media (min-width: 1200px) {
  .bloc-vide-bis {
    height: 375px;
  }
} */

/* ============================================================
   NAVIGATION
   Menu horizontal sous le bandeau. Fond semi-transparent flou.
   .sous = sous-menus déroulants au survol.
   .lien-menu-h = style des liens du menu.
   Généré par presentation-mt-tel.php (ne pas modifier le HTML).
   ============================================================ */
nav {
  width: 100%;
  position: absolute;
  top: 103px;
  left: 0;
  background: rgba(8, 8, 8, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: none;
  z-index: 100;
}
@media (min-width: 620px) {
  nav {
    top: 203px;
  }
}
/* @media (min-width: 1200px) {
  nav {
    top: 303px;
  }
} */

nav ul {
  list-style: none;
  display: flex;
}

nav > ul > li {
  flex: 1 1 auto;
  text-align: center;
  position: relative;
}

nav > ul > li > a {
  display: block;
  padding: 12px 4px 10px;
  border-bottom: 3px solid transparent;
  transition:
    border-color var(--t),
    color var(--t),
    background var(--t);
}
nav > ul > li > a:hover {
  border-bottom-color: var(--red);
  color: #ffffff;
  background: rgba(200, 16, 46, 0.06);
}

.sous {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: #0c0c0c;
  border: 1px solid #1e1e1e;
  border-top: 2px solid var(--red);
  border-radius: 0 0 var(--rl) var(--rl);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8);
  z-index: 200;
  flex-direction: column;
  overflow: hidden;
}
nav > ul > li:hover .sous {
  display: flex;
}
.sous li {
  text-align: left;
}

.sous a {
  display: block;
  padding: 11px 18px;
  border-bottom: 1px solid #151515;
  font-size: 14px;
  color: var(--text-m);
  transition: all var(--t);
}
.sous a:hover {
  background: rgba(200, 16, 46, 0.08);
  color: #ffffff;
  padding-left: 24px;
}

/* ════════════════════════════════════════════
   MENU HAMBURGER — caché par défaut sur desktop
════════════════════════════════════════════ */
#nav-toggle {
  display: none;
}
.sub-toggle {
  display: none;
}
#nav-close {
  display: none;
}
#nav-overlay {
  display: none;
}
li.nav-m-only {
  display: none;
}

@media (max-width: 619px) {
  /* -- Barre nav mobile -- */
  nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 5px 12px;
    min-height: 44px;
    z-index: 1000;
  }

  #nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #d7d7d7;
    cursor: pointer;
    border-radius: 8px;
    flex-shrink: 0;
    margin-top: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition:
      background 0.2s,
      border-color 0.2s,
      transform 0.2s,
      box-shadow 0.2s;
  }
  #nav-toggle:hover,
  #nav-toggle:focus {
    background: #ffffff;
    border-color: #bdbdbd;
    transform: translateY(-1px);
    outline: none;
  }
  #nav-toggle span {
    display: block;
    width: 18px;
    height: 2.4px;
    background: #2a2a2a;
    border-radius: 3px;
    transition:
      transform 0.24s ease,
      opacity 0.24s ease,
      background 0.24s ease;
  }

  #site-nav.nav-open #nav-toggle {
    background: #ffffff;
    border-color: #b3b3b3;
  }
  #site-nav.nav-open #nav-toggle span {
    background: #1f1f1f;
  }
  #site-nav.nav-open #nav-toggle span:nth-child(1) {
    transform: translateY(6.8px) rotate(45deg);
  }
  #site-nav.nav-open #nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  #site-nav.nav-open #nav-toggle span:nth-child(3) {
    transform: translateY(-6.8px) rotate(-45deg);
  }

  /* -- Overlay -- */
  #nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  #nav-overlay.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* -- Panel blanc 95vw slide depuis la gauche -- */
  #nav-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 95vw !important;
    max-width: 400px !important;
    background: #ffffff !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding-top: 68px !important;
    margin: 0 !important;
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.18) !important;
  }
  #site-nav.nav-open #nav-menu {
    transform: translateX(0) !important;
  }

  /* -- Bouton X cercle gris -- */
  #nav-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1.5px solid #ccc;
    border-radius: 50%;
    color: #333;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    z-index: 1001;
    transition:
      border-color 0.2s,
      background 0.2s;
  }
  #nav-close:hover {
    background: #f5f5f5;
    border-color: #999;
  }

  /* -- Items visibles sur mobile -- */
  li.nav-m-only {
    display: block !important;
  }

  nav > #nav-menu > li {
    flex: none !important;
    text-align: left !important;
    border-bottom: 1px solid #eeeeee !important;
    position: relative;
    list-style: none;
  }
  nav > #nav-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    border-bottom: none !important;
    transition:
      background 0.15s,
      color 0.15s !important;
    text-decoration: none !important;
  }
  nav > #nav-menu > li > a::after {
    content: ">";
    color: #cc0000;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 8px;
  }
  nav > #nav-menu > li > a:hover {
    background: #f9f9f9 !important;
    color: #cc0000 !important;
  }

  /* -- Li Detail par stage -- */
  nav > #nav-menu > li.has-sub {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  nav > #nav-menu > li.has-sub > a {
    flex: 1 !important;
  }
  nav > #nav-menu > li.has-sub > a::after {
    display: none !important;
  }
  nav > #nav-menu > li.has-sub > .sous {
    flex: 0 0 100% !important;
  }

  .sub-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 56px !important;
    background: none !important;
    border: none !important;
    color: #cc0000 !important;
    font-size: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s ease !important;
  }
  .sub-toggle::before {
    content: ">";
    color: #cc0000;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }
  li.sub-open > .sub-toggle {
    transform: rotate(90deg) !important;
  }

  /* -- Sous-menu accordeon -- */
  #nav-menu .sous {
    display: none !important;
    position: static !important;
    width: 100% !important;
    transform: none !important;
    left: auto !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: #f9f9f9 !important;
    border-top: 1px solid #eeeeee !important;
    padding: 4px 0 !important;
  }
  #nav-menu li.sub-open > .sous {
    display: flex !important;
    flex-direction: column !important;
  }
  #nav-menu .sous li {
    text-align: left !important;
    border-bottom: 1px solid #efefef !important;
    list-style: none !important;
  }
  #nav-menu .sous a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 20px 13px 32px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    transition:
      background 0.15s,
      color 0.15s !important;
  }
  #nav-menu .sous a::after {
    content: ">";
    color: #cc0000;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
  }
  #nav-menu .sous a:hover {
    color: #cc0000 !important;
    background: #f0f0f0 !important;
  }
  #nav-menu .sous a b,
  #nav-menu .sous a strong {
    color: inherit !important;
    font-weight: 700;
  }

  /* -- Bloc Google Avis -- */
  .nav-m-google {
    border-bottom: none !important;
  }
  .nav-m-google > a {
    display: block !important;
    padding: 0 !important;
    text-decoration: none !important;
  }
  .nav-m-google > a::after {
    display: none !important;
  }
  .nav-m-google > a:hover {
    background: transparent !important;
  }
  .google-block {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 15px;
    margin: 15px;
    transition: box-shadow 0.2s;
  }
  .nav-m-google > a:hover .google-block {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  .google-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .google-label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  .google-stars-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 5px;
  }
  .google-stars {
    color: #fbbc04;
    font-size: 17px;
    letter-spacing: 1px;
  }
  .google-score {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  .google-count {
    font-size: 13px;
    color: #777;
    font-weight: 400;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  .google-italic {
    font-size: 12px;
    color: #666;
    font-style: italic;
    font-weight: 400;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 6px;
    line-height: 1.4;
  }
  .google-name {
    font-size: 11px;
    color: #999;
    font-weight: 400;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  /* -- Bouton CTA -- */
  .nav-m-cta {
    border-bottom: none !important;
    padding: 0 !important;
  }
  .nav-m-cta > a {
    display: block !important;
    background: linear-gradient(135deg, #e00000 0%, #8b0000 100%) !important;
    color: #fff !important;
    margin: 12px 15px 22px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(180, 0, 0, 0.45) !important;
    overflow: hidden;
    position: relative;
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease !important;
  }
  .nav-m-cta > a::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -70%;
    width: 45%;
    height: 200%;
    background: rgba(255, 255, 255, 0.13);
    transform: skewX(-18deg);
    transition: left 0.5s ease;
    pointer-events: none;
  }
  .nav-m-cta > a::after {
    display: none !important;
  }
  .nav-m-cta > a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(180, 0, 0, 0.55) !important;
    color: #fff !important;
  }
  .nav-m-cta > a:hover::before {
    left: 120%;
  }
  .cta-inner {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    gap: 12px;
  }
  .cta-icon {
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
  }
  .cta-text {
    flex: 1;
    text-align: left;
  }
  .cta-sub {
    display: block;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.72);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.2px;
    text-transform: none !important;
    margin-bottom: 3px;
  }
  .cta-main {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase !important;
    color: #fff;
  }
  .cta-arrow {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
    transition: transform 0.2s ease;
    line-height: 1;
  }
  .nav-m-cta > a:hover .cta-arrow {
    transform: translateX(4px);
  }
}

.lien-menu-h,
.lien-menu-h:link,
.lien-menu-h:visited {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #aaa;
  text-decoration: none;
  transition: color var(--t);
}
.lien-menu-h:hover {
  color: #fff;
  text-decoration: none;
}

@media (min-width: 320px) {
  .lien-menu-h,
  .lien-menu-h:link,
  .lien-menu-h:visited {
    font-size: 12px;
  }
}
@media (min-width: 620px) {
  .lien-menu-h,
  .lien-menu-h:link,
  .lien-menu-h:visited {
    font-size: 17px;
  }
}

/* ============================================================
   HERO SECTION
   Grande image/vidéo d'accueil sur Muay-Thai.php.
   Hauteur contrôlée dans le bloc HERO VIDEO ci-dessous.
   Dégradé noir en bas pour le titre.
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  animation: heroZoom 20s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.06);
  }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.15) 0%,
    rgba(10, 10, 10, 0.3) 50%,
    rgba(10, 10, 10, 0.92) 100%
  );
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 30px;
}
@media (min-width: 620px) {
  .hero-overlay {
    padding-bottom: 50px;
  }
}

.hero-title {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
  line-height: 1.15;
}
.hero-title span {
  display: block;
  font-family: var(--fs);
  font-size: 0.55em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--red);
  margin-top: 8px;
}
@media (min-width: 620px) {
  .hero-title {
    font-size: 52px;
    letter-spacing: 8px;
  }
  .hero-title span {
    font-size: 0.5em;
  }
}
@media (min-width: 1020px) {
  .hero-title {
    font-size: 64px;
  }
}

/* ============================================================
   INTRO SECTION
   ============================================================ */
.intro-section {
  text-align: center;
  max-width: 750px;
  margin: 0 auto;
  padding: 30px 20px 20px;
}
.intro-title {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fff;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
}
.intro-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
}
@media (min-width: 620px) {
  .intro-section {
    padding: 40px 30px 24px;
  }
  .intro-title {
    font-size: 36px;
  }
}

/* ============================================================
   CONTENUS — ZONES PRINCIPALES
   ============================================================ */
.contenu {
  position: relative;
  margin: 0 auto;
  padding: 10px;
  color: var(--text);
  font-family: var(--fb); 
  font-size: 15px;
}
@media (min-width: 320px) {
  .contenu {
    padding: 16px;
    font-size: 17px;
  }
}
@media (min-width: 620px) {
  .contenu {
    padding: 20px;
    font-size: 19px;
    max-width: 800px;
  }
}
@media (min-width: 1020px) {
  .contenu {
    padding: 24px;
    font-size: 21px;
    max-width: 1000px;
  }
}


/* ============================================================
   PAGE TARIFS — stage-tarifs.php
   Refonte dédiée: hiérarchie visuelle, navigation rapide, sections lisibles.
   Scope volontairement limité à .tarifs-page pour ne pas affecter les autres pages.
   ============================================================ */
.tarifs-page {
  max-width: 1160px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.tarifs-page .reveal {
  opacity: 1;
}

.tarifs-page .reveal.visible {
  animation: none;
}

.tarifs-hero {
  background:
    radial-gradient(
      circle at 95% 5%,
      rgba(255, 255, 102, 0.1),  rgba(0, 0, 0, 0.54),
      transparent 40%
    ),
	radial-gradient(
      circle at 5% 5%,
      rgba(255, 255, 102, 0.1),  rgba(0, 0, 0, 0.54),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 102, 0.22) 0%,
      rgba(10, 10, 10, 0.9) 25%,
      rgba(0, 0, 0, 1) 100%
    );
  border: 1px solid rgba(212, 210, 23, 0.28);
  border-radius: 16px;
  padding: 18px 14px 20px;
  margin-bottom: 24px;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.tarifs-main-title {
  margin: 0;
  font-size: 34px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.05;
}

.tarifs-lead {
  margin-top: 10px;
  max-width: 820px;
  color: #e4dfd6;
  font-size: 16px;
  line-height: 1.55;
}

.tarifs-hero-media {
  display: block;
  margin-top: 14px;
}

.tarifs-rules {
  margin-top: 14px;
  background: rgba(8, 8, 8, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 14px;
}

.tarifs-rules h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #fff;
}

.tarifs-bullets {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
  color: #ece8df;
  font-size: 14px;
  line-height: 1.5;
}

.tarifs-rules p {
  margin-top: 12px;
  color: #d0cbc2;
  font-size: 14px;
  line-height: 1.6;
}

.tarifs-nav {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tarifs-nav-chip {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--fh);
  font-size: 16px;
  letter-spacing: 0.8px;
  color: #fff;
  transition:
    background var(--t),
    border-color var(--t),
    transform var(--t),
    color var(--t);
}

.tarifs-nav-chip:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-1px);
}
/*
.tarif-section {
  margin-top: 18px;
  background: linear-gradient(
    180deg,
    rgba(28, 28, 28, 0.96) 0%,
    rgba(14, 14, 14, 1) 100%
  );
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
  scroll-margin-top: 94px;
} */
.tarif-section {
  margin-bottom: 30px;
  background-color: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/*
.tarif-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.tarif-section-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
}
*/

.tarif-section-head {
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  border-bottom: 1px solid #2a2a2a;
  background: #070707;
}

@media (min-width: 620px) {
  .tarif-section-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.tarif-section-head h2 {
  margin: 0;
  font-size: 20px;
  margin-bottom: 10px;
}

@media (min-width: 620px) {
  .tarif-section-head h2 {
    margin-bottom: 0;
  }
}

.tarif-link-stage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(212, 160, 23, 0.14);
  border: 1px solid rgba(212, 160, 23, 0.5);
  font-family: var(--fh);
  font-size: 16px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #f8e3ab;
}

.tarif-link-stage:hover {
  background: rgba(212, 160, 23, 0.24);
  color: #fff;
  border-color: rgba(212, 160, 23, 0.8);
}

.tarif-table-wrap {
  overflow-x: auto;
  padding-bottom: 6px;
}

.tarifs-page .tarif-table-wrap h3 {
  margin-bottom: 10px;
  font-size: 22px;
  color: #fff;
}

/*
.tarifs-page .tarif-table-wrap .tab1 {
  width: 100%;
  min-width: 620px;
  border-color: rgba(200, 16, 46, 0.9);
}

.tarifs-page .tarif-table-wrap .tab1 td,
.tarifs-page .tarif-table-wrap .tab1 th {
  padding: 9px;
}

.tarifs-page .tarif-table-wrap .tab1 tr:nth-child(even) td {
  background: #f7f7f7;
}
*/
.tarifs-page .tarif-table-wrap .tab1 {
  width: 100%;
  min-width: 300px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.tarifs-page .tarif-table-wrap .tab1 td,
.tarifs-page .tarif-table-wrap .tab1 th {
  padding: 12px 8px;
}

.tarifs-page .tarif-table-wrap .tab1 tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.12); /* blanc */
}

.tarifs-page .tarif-table-wrap .paragraphe-prix {
  display: block;
  color: #dad5cd;
  font-size: 14px;
  line-height: 1.55;
}

.tarifs-page .tarif-table-wrap .police-jaune {
  display: block;
  margin-top: 8px;
  color: #f0da93;
  line-height: 1.6;
}

.tarif-section picture {
  display: block;
  margin-top: 14px;
}

.tarifs-bottom {
  margin-top: 24px;
}

.tarifs-contact {
  margin-bottom: 12px;
}

.tarifs-convertisseur {
  border: 1px dashed rgba(212, 160, 23, 0.5);
  border-radius: 10px;
  padding: 14px;
  background: rgba(19, 19, 19, 0.8);
  color: #ddd7ce;
  line-height: 1.6;
}

.tarifs-convertisseur a {
  color: #f7d77e;
}

@media (min-width: 620px) {
  .tarifs-page {
    padding-top: 24px;
  }
  .tarifs-hero {
    padding: 24px;
  }
  .tarifs-main-title {
    font-size: 52px;
  }
  .tarifs-lead {
    font-size: 18px;
  }
  .tarifs-rules {
    padding: 18px;
  }
  .tarifs-bullets {
    font-size: 15px;
  }
  .tarifs-rules p {
    font-size: 15px;
  }
  .tarifs-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .tarif-section {
    padding: 20px;
    margin-top: 20px;
  }
  .tarif-section-head h2 {
    font-size: 32px;
  }
  .tarif-link-stage {
    min-height: 40px;
    padding: 0 14px;
    font-size: 17px;
  }
  .tarifs-page .tarif-table-wrap h3 {
    font-size: 26px;
  }
  .tarifs-page .tarif-table-wrap .tab1 td,
  .tarifs-page .tarif-table-wrap .tab1 th {
    padding: 11px;
  }
}

@media (max-width: 619px) {
  .tarifs-page {
    padding-top: 12px;
  }
  .tarifs-main-title {
    font-size: 29px;
    letter-spacing: 1px;
  }
  .tarif-section-head h2 {
    font-size: 22px;
  }
  .tarifs-page .tarif-table-wrap {
    overflow-x: visible;
  }
  .tarifs-page .tarif-table-wrap .tab1 {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }
  .tarifs-page .tarif-table-wrap .tab-police {
    font-size: 11px;
  }
  .tarifs-page .tarif-table-wrap .tab1 td,
  .tarifs-page .tarif-table-wrap .tab1 th {
    padding: 6px 4px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
  }
  .tarifs-page .tarif-table-wrap .tab1 th {
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px;
  }
}

/* ============================================================
   STAGE CARDS
   Cartes présentant chaque stage (Chiang Mai, Bangkok, île, etc.).
   Image en haut, texte en bas. Effet hover : monte + ombre.
   ============================================================ */
.stage-card {
  margin-bottom: 70px;
  border-radius: var(--rl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  transition:
    transform var(--t),
    box-shadow var(--t);
}
.stage-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(200, 16, 46, 0.15);
}

.stage-card-header {
  position: relative;
  overflow: hidden;
  max-height: 320px;
}
.stage-card-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to top, var(--surface), transparent);
  pointer-events: none;
}
.stage-card-header img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.stage-card:hover .stage-card-header img {
  transform: scale(1.05);
}
@media (max-width: 619px) {
  .stage-card-header {
    max-height: 220px;
  }
}
@media (min-width: 1020px) {
  .stage-card-header {
    max-height: 380px;
  }
}

/* ============================================================
   PHOTOS PAYSAGE
   Images panoramiques entre les blocs de stages.
   Utilisées : Muaythai-11.jpg, 12, 13, 14, champion43.
   Effet zoom au survol.
   ============================================================ */
.stage-landscape {
  margin-top: 30px;
  overflow: hidden;
  border-radius: 12px;
  max-height: 340px;
}
.stage-landscape img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  max-height: 340px;
  border-radius: 12px;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}
.stage-landscape:hover img {
  transform: scale(1.03);
}
@media (max-width: 619px) {
  .stage-landscape {
    max-height: 200px;
    margin-top: 20px;
    border-radius: 8px;
  }
  .stage-landscape img {
    max-height: 200px;
    border-radius: 8px;
  }
}
@media (min-width: 1020px) {
  .stage-landscape {
    max-height: 400px;
  }
  .stage-landscape img {
    max-height: 400px;
  }
}

/* ============================================================
   CARTES PROGRAMME (contenu interne)
   ============================================================ */
.contenu-programme {
  padding: 24px 16px;
  background: transparent;
  color: var(--text);
  font-size: 15px;
}
@media (min-width: 620px) {
  .contenu-programme {
    padding: 32px 28px;
    font-size: 17px;
  }
}
@media (min-width: 1020px) {
  .contenu-programme {
    padding: 40px 36px;
    font-size: 18px;
  }
}

.contenu-programme h2 {
  margin-bottom: 16px;
}
.contenu-programme h2 a.lien-jaune {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1.35;
  color: #f5d76e;
  transition: color var(--t);
}
.contenu-programme h2 a.lien-jaune:hover {
  color: #ffffff;
}

/* ============================================================
   CTA BUTTON
   Bouton rouge "VOIR LES TARIFS", "RÉSERVER", etc.
   Fond rouge, texte blanc, ombre rouge, effet monte au hover.
   ============================================================ */
.btn-cta {
  display: inline-block;
  margin-top: 18px;
  padding: 13px 32px;
  background: var(--red);
  color: #000 !important;
  font-family: var(--fh);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--r);
  transition: all var(--t);
  text-decoration: none !important;
  box-shadow: 0 4px 15px var(--red-glow);
}
.btn-cta:hover {
  background: var(--red-h);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px var(--red-glow);
  color: #fff !important;
}
.btn-cta:active {
  transform: translateY(-1px);
}
@media (min-width: 620px) {
  .btn-cta {
    font-size: 15px;
    padding: 14px 38px;
  }
}


/* ============================================================
   INFOS PRATIQUES
   Bloc encadré avec bordure rouge en haut.
   Utilisé sur les pages de détail des stages (logement, trajet…).
   ============================================================ */
.contenu-infos {
  padding: 24px 16px;
  background: var(--surface3);
  border-radius: var(--rl);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  color: var(--text);
  font-size: 17px;
  transition:
    transform var(--t),
    box-shadow var(--t);
}
.contenu-infos:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
@media (min-width: 620px) {
  .contenu-infos {
    padding: 32px 28px;
    font-size: 20px;
  }
}
@media (min-width: 1020px) {
  .contenu-infos {
    padding: 36px 32px;
    font-size: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   POINTS FORTS
   Encadrés colorés (vert, bleu) pour les avantages d'un stage.
   Bordure gauche colorée + fond très sombre teinté.
   ============================================================ */
.contenu-points-forts {
  padding: 14px 18px;
  background: linear-gradient(135deg, #0d2b1a, #0a1f13);
  border: 1px solid #1a6b3a;
  border-left: 4px solid #22cc66;
  border-radius: var(--rl);
  color: #ccffdd;
  font-size: 15px;
}
@media (min-width: 620px) {
  .contenu-points-forts {
    padding: 18px 22px;
    font-size: 17px;
  }
}

.contenu-points-forts-bleu {
  padding: 14px 18px;
  background: linear-gradient(135deg, #0d1e2b, #0a1520);
  border: 1px solid #1a5b6b;
  border-left: 4px solid #00dce8;
  border-radius: var(--rl);
  color: #ccf6ff;
  font-size: 15px;
}
@media (min-width: 620px) {
  .contenu-points-forts-bleu {
    padding: 18px 22px;
    font-size: 17px;
  }
}

/* ============================================================
   PIED DE PAGE (Footer)
   HTML généré par presentation-mt-tel.php → NE PAS MODIFIER le PHP.
   On contrôle tout via CSS ici.
   - Les <br> et séparateurs sont masqués pour un layout compact.
   - Section "Renseignements Thaïlande" masquée (image absente).
     → Pour réactiver : placer sawadee300-texte.jpg dans /muay-thai/
       puis mettre display:block sur .pied .largeur-article-2:nth-child(2)
   - Bouton retour haut : to_top.png absent, le SVG JS le remplace.
   ============================================================ */
.pied {
  width: 100%;
  background: #060606;
  border-top: 2px solid var(--red);
  color: #999;
  font-size: 13px;
  margin-top: 40px;
  padding: 30px 20px 20px;
}
.pied h3 {
  color: #ccc;
  font-family: var(--heading);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.pied br {
  display: none;
}

.lien-pp:link,
.lien-pp:visited {
  color: #999;
  text-decoration: none;
  transition: color var(--t);
  display: inline-block;
  padding: 2px 0;
}
.lien-pp:hover {
  color: var(--red-h);
}

.separateur-pied {
  display: none;
}
.separateur-ligne-noire {
  display: none;
}

/* Image footer sawadee — masquée (fichier absent) */
.pied img[src="sawadee300-texte.jpg"] {
  display: none;
}
.pied .largeur-article-2:nth-child(2) {
  display: none;
}

.section-pp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
}
.section-pp > div {
  padding: 10px 20px;
  flex: 1;
  min-width: 200px;
}

.marge-int-gauche-20-pp {
  padding-left: 0;
}

/* scroll_to_top img masqué (to_top.png manquant, SVG le remplace) */
#scroll_to_top img {
  display: none;
}

/* ============================================================
   BLOCS
   ============================================================ */
.bloc-noir {
  background: var(--bg);
  padding: 12px;
  border-radius: var(--r);
}
.bloc-gris {
  background: var(--surface3);
  padding: 12px;
  border-radius: var(--r);
}
.bloc-gris-foncé {
  background: #111;
}

/* ============================================================
   IMAGES
   ============================================================ */
.image-auto {
  max-width: 100%;
  height: auto;
  border-radius: var(--rl);
  display: block;
}
/* Images dans les sections article : taille uniforme, ombre et hover */
.largeur-article-2 .image-auto {
  border-radius: var(--rl);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition:
    transform var(--t-slow),
    box-shadow var(--t-slow);
  object-fit: cover;
  width: 100%;
  min-height: 260px;
  max-height: 380px;
}
.largeur-article-2:hover .image-auto {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
/* Images pleine largeur (standalone dans les sections) */
.contenu-infos .image-auto,
.marge-int-gauche-20 > .image-auto,
.marge-int-gauche-20 > picture > .image-auto {
  max-height: 450px;
  object-fit: cover;
  width: 100%;
}
.stage-banner {
  border-radius: 0;
  width: 100%;
  box-shadow: none;
}
@media (max-width: 619px) {
  .largeur-article-2 .image-auto {
    max-height: 300px;
  }
  .contenu-infos .image-auto,
  .marge-int-gauche-20 > .image-auto,
  .marge-int-gauche-20 > picture > .image-auto {
    max-height: 350px;
  }
}
@media (min-width: 620px) and (max-width: 1019px) {
  .largeur-article-2 .image-auto {
    max-height: 340px;
  }
}
.large {
  width: 100%;
}
.centré {
  display: block;
  margin: 0 auto;
}
.centre {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.bordure1 {
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.largeur-480 {
  max-width: 480px;
}
.iframe-auto {
  position: relative; 
  overflow: hidden; 
  padding-top: 57.1%; 
  max-width : 560px;
}	

.resp-iframe { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  max-height : 320px;
  border: 0; 
}
/* .iframe-auto {
  position: relative;
  overflow: hidden;
  padding-top: 87.5%;
  max-width: 480px;
}
.resp-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 420px;
  border: 0;
} */
.largeur-560 {
	max-width : 560px;
}


.ombre-droite-bas {
  box-shadow: 10px 10px 22px rgba(0, 0, 0, 0.65);
}

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
h1,
h2,
h3,
h4 {
  font-family: var(--fh);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.25;
  color: var(--text);
}
h3 {
  font-size: 1.15em;
}

.police-commentaire {
  font-size: 14px;
  text-align: center;
  color: var(--text-m);
  font-style: italic;
}
@media (min-width: 620px) {
  .police-commentaire {
    font-size: 18px;
  }
}

.police-centrée {
  text-align: center;
}
.italique {
  font-style: italic;
}
.police-rouge {
  color: var(--red);
}
.police-jaune {
  color: #f5d76e;
}
.police-paille {
  color: #ffee99;
}

.boitetitre {
  font-family: var(--fs);
  font-size: 22px;
  background: var(--red);
  color: #000;
  padding: 8px 16px;
  border-radius: var(--r);
  display: inline-block;
}
@media (min-width: 500px) {
  .boitetitre {
    font-size: 24px;
  }
}
@media (min-width: 620px) {
  .boitetitre {
    font-size: 34px;
    padding: 10px 32px;
  }
}

.boitetitredetail {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--red);
  color: #000;
  padding: 2px 8px;
  border-radius: 2px;
}

.police-info {
  font-family: var(--fh);
  font-weight: 600;
  font-size: 18px;
}
@media (min-width: 500px) {
  .police-info {
    font-size: 22px;
  }
}
@media (min-width: 620px) {
  .police-info {
    font-size: 28px;
  }
}

.police-intro {
  font-family: var(--fs);
  font-size: 18px;
}
@media (min-width: 500px) {
  .police-intro {
    font-size: 22px;
  }
}
@media (min-width: 620px) {
  .police-intro {
    font-size: 28px;
  }
}

/* ============================================================
   PARAGRAPHES
   ============================================================ */
.paragraphe {
  font-family: var(--fb);
  font-size: 16px;
  text-align: center;
  line-height: 1.6;
  color: var(--text-m);
}
@media (min-width: 620px) {
  .paragraphe {
    font-size: 20px;
  }
}

.paragraphe2 {
  font-family: var(--fb);
  font-size: 18px;
  text-align: center;
}
@media (min-width: 620px) {
  .paragraphe2 {
    font-size: 22px;
  }
}

@media (max-width: 620px) {
  .paragraphe-prix {
    font-size: 13px;
  }
}

.paragraphe-visite {
  font-size: 17px;
  padding-left: 20px;
}

/* ============================================================
   SECTIONS / GRILLE FLEX
   ============================================================ */
.section {
  display: flex;
  flex-wrap: wrap;
  max-width: 1000px;
}
.section2 {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
}
.section-partage {
  max-width: 600px;
  padding: 10px;
}
.section-unique {
  padding: 0;
}
.section-unique-1000 {
  padding: 0;
}
@media (min-width: 620px) {
  .section-unique {
    max-width: 900px;
    padding: 10px;
  }
  .section-unique-1000 {
    max-width: 1000px;
    padding: 10px;
  }
}

.largeur-article {
  flex: 1;
  margin: 0;
  padding: 12px;
  min-width: 300px;
}
.largeur-article-2 {
  flex: 2;
  margin: 0;
  padding: 12px;
  min-width: 260px;
}
/* pour contourner le problème avec PICTURE */
.largeur-article-2-bis {
  flex: 2;
  margin: 0;
  padding: 12px;
  min-width: 260px;
}
.largeur-article-4 {
  flex: 3;
  margin: 0;
  padding: 12px;
  min-width: 260px;
}
.largeur-article-5 {
  flex: 1;
  margin: 0;
  padding: 10px;
}
.largeur-article-6 {
  flex: 4;
  margin: 0;
  padding: 12px;
  min-width: 280px;
}
.largeur-article-7 {
  flex: 1;
  margin: 0;
  padding: 0;
  min-width: 280px;
}
.largeur-article-8 {
  flex: 1;
  margin: 0;
  padding: 0;
  min-width: 170px;
}
.largeur-article-9 {
  flex: 1;
  margin: 0;
  padding: 10px;
  min-width: 200px;
}
.largeur-article-10 {
  flex: 1;
  margin: 0;
  padding: 10px;
  min-width: 220px;
}
.largeur-article-11 {
  flex: 1;
  margin: 0;
  padding: 10px;
  min-width: 248px;
}

/* ============================================================
   MARGES INTÉRIEURES
   ============================================================ */
.marge-int-gauche-10 {
  padding-left: 0;
}
.marge-int-gauche-20 {
  padding-left: 0;
}
.marge-int-gauche-20-pp {
  padding-left: 0;
}
.marge-int-gauche-40 {
  padding-left: 0;
}
@media (min-width: 400px) {
  .marge-int-gauche-10 {
    padding-left: 10px;
  }
  .marge-int-gauche-20 {
    padding-left: 20px;
  }
  .marge-int-gauche-40 {
    padding-left: 40px;
  }
}

/* ============================================================
   TABLEAUX
   ============================================================ */
.tab-police {
  font-size: 12px;
  text-align: center;
  font-family: var(--fb);
  color: #ffffff;
}
@media (min-width: 620px) {
  .tab-police {
    font-size: 18px;
  }
}

/*
.tab1 {
  border: 1px solid var(--red);
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  overflow: hidden;
  border-radius: var(--r);
  color: #111;
}
.tab1 td {
  border: 1px solid #ddd;
  padding: 4px;
  background: #fff;
  color: #111;
}
@media (min-width: 620px) {
  .tab1 td {
    padding: 10px;
  }
}
.tab1 th {
  border: 1px solid var(--red);
  padding: 6px;
  background: var(--red);
  color: #111;
  font-family: var(--fh);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
@media (min-width: 620px) {
  .tab1 th {
    padding: 10px;
  }
}
*/
.tab1 {
  border-collapse: collapse;
  table-layout: auto;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.tab1 td,
.tab1 th {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 12px 8px;
  background-color: rgba(255, 255, 255, 0.08);
  vertical-align: middle;
}

@media (min-width: 620px) {

  .tab1 td,
  .tab1 th {
    padding: 16px 12px;
  }
}

.tab1 th {
  background-color: var(--red-fonce);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 1.15em;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
}



/* ============================================================
   SCROLL TO TOP
   ============================================================ */
#scroll_to_top {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 30px;
  right: 20px;
  background: var(--red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px var(--red-glow);
  transition:
    transform var(--t),
    box-shadow var(--t),
    background var(--t),
    opacity 0.4s ease;
  z-index: 999;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
#scroll_to_top.visible {
  opacity: 1;
  pointer-events: auto;
}
#scroll_to_top:hover {
  transform: translateY(-5px) scale(1.08);
  box-shadow: 0 10px 30px var(--red-glow);
  background: var(--red-h);
}
#scroll_to_top a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#scroll_to_top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   BOUTON CONTACT FLOTTANT
   ============================================================ */
.floating-contact {
  position: fixed;
  bottom: 30px;
  left: 20px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--red);
  font-family: var(--fh);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px 14px 16px;
  border-radius: 50px;
  box-shadow: 0 4px 24px var(--red-glow);
  transition:
    transform var(--t),
    box-shadow var(--t),
    background var(--t),
    opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
  color: #000 !important;
}
.floating-contact.visible {
  opacity: 1;
  pointer-events: auto;
}
.floating-contact:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 35px var(--red-glow);
  background: var(--red-h);
  color: #fff;
  text-decoration: none;
}
.floating-contact svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #000; /* donne la couleur noire à l'enveloppe à côté de "nous contacter" le bouton flottant */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.floating-contact:hover svg {
  stroke: #fff; /* donne la couleur blanche à l'enveloppe à côté de "nous contacter" le bouton flottant */
}
.floating-contact span {
  white-space: nowrap;
}
@media (max-width: 619px) {
  .floating-contact {
    padding: 14px;
    border-radius: 50%;
    bottom: 92px;
    left: 16px;
  }
  .floating-contact span {
    display: none;
  }
  #scroll_to_top {
    bottom: 92px;
    right: 16px;
  }
}

/* ============================================================
   PHOTO INTRO
   ============================================================ */
.photo-intro {
  position: absolute;
  left: 0;
  top: 160px;
  width: 100%;
}
@media (min-width: 620px) {
  .photo-intro {
    top: 270px;
  }
}

/* ============================================================
   DIVERS
   ============================================================ */
.conteneur {
  margin: 50px 20px;
}

/* ============================================================
   SPACING UTILITY
   ============================================================ */
.mt-0 {
  margin-top: 0 !important;
}
.mt-20 {
  margin-top: 20px;
}
.mt-40 {
  margin-top: 40px;
}
.mt-60 {
  margin-top: 60px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-40 {
  margin-bottom: 40px;
}

/* ============================================================
   LINK AFFORDANCE — VISIBLE CLICKABLE LINKS
   ============================================================ */
.contenu-programme a:not(.btn-cta):not(.lien-jaune),
.contenu-infos a:not(.btn-cta),
.intro-section a,
.marge-int-gauche-20 a:not(.btn-cta) {
  color: var(--red);
  text-decoration: underline;
  text-decoration-color: rgba(232, 41, 58, 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: all var(--t);
}
.contenu-programme a:not(.btn-cta):not(.lien-jaune):hover,
.contenu-infos a:not(.btn-cta):hover,
.intro-section a:hover,
.marge-int-gauche-20 a:not(.btn-cta):hover {
  color: #fff;
  text-decoration-color: var(--red);
}

/* External links: arrow icon */
.contenu-programme a[target="_blank"]::after,
.contenu-infos a[target="_blank"]::after,
.marge-int-gauche-20 a[target="_blank"]::after {
  content: " \2197";
  font-size: 0.75em;
  opacity: 0.55;
  vertical-align: super;
}

/* h2 .lien-jaune: subtle underline affordance */
.contenu-programme h2 a.lien-jaune {
  text-decoration: underline;
  text-decoration-color: rgba(245, 215, 110, 0.2);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.contenu-programme h2 a.lien-jaune:hover {
  text-decoration-color: rgba(255, 255, 255, 0.4);
}

/* .contenu-infos h2 .lien-jaune */
.contenu-infos h2 a.lien-jaune {
  text-decoration: underline;
  text-decoration-color: rgba(245, 215, 110, 0.2);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.contenu-infos h2 a.lien-jaune:hover {
  text-decoration-color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   TAG PILLS
   ============================================================ */
.stage-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 20px;
  font-family: var(--fh);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap;
}
.tag-pill--beginner {
  color: #22cc66;
  border-color: rgba(34, 204, 102, 0.3);
  background: rgba(34, 204, 102, 0.08);
}
.tag-pill--fighter {
  color: var(--red-h);
  border-color: rgba(232, 41, 58, 0.3);
  background: rgba(232, 41, 58, 0.08);
}
.tag-pill--family {
  color: #00dce8;
  border-color: rgba(0, 220, 232, 0.3);
  background: rgba(0, 220, 232, 0.08);
}
.tag-pill--nature {
  color: #66bb6a;
  border-color: rgba(102, 187, 106, 0.3);
  background: rgba(102, 187, 106, 0.08);
}
.tag-pill--city {
  color: var(--gold);
  border-color: rgba(212, 160, 23, 0.3);
  background: rgba(212, 160, 23, 0.08);
}
.tag-pill--beach {
  color: #29b6f6;
  border-color: rgba(41, 182, 246, 0.3);
  background: rgba(41, 182, 246, 0.08);
}
.tag-pill--francophone {
  color: #e8d5b7;
  border-color: rgba(232, 213, 183, 0.3);
  background: rgba(232, 213, 183, 0.08);
}
.tag-pill--mma {
  color: #ab47bc;
  border-color: rgba(171, 71, 188, 0.3);
  background: rgba(171, 71, 188, 0.08);
}
.tag-pill--weight {
  color: #ef5350;
  border-color: rgba(239, 83, 80, 0.3);
  background: rgba(239, 83, 80, 0.08);
}
.tag-pill--champion {
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.3);
  background: rgba(255, 215, 0, 0.08);
}
.tag-pill--technique {
  color: #7e57c2;
  border-color: rgba(126, 87, 194, 0.3);
  background: rgba(126, 87, 194, 0.08);
}
.tag-pill--new {
  color: #ff6d00;
  border-color: rgba(255, 109, 0, 0.3);
  background: rgba(255, 109, 0, 0.08);
  animation: pulseTag 2s ease-in-out infinite;
}
@keyframes pulseTag {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* ============================================================
   PULL QUOTE
   ============================================================ */
.pull-quote {
  font-family: var(--fs);
  font-size: 18px;
  color: var(--gold);
  text-align: center;
  padding: 20px 16px;
  margin: 20px 0 6px;
  position: relative;
  line-height: 1.6;
}
.pull-quote::before,
.pull-quote::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto;
}
.pull-quote::before {
  margin-bottom: 14px;
}
.pull-quote::after {
  margin-top: 14px;
}
@media (min-width: 620px) {
  .pull-quote {
    font-size: 22px;
    padding: 28px 32px;
  }
}

/* ============================================================
   STAGE META
   ============================================================ */
.stage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-family: var(--fh);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-m);
  text-transform: uppercase;
}
.stage-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ============================================================
   GRADIENT SECTION DIVIDER
   ============================================================ */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--red) 30%,
    var(--gold) 70%,
    transparent
  );
  margin: 10px auto 40px;
  max-width: 600px;
  opacity: 0.45;
}

/* ============================================================
   SCROLL HINT (hero)
   ============================================================ */
.scroll-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  animation: scrollBounce 2s ease-in-out infinite;
  color: rgba(255, 255, 255, 0.45);
  font-size: 18px;
  pointer-events: none;
}
@keyframes scrollBounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.4;
  }
  50% {
    transform: translateX(-50%) translateY(-7px);
    opacity: 1;
  }
}
@media (max-width: 619px) {
  .scroll-hint {
    display: none;
  }
}

/* ============================================================
   STAGE FINDER — QUICK NAVIGATION
   ============================================================ */
.stage-finder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 32px 0 16px;
}
@media (min-width: 620px) {
  .stage-finder {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    margin: 40px 0 20px;
  }
}
@media (max-width: 380px) {
  .stage-finder {
    gap: 8px;
  }
}

.stage-finder-card {
  position: relative;
  border-radius: var(--rl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  transition:
    transform var(--t),
    box-shadow var(--t);
}
.stage-finder-card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
@media (hover: none) {
  .stage-finder-card:hover {
    transform: none;
    box-shadow: none;
  }
  .stage-finder-card:active {
    transform: scale(0.97);
  }
}

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

.stage-finder-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.88) 0%,
    rgba(10, 10, 10, 0.35) 50%,
    rgba(10, 10, 10, 0.1) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
  text-decoration: none;
}
.stage-finder-overlay:hover {
  text-decoration: none;
}

.stage-finder-name {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
  line-height: 1.2;
}
.stage-finder-vibe {
  font-family: var(--fs);
  font-size: 11px;
  color: var(--gold);
  margin-top: 2px;
}
@media (min-width: 620px) {
  .stage-finder-card {
    aspect-ratio: 3 / 2;
  }
  .stage-finder-overlay {
    padding: 16px;
  }
  .stage-finder-name {
    font-size: 16px;
    letter-spacing: 2px;
  }
  .stage-finder-vibe {
    font-size: 13px;
    margin-top: 4px;
  }
}
@media (max-width: 359px) {
  .stage-finder-name {
    font-size: 11px;
    letter-spacing: 1px;
  }
  .stage-finder-vibe {
    font-size: 9px;
  }
  .stage-finder-overlay {
    padding: 8px;
  }
}

.stage-finder-title {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-m);
  text-align: center;
  margin-bottom: 6px;
}
@media (min-width: 620px) {
  .stage-finder-title {
    font-size: 14px;
    letter-spacing: 3px;
    margin-bottom: 8px;
  }
}

/* ============================================================
   COMPREHENSIVE MOBILE RESPONSIVE
   ============================================================ */

/* --- Very small phones --- */
@media (max-width: 359px) {
  .hero-title {
    font-size: 20px;
    letter-spacing: 2px;
    padding: 0 10px;
  }
  .hero-title span {
    font-size: 0.55em;
  }
  .contenu-programme {
    padding: 14px 10px;
    font-size: 14px;
  }
  .contenu-infos {
    padding: 14px 10px;
    font-size: 14px;
  }
  .stage-tags {
    gap: 5px;
  }
  .tag-pill {
    font-size: 10px;
    padding: 4px 10px;
  }
  .btn-cta {
    font-size: 12px;
    padding: 13px 14px;
  }
  .pull-quote {
    font-size: 15px;
    padding: 14px 8px;
  }
  .stage-finder-name {
    font-size: 11px;
  }
  .stage-finder-vibe {
    font-size: 9px;
  }
  .stage-finder-overlay {
    padding: 8px;
  }
  .paragraphe {
    font-size: 14px;
  }
}

/* --- Phones --- */
@media (max-width: 619px) {
  /* Stack flex layouts */
  .section {
    flex-direction: column;
  }
  .largeur-article,
  .largeur-article-2,
  .largeur-article-4,
  .largeur-article-6,
  .largeur-article-7 {
    min-width: 0 !important;
    flex-basis: 100% !important;
  }

  /* Stage cards tighter */
  .stage-card {
    margin-bottom: 32px;
    border-radius: 10px;
  }
  .contenu-programme {
    padding: 18px 14px;
  }
  .contenu-programme h2 {
    margin-bottom: 8px;
  }
  .contenu-programme h2 a.lien-jaune {
    font-size: 1em;
    line-height: 1.4;
  }

  /* CTA full width */
  .btn-cta {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    padding: 15px 20px;
    font-size: 14px;
    min-height: 48px;
    border-radius: 8px;
  }

  /* Touch targets */
  nav > ul > li > a {
    padding: 14px 4px 12px;
    min-height: 48px;
  }

  /* Hero */
  .hero-overlay {
    padding-bottom: 20px;
  }
  .hero-title {
    padding: 0 16px;
  }

  /* Stage image height control */
  .stage-card-header img {
    max-height: 240px;
    object-fit: cover;
  }


  /* Contenu spacing */
  .contenu-1000 {
    padding: 0 12px;
  }
  .contenu,
  .contenu-900 {
    padding: 12px;
  }

  /* Info boxes */
  .contenu-infos {
    margin-bottom: 24px !important;
  }
  .contenu-infos h2 {
    font-size: 1.05em;
  }
  .contenu-infos h3 {
    font-size: 1em;
  }

  /* Intro */
  .intro-section {
    padding: 28px 14px 16px;
  }
  .paragraphe {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Meta */
  .stage-meta {
    gap: 8px;
    font-size: 11px;
    padding: 10px 0;
  }
}

/* --- Tablets --- */
@media (min-width: 620px) and (max-width: 1019px) {
  .stage-card {
    margin-bottom: 50px;
  }
  .largeur-article-2 {
    min-width: 200px;
    flex-basis: 35%;
  }
  .largeur-article-4 {
    min-width: 200px;
    flex-basis: 60%;
  }
}

/* --- Touch devices --- */
@media (hover: none) {
  .stage-card:hover {
    transform: none;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  }
  .contenu-infos:hover {
    transform: none;
    box-shadow: none;
  }
  .stage-finder-card:hover {
    transform: none;
    box-shadow: none;
  }
  .largeur-article-2:hover .image-auto {
    transform: none;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  }
  .btn-cta:active {
    transform: scale(0.97);
    background: var(--red-h);
  }
  .floating-contact:hover {
    transform: none;
  }
  .contenu-programme a:not(.btn-cta):not(.lien-jaune),
  .intro-section a,
  .marge-int-gauche-20 a:not(.btn-cta) {
    text-decoration: underline;
    text-decoration-color: rgba(232, 41, 58, 0.5);
  }
}

/* --- Landscape phones --- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    max-height: 55vh;
  }
  .hero-overlay {
    padding-bottom: 12px;
  }
  .hero-title {
    font-size: 26px;
  }
}

/* --- Print --- */
@media print {
  .hero,
  nav,
  .bandeau,
  #scroll_to_top,
  .bloc-vide,
  .scroll-hint,
  .stage-tags,
  .floating-contact {
    display: none;
  }
  .body {
    background: #fff;
    color: #000;
  }
  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
  .stage-card {
    break-inside: avoid;
    border: 1px solid #ccc;
    box-shadow: none;
  }
  .btn-cta {
    background: #ccc;
    color: #000 !important;
    box-shadow: none;
  }
  .contenu-infos {
    box-shadow: none;
    border-color: #ccc;
  }
}

/* ============================================================
   HERO VIDEO
   Desktop + Mobile : vidéo plein-cadre avec object-fit cover.
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: clamp(380px, 68vh, 780px);
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* Mobile : vidéo affichée avec object-fit cover — le recadrage centré
   fonctionne bien en portrait. Le poster sert de fallback si la vidéo
   ne charge pas. */
@media (max-width: 619px) {
  .hero {
    height: clamp(220px, 42svh, 360px);
  }
  .hero-video {
    display: block;
    object-position: center 30%;
  }
}
@media (min-width: 1020px) {
  .hero {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 720px;
  }
}

/* ============================================================
   AVIS CLIENTS — STYLE BRUT & ÉMOTIONNEL
   ============================================================ */
.reviews {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 22px;
}

.review-card {
  position: relative;
  padding: 22px 22px 22px 26px;
  background: transparent;
  border: none;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--rl) var(--rl) 0;
  transition: border-color var(--t);
}
.review-card:hover {
  border-left-color: var(--red);
}

.review-text {
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-m);
  font-style: normal;
  margin: 0;
}
@media (min-width: 620px) {
  .review-text {
    font-size: 16px;
  }
}
.review-text::before,
.review-text::after {
  content: none;
}

/* Key emotional phrase highlighted */
.review-highlight {
  color: #fff;
  font-weight: 500;
  background: linear-gradient(
    to top,
    rgba(200, 16, 46, 0.18) 0%,
    rgba(200, 16, 46, 0.18) 40%,
    transparent 40%
  );
}

.review-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.review-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface2);
  border: 2px solid var(--border);
  color: var(--text-m);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.review-name {
  font-family: var(--fh);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.3px;
}
.review-context {
  font-family: var(--fb);
  font-size: 11px;
  color: var(--text-m);
  font-style: italic;
}
.review-date {
  font-size: 11px;
  color: var(--text-m);
  margin-left: auto;
  font-family: var(--fb);
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

/* Reviews info block (visa, links) */
.reviews-info {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: var(--rl);
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-m);
  margin-top: 18px;
}
@media (min-width: 620px) {
  .reviews-info {
    font-size: 15px;
  }
}
.reviews-info a {
  color: var(--red-h);
  text-decoration: underline;
  text-decoration-color: rgba(232, 41, 58, 0.3);
  text-underline-offset: 3px;
}
.reviews-info a:hover {
  color: #fff;
  text-decoration-color: var(--red);
}
.reviews-info b {
  color: var(--text);
}

/* Stage balnéaire — nouveau */
.review-card--new {
  border-left-color: var(--gold);
  background: linear-gradient(
    135deg,
    rgba(212, 160, 23, 0.04) 0%,
    transparent 100%
  );
  padding: 18px 22px;
}
.review-card--new .review-text {
  color: var(--gold);
  font-family: var(--fh);
  font-weight: 600;
  font-size: 15px;
  font-style: normal;
  letter-spacing: 0.3px;
}

/* Touch devices */
@media (hover: none) {
  .review-card:hover {
    border-left-color: var(--gold);
  }
}

/* Small phones */
@media (max-width: 359px) {
  .review-card {
    padding: 14px 14px 14px 18px;
  }
  .review-text {
    font-size: 14px;
  }
  .review-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
}

/* ============================================================
  Image flottante gauche + texte coule en dessous (Muay-Thai.php uniquement) 
   ============================================================ */
@media (max-width: 619px) {
  .section-img-float {
    display: flex !important;
    flex-direction: column !important;
  }
  .section-img-float > .largeur-article-2,
  .section-img-float > .largeur-article-4 {
    width: 100% !important;
    float: none !important;
    min-width: 0 !important;
    flex: none !important;
  }
  .section-img-float > .largeur-article-2 .image-auto {
    max-height: 280px !important;
    width: 100% !important;
    min-height: unset !important;
  }
}
@media (min-width: 620px) {
  .section-img-float {
    display: block !important;
    flex-direction: unset !important;
    align-items: unset !important;
    max-width: 1000px;
  }
  .section-img-float::after {
    content: "";
    display: table;
    clear: both;
  }
  .section-img-float > .largeur-article-2 {
    float: left !important;
    width: 36% !important;
    max-width: none !important;
    min-width: unset !important;
    margin: 0 !important;
    padding: 12px !important;
    display: block !important;
  }
  .section-img-float > .largeur-article-4 {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    display: block !important;
  }
  .section-img-float > .largeur-article-2 .image-auto {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    max-height: 380px !important;
    display: block !important;
    margin-bottom: 0 !important;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-site {
  background: #0d0d0d;
  border-top: 3px solid var(--red);
  padding: 50px 24px 0;
  margin-top: 0;
}
.footer-inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 48px;
  justify-content: space-around;
}
.footer-col {
  flex: 1;
  min-width: 200px;
}
.footer-title {
  color: var(--gold);
  font-family: var(--ff-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.footer-links li {
  margin-bottom: 7px;
}
.footer-links a {
  color: #999;
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s;
  line-height: 1.4;
}
.footer-links a:hover {
  color: var(--gold);
}
.footer-contact-block {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.03);
}
.footer-contact-block p {
  color: #aaa;
  font-size: 0.85rem;
  margin: 0 0 12px;
}
.footer-btn-contact {
  display: inline-block;
  background: var(--red);
  color: #000 !important;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.2s;
}
.footer-btn-contact:hover {
  background: var(--gold);
}
.footer-bottom {
  max-width: 100%;
  margin: 40px auto 0;
  padding: 16px 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  color: #444;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
@media (max-width: 619px) {
  .footer-inner {
    flex-direction: column;
    gap: 28px;
  }
  .footer-col {
    min-width: 0;
  }
}

/* ============================================================
   PULL-QUOTE — citation intégrée dans l'intro
   ============================================================ */
.intro-quote {
  display: block;
  background: #ffffff;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 20px 0 36px;
  box-shadow:
    0 1px 6px rgba(0, 0, 0, 0.15),
    0 2px 12px rgba(0, 0, 0, 0.08);
  text-decoration: none !important;
  text-align: left !important;
  transition:
    box-shadow var(--t),
    transform var(--t);
  cursor: pointer;
}
.intro-quote:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}
.intro-quote::after {
  display: none !important;
}
.intro-quote-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  text-align: left !important;
}
.intro-quote-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.intro-quote-meta {
  flex: 1;
  min-width: 0;
  text-align: left !important;
}
.intro-quote-name {
  display: block;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  color: #202124;
  text-align: left !important;
}
.intro-quote-source {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--fb);
  font-size: 11px;
  color: #70757a;
  text-align: left !important;
}
.intro-quote-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
  text-align: left !important;
}
.intro-quote-stars {
  color: #fbbc04;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.intro-quote-date {
  font-family: var(--fb);
  font-size: 11px;
  color: #70757a;
}
.intro-quote-text {
  font-family: var(--fb);
  font-size: 13px;
  color: #3c4043;
  line-height: 1.58;
  margin-bottom: 10px;
  text-align: left !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.intro-quote-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left !important;
}
.intro-quote-visited {
  font-family: var(--fb);
  font-size: 11px;
  color: #70757a;
  font-style: italic;
}
.intro-quote-cta {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 600;
  color: #1a73e8;
  white-space: nowrap;
}

/* ============================================================
   SECTION AVIS GOOGLE
   Grille de 4 avis réels, cliquables, redirigeant vers Google.
   Utilisée sur Muay-Thai.php et reservation.php.
   ============================================================ */
.section-avis-google {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 60px 20px 52px;
  box-sizing: border-box;
}
.sag-inner {
  max-width: 1000px;
  margin: 0 auto;
}
.sag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}
.sag-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sag-title {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 5px;
}
.sag-rating-line {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sag-rating-line .sag-stars {
  color: #fbbc04;
  font-size: 19px;
  letter-spacing: 1px;
}
.sag-rating-line .sag-score {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--fb);
}
.sag-rating-line .sag-count {
  font-size: 17px;
  color: var(--text-m);
  font-family: var(--fb);
}
.sag-btn-all {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1.5px solid var(--red);
  border-radius: var(--r);
  color: var(--red);
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  transition:
    background var(--t),
    color var(--t);
}
.sag-btn-all:hover {
  background: var(--red);
  color: #000 !important;
}
.sag-btn-all::after {
  display: none !important;
}

.sag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 36px;
}

.sag-card {
  background: var(--surface2);
  border-radius: var(--rl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  border: 1px solid var(--red); /* #e0e0e0; */  
  height: 100%;
  transition:
    transform var(--t),
    border-color var(--t),
    box-shadow var(--t);
}
.sag-card:hover {
  transform: translateY(-3px);
  border: 3px solid; 
  border-color: #fbbc04; /* #c0c0c0; */
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
.sag-card::after {
  display: none !important;
}

.sag-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.sag-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}
.sag-reviewer-name {
  display: block;
  font-family: var(--fb);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);  /* #202124; */
}
.sag-reviewer-info {
  display: block;
  font-family: var(--fb);
  font-size: 13px;
  color: var(--text); /* #70757a; */
  margin-top: 2px;
}
.sag-card-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.sag-card-star-icons {
  color: #fbbc04;
  font-size: 15px;
  letter-spacing: 0.5px;
}
.sag-card-date {
  font-family: var(--fb);
  font-size: 13px;
  color: var(--text); /* #70757a; */
}
.sag-card-text {
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.65;
  color: var(--surfaceGoogle);  /* #3c4043; */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  flex-grow: 1;
}

.sag-cta-wrap {
  text-align: center;
  padding-top: 8px;
}
.sag-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: #fff;
  color: #202124 !important;
  font-family: var(--fb);
  font-size: 22px;
  font-weight: 700;
  border-radius: var(--r);
  text-decoration: none !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
  transition:
    transform var(--t),
    box-shadow var(--t);
}
.sag-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  color: #202124 !important;
}
.sag-cta-btn::after {
  display: none !important;
}
.sag-tagline {
  margin-top: 14px;
  font-family: var(--fb);
  font-size: 18px;
  color: var(--text-m);
  font-style: italic;
}

@media (max-width: 619px) {
  .section-avis-google {
    padding: 40px 16px 36px;
  }
  .sag-grid {
    grid-template-columns: 1fr;
  }
  .sag-title {
    font-size: 22px;
    letter-spacing: 1px;
  }
  .sag-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .sag-cta-btn {
    padding: 13px 24px;
    font-size: 13px;
  }
}

/* ============================================================
   SECTION ÉTAPES — COMMENT RÉSERVER (reservation.php)
   ============================================================ */
.resa-section {
  background: #0d0d0d;
  padding: 0 32px 80px;
  position: relative;
}

/* Fond subtil : ligne de séparation en haut */
.resa-section::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(200, 16, 46, 0.4),
    transparent
  );
  margin-bottom: 0;
}

/* ── Intro ── */
.resa-intro {
  text-align: center;
  padding: 56px 20px 64px;
}
.resa-subtitle {
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.resa-subtitle-main {
  display: block;
  font-family: var(--fh);
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 0;
}
.resa-divider {
  width: 40px;
  height: 3px;
  background: var(--red);
  margin: 20px auto 0;
  border-radius: 2px;
}

/* ── Grille 4 colonnes ── */
.resa-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  max-width: 1080px;
  margin: 0 auto 36px;
  gap: 0 18px;
}

/* Ligne fine entre les cercles */
.resa-flow::before {
  content: "";
  position: absolute;
  top: 26px;
  left: calc(12.5% + 6px);
  right: calc(12.5% + 6px);
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 0;
}

/* ── Colonne étape ── */
.resa-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

/* ── Cercle numéroté ── */
.resa-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--red);
  color: #000;
  font-family: var(--fh);
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s;
}
.resa-step:hover .resa-circle {
  transform: scale(1.08);
  box-shadow:
    0 0 0 6px rgba(200, 16, 46, 0.18),
    0 6px 22px rgba(200, 16, 46, 0.35);
}

/* ── Carte ── */
.resa-card {
  margin-top: 24px;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 30px 22px 28px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.32s,
    box-shadow 0.32s;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Lueur rouge en haut de chaque carte */
.resa-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(
    180deg,
    rgba(200, 16, 46, 0.1) 0%,
    transparent 100%
  );
  border-radius: 16px 16px 0 0;
  pointer-events: none;
  transition: opacity 0.32s;
  opacity: 0.7;
}
.resa-step:hover .resa-card::before {
  opacity: 1;
}

.resa-step:hover .resa-card {
  transform: translateY(-7px);
  border-color: rgba(200, 16, 46, 0.22);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(200, 16, 46, 0.12);
}

/* Bloc icône — carré arrondi avec gradient rouge */
.resa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(200, 16, 46, 0.22),
    rgba(200, 16, 46, 0.06)
  );
  border: 1px solid rgba(200, 16, 46, 0.2);
  margin-bottom: 20px;
  transition:
    background 0.3s,
    border-color 0.3s;
  position: relative;
  z-index: 1;
}
.resa-step:hover .resa-icon {
  background: linear-gradient(
    135deg,
    rgba(200, 16, 46, 0.35),
    rgba(200, 16, 46, 0.12)
  );
  border-color: rgba(200, 16, 46, 0.4);
}
.resa-icon i {
  font-size: 20px;
  color: var(--red);
}

.resa-title {
  font-family: var(--fh);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}
.resa-desc {
  font-family: var(--fb);
  font-size: 16px;
  color: #BBB;
  line-height: 1.75;
  margin: 0;
  position: relative;
  z-index: 1;
  max-width: 32ch;
}

/* ── Badges réassurance ── */
.resa-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1080px;
  margin: 0 auto 48px;
}
.resa-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  padding: 9px 18px;
  font-family: var(--fb);
  font-size: 12.5px;
  color: #999;
  white-space: nowrap;
  transition:
    border-color 0.2s,
    color 0.2s;
}
.resa-badge-item:hover {
  border-color: rgba(200, 16, 46, 0.3);
  color: #ccc;
}
.resa-badge-item i {
  color: var(--red);
  font-size: 12px;
}

/* ── CTA ── */
.resa-cta-wrap {
  text-align: center;
  max-width: 1080px;
  margin: 0 auto;
}
.resa-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--red);
  color: #000 !important;
  text-decoration: none !important;
  font-family: var(--fh);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 20px 60px;
  border-radius: 6px;
  transition:
    background 0.2s,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s;
  box-shadow: 0 4px 32px rgba(200, 16, 46, 0.38);
}
.resa-cta-btn::after {
  display: none !important;
}
.resa-cta-btn:hover {
  background: var(--red-fonce);  /* #b00018; */
  transform: translateY(-3px);
  box-shadow: 0 14px 48px rgba(200, 16, 46, 0.5);
  color: #fff !important;
}
.resa-cta-sub {
  margin: 16px 0 0;
  font-family: var(--fb);
  font-size: 18px;
  color: #fff;
  letter-spacing: 0.04em;
}
.resa-cta-sub a {
  color: fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.resa-cta-sub a:hover {
  color: var(--red);
}

/* ── Tablette 2 × 2 ── */
@media (max-width: 860px) {
  .resa-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .resa-flow::before {
    display: none;
  }
  .resa-subtitle-main {
    font-size: 30px;
  }
}

/* ── Mobile ── */
@media (max-width: 520px) {
  .resa-section {
    padding: 0 16px 64px;
  }
  .resa-flow {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .resa-intro {
    padding: 40px 0 48px;
  }
  .resa-subtitle-main {
    font-size: 26px;
  }
  .resa-cta-btn {
    padding: 18px 36px;
    font-size: 15px;
    letter-spacing: 0.1em;
  }
}