/* ============================================================
   custom.css — Helix Ultimate
   Ce fichier est chargé automatiquement par le template.
   Il ne sera PAS écrasé lors des mises à jour de Helix Ultimate.
   ============================================================ */

/* ============================================
   YOGA SITE — DESIGN TOKENS
   Identité visuelle : Traditionnel · Nature · Spirituel
   ============================================ */

:root {

  /* --- PALETTE --- */

  --couleur-terre:        #3B2F1E;   /* Terre profonde */
  --couleur-sable:        #7A6E5F;   /* Sable moyen */
  --couleur-sable-clair:  #C4A882;   /* Sable chaud */
  --couleur-lin:          #F5EFE4;   /* Lin doux — fond général */
  --couleur-lin-sombre:   #F0EBE2;   /* Lin sombre — fond alternatif */
  --couleur-foret:        #4A6741;   /* Forêt calme */
  --couleur-sauge:        #8B9E7C;   /* Sauge */
  --couleur-sauge-clair:  #EFF5EC;   /* Sauge très clair */


  /* --- FOND --- */

  --fond-page:            var(--couleur-lin);          /* #F5EFE4 */
  --fond-section:         var(--couleur-lin-sombre);   /* #F0EBE2 */


  /* --- NAVIGATION --- */

  --nav-logo:             var(--couleur-terre);        /* #3B2F1E */
  --nav-liens:            var(--couleur-sable);        /* #7A6E5F */
  --nav-liens-hover:      var(--couleur-terre);        /* #3B2F1E */


  /* --- TYPOGRAPHIE --- */

  --texte-titre:          var(--couleur-terre);        /* #3B2F1E */
  --texte-sous-titre:     var(--couleur-sable);        /* #7A6E5F */
  --texte-corps:          #4A3F30;
  --texte-discret:        var(--couleur-sable);        /* #7A6E5F */

  --font-titres:          'Cormorant Garamond', Georgia, serif;
  --font-corps:           'Lora', Georgia, serif;


  /* --- BOUTONS --- */

  /* Bouton principal (plein) */
  --btn-fond:             var(--couleur-foret);        /* #4A6741 */
  --btn-texte:            var(--couleur-sauge-clair);  /* #EFF5EC */
  --btn-fond-hover:       #3B5434;

  /* Bouton secondaire (outline) */
  --btn-outline-fond:     transparent;
  --btn-outline-bordure:  var(--couleur-foret);        /* #4A6741 */
  --btn-outline-texte:    var(--couleur-foret);        /* #4A6741 */
  --btn-outline-hover:    var(--couleur-sauge-clair);  /* #EFF5EC */


  /* --- TAGS & AMBIANCE --- */

  /* Tag vert */
  --tag-vert-fond:        var(--couleur-sauge-clair);  /* #EFF5EC */
  --tag-vert-texte:       var(--couleur-foret);        /* #4A6741 */
  --tag-vert-bordure:     var(--couleur-sauge);        /* #8B9E7C */

  /* Tag beige */
  --tag-beige-fond:       var(--couleur-lin);          /* #F5EFE4 */
  --tag-beige-texte:      var(--couleur-sable);        /* #7A6E5F */
  --tag-beige-bordure:    var(--couleur-sable-clair);  /* #C4A882 */

  /* Tag sable */
  --tag-sable-fond:       var(--couleur-lin-sombre);   /* #F0EBE2 */
  --tag-sable-texte:      #5A4A38;
  --tag-sable-bordure:    var(--couleur-sable-clair);  /* #C4A882 */


  /* --- BORDURES & SÉPARATEURS --- */

  --bordure:              #E8E0D4;
  --bordure-forte:        var(--couleur-sable-clair);  /* #C4A882 */

}

/* --- Typographie globale --- */

h1 { color: var(--texte-titre); }

/* --- En-tête fixe permanent --- */
#sp-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9998 !important;
}

/* Compensation de la hauteur du header fixe (ajuster si le contenu passe dessous) */
.body-innerwrapper {
  padding-top: var(--header_height, 80px) !important;
}

/* --- Overflow visible pour que le tooltip dépasse du header --- */
#sp-header,
#sp-header .container,
#sp-header .container-inner,
#sp-header .row,
#sp-menu,
#sp-menu .sp-column,
#sp-menu .header-modules,
.sp-megamenu-parent {
  overflow: visible !important;
}

/* --- Tooltip "Recherche" au survol de la loupe --- */
/* Cible le lien par son href (Helix Ultimate n'applique pas la classe CSS sur le <a> en megamenu) */
.sp-megamenu-parent a[href*="rechercher"],
li.item-404 > a {
  position: relative;
}

.sp-megamenu-parent a[href*="rechercher"]::after,
li.item-404 > a::after {
  content: "Recherche";
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 13px;
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 9999;
}

.sp-megamenu-parent a[href*="rechercher"]:hover::after,
li.item-404 > a:hover::after {
  opacity: 1;
}

/* Bouton séance découverte */
#btn-0df8b70b-feb1-4e5b-a051-cda941b184f2 {
    background-color: #DF950D !important;
    border-color: #DF950D !important;
    color: #ffffff !important;
}

#btn-0df8b70b-feb1-4e5b-a051-cda941b184f2:hover,
#btn-0df8b70b-feb1-4e5b-a051-cda941b184f2:focus {
    background-color: #c47f0b !important;
    border-color: #c47f0b !important;
    color: #ffffff !important;
}

/* Suppression espace bottom colonnes SPPB */
#column-id-d98d09f8-b57b-44f5-99b9-c9c67917d2c2 .sppb-column-addons,
#column-id-d98d09f8-b57b-44f5-99b9-c9c67917d2c2 .sppb-column-addons > *:last-child,
#column-id-d98d09f8-b57b-44f5-99b9-c9c67917d2c2 p:last-child,
#column-id-57fee325-0cbe-4d44-819f-5df268b7ec3d .sppb-column-addons,
#column-id-57fee325-0cbe-4d44-819f-5df268b7ec3d .sppb-column-addons > *:last-child,
#column-id-57fee325-0cbe-4d44-819f-5df268b7ec3d p:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Image famille_2 — réduite à 60% sur mobile */
@media (max-width: 576px) {
  img[src*="famille_2"] {
    width: 60% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }
}

/* Citation yoga encadrée */
p.yoga-citation,
p.yoga-citation em {
  font-family: 'CormorantGaramond', Georgia, serif;
  color: #3b2f1e;
}

p.yoga-citation {
  text-align: center;
  border: 2px solid #4A6741;
  border-radius: 50px;
  padding: 10px 150px;
  display: inline-block;
  background-color: #c4a882;
  width: auto;
}

@media (max-width: 576px) {
  p.yoga-citation {
    padding: 5px 10px;
  }

#sp-bottom {
      padding: 30px 0 30px; /* modifie selon besoin */
      font-size: 14px;
      line-height: 1.6;
  }
}

/* ============================================
   HEADER STICKY — fil d'Ariane
   ============================================ */
@media (max-width: 991px) {
  .sp-page-title {
    padding: 12px 0;
  }

  .sp-page-title .breadcrumb {
    background: none;
    padding: 0;
    margin: 10px 0 -10px 0;
  }
}

@media (min-width: 992px) {
  .sp-page-title {
    padding: 70px 0px 0px 0px;
  }
}

/* ============================================
   CONTENU PRINCIPAL
   ============================================ */
#sp-main-body {
  padding: 80px 0;
}

/* ============================================
   GALERIE — desktop uniquement (≥992px)
   ============================================ */
@media (min-width: 992px) {
  .speasyimagegallery-gallery {
    margin: 40px;
  }
}

/* ============================================
   PAGE CONTACT — desktop uniquement (≥992px)
   ============================================ */
.com-contact .page-header {
  display: none;
}

.contact-form form {
  background-color: #f7f7f7;
  padding: 20px 0;
}

.contact-form fieldset,
.contact-form > form > .control-group {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  .com-contact .container {
    padding-left: 85px;
    padding-right: 85px;
  }

  div.com-contact > h1 {
    font-weight: normal !important;
    margin-top: -20px !important;
    margin-bottom: 20px !important;
  }

  .contact-form form {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .contact-form fieldset,
  .contact-form > form > .control-group {
    width: 66.666667%;
    padding: 0 20px;
  }
}

/* Alignement coche + texte dans les .control-group */
.com-contact .control-group:has(input[type="checkbox"]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}

/* Coche à gauche, label à droite */
.com-contact .control-group:has(input[type="checkbox"]) .controls {
  order: 1;
  flex: none;
}
.com-contact .control-group:has(input[type="checkbox"]) .control-label {
  order: 2;
  flex: 1;
}

/* Neutralise le float et padding de Bootstrap 5 sur form-check */
.com-contact .control-group .form-check {
  min-height: auto;
  padding-left: 0;
  margin-bottom: 0;
}
.com-contact .control-group .form-check-input {
  float: none;
  margin: 6px 0 0 0;
  position: static;
}