:root {
  /* =========================== */
  /* == POLICES PRINCIPALES == */
  /* =========================== */

  --primary-font: 'Poppins', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  --heading-font: 'Playfair Display', serif;

  /* =========================== */
  /* == COULEURS PRINCIPALES == */
  /* =========================== */

  --background: #F5EDDC;
  --dominant-color: #ffffff;
  --primary-color: #1A6B6A;
  --secondary-color: #4A9E9D;
  --success-color: #C8DCD0;
  --danger-color: #AE1E2C;
  --warning-color: #D4A017;
  --info-color: #135150;

  /* =========================== */
  /* == COULEURS DU TEXTE == */
  /* =========================== */

  --background-text: #2C2C2C;
  --dominant-text: #FFFFFF;
  --primary-text: #FFFFFF;
  --secondary-text: #2C2C2C;
  --success-text: #2C2C2C;
  --danger-text: #FFFFFF;
  --warning-text: #2C2C2C;
  --info-text: #FFFFFF;

  /* =========================== */
  /* == TRANSPARENCE PRIMARY == */
  /* =========================== */

  --alpha-primary-00: rgba(26, 107, 106, 0.0);
  --alpha-primary-10: rgba(26, 107, 106, 0.1);
  --alpha-primary-20: rgba(26, 107, 106, 0.2);
  --alpha-primary-40: rgba(26, 107, 106, 0.4);
  --alpha-primary-60: rgba(26, 107, 106, 0.6);
  --alpha-primary-80: rgba(26, 107, 106, 0.8);
  --alpha-primary-100: rgba(26, 107, 106, 1.0);

  /* =========================== */
  /* == TRANSPARENCE SECONDARY == */
  /* =========================== */

  --alpha-secondary-00: rgba(74, 158, 157, 0.0);
  --alpha-secondary-10: rgba(74, 158, 157, 0.1);
  --alpha-secondary-20: rgba(74, 158, 157, 0.2);
  --alpha-secondary-40: rgba(74, 158, 157, 0.4);
  --alpha-secondary-60: rgba(74, 158, 157, 0.6);
  --alpha-secondary-80: rgba(74, 158, 157, 0.8);
  --alpha-secondary-100: rgba(74, 158, 157, 1.0);

  /* =========================================== */
  /* == SYSTÈME DE DESIGN (rythme & profondeur) ==
     Un seul endroit pour régler l'allure du site.
     ------------------------------------------- */

  /* Dégradé teal unique, réutilisé par toutes les sections foncées.
     On s'arrête à #2D8584 : au-delà le texte blanc devient illisible. */
  --gradient-teal: linear-gradient(135deg, #155857 0%, #1A6B6A 55%, #2D8584 100%);

  /* Hauteur réelle du header fixe : sert au décalage des ancres */
  --header-height: 110px;

  /* Respiration verticale des sections (fluide selon la largeur d'écran) */
  --section-space: clamp(3.5rem, 6vw, 5.5rem);

  /* Ombres douces "Soft UI" : présentes mais jamais dures */
  --shadow-sm: 0 2px 8px rgba(21, 88, 87, 0.08);
  --shadow-md: 0 8px 24px rgba(21, 88, 87, 0.10);
  --shadow-lg: 0 16px 40px rgba(21, 88, 87, 0.14);

  /* Rayons de bordure */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-pill: 50px;

  /* Transitions : une seule cadence pour tout le site */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --speed: 250ms;
}

/* Empêche le débordement horizontal */
html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
  color-scheme: light;
  background-color: var(--background);
}

/* Défilement fluide entre les sections */
html {
  scroll-behavior: smooth;
}

/* Pour que les images ne débordent pas */
img, iframe {
  max-width: 100%;
}
iframe {
  height: auto;
  display: block;
}

/* Pour tous les éléments : boîte plus contrôlée */
* {
  box-sizing: border-box;
}

/* ==========================================================================
   ANCRAGE DES SECTIONS
   Le header est fixe : sans ce décalage, le titre visé se retrouve caché
   derrière le menu quand on clique dans la navigation.
   ========================================================================== */
#hero,
#massage,
#sophrologie,
#possibilities,
#Formations,
#img_L_txt_R,
#img_R_text_L,
#contact_avis,
#reservation,
#contact_coordinate,
#evenement,
section[id] {
  scroll-margin-top: var(--header-height);
}

/* ==========================================================================
   RYTHME VERTICAL
   Toutes les sections respirent de la même façon.
   ========================================================================== */
.massage-section,
.sophrologie-section,
.prestations-bg,
.possibilites-bg,
.history-section,
.history-section-2,
.avis-bg,
.reservation-section,
.contact-section,
.evenement-bg {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* « Qui suis-je ? » est raconté en deux blocs (texte + image, puis image +
   texte) : on supprime l'espace entre les deux pour qu'ils se lisent comme
   une seule et même section. */
#img_L_txt_R .history-section {
  padding-bottom: 0 !important;
}
#img_R_text_L .history-section-2 {
  padding-top: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* ==========================================================================
   ÉCHELLE TYPOGRAPHIQUE
   Chaque section définissait sa propre taille de titre (2.5rem, 2.8rem,
   1.5rem...). On impose ici une échelle unique et fluide.
   ========================================================================== */
.section-title h2,
.prestations-title,
.possibilites-title,
.history-title,
.history-title-2,
.avis-title,
.reservation-title,
.contact-title,
.evenement-title {
  font-family: var(--heading-font) !important;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.5rem) !important;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-bottom: 0.75rem;
}

/* Sous-titres / accroches de section */
.section-title p,
.prestations-subtitle,
.avis-subtitle,
.reservation-subtitle,
.evenement-subtitle {
  font-family: var(--primary-font) !important;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem) !important;
  line-height: 1.6;
}

/* Titres de cartes : même palier partout */
.massage-card h3,
.definition-card h3,
.accompagnements-title,
.carte-cadeau-card h3,
.evenement-event-title {
  font-family: var(--heading-font) !important;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem) !important;
  line-height: 1.25;
}

/* Corps de texte : jamais sous 16px sur mobile (évite le zoom auto iOS) */
body {
  font-family: var(--primary-font);
  font-size: 16px;
  line-height: 1.7;
}

/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

/* Anneau de focus visible au clavier (invisible à la souris) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.accompagnement-card:focus-visible {
  outline: 3px solid var(--warning-color);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Zone tactile minimale de 44px sur les éléments cliquables */
.btn,
.nav-link,
.massage-arrow,
.modal-close {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Curseur explicite sur tout ce qui est cliquable */
a, button, .btn, .accompagnement-card, .massage-arrow {
  cursor: pointer;
}

/* Respect du réglage système « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   NAVIGATION : section active
   Mise en évidence de l'onglet correspondant à la section visible.
   ========================================================================== */
.custom-menu .nav-link.is-active {
  color: var(--primary-color) !important;
  position: relative;
}
.custom-menu .nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--secondary-color);
}

/* ==========================================================================
   APPARITION DES ÉLÉMENTS AU DÉFILEMENT
   base.js ajoute .active dès que l'élément entre dans l'écran.
   ========================================================================== */
[data-animate] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
[data-animate].active {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
  }
}