/* Explain: Global styles and Art Nouveau-inspired decorative elements. - */
.eyebrow {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.eyebrow::before, .eyebrow::after {
    content: "❦";
    color: var(--color-gold);
    font-size: 1.2em;
    font-weight: normal;
}

/* ----------------------------------
   Style Art Nouveau (Global)
------------------------------------- */

/* Boutons & Formulaires asymétriques */
.btn {
    border-radius: 24px 6px 24px 6px !important;
    border-width: 1px !important;
    border-color: color-mix(in srgb, var(--color-gold) 80%, transparent) !important;
}

.btn-circle {
    border-radius: 50% !important;
}

.input, .textarea, .select {
    border-radius: 16px 6px 16px 6px !important;
    border-width: 1px !important;
    border-color: color-mix(in srgb, var(--color-gold) 50%, transparent) !important;
}

/* Cartes et Cadres Art Nouveau (coins asymétriques + double bordure) */
.shadow-\[var\(--shadow-card\)\], 
.shadow-\[var\(--shadow-soft\)\] {
    border-radius: 40px 12px 40px 12px !important;
    border: 1px solid color-mix(in srgb, var(--color-gold) 70%, transparent) !important;
    position: relative;
}

.shadow-\[var\(--shadow-card\)\]::after, 
.shadow-\[var\(--shadow-soft\)\]::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid color-mix(in srgb, var(--color-gold) 30%, transparent);
    border-radius: 34px 8px 34px 8px;
    pointer-events: none;
    z-index: 5;
}

/* Séparateurs de sections organiques */
main > section {
    position: relative;
    border-top: 1px solid color-mix(in srgb, var(--color-gold) 20%, transparent);
}

main > section::before {
    content: "❦";
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    color: var(--color-gold);
    background-color: inherit;
    padding: 0 1rem;
    z-index: 10;
    line-height: 1;
}

main > section:first-child::before,
main > section.hero-cinematic::before {
    display: none;
}

main > section:first-child,
main > section.hero-cinematic {
    border-top: none;
}

.site-header {
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(18px);
}

.star-pattern {
    position: relative;
    isolation: isolate;
}

.star-pattern::before {
    content: "✧";
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    color: color-mix(in srgb, var(--color-gold) 15%, transparent);
    font-size: 2rem;
    letter-spacing: 2.4rem;
    line-height: 3.8rem;
    opacity: 0.5;
    transform: rotate(-10deg) scale(1.08);
    pointer-events: none;
}

.hero-overlay {
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-parma) 82%, transparent), color-mix(in srgb, var(--color-parma) 48%, transparent), color-mix(in srgb, var(--color-blue) 24%, transparent));
}

.contact-card {
    position: relative;
    z-index: 10;
    border: 1px solid color-mix(in srgb, var(--color-gold) 64%, transparent);
    background: color-mix(in srgb, var(--color-pink) 15%, var(--color-surface));
    box-shadow: 0 2rem 6rem color-mix(in srgb, var(--color-parma) 24%, transparent);
    backdrop-filter: blur(24px);
}

.contact-card::before,
.contact-modal-card::before {
    content: "";
    position: absolute;
    inset: 0.9rem;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--color-surface) 60%, transparent);
    border-radius: inherit;
}

.form-status.success {
    display: block;
    border: 1px solid color-mix(in srgb, var(--color-blue) 46%, transparent);
    background: color-mix(in srgb, var(--color-blue) 24%, var(--color-surface));
    color: var(--color-parma);
}

.form-status.error {
    display: block;
    border: 1px solid color-mix(in srgb, var(--color-pink) 80%, transparent);
    background: color-mix(in srgb, var(--color-pink) 36%, var(--color-surface));
    color: var(--color-parma);
}

.pill-card,
.service-card,
.choice-card,
.proof-card {
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    box-shadow: var(--shadow-card);
    transition: transform 300ms ease, border-color 300ms ease, background 300ms ease;
}

.pill-card:hover,
.service-card:hover,
.choice-card:hover,
.proof-card:hover {
    transform: translateY(-0.35rem);
    border-color: color-mix(in srgb, var(--color-gold) 72%, transparent);
    background: var(--color-surface);
}

.soft-dot {
    display: inline-flex;
    height: 3.25rem;
    width: 3.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-gold) 20%, var(--color-surface));
    color: var(--color-parma);
}

.blue-dot {
    background: color-mix(in srgb, var(--color-blue) 20%, var(--color-surface));
}

.mobile-book-button {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 2147483000;
    display: none;
    box-shadow: 0 1.2rem 3rem color-mix(in srgb, var(--color-parma) 32%, transparent);
}

.mobile-book-button.is-visible {
    display: inline-flex;
}

.floating-contact-button {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 2147483000;
    display: none;
    box-shadow: 0 1.2rem 3rem color-mix(in srgb, var(--color-parma) 32%, transparent);
}

.floating-contact-button.is-visible {
    display: inline-flex;
}

body.contact-modal-open {
    overflow: hidden;
}

.contact-modal {
    z-index: 2147483001;
}

.contact-modal-card {
    background: color-mix(in srgb, var(--color-bg) 95%, transparent);
    box-shadow: 0 2rem 6rem color-mix(in srgb, var(--color-parma) 42%, transparent);
    backdrop-filter: blur(24px);
}

#about,
#classes,
#performances,
#agenda {
    scroll-margin-top: 6rem;
}

@media (min-width: 768px) {
    .mobile-book-button,
    .mobile-book-button.is-visible {
        display: none;
    }
}

@media (max-width: 767px) {
    .floating-contact-button,
    .floating-contact-button.is-visible {
        display: none;
    }
}