/* =========================================
   IMPORTATION DES POLICES (Google Fonts)
   Cormorant Garamond (Titres) | Inter (Textes) | Cinzel (Symbolique)
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Cormorant+Garamond:wght@300;400;600&family=Inter:wght@300;400;500;600&display=swap');

/* =========================================
   CHARTE GRAPHIQUE OFFICIELLE - METAMORPHYSIS
   ========================================= */
:root {
    /* 1. Palette Haut de Gamme Unifiée */
    --meta-black: #0A0A09;         
    --meta-plum: #2A1A1E;          /* Pourpre Sombre officiel */
    --meta-plum-dark: #211417;     /* Teinte d'ombrage pourpre */
    --meta-olive: #4A4F41;         /* Vert Olive */
    --meta-sage: #8A8F7C;          /* Vert Sauge / Kaki (Ajusté pour conformité WCAG AA >= 4.5:1) */
    --meta-gold: #B89A63;          /* Or Antique */
    --meta-gold-hover: #A88B56;    /* Or au survol (Ajusté WCAG AA) */
    --meta-gold-rgb: 184, 154, 99;
    --meta-ivory: #FFFFF0;         /* Ivoire Lumineux */
    --meta-ivory-dim: #D8D0BE;     /* Ivoire Délicat */
    --meta-olive-hover: #5d6352;   

    /* 2. DÉGRADÉS */
    --grad-main: radial-gradient(
        ellipse at 50% 40%, 
        #2A1A1E 0%,     /* Le Pourpre riche domine tout le centre et le fond */
        #211417 75%,    /* Ombrage pourpre très doux */
        #0A0A09 100%    /* Noir très discret sur les bordures extrêmes */
    );
    --grad-subtle: linear-gradient(135deg, rgba(74, 79, 65, 0.90) 0%, rgba(45, 48, 38, 0.95) 100%); 
    
    /* 3. Typographie */
    --font-title: 'Cormorant Garamond', serif; 
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Cinzel', serif;

    /* 4. Typographie Fluide Responsive (clamp) */
    --fs-h1: clamp(1.9rem, 3.5vw + 0.8rem, 2.9rem);
    --fs-h2: clamp(1.45rem, 2.5vw + 0.6rem, 2.3rem);
    --fs-h3: clamp(1.15rem, 1.8vw + 0.4rem, 1.6rem);
    --fs-body: clamp(0.92rem, 0.4vw + 0.85rem, 1.05rem);

    /* 5. Formes & Tokens UI */
    --radius-card: 0px;
    --radius-btn: 0px;
    --radius-input: 0px;
    --scroll-color: var(--meta-gold);
}

/* =========================================
   FORCE 90° SHARP ANGLES GLOBALLY (EXCEPT CIRCLE ICONS)
   ========================================= */
.btn, .card, .card-premium, .input-premium, .form-control, .form-select,
.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-pill,
.badge, .alert, .slider-btn, .dropdown-menu, .modal-content, .nav-pills .nav-link {
    border-radius: 0 !important;
}

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

/* =========================================
   BASE DE LA PAGE (Toile de fond)
   ========================================= */
body {
    background-color: var(--meta-black);
    background-image: var(--grad-main);
    background-attachment: fixed; 
    background-size: cover;        
    background-repeat: no-repeat;  
    
    color: var(--meta-ivory-dim); 
    font-family: var(--font-body);
    font-weight: 300;
    font-size: var(--fs-body);
    line-height: 1.7; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative; 
}

/* =========================================
   ADOUCISSEMENT DES BORDURES LATÉRALES
   ========================================= */
body::before, body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 250px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

body::before {
    left: 0;
    background: linear-gradient(90deg, var(--meta-black) 0%, transparent 100%);
}

body::after {
    right: 0;
    background: linear-gradient(-90deg, var(--meta-black) 0%, transparent 100%);
}

/* =========================================
   STRUCTURE DE CONTENU
   ========================================= */
main {
    flex: 1;
    position: relative;
    z-index: 1;
}

/* =========================================
   NAVBAR ÉPURÉE (Vert Olive / Kaki)
   ========================================= */
.navbar {
    background: linear-gradient(180deg, rgba(74, 79, 65, 0.95) 0%, rgba(74, 79, 65, 0.85) 100%);
    border-bottom: 1px solid rgba(184, 154, 99, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding-top: 8px;
    padding-bottom: 8px;
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

.navbar-brand img {
    height: 42px;
    width: 42px;
    object-fit: contain;
    filter: brightness(1.2) drop-shadow(0px 0px 3px rgba(184, 154, 99, 0.4));
    transition: filter 0.3s ease;
}
.navbar-brand:hover img {
    filter: brightness(1.4) drop-shadow(0px 0px 8px rgba(184, 154, 99, 0.8));
}

.nav-link-premium {
    font-size: 0.82rem; 
    text-transform: uppercase;
    letter-spacing: 0.12em; 
    font-weight: 400;
    color: var(--meta-ivory-dim);
    transition: color 0.25s ease;
}
.nav-link-premium:hover,
.nav-link-premium:focus-visible {
    color: var(--meta-gold) !important;
}

/* =========================================
   TYPOGRAPHIE
   ========================================= */
h1, h2, h3, h4, h5, h6, .brand-logo, .typo-titre {
    font-family: var(--font-title);
    font-weight: 300;
    letter-spacing: 0.06em; 
    color: var(--meta-gold); 
}

h1, .typo-titre-h1 { font-size: var(--fs-h1); line-height: 1.25; }
h2 { font-size: var(--fs-h2); line-height: 1.3; }
h3 { font-size: var(--fs-h3); line-height: 1.35; }

.typo-symbolic {
    font-family: var(--font-accent);
    font-weight: 400;
    letter-spacing: 2px;
}

.typo-citation {
    font-family: var(--font-title);
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.08em;
    color: var(--meta-ivory);
}

/* =========================================
   COULEURS & FONDS UTILITAIRES
   ========================================= */
.text-gold { color: var(--meta-gold) !important; }
.text-ivory { color: var(--meta-ivory) !important; }
.text-sage { color: var(--meta-sage) !important; } 
.text-olive { color: var(--meta-olive) !important; }

.border-gold { border-color: var(--meta-gold) !important; }
.border-sage { border-color: var(--meta-sage) !important; border-width: 1px; border-style: solid; }

.bg-grad-main { background: var(--grad-main); }
.bg-grad-subtle { background: var(--grad-subtle); }

/* Classes de fond du Page Builder */
.bg-olive-premium {
    background-color: #4A4F41 !important;
    background-image: none !important;
    color: var(--meta-ivory-dim);
}

.bg-plum-premium {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--meta-ivory-dim);
}

.bg-meta-plum  { background-color: var(--meta-plum) !important; }
.bg-meta-olive { background-color: var(--meta-olive) !important; }
.bg-meta-black { background-color: var(--meta-black) !important; }
.bg-meta-sage  { background-color: var(--meta-sage) !important; }
.bg-meta-gold  { background-color: var(--meta-gold) !important; }
.bg-meta-ivory { background-color: var(--meta-ivory-dim) !important; }

.text-meta-plum  { color: var(--meta-plum) !important; }
.text-meta-olive { color: var(--meta-olive) !important; }
.text-meta-black { color: var(--meta-black) !important; }
.text-meta-sage  { color: var(--meta-sage) !important; }
.text-meta-gold  { color: var(--meta-gold) !important; }
.text-meta-ivory { color: var(--meta-ivory-dim) !important; }

/* =========================================
   COMPOSANTS UI (Cartes, Boutons, Inputs)
   ========================================= */
.card-premium {
    background: var(--grad-subtle);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(184, 154, 99, 0.15);
    border-radius: var(--radius-card);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.btn-gold {
    background-color: var(--meta-gold);
    color: var(--meta-black);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    padding: 10px 22px;
    border-radius: var(--radius-btn);
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, box-shadow 0.25s ease;
}
.btn-gold:hover {
    background-color: var(--meta-gold-hover);
    color: var(--meta-black);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(184, 154, 99, 0.3);
}

.btn-gold-premium {
    background: linear-gradient(135deg, var(--meta-gold) 0%, var(--meta-gold-hover) 100%);
    color: var(--meta-black);
    border: none;
}
.btn-gold-premium:hover {
    background: var(--meta-gold);
    color: var(--meta-black);
}

.btn-outline-gold {
    color: var(--meta-gold);
    border: 1px solid var(--meta-gold);
    background-color: transparent;
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.btn-outline-gold:hover {
    background-color: var(--meta-gold);
    color: var(--meta-black);
    transform: translateY(-2px);
}

.btn-premium {
    background-color: transparent;
    color: var(--meta-gold);
    border: 1px solid var(--meta-gold);
    font-family: var(--font-body);
    padding: 8px 18px;
    border-radius: var(--radius-btn);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.btn-premium:hover {
    background-color: var(--meta-gold);
    color: var(--meta-black);
}

/* Accessibilité Clavier (Focus Visible) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--meta-gold) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(184, 154, 99, 0.25) !important;
}

.input-premium {
    background-color: var(--meta-black) !important;
    color: var(--meta-ivory) !important;
    border: 1px solid rgba(184, 154, 99, 0.4) !important;
    border-radius: var(--radius-input);
    color-scheme: dark;
    font-family: var(--font-body);
}
.input-premium:focus {
    box-shadow: 0 0 0 0.25rem rgba(184, 154, 99, 0.15) !important;
    border-color: var(--meta-gold) !important;
}

.content-premium {
    overflow-wrap: break-word;
    word-break: break-word;
}
.content-premium p { margin-bottom: 1.5rem; }

/* =========================================
   MESSAGES FLASH
   ========================================= */
.alert-premium {
    background: var(--grad-subtle);
    border: 1px solid var(--meta-gold);
    color: var(--meta-ivory);
    border-radius: var(--radius-input);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}
.alert-premium .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); 
}

/* =========================================
   CARROUSEL DE PRESTATIONS & SLIDER
   ========================================= */
.transition-hover { 
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; 
}
.transition-hover:hover { 
    transform: translateY(-6px); 
    border-color: var(--meta-gold) !important;
    box-shadow: 0 15px 30px rgba(184, 154, 99, 0.3); 
    position: relative;
    z-index: 5;
}

.prestation-slider-container { 
    width: 100%; 
    position: relative; 
    padding: 1.25rem clamp(15px, 4vw, 55px); 
}

.prestation-track { 
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    gap: 15px; 
    padding-top: 15px; 
    padding-bottom: 1.25rem; 
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
    scroll-behavior: smooth; 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}
.prestation-track::-webkit-scrollbar { display: none; }

/* Paliers Responsive du Carrousel */
.prestation-track .prestation-card-item {
    width: calc(100% - 10px);
    flex: 0 0 calc(100% - 10px);
    scroll-snap-align: center;
}

@media (min-width: 576px) {
    .prestation-track .prestation-card-item {
        width: calc(50% - 10px);
        flex: 0 0 calc(50% - 10px);
    }
}

@media (min-width: 768px) {
    .prestation-track .prestation-card-item {
        width: calc(33.333% - 12px);
        flex: 0 0 calc(33.333% - 12px);
    }
}

@media (min-width: 992px) {
    .prestation-track .prestation-card-item {
        width: calc(25% - 12px);
        flex: 0 0 calc(25% - 12px);
    }
}

@media (min-width: 1200px) {
    .prestation-track .prestation-card-item {
        width: calc(20% - 12px);
        flex: 0 0 calc(20% - 12px);
    }
}

.prestation-track .card {
    background-color: rgba(42, 26, 30, 0.45); 
    border: 1px solid rgba(184, 154, 99, 0.5);
    border-radius: 0 !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.prestation-track .card:hover {
    border-color: var(--meta-gold) !important;
    box-shadow: 0 15px 30px rgba(184, 154, 99, 0.35) !important;
    position: relative;
    z-index: 5;
}
.prestation-track .card .mt-auto a {
    background-color: var(--meta-plum); 
    border: 1px solid rgba(184, 154, 99, 0.3);
    border-radius: 0 !important;
}
.prestation-track .card .mt-auto a:hover {
    background-color: var(--meta-gold);
    color: var(--meta-black);
}

.slider-btn {
    background: var(--meta-black);
    border: 1px solid var(--meta-gold);
    color: var(--meta-gold);
    border-radius: 0 !important;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.25s ease, transform 0.25s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.slider-btn:hover {
    background-color: rgba(184, 154, 99, 0.2);
    transform: translateY(-50%) scale(1.05);
}
.slider-btn-left { left: 5px; }
.slider-btn-right { right: 5px; }

/* =========================================
   SCROLLBAR DES CITATIONS
   ========================================= */
.citation-scroll-container::-webkit-scrollbar {
    width: 4px; 
}
.citation-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}
.citation-scroll-container::-webkit-scrollbar-thumb {
    background-color: var(--scroll-color);
    opacity: 0.5;
    border-radius: 10px;
}
.citation-scroll-container:hover::-webkit-scrollbar-thumb {
    background-color: var(--scroll-color);
    opacity: 1;
}
.citation-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: var(--meta-gold) transparent;
}

/* =========================================
   ANIMATIONS & ACCESSIBILITÉ VESTIBULAIRE
   ========================================= */
#texte-decor, #body, #Lower_body, #Upper_left_wing, #Upper_right_wing, #Lower_left_wing, #Lower_right_wing, #outline { fill: var(--meta-gold); }
#texte-decor path { fill: var(--meta-gold); stroke: var(--meta-gold); }

#whole-dragonfly { transform-box: fill-box; transform-origin: center center; animation: levitation 4s ease-in-out infinite; }
#body, #Lower_body { transform-box: fill-box; }
#Upper_left_wing, #Upper_left { transform-box: fill-box; transform-origin: 100% 80%; animation: flapLeft 0.8s ease-in-out infinite alternate; }
#Lower_left_wing, #Bottom_left { transform-box: fill-box; transform-origin: 100% 20%; animation: flapLeft 0.8s ease-in-out infinite alternate; }
#Upper_right_wing, #Upper_right { transform-box: fill-box; transform-origin: 0% 80%; animation: flapRight 0.8s ease-in-out infinite alternate; }
#Lower_right_wing, #Bottom_right { transform-box: fill-box; transform-origin: 0% 20%; animation: flapRight 0.8s ease-in-out infinite alternate; }
#body { transform-box: fill-box; transform-origin: center center; animation: respiration 4s ease-in-out infinite; }

@keyframes levitation {
    0%, 100% { 
        transform: translateY(35px); 
        filter: drop-shadow(0px 8px 18px rgba(184, 154, 99, 0.25)); 
    }
    50% { 
        transform: translateY(95px); 
        filter: drop-shadow(0px 24px 32px rgba(184, 154, 99, 0.45)); 
    }
}
@keyframes flapLeft { 0% { transform: rotateY(0deg) rotateZ(0deg); } 100% { transform: rotateY(55deg) rotateZ(4deg); } }
@keyframes flapRight { 0% { transform: rotateY(0deg) rotateZ(0deg); } 100% { transform: rotateY(-55deg) rotateZ(-4deg); } }
@keyframes respiration { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* Débrayage des animations pour personnes sensibles au mouvement */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================
   CARTES LUXE & GRILLE JURIDIQUE (MENTIONS LÉGALES)
   ========================================= */
.olive-card {
    background: linear-gradient(180deg, #323d2f 0%, #2b3528 100%) !important;
    border: 1px solid rgba(184, 154, 99, 0.3) !important;
    border-radius: 0 !important;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.5), 0 0 20px 0 rgba(184, 154, 99, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.olive-card:hover {
    border-color: rgba(184, 154, 99, 0.6) !important;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.6), 0 0 25px 0 rgba(184, 154, 99, 0.15);
}

.gold-gradient-text {
    background: linear-gradient(135deg, #fce6a2 0%, #b89a63 50%, #9c804f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gold-border {
    border: 1px solid rgba(184, 154, 99, 0.3) !important;
}

.gold-border-subtle {
    border: 1px solid rgba(184, 154, 99, 0.18) !important;
}

/* =========================================
   RESPONSIVE DESIGN GLOBAL DU PAGE BUILDER
   ========================================= */
.builder-title {
    font-size: clamp(1.6rem, 4.5vw, 2.8rem) !important;
    letter-spacing: clamp(1px, 0.3vw, 3px) !important;
    line-height: 1.2 !important;
    word-break: break-word;
}

.builder-subtitle {
    font-size: clamp(0.8rem, 2vw, 0.95rem) !important;
    letter-spacing: clamp(1.2px, 0.25vw, 2.5px) !important;
    line-height: 1.4 !important;
}

.builder-content {
    font-size: clamp(0.95rem, 1.8vw, 1.05rem) !important;
    line-height: 1.7 !important;
}

/* Section Wrapper Responsive */
.builder-section {
    padding-top: var(--sec-p-top, 3rem);
    padding-bottom: var(--sec-p-bottom, 3rem);
    padding-left: var(--sec-p-left, 3rem);
    padding-right: var(--sec-p-right, 3rem);
    margin-top: var(--sec-m-top, 0px);
    margin-bottom: var(--sec-m-bottom, 0px);
    min-height: var(--sec-min-h, auto);
    box-sizing: border-box;
    width: 100%;
}

@media (max-width: 991.98px) {
    .builder-section {
        padding-top: clamp(1.5rem, 4vw, var(--sec-p-top, 2.5rem)) !important;
        padding-bottom: clamp(1.5rem, 4vw, var(--sec-p-bottom, 2.5rem)) !important;
        padding-left: clamp(1.25rem, 3.5vw, var(--sec-p-left, 2rem)) !important;
        padding-right: clamp(1.25rem, 3.5vw, var(--sec-p-right, 2rem)) !important;
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important;
        min-height: auto !important;
    }
}

@media (max-width: 575.98px) {
    .builder-section {
        padding-top: clamp(1.25rem, 3.5vw, 2rem) !important;
        padding-bottom: clamp(1.25rem, 3.5vw, 2rem) !important;
        padding-left: clamp(0.85rem, 3vw, 1.25rem) !important;
        padding-right: clamp(0.85rem, 3vw, 1.25rem) !important;
    }
}

/* Encart de Citation Flottante Responsive & Déploiement Cliquable */
.quote-aside-box {
    position: relative;
    border-radius: 0 !important;
    border: 1px solid rgba(184, 154, 99, 0.25);
    z-index: 15;
    margin-top: var(--quote-pos-y, -120px);
    left: var(--quote-pos-x, 0%);
    width: var(--quote-largeur, 85%);
    background-color: var(--quote-bg, var(--meta-olive));
    box-sizing: border-box;
}

.quote-aside-mark {
    font-size: 3rem;
    margin-bottom: 10px;
}

.quote-aside-header {
    user-select: none;
}

.quote-toggle-icon {
    transition: transform 0.35s ease;
}

/* Sur écran Desktop (>= 992px) : toujours déployé */
@media (min-width: 992px) {
    .quote-aside-body {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Sur Mobile & Tablette (< 992px) : replié par défaut pour dégager la photo, cliquable pour déploiement fluide */
@media (max-width: 991.98px) {
    .quote-aside-box {
        margin-top: 1rem !important;
        margin-bottom: 1.5rem !important;
        left: 0 !important;
        width: 100% !important;
        padding: 0.85rem 1.25rem !important;
        cursor: pointer;
        transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .quote-aside-box:hover,
    .quote-aside-box:focus-within {
        border-color: rgba(184, 154, 99, 0.6) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
    }

    .quote-aside-mark {
        font-size: 2rem !important;
        margin-bottom: 0 !important;
    }

    .quote-aside-body {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, margin-top 0.3s ease;
    }

    .quote-aside-box.is-expanded .quote-aside-body {
        max-height: 1000px;
        opacity: 1;
        margin-top: 0.75rem;
        overflow-y: visible;
    }

    .quote-aside-box.is-expanded .quote-toggle-icon {
        transform: rotate(180deg);
    }
}