/*
Theme Name: Bulle de Lune
Theme URI: https://bulledelune.ch
Author: Bulle de Lune
Description: Thème doux et léger pour Aymone Perrinjaquet, sage-femme indépendante. Compatible Elementor et Elementor Pro (Theme Builder) : tout le contenu des pages se modifie dans Elementor, les coordonnées dans Apparence > Personnaliser.
Version: 1.1.1
Requires at least: 6.3
Requires PHP: 7.4
Tested up to: 6.8
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bulle-de-lune
*/

:root {
  --bdl-cream: #fbf8f3;
  --bdl-sand: #f4ede4;
  --bdl-blush: #f8e6de;
  --bdl-blush-deep: #e5ad98;
  --bdl-teal: #4fc0b9;
  --bdl-teal-soft: #dcf1ee;
  --bdl-teal-deep: #2a7f78;
  --bdl-ink: #26443f;
  --bdl-muted: #64776f;
  --bdl-white: #ffffff;
  --bdl-shadow: 0 14px 44px rgba(38, 68, 63, .07);
  --bdl-round: 32px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: "Nunito", system-ui, sans-serif; font-size: 18px; line-height: 1.75;
  color: var(--bdl-ink); background: var(--bdl-cream); overflow-x: hidden;
}
h1, h2, h3, h4, .elementor-heading-title {
  font-family: "Fraunces", Georgia, serif; font-weight: 380; line-height: 1.15; letter-spacing: -.01em;
  font-variation-settings: "SOFT" 100; color: var(--bdl-ink);
}
h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); margin: 0 0 .6em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: 0 0 .6em; }
h3 { font-size: 1.38rem; margin: 0 0 .5em; }
h1.elementor-heading-title { font-size: clamp(2.4rem, 5vw, 3.9rem); }
h2.elementor-heading-title { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3.elementor-heading-title { font-size: 1.38rem; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--bdl-teal-deep); }
p { margin: 0 0 1.1em; }
a { color: var(--bdl-teal-deep); }
img { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.skip-link:focus { position: fixed; top: 10px; left: 10px; z-index: 100; width: auto; height: auto; clip: auto; background: #fff; padding: 10px 16px; border-radius: 12px; }
.bdl-container { width: min(1100px, 100% - 40px); margin-inline: auto; }
.site-main { position: relative; z-index: 1; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ---------- Classes utilisables dans Elementor (Avancé > Classes CSS) ---------- */
.bdl-hand .elementor-heading-title, .bdl-hand-text {
  font-family: "Caveat", cursive !important; font-weight: 500 !important; font-size: 1.65rem !important;
  color: var(--bdl-teal-deep) !important; line-height: 1.2 !important; display: inline-block; transform: rotate(-2deg);
  font-variation-settings: normal;
}
.bdl-signature .elementor-heading-title { font-size: 2.2rem !important; }
.bdl-muted, .bdl-muted p { color: var(--bdl-muted); }
.bdl-lead { font-size: 1.18rem; color: var(--bdl-muted); }
.bdl-quote .elementor-heading-title { font-style: italic; font-weight: 340; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.45; }
.bdl-btn-soft .elementor-button { background: var(--bdl-teal-soft) !important; color: var(--bdl-ink) !important; }
.bdl-btn-link .elementor-button { background: transparent !important; color: var(--bdl-teal-deep) !important; padding-left: 0 !important; padding-right: 0 !important; }
.elementor-widget-button .elementor-button, .bdl-btn {
  display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; padding: .85rem 1.5rem;
  font: 700 .98rem "Nunito", sans-serif; background: var(--bdl-teal-deep); color: #fff; text-decoration: none; border: 0; cursor: pointer;
  transition: transform .3s, box-shadow .3s, background .3s; line-height: 1.4;
}
.elementor-widget-button .elementor-button:hover, .bdl-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(42,127,120,.22); color: #fff; }
.bdl-btn-link .elementor-button:hover { box-shadow: none !important; }
[id] { scroll-margin-top: 110px; }
.bdl-quote-text p { font-family: "Fraunces", serif; font-size: 1.25rem; line-height: 1.6; font-variation-settings: "SOFT" 100; }
.bdl-path { list-style: none; padding: 0; margin: 1.6rem 0 0; position: relative; }
.bdl-path::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; border-left: 2px dotted var(--bdl-teal); }
.bdl-path li { position: relative; padding: 0 0 1.5rem 2.6rem; }
.bdl-path li::before { content: ""; position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--bdl-cream); border: 2px solid var(--bdl-teal); }
.bdl-path b { font-family: "Fraunces", serif; font-weight: 500; display: block; color: var(--bdl-teal-deep); }
.is-style-bdl-gentle { font-family: "Caveat", cursive; font-size: 1.5rem; color: var(--bdl-teal-deep); }
.bdl-btn-soft-inline { background: var(--bdl-teal-soft); color: var(--bdl-ink); }
.bdl-btn-soft-inline:hover { color: var(--bdl-ink); }
.bdl-card-hover { transition: transform .5s ease; }
.bdl-card-hover:hover { transform: translateY(-4px); }

/* Icônes rondes */
.bdl-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--bdl-teal-soft); color: var(--bdl-teal-deep); }
.bdl-icon.blush { background: var(--bdl-blush); color: #b4614a; }
.bdl-icon.white { background: #fff; }
.bdl-icon.center { margin-inline: auto; }
.bdl-art { background: #fff; border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; box-shadow: var(--bdl-shadow); width: 100%; max-width: 320px; margin-inline: auto; color: var(--bdl-teal-deep); }
.bdl-art svg { width: 52%; height: auto; }

/* Listes à pastilles */
.bdl-checks ul, ul.bdl-checks { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; }
.bdl-checks li { padding-left: 1.8rem; position: relative; }
.bdl-checks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 12px; height: 12px; border-radius: 50%; background: var(--bdl-teal); box-shadow: 0 0 0 4px var(--bdl-teal-soft); }
.bdl-note { background: var(--bdl-teal-soft); border-radius: 20px; padding: 16px 20px; font-size: .95rem; }
.bdl-note.blush { background: var(--bdl-blush); }
.bdl-soon .elementor-heading-title { font-family: "Caveat", cursive !important; color: #b4614a !important; font-size: 1.4rem !important; transform: rotate(-3deg); display: inline-block; }

/* Photo en forme de bulle organique */
.bdl-blob { position: relative; }
.elementor-widget.bdl-blob { position: relative; max-width: 460px !important; margin-inline: auto; }
.bdl-blob img {
  width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; object-position: 50% 28%;
  border-radius: 46% 54% 52% 48% / 56% 44% 56% 44%; animation: bdl-morph 18s ease-in-out infinite alternate;
  box-shadow: var(--bdl-shadow); position: relative; z-index: 1;
}
.elementor-widget.bdl-blob::before {
  content: ""; position: absolute; inset: -18px -24px -10px -14px; z-index: 0;
  border-radius: 52% 48% 44% 56% / 46% 58% 42% 54%; background: var(--bdl-blush);
  animation: bdl-morph 22s ease-in-out infinite alternate-reverse;
}
.elementor-widget.bdl-blob::after {
  content: ""; position: absolute; right: -6px; top: 4%; width: 74px; height: 74px; z-index: 2;
  background: url("assets/img/lune.svg") no-repeat center / contain; animation: bdl-bob 7s ease-in-out infinite;
}
@keyframes bdl-morph {
  0% { border-radius: 46% 54% 52% 48% / 56% 44% 56% 44%; }
  50% { border-radius: 56% 44% 40% 60% / 46% 56% 44% 54%; }
  100% { border-radius: 42% 58% 58% 42% / 52% 40% 60% 48%; }
}
@keyframes bdl-bob { 50% { transform: translateY(-10px); } }

/* Portrait détouré (classe bdl-portrait sur un widget Image avec une photo sans fond) */
.elementor-widget.bdl-portrait { position: relative; width: 100%; max-width: 360px !important; margin-inline: auto; aspect-ratio: 1 / 1.1; }
.elementor-widget.bdl-portrait::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 82%; z-index: 0;
  border-radius: 50% 50% 50% 50% / 46% 46% 54% 54%;
  background: radial-gradient(circle at 32% 28%, #fff 0, var(--bdl-teal-soft) 52%, #c6e7e2 100%);
  box-shadow: 0 0 0 12px var(--bdl-blush), var(--bdl-shadow);
  animation: bdl-breathe 9s ease-in-out infinite;
}
.elementor-widget.bdl-portrait::after {
  content: ""; position: absolute; right: -4px; top: 10%; width: 70px; height: 70px; z-index: 2;
  background: url("assets/img/lune.svg") no-repeat center / contain; animation: bdl-bob 7s ease-in-out infinite;
}
.bdl-portrait img {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; z-index: 1;
  object-fit: contain; object-position: 50% 100%;
  clip-path: inset(-20% 0 0 0 round 0 0 50% 50% / 0 0 44.3% 44.3%);
}
@keyframes bdl-breathe { 50% { transform: scale(1.025); } }

/* ---------- Bulles en fond ---------- */
.bdl-bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bdl-bubbles span {
  position: absolute; bottom: -160px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,.35) 18%, rgba(79,192,185,.10) 55%, rgba(229,173,152,.16) 100%);
  box-shadow: inset -6px -8px 18px rgba(79,192,185,.18), inset 4px 4px 10px rgba(255,255,255,.6);
  animation: bdl-rise linear infinite, bdl-sway ease-in-out infinite alternate; opacity: 0;
}
@keyframes bdl-rise {
  0% { transform: translateY(0) scale(.9); opacity: 0; }
  10% { opacity: var(--o, .55); }
  85% { opacity: var(--o, .55); }
  100% { transform: translateY(calc(-100vh - 260px)) scale(1.05); opacity: 0; }
}
@keyframes bdl-sway { from { margin-left: -24px; } to { margin-left: 24px; } }

/* ---------- En-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 30; transition: background .4s, box-shadow .4s; }
.admin-bar .site-header { top: 32px; }
.site-header.scrolled { background: rgba(251, 248, 243, .88); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(38,68,63,.06); }
.site-header .bdl-container { display: flex; align-items: center; justify-content: space-between; height: 84px; position: relative; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--bdl-ink); }
.brand img { width: 50px; height: 50px; border-radius: 50%; }
.brand b { font-family: "Fraunces", serif; font-weight: 400; font-size: 1.4rem; display: block; line-height: 1.1; font-variation-settings: "SOFT" 100; }
.brand small { font-size: .8rem; color: var(--bdl-muted); }
.main-nav { display: flex; align-items: center; gap: 1.7rem; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.7rem; }
.main-nav a { text-decoration: none; color: var(--bdl-ink); font-weight: 600; font-size: .95rem; position: relative; }
.main-nav ul a::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 6px; height: 6px; border-radius: 50%; background: var(--bdl-teal); transform: translateX(-50%) scale(0); transition: transform .3s; }
.main-nav ul a:hover::after, .main-nav .current-menu-item > a::after { transform: translateX(-50%) scale(1); }
.main-nav .current-menu-item > a { color: var(--bdl-teal-deep); }
.main-nav .bdl-btn { color: #fff; }
.burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; color: var(--bdl-ink); }

/* ---------- Pied de page ---------- */
.footer-wave { display: block; width: 100%; height: 60px; position: relative; z-index: 1; }
.site-footer { background: var(--bdl-sand); padding: 30px 0 34px; font-size: .94rem; position: relative; z-index: 1; }
.site-footer .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding: 30px 0 34px; }
.site-footer h4 { font-family: "Fraunces", serif; font-weight: 500; font-size: 1.1rem; margin: 0 0 .7rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.site-footer a { color: var(--bdl-ink); text-decoration: none; }
.site-footer a:hover { color: var(--bdl-teal-deep); }
.site-footer .bottom { border-top: 1px solid rgba(38,68,63,.1); padding-top: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; color: var(--bdl-muted); font-size: .85rem; }

/* ---------- Respiration ---------- */
.bdl-breath { text-align: center; }
.bdl-breath-zone { display: grid; place-items: center; height: 340px; position: relative; }
.bdl-breath-ring { position: absolute; width: 300px; height: 300px; border-radius: 50%; border: 1.5px dashed rgba(42,127,120,.25); }
.bdl-breath-ball {
  width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #fff 0 10%, var(--bdl-teal-soft) 45%, rgba(79,192,185,.55) 100%);
  box-shadow: 0 20px 50px rgba(79,192,185,.25); font-family: "Fraunces", serif; font-style: italic; font-size: 1.2rem;
  transition: transform 4s ease-in-out;
}
.bdl-breath-ball.in { transform: scale(1.75); transition-duration: 4s; }
.bdl-breath-ball.out { transform: scale(1); transition-duration: 6s; }

/* ---------- Conseils (articles) ---------- */
.bdl-advice-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bdl-advice-card { display: block; text-decoration: none; color: var(--bdl-ink); background: #fff; border-radius: var(--bdl-round); padding: 30px; box-shadow: var(--bdl-shadow); transition: transform .5s; }
.bdl-advice-card:hover { transform: translateY(-4px) rotate(-.4deg); color: var(--bdl-ink); }
.bdl-advice-card .bdl-hand-text { font-size: 1.35rem !important; }
.bdl-advice-card h3 { margin: .2rem 0 .4rem; }
.bdl-advice-card p { color: var(--bdl-muted); font-size: .97rem; margin: 0; }
.bdl-article-wrap { padding: 64px 0 96px; }
.bdl-article { background: #fff; border-radius: var(--bdl-round); padding: 56px; box-shadow: var(--bdl-shadow); max-width: 760px; margin-inline: auto; }
.bdl-article .bdl-gentle, .bdl-article .is-style-bdl-gentle { font-family: "Caveat", cursive; font-size: 1.5rem; color: var(--bdl-teal-deep); }
.bdl-article ul { padding-left: 1.2rem; }
.bdl-article li { margin-bottom: .4rem; }
.bdl-back { display: inline-block; margin-top: 2rem; font-weight: 700; text-decoration: none; }
.bdl-page-hero { text-align: center; padding: 64px 0 30px; }

/* Tableau des remboursements (dans un widget Éditeur de texte) */
.bdl-rows { display: grid; gap: 12px; }
.bdl-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; background: #fff; border-radius: 22px; padding: 20px 26px; box-shadow: var(--bdl-shadow); }
.bdl-row b { font-family: "Fraunces", serif; font-weight: 500; font-size: 1.15rem; display: block; }
.bdl-row small { color: var(--bdl-muted); }
.bdl-row .v { font-weight: 700; color: var(--bdl-teal-deep); text-align: right; }
.bdl-row .v.no { color: #b4614a; }
.bdl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bdl-chips span { background: #fff; border-radius: 999px; padding: .4rem 1rem; font-size: .92rem; box-shadow: 0 4px 14px rgba(38,68,63,.05); }
.bdl-chips span.hl { background: var(--bdl-teal-deep); color: #fff; }
.bdl-contact-line { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.2rem; }
.bdl-contact-line .bdl-icon { width: 52px; height: 52px; flex: none; }
.bdl-contact-line b { display: block; }
.bdl-alert { background: var(--bdl-blush); border-radius: 20px; padding: 16px 20px; font-size: .94rem; }

/* Accordéon Elementor (FAQ) */
.bdl-faq .elementor-toggle-item { background: #fff; border-radius: 22px; box-shadow: var(--bdl-shadow); margin-bottom: 12px; overflow: hidden; }
.bdl-faq .elementor-tab-title { border: 0 !important; padding: 20px 26px !important; font-family: "Fraunces", serif; font-size: 1.15rem; }
.bdl-faq .elementor-tab-title a { color: var(--bdl-ink) !important; }
.bdl-faq .elementor-tab-content { border: 0 !important; padding: 0 26px 20px !important; color: var(--bdl-muted); }

/* ---------- Formulaire ---------- */
.bdl-form { background: #fff; border-radius: var(--bdl-round); padding: 40px; box-shadow: var(--bdl-shadow); display: grid; gap: 16px; }
.bdl-form .field { display: grid; gap: 6px; }
.bdl-form label { font-weight: 700; font-size: .9rem; }
.bdl-form input, .bdl-form select, .bdl-form textarea { font: inherit; font-size: 1rem; padding: .85rem 1.1rem; border: 1.5px solid #e9e2d8; border-radius: 16px; background: var(--bdl-cream); color: var(--bdl-ink); width: 100%; }
.bdl-form input:focus, .bdl-form select:focus, .bdl-form textarea:focus { outline: none; border-color: var(--bdl-teal); box-shadow: 0 0 0 4px var(--bdl-teal-soft); }
.bdl-form textarea { min-height: 130px; resize: vertical; }
.bdl-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bdl-form .consent { display: flex; gap: .6rem; font-size: .88rem; color: var(--bdl-muted); font-weight: 400; align-items: flex-start; }
.bdl-form .consent input { width: auto; margin-top: 5px; }
.bdl-form .hp { position: absolute; left: -9999px; }
.bdl-form-msg { border-radius: 16px; padding: 14px 18px; background: var(--bdl-teal-soft); }
.bdl-form-msg.error { background: var(--bdl-blush); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .burger { display: block; }
  .main-nav { position: absolute; top: 84px; left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-radius: 26px; padding: 14px 22px 22px; box-shadow: var(--bdl-shadow); display: none; }
  .main-nav.open { display: flex; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav ul a { display: block; padding: 12px 0; border-bottom: 1px solid var(--bdl-sand); }
  .main-nav ul a::after { display: none; }
  .main-nav .bdl-btn { margin-top: 14px; justify-content: center; }
  .bdl-advice-list { grid-template-columns: 1fr 1fr; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 640px) {
  body { font-size: 17px; }
  .bdl-advice-list, .site-footer .cols, .bdl-form .two { grid-template-columns: 1fr; }
  .brand small { display: none; }
  .brand img { width: 44px; height: 44px; }
  .elementor-widget.bdl-blob { max-width: 300px !important; }
  .elementor-widget.bdl-portrait { max-width: 270px !important; }
  .bdl-article { padding: 30px 22px; }
  .bdl-form { padding: 26px 20px; }
  .bdl-row { flex-direction: column; align-items: flex-start; }
  .bdl-row .v { text-align: left; }
  .bdl-breath-zone { height: 300px; }
  .bdl-breath-ring { width: 260px; height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .bdl-bubbles { display: none; }
  .bdl-blob img, .elementor-widget.bdl-blob::before, .elementor-widget.bdl-blob::after,
  .elementor-widget.bdl-portrait::before, .elementor-widget.bdl-portrait::after { animation: none; }
}