/* Fond animé Logo4k — logo intact, lumière + envol des pétales sans découpe */

:root {
    /* Teinte de logonina pour coller aux bords. */
    --site-bg-tan: #b88e74;
}

body {
    background-color: var(--site-bg-tan) !important;
}

.site-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none !important;
}

/* Les enfants ne doivent jamais capturer souris / tactile. */
.site-bg *,
.site-bg *::before,
.site-bg *::after {
    pointer-events: none !important;
}

/* Contenu au-dessus du fond — sans toucher au position: sticky de la barre. */
body > main,
body > section,
body > footer,
body > .site-footer {
    position: relative;
    z-index: 1;
}

body > .site-header.has-short-nav,
body > header.site-header {
    z-index: 40;
}

body > .book-float {
    z-index: 45;
}

body > .cookie-consent-root {
    z-index: 120;
}

.site-bg-logo {
    position: absolute;
    inset: 0;
    background-image: var(--site-bg-image);
    /* --site-bg-pos-y suit le scroll : haut→haut de l’image, bas→bas de l’image. */
    background-position: center var(--site-bg-pos-y, 18%);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    filter: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    will-change: background-position;
}

/* Lumière : s’illumine puis baisse, en boucle */
/* Halo léger : présence sans flouter le logo. */
.site-bg-glow {
    position: absolute;
    inset: -8%;
    background:
        radial-gradient(ellipse 48% 42% at 50% 38%, rgb(255 248 240 / 28%) 0%, transparent 70%),
        radial-gradient(ellipse 36% 30% at 68% 22%, rgb(204 139 82 / 14%) 0%, transparent 72%);
    opacity: 0.45;
    mix-blend-mode: soft-light;
    animation: site-bg-shine 9s ease-in-out infinite;
    pointer-events: none;
}

/*
 * Envol des pétales sans toucher au dessin du logo :
 * voiles lumineux qui montent dans la zone de la canopée.
 */
.site-bg-petals {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(90vmax, 1100px);
    height: min(90vmax, 1100px);
    transform: translate(-50%, -54%);
    opacity: 0.55;
    pointer-events: none;
}

.site-bg-petal-drift {
    position: absolute;
    left: 18%;
    right: 18%;
    top: 8%;
    height: 42%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 40% 55% at 30% 60%, rgb(255 255 255 / 22%) 0%, transparent 70%),
        radial-gradient(ellipse 35% 50% at 55% 40%, rgb(255 255 255 / 18%) 0%, transparent 68%),
        radial-gradient(ellipse 38% 52% at 72% 55%, rgb(255 255 255 / 20%) 0%, transparent 70%),
        radial-gradient(ellipse 28% 40% at 45% 25%, rgb(255 255 255 / 16%) 0%, transparent 65%);
    mix-blend-mode: soft-light;
    opacity: 0;
    filter: blur(1px);
    animation: site-bg-petal-drift 6.5s ease-in-out infinite;
}

.site-bg-petal-drift:nth-child(2) {
    animation-delay: 2.1s;
    animation-duration: 7.2s;
}

.site-bg-petal-drift:nth-child(3) {
    animation-delay: 4s;
    animation-duration: 5.8s;
}

.site-bg-veil {
    position: absolute;
    inset: 0;
    background: none;
}

/* Accueil : sections sans voile blanc — le fond botanical reste visible. */
.hero-copy,
.services-section,
.next-services-section,
.appointment-section,
.home-faq {
    background: transparent !important;
    background-image: none !important;
}

.next-services-photo,
.services-photo {
    background: transparent !important;
    box-shadow: none !important;
}

/* Pages intérieures : le voile est géré par site-atmosphere (dégradés chauds). */
.cabinet-page,
.about-page,
.contact-page,
.reservation-page,
.privacy-page,
.legal-page,
.services-page,
body.questions-page {
    background-color: transparent !important;
}

/* Blocs texte : fonds opaques pour rester lisibles sur le logo. */
.services-content,
.next-services-content {
    box-sizing: border-box;
    padding: clamp(22px, 3vw, 36px) clamp(20px, 3vw, 32px);
    border: 1px solid rgb(168 130 98 / 28%);
    border-radius: 18px;
    background: rgb(255 250 245 / 96%) !important;
    box-shadow: 0 12px 32px rgb(80 54 44 / 14%);
}

.home-faq-header {
    padding: clamp(18px, 2.5vw, 28px) clamp(16px, 2.5vw, 24px);
    border: 1px solid rgb(168 130 98 / 24%);
    border-radius: 16px;
    background: rgb(255 250 245 / 94%);
    box-shadow: 0 10px 28px rgb(80 54 44 / 12%);
}

.home-faq-item {
    background: rgb(255 252 247 / 96%) !important;
}

.main-title,
.services-title,
.next-services-content h2,
.home-faq-header h2 {
    color: #2a221c;
    text-shadow: 0 1px 0 rgb(255 255 255 / 45%);
}

.subtitle,
.services-subtitle,
.services-intro,
.services-copy,
.next-services-content p,
.home-faq-header p {
    color: #3d342e;
}

@keyframes site-bg-shine {
    0%,
    100% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.58;
    }
}

@keyframes site-bg-petal-drift {
    0% {
        opacity: 0;
        transform: translateY(8%) scale(0.96);
    }
    25% {
        opacity: 0.55;
    }
    55% {
        opacity: 0.35;
        transform: translateY(-10%) scale(1.04);
    }
    100% {
        opacity: 0;
        transform: translateY(-18%) scale(1.06);
    }
}

@media (max-width: 700px) {
    .site-bg-logo {
        background-size: cover;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-bg-glow,
    .site-bg-petal-drift {
        animation: none;
    }

    .site-bg-glow {
        opacity: 0.32;
    }

    .site-bg-petal-drift {
        opacity: 0.2;
        transform: none;
    }
}