/*
Theme Name: Hello Elementor Child
Theme URI: https://www.ladentsaine.fr
Description: Child theme de Hello Elementor pour La Dent Saine
Author: Story B
Author URI: https://www.story-b.fr
Template: hello-elementor
Version: 1.0.0
*/

/* =========================================================================
   LA DENT SAINE — THÈME ENFANT
   =========================================================================
   TABLE DES MATIÈRES
   1. IMPORT POLICES
   2. TOKENS & VARIABLES CSS
   3. RESET & BASE
   4. TYPOGRAPHIE — TITRES H1–H4
   5. TYPOGRAPHIE — CORPS & UTILITAIRES
   6. LIENS
   7. DÉSACTIVATION TITRE DE PAGE
   8. OVERRIDES ELEMENTOR
   ========================================================================= */


/* =========================================================================
   1. IMPORT POLICES
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Manrope:wght@300;400;500;600;700&display=swap');


/* =========================================================================
   2. TOKENS & VARIABLES CSS
   ========================================================================= */
:root {
  /* --- Familles --- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Manrope', -apple-system, system-ui, sans-serif;

  /* --- Échelle fluide --- */
  --fs-h1:      clamp(52px, 7.2vw, 104px);
  --fs-h2:      clamp(40px, 5.2vw, 68px);
  --fs-h3:      clamp(22px, 2vw, 24px);
  --fs-h4:      clamp(20px, 1.8vw, 22px);
  --fs-lede:    18px;
  --fs-body:    15px;
  --fs-sm:      13px;
  --fs-caption: 12px;

  /* --- Graisses --- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* --- Tracking --- */
  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-eyebrow: 0.18em;
  --ls-button:  0.02em;

  /* --- Line-height --- */
  --lh-tight:   0.98;
  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --lh-lede:    1.55;

  /* --- Couleurs violet (accent principal) --- */
  --color-violet:       #614ea6;
  --color-violet-soft:  #9a8bd0;
  --color-violet-tint:  #efecf7;
  --color-violet-hover: #4f3f8a;

  /* --- Couleurs emerald (accent secondaire) --- */
  --color-emerald-deep: #038c8c;
  --color-emerald:      #4cb3b3;
  --color-emerald-mist: #94c9c9;
  --color-emerald-tint: #e6f3f3;

  /* --- Encre & neutres --- */
  --color-ink:      #1a1f2c;
  --color-ink-soft: #4a5260;
  --color-ink-mute: #8a909c;
  --color-line:     rgba(26, 31, 44, 0.08);

  /* --- Fonds --- */
  --color-paper:      #fbfaf7;
  --color-paper-warm: #f4f1ea;
  --color-dark:       #0a2929;

  /* --- Alias sémantiques --- */
  --color-primary:    var(--color-violet);
  --color-secondary:  var(--color-emerald-deep);
  --color-text:       var(--color-ink-soft);
  --color-heading:    var(--color-ink);
  --color-bg:         var(--color-paper);

  /* --- Fallback hauteur header dynamique --- */
  --header-height: 80px; /* fallback avant que le JS s'exécute */

}


/* =========================================================================
   3. RESET & BASE
   ========================================================================= */
body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-soft);
  background-color: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body * {
  font-family: inherit;
}




/* =========================================================================
   4. TYPOGRAPHIE — TITRES
   ========================================================================= */

h1,
.elementor-heading-title.elementor-size-xxl {
  font-family: var(--font-body) !important;
  font-size: var(--fs-h1) !important;
  font-weight: var(--fw-light) !important;
  line-height: var(--lh-tight) !important;
  letter-spacing: var(--ls-display) !important;
  color: var(--color-ink) !important;
}

h2,
.elementor-heading-title.elementor-size-xl {
  font-family: var(--font-body) !important;
  font-size: var(--fs-h2) !important;
  font-weight: var(--fw-light) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--ls-display) !important;
  color: var(--color-ink);
}

[class~="h2-style"] {
  font-family: var(--font-body) !important;
  font-size: var(--fs-h2) !important;
  font-weight: var(--fw-light) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--ls-display) !important;
  color: var(--color-ink) !important;
}

h3,
.elementor-heading-title.elementor-size-large,
.elementor-heading-title.elementor-size-medium {
  font-family: var(--font-body) !important;
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-medium) !important;
  line-height: var(--lh-heading) !important;
  letter-spacing: var(--ls-tight) !important;
  color: var(--color-ink);
}

h4,
.elementor-heading-title.elementor-size-small {
  font-family: var(--font-body) !important;
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-semi) !important;
  line-height: var(--lh-heading) !important;
  letter-spacing: var(--ls-normal) !important;
  color: var(--color-ink) !important;
}

h1 em, h2 em, h3 em, h4 em,
.elementor-heading-title em {
  font-style: italic !important;
  font-weight: var(--fw-light) !important;
  color: var(--color-violet) !important;
}

/* =========================================================================
   5. TYPOGRAPHIE — CORPS & UTILITAIRES
   ========================================================================= */

p,
.elementor-widget-text-editor p,
.elementor-widget-text-editor {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-ink-soft);
}

.lede,
.elementor-widget-text-editor .lede {
  font-family: var(--font-body) !important;
  font-size: var(--fs-lede) !important;
  font-weight: var(--fw-regular) !important;
  line-height: var(--lh-lede) !important;
  color: var(--color-ink-soft) !important;
  max-width: 600px;
}

.eyebrow,
.elementor-widget .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body) !important;
  font-size: var(--fs-caption) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--ls-eyebrow) !important;
  text-transform: uppercase;
  color: var(--color-violet) !important;
  line-height: 1;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--color-violet);
  flex-shrink: 0;
}

small,
.text-meta {
  font-family: var(--font-body) !important;
  font-size: var(--fs-caption) !important;
  color: var(--color-ink-mute) !important;
}


/* =========================================================================
   6. LIENS
   ========================================================================= */

/* Liens courants — violet, sans soulignement */
a:not(.elementor-button):not([class*="elementor-button"]):not([class*="btn"]):not(.e-con),
.elementor-widget a:not(.elementor-button):not([class*="elementor-button"]):not([class*="btn"]) {
  color: var(--color-violet) !important;
  text-decoration: none;
  font-family: var(--font-body);
  transition: color 0.2s ease;
}

a:not(.elementor-button):not([class*="elementor-button"]):not([class*="btn"]):hover:not(.e-con),
.elementor-widget a:not(.elementor-button):not([class*="elementor-button"]):not([class*="btn"]):hover {
  color: var(--color-violet-hover) !important;
  font-family: var(--font-body);
}

/* Liens-containers Elementor — ink neutre */
a.e-con,
a[data-element_type="container"] {
  color: var(--color-ink) !important;
  text-decoration: none !important;
}
a.e-con:hover,
a[data-element_type="container"]:hover {
  color: var(--color-ink) !important;
}


/* =========================================================================
   7. DÉSACTIVATION TITRE DE PAGE
   ========================================================================= */
.page-title,
.entry-title {
  display: none !important;
}



/* =========================================================================
   8. OVERRIDES ELEMENTOR
   ========================================================================= */

/* Force la police body sur tous les widgets texte */
.elementor-widget-text-editor *,
.elementor-widget-heading .elementor-heading-title {
  font-family: inherit;
}



/* Séparateurs — couleur line */
hr,
.elementor-divider-separator {
  border-color: var(--color-line) !important;
}


/* =========================================================================
   SECTIONS — PADDING PAR DÉFAUT
   ========================================================================= */

.e-con.e-parent:not(.e-child):not(.e-grid):not(.no-padding) {
  padding-top: 6% !important;
  padding-bottom: 6% !important;
  padding-left: 3% !important;
  padding-right: 3% !important;
}

@media (max-width: 767px) {
  .e-con.e-parent:not(.e-child):not(.e-grid):not(.no-padding):not(.full-height) {
    padding-top: 12% !important;
    padding-bottom: 12% !important;
    padding-left: 3% !important;
    padding-right: 3% !important;
  }
}

/* =========================================================================
   HERO SECTION HAUTEUR 100%
   ========================================================================= */

/* Grand écran — activé */
.full-height,
.full-height.e-con,
.full-height > .e-con-inner {
  min-height: calc(100dvh - 80px) !important;
  height: calc(100dvh - 80px) !important;
  display: flex !important;
  align-items: center !important;
}

/* Petite hauteur desktop — désactivé */
@media (max-height: 900px) and (min-width: 768px) {
  .full-height,
  .full-height.e-con,
  .full-height > .e-con-inner {
    min-height: unset !important;
    height: auto !important;
    padding-top: 80px !important;
  }
}

/* Mobile — réactivé avec padding */
@media (max-width: 767px) {
  /* Supprime le padding global sur TOUS les enfants de full-height */
  .full-height > .e-con-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Hauteur plein écran corrigée */
  .full-height,
  .full-height.e-con,
  .full-height > .e-con-inner {
    min-height: 100dvh !important;
    height: 100dvh !important;
  }
}


/* =========================================================================
   MENU
   ========================================================================= */

.elementor-location-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.elementor-location-header.scrolled {
  background: white;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);

}



/* Liens blancs quand menu transparent */
.elementor-location-header:not(.scrolled) .elementor-nav-menu a {
  color: white !important;
}

@media (max-height: 900px) {
  .elementor-location-header.scrolled {
    min-height: 60px !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }
}
@media (max-width: 1024px) {
  .elementor-location-header.scrolled {
    padding-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .elementor-location-header.scrolled {
    padding-bottom: 6px;
  }
}



.elementor-location-header .elementor-item,
.elementor-location-header .elementor-item a {
  font-family: 'Manrope', sans-serif !important;
  color: #4f3f8a !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.elementor-location-header .elementor-item:hover,
.elementor-location-header .elementor-item:hover a,
.elementor-location-header .elementor-item.elementor-item-active,
.elementor-location-header .elementor-item.elementor-item-active a,
.elementor-location-header .current-menu-item .elementor-item,
.elementor-location-header .current-menu-item a {
  color: #038c8c !important;
  fill: #038c8c !important;
  --e-global-color-accent: #038c8c !important;
  text-decoration: underline !important;
  text-decoration-color: #038c8c !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

a:not(.elementor-button):not([class*="elementor-button"]):not([class*="btn"]):not(.e-con):not(.elementor-item),
.elementor-widget a:not(.elementor-button):not([class*="elementor-button"]):not([class*="btn"]):not(.elementor-item) {
  color: var(--color-violet) !important;
  text-decoration: none;
  font-family: var(--font-body);
  transition: color 0.2s ease;
}

.elementor-location-header .elementor-item::after,
.elementor-location-header .elementor-item.elementor-item-active::after,
.elementor-location-header .current-menu-item a::after,
.elementor-location-header .elementor-item:hover::after {
  display: none !important;
  border: none !important;
  background: none !important;
  content: none !important;
}



/* =========================================================================
   SOINS — Scroll stacking sections (desktop uniquement)
   ========================================================================= */
@media (min-width: 768px) {
  .stack-section {
    position: sticky !important;
    top: var(--header-height) !important;
    min-height: calc(100dvh - var(--header-height)) !important;
    height: auto !important;
  }

  .stack-section.e-con,
  .stack-section > .e-con-inner {
    min-height: calc(100dvh - var(--header-height)) !important;
    height: auto !important;
  }

  .stack-section:nth-child(1) { z-index: 1; }
  .stack-section:nth-child(2) { z-index: 2; }
  .stack-section:nth-child(3) { z-index: 3; }
  .stack-section:nth-child(4) { z-index: 4; }
  .stack-section:nth-child(5) { z-index: 5; }
  .stack-section:nth-child(6) { z-index: 6; }
}

/* ── Stack sections — reset mobile ── */
@media (max-width: 767px) {
  .stack-section,
  .stack-section.e-con,
  .stack-section > .e-con-inner {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: unset !important;
    z-index: auto !important;
    overflow: visible !important;
  }
}

@media (min-width: 768px) and (max-height: 900px) {
  .stack-section,
  .stack-section.e-con,
  .stack-section > .e-con-inner {
    position: relative !important;
    top: auto !important;
    min-height: unset !important;
    height: auto !important;
    z-index: auto !important;
  }

  /* Garde la sticky column à la place */
  .sticky-col {
    position: sticky !important;
    top: var(--header-height);
    align-self: start !important;
  }
}

/* Désactive le stack dans l'éditeur Elementor */
body.elementor-editor-active .stack-section {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: unset !important;
  z-index: auto !important;
}

body.elementor-editor-active .stack-wrapper {
  height: auto !important;
}


/* =========================================================================
   STICKY COLUMN
   ========================================================================= */
.sticky-section {
  align-items: start !important;
  overflow: visible !important;
}

.sticky-section > .e-con-inner {
  align-items: start !important;
  overflow: visible !important;
}

.sticky-col {
  position: sticky !important;
  top: var(--header-height);
  align-self: start !important;
  height: auto !important;
}

/* ── Section intro soins ── */
.soins-intro {
  overflow: visible !important;
  position: relative;
  padding: 40px 40px 40px 380px !important;
  min-height: 200px;
}

.soins-intro.e-con,
.soins-intro > .e-con-inner {
  overflow: visible !important;
}

.soins-intro-img {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 360px !important;
  z-index: 2;
}

.soins-intro-img img {
  width: 100% !important;
  height: auto !important;
  display: block;
  vertical-align: bottom;
}

/* ── Mobile — empilement vertical ── */
@media (max-width: 767px) {
  .soins-intro {
    padding: 20px !important;
    min-height: unset;
  }

  .soins-intro-img {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* =========================================================================
   BACKGROUND
   ========================================================================= */

.bg-gradient-saine {
  background: linear-gradient(135deg, var(--color-paper-warm) 0%, var(--color-violet-tint) 100%);
  position: relative;
  overflow: hidden;
}

.bg-gradient-saine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(97, 78, 166, 0.22), transparent 70%);
  pointer-events: none;
}

.bg-gradient-saine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at bottom right, rgba(148, 201, 201, 0.28), transparent 70%);
  pointer-events: none;
}

/* =========================================================================
   ANIMATIONS
   ========================================================================= */

.star-svg-wrap {
  position: absolute;
  top: 10%;
  right: 5%;
  width: 40px;
  height: 40px;
  animation: starFloat 3s ease-in-out infinite;
  pointer-events: none;
}

.star-svg-wrap.star-small {
  width: 24px;
  height: 24px;
  top: 20%;
  right: 12%;
  animation-delay: 0.8s;
}

@keyframes starFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-8px) rotate(15deg); }
}