/* style.css - PALETTE PANTONE 2026 & STYLE ÉDITORIAL "ZOE SPIRIT" */

:root {
  /* Nouvelle palette Pantone */
  --soft-clay: #F2E3D5;          /* Fond principal enveloppant */
  --blush-terracotta: #E4B7A1;   /* Teinte douce secondaire */
  --classic-terracotta: #C76A4A; /* Accents & Boutons principaux */
  --burnt-sienna: #A85438;       /* Terracotta intense */
  --deep-clay-brown: #5E3A2A;    /* Textes & Contrastes forts */

  /* Touches de lumière */
  --or-satine: #D4AF37;          /* Filets & Bordures dorées */
  --blanc-creme: #FDFBF7;        /* Fond des cartes & Blocs détachés */

  /* Alias de compatibilité */
  --bg-creme: var(--soft-clay);
  --terracotta: var(--classic-terracotta);
  --texte-anthracite: var(--deep-clay-brown);

  /* Typographies */
  --font-titres: 'Playfair Display', serif;
  --font-texte: 'Montserrat', sans-serif;
 /* --font-script: 'Alex Brush', cursive;*/
  --font-script: 'Italiana', serif;

}

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

body {
  font-family: var(--font-texte);
  background-color: var(--soft-clay);
  color: var(--deep-clay-brown);
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3 { 
  font-family: var(--font-titres); 
  font-weight: normal; 
}

a { 
  text-decoration: none; 
  color: inherit; 
}

/* SUPPRESSION ABSOLUE DES PUCES ET MARGES DE LISTE */
header ul,
header li,
nav ul,
nav li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}
/* old with calicaphic policy
.titre-script {
  font-family: var(--font-script);
  color: var(--burnt-sienna);
  font-size: 3.4rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: normal;
}
*/

.titre-script {
    font-family: var(--font-script);
    color: var(--burnt-sienna);
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1rem;
    font-weight: 400;
    letter-spacing: 1px;
}

.titre-script.centre {
  text-align: center;
  margin-bottom: 2.5rem;
}
/* --- Titre long spécifique (ex: "Ça se passe ici...") --- */
.titre-script.titre-long {
    font-size: clamp(1.4rem, 2.3vw, 2.2rem); /* Plus petit sur ordi pour les phrases longues */
    line-height: 1.25;
}
/* --- Adaptation MOBILE pour l'ensemble des titres --- */
@media (max-width: 768px) {
    .titre-script {
        font-size: clamp(2.3rem, 8vw, 3.2rem); /* Encore plus généreux et bien lisible */
        letter-spacing: 0.5px;
    }

    .titre-script.titre-long {
        font-size: clamp(1.8rem, 8vw, 3.2rem);
    }
}
.conteneur-principal {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

/* --- HEADER & NAVIGATION --- */
header {
  padding: 1.2rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  background-color: var(--soft-clay);
  position: relative;
  z-index: 1000;
  max-width: 1200px;
  margin: 0 auto; 
  width: 100%;
}

.logo-conteneur { display: inline-block; z-index: 1010; }
.logo-img-site { height: 65px; width: auto; display: block; transition: transform 0.3s; }
.logo-conteneur:hover .logo-img-site { transform: scale(1.03); }

.menu-mobile-header {
  display: none;
}

/* Icône Burger (Mobile) */
.burger-icone {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  cursor: pointer;
  z-index: 1010;
}

.burger-icone span {
  display: block;
  width: 100%;
  height: 2.5px;
  background-color: var(--deep-clay-brown);
  border-radius: 2px;
}

/* --- NAVIGATION MOBILE (< 992px) --- */
@media (max-width: 991px) {
  #nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--blanc-creme);
    z-index: 9999;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
  }

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

  /* En-tête mobile (Logo + Croix) */
  .menu-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(94, 58, 42, 0.1);
  }

  .logo-mobile {
    height: 50px;
    width: auto;
  }

  .btn-fermer-menu {
    background: none;
    border: none;
    font-size: 2.5rem;
    color: var(--deep-clay-brown);
    cursor: pointer;
    line-height: 1;
    padding: 0 0.5rem;
  }

  #nav-menu > ul {
    display: flex;
    flex-direction: column;
  }

  #nav-menu > ul > li {
    border-bottom: 1px solid rgba(94, 58, 42, 0.08);
  }

  #nav-menu > ul > li > a {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.2rem;
    color: var(--deep-clay-brown);
    font-weight: 500;
    display: block;
    padding: 1rem 0;
  }

  /* --- SOUS-MENUS REPLIÉS PAR DÉFAUT --- */
  .sous-menu {
    display: none;
    padding-left: 1.2rem;
    padding-bottom: 0.8rem;
  }

  .sous-menu li a {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    color: var(--burnt-sienna);
    display: block;
    padding: 0.4rem 0;
  }

  /* --- OUVERTURE AU SURVOL / CLIC --- */
  .parent-menu:hover > .sous-menu,
  .parent-menu.open > .sous-menu {
    display: block;
  }
}

@media (max-width: 880px) {
  .sous-menu {
    display: none; /* Masqué par défaut */
  }

  .parent-menu.open > .sous-menu {
    display: block; /* Visible uniquement si .open est présent */
  }
}

/* --- NAVIGATION DESKTOP (>= 992px) --- */
@media (min-width: 992px) {
  .burger-icone { display: none; }
  header { justify-content: center; gap: 3rem; }
  nav { position: static; max-height: none; width: auto; box-shadow: none; overflow: visible; background: transparent; }
  nav ul { display: flex; flex-direction: row; gap: 2.5rem; list-style: none; }
  nav ul li { position: relative; }
  
  /* Typographie adoucie avec DM Sans */
  nav ul li > a { 
    display: block; 
    padding: 0.8rem 0; 
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem; 
    font-weight: 400;
    letter-spacing: 0.3px; 
  }
  
  /* Sous-menu arrondi & ombre douce */

  .sous-menu {
  display: none; 
  position: absolute; 
  top: 100%; 
  left: 50%; 
  transform: translateX(-50%);
  background: var(--blanc-creme); 
  padding: 1.2rem 1.6rem; 
  border: 1px solid var(--or-satine);
  border-radius: 35px;
  min-width: 240px; 
  box-shadow: 0 15px 40px rgba(94, 58, 42, 0.45), 0 6px 15px rgba(94, 58, 42, 0.25); 
  text-align: left; 
}
  
  /* Espacement réduit entre les sous-éléments */
  .sous-menu li a { 
    display: block; 
    padding: 0.25rem 0; 
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--deep-clay-brown);
    transition: color 0.2s ease; 
  }

  .sous-menu li a:hover { 
    color: var(--classic-terracotta); 
  }

  .parent-menu:hover .sous-menu { 
    display: block; 
  }
}

/* --- BANDEAU DÉFILANT --- */
.bandeau-info { 
  background-color: var(--burnt-sienna); 
  color: #fff; 
  overflow: hidden; 
  white-space: nowrap; 
  padding: 0.5rem 0; 
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.bandeau-texte { 
  display: inline-block; 
  animation: defilement 20s linear infinite; 
}

@keyframes defilement { 
  0% { transform: translateX(100vw); } 
  100% { transform: translateX(-100%); } 
}

/* --- HERO ÉMOTIONNEL --- */
.hero {
  text-align: center; 
  padding: 6rem 1.5rem 4rem 1.5rem; 
  background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.05)), 
	/*Moka voile 46,32,28 ou 105,50,38 */
    url('gallerie/Bandeau-acceuil3.jpg');
  background-repeat: no-repeat;
  background-size: cover; 
  background-position: center calc(50% + var(--parallax-offset, 0px));
}

.hero-hook {
  font-family: var(--font-titres);
  font-size: 2.8rem;
  color: var(--deep-clay-brown);
  max-width: 850px;
  margin: 0 auto 0.5rem auto;
  line-height: 1.2;
}

/* old whith caligraphic policy 
.hero-hook-script {
  display: block;
  font-family: var(--font-script);
  color: var(--burnt-sienna);
  font-size: 4rem;
  margin-top: 0.2rem;
}
*/

.hero-hook-script {
    display: block;
    font-family: var(--font-script);
    color: var(--burnt-sienna);
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    margin-top: 0.2rem;
    letter-spacing: 1.5px;
}

.hero-separateur {
  width: 120px;
  height: 1px;
  background-color: var(--or-satine);
  margin: 1.5rem auto;
}

.hero-promesse {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--deep-clay-brown);
  margin-bottom: 2.5rem;
  font-style: italic;
}

.hero-reponses-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 950px;
  margin: 2rem auto 2.5rem auto;
  text-align: left;
}

@media (min-width: 768px) {
  .hero-reponses-grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bloc-reponse {
  background: rgba(253, 251, 247, 0.65);
  padding: 1.5rem;
  border-radius: 6px;
  border-left: 2px solid var(--classic-terracotta);
}

.bloc-reponse h3 {
  font-size: 1.05rem;
  color: var(--burnt-sienna);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bloc-reponse p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--deep-clay-brown);
}

.btn-principal {
  display: inline-block; 
  padding: 0.8rem 2.2rem; 
  background-color: var(--classic-terracotta);
  color: #fff; 
  border-radius: 30px; 
  border: 1px solid var(--or-satine); 
  transition: all 0.3s; 
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.btn-principal:hover { 
  background-color: transparent; 
  color: var(--burnt-sienna); 
  border-color: var(--burnt-sienna);
}

/* --- Ajustements bloc réponse Hero --- */
.lien-hero-plus {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--burnt-sienna);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.lien-hero-plus:hover {
  color: var(--classic-terracotta);
}

.btn-tel-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0;
  padding: 0.4rem 0.9rem;
  background-color: var(--classic-terracotta);
  color: #fff !important;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-tel-hero:hover {
  background-color: var(--burnt-sienna);
  transform: translateY(-1px);
}
/* --- SPOTIFY --- */
.spotify-widget { 
  position: relative; margin: 2rem auto; padding: 0 1.5rem; width: 100%; max-width: 500px; z-index: 10; 
}
.close-spotify {
  position: absolute; top: -10px; right: 5px; width: 26px; height: 26px;
  background-color: var(--burnt-sienna); color: #fff; border: 2px solid var(--soft-clay);
  border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 20;
}
@media (min-width: 992px) {
  .spotify-widget { position: fixed; bottom: 20px; right: 20px; width: 340px; margin: 0; padding: 0; box-shadow: 0 12px 30px rgba(0,0,0,0.1); border-radius: 12px; z-index: 2000; }
  .close-spotify { right: -10px; }
}

/* --- SECTIONS CONTENU --- */
.intro-choix, .activite { 
  display: flex; flex-direction: column; align-items: center; padding: 4rem 0; gap: 2.5rem; 
}

.intro-img, .activite-img { 
  width: 100%; max-width: 500px; border-radius: 6px; overflow: hidden; box-shadow: 12px 12px 0px rgba(228, 183, 161, 0.4); 
}
.intro-img img, .activite-img img { width: 100%; height: auto; display: block; }

@media (min-width: 768px) {
  .intro-choix, .activite { flex-direction: row; text-align: left; }
  .activite:nth-child(even) { flex-direction: row-reverse; }
  .intro-texte, .activite-texte { flex: 1; padding-right: 2rem; }
  .intro-img, .activite-img { flex: 1; }
}

.separation { border: 0; height: 1px; background: rgba(212, 175, 55, 0.25); margin: 2rem 0; }

/* --- SECTION COMMUNAUTÉ --- */
.section-communaute {
  background-color: var(--burnt-sienna);
  color: var(--blanc-creme);
  text-align: center;
  padding: 5rem 1.5rem;
  margin: 0rem 0;
  width: 100%;
}
.section-communaute .titre-script { color: var(--blanc-creme); font-size: 4rem; }
.communaute-separateur { width: 200px; height: 1px; background-color: var(--or-satine); margin: 0.5rem auto 2rem auto; }
.texte-communaute { max-width: 750px; margin: 0 auto 2rem auto; font-size: 1.05rem; }

.btn-communaute {
  display: inline-block; padding: 0.8rem 2.2rem; background-color: var(--blanc-creme);
  color: var(--burnt-sienna); border-radius: 30px; border: 1px solid var(--or-satine); font-weight: bold; transition: all 0.3s; 
}
.btn-communaute:hover { background-color: transparent; color: var(--blanc-creme); }

/* --- SECTION ÉDITORIALE PLEINE LARGEUR --- */
.section-editorial-pleine-largeur {
  width: 100%;
  background-color: var(--blanc-creme);
  margin: 3.5rem 0;
  padding: 0;
  position: relative;
}

.editorial-conteneur-interne {
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* --- MOBILE (< 992px) --- */
.editorial-img-portrait img,
.editorial-img-grande img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 4px;
}

.editorial-texte {
  text-align: left;
  padding: 2rem 0;
}

.editorial-texte .titre-script {
  margin-bottom: 1.2rem;
  text-align: left;
}

.editorial-p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--deep-clay-brown);
  margin-bottom: 1rem;
}

.editorial-phrase-or {
  font-family: var(--font-titres);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--burnt-sienna);
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--or-satine);
  line-height: 1.4;
}

/* --- DESKTOP (>= 992px) --- */
@media (min-width: 992px) {
  .section-editorial-pleine-largeur {
    min-height: 85vh;
    display: flex;
    align-items: center;
  }

  .editorial-conteneur-interne {
    width: 100%;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 280px 1fr 380px;
    gap: 3.5rem;
    align-items: stretch;
  }

  /* 1. Photo gauche */
  .editorial-img-portrait {
    display: flex;
    height: 100%;
  }

  .editorial-img-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  /* 2. Texte centre */
  .editorial-texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
  }

  .editorial-texte a.btn-principal {
    display: inline-block;
    width: auto;
    align-self: flex-start;
  }

  /* 3. Photo droite */
  .editorial-img-grande {
    position: absolute;
    top: 0;
    bottom: 0;
    right: max(1.5rem, calc((100% - 1350px) / 2 + 1.5rem));
    width: 380px;
    height: 100%;
  }

  .editorial-img-grande img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	object-position: 35% center; /* Cadrage aligné à droite */
    border-radius: 0;
  }
}
/* --- SECTION LES TROIS PORTES (ARCHES TAILLE INITIALE & CLIQUABLES) --- */
.section-trois-portes {
  background-color: var(--soft-clay);
  padding: 3rem 0 2.5rem 0;
  text-align: center;
}

/* Titre principal agrandi */
.section-trois-portes .titre-script {
 /* font-size: 3.5rem;*/
  margin-bottom: 0.2rem;
}

.portes-sous-titre {
  font-size: 0.95rem;
  color: var(--burnt-sienna);
  margin-bottom: 1.8rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.portes-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.porte-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--or-satine);
}

.porte-carte:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Lien sur toute l'arche */
.porte-arche-lien {
  display: block;
  width: 100%;
  max-width: 280px;
}

/* Format Arche (Retour taille initiale) */
.porte-arche-img {
  width: 100%;
  height: 350px;
  border-top-left-radius: 140px;
  border-top-right-radius: 140px;
  overflow: hidden;
  margin-bottom: 0.8rem;
  box-shadow: 0 8px 20px rgba(94, 58, 42, 0.08);
}

.porte-arche-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.porte-arche-lien:hover .porte-arche-img img {
  transform: scale(1.04);
}

/* Textes et espacements sous l'arche */
.porte-carte h3 {
  font-size: 1.7rem;
  color: var(--deep-clay-brown);
  margin-bottom: 0.1rem;
}

.porte-slogan {
  font-family: var(--font-titres);
  font-style: italic;
  color: var(--burnt-sienna);
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.porte-carte p {
  font-size: 0.9rem;
  color: var(--deep-clay-brown);
  max-width: 280px;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.btn-secondaire {
  display: inline-block;
  padding: 0.5rem 1.4rem;
  background-color: transparent;
  color: var(--burnt-sienna);
  border: 1px solid var(--burnt-sienna);
  border-radius: 25px;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.btn-secondaire:hover {
  background-color: var(--burnt-sienna);
  color: var(--blanc-creme);
}

.portes-action-globale {
  margin-top: 0.5rem;
}

/* DESKTOP (>= 768px) */
@media (min-width: 768px) {
  .portes-grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .porte-carte {
    border-bottom: none !important;
    padding-bottom: 0;
  }
}
/* --- SECTIONS ÉNERGÉTIQUES & COURS COLLECTIFS --- */

/* Titre forcé sur une ligne sur grand écran */
@media (min-width: 880px) {
  .titre-une-ligne {
    white-space: nowrap;
    font-size: 3.4rem !important;
  }
}
/* 1. SÉANCES ÉNERGÉTIQUES (FOND CRÈME) */
.section-energetique {
  background-color: var(--blanc-creme);
  padding: 4.5rem 0;
}

.energetique-grille {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "texte"
    "arches"
    "action";
  gap: 2rem;
  align-items: center;
  text-align: center;
}

.energetique-texte-bloc .titre-script {
  /*font-size: 3.5rem;*/
  margin-bottom: 0.3rem;
}

.energetique-sous-titre {
  font-family: var(--font-titres);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--burnt-sienna);
  margin-bottom: 0.8rem;
}

.energetique-promesse {
  font-size: 0.95rem;
  color: var(--deep-clay-brown);
  line-height: 1.5;
}

/* ARCHES MOBILE : Grille 2 colonnes (2 + 1) */
.energetique-arches-bloc {
  grid-area: arches;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  width: 100% !important;
  max-width: 300px !important;
  margin: 0 auto !important;
}

.energetique-arche-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100% !important;
  max-width: 135px !important;
  margin: 0 auto !important;
}

/* Centrer la 3e arche (Reiki Karuna) sous les deux premières */
.energetique-arche-item:nth-child(3) {
  grid-column: span 2 !important;
  justify-self: center !important;
}

.mini-arche-img {
  width: 100%;
  height: 210px;
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
  overflow: hidden;
  margin-bottom: 0.6rem;
  box-shadow: 0 8px 20px rgba(94, 58, 42, 0.08);
}

.mini-arche-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.porte-arche-lien:hover .mini-arche-img img {
  transform: scale(1.05);
}

.energetique-pratique-titre, .cours-pratique-titre {
  font-family: var(--font-titres);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--burnt-sienna);
}

.energetique-action-bloc {
  grid-area: action;
}

/* DESKTOP (>= 880px) : Rétablissement des 3 arches alignées */
@media (min-width: 880px) {
  .energetique-grille {
    grid-template-columns: 1fr 1.2fr;
    grid-template-areas:
      "texte arches"
      "action arches";
    text-align: left;
    column-gap: 3.5rem;
    row-gap: 1.5rem;
  }

  .energetique-arches-bloc {
    display: flex !important;
    justify-content: center !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 1.2rem !important;
  }

  .energetique-arche-item {
    flex: 1 !important;
    max-width: 160px !important;
  }

  .energetique-arche-item:nth-child(3) {
    grid-column: auto !important;
  }
}
/* ==========================================================================
   2. COURS COLLECTIFS (FOND SOFT CLAY)
   ========================================================================== */

.section-cours-collectifs {
  background-color: var(--soft-clay);
  padding: 2rem 0;
}

.cours-grille {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "texte"
    "arches"
    "action";
  gap: 2rem;
  row-gap: 1.5rem;
  align-items: center;
  text-align: center;
}

/* Textes */
.cours-texte-bloc {
  grid-area: texte;
}

.cours-texte-bloc .titre-script {
  margin-bottom: 0.3rem;
}

.cours-sous-titre {
  font-family: var(--font-titres);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--burnt-sienna);
  margin-bottom: 0.8rem;
}

.cours-citation-doree {
  border-left: 2px solid var(--or-satine);
  padding-left: 1rem;
  margin: 1.2rem 0;
  text-align: left;
}

.cours-citation-doree p {
  font-family: var(--font-titres);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--burnt-sienna);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 879px) {
  .cours-citation-doree {
    display: inline-block;
    max-width: 90%;
  }
}

.cours-prerequis {
  font-size: 0.95rem;
  color: var(--deep-clay-brown);
  margin-bottom: 0.5rem;
}

.cours-details-disciplines {
  font-size: 0.9rem;
  color: var(--deep-clay-brown);
  line-height: 1.5;
}

/* ARCHES MOBILE : Grille 2 colonnes (2 + 2 + 1) */
.cours-arches-bloc {
  grid-area: arches;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  width: 100% !important;
  max-width: 300px !important;
  margin: 0 auto !important;
}

.cours-arche-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100% !important;
  max-width: 135px !important;
  margin: 0 auto !important;
}

/* Centrer la dernière arche si le nombre total est impair sur mobile */
.cours-arche-item:last-child:nth-child(odd) {
  grid-column: span 2 !important;
  justify-self: center !important;
}

.cours-action-bloc {
  grid-area: action;
}

/* DESKTOP (>= 880px) */
@media (min-width: 880px) {
  .cours-grille {
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: auto 1fr; /* Le texte prend sa hauteur naturelle, le bouton se place juste en dessous */
    grid-template-areas:
      "arches texte"
      "arches action";
    align-items: start; /* Aligne le texte en haut des arches */
    text-align: left;
    column-gap: 3.5rem;
    row-gap: 4rem; /* Écartement entre le bas du texte et le bouton */
  }

  .cours-arches-bloc {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    max-width: 460px !important;
    margin: 0 !important;
    gap: 1.2rem !important;
  }

  .cours-arche-item {
    flex: 0 0 calc(33.333% - 0.8rem) !important;
    max-width: 135px !important;
  }

  .cours-arche-item:last-child:nth-child(odd) {
    grid-column: auto !important;
  }

.cours-action-bloc {
    align-self: start;
    margin-top: 0;
    text-align: center; /* Centre le bouton horizontalement sous la colonne de texte */
  }
}

/* SECTION ACTUALITÉS - FOND ALTERNÉ */
.section-actualites {
  background-color: var(--blanc-creme);
  padding: 4.5rem 0;
  width: 100%;
}

/* ==========================================================================
   SECTION TÉMOIGNAGES (STYLE ÉDITORIAL & CARROUSEL)
   ========================================================================== */

.section-temoignages {
  padding: 4rem 0;
}

.temoignages-carrousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Piste de défilement (Mobile : swipe tactile) */
.temoignages-piste {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 1rem 0.5rem;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.temoignages-piste::-webkit-scrollbar {
  display: none;
}

/* Carte avis (Éditorial aéré avec centrage vertical) */
.temoignage-item {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 2px solid var(--or-satine);
  padding-left: 1.2rem;
  text-align: left;
  min-height: 170px;
}

.temoignage-texte {
  font-family: var(--font-titres);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--deep-clay-brown);
  margin-top: auto;
  margin-bottom: auto;
  padding: 0.5rem 0;
}

.temoignage-profil {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

/* Conteneur pour empiler le nom et le cours */
.temoignage-infos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.temoignage-auteur {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--burnt-sienna);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Style facultatif du cours */
.temoignage-cours {
  font-family: var(--font-titres);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--deep-clay-brown);
  margin-top: 0.15rem;
  opacity: 0.85;
}

.temoignage-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--or-satine);
  flex-shrink: 0;
}

.temoignage-auteur {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--burnt-sienna);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Flèches de navigation (Desktop) */
.btn-carrousel {
  display: none;
  background: transparent;
  border: 1px solid var(--or-satine);
  color: var(--burnt-sienna);
  font-size: 1.6rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  z-index: 5;
}

.btn-carrousel:hover {
  background-color: var(--burnt-sienna);
  color: var(--blanc-creme);
  border-color: var(--burnt-sienna);
}

.btn-prev { margin-right: 2rem; }
.btn-next { margin-left: 2rem; }

/* Points de navigation (Mobile) */
.temoignages-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.temoignages-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(184, 115, 87, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.temoignages-dots .dot.active {
  background-color: var(--burnt-sienna);
  transform: scale(1.3);
}

/* BLOC CITATION & BOUTON APRÈS TÉMOIGNAGES */
.temoignages-apres-bloc {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}

.temoignages-citation-doree {
  border-left: 2px solid var(--or-satine);
  padding-left: 1.2rem;
  max-width: 600px;
  text-align: left;
}

.temoignages-citation-doree p {
  font-family: var(--font-titres);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--burnt-sienna);
  line-height: 1.5;
  margin: 0;
}

/* DESKTOP (>= 880px) */
@media (min-width: 880px) {
  .btn-carrousel {
    display: flex;
  }

  .temoignages-dots {
    display: none; /* Masque les points sur ordinateur */
  }

  .temoignages-piste {
    overflow-x: hidden;
  }

  .temoignage-item {
    flex: 0 0 calc(33.333% - 1.35rem);
  }
}
/* ==========================================================================
   FOOTER - OPTION 2 : BLUSH TERRACOTTA
   ========================================================================== */

.site-footer {
  background-color: var(--blush-terracotta);
  color: var(--deep-clay-brown);
  padding: 3.5rem 0 1.2rem 0;
  margin-top: 0;
}

.footer-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
}

.logo-footer {
  height: 70px;
  width: auto;
  margin-bottom: 0.8rem;
}

.footer-nom {
  font-family: var(--font-titres);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--burnt-sienna);
}

.footer-description {
  font-size: 0.9rem;
  color: var(--deep-clay-brown);
  opacity: 0.9;
  margin-top: 0.4rem;
  line-height: 1.5;
}

.footer-titre-col {
  font-family: var(--font-titres);
  font-size: 1.1rem;
  color: var(--burnt-sienna);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-liens ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-liens li {
  margin-bottom: 0.5rem;
}

.footer-liens a,
.footer-email {
  color: var(--deep-clay-brown);
  transition: color 0.3s ease;
  font-size: 0.95rem;
}

.footer-liens a:hover,
.footer-email:hover,
.footer-mention-bas:hover {
  color: var(--burnt-sienna);
}

.footer-contact p {
  font-size: 0.93rem;
  line-height: 1.6;
  margin-bottom: 0.4rem;
  color: var(--deep-clay-brown);
}

.footer-tel {
  font-weight: 600;
}

/* Style des icônes réseaux sociaux */
.footer-reseaux {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}

.footer-reseaux a {
  color: var(--deep-clay-brown);
  font-size: 1.3rem;
  transition: transform 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-reseaux a:hover {
  color: var(--burnt-sienna);
  transform: translateY(-2px);
}

/* --- BAS DE FOOTER --- */
.footer-bas {
  border-top: 1px solid rgba(94, 58, 42, 0.15);
  padding-top: 1rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--deep-clay-brown);
}

.footer-copyright {
  margin: 0;
  opacity: 0.85;
}

.footer-mention-bas {
  color: var(--deep-clay-brown);
  text-decoration: underline;
  opacity: 0.85;
  transition: color 0.3s ease;
}

/* DESKTOP (>= 768px) */
@media (min-width: 768px) {
  .footer-grille {
    grid-template-columns: 1.2fr 0.8fr 1fr;
    text-align: left;
    gap: 3rem;
  }

  .footer-marque {
    text-align: left;
  }

  .footer-reseaux {
    justify-content: flex-start; /* Alignement à gauche naturel sous le texte */
  }

  /* Force l'alignement côte à côte du copyright et des mentions */
  .footer-bas {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 2.5rem !important;
  }
}

/* ==========================================================================
   PAGE CONTACT
   ========================================================================== */

.page-contact {
  background-color: var(--soft-clay);
  padding-bottom: 4rem;
}

.contact-hero {
  padding: 3rem 0 1.5rem 0;
  text-align: center;
}

.contact-hero .titre-page {
  font-family: var(--font-titres);
  font-size: 2.5rem;
  color: var(--burnt-sienna);
  margin-bottom: 0.8rem;
}

.contact-hero .sous-titre-page {
  max-width: 650px;
  margin: 0 auto;
  color: var(--deep-clay-brown);
  font-size: 1rem;
  line-height: 1.6;
}

/* --- Grille principale --- */
.contact-section {
  padding-top: 1.5rem;
}

.contact-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

/* --- Colonne Gauche (Infos & Photo) --- */
.contact-infos {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Arche photo */
.cadre-arche-contact {
  width: 100%;
  max-width: 280px;
  height: 340px;
  border-top-left-radius: 140px;
  border-top-right-radius: 140px;
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: 0 10px 25px rgba(94, 58, 42, 0.08);
}

.photo-arche-contact {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-details h2 {
  font-family: var(--font-titres);
  font-size: 1.5rem;
  color: var(--burnt-sienna);
  margin-bottom: 1.2rem;
}

.detail-item {
  margin-bottom: 1rem;
  color: var(--deep-clay-brown);
  font-size: 0.95rem;
  line-height: 1.5;
}

.detail-item a {
  color: var(--deep-clay-brown);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.detail-item a:hover {
  color: var(--burnt-sienna);
}

.contact-reseaux {
  margin-top: 1.2rem;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}

.contact-reseaux a {
  color: var(--deep-clay-brown);
  font-size: 1.4rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.contact-reseaux a:hover {
  color: var(--burnt-sienna);
  transform: translateY(-2px);
}

/* --- Colonne Droite (Formulaire) --- */
.contact-formulaire-carte {
  background-color: var(--blanc-creme);
  padding: 2.5rem;
  border-radius: 20px; /* Coins bien arrondis */
  box-shadow: 0 8px 20px rgba(94, 58, 42, 0.05);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.form-group {
  margin-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--burnt-sienna);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.mention-optionnel {
  font-weight: normal;
  text-transform: none;
  opacity: 0.7;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(94, 58, 42, 0.2);
  border-radius: 8px; /* Léger arrondi pour les champs */
  background-color: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--deep-clay-brown);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--classic-terracotta);
  box-shadow: 0 0 0 3px rgba(199, 106, 74, 0.15);
}

.form-group textarea {
  resize: vertical;
}

.btn-conteneur {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* Alertes de confirmation */
.alerte {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.alerte-succes {
  background-color: rgba(76, 175, 80, 0.15);
  color: #2e7d32;
  border: 1px solid #2e7d32;
}

.alerte-erreur {
  background-color: rgba(244, 67, 54, 0.15);
  color: #c62828;
  border: 1px solid #c62828;
}

/* DESKTOP (>= 850px) */
@media (min-width: 850px) {
  .contact-grille {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4rem;
  }

  .contact-infos {
    text-align: left;
    align-items: flex-start;
  }

  .contact-reseaux {
    justify-content: flex-start;
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  .contact-formulaire-carte {
    padding: 3.5rem;
  }
}
/* ==========================================================================
   PAGE PRESENTATION / QUI SUIS-JE (CORRECTIFS MARGES & LAYOUT)
   ========================================================================== */

.page-presentation {
  background-color: var(--soft-clay);
  color: var(--deep-clay-brown);
}

/* --- HERO PARALLAX --- */
.presentation-hero-parallax {
  position: relative;
  background-image: url('gallerie/hero-presentation.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 6rem 1.5rem;
  text-align: center;
  color: var(--blanc-creme);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(94, 58, 42, 0.5);
  z-index: 1;
}

.hero-contenu {
  position: relative;
  z-index: 2;
}

.hero-contenu .titre-page {
  font-family: var(--font-titres);
  font-size: 3rem;
  color: var(--blanc-creme);
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-contenu .citation-intro {
  font-family: var(--font-titres);
  font-size: 1.25rem;
  font-style: italic;
  max-width: 750px;
  margin: 0 auto;
  line-height: 1.6;
  color: var(--soft-clay);
}

/* --- SECTIONS TEXTE & GRILLES --- */
.presentation-section {
  padding: 3.5rem 0;
  margin: 0;
  background-color: var(--soft-clay);
}

.presentation-section.alt-bg {
  background-color: var(--blanc-creme);
}

.presentation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.bloc-texte h2,
.presentation-texte h2,
.bloc-texte-aujourdhui h2 {
  font-family: var(--font-titres);
  font-size: 1.8rem;
  color: var(--burnt-sienna);
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
}

.bloc-texte h2:first-child,
.presentation-texte h2:first-child,
.bloc-texte-aujourdhui h2:first-child {
  margin-top: 0;
}

.bloc-texte p,
.presentation-texte p,
.bloc-texte-aujourdhui p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  opacity: 0.95;
}

.ancrage-texte {
  font-weight: 600;
  color: var(--burnt-sienna);
  font-size: 1.05rem !important;
  margin-top: 1.5rem;
}

/* --- STRUCTURE MOBILE SECTION 1 --- */
.grid-section-1 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* --- EFFET ZOOM SUR LES ARCHES --- */
.presentation-image {
  display: flex;
  justify-content: center;
}

.cadre-arche,
.cadre-arche-petite {
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(94, 58, 42, 0.08);
  transition: box-shadow 0.3s ease;
}

.cadre-arche {
  width: 100%;
  max-width: 320px;
  height: 420px;
  border-top-left-radius: 160px;
  border-top-right-radius: 160px;
}

.cadre-arche-petite {
  width: 100%;
  max-width: 280px;
  height: 350px;
  border-top-left-radius: 140px;
  border-top-right-radius: 140px;
}

.photo-arche {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.cadre-arche:hover .photo-arche,
.cadre-arche-petite:hover .photo-arche {
  transform: scale(1.08);
}

/* --- BANDEAU VISUEL 1 --- */
.bandeau-visuel {
  width: 100%;
  height: 280px;
  overflow: hidden;
}

.photo-bandeau {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- SECTION KUNDALINI (SANS MARGE POUR EVITER LA BANDE BEIGE) --- */
.bandeau-kundalini {
  background-color: var(--blush-terracotta);
  padding: 4rem 0;
  margin: 0;
}

.kundalini-carte {
  background-color: var(--blanc-creme);
  padding: 3rem 2rem;
  border-radius: 20px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 8px 20px rgba(94, 58, 42, 0.06);
}

.kundalini-carte h2 {
  font-family: var(--font-titres);
  font-size: 1.8rem;
  color: var(--burnt-sienna);
  margin-bottom: 1rem;
}

.kundalini-carte p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.texte-mise-en-avant {
  font-family: var(--font-titres);
  font-size: 1.15rem !important;
  font-style: italic;
  color: var(--burnt-sienna);
  margin-bottom: 0 !important;
}

/* --- CALL TO ACTION --- */
.presentation-cta {
  padding: 4rem 0 5rem 0;
  background-color: var(--soft-clay);
}

.carte-cta {
  background-color: var(--blanc-creme);
  padding: 3rem 2rem;
  border-radius: 20px;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  border: 1px solid var(--or-satine);
}

.phrase-cta {
  font-family: var(--font-titres);
  font-size: 1.3rem;
  color: var(--burnt-sienna);
  margin-bottom: 1.8rem;
  line-height: 1.5;
}

/* --- GESTION MOBILE COMPORTEMENT ARCHES --- */
@media (max-width: 849px) {
  .presentation-hero-parallax {
    background-attachment: scroll;
  }

  .block-bas {
    display: flex;
    flex-direction: column;
  }

  .section-aujourdhui,
  .grid-aujourdhui {
    display: contents;
  }

  .img-3 {
    order: 1;
    padding: 2.5rem 0 1rem 0;
    background-color: var(--soft-clay);
  }

  .bandeau-kundalini {
    order: 2;
  }

  .bloc-texte-aujourdhui {
    order: 3;
    padding: 3.5rem 1.5rem;
    background-color: var(--soft-clay);
  }
}

/* --- DESKTOP (>= 850px) --- */
@media (min-width: 850px) {
  .grid-section-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "debut img"
      "bascule img";
    gap: 2rem 4rem;
    align-items: center;
  }

  .bloc-debut { grid-area: debut; }
  .bloc-bascule { grid-area: bascule; }
  .img-1 { grid-area: img; }

  .presentation-grid.inverse {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .presentation-grid.inverse .presentation-image {
    order: 1;
  }

  .presentation-grid.inverse .presentation-texte {
    order: 2;
  }

  .bandeau-visuel {
    height: 380px;
  }

  /* Alignement 2 colonnes strict pour la Section Aujourd'hui */
  .grid-aujourdhui {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }

  .bloc-texte-aujourdhui {
    grid-column: 1;
  }

  .img-3 {
    grid-column: 2;
  }
}
/* ==========================================
   CARROUSEL KUNDALINI & LIGHTBOX
   ========================================== */

/* Conteneur carrousel dans le bandeau */
.galerie-kundalini-container {
  position: relative;
  margin-top: 2rem;
  display: flex;
  align-items: center;
}

/* Rail du carrousel avec scroll fluide */
.galerie-kundalini-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 0;
  width: 100%;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.galerie-kundalini-track::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Vignette individuelle au format 4/3 */
.galerie-item {
  flex: 0 0 calc(33.333% - 0.67rem); /* 3 photos visibles sur PC */
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.galerie-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.galerie-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Boutons de navigation sur PC */
.galerie-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 42px;
  height: 42px;
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--burnt-sienna, #8b4513);
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.galerie-btn:hover {
  background-color: #ffffff;
  transform: translateY(-50%) scale(1.1);
}

.galerie-btn-prev { left: -21px; }
.galerie-btn-next { right: -21px; }

/* Adaptaion Mobile / Tablette */
@media (max-width: 900px) {
  .galerie-item {
    flex: 0 0 calc(50% - 0.5rem); /* 2 photos sur tablette */
  }
}

@media (max-width: 600px) {
  .galerie-item {
    flex: 0 0 82%; /* 1 photo + amorce de la suivante pour inciter au swipe */
  }
  .galerie-btn {
    display: none; /* Masqué sur mobile car swipe tactile */
  }
}

/* --- LIGHTBOX (MODALE PLEIN ÉCRAN) --- */
.lightbox-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox-modal.active {
  display: flex;
  opacity: 1;
}

.lightbox-content {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-content img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain; /* Conserve le vrai format de l'image agrandie */
  border-radius: 6px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 100000;
  line-height: 1;
  transition: color 0.2s ease;
}

.lightbox-close:hover {
  color: var(--classic-terracotta, #d97757);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: none;
  font-size: 2rem;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 100000;
  transition: background 0.2s ease;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.5);
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

@media (max-width: 600px) {
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { top: 12px; right: 18px; }
}

/* --- Réduction de l'espace sous la section Aujourd'hui --- */
.section-aujourdhui {
  padding-bottom: 1.5rem !important; /* Réduit le vide sous l'arche */
}

.presentation-cta {
  padding-top: 1.5rem !important; /* Rapproche la carte blanche */
}

/* --- Agencement des 3 boutons CTA --- */
.cta-boutons-groupe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* Bouton secondaire (Réserver un essai)  fond blanc
.btn-secondaire {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background-color: transparent;
  color: var(--burnt-sienna, #8b4513);
  border: 2px solid var(--burnt-sienna, #8b4513);
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-secondaire:hover {
  background-color: var(--burnt-sienna, #8b4513);
  color: #ffffff;
}*/
/* Bouton "Réserver un essai" identique aux autres */
.btn-secondaire {
  display: inline-flex;
   padding: 0.8rem 2.2rem; 
  background-color: var(--classic-terracotta);
  color: #fff; 
  border-radius: 30px; 
  border: 1px solid var(--or-satine); 
  transition: all 0.3s; 
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.btn-secondaire:hover {
  background-color: transparent; 
  color: var(--burnt-sienna); 
  border-color: var(--burnt-sienna);
}

/* Bouton téléphone */
.btn-tel-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.8rem 1.4rem;
  background-color: var(--classic-terracotta, #d97757);
  color: #ffffff !important;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-tel-cta:hover {
  background-color: var(--burnt-sienna, #8b4513);
  transform: translateY(-2px);
}

/* Adaptation mobile */
@media (max-width: 768px) {
  .cta-boutons-groupe {
    flex-direction: column;
    width: 100%;
  }

  .cta-boutons-groupe a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}
/* --- GALERIE UNIVERSELLE --- */
.galerie-container {
  position: relative;
  margin: 0rem 0;
  display: flex;
  align-items: center;
}

.galerie-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 0;
  width: 100%;
  scrollbar-width: none;
}

.galerie-track::-webkit-scrollbar {
  display: none;
}

/* Calcul automatique selon le paramètre $nb_visibles */
.galerie-item {
  flex: 0 0 calc((100% - (1rem * (var(--items-visible) - 1))) / var(--items-visible));
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.3s ease;
}

.galerie-item:hover {
  transform: translateY(-4px);
}

.galerie-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galerie-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 42px;
  height: 42px;
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--burnt-sienna);
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.galerie-btn-prev { left: -21px; }
.galerie-btn-next { right: -21px; }

/* Responsive */
@media (max-width: 900px) {
  .galerie-item {
    flex: 0 0 calc(50% - 0.5rem) !important; /* 2 photos sur tablette */
  }
}

@media (max-width: 600px) {
  .galerie-item {
    flex: 0 0 82% !important; /* 1 photo sur mobile */
  }
  .galerie-btn { display: none; }
}

/* fin gallerie universsel *>







/* --- TEMPLATE ÉCOLE --- */
/* --- HERO PARALLAX --- */
.hero-ecole {
  height: 65vh;
  min-height: 350px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* <-- C'est cette ligne qui crée l'effet parallaxe */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}

/* Correctif pour iOS / iPhone (qui gère mal le background-attachment fixed) */
@supports (-webkit-touch-callout: none) {
  .hero-ecole {
    background-attachment: scroll;
  }
}
.hero-overlay {
  background: rgba(0, 0, 0, 0.25);
  padding: 2rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.grille-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin: 3rem 0;
}

.visuel-arche {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-arche {
  width: 100%;
  max-width: 320px; /* Limite la largeur de l'image */
  max-height: 400px; /* Limite la hauteur globale */
  border-radius: 160px 160px 0 0;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.carte-offre {
  background: #ffffff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
  .grille-intro {
    grid-template-columns: 1fr;
  }
}
/* visuel ecole format arche au lieu de rectangle*/
/* --- CARTES EN FORME D'ARCHE --- */
.carte-offre-arche {
  background: #ffffff;
  /* L'arrondi du haut crée l'arche (120px à gauche et à droite), le bas reste légèrement arrondi */
  border-radius: 120px 120px 16px 16px;
  overflow: hidden; /* Découpe l'image du haut parfaitement selon l'arche */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carte-offre-arche:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.carte-img-wrapper {
  width: 100%;
  height: 200px; /* Hauteur de la photo */
  overflow: hidden;
}

.carte-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* L'image s'adapte sans être déformée */
}

.carte-contenu {
  padding: 1.8rem 1.2rem;
  text-align: justify;
}

.carte-contenu h3 {
  color: var(--burnt-sienna, #8b4513);
  margin-bottom: 0.8rem;
  font-size: 1.25rem;
  text-align: center;
}

.carte-contenu p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555555;
}
/* --- SECTION ACTIVITÉS EN ZIGZAG --- */
.section-activites {
  margin: 4rem auto;
  display: flex;
  flex-direction: column;
  gap: 5rem; /* Espace entre deux blocs de cours */
}

.bloc-activite {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

/* Inversion de l'ordre pour l'effet Zigzag */
.bloc-activite.inverse {
  direction: rtl; /* Inverse la disposition grille */
}

.bloc-activite.inverse > * {
  direction: ltr; /* Remet le texte et l'image dans le sens de lecture normal */
}

.contenu-activite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}

.contenu-activite h2 {
  color: var(--burnt-sienna, #8b4513);
  font-size: 1.8rem;
  margin: 0;
}

.description-activite {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #444444;
}

/* Mini-fiche puces */
.puces-activite {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background-color: #fcf9f5;
  padding: 1.2rem 1.5rem;
  border-radius: 12px;
  border-left: 3px solid var(--burnt-sienna, #8b4513);
  width: 100%;
}

.puces-activite li {
  font-size: 0.95rem;
  color: #555555;
}

.puces-activite strong {
  color: #222222;
}

.titre-centre {
  text-align: center;
  color: var(--burnt-sienna, #8b4513);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.sous-titre-centre {
  text-align: center;
  color: #666666;
  margin-bottom: 2rem;
  font-size: 1rem;
}

/* RESPONSIVE MOBILE */
@media (max-width: 850px) {
  .bloc-activite,
  .bloc-activite.inverse {
    grid-template-columns: 1fr;
    gap: 2rem;
    direction: ltr; /* Désactive le miroir sur mobile pour garder l'image en premier */
  }

  .contenu-activite {
    align-items: center;
    text-align: center;
  }

  .puces-activite {
    text-align: left;
  }
}
/* Alignement des cartes arches et boutons CTA */
.carte-offre-arche {
  height: 100%;
}

.carte-contenu {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.carte-btn-wrapper {
  margin-top: auto;
  padding-top: 1.2rem;
  text-align: center;
}

/* ========================================== */
/* STYLES PAGE PROGRAMMES                     */
/* ========================================== */

/* ========================================== */
/* COULEURS DE FOND & PALETTE PANTONE          */
/* ========================================== */
.bg-soft-clay {
    background-color: var(--soft-clay, #f9f5f0);
}
.bg-blanc-creme {
    background-color: var(--blanc-creme, #fcf9f5);
}

/* ========================================== */
/* HERO & MINI-ARCHES DE NAVIGATION           */
/* ========================================== */
.programmes-hero {
    padding: 50px 20px 40px;
    text-align: center;
    background-color: var(--soft-clay, #f9f5f0);
}
.hero-title {
    font-family: 'Italiana', 'Playfair Display', serif;
    font-size: 2.4rem;
    margin-bottom: 15px;
    color: var(--deep-clay-brown, #3d2b1f);
}
.hero-subtitle {
    max-width: 750px;
    margin: 0 auto 35px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #555;
}

/* Grille des mini-arches */
.arches-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
}
.arch-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.arch-item:hover {
    transform: translateY(-5px);
}
.arch-img-container {
    width: 110px;
    height: 150px;
    border-radius: 60px 60px 0 0; /* Forme arche */
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--classic-terracotta, #c96939);
    margin-bottom: 10px;
}
.arch-img-container.arche-plus-grande {
    width: 160px;
    height: 200px;
    border-radius: 80px 80px 0 0; /* Moitié de la largeur pour conserver l'arche */
}
.arch-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.3s ease;
}
.arch-item:hover .arch-img {
    scale: 1.05;
}
.arch-label {
    font-family: 'Italiana', 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--deep-clay-brown, #3d2b1f);
}


/* ========================================== */
/* BANDEAU PARALLAXE                          */
/* ========================================== */
.parallax-banner {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
    position: relative;
    background-color: #3d2b1f;
	min-height: 280px; /* Augmente la hauteur du bandeau */
    margin-bottom: 3.5rem; /* Marge créant l'espace entre le bandeau et le 1er contenu/photo */
}
.parallax-overlay {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
    padding: 0 20px;
}
.parallax-overlay h2 {
    font-family: 'Italiana', 'Playfair Display', serif;
    font-size: 2.3rem;
    margin-bottom: 8px;
    color: #ffffff;
}
.parallax-overlay .slogan {
    font-size: 1.05rem;
    font-style: italic;
    opacity: 0.95;
}

/* ========================================== */
/* CONTENU DES ÉTAPES ET ALTERNANCE           */
/* ========================================== */
.programme-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px;
}
.row-alternated {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 60px;
}
.row-alternated.reverse {
    flex-direction: row-reverse;
}
.row-alternated .text-col,
.row-alternated .img-col {
    flex: 1;
    min-width: 0;
}
.step-badge {
    display: inline-block;
    background-color: rgba(201, 105, 57, 0.15);
    color: var(--classic-terracotta, #c96939);
    padding: 4px 14px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.programme-img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
}

/* ========================================== */
/* RÉCAPITULATIF PRATIQUE & CTA               */
/* ========================================== */
.programme-summary-box {
    background-color: #ffffff;
    border: 1px solid #ebdcd0;
    border-radius: 10px;
    padding: 35px;
    margin: 40px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.programme-summary-box h4 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: var(--deep-clay-brown, #3d2b1f);
}
.programme-summary-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.programme-summary-box li {
    padding: 10px 0;
    border-bottom: 1px dashed #e8d8cb;
    font-size: 0.98rem;
}
.programme-summary-box li:last-child {
    border-bottom: none;
}
.programme-cta-container {
    text-align: center;
   /* margin: 40px 0 60px;*/
	
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem 8.5rem; /* Écarte les boutons horizontalement et verticalement */
    margin: 2.5rem 0;
    text-align: center;
}
.programme-cta-container .programme-price-tag {
    width: 100%;
    margin-bottom: 0.5rem;
}
.btn-cta-programme {
    /*display: inline-block;*/
	display: inline-flex;
    background-color: var(--classic-terracotta, #c96939);
    color: #ffffff !important;
    padding: 16px 36px;
	align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0; /* Suppression des marges parasites pour laisser agir le gap flexbox */
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    box-shadow: 0 4px 12px rgba(201, 105, 57, 0.25);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-cta-programme:hover {
    background-color: #b2582a;
    transform: translateY(-2px);
}

/* ========================================== */
/* CARROUSEL TÉMOIGNAGES                      */
/* ========================================== */
.programme-testimonials {
    margin-top: 50px;
	margin-bottom: 10px;
    padding-top: 40px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.testimonials-title {
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 25px;
    color: var(--deep-clay-brown, #3d2b1f);
}
.carousel-container {
    position: relative;
    max-width: 750px;
    margin: 0 auto;
    overflow: hidden;
}
.carousel-track-wrapper {
    overflow: hidden;
    width: 100%;
}
.carousel-track {
    display: flex;
    transition: transform 0.4s ease-in-out;
}
.testimonial-card {
    min-width: 100%;
    box-sizing: border-box;
    padding: 30px 45px;
    background: #ffffff;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.testimonial-card .quote {
    font-style: italic;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 12px;
}
.testimonial-card .author {
    font-weight: 600;
    color: var(--classic-terracotta, #c96939);
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(201, 105, 57, 0.15);
    border: none;
    color: var(--classic-terracotta, #c96939);
    font-size: 20px;
    width: 38px;
    height: 38px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-btn.prev { left: 5px; }
.carousel-btn.next { right: 5px; }

/* ========================================== */
/* RESPONSIVE MOBILE                          */
/* ========================================== */
@media (max-width: 768px) {
    /* Arches plus compactes sur mobile */
    .arches-nav {
        gap: 15px;
    }
    .arch-img-container {
        width: 85px;
        height: 115px;
        border-radius: 45px 45px 0 0;
    }
    .arch-label {
        font-size: 0.95rem;
    }

    /* Forcer l'ordre Texte EN PREMIER, Photo EN DESSOUS sur mobile */
    .row-alternated, 
    .row-alternated.reverse {
        flex-direction: column !important;
        gap: 20px;
    }
    .row-alternated .text-col,
    .row-alternated.reverse .text-col {
        order: 1;
    }
    .row-alternated .img-col,
    .row-alternated.reverse .img-col {
        order: 2;
    }

   /* Force le parallaxe sur mobile/tablette */
    .parallax-banner {
        background-attachment: fixed !important;
        background-size: cover;
        height: 220px;
    }
    .parallax-overlay h2 {
        font-size: 1.8rem;
    }
    .testimonial-card {
        padding: 20px 25px;
    }
}

/* Style du tarif au-dessus du CTA page accompagnement programme*/
.programme-price-tag {
    font-size: 1.1rem;
    color: var(--deep-clay-brown, #3d2b1f);
    margin-bottom: 15px;
}
.programme-price-tag strong {
    font-size: 1.4rem;
    color: var(--classic-terracotta, #c96939);
    font-weight: 700;
}
.price-subtext {
    display: block;
    font-size: 0.88rem;
    color: #666;
    font-style: italic;
    margin-top: 4px;
}

/* ========================================== */
/* SECTION TARIFS - CODE COMPLET CSS          */
/* ========================================== */

/* Conteneur global */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Alternance des fonds de section */
.bg-soft-clay {
    background-color: #F4ECE1; /* Beige chaud original */
}

.bg-blanc-creme {
    background-color: #FDFBF7; /* Fond très clair */
}

/* Teintes des cartes */
.pricing-card.card-white {
    background-color: #ffffff;
}

.pricing-card.card-tinted {
    background-color: #F7EFE8; /* Teinte rosée/argile poudrée */
}

/* HERO FIX : Le voile d'opacité recouvre désormais 100% de l'image */
/* ========================================== */
/* HERO RESPONSIVE (AUTODAPTABILE EN HAUTEUR) */
/* ========================================== */

.tarifs-hero-parallax {
    position: relative;
    background-attachment: fixed !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 380px;
    display: flex;
}

.tarifs-hero-overlay {
    position: relative; /* Repasse en flux normal pour pousser les bords si le contenu grandit */
    width: 100%;
    min-height: 100%;
    background: rgba(61, 43, 31, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px; /* Marges intérieures haut/bas généreuses pour aérer */
    box-sizing: border-box;
}

/* Ajustements spécifiques aux mobiles */
@media (max-width: 768px) {
    .tarifs-hero-overlay {
        padding: 40px 15px;
    }

    .tarifs-hero-overlay h1 {
        font-size: 2.2rem; /* Titre légèrement réduit sur mobile */
    }

    .hero-tagline {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .tarifs-nav-links {
        gap: 10px; /* Espace optimisé entre les boutons empilés */
    }

    .btn-hero-nav {
        padding: 8px 18px;
        font-size: 0.85rem;
    }
}
.hero-content-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tarifs-hero-overlay h1 {
    font-family: 'Italiana', serif;
    font-size: 2.8rem;
    color: #ffffff;
    margin-bottom: 12px;
    text-align: center;
}

.hero-tagline {
    font-size: 1.15rem;
    color: #f9f5f0;
    max-width: 680px;
    margin: 0 auto 25px auto;
    font-weight: 300;
    text-align: center;
}

.tarifs-nav-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-hero-nav {
    padding: 8px 22px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #ffffff;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

.btn-hero-nav:hover {
    background-color: #c96939;
    border-color: #c96939;
}

/* SECTIONS & DISPOSITION DES GRILLES */
.tarifs-section {
    padding: 60px 0;
}

.section-intro {
    font-size: 1.05rem;
    color: #666;
    margin-bottom: 30px;
}

.subsection-title {
    font-family: 'Italiana', serif;
    font-size: 1.8rem;
    color: #3d2b1f;
    margin-bottom: 25px;
}

/* Grilles CSS Grid (Mise en page côte à côte) */
.pricing-cards-grid {
    display: grid;
    gap: 25px;
    width: 100%;
}

.pricing-cards-grid.four-cols {
    grid-template-columns: repeat(4, 1fr);
}

.pricing-cards-grid.three-cols {
    grid-template-columns: repeat(3, 1fr);
}

.pricing-cards-grid.two-cols {
    grid-template-columns: repeat(2, 1fr);
}

/* STYLES DES CARTES */
.pricing-card {
    padding: 35px 25px 30px 25px;
    border-radius: 14px;
    text-align: center;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.pricing-card.styled-border {
    border: 1.5px solid rgba(201, 105, 57, 0.5);
    box-shadow: 0 4px 18px rgba(61, 43, 31, 0.06);
}

.pricing-card.compact {
    padding: 20px 15px;
}

.pricing-card h3 {
    font-family: 'Italiana', serif;
    font-size: 1.6rem;
    color: #3d2b1f;
    margin-bottom: 5px;
}

.pricing-card h4 {
    font-size: 1.15rem;
    color: #3d2b1f;
    margin-bottom: 5px;
}

.price-display {
    margin: 15px 0 10px 0;
}

.price-display .amount, p.amount {
    font-size: 2.2rem;
    font-weight: 700;
    color: #c96939;
}

.price-display .period {
    font-size: 0.9rem;
    color: #666;
}

.card-tagline {
    font-style: italic;
    color: #777;
    font-size: 0.95rem;
}

.payment-facility {
    font-size: 0.88rem;
    color: #3d2b1f;
    margin-bottom: 12px;
}

.card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: left;
    font-size: 0.95rem;
}

.card-features li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.card-notice {
    font-size: 0.85rem;
    color: #888;
    line-height: 1.4;
}

.card-notice-small {
    font-size: 0.8rem;
    color: #888;
    margin-top: 8px;
}

/* BADGES À CHEVAL */
.badge-floating-top {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #c96939;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 5px 16px;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ENCADRÉS SPÉCIAUX (Adhésion & Carte Epass) */
.membership-notice-box {
    background: #ffffff;
    padding: 15px 20px;
    border-radius: 8px;
    border-left: 4px solid #c96939;
    display: inline-block;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.featured-epass {
    max-width: 550px;
    margin: 0 auto;
    padding: 35px 30px;
}

.card-pass-banner {
    padding: 25px;
    border-radius: 12px;
}

.card-pass-banner h4 {
    font-family: 'Italiana', serif;
    font-size: 1.4rem;
    color: #3d2b1f;
    margin-bottom: 8px;
}

.pass-rates {
    margin-top: 10px;
    font-size: 1.1rem;
    color: #c96939;
}

/* BOUTONS PILULES */
.btn-outline-pill {
    display: inline-block;
    padding: 8px 22px;
    border: 1.5px solid #c96939;
    color: #c96939;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-outline-pill:hover {
    background-color: #c96939;
    color: #ffffff;
}

.btn-solid-pill {
    display: inline-block;
    padding: 12px 30px;
    background-color: #c96939;
    color: #ffffff;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(201, 105, 57, 0.25);
}

.btn-solid-pill:hover {
    background-color: #a85227;
    transform: translateY(-2px);
}

/* UTILITAIRES DE MARGES & ALIGNEMENT */
.flex-center-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.margin-top-s { margin-top: 15px; }
.margin-top-m { margin-top: 30px; }
.margin-top-l { margin-top: 45px; }

/* RESPONSIVE TABLETTES ET MOBILES */
@media (max-width: 992px) {
    .pricing-cards-grid.four-cols,
    .pricing-cards-grid.three-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .pricing-cards-grid.four-cols,
    .pricing-cards-grid.three-cols,
    .pricing-cards-grid.two-cols {
        grid-template-columns: 1fr;
    }
}

/* BANDEAU CONTACT : Hauteur augmentée pour aérer avant le footer */
.tarifs-contact-banner {
    padding: 90px 0; /* Augmenté pour donner de l'air */
}

/* CENTRAGE GARANTI DES BOUTONS */
.center-btn-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}
.margin-bottom-m { margin-bottom: 30px; }
/* ========================================== */
/* FOND EN FILIGRANE - PAGE TARIFS UNIQUEMENT */
/* ========================================== */

.tarifs-page-wrapper {
    background-image: url('gallerie/DSC04722.jpg'); /* Ton image de fond */
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Transparences appliquées UNIQUEMENT à l'intérieur de la page tarif */
.tarifs-page-wrapper .bg-soft-clay {
    background-color: rgba(244, 236, 225, 0.77); /* Beige chaud à 88% d'opacité */
}

.tarifs-page-wrapper .bg-blanc-creme {
    background-color: rgba(253, 251, 247, 0.80); /* Blanc crème à 90% d'opacité */
}

.parallax-break {
    height: 250px; /* Hauteur de la fenêtre transparente */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Conteneur aligné */
.title-with-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

/* Titre principal rééquilibré */
.title-with-badge h3 {
    margin: 0;
    font-size: 1.8rem; /* Augmente la taille du titre */
    color: var(--burnt-sienna); /* Harmonise la couleur avec celle du badge */
}

/* Ajustement fin du badge si besoin */
.title-with-badge .step-badge {
    margin: 0;
    font-size: 0.85rem; /* Garde la durée discrète mais lisible */
}

/* ==========================================
   PAGE ÉVÉNEMENTS & AGENDA
   ========================================== */

/* Layout 2 colonnes & Sommaire */
.style-page-agenda {
    padding-top: 3rem;
    padding-bottom: 4rem;
}

.grille-agenda {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2.5rem;
    align-items: start;
}

.sommaire-agenda {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    border: 1px solid var(--burnt-sienna, #c96939);
    border-radius: 8px;
    padding: 1.25rem;
    position: sticky;
    top: 2rem;
}

.sommaire-agenda h3 {
    font-size: 1rem;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--burnt-sienna, #c96939);
    border-bottom: 1px solid rgba(201, 105, 57, 0.2);
    padding-bottom: 0.4rem;
}

.liste-ancres-agenda {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.liste-ancres-agenda a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.liste-ancres-agenda a:hover {
    color: var(--burnt-sienna, #c96939);
    font-weight: 600;
}

/* Carte Événement Standard (Bannière haute) */
.event-card {
    background: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    border: 1px solid var(--burnt-sienna, #c96939);
    margin-bottom: 3rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.event-banner-img {
    width: 100%;
    height: 380px;
    overflow: hidden;
}

.event-banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
}

.event-card-body {
    padding: 2.5rem 2rem;
}

/* En-tête et contenu de l'événement */
.event-header {
    text-align: center;
    margin-bottom: 2rem;
}

.event-badge {
    display: inline-block;
    background: var(--burnt-sienna, #c96939);
    color: #fff;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    font-weight: bold;
}

.event-title {
    margin-top: 1.2rem;
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: var(--text-color);
}

.event-subtitle {
    font-style: italic;
    font-size: 1.1rem;
    color: var(--burnt-sienna, #c96939);
    margin-top: 0.4rem;
}

.event-intro {
    max-width: 750px;
    margin: 0 auto 2rem;
    text-align: center;
    line-height: 1.7;
}

.event-intro-text {
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.event-intro-highlight {
    font-weight: bold;
}

.event-grid-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.event-card-box {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--burnt-sienna, #c96939);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.event-card-box h3 {
    font-size: 1.15rem;
    margin-bottom: 0.8rem;
}

.event-card-box p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.event-sensory-box {
    background: #ffffff;
    padding: 1.8rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.event-sensory-box h3 {
    text-align: center;
    font-size: 1.25rem;
    margin-bottom: 1.2rem;
}

.event-sensory-list {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.9;
    font-size: 0.95rem;
}

.event-summary-box {
    margin-bottom: 2rem;
}

.event-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    text-align: center;
}

.event-info-grid p {
    margin: 0.3rem 0 0;
}

.event-footer-cta {
    text-align: center;
    margin-top: 1.5rem;
}

.event-warning {
    font-weight: bold;
    margin-bottom: 1.2rem;
    color: var(--text-color);
}

/* Responsive */
@media (max-width: 900px) {
    .grille-agenda {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .sommaire-agenda {
        position: relative;
        top: 0;
    }
    .event-banner-img {
        height: 240px;
    }
    .event-card-body {
        padding: 1.5rem 1rem;
    }
    .event-title {
        font-size: 1.7rem;
    }
}

/* ==========================================
   STYLE ARTICLE TYPE MAGAZINE & BLOG (AÉRÉ)
   ========================================== */

.blog-date {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--burnt-sienna, #c96939);
    font-weight: 600;
}

.blog-chapeau {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

/* Typographie & Aération du texte */
.blog-content-full h3 {
    font-size: 1.4rem;
    color: var(--burnt-sienna, #c96939);
    margin: 2.5rem 0 1.2rem 0;
    text-align: left;
}

.blog-content-full p {
    line-height: 1.95; /* Interligne plus aéré */
    margin-bottom: 1.6rem; /* Plus d'espace entre les paragraphes */
    font-size: 1.05rem; /* Texte plus lisible */
    color: #333333;
}

/* Citation type magazine mise en valeur */
.blog-quote {
    border-left: 4px solid var(--burnt-sienna, #c96939);
    padding: 1.5rem 2rem;
    margin: 2.5rem 0;
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.7;
    background: rgba(201, 105, 57, 0.06);
    border-radius: 0 12px 12px 0;
    color: var(--text-color);
}

/* Encadré d'alerte / puces aérées */
.blog-box-highlight {
    background: #ffffff;
    border: 1px solid rgba(201, 105, 57, 0.25);
    border-radius: 10px;
    padding: 2rem;
    margin: 2.5rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.blog-box-highlight h3 {
    margin-top: 0;
}

.blog-list {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0 0 0;
}

.blog-list li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 1rem;
    line-height: 1.7;
    font-size: 1.02rem;
}

.blog-list li::before {
    content: "•";
    color: var(--burnt-sienna, #c96939);
    font-weight: bold;
    font-size: 1.4rem;
    position: absolute;
    left: 0;
    top: -3px;
}

/* Conclusion aérée */
.blog-conclusion {
    background: rgba(255, 255, 255, 0.95);
    padding: 1.8rem;
    border-radius: 10px;
    border-top: 3px solid var(--burnt-sienna, #c96939);
    margin-top: 2.5rem;
    font-size: 1.05rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

/* BOUTON RECENTRÉ & ALIGNÉ SUR LA CHARTE */
.blog-read-more-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.5rem;
    padding-top: 1rem;
}

.btn-read-more {
    display: inline-block;
    background-color: var(--burnt-sienna, #c96939);
    color: #ffffff;
    padding: 0.85rem 2.2rem;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 2px solid var(--burnt-sienna, #c96939);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(201, 105, 57, 0.2);
}

.btn-read-more:hover {
    background-color: transparent;
    color: var(--burnt-sienna, #c96939);
    transform: translateY(-2px);
}
/* ==========================================
   STYLE DES LIENS DANS LES ARTICLES
   ========================================== */

/* Liens généraux dans le corps du texte */
.blog-content-full a {
    color: var(--burnt-sienna, #c96939);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(201, 105, 57, 0.4);
    text-underline-offset: 3px;
    transition: all 0.2s ease;
}

.blog-content-full a:hover {
    color: #a04921;
    text-decoration-color: var(--burnt-sienna, #c96939);
}

/* Style "Badge / Bouton discret" pour les liens dans la boîte d'alerte */
.blog-box-highlight a {
    text-decoration: none;
    background: rgba(201, 105, 57, 0.1);
    color: var(--burnt-sienna, #c96939);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.blog-box-highlight a:hover {
    background: var(--burnt-sienna, #c96939);
    color: #ffffff;
}
/* Ajoute la flèche automatiquement après chaque lien externe */
.blog-content-full a[target="_blank"]::after {
    content: " ↗";
    font-size: 0.85em;
}

/* Élément parent pour positionner la bulle */
.link-preview {
    position: relative;
}

/* La bulle d'aperçu au survol */
.link-preview::before {
    content: attr(data-preview);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--burnt-sienna, #c96939);
    color: #ffffff;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 10;
}

/* Affichage au survol sur ordinateur */
.link-preview:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}