/*
Theme Name:   Laboratoire du Prana
Theme URI:    https://lelaboratoireduprana.com
Description:  Thème enfant pour Le Laboratoire du Prana — naturopathie, yoga & ateliers bien-être. Compatible Elementor Pro, basé sur Hello Elementor.
Author:       Julie Sainte Catherine
Author URI:   https://julie-saintecatherine.fr
Template:     hello-elementor
Version:      1.0.0
Tested up to: 6.5
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  prana-child
Tags:         elementor, wellness, yoga, naturopathy, custom-colors, custom-menu
*/


/* =========================================================
   LE LABORATOIRE DU PRANA — Thème enfant Hello Elementor
   Variables, polices, finitions visuelles, responsive
   ========================================================= */


/* ---------- 1. Variables globales ---------- */
:root {
  --prana-bg:         #F8F0E9;
  --prana-bg-soft:    #F0DCD2;
  --prana-bg-card:    #FFFFFF;
  --prana-bg-dark:    #1F1813;

  --prana-text:       #2A1F18;
  --prana-text-soft:  #6B5A4D;
  --prana-text-mute:  #9D8B7E;

  --prana-coral:      #D89280;
  --prana-coral-d:    #C57F6D;
  --prana-coral-s:    #F0BFAE;

  --prana-line:       #E8DDD0;
  --prana-line-light: #F0E5D8;

  --prana-font-serif: 'Cormorant Garamond', Georgia, serif;
  --prana-font-sans:  'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --prana-radius:     16px;
  --prana-radius-lg:  24px;
  --prana-radius-pill:999px;

  --prana-shadow-sm:  0 2px 10px rgba(42, 31, 24, .04);
  --prana-shadow:     0 14px 40px rgba(42, 31, 24, .08);
  --prana-shadow-lg:  0 30px 80px rgba(216, 146, 128, .25);
}


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


/* ---------- 3. Reset / Base ---------- */
body {
  font-family: var(--prana-font-sans);
  color: var(--prana-text);
  background: var(--prana-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { transition: color .2s ease, opacity .2s ease; }
::selection { background: var(--prana-coral); color: #fff; }


/* ---------- 4. Typographie ---------- */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--prana-font-serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--prana-text);
}
h1 em, h2 em, h3 em,
.elementor-heading-title em {
  font-style: italic;
  color: var(--prana-coral);
  font-weight: 400;
}


/* ---------- 5. Header ---------- */
.elementor-location-header,
header.site-header {
  position: sticky;
  top: 0;
  z-index: 99;
  background: var(--prana-bg);
  transition: background .2s ease, box-shadow .2s ease;
}
.elementor-location-header.is-scrolled,
header.site-header.is-scrolled {
  background: rgba(248, 240, 233, .96);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--prana-line);
}


/* ---------- 6. Navigation principale ---------- */
.elementor-nav-menu li a,
.menu li a {
  font-family: var(--prana-font-sans) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .14em !important;
  color: var(--prana-text);
}
.elementor-nav-menu a.elementor-item-active,
.elementor-nav-menu a.elementor-item.elementor-item-active,
.current-menu-item > a {
  color: var(--prana-coral) !important;
}


/* ---------- 7. Logo (avec double cercle inscrit) ---------- */
.prana-logo-mark {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--prana-coral);
  border-radius: 50%;
  color: var(--prana-coral);
  position: relative;
}
.prana-logo-mark::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--prana-coral);
  border-radius: 50%;
  opacity: .5;
}
.prana-logo-text {
  font-family: var(--prana-font-sans);
  font-size: .72rem;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--prana-text);
}


/* ---------- 8. Boutons (override Elementor) ---------- */
.elementor-button {
  font-family: var(--prana-font-sans) !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600 !important;
  border-radius: var(--prana-radius-pill) !important;
  transition: all .2s ease;
}
.elementor-button:hover {
  transform: translateY(-1px);
}


/* ---------- 9. Eyebrow (suprà-titre) ---------- */
.prana-eyebrow,
.elementor-widget-heading[data-id*="eye"] .elementor-heading-title {
  font-family: var(--prana-font-sans) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .2em !important;
  color: var(--prana-coral) !important;
}


/* ---------- 10. Link arrow (« EN SAVOIR PLUS → ») ---------- */
.prana-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--prana-font-sans);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--prana-coral);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.prana-link-arrow:hover {
  color: var(--prana-coral-d);
  border-bottom-color: var(--prana-coral);
}


/* ---------- 11. HERO — forme archway de l'image ---------- */
.elementor-section:first-of-type .elementor-column:last-of-type .elementor-widget-image img,
.prana-hero-image img {
  border-radius: 50% 50% 12px 12px / 60% 60% 12px 12px !important;
  box-shadow: var(--prana-shadow-lg);
}

/* Anneaux concentriques derrière l'image */
.elementor-section:first-of-type .elementor-column:last-of-type {
  position: relative;
}
.elementor-section:first-of-type .elementor-column:last-of-type::before {
  content: "";
  position: absolute;
  left: -8%; top: 50%;
  transform: translateY(-50%);
  width: 70%;
  aspect-ratio: 1;
  border: 1px solid var(--prana-coral-s);
  border-radius: 50%;
  opacity: .45;
  pointer-events: none;
  z-index: 0;
}
.elementor-section:first-of-type .elementor-column:last-of-type::after {
  content: "";
  position: absolute;
  left: 6%; top: 50%;
  transform: translateY(-50%);
  width: 45%;
  aspect-ratio: 1;
  border: 1px solid var(--prana-coral-s);
  border-radius: 50%;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}


/* ---------- 12. HERO — citation latérale ---------- */
.prana-hero-quote {
  font-family: var(--prana-font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--prana-text);
  padding-left: 22px;
  position: relative;
  max-width: 220px;
}
.prana-hero-quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -10px;
  font-size: 2.4rem;
  color: var(--prana-coral);
  font-family: var(--prana-font-serif);
  line-height: 1;
}


/* ---------- 13. SERVICES — séparateurs verticaux ---------- */
.prana-services .elementor-column,
[data-id="svcs0001"] .elementor-column {
  position: relative;
}
.prana-services .elementor-column:not(:last-child)::after,
[data-id="svcs0001"] .elementor-column:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: rgba(216, 146, 128, .4);
}


/* ---------- 14. RÉSERVATIONS & PODCAST — anneaux concentriques ---------- */
.prana-rings,
[data-id="schd0001"],
[data-id="podc0001"] {
  position: relative;
  overflow: hidden;
}
.prana-rings::before,
[data-id="schd0001"]::before {
  content: "";
  position: absolute;
  left: 40%; top: 50%;
  transform: translate(-50%, -50%);
  width: 360px; height: 360px;
  border-radius: 50%;
  border: 1px solid var(--prana-coral-s);
  opacity: .35;
  pointer-events: none;
}
.prana-rings::after,
[data-id="schd0001"]::after {
  content: "";
  position: absolute;
  left: 40%; top: 50%;
  transform: translate(-50%, -50%);
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 1px solid var(--prana-coral-s);
  opacity: .35;
  pointer-events: none;
}

[data-id="podc0001"]::before {
  content: "";
  position: absolute;
  left: 12%; top: 50%;
  transform: translateY(-50%);
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 1px solid var(--prana-coral-s);
  opacity: .3;
  pointer-events: none;
}
[data-id="podc0001"]::after {
  content: "";
  position: absolute;
  left: 12%; top: 50%;
  transform: translateY(-50%);
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 1px solid var(--prana-coral-s);
  opacity: .4;
  pointer-events: none;
}

[data-id="schd0001"] > .elementor-container,
[data-id="podc0001"] > .elementor-container,
.prana-rings > .elementor-container {
  position: relative;
  z-index: 1;
}


/* ---------- 15. PODCAST — cover à motif points ---------- */
.prana-podcast-cover {
  background:
    radial-gradient(circle, rgba(216, 146, 128, .35) 1.5px, transparent 2.5px) 0 0 / 10px 10px,
    linear-gradient(135deg, #F5D2C4 0%, #F0BFAE 100%) !important;
  position: relative;
}
.prana-podcast-cover::after {
  content: "LE LABORATOIRE\A DU PRANA";
  white-space: pre;
  position: absolute;
  bottom: 14px;
  left: 14px;
  font-family: var(--prana-font-serif);
  font-style: italic;
  font-size: .72rem;
  color: rgba(42, 31, 24, .45);
  line-height: 1.1;
}


/* ---------- 16. TÉMOIGNAGES — gros guillemet ouvrant ---------- */
.prana-testimonial {
  position: relative;
  padding-top: 36px;
  text-align: center;
}
.prana-testimonial::before {
  content: "\201C";
  display: block;
  font-family: var(--prana-font-serif);
  font-size: 4rem;
  line-height: .6;
  color: var(--prana-coral);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}


/* ---------- 17. Dots de pagination ---------- */
.prana-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 40px;
}
.prana-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--prana-line);
  display: inline-block;
}
.prana-dots span.is-active {
  background: var(--prana-coral);
}


/* ---------- 18. INSTAGRAM — photos rondes + hover ---------- */
.prana-instagram .elementor-widget-image img,
[data-id="inst0001"] .elementor-widget-image img {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .25s ease, box-shadow .25s ease;
}
.prana-instagram .elementor-widget-image:hover img,
[data-id="inst0001"] .elementor-widget-image:hover img {
  transform: scale(1.06);
  box-shadow: 0 12px 30px rgba(42, 31, 24, .15);
}


/* ---------- 19. FOOTER — 5 colonnes ---------- */
.prana-footer h4 {
  font-family: var(--prana-font-sans);
  color: var(--prana-text);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 18px;
}
.prana-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.prana-footer li {
  font-size: .9rem;
  margin-bottom: 10px;
  color: var(--prana-text-soft);
}
.prana-footer a {
  color: var(--prana-text-soft);
  text-decoration: none;
}
.prana-footer a:hover {
  color: var(--prana-coral);
}


/* ---------- 20. Scrollbar custom (WebKit) ---------- */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--prana-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--prana-line);
  border-radius: var(--prana-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--prana-coral);
}


/* ---------- 21. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  /* Anneaux décoratifs cachés sur tablette/mobile */
  .elementor-section:first-of-type .elementor-column:last-of-type::before,
  .elementor-section:first-of-type .elementor-column:last-of-type::after,
  .prana-rings::before,
  .prana-rings::after,
  [data-id="schd0001"]::before,
  [data-id="schd0001"]::after,
  [data-id="podc0001"]::before,
  [data-id="podc0001"]::after {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Séparateurs services -> bordure horizontale en mobile */
  .prana-services .elementor-column::after,
  [data-id="svcs0001"] .elementor-column::after {
    display: none;
  }
  .prana-services .elementor-column:not(:last-child),
  [data-id="svcs0001"] .elementor-column:not(:last-child) {
    border-bottom: 1px solid rgba(216, 146, 128, .3);
    padding-bottom: 40px;
    margin-bottom: 24px;
  }

  /* Citation hero masquée sur mobile */
  .prana-hero-quote {
    display: none;
  }

  /* Forme archway adoucie sur mobile */
  .elementor-section:first-of-type .elementor-column:last-of-type .elementor-widget-image img {
    border-radius: 24px 24px 12px 12px !important;
  }
}