/*
Theme Name: Hello Elementor Child — Arôm'Anse
Theme URI: https://aromanse.com
Description: Thème enfant Hello Elementor personnalisé pour Arôm'Anse — Institut de beauté et bien-être premium
Author: Arôm'Anse
Author URI: https://aromanse.com
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ============================================================
   VARIABLES DE MARQUE — ARÔM'ANSE
   ============================================================ */
:root {
  /* Palette principale */
  --color-noir:       #2D1B3D;
  --color-or:         #C8A96E;
  --color-or-light:   #D4B97A;
  --color-or-dark:    #A8893E;
  --color-mauve:      #8B6AAE;
  --color-creme:      #F5F0EB;
  --color-blanc:      #FAFAF8;
  --color-sauge:      #7A8B6F;

  /* Typographies */
  --font-titre:       'Playfair Display', Georgia, serif;
  --font-accent:      'Cormorant Garamond', 'Times New Roman', serif;
  --font-corps:       'Lato', 'Helvetica Neue', sans-serif;
  --font-bouton:      'Montserrat', 'Helvetica Neue', sans-serif;

  /* Espacements */
  --section-padding:  80px;
  --section-padding-sm: 50px;

  /* Effets */
  --border-radius:    10px;
  --transition:       0.35s ease;
  --shadow-or:        0 6px 30px rgba(200, 169, 110, 0.3);
  --shadow-soft:      0 4px 20px rgba(45, 27, 61, 0.12);
}

/* ============================================================
   IMPORTS GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Lato:wght@300;400;700&family=Montserrat:wght@300;400;500;600&display=swap');

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-corps);
  background-color: var(--color-blanc);
  color: var(--color-noir);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPOGRAPHIE GLOBALE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titre);
  line-height: 1.2;
  color: var(--color-noir);
}

h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.8rem); font-weight: 500; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 500; }

p, li {
  font-family: var(--font-corps);
  line-height: 1.75;
  color: #4a4a5a;
}

/* Citations en Cormorant */
blockquote, .citation, .elementor-widget-text-editor em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--color-mauve);
  line-height: 1.6;
}

/* ============================================================
   HEADER STICKY
   ============================================================ */
.site-header,
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  transition: background-color var(--transition), box-shadow var(--transition), padding var(--transition);
}

.header-scrolled,
body.elementor-page .e-n-header.sticky-applied {
  background-color: rgba(250, 250, 248, 0.97) !important;
  box-shadow: 0 2px 20px rgba(45, 27, 61, 0.08);
}

/* ============================================================
   BOUTONS GLOBAUX
   ============================================================ */

/* Bouton primaire — Or plein */
.elementor-button,
.elementor-button-wrapper .elementor-button,
a.elementor-button {
  font-family: var(--font-bouton) !important;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 30px !important;
  transition: all var(--transition) !important;
}

/* Style primaire */
.btn-primaire,
.elementor-button.btn-primaire {
  background-color: var(--color-or) !important;
  color: #fff !important;
  border: 2px solid var(--color-or) !important;
  padding: 14px 36px !important;
}
.btn-primaire:hover {
  background-color: var(--color-or-dark) !important;
  border-color: var(--color-or-dark) !important;
  box-shadow: var(--shadow-or) !important;
  transform: translateY(-1px);
}

/* Style secondaire — Contour doré */
.btn-secondaire,
.elementor-button.btn-secondaire {
  background-color: transparent !important;
  color: var(--color-or) !important;
  border: 2px solid var(--color-or) !important;
  padding: 14px 36px !important;
}
.btn-secondaire:hover {
  background-color: var(--color-or) !important;
  color: #fff !important;
}

/* Bouton doré clair (sur fond sombre) */
.btn-outline-light {
  background-color: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.7) !important;
}
.btn-outline-light:hover {
  background-color: var(--color-or) !important;
  border-color: var(--color-or) !important;
}

/* ============================================================
   SECTIONS GÉNÉRALES
   ============================================================ */
.elementor-section {
  position: relative;
}

/* Séparateur doré décoratif */
.divider-or {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-or), transparent);
  margin: 0 auto 30px;
}

/* Filet doré via widget Divider Elementor */
.elementor-widget-divider .elementor-divider-separator {
  border-color: var(--color-or) !important;
}

/* ============================================================
   SECTION HERO
   ============================================================ */
.section-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.section-hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,26,46,0.55) 0%, rgba(26,26,46,0.45) 60%, rgba(26,26,46,0.7) 100%);
  z-index: 1;
}

.section-hero .elementor-container {
  position: relative;
  z-index: 2;
}

/* Scroll indicator animé */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: bounce 2s infinite;
}
.scroll-indicator svg {
  stroke: var(--color-or);
  width: 28px;
  height: 28px;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ============================================================
   CARTES DE SOINS (Section 3 Accueil)
   ============================================================ */
.carte-soin {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  transition: transform var(--transition);
}
.carte-soin:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
}

.carte-soin-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(26,26,46,0.85) 0%, rgba(26,26,46,0.1) 60%);
  transition: background var(--transition);
}
.carte-soin:hover .carte-soin-overlay {
  background: linear-gradient(0deg, rgba(26,26,46,0.9) 0%, rgba(26,26,46,0.3) 60%);
}

.carte-soin-content {
  position: relative;
  z-index: 2;
  padding: 30px;
  color: #fff;
}
.carte-soin-content h3 {
  color: #fff;
  font-family: var(--font-titre);
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.carte-soin-content p {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.carte-soin-content a {
  color: var(--color-or);
  font-family: var(--font-bouton);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--color-or);
  padding-bottom: 2px;
  transition: color var(--transition);
}

/* ============================================================
   SECTION CARTES CADEAUX (fond sombre)
   ============================================================ */
.section-gift-cards {
  background-color: var(--color-noir);
  padding: var(--section-padding) 0;
}

.section-gift-cards h2,
.section-gift-cards h3 {
  color: #fff;
}

.gift-card-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(200,169,110,0.25);
  border-radius: var(--border-radius);
  padding: 30px;
  text-align: center;
  transition: all var(--transition);
}
.gift-card-item:hover {
  border-color: var(--color-or);
  background: rgba(200,169,110,0.08);
  transform: translateY(-4px);
}

.price-or {
  font-family: var(--font-titre);
  font-size: 2rem;
  color: var(--color-or);
}

/* ============================================================
   SECTION COMPTEURS / CHIFFRES CLÉS
   ============================================================ */
.elementor-counter-number-wrapper {
  font-family: var(--font-titre) !important;
}

.elementor-counter-number {
  color: var(--color-or) !important;
  font-size: 3rem !important;
  font-weight: 600 !important;
}

.elementor-counter-number-suffix {
  color: var(--color-or) !important;
}

.elementor-counter-title {
  font-family: var(--font-corps) !important;
  color: rgba(255,255,255,0.8) !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   TÉMOIGNAGES
   ============================================================ */
.elementor-testimonial-content {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-size: 1.15rem !important;
  color: #555 !important;
  line-height: 1.7 !important;
}

.elementor-testimonial-name {
  font-family: var(--font-bouton) !important;
  color: var(--color-or) !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.08em;
}

/* Guillemets décoratifs */
.testimonial-quote::before {
  content: '\201C';
  font-family: var(--font-titre);
  font-size: 5rem;
  color: var(--color-or);
  opacity: 0.3;
  line-height: 0;
  position: relative;
  top: 25px;
  left: 0;
  display: block;
}

/* ============================================================
   WOOCOMMERCE — CARTES CADEAUX
   ============================================================ */

/* Grille produits */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.woocommerce ul.products li.product {
  background: var(--color-blanc);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: all var(--transition);
  border: 1px solid rgba(200,169,110,0.15);
  margin: 0 !important;
  float: none !important;
  width: auto !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 40px rgba(26,26,46,0.15);
  border-color: var(--color-or);
}

.woocommerce ul.products li.product a img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.05);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-titre) !important;
  font-size: 1.1rem !important;
  padding: 20px 20px 5px !important;
  color: var(--color-noir) !important;
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-titre) !important;
  font-size: 1.3rem !important;
  color: var(--color-or) !important;
  padding: 0 20px !important;
  display: block;
}

.woocommerce ul.products li.product .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button {
  font-family: var(--font-bouton) !important;
  background-color: var(--color-or) !important;
  color: #fff !important;
  border-radius: 30px !important;
  letter-spacing: 0.08em;
  font-size: 0.8rem !important;
  padding: 10px 24px !important;
  margin: 15px 20px 20px !important;
  transition: all var(--transition) !important;
  text-transform: uppercase;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover {
  background-color: var(--color-or-dark) !important;
  box-shadow: var(--shadow-or) !important;
  transform: translateY(-1px);
}

/* Fiche produit */
.woocommerce div.product .product_title {
  font-family: var(--font-titre) !important;
  font-size: 2rem !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--color-or) !important;
  font-family: var(--font-titre) !important;
  font-size: 1.8rem !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--font-accent) !important;
  font-style: italic;
  font-size: 1.1rem;
  color: #666;
}

/* ============================================================
   GALERIE / LIGHTBOX
   ============================================================ */
.galerie-masonry {
  column-count: 3;
  column-gap: 15px;
}
.galerie-masonry img {
  width: 100%;
  margin-bottom: 15px;
  border-radius: 8px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}
.galerie-masonry img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
  .galerie-masonry { column-count: 2; }
}
@media (max-width: 480px) {
  .galerie-masonry { column-count: 1; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.elementor-location-footer {
  background-color: var(--color-noir);
}

.footer-col-title {
  font-family: var(--font-titre) !important;
  color: #fff !important;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(200,169,110,0.3);
}

.footer-col-title::after {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  background: var(--color-or);
  margin-top: 8px;
}

.elementor-location-footer p,
.elementor-location-footer li,
.elementor-location-footer a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.9rem;
  line-height: 1.8;
}

.elementor-location-footer a:hover {
  color: var(--color-or) !important;
  transition: color var(--transition);
}

/* Newsletter footer */
.footer-newsletter-form input[type="email"] {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(200,169,110,0.4);
  border-radius: 25px 0 0 25px;
  color: #fff;
  padding: 12px 20px;
  width: calc(100% - 110px);
  outline: none;
  font-family: var(--font-corps);
}

.footer-newsletter-form button {
  background: var(--color-or);
  border: none;
  border-radius: 0 25px 25px 0;
  color: #fff;
  padding: 12px 20px;
  font-family: var(--font-bouton);
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--transition);
}
.footer-newsletter-form button:hover {
  background: var(--color-or-dark);
}

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(200,169,110,0.15);
  padding: 20px 0;
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.35) !important;
}

/* ============================================================
   RÉSEAUX SOCIAUX
   ============================================================ */
.elementor-social-icons-wrapper .elementor-social-icon {
  background-color: transparent !important;
  border: 1px solid rgba(200,169,110,0.4) !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  transition: all var(--transition) !important;
}
.elementor-social-icons-wrapper .elementor-social-icon:hover {
  background-color: var(--color-or) !important;
  border-color: var(--color-or) !important;
  transform: translateY(-3px);
}
.elementor-social-icons-wrapper .elementor-social-icon i {
  color: rgba(255,255,255,0.7) !important;
}
.elementor-social-icons-wrapper .elementor-social-icon:hover i {
  color: #fff !important;
}

/* ============================================================
   ANIMATIONS AU SCROLL (Elementor Motion Effects)
   ============================================================ */
[data-aos] {
  transition-duration: 0.7s !important;
}

/* Fade-in sur les titres */
.elementor-widget-heading .elementor-heading-title {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Parallaxe légère — géré par Elementor Pro Motion Effects */

/* ============================================================
   GOOGLE MAPS STYLISÉE
   ============================================================ */
.elementor-widget-google_maps iframe {
  filter: sepia(20%) contrast(90%) brightness(95%);
  border-radius: var(--border-radius);
}

/* ============================================================
   FORMULAIRE DE CONTACT / RÉSERVATION
   ============================================================ */
.elementor-form .elementor-field-group .elementor-field {
  border-radius: 8px !important;
  border: 1px solid rgba(139,111,126,0.3) !important;
  padding: 14px 18px !important;
  font-family: var(--font-corps) !important;
  transition: border-color var(--transition) !important;
}
.elementor-form .elementor-field-group .elementor-field:focus {
  border-color: var(--color-or) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(200,169,110,0.1) !important;
}

.elementor-form label {
  font-family: var(--font-bouton) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-mauve) !important;
}

.elementor-form .e-form__buttons .elementor-button {
  background-color: var(--color-or) !important;
  border-radius: 30px !important;
  font-family: var(--font-bouton) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   PAGE SOINS — ACCORDÉONS
   ============================================================ */
.elementor-accordion .elementor-accordion-item {
  border: none !important;
  border-bottom: 1px solid rgba(200,169,110,0.2) !important;
  margin-bottom: 0 !important;
}

.elementor-accordion .elementor-tab-title {
  font-family: var(--font-titre) !important;
  font-size: 1.1rem !important;
  padding: 20px 0 !important;
  color: var(--color-noir) !important;
  cursor: pointer;
}

.elementor-accordion .elementor-tab-title .elementor-accordion-icon {
  color: var(--color-or) !important;
}

.elementor-accordion .elementor-tab-content {
  padding: 0 0 20px !important;
  font-family: var(--font-corps) !important;
  color: #555 !important;
}

/* ============================================================
   MOBILE FLOAT BUTTON — APPELER
   ============================================================ */
.mobile-call-btn {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 9999;
  background: var(--color-or);
  color: #fff;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(200,169,110,0.5);
  font-size: 1.4rem;
  text-decoration: none;
  transition: all var(--transition);
}
.mobile-call-btn:hover {
  transform: scale(1.1);
  background: var(--color-or-dark);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --section-padding: 60px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding: 50px;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }

  .mobile-call-btn {
    display: flex;
  }

  .galerie-masonry {
    column-count: 2;
  }

  .woocommerce ul.products {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }

  .section-hero {
    min-height: 85vh;
  }

  /* Vidéo hero : remplacée par image sur mobile via CSS */
  .hero-video-bg video {
    display: none;
  }
}

@media (max-width: 480px) {
  .galerie-masonry { column-count: 1; }

  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   HELPERS UTILITAIRES
   ============================================================ */
.text-or      { color: var(--color-or) !important; }
.text-blanc   { color: #fff !important; }
.text-center  { text-align: center; }
.text-serif   { font-family: var(--font-titre) !important; }
.text-italic  { font-family: var(--font-accent) !important; font-style: italic; }

.bg-noir      { background-color: var(--color-noir) !important; }
.bg-creme     { background-color: var(--color-creme) !important; }
.bg-blanc     { background-color: var(--color-blanc) !important; }

.spacing-top-sm    { padding-top: 40px; }
.spacing-bottom-sm { padding-bottom: 40px; }
.spacing-top-lg    { padding-top: 100px; }
.spacing-bottom-lg { padding-bottom: 100px; }

/* Filet décoratif or */
.border-or-top {
  border-top: 2px solid var(--color-or);
}
.border-or-bottom {
  border-bottom: 1px solid rgba(200,169,110,0.3);
}

/* ── MASQUER TITRES DE PAGES WORDPRESS ── */
.entry-title,
.page-title,
h1.entry-title,
.hentry .entry-header,
.site-main .page-header {
    display: none !important;
}
.site-main .entry-content,
.elementor-page .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}



/* ══════════════════════════════════════════════════════════════
   CORRECTION COULEURS — Violet logo #702963
══════════════════════════════════════════════════════════════ */

:root {
    --color-violet-logo: #702963;
    --color-violet-logo-light: #8B4A7A;
}

/* Remplacer le mauve trop bleu par le violet du logo */
.elementor-widget-heading .elementor-heading-title[style*="8B6AAE"],
[style*="color: #8B6AAE"],
[style*="color:#8B6AAE"] {
    color: #702963 !important;
}

/* Eyebrows et labels */
h4[style*="8B6AAE"],
.aromanse-eyebrow {
    color: #702963 !important;
}

/* ══════════════════════════════════════════════════════════════
   CORRECTION SAUT / LAYOUT SHIFT — Hero vidéo
══════════════════════════════════════════════════════════════ */

/* Stabiliser le header sticky pour éviter le saut */
#aromanse-hdr {
    position: sticky;
    top: 0;
    z-index: 9000;
    will-change: transform;
}

/* Empêcher le layout shift de la section hero vidéo */
.elementor-section.elementor-section-full_width,
.elementor-section[data-settings*="background_video"] {
    min-height: 100vh;
    contain: layout style;
}

/* Le fond du hero doit s'afficher immédiatement via poster */
.elementor-background-video-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: 0;
}

.elementor-background-video-embed,
.elementor-background-video-hosted {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Empêcher le scroll pendant le chargement de la vidéo */
.elementor-section .elementor-background-video-container video {
    min-width: 100%;
    min-height: 100%;
}

/* Corriger le saut dû au header HTML injecté */
.elementor-location-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9000 !important;
    will-change: transform;
    transform: translateZ(0);
}

/* Stabiliser la première section après le header */
.elementor-location-header + * .elementor-section:first-child,
.elementor-location-header ~ .elementor-section:first-child {
    margin-top: 0 !important;
}

/* Forcer la hauteur minimale du hero pour éviter le collapse */
.elementor-section:first-of-type {
    min-height: 100svh;
}

/* Anti-jump global */
* {
    box-sizing: border-box;
}

img, video {
    max-width: 100%;
    height: auto;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #aromanse-hdr nav,
    #aromanse-hdr > a:last-child {
        display: none;
    }
    #aromanse-hdr {
        padding: 0 20px;
        justify-content: space-between;
    }
    #aromanse-hdr img {
        height: 38px !important;
    }
}