/* ============================================================
   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; /* grisé, comme dans les "boites"  */
  --surface2: #1c1c1c;
  --surface3: #303030; /* gris plus clair */
  --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: #EE3300;  /* #E02800; /* = 240, 40, 0 */ /*(FF4400)*/
  --red-glow: rgba(200, 16, 46, 0.35);
  --red-survol: #FF051D;
  --jaune: #FFFF69;
  --gold: #d4a017;
  --text: #edebe6; /* blanc légèrement grisé */
/*  --text-m: #8a8680; */
  --text-m: #FFC8C8;
  --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.2;
}

a:link {
  color: var(--text);
  text-decoration: none;
}
a:visited {
  color: var(--text);
  text-decoration: none;
}
a:hover {
  color: var(--red-survol);
  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;
}

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 2s ease-out forwards;
}


/***********************************************************************************************/
/* ============================================================
   BANDEAU
   ============================================================ */
.bandeau {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  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;
  }
} 

/* ============================================================
   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;
  }
}

/* ============================================================
   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;
  }
}

/*inutile, ne fait pas joli 
.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;
  }
} */

/* ============================================================
   BANDEAUX D'ACTIVITé
   Part à gauche de --red: #c8102e; , pour arriver à droite à --bg: #0a0a0a; 
   ============================================================ */
.bandeau-activite {
	font-style: italic;
	background:
	linear-gradient(
	  90deg,
	  rgba(240, 40, 00, 1) 0%,
	  rgba(10, 10, 10, 0.9) 90%
	);
	/* border: 0px solid rgba(212, 210, 23, 0); */
	border-radius: 6px;
	padding: 12px;
	/* margin-bottom: 20px; */
	text-shadow: 3px 3px 4px rgba(0, 0, 0, 1);
	/* box-shadow:
	0 14px 40px rgba(0, 0, 0, 0), 
	inset 0 1px 0 rgba(255, 255, 255, 0); */
}

/* bandeau qui finit dans le gris pour les boites --surface3: #333333: */
.bandeau-activite-gris {
	font-style: italic;
	background:
	linear-gradient(
	  90deg,
	  rgba(240, 40, 00, 1) 0%,
	  rgba(51, 51, 51, 1) 90%
	);
	/* border: 0px solid rgba(212, 210, 23, 0);
	border-radius: 0px; */
	padding: 10px 10px 20px;
	/* margin-bottom: 20px; */
	text-shadow: 3px 3px 4px rgba(0, 0, 0, 1);
	/* box-shadow:
	0 14px 40px rgba(0, 0, 0, 0), 
	inset 0 1px 0 rgba(255, 255, 255, 0); */
}

/* ============================================================
   INTRO SECTION
   ============================================================ */
.intro-section {
  text-align: center;
  max-width: 900px;
  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;
  }
}


.photo-intro {
  /* pour mettre la photo d'intro en dessous du menu et sous les écrits */
  position: absolute;
  left: 0px;
  top: 160px;
  width: 100%;
}

@media (min-width: 620px) {

  /* pour un écran d'au moins 620px */
  .photo-intro {
    position: absolute;
    left: 0px;
    top: 270px;
    width: 100%;
  }
}

/* ============================================================
   CONTENUS — ZONES PRINCIPALES
   ============================================================ */
.contenu {
  /* pour un écran de moins de 320px  */
  position: relative;
  margin-left: auto;
  margin-right: auto;
  /*  left: 50%;                    /*  ATTENTION cela limite la largeur affichée sur le bloc le plus large */
  /*  transform: translate(-50%);   /* ATTENTION cela limite la largeur affichée sur le bloc le plus large */
  padding-left: 3px;
  text-align: left;
  color: var(--text);   /* couleur du texte très légèrement grisée */
  font-family: var(--fb);
  font-size: 15px;
}

@media (min-width: 320px) {

  /* pour un écran d'au moins 320px mais moins de 620  */
  .contenu {
    padding: 15px;
    font-size: 17px;
  }
}

@media (min-width: 620px) {
  .contenu {
    font-size: 18px;
    padding: 18px;
    max-width: 800px;
  }
}

@media (min-width: 1020px) {
  .contenu {
    font-size: 20px;
    padding: 20px;
    max-width: 800px;
  }
}

.contenu-1000 {
  /* pour un écran de moins de 320px  */
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3px;
  text-align: left;
  color: var(--text);
  font-size: 15px;
}

@media (min-width: 320px) {

  /* pour un écran d'au moins 320px mais moins de 620  */
  .contenu-1000 {
    padding: 15px;
    font-size: 17px;
  }
}

@media (min-width: 620px) {

  /* pour un écran d'au moins 620px */
  .contenu-1000 {
    font-size: 18px;
    padding: 18px;
    max-width: 800px;
  }
}

@media (min-width: 1020px) {
  .contenu-1000 {
    font-size: 20px;
    padding: 20px;
    max-width: 1100px;
  }
}

/* plus utilisé semble-t-il  
.contenu-900 {
  /* pour un écran de moins de 320px  */
/*  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3px;
  text-align: left;
  color: #EEEEEE;
  font-size: 15px;
}

@media (min-width: 320px) {

  /* pour un écran d'au moins 320px mais moins de 620  */
/*  .contenu-900 {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    text-align: left;
    color: #EEEEEE;
    font-size: 17px;
  }
}

@media (min-width: 620px) {

  /* pour un écran d'au moins 620px */
/*  .contenu-900 {
    position: relative;
    text-align: left;
    color: #EEEEEE;
    font-size: 18px;
    margin-left: auto;
    margin-right: auto;
    padding: 18px;
    max-width: 800px;
  }
}

@media (min-width: 1020px) {
  .contenu-900 {
    position: relative;
    text-align: left;
    color: #EEEEEE;
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    max-width: 900px;
  }
} */

/* ============================================================
   PAGES DETAIL DE STAGE j'utilise pour le cadre coloré des points forts
   On ajoute juste :
   - une finition visuelle légère (arrondi + ombre) sur les médias
   ============================================================ */

/* Finition visuelle légère sur images et vidéos
   (n'affecte ni les dimensions ni la mise en page) */
.stage-detail-page .image-auto,
.stage-detail-page video.image-auto {
  border-radius: 8px;
}

@media (min-width: 620px) {

  .stage-detail-page .image-auto,
  .stage-detail-page video.image-auto {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }
}



/*** corps du pied de page ***/
.pied {
  position: relative;
  width: 100%;
  margin: 0px;
  text-align: left;
  color: #CCCCCC;
  /* couleur du texte : gris clair */
  font-size: 15px;
  background-color: var(--surface);
  /* couleur du fond : gris foncé */
}

/*** liens du pied de page, doit être identique que la couleur de police du pied de page ***/
.lien-pp:link {
  text-decoration: none;
  color: #CCCCCC;
}

.lien-pp:visited {
  color: #CCCCCC;
  text-decoration: none;
}

.lien-pp:hover {
  color: #999999;
  text-decoration: none;
}


/* ============================================================
   INFOS PRATIQUES
   Bloc encadré avec bordure rouge en haut.
   Utilisé sur les pages de détail des stages (logement, trajet…).
   ============================================================ */
/* l'affichage des infos : photos, texte, etc, dans un cadre gris arrondi de max 900 de large */
.contenu-infos {
  padding: 24px 16px;
  background: var(--surface2);
  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;
  }
}


/* ============================================================
   PAGES DETAIL DE STAGE j'utilise pour le cadre coloré des points forts
   On ajoute juste :
   - une finition visuelle légère (arrondi + ombre) sur les médias
   ============================================================ */

/* Finition visuelle légère sur images et vidéos
   (n'affecte ni les dimensions ni la mise en page) */
.contenu-points-forts .image-auto,
.contenu-points-forts-bleu .image-auto {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

@media (min-width: 620px) {
.contenu-points-forts .image-auto,
.contenu-points-forts-bleu .image-auto {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  }
}
/* l'affichage des points forts dans un cadre vert arrondi */
.contenu-points-forts {
  padding: 10px;
  text-align: left;
  color: #0a0a0a;
  /* couleur du texte en noir */
  font-size: 15px;
  background-color: #22FF66;
  /* couleur du fond : vert */
  border-radius: 10px;
}

@media (min-width: 620px) {
  .contenu-points-forts {
    padding: 15px;
    text-align: left;
    color: #0a0a0a;
    font-size: 17px;
    background-color: #22FF66;
    border-radius: 10px;
  }
}

@media (min-width: 1020px) {
  .contenu-points-forts {
    padding: 15px;
    text-align: left;
    color: #0a0a0a;
    font-size: 20px;
    background-color: #22FF66;
    border-radius: 10px;
  }
}



/* l'affichage des points forts dans un cadre bleu arrondi */
.contenu-points-forts-bleu {
  padding: 10px;
  text-align: left;
  color: #0a0a0a;
  /* couleur du texte en noir */
  font-size: 15px;
  background-color: #00DCE8;
  /* couleur du fond : bleuté */
  border-radius: 10px;
}

@media (min-width: 620px) {
  .contenu-points-forts-bleu {
    padding: 15px;
    text-align: left;
    color: #0a0a0a;
    font-size: 17px;
    background-color: #00DCE8;
    border-radius: 10px;
  }
}

@media (min-width: 1020px) {
  .contenu-points-forts-bleu {
    padding: 15px;
    text-align: left;
    color: #0a0a0a;
    font-size: 20px;
    background-color: #00DCE8;
    border-radius: 10px;
  }
}



/* l'affichage des infos : photos, texte, etc, dans un cadre gris de 900 de large ou moins large selon les écrans */
.contenu-programme {
  padding: 5px;
  text-align: left;
  color: #FFFFFF;
  font-size: 15px;
  background-color: var(--surface3);
  /* couleur du fond : gris */
  /*border-radius: 10px;*/
}

@media (min-width: 620px) {
  .contenu-programme {
    padding: 15px;
    text-align: left;
    color: #FFFFFF;
    font-size: 17px;
    background-color: var(--surface3);
    /*border-radius: 10px;*/
  }
}

@media (min-width: 1020px) {
  .contenu-programme {
    padding: 25px;
    text-align: left;
    color: #FFFFFF;
    font-size: 20px;
    background-color: var(--surface3);
    /*border-radius: 10px;*/
	
  }
}

/* l'affichage des infos dans les pages de description des stages */
.contenu-programme-stage {
  padding: 5px;
  text-align: left;
  color: #FFFFFF;
  font-size: 15px;
  background-color: var(--surface3);
  /* couleur du fond : gris */
  /*border-radius: 10px;*/
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border-top: 2px solid var(--red);
  /* background: linear-gradient(145deg,
      rgba(24, 24, 24, 0.98),
      rgba(10, 10, 10, 0.98));
  color: #e7dfc4; */
  /*box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);*/
}

@media (min-width: 620px) {
  .contenu-programme-stage {
    padding: 15px;
    text-align: left;
    color: #FFFFFF;
    font-size: 17px;
    background-color: var(--surface3);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border-top: 2px solid var(--red);
  }
}

@media (min-width: 1020px) {
  .contenu-programme-stage {
    padding: 25px;
    text-align: left;
    color: #FFFFFF;
    font-size: 20px;
    background-color: var(--surface3);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border-top: 3px solid var(--red);
  }
}

.contenu-programme-stage h2 {
	padding-left: 5px;
}

/* ==========================================================================
  (.contenu-avis)
   Effet : Cadre sombre, bords arrondis, texte jaune/doré italique 
   et grand guillemet en filigrane sur la gauche.
   ========================================================================== */

/* Structure principale du bloc d'avis */
.contenu-avis {
  position: relative;
  padding: 15px 14px 14px 50px; /* Marge de 50px à gauche réservée pour le guillemet */
  background-color: var(--surface3); /* #181818;     /* Fond gris sombre élégant */
  border-radius: 12px;         /* Bords arrondis modernes */
  color: var(---jaune); /* #f5d76e;              /* Texte en jaune/doré clair */
  font-size: 15px;
  font-style: italic;          /* Mise en italique du témoignage */
  line-height: 1.6;
  margin-bottom: 20px;         /* Espacement entre plusieurs avis */
  text-align: left;
}

/* Guillemet géant décoratif en haut à gauche */
.contenu-avis::before {
  content: "\201C";            /* Code CSS correspondant au guillemet ouvrant “ */
  position: absolute;
  top: 4px;
  left: 7px;
  font-family: Georgia, serif; /* Police spéciale pour obtenir une jolie courbe de guillemet */
  font-size: 85px;             /* Très grande taille */
  line-height: 1;
  color: var(--jaune); /* #c8102e;              /* Couleur rouge (remplacer par #D4AF37 si vous préférez du doré) */
  opacity: 0.9;                /* Transparence à 40% pour l'effet filigrane en arrière-plan */
  pointer-events: none;        /* Empêche le symbole de gêner la sélection du texte à la souris */
}

/* Adaptation pour les écrans de tablette et ordinateur */
@media (min-width: 620px) {
  .contenu-avis {
    padding: 24px 20px 20px 62px;
    font-size: 17px;
  }
}

@media (min-width: 1020px) {
  .contenu-avis {
    padding: 28px 24px 24px 68px;
    font-size: 19px;
  }
}


/* l'affichage des avis : dans un cadre gris avec texte en jaune clair */
/*.contenu-avis {
  padding: 5px;
  text-align: left;
  color: #FFFF69;
  /* texte en jaune clair */
/*  font-size: 15px;
  background-color: #1c1c1c;
  /* couleur du fond : gris */
  /*border-radius: 10px;*/
/*}

@media (min-width: 620px) {
  .contenu-avis {
    padding: 15px;
    text-align: left;
    color: #FFFF69;
    font-size: 17px;
    background-color: #1c1c1c;
    /*border-radius: 10px;*/
/*  }
}

@media (min-width: 1020px) {
  .contenu-avis {
    padding: 25px;
    text-align: left;
    color: #FFFF69;
    font-size: 20px;
    background-color: #1c1c1c;
    /*border-radius: 10px;*/
/*  }
}
*/

/* bordure (rouge) pour les avis pas dans un bloc */
.bordure-verticale-avis {
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 5px;
  border-left: 3px solid var(--jaune); /* #c8102e; */
  line-height: 1.15;
}

/* ==================================== */
/* blocs des paragraphes d'informations */
/* idem sans la couleur de police blanche */
.contenu-programme-FAQ {
  padding: 5px;
  text-align: left;
  font-size: 15px;
  background-color: #1c1c1c;
  /* couleur du fond : gris */
  color: #FFFF99;
  /* couleur paille des lettres  */
}

@media (min-width: 620px) {
  .contenu-programme-FAQ {
    padding: 15px;
    text-align: left;
    font-size: 17px;
    background-color: #1c1c1c;
    color: #FFFF99;
    /* couleur paille des lettres  */
  }
}

@media (min-width: 1020px) {
  .contenu-programme-FAQ {
    padding: 25px;
    text-align: left;
    font-size: 20px;
    background-color: #1c1c1c;
    color: #FFFF99;
    /* couleur paille des lettres  */
  }
}





/* ----------- blocs divers et variés ------------------------------------------
RAPPEL : margin : marge extérieure, padding marge intérieure
(important pour les blocs colorés, et pour les 2 la taille des marges est à ajouter à la taille déclarée) */

.bloc-gris {
  background-color: #1c1c1c;
  /* couleur grisée du fond */
  padding: 10px;
}

.bloc-gris-foncé {
  background-color: #112222;
  /* couleur grisée du fond */

}

/* bloc centré, notamment pour les images */
.centré {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.stage-separator {
  display: block;
  margin: 35px auto;
  max-width: 100%;
}

.large {
  width: 100%;
}

/* bordure noire de 1 de large */
.bordure1 {
  border-width: 1px;
  border-style: solid;
  border-color: #0a0a0a;
}

/* gestion taille des images */
.image-auto {
  max-width: 100%;
  height: auto;
}

.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-480 {
  max-width: 480px;
}


/* ------------------  STYLES DE POLICE  ---------------         */
/* pour les commentaires sous les photos */
.police-commentaire {
  font-size: 15px;
  text-align: center;
  font-family: "Times";
}

@media (min-width: 620px) {
  .police-commentaire {
    font-size: 18px;
    text-align: center;
    font-family: "Times";
  }
}

.police-centrée {
  text-align: center;
}

.italique {
  font-style: italic;
}


/* couleur rouge pour les titres (sans taille imposée, à utiliser avec <H2> notamment) */
.police-rouge {
  color: var(--red); /* #FF4400; */
}

/* notamment pour les avis et ce qui est inclus dans les tarifs */
.police-jaune {
  color: var(--jaune);
}

/* notamment pour les avis et ce qui est inclus dans les tarifs */
.police-paille {
  color: #FFFF99;
}

.boitetitredetail {
  font-weight: bold;
  background-color: #CC0011;
  /* rouge */
  color: #FFFFFF;
  /* blanc */
}

/* boite de déco des titres de page quand il n'y a pas un bandeau */
.boitetitre {
  font-weight: bold;
  background-color: #CC0011;
  /* rouge */
  font-size: 22px;
  padding: 8px;
  font-family: "Oleo Script";
  color: #FFFFFF;
  /* blanc */
}

@media (min-width: 500px) {
  .boitetitre {
    font-weight: bold;
    background-color: #CC0011;
    /* rouge */
    font-size: 24px;
    padding: 10px;
    font-family: "Oleo Script";
    color: #FFFFFF;
    /* blanc */
  }
}

@media (min-width: 620px) {

  /* pour un écran d'au moins 620px */
  .boitetitre {
    font-weight: bold;
    background-color: #CC0011;
    /* rouge */
    font-size: 34px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 30px;
    padding-left: 30px;
    font-family: "Oleo Script";
    color: #FFFFFF;
    /* blanc */
  }
}

/* police plus grosse */
.police-info {
  font-size: 18px;
}

@media (min-width: 500px) {
  .police-info {
    font-size: 20px;
  }
}

@media (min-width: 620px) {
  .police-info {
    font-size: 30px;
  }
}

/* police plus grosse */
.police-intro {
  font-size: 18px;
  font-family: "Oleo Script";
}

@media (min-width: 500px) {
  .police-intro {
    font-size: 20px;
    font-family: "Oleo Script";
  }
}

@media (min-width: 620px) {

  /* pour un écran d'au moins 620px */
  .police-intro {
    font-size: 30px;
    font-family: "Oleo Script";
  }
}

/**********************************************************************/
/* ------------------  STYLES DE 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-size: 20px;
  font-family: "Sriracha";
  text-align: center;
}

@media (min-width: 620px) {

  /* pour un écran d'au moins 620px */
  .paragraphe2 {
    font-size: 26px;
    font-family: "Sriracha";
    text-align: center;
  }
}

@media (max-width: 620px) {

  /* pour un écran d'au moins 620px */
  .paragraphe-prix {
    font-size: 14px;
  }
}

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

.ombre-droite-bas {
  box-shadow: 20px 20px 10px #1c1c1c;
  /* largeur 20px en bas et à droite, flouté sur 10px, couleur grise */
}

/* ----------------***********************---------------------- */
/* ------------------  SECTIONS  ---------------         */
.section {
  display: flex;
  flex-wrap: wrap;
  /* pour s'afficher sur plusieurs lignes si besoin est */
  max-width: 1200px;
  /* largeur max de l'écran - ou du moins de cette section */
  /* align-items: center;    si on veut centrer verticalement les deux éléments */
}

.section-pp {
  /* pas de max-width: 1000px;  */
  display: flex;
  flex-wrap: wrap;
  /* pour s'afficher sur plusieurs lignes si besoin est */
}

.section-unique {
  /* aucun effet si petit écran et s'affiche sur une seule colonne dans tous les cas */
  padding: 0px;
}

@media (min-width: 620px) {

  /* pour un écran d'au moins 620px */
  .section-unique {
    /* bloc de maximum 900 de large, et avec des marges intérieures de 10 */
    max-width: 900px;
    padding: 10px;
  }
}


.section-unique-1000 {
  /* aucun effet si petit écran */
  padding: 0px;
}

@media (min-width: 620px) {

  /* pour un écran d'au moins 620px */
  .section-unique-1000 {
    /* bloc de maximum 1000 de large, et avec des marges intérieures de 10 */
    max-width: 1000px;
    padding: 10px;
  }
}

.section2 {
  display: flex;
  flex-wrap: wrap;
  /* pour s'afficher sur plusieurs lignes si besoin est */
  max-width: 800px;
  /* largeur max de l'écran - ou du moins de cette section */
}

.section-partage {
  /* bloc de maximum 600 de large, utilisé pour le cartouche "partager la page" */
  max-width: 600px;
  padding: 10px;
}


.largeur-article {
  flex: 1;
  margin: 10px;
  /* marge extérieure partout de 10px */
  padding: 10px;
  /* marge intérieure partout de 10px */
  min-width: 300px;
  /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}

.largeur-article-2 {
  flex: 1;
  margin: 0px;
  /* marge extérieure partout de 0px */
  padding: 10px;
  /* marge intérieure partout de 10px */
  min-width: 300px;
  /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}

.largeur-article-4 {
  flex: 20;
  margin: 0px;
  /* marge extérieure partout de 0px */
  padding: 10px;
  /* marge intérieure partout de 10px */
  min-width: 300px;
  /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}

.largeur-article-5 {
  flex: 1;
  margin: 0px;
  /* marge extérieure partout de 0px */
  padding: 10px;
  /* marge intérieure partout de 10px */
}

.largeur-article-6 {
  flex: 4;
  margin: 0px;
  /* marge extérieure partout de 0px */
  padding: 10px;
  /* marge intérieure partout de 10px */
  min-width: 300px;
  /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}

.largeur-article-7 {
  flex: 1;
  margin: 0px;
  /* marge extérieure partout de 0px */
  padding: 0px;
  /* marge intérieure partout de 10px */
  min-width: 300px;
  /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}

.largeur-article-8 {
  flex: 1;
  margin: 0px;
  /* marge extérieure partout de 0px */
  padding: 0px;
  /* marge intérieure partout de 10px */
  min-width: 170px;
  /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}

.largeur-article-9 {
  flex: 1;
  margin: 0px;
  /* marge extérieure partout de 0px */
  padding: 10px;
  /* marge intérieure partout de 10px */
  min-width: 200px;
  /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}

.largeur-article-10 {
  flex: 1;
  margin: 0px;
  /* marge extérieure partout de 0px */
  padding: 10px;
  /* marge intérieure partout de 10px */
  min-width: 220px;
  /* largeur minimal du bloc : attention si trop grand alors sur les téléphones portables ça dépasse!!!! */
}

.largeur-article-11 {
  flex: 1;
  margin: 0px;
  /* marge extérieure partout de 0px */
  padding: 10px;
  /* marge intérieure partout de 10px */
  min-width: 248px;
  /* largeur minimal du bloc */
}


/* ----------------***********************---------------------- */
/* ------------------  MARGES  ---------------         */
.marge-int-gauche-10 {
  padding-left: 0px;
  /* pas marge intérieure pour les petits écrans */
}

@media (min-width: 400px) {

  /* pour un écran d'au moins 400px */
  .marge-int-gauche-10 {
    padding-left: 10px;
    /* marge intérieure à gauche de 10px */
  }
}

.marge-int-gauche-20 {
  padding-left: 0px;
  /* pas marge intérieure pour les petits écrans */
}

@media (min-width: 400px) {

  /* pour un écran d'au moins 400px */
  .marge-int-gauche-20 {
    padding-left: 20px;
    /* marge intérieure à gauche de 20px */
  }
}

.marge-int-gauche-20-pp {
  /* pour le pied de page, même sur petits écrans on garde l'écart */
  padding-left: 20px;
}

.marge-int-gauche-40 {
  padding-left: 0px;
  /* pas marge intérieure pour les petits écrans */
}

@media (min-width: 400px) {

  /* pour un écran d'au moins 400px */
  .marge-int-gauche-40 {
    padding-left: 40px;
    /* marge intérieure à gauche de 40px */
  }
}


/***********************************************************************************************/
/* ------------------  STYLES DE TABLEAUX  ---------------         */
.tab-police {
  font-size: 13px;
  text-align: center;
  font-family: var(--fb);
  color: #eeeeee;
}

@media (min-width: 620px) {
  .tab-police {
    font-size: 16px;
    text-align: center;
    font-family: var(--fb);
    color: #eeeeee;
  }
}

.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: rgba(200, 16, 46, 0.4);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 1.05em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ============================================================
   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: 2px solid #e53e3e;
  box-shadow: 0 4px 20px rgba(229, 62, 62, 0.15);
  z-index: 100;
}

@media (min-width: 620px) {
  nav {
    top: 203px;
  }
}

@media (min-width: 1200px) {
  nav {
    top: 303px;
  }
}

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

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

nav ul li a {
  display: block;
  padding: 18px 8px;
  transition: all 0.3s ease;
  font-family: "Inter", "Segoe UI", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  color: #e2e8f0;
  font-size: 11px;
}

@media (min-width: 620px) {
  nav ul li a {
    font-size: 13px;
    padding: 20px 10px;
    letter-spacing: 1.5px;
  }
}

@media (min-width: 1020px) {
  nav ul li a {
    font-size: 14px;
    padding: 24px 15px;
  }
}

nav ul li a:hover {
  color: #ffffff;
  background: rgba(229, 62, 62, 0.15);
  text-shadow: 0 0 12px rgba(229, 62, 62, 0.4);
}

.sous {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  background: rgba(12, 12, 12, 0.98);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9);
  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: 14px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: 14px;
  color: #cbd5e1;
  text-transform: none;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.sous a:hover {
  background: rgba(229, 62, 62, 0.12);
  color: #ffffff;
  padding-left: 28px;
  border-bottom-color: transparent;
}

/* ============================================================
   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;
  }
}

/* ============================================================
   HERO SECTION & VIDEO
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: clamp(380px, 68vh, 780px);
  overflow: hidden;
}

@media (max-width: 619px) {
  .hero {
    height: clamp(220px, 42svh, 360px);
  }
}

@media (min-width: 1020px) {
  .hero {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 720px;
  }
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 619px) {
  .hero-video {
    display: block;
    object-position: center 30%;
  }
}

.hero-video-bg {
  display: none;
}

@media (min-width: 1020px) {
  .hero-video-bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(20px) brightness(0.5);
    transform: scale(1.1);
    z-index: -1;
  }
}

.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: "Segoe Media Center Semibold", sans-serif;
  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: "Script MT Bold", cursive;
  font-size: 1em;
  /* 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: 1em;
  }
}

@media (min-width: 1020px) {
  .hero-title {
    font-size: 64px;
  }
}

/* séparateur : ligne noire illimitée */
/* plus utilisé semble-t-il
.separateur-ligne-noire {
  left: 0px;
  width: 100%;
  height: 1px;
  background-image: url("Muaythai-presentation-1.jpg");
  background-repeat: repeat;
}
*/

/* ----------- FIN POUR LE MENU HORIZONTAL ----------- */


/* ════════════════════════════════════════════
   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;
    top: 0;
    left: 0;
    height: 100vh;
    width: 95vw;
    max-width: 400px;
    background: #ffffff;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-top: 68px;
    margin: 0;
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.18);
  }

  #site-nav.nav-open #nav-menu {
    transform: translateX(0);
  }

  /* -- Bouton X cercle gris -- */
  #nav-close {
    display: flex;
    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;
  }

  nav #nav-menu li {
    flex: none;
    text-align: left;
    border-bottom: 1px solid #eeeeee;
    position: relative;
    list-style: none;
  }

  nav #nav-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: none;
    transition:
      background 0.15s,
      color 0.15s;
    text-decoration: none;
  }

  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;
    color: #cc0000;
  }

  /* -- Li Detail par stage -- */
  nav #nav-menu li.has-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  nav #nav-menu li.has-sub a {
    flex: 1;
  }

  nav #nav-menu li.has-sub a::after {
    display: none;
  }

  nav #nav-menu li.has-sub .sous {
    flex: 0 0 100%;
  }

  .sub-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 56px;
    background: none;
    border: none;
    color: #cc0000;
    font-size: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.25s ease;
  }

  .sub-toggle::before {
    content: ">";
    color: #cc0000;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }

  li.sub-open .sub-toggle {
    transform: rotate(90deg);
  }

  /* -- Sous-menu accordeon -- */
  #nav-menu .sous {
    display: none;
    position: static;
    width: 100%;
    transform: none;
    left: auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: #f9f9f9;
    border-top: 1px solid #eeeeee;
    padding: 4px 0;
  }

  #nav-menu li.sub-open .sous {
    display: flex;
    flex-direction: column;
  }

  #nav-menu .sous li {
    text-align: left;
    border-bottom: 1px solid #efefef;
    list-style: none;
  }

  #nav-menu .sous a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px 13px 32px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition:
      background 0.15s,
      color 0.15s;
  }

  #nav-menu .sous a::after {
    content: ">";
    color: #cc0000;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
  }

  #nav-menu .sous a:hover {
    color: #cc0000;
    background: #f0f0f0;
  }

  #nav-menu .sous a b,
  #nav-menu .sous a strong {
    color: inherit;
    font-weight: 700;
  }

  /* -- Bloc Google Avis -- */
  .nav-m-google {
    border-bottom: none;
  }

  .nav-m-google a {
    display: block;
    padding: 0;
    text-decoration: none;
  }

  .nav-m-google a::after {
    display: none;
  }

  .nav-m-google a:hover {
    background: transparent;
  }

  .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;
    letter-spacing: 0;
  }

  .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;
    letter-spacing: 0;
  }

  .google-count {
    font-size: 13px;
    color: #777;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
  }

  .google-italic {
    font-size: 12px;
    color: #666;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 6px;
    line-height: 1.4;
  }

  .google-name {
    font-size: 11px;
    color: #999;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
  }

  /* -- Bouton CTA -- */
  .nav-m-cta {
    border-bottom: none;
    padding: 0;
  }

  .nav-m-cta a {
    display: block;
    background: linear-gradient(135deg, #e00000 0%, #8b0000 100%);
    color: #fff;
    margin: 12px 15px 22px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(180, 0, 0, 0.45);
    overflow: hidden;
    position: relative;
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .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;
  }

  .nav-m-cta a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(180, 0, 0, 0.55);
    color: #fff;
  }

  .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;
    margin-bottom: 3px;
  }

  .cta-main {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    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);
  }
}


/* ============================================================
   FOOTER
   ============================================================ */
.footer-site {
  background: #0d0d0d;
  border-top: 3px solid #c8102e;
  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: #d4a017;
  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: #d4a017;
}

.footer-contact-block {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 6px;
  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: #c8102e;
  color: #fff;
  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: #c0000a;
}

.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;
  }
}


/* ============================================================
   SCROLL TO TOP
   ============================================================ */
#scroll_to_top {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 30px;
  right: 20px;
  background: #c8102e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(200, 16, 46, 0.35);
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    background 0.25s,
    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 rgba(200, 16, 46, 0.35);
  background: var(--red-survol);
}

#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;
}

#scroll_to_top img {
  width: 38px;
}


/* ============================================================
   BOUTON CONTACT FLOTTANT
   ============================================================ */
.floating-contact {
  position: fixed;
  bottom: 30px;
  left: 20px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--red);
  color: #fff;
  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 rgba(200, 16, 46, 0.35);
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    background 0.25s,
    opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
}

.floating-contact.visible {
  opacity: 1;
  pointer-events: auto;
}

.floating-contact:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 35px rgba(200, 16, 46, 0.35);
  background: var(--red-survol);
  color: #fff;
  text-decoration: none;
}

.floating-contact svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.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;
  }
}


/* ============================================================
   PULL-QUOTE — citation intégrée dans l'intro
   ============================================================ */
.intro-quote {
  display: block;
  background: var(--surface);
  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;
  text-align: left;
  transition:
    box-shadow 0.25s,
    transform 0.25s,
	border-color 0.25s;
  cursor: pointer;
  border: 1px solid var(--red);
}

.intro-quote:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
  border-color: var(--gold);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.intro-quote::after {
  display: none;
}

.intro-quote-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  text-align: left;
}

.intro-quote-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.intro-quote-meta {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.intro-quote-name {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}

.intro-quote-source {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 15px;
  color: var(--text-m);
  text-align: left;
}

.intro-quote-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
  text-align: left;
}

.intro-quote-stars {
  color: #fbbc04;
  font-size: 13px;
  letter-spacing: 0.3px;
}

/* .intro-quote-date {
  font-size: 11px;
  color: #70757a;
} */

.intro-quote-text {
  font-size: 16px;
  color: var(--text);
  line-height: 1.58;
  margin-bottom: 10px;
  text-align: left;
  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;
}

.intro-quote-visited {
  font-size: 14px;
  color: var(--text);
  font-style: italic;
}

.intro-quote-cta {
  font-size: 18px;
  font-weight: 600;
  color: var(--red);
  white-space: nowrap;
}

.intro-quote-card {
  background: #ffffff;
  border-radius: 12px;
  
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--red);
  height: auto;
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}

.itro-quote-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.intro-quote-card::after {
  display: none;
}

/* ============================================================
   SECTION AVIS GOOGLE
   ============================================================ */
.section-avis-google {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #1c1c1c;
  border-top: 1px solid #2a2a2a;
  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-weight: 800;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #edebe6;
  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: 15px;
  letter-spacing: 1px;
}

.sag-rating-line .sag-score {
  font-size: 14px;
  font-weight: 700;
  color: #edebe6;
}

.sag-rating-line .sag-count {
  font-size: 13px;
  color: #8a8680;
}

.sag-btn-all {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1.5px solid #c8102e;
  border-radius: 6px;
  color: #c8102e;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition:
    background 0.25s,
    color 0.25s;
}

.sag-btn-all:hover {
  background: #c8102e;
  color: #fff;
}

.sag-btn-all::after {
  display: none;
}

.sag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  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;
}

.resa-section::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(200, 16, 46, 0.4),
      transparent);
  margin-bottom: 0;
}

.resa-intro {
  text-align: center;
  padding: 56px 20px 64px;
}

.resa-subtitle {
  font-size: 15px;
  font-weight: 600;
  color: #c8102e;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.resa-subtitle-main {
  display: block;
  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: #c8102e;
  margin: 20px auto 0;
  border-radius: 2px;
}

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

.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;
}

.resa-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.resa-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #c8102e;
  color: #fff;
  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);
}

.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;
}

.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);
}

.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: #c8102e;
}

.resa-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.resa-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.75;
  margin: 0;
  position: relative;
  z-index: 1;
  max-width: 32ch;
}

.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-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: #c8102e;
  font-size: 12px;
}

.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);
  font-family: var(--fh);
  color: #fff;
  text-decoration: none;
  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;
}

.resa-cta-btn:hover {
  background: var(--red-survol);
  transform: translateY(-3px);
 /* box-shadow: 0 14px 48px rgba(200, 16, 46, 0.5); */
  box-shadow: 0 14px 48px var(--red-survol);
  color: #fff;
}

.resa-cta-sub {
  margin: 16px 0 0;
  font-size: 18px;
  color: var(--text); /* #3a3a3a; */
  letter-spacing: 0.04em;
}

.resa-cta-sub a {
  color: var(--m-text); /* #555; */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.resa-cta-sub a:hover {
  color: #c8102e;
}

@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;
  }
}

@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;
  }
}


/* ============================================================
   STAGE FINDER — QUICK NAVIGATION
   ============================================================ */
.stage-finder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 32px 0 16px;
}

@media (min-width: 480px) {
  .stage-finder {
    gap: 16px;
  }
}

@media (min-width: 800px) {
  .stage-finder {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin: 40px 0 20px;
  }
}

@media (max-width: 380px) {
  .stage-finder {
    gap: 8px;
  }
}

.stage-finder-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s;
}

@media (min-width: 800px) {
  .stage-finder-card {
    aspect-ratio: 16 / 9;
  }
}

.stage-finder-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(200, 16, 46, 0.25);
  border-color: rgba(200, 16, 46, 0.4);
}

@media (hover: none) {
  .stage-finder-card:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.06);
  }

  .stage-finder-card:active {
    transform: scale(0.97);
  }
}

.stage-finder-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.stage-finder-card:hover img {
  transform: scale(1.08);
}

.stage-finder-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  text-decoration: none;
  transition: background 0.4s;
}

.stage-finder-card:hover .stage-finder-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(200, 16, 46, 0.1) 60%);
}

.stage-finder-overlay:hover {
  text-decoration: none;
}

.stage-finder-name {
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
  line-height: 1.2;
  padding: 0 12px;
  margin-bottom: 12px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(4px);
}

.stage-finder-card:hover .stage-finder-name {
  transform: translateY(0);
}

.stage-finder-name::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: #c8102e;
  margin-top: 8px;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.stage-finder-card:hover .stage-finder-name::after {
  width: 40px;
}

.stage-finder-vibe {
  background: rgba(10, 10, 10, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: #e8c682;
  margin: 0;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
  font-weight: 500;
  letter-spacing: 0.5px;
  opacity: 1;
  transition: color 0.4s, background 0.4s;
}

.stage-finder-card:hover .stage-finder-vibe {
  background: rgba(0, 0, 0, 1);
  color: #fff;
}

@media (min-width: 620px) {
  .stage-finder-card {
    aspect-ratio: 3 / 2;
  }

  .stage-finder-name {
    font-size: 16px;
    letter-spacing: 2px;
    padding: 0 16px;
  }

  .stage-finder-vibe {
    font-size: 14px;
    padding: 12px 16px;
  }
}

@media (max-width: 359px) {
  .stage-finder-name {
    font-size: 11px;
    letter-spacing: 1px;
    padding: 0 8px;
  }

  .stage-finder-vibe {
    font-size: 11px;
    padding: 8px;
  }
}

.stage-finder-title {
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--red);
  text-align: center;
  margin-top: 24px;
  margin-bottom: 12px;
}

@media (min-width: 620px) {
  .stage-finder-title {
    font-size: 24px;
    letter-spacing: 3px;
    margin-top: 32px;
    margin-bottom: 16px;
  }
}



/* ============================================================
   STAGE CARDS (MODERN & SAFE)
   ============================================================ */
.stage-card {
  margin-bottom: 60px;
  background-color: var(--surface2);
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stage-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(200, 16, 46, 0.2);
}
/*
.stage-card-header {
  position: relative;
  overflow: hidden;
}

.stage-card-header img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.stage-card:hover .stage-card-header img {
  transform: scale(1.03);
}
*/
/*.contenu-programme {
  padding: 24px;
}

@media (min-width: 620px) {
  .contenu-programme {
    padding: 32px;
  }
}

.contenu-programme h2 {
  margin-bottom: 15px;
} */

/* ============================================================
   TAG PILLS
   ============================================================ */
.stage-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.tag-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid #333;
  color: #ccc;
  background-color: #1a1a1a;
}

.tag-pill--nature {
  color: #66bb6a;
  border-color: rgba(102, 187, 106, 0.3);
  background: rgba(102, 187, 106, 0.08);
}

.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-survol);
  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--city {
  color: #d4a017;
  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);
}

/* ============================================================
   STAGE META
   ============================================================ */
.stage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #2a2a2a;
}

.stage-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 12px;
  color: #bbbbbb;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
}

.stage-meta span:hover {
  background: rgba(200, 16, 46, 0.08);
  border-color: rgba(200, 16, 46, 0.25);
  color: #dddddd;
}

.meta-location::before {
  content: "📍";
  font-size: 13px;
}

.meta-level::before {
  content: "🥊";
  font-size: 13px;
}

.meta-vibe::before {
  content: "✨";
  font-size: 13px;
}

@media (max-width: 619px) {
  .stage-meta {
    gap: 8px;
  }

  .stage-meta span {
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* ============================================================
   CTA BUTTON
   ============================================================ */
.btn-cta {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 28px;
  background-color: var(--red); /* #c8102e; */
  color: #ffffff !important;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(200, 16, 46, 0.3);
}

.btn-cta:hover {
  background-color: var(--red-survol);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(200, 16, 46, 0.5);
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-info {
  background: rgba(212, 175, 55, 0.07);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 1.6;
  color: #eeeeee;
}

.reviews-info a {
  color: #dfba6b;
  text-decoration: underline;
  text-decoration-color: rgba(223, 186, 107, 0.4);
}

.reviews-info a:hover {
  color: #ffffff;
}

.reviews {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 15px;
}

.review-card {
  flex: 1;
  background: linear-gradient(145deg, #181818, #111111);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 28px 24px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.review-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #e53e3e, #800000);
  border-radius: 12px 0 0 12px;
}

.review-card::after {
  content: "”";
  position: absolute;
  top: -10px;
  right: 20px;
  font-size: 80px;
  color: rgba(255, 255, 255, 0.03);
  font-family: Georgia, serif;
  pointer-events: none;
}

.review-text {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: #dfdfdf;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.3px;
  flex-grow: 1;
  position: relative;
  z-index: 2;
}

.review-highlight {
  color: #ffcccc;
  font-weight: 600;
  background: rgba(229, 62, 62, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  font-style: normal;
  border: 1px solid rgba(229, 62, 62, 0.2);
}

.review-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 2;
}

.review-author div {
  display: flex;
  flex-direction: column;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e53e3e, #990000);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.4);
}

.review-name {
  font-weight: 700;
  color: #eeeeee;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.review-context {
  font-size: 12px;
  color: #888888;
}

.review-date {
  font-size: 12px;
  color: #666666;
  margin-left: auto;
  font-weight: bold;
}

/* ============================================================
   STAGE LANDSCAPE
   ============================================================ */
.stage-landscape {
  margin-top: 30px;
  border-radius: 12px;
  overflow: hidden;
}

.stage-landscape img {
  width: 100%;
  display: block;
  border-radius: 12px;
}


/* ============================================================
   TARIFS PAGE (stage-tarifs.php)
   Custom safe design
   ============================================================ */
.tarifs-page {
  padding-top: 20px;
}

.tarifs-main-title {
  font-size: 32px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tarifs-lead {
  text-align: center;
  font-size: 16px;
  color: #cccccc;
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.tarifs-hero-media {
  display: block;
  margin-bottom: 30px;
}

.tarifs-rules {
  background: linear-gradient(145deg, #181818, #111111);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.tarifs-rules h3 {
  color: #c8102e;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.tarifs-bullets {
  margin-left: 20px;
  margin-bottom: 15px;
  color: #bbbbbb;
}

.tarifs-bullets li {
  margin-bottom: 8px;
}

.tarifs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 50px;
}

.tarifs-nav-chip {
  display: inline-block;
  padding: 10px 20px;
  background-color: #1a1a1a;
  border: 1px solid #333333;
  color: #dddddd !important;
  border-radius: 30px;
  text-decoration: none !important;
  font-weight: bold;
  font-size: 13px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.tarifs-nav-chip:hover {
  background-color: #c8102e;
  border-color: #c8102e;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.4);
}

.tarif-section {
  margin-bottom: 60px;
  background-color: var(--surface);
  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-direction: column;
  padding: 20px 24px;
  border-bottom: 1px solid #2a2a2a;
  background: #111111;
}

@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-block;
  background-color: #c8102e;
  color: #ffffff !important;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none !important;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

.tarif-link-stage:hover {
  background-color: var(--red-survol);
}

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

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

.tarifs-contact {
  background: linear-gradient(145deg, #1a0505, #110000);
  border: 1px solid rgba(200, 16, 46, 0.3);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  margin-bottom: 20px;
}

.tarifs-contact h3 {
  color: #ffffff;
  margin-bottom: 15px;
}

.tarifs-convertisseur {
  text-align: center;
  padding: 20px;
  background-color: #1a1a1a;
  border-radius: 12px;
  color: #999999;
  font-size: 14px;
}

.tarifs-convertisseur a {
  color: #d4a017 !important;
  text-decoration: underline !important;
}


/* ============================================================
   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: 18px;
  padding-bottom: 28px;
}

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

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

.tarifs-hero {
  background:
    radial-gradient(circle at 85% 10%,
      rgba(212, 160, 23, 0.14),
      transparent 40%),
    linear-gradient(150deg,
      rgba(200, 16, 46, 0.22) 0%,
      rgba(20, 20, 20, 0.96) 45%,
      rgba(10, 10, 10, 1) 100%);
  border: 1px solid rgba(212, 160, 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 #d4a017;
  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;
  text-align: center;
  min-height: 40px;
  padding: 6px 10px;
  line-height: 1.2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 15px;
  letter-spacing: 0.5px;
  color: #fff;
  transition:
    background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tarifs-nav-chip:hover {
  background: #c8102e;
  border-color: #c8102e;
  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 #222222;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
  scroll-margin-top: 94px;
}

.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-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-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: 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);
}

.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;
  }
}

/* ============================================================
   FAQ / PROGRAMME SPÉCIAL
   ============================================================ */
.contenu-programme-FAQ {
  padding: 16px;
  background: #111111;
  color: #ffff99;
  font-size: 15px;
  border-radius: 12px;
}

@media (min-width: 620px) {
  .contenu-programme-FAQ {
    padding: 24px;
    font-size: 17px;
  }
}

@media (min-width: 1020px) {
  .contenu-programme-FAQ {
    padding: 28px;
    font-size: 18px;
  }
}

/* ============================================================
   FAQ PAGE — FAQ-mt.php
   Refonte visuelle moderne, simple d'usage, sans modifier le contenu.
   ============================================================ */
.faq-page {
  max-width: 1080px;
  padding-top: 10px;
}

.faq-page h1 {
  margin-bottom: 8px;
}

.faq-page h2 {
  scroll-margin-top: 95px;
  margin-top: 20px;
  margin-bottom: 8px;
  padding-left: 10px;
  border-left: 3px solid #c8102e;
  line-height: 1.15;
}

.faq-quick-nav {
  margin: 6px 0 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.faq-quick-nav a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(140deg,
      rgba(200, 16, 46, 0.16),
      rgba(20, 20, 20, 0.95));
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-quick-nav a:hover {
  transform: translateY(-1px);
  border-color: #c8102e;
  background: linear-gradient(140deg,
      rgba(200, 16, 46, 0.35),
      rgba(20, 20, 20, 1));
  color: #fff;
}

.faq-page .contenu-programme-FAQ {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border-top: 2px solid rgba(200, 16, 46, 0.9);
  background: linear-gradient(145deg,
      rgba(24, 24, 24, 0.98),
      rgba(10, 10, 10, 0.98));
  color: #e7dfc4;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  padding: 16px 14px;
  margin-bottom: 12px;
}
/* 
.faq-page .contenu-programme-FAQ b {
  display: block;
  color: #fff;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
} */

.faq-page .contenu-programme-FAQ .marge-int-gauche-20 {
  padding-left: 0;
  color: #ddd8cf;
  line-height: 1.62;
}

.faq-page .contenu-programme-FAQ .section {
  align-items: flex-start;
  gap: 14px;
}

.faq-page .contenu-programme-FAQ .largeur-article-2,
.faq-page .contenu-programme-FAQ .largeur-article-6 {
  min-width: 0;
  padding: 0;
}

.faq-page .contenu-programme-FAQ .image-auto {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

.faq-page .contenu-infos {
  margin-top: 26px;
}

@media (min-width: 620px) {
  .faq-page {
    padding-top: 14px;
  }

  .faq-page h2 {
    margin-top: 26px;
  }

  .faq-quick-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
  }

  .faq-quick-nav a {
    min-height: 42px;
    font-size: 16px;
  }

  .faq-page .contenu-programme-FAQ {
    padding: 20px 18px;
    margin-bottom: 14px;
  }

/*  .faq-page .contenu-programme-FAQ b {
    font-size: 28px;
  } */
}

@media (max-width: 619px) {
  .faq-page h2 {
    margin-top: 14px;
  }

  .faq-quick-nav a {
    font-size: 13px;
    min-height: 38px;
  }

  /* .faq-page .contenu-programme-FAQ b {
    font-size: 20px;
  } */
}