/*
Theme Name: Mbap Boulou
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.5
*/

/* === GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;500;600;700;800&family=Dancing+Script:wght@600;700&display=swap');

/* ============================================
   DESIGN SYSTEM — massage-africain-saintlo.fr
   Couleur principale : #A04732 (terracotta)
   Police principale  : Baloo Bhaijaan 2
   Police décorative  : Dancing Script (h2, h6)
   NOTE: font-family de h2/h6 est géré dans
   wp_footer (functions.php) pour garantir la
   priorité sur les styles inline de Flatsome.
   ============================================ */

/* ============================================
   1. VARIABLES
   ============================================ */
:root {
  --color-primary:       #A04732;
  --color-primary-hover: #883b29;
  --color-text:          #565656;
  --color-bg-alt:        #EDEAE2;
  --font-main:           'Baloo Bhaijaan 2', sans-serif;
  --font-deco:           'Dancing Script', cursive;
  --btn-radius:          99px;
  --transition:          0.25s ease;
  --shadow-soft:         0 4px 20px rgba(0,0,0,.10);
  --shadow-card:         0 2px 12px rgba(0,0,0,.08);
}

/* ============================================
   2. TYPOGRAPHIE GLOBALE
   NOTE: font-family des h2/h6 → voir footer
   ============================================ */
body, p, li, td, th, label {
  font-family: var(--font-main) !important;
  color: var(--color-text);
  line-height: 1.75;
}

/* Tous les titres : police principale par défaut */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main) !important;
  color: var(--color-text);
  line-height: 1.3;
}

/* Tailles de titres */
h1 { font-size: 3rem;   font-weight: 800; line-height: 1.2; }
h2 { font-size: 2.2rem; font-weight: 700; line-height: 1.35; }
h3 { font-size: 1.35rem; font-weight: 700; }
h4 { font-size: 1.15rem; font-weight: 700; }
h5 { font-size: 1rem;   font-weight: 700; }
h6 { font-size: 1.5rem; font-weight: 400; line-height: 1.3; }

/* Forcer Flatsome à ne pas écraser nos polices */
body h1, body h3, body h4, body h5,
.entry-title, .page-title,
.section-title-main, .widget-title, .product_title {
  font-family: var(--font-main) !important;
}

/* Liens */
a { color: var(--color-primary); transition: color var(--transition); }
a:hover { color: var(--color-primary-hover); }

/* ============================================
   3. BOUTONS
   ============================================ */
.button,
.button.primary,
button[type="submit"],
input[type="submit"],
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #respond input#submit {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-radius: var(--btn-radius) !important;
  border: 2px solid var(--color-primary) !important;
  font-weight: 700 !important;
  font-family: var(--font-main) !important;
  letter-spacing: 0.02em;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition) !important;
  text-transform: none !important;
}

.button:hover,
.button.primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: #ffffff !important;
}

/* Bouton blanc (variante .white) */
.button.white {
  background-color: #ffffff !important;
  color: var(--color-primary) !important;
  border-color: #ffffff !important;
}
.button.white:hover {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Bouton success / bevel (Boutique) */
.button.success,
.button.is-bevel {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--btn-radius) !important;
}
.button.success:hover,
.button.is-bevel:hover {
  background-color: var(--color-primary-hover) !important;
}

/* Bouton outline */
.button.outline,
.button.secondary {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
  border-radius: var(--btn-radius) !important;
  font-weight: 700 !important;
}
.button.outline:hover,
.button.secondary:hover {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

/* Boutons toujours inline, jamais pleine largeur par défaut */
.section a.button,
.col a.button,
.col-inner a.button,
.section .button,
.button.expand {
  display: inline-block !important;
  width: auto !important;
  max-width: 100%;
}

/* Boutons sur fond terracotta — blanc, centré */
.section[style*="background-color:#a04732"] .button,
.section[style*="background-color:#A04732"] .button,
.col-inner[style*="background-color:#a04732"] .button,
.col-inner[style*="background-color:#A04732"] .button {
  background-color: #ffffff !important;
  color: var(--color-primary) !important;
  border-color: #ffffff !important;
  border-radius: var(--btn-radius) !important;
  display: block !important;
  width: fit-content !important;
  max-width: 90% !important;
  margin: 16px auto 0 !important;
  text-align: center !important;
  padding: 14px 32px !important;
  white-space: normal !important;
  word-break: break-word;
}
.section[style*="background-color:#a04732"] .button:hover,
.col-inner[style*="background-color:#a04732"] .button:hover {
  background-color: rgba(255,255,255,0.88) !important;
  color: var(--color-primary) !important;
  border-color: #ffffff !important;
}

/* Centrer le col-inner terracotta */
.col-inner[style*="background-color:#a04732"] {
  text-align: center !important;
}

/* Bouton désactivé (badge durée/prix) */
a.button[style*="pointer-events:none"],
a.button[style*="pointer-events: none"],
.button[style*="pointer-events:none"],
.button[style*="pointer-events: none"] {
  display: inline-block !important;
  width: auto !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  opacity: 0.88;
  cursor: default !important;
}

/* ============================================
   4. HEADER & NAVIGATION
   ============================================ */
#header, .header-main {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

#header .nav > li > a,
.header-nav-main .nav > li > a {
  font-family: var(--font-main) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color var(--transition);
}

#wide-nav .nav > li > a,
.header-bottom-nav > li > a {
  color: #ffffff;
  font-weight: 600;
  transition: color var(--transition);
}

#wide-nav .nav > li > a:hover,
#wide-nav .nav > li.active > a,
#wide-nav .nav > li.current-menu-item > a {
  color: #f0c4b2 !important;
}

.nav > li.active > a,
.nav > li.current-menu-item > a {
  color: var(--color-primary) !important;
}

#logo img { max-height: 70px; }

/* Sticky header */
.header-main.is-sticky,
#header.is-sticky .header-main {
  box-shadow: 0 2px 14px rgba(0,0,0,.12) !important;
  background-color: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(4px);
}

/* Header contact */
#header-contact a { color: var(--color-text); transition: color var(--transition); }
#header-contact a:hover { color: var(--color-primary); }

/* ============================================
   5. SECTIONS HERO (dark) — overlay + texte
   ============================================ */

/* Position relative pour z-index */
.section { position: relative; }
.section > .section-content { position: relative; z-index: 2; }

/* Overlay unique — div absolue à l'intérieur des sections dark */
.section.dark > div[style*="position:absolute"],
.section.dark > div[style*="inset:0"],
.section.dark > div[style*="inset: 0"],
.section.dark > div[style*="position:absolute"][style*="rgba"] {
  inset: 0 !important;
  background-color: rgba(0, 0, 0, 0.50) !important;
  pointer-events: none;
  z-index: 1;
}

/* Le contenu reste au-dessus de l'overlay */
.section.dark > .section-content,
.section.dark > div[style*="z-index:2"],
.section.dark > div[style*="z-index: 2"] {
  position: relative !important;
  z-index: 3 !important;
}

/* Texte dans les sections dark */
.section.dark h1,
.section.dark h2,
.section.dark h3,
.section.dark h4,
.section.dark h5,
.section.dark h6 {
  color: #ffffff !important;
}

.section.dark h1 {
  text-shadow: 0 3px 18px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.45) !important;
}
.section.dark h2 {
  text-shadow: 0 2px 12px rgba(0,0,0,.58) !important;
}
.section.dark h3 {
  text-shadow: 0 2px 8px rgba(0,0,0,.50) !important;
}
.section.dark h6 {
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.5) !important;
}

.section.dark p,
.section.dark li {
  color: rgba(255,255,255,.92) !important;
}

/* Hauteur réduite des sections hero */
.section.dark[style*="background-image"][style*="padding"] {
  padding-top: 65px !important;
  padding-bottom: 65px !important;
}
section.section.dark[style*="padding:110px"],
section.section.dark[style*="padding-top:110px"] {
  padding-top: 65px !important;
  padding-bottom: 65px !important;
}

/* ============================================
   6. SECTIONS FOND TERRACOTTA
   ============================================ */
.section[style*="background-color:#A04732"],
.section[style*="background-color:#a04732"],
.section[style*="background-color: #A04732"],
.section[style*="background-color: #a04732"],
.col-inner[style*="background-color:#a04732"],
.col-inner[style*="background-color:#A04732"] {
  color: #ffffff;
}

.section[style*="background-color:#A04732"] h1,
.section[style*="background-color:#A04732"] h2,
.section[style*="background-color:#A04732"] h3,
.section[style*="background-color:#A04732"] h4,
.section[style*="background-color:#A04732"] h5,
.section[style*="background-color:#A04732"] h6,
.section[style*="background-color:#A04732"] p,
.section[style*="background-color:#A04732"] li,
.section[style*="background-color:#A04732"] strong,
.section[style*="background-color:#a04732"] h1,
.section[style*="background-color:#a04732"] h2,
.section[style*="background-color:#a04732"] h3,
.section[style*="background-color:#a04732"] h4,
.section[style*="background-color:#a04732"] h5,
.section[style*="background-color:#a04732"] h6,
.section[style*="background-color:#a04732"] p,
.section[style*="background-color:#a04732"] li,
.section[style*="background-color:#a04732"] strong {
  color: #ffffff !important;
  text-shadow: none;
}

/* ============================================
   7. SLIDER ACCUEIL
   ============================================ */
/* Hauteur minimum desktop */
.section .slider,
.slider.flickity-enabled,
.ux-slider,
.section .slider .banner,
.section .banner.has-hover,
.ux-slider .banner,
.flickity-viewport,
.flickity-slider > *,
.banner-inner,
.banner .banner-inner,
.banner .fill,
.banner-bg {
  min-height: 460px !important;
}

/* Texte dans le bloc slider — fond semi-transparent */
.banner .text-box-content,
.slider .text-box-content {
  background-color: rgba(255, 248, 243, 0.93) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(160,71,50,0.18) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.18) !important;
}

.banner .text-box-content h2,
.slider .text-box-content h2 {
  color: var(--color-primary) !important;
  text-shadow: none !important;
  font-size: 2.6rem !important;
  line-height: 1.25 !important;
}
.banner .text-box-content h6,
.slider .text-box-content h6 {
  font-family: var(--font-deco) !important;
  font-size: 1.55rem !important;
  color: var(--color-primary) !important;
  text-shadow: none !important;
  opacity: 0.85;
}
.banner .text-box-content p,
.slider .text-box-content p {
  color: var(--color-text) !important;
  text-shadow: none !important;
  font-size: 1.05rem !important;
  line-height: 1.65;
}
.banner .text-box-content .button.primary {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

/* Hover banner */
.banner.has-hover .img-inner,
.banner.has-hover .banner-bg {
  transition: transform 0.55s ease !important;
}
.banner.has-hover:hover .img-inner,
.banner.has-hover:hover .banner-bg {
  transform: scale(1.03) !important;
}

/* ============================================
   8. ICON BOXES
   ============================================ */
.icon-box-text h5 {
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 1rem;
}
.icon-box-text p {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.65;
}
.icon-box.featured-box {
  padding: 10px 0;
  transition: transform var(--transition);
}
.icon-box.featured-box:hover {
  transform: translateY(-3px);
}
.icon-box-img img {
  object-fit: contain;
  max-width: 100%;
}

/* Cercle autour des icônes */
.icon-box .icon-inner,
.icon-box .icon {
  border-color: var(--color-primary) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
}
.icon-box-img.has-icon-bg .icon,
.icon-box-img.has-icon-bg .icon-inner {
  background-color: rgba(160,71,50,0.08) !important;
  border-color: var(--color-primary) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* Hover icône — inversion sur fond terracotta */
.icon-box.featured-box:hover .icon-inner {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.icon-box .icon-inner img {
  transition: filter 0.3s ease;
}
.icon-box.featured-box:hover .icon-inner img {
  filter: brightness(0) invert(1) !important;
}

/* Icônes sur fond terracotta — toujours blanches */
.section[style*="background-color:#a04732"] .icon-box img,
.section[style*="background-color:#A04732"] .icon-box img {
  filter: brightness(0) invert(1) !important;
}
.section[style*="background-color:#a04732"] .icon-box .icon-inner,
.section[style*="background-color:#A04732"] .icon-box .icon-inner {
  border-color: rgba(255,255,255,0.6) !important;
  background-color: rgba(255,255,255,0.12) !important;
}
.section[style*="background-color:#a04732"] .icon-box.featured-box:hover .icon-inner,
.section[style*="background-color:#A04732"] .icon-box.featured-box:hover .icon-inner {
  background-color: rgba(255,255,255,0.25) !important;
  border-color: #ffffff !important;
}
.section[style*="background-color:#a04732"] .icon-box-text h5,
.section[style*="background-color:#A04732"] .icon-box-text h5 {
  color: #ffffff !important;
}

/* h2 dans les icon-boxes — police lisible (géré aussi dans footer) */
.icon-box-text h2,
.icon-box h2 {
  font-family: var(--font-main) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--color-primary) !important;
  line-height: 1.3;
  margin-top: 12px;
}

/* ============================================
   9. SECTION TITLES
   ============================================ */
.section-title-main {
  color: var(--color-primary) !important;
  font-family: var(--font-main) !important;
  font-weight: 700 !important;
}
.section-title b {
  border-color: var(--color-primary) !important;
}
.section-title::after {
  background-color: var(--color-primary) !important;
}
.section:not(.dark) h6 {
  color: var(--color-primary);
}

/* ============================================
   10. IMAGES
   ============================================ */
img { max-width: 100%; height: auto; }

.img.has-hover { overflow: hidden; border-radius: 4px; }
.img.has-hover .img-inner {
  overflow: hidden;
  transition: transform 0.45s ease;
}
.img.has-hover:hover .img-inner {
  transform: scale(1.04);
}

/* ============================================
   11. FORMULAIRES
   ============================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea,
select {
  border-radius: 10px !important;
  border: 1.5px solid #d4cec5 !important;
  font-family: var(--font-main) !important;
  color: var(--color-text);
  padding: 10px 16px !important;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
  background-color: #faf9f7 !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(160,71,50,.15) !important;
  background-color: #ffffff !important;
}

textarea { min-height: 130px; resize: vertical; }

/* CF7 submit */
.wpcf7-submit {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--btn-radius) !important;
  padding: 12px 36px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer;
  transition: background-color var(--transition) !important;
  text-transform: none !important;
  letter-spacing: 0.02em;
}
.wpcf7-submit:hover {
  background-color: var(--color-primary-hover) !important;
}

/* CF7 messages */
.wpcf7-response-output {
  border-radius: 8px !important;
  border: none !important;
  padding: 12px 20px !important;
  font-weight: 600;
  margin-top: 12px !important;
}
.wpcf7-mail-sent-ok { background-color: #d4edda !important; color: #155724 !important; }
.wpcf7-validation-errors,
.wpcf7-acceptance-missing { background-color: #fff3cd !important; color: #856404 !important; }

/* ============================================
   12. WOOCOMMERCE
   ============================================ */
.woocommerce .price,
.woocommerce-Price-amount { color: var(--color-primary) !important; }
.woocommerce span.onsale,
.woocommerce .badge { background-color: var(--color-primary) !important; }

/* ============================================
   13. FOOTER
   ============================================ */
.absolute-footer {
  background-color: #2b1a14 !important;
  color: #c9b5af !important;
  padding: 18px 0 !important;
  font-size: 0.9rem;
}
.absolute-footer a { color: #e8d5cf !important; }
.absolute-footer a:hover { color: #ffffff !important; }
.absolute-footer .copyright-footer { color: #c9b5af; }

/* ============================================
   14. UTILITAIRES & FLATSOME OVERRIDES
   ============================================ */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

/* Tarifs */
.section strong { color: var(--color-primary); }

/* Dividers */
hr, .is-divider, .divider {
  border-color: var(--color-bg-alt) !important;
  border-width: 2px !important;
  margin: 24px 0 !important;
}

/* Flatsome couleur accent */
.is-loading-color,
.text-accent-color { color: var(--color-primary) !important; }
.bg-primary,
.ux-button-block.primary { background-color: var(--color-primary) !important; }

.label, .ux-label {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-radius: 4px;
}

/* Boutique col-inner terracotta */
.col-inner[style*="background-color:#a04732"] h2,
.col-inner[style*="background-color:#a04732"] p,
.col-inner[style*="background-color:#a04732"] strong {
  color: #ffffff !important;
}

/* Contact card lien couleur */
.col-inner[style*="background-color:#fff"] h4 { color: var(--color-primary); }

/* Liens dans le texte */
.section p a,
.col-inner p a,
.entry-content p a {
  text-decoration: none;
  color: var(--color-primary);
  border-bottom: 1px solid rgba(160,71,50,0.25);
  transition: border-color var(--transition), color var(--transition);
}
.section p a:hover {
  border-bottom-color: var(--color-primary);
}

/* Espacement contact card */
div[style*="margin-top:-100px"],
.section-content[style*="margin-top:-100px"],
.col-inner[style*="margin-top:-100px"] {
  margin-top: 40px !important;
}

/* ux-cell */
.ux-cell .button { border-radius: var(--btn-radius) !important; }

/* ============================================
   15. RESPONSIVE
   ============================================ */
@media only screen and (max-width: 849px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.35rem !important; }
  h3 { font-size: 1.15rem !important; }

  .button, .button.primary {
    width: auto;
    display: inline-block;
  }

  .section .row { padding-left: 10px; padding-right: 10px; }
  .icon-box.featured-box { margin-bottom: 24px !important; }

  .section.dark[style*="background-image"] {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }

  /* Slider mobile */
  .slider .banner.has-hover,
  #sl1, #sl2, #sl3, #sl4, #sl5, #sl6,
  #slm1, #slm2, #slm3, #slm4, #slm5 {
    padding-top: 520px !important;
  }
  .section .slider,
  .flickity-viewport {
    min-height: 520px !important;
    max-height: 520px;
  }

  .banner .text-box-content h2,
  .slider .text-box-content h2 {
    font-size: 1.8rem !important;
  }
}

@media only screen and (max-width: 549px) {
  h1 { font-size: 1.3rem !important; }
  h2 { font-size: 1.2rem !important; }

  .section[style*="padding-top:110px"] {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  /* Slider petit mobile */
  .slider .banner.has-hover,
  #sl1, #sl2, #sl3, #sl4, #sl5, #sl6,
  #slm1, #slm2, #slm3, #slm4, #slm5 {
    padding-top: 490px !important;
  }
  .section .slider,
  .flickity-viewport {
    min-height: 490px !important;
    max-height: 490px;
  }

  .banner .text-box-content {
    padding: 16px 14px !important;
  }
  .banner .text-box-content h2,
  .slider .text-box-content h2 {
    font-size: 1.5rem !important;
  }
  .banner .text-box-content h6,
  .slider .text-box-content h6 {
    font-size: 1.1rem !important;
  }
  .banner .text-box-content p,
  .slider .text-box-content p {
    font-size: 0.88rem !important;
  }
}