.elementor-5935 .elementor-element.elementor-element-446fa032{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}:root{--page-title-display:none;}/* Start custom CSS for text-editor, class: .elementor-element-c758fca */#grimoire-halloween {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}

#grimoire-halloween .resonance-wrapper {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header Section */
#grimoire-halloween .resonance-header { text-align: center; margin-bottom: 70px; }
#grimoire-halloween .kicker-pill { display: inline-block; padding: 8px 24px; background: var(--lavender); color: var(--purple); border-radius: 100px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 24px; border: 1px solid rgba(110, 27, 137, 0.1); }
#grimoire-halloween .display-title { font-family: 'Playfair Display', serif; font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 900; line-height: 1.15; margin: 0; color: var(--dark); }
#grimoire-halloween .wine-gradient { background: linear-gradient(135deg, var(--wine), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Conteneur Principal (Dashboard) */
#grimoire-halloween .diagnostic-dashboard { position: relative; background: var(--white); border-radius: 40px; padding: clamp(30px, 6vw, 50px); box-shadow: 0 50px 100px rgba(110, 27, 137, 0.08); border: 1px solid var(--border-lux); overflow: hidden; }
#grimoire-halloween .dashboard-bg-glow { position: absolute; top: -50%; left: -20%; width: 100%; height: 200%; background: radial-gradient(circle, rgba(110, 27, 137, 0.05) 0%, transparent 60%); z-index: 0; pointer-events: none; }
#grimoire-halloween .dashboard-content { position: relative; z-index: 10; }

/* Grille */
#grimoire-halloween .detox-grid { display: grid; grid-template-columns: 350px 1fr; gap: 50px; align-items: start; }

/* Bloc Gauche (Image Figure) */
#grimoire-halloween .sensory-path { align-self: start; }
#grimoire-halloween figure { margin: 0 0 24px; position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
#grimoire-halloween figcaption { display: none; }

/* Image Formatting */
#grimoire-halloween .card-image-wrap { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg,#ffffff,#f9f5ff); }
#grimoire-halloween img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bloc Droite (Texte & Sommaire) */
#grimoire-halloween .content-flow { display: flex; flex-direction: column; gap: 30px; }

/* Logic Path Boxes */
#grimoire-halloween .logic-path { background: var(--white); border-radius: 24px; padding: 30px; box-shadow: 0 10px 30px rgba(30, 16, 54, 0.03); border: 1px solid var(--border-lux); }
#grimoire-halloween .path-header { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; }

/* Sphères et Icônes */
#grimoire-halloween .icon-sphere { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 800; }
#grimoire-halloween .dark-sphere { background: #f0f0f5; color: var(--dark); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
#grimoire-halloween .wine-sphere { background: #fff1f4; color: var(--wine); box-shadow: 0 10px 20px rgba(138,21,56,0.1); }
#grimoire-halloween .amethyste-sphere { background: #f2ecf9; color: var(--purple); box-shadow: 0 10px 20px rgba(110,27,137,0.1); }

#grimoire-halloween .card-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 800; margin: 0 0 5px 0; color: var(--dark); }
#grimoire-halloween .path-subtitle { font-size: 0.9rem; color: var(--purple); font-style: italic; font-weight: 600; display: block; }

/* Paragraphe Intro Style */
#grimoire-halloween .manifesto-text { font-size: 18px; color: var(--dark); line-height: 1.6; margin: 0; }
#grimoire-halloween strong { color: var(--wine); font-weight: 700; }
#grimoire-halloween em { font-style: italic; }

/* Sommaire Planter Style (Dotted Lines) */
#grimoire-halloween .intention-tracker { display: flex; flex-direction: column; gap: 12px; }
#grimoire-halloween .tracker-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; background: #fdfcfd; border: 1px solid #f2f2f5; padding: 12px 20px; border-radius: 12px; text-decoration: none; transition: transform 0.3s ease; }
#grimoire-halloween .tracker-row:hover { transform: translateX(5px); background: var(--white); box-shadow: 0 5px 15px rgba(110, 27, 137, 0.05); }
#grimoire-halloween .tracker-need { font-weight: 800; color: var(--dark); font-size: 0.95rem; white-space: nowrap; width: 140px; }
#grimoire-halloween .tracker-line { flex-grow: 1; height: 1px; background: repeating-linear-gradient(to right, #e0e0e0 0, #e0e0e0 4px, transparent 4px, transparent 8px); opacity: 0.5; }
#grimoire-halloween .tracker-stone { font-size: 0.95rem; color: #555; text-align: right; }

/* Aside Wellbeing Box */
#grimoire-halloween .sensory-card-wellbeing { background: linear-gradient(135deg, #f2ecf9, var(--white)); border: 1px solid var(--border-lux); border-radius: 20px; padding: 20px; box-shadow: 0 6px 18px rgba(138,21,56,0.12); }
#grimoire-halloween .aside-insight { width: 100%; background: rgba(110, 27, 137, 0.03); border: 1px dashed var(--purple); padding: 15px; border-radius: 16px; display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; }
#grimoire-halloween .blinking-dot { width: 8px; height: 8px; border-radius: 50%; animation: blink 1.5s infinite; background: var(--purple); flex-shrink: 0; margin-top: 5px; }
#grimoire-halloween .result { color: var(--purple); font-size: 0.95rem; text-align: left;}
#grimoire-halloween .wellbeing-text { margin: 0; font-size: 14px; color: var(--dark); line-height: 1.5; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* --- POLISSAGE DES DÉTAILS --- */
#grimoire-halloween .blinking-dot {
    box-shadow: 0 0 8px var(--purple); /* Effet néon discret */
}

#grimoire-halloween .tracker-row {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* On force le rendu net des images sur mobile */
#grimoire-halloween img {
    image-rendering: -webkit-optimize-contrast;
}

/* Responsive */
@media (max-width: 900px) {
    #grimoire-halloween .detox-grid { grid-template-columns: 1fr; }
    #grimoire-halloween .tracker-line { display: none; }
    #grimoire-halloween .tracker-row { flex-direction: column; align-items: flex-start; gap: 5px; }
    #grimoire-halloween .tracker-stone { text-align: left; }
}

/* --- AJUSTEMENTS RESPONSIVE COMPLÉMENTAIRES --- */
@media (max-width: 768px) {
    #grimoire-halloween {
        padding: 40px 0; /* On réduit le souffle vertical */
    }

    #grimoire-halloween .diagnostic-dashboard {
        padding: 25px 15px; /* On maximise l'espace pour le contenu */
        border-radius: 24px; /* Un peu moins "bulbeux" sur mobile */
    }

    #grimoire-halloween .display-title {
        font-size: 1.8rem; /* On évite que le titre ne prenne 4 lignes */
        margin-bottom: 10px;
    }

    #grimoire-halloween .logic-path {
        padding: 20px; /* Moins de vide interne */
    }

    #grimoire-halloween .icon-sphere {
        width: 40px; /* Légère réduction pour l'équilibre */
        height: 40px;
        font-size: 1rem;
    }

    #grimoire-halloween .card-title {
        font-size: 1.25rem;
    }

    /* Le Tracker devient une liste de "pills" */
    #grimoire-halloween .tracker-row {
        text-align: center;
        padding: 15px;
        gap: 8px;
    }

    #grimoire-halloween .tracker-need {
        width: 100%; /* Le besoin prend toute la largeur */
        color: var(--purple);
    }
    
    #grimoire-halloween .tracker-stone {
        width: 100%;
        font-weight: 600;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-0700aee *//* --- Base Éditoriale --- */
#tendances {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}

#tendances.editorial-section {
    position: relative;
    padding: clamp(100px, 12vw, 160px) 0;
    background-color: var(--white);
    overflow: hidden;
}

/* Typographie Géante en Filigrane (Texte "13B") */
#tendances .bg-watermark {
    position: absolute;
    top: -5%;
    right: -2%;
    font-family: 'Playfair Display', serif;
    font-size: clamp(15rem, 30vw, 40rem);
    font-weight: 900;
    color: var(--lavender);
    opacity: 0.4;
    line-height: 1;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

#tendances .tendances-grid {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Grille asymétrique marquée */
    gap: clamp(50px, 8vw, 100px);
    align-items: center;
}

/* --- Colonne Gauche : Typographie & Narratif --- */
#tendances .kicker-pill {
    display: inline-block;
    padding: 8px 20px;
    background: var(--lavender);
    color: var(--purple);
    border: 1px solid var(--border-lux);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 30px;
}

#tendances .editorial-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1.05;
    color: var(--dark);
    font-weight: 900;
    margin: 0 0 40px 0;
    letter-spacing: -0.02em;
}

#tendances .title-wine {
    color: var(--wine);
    font-style: italic;
    font-weight: 400;
}

/* La Lettrine Magazine (Le "H" géant) */
#tendances .drop-cap-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--dark);
    margin-bottom: 24px;
}

#tendances .drop-cap {
    float: left;
    font-family: 'Playfair Display', serif;
    font-size: 6rem;
    line-height: 0.7;
    padding-top: 12px;
    padding-right: 16px;
    color: var(--wine);
    font-weight: 900;
}

#tendances .highlight-wine {
    color: var(--wine);
    font-weight: 800;
    background: linear-gradient(120deg, var(--lavender) 0%, transparent 100%);
    padding: 0 4px;
}

#tendances .body-text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--dark);
    opacity: 0.85;
}

#tendances .editorial-link {
    color: var(--purple);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid var(--border-lux);
    transition: all 0.3s ease;
}

#tendances .editorial-link:hover {
    border-bottom-color: var(--purple);
    background: var(--lavender);
}

/* --- Colonne Droite : Carte Premium Inversée (Dark Mode) --- */
#tendances .tendances-focus {
    position: relative;
    perspective: 1000px; /* Pour donner de la profondeur à la rotation */
}

/* La carte est légèrement inclinée pour casser le côté sage */
#tendances .premium-card {
    position: relative;
    background: var(--dark);
    border-radius: 30px;
    padding: clamp(40px, 5vw, 60px);
    box-shadow: 0 30px 60px rgba(30, 16, 54, 0.25);
    color: var(--white);
    overflow: hidden;
    transform: rotate(-2deg); 
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#tendances .premium-card:hover {
    transform: rotate(0deg) translateY(-10px);
    box-shadow: 0 40px 80px rgba(30, 16, 54, 0.35);
}

/* Halo lumineux interne subtil couleur "wine" */
#tendances .card-glow {
    position: absolute;
    top: -30%;
    left: -30%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(138, 21, 56, 0.4) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

#tendances .card-content {
    position: relative;
    z-index: 1;
}

#tendances .card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

#tendances .icon-ring {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

#tendances .card-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--lavender);
    letter-spacing: 0.05em;
}

#tendances .card-text {
    margin: 0 0 30px 0;
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
}

#tendances .card-action {
    display: inline-block;
    padding: 20px 30px;
    background: var(--white);
    border-radius: 16px;
    font-size: 1rem;
    color: var(--dark);
    font-weight: 500;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

#tendances .card-action strong {
    color: var(--wine);
    font-weight: 900;
}

/* --- Responsive --- */
@media (max-width: 960px) {
    #tendances .tendances-grid { grid-template-columns: 1fr; gap: 60px; }
    #tendances .premium-card { transform: rotate(0); } /* On annule la rotation sur mobile pour la lisibilité */
    #tendances .bg-watermark { font-size: 12rem; right: -5%; }
}
/* --- OPTIMISATION RESPONSIVE MOBILE (Section Tendances) --- */

@media (max-width: 768px) {
    /* Ajustement des espacements globaux */
    #tendances.editorial-section {
        padding: 60px 0; /* Plus compact pour le scroll mobile */
    }

    /* Filigrane : On le réduit et on le baisse en opacité pour ne pas masquer le texte */
    #tendances .bg-watermark {
        font-size: 8rem;
        opacity: 0.15;
        top: 2%;
        right: -5%;
    }

    /* Grille : Passage en une seule colonne */
    #tendances .tendances-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px;
    }

    /* Typographie du Titre */
    #tendances .editorial-title {
        font-size: 2.2rem; /* Taille plus équilibrée pour mobile */
        margin-bottom: 25px;
        text-align: center; /* Centrage pour un look plus éditorial sur mobile */
    }

    /* Lettrine Magazine : On réduit la taille pour éviter les gros vides blancs */
    #tendances .drop-cap {
        font-size: 4rem;
        line-height: 0.8;
        padding-top: 5px;
        padding-right: 12px;
    }

    #tendances .drop-cap-text {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    #tendances .body-text {
        font-size: 1rem;
        text-align: justify; /* Pour garder l'aspect magazine propre */
    }

    /* Kicker (le petit label) : Centrage */
    #tendances .kicker-pill {
        display: block;
        width: fit-content;
        margin: 0 auto 20px;
        text-align: center;
    }

    /* --- Carte Premium Mobile --- */
    #tendances .tendances-focus {
        perspective: none; /* On retire la perspective pour éviter les bugs de scroll */
    }

    #tendances .premium-card {
        transform: rotate(0) translateY(0); /* On supprime l'inclinaison pour la lisibilité */
        padding: 30px 20px;
        border-radius: 24px;
        margin: 0 auto;
        max-width: 100%;
    }

    /* On calme l'effet de survol (hover) sur mobile pour éviter les saccades */
    #tendances .premium-card:hover {
        transform: translateY(-5px); 
    }

    #tendances .card-header {
        flex-direction: column; /* Icône au-dessus du titre */
        text-align: center;
        gap: 15px;
    }

    #tendances .card-title {
        font-size: 1.5rem;
    }

    #tendances .card-text {
        text-align: center;
        font-size: 0.95rem;
    }

    /* Bouton d'action en pleine largeur pour le pouce */
    #tendances .card-action {
        display: block;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        padding: 16px 20px;
    }
}

/* Optimisation pour les écrans très petits (iPhone SE, etc.) */
@media (max-width: 380px) {
    #tendances .editorial-title {
        font-size: 1.8rem;
    }
    
    #tendances .drop-cap {
        font-size: 3.2rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-6ad4dbb *//* --- Base de la section Mystique (Casser la monotonie) --- */
#origines {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}

#origines.mystical-section {
    position: relative;
    padding: clamp(100px, 15vw, 180px) 0; /* Plus d'espace pour "respirer" */
    background-color: var(--white);
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--dark);
    overflow: hidden;
}

/* "Le Voile" - Superposition de gradients flous en arrière-plan */
#origines .the-veil {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
}

#origines .the-veil::before,
#origines .the-veil::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(100px); /* L'effet de brume mystique */
}

#origines .the-veil::before {
    top: -10%;
    left: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, var(--lavender) 0%, transparent 70%);
}

#origines .the-veil::after {
    bottom: -10%;
    right: -10%;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, rgba(138, 21, 56, 0.15) 0%, transparent 70%); /* Var --wine atténuée */
}

/* --- Conteneur et En-tête --- */
#origines .origines-container.editorial-wrap {
    position: relative;
    z-index: 1; /* Passe au-dessus de la brume */
    max-width: 900px; /* Plus serré pour un effet lecture intime */
    margin: 0 auto;
    padding: 0 24px;
}

#origines .centered-header {
    text-align: center;
    margin-bottom: clamp(60px, 8vw, 90px);
}

#origines .section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    line-height: 1.1;
    color: var(--dark);
    font-weight: 900;
    margin: 0 0 25px 0;
    letter-spacing: -0.02em;
}

#origines .title-highlight {
    color: var(--purple);
    font-style: italic;
    font-weight: 400;
}

/* Ton accent transformé en séparateur horizontal ornemental */
#origines .origines-accent.horizontal-separator {
    width: 120px;
    height: 4px;
    margin: 0 auto;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--wine), var(--purple));
    box-shadow: 0 2px 10px rgba(110, 27, 137, 0.2);
}

/* --- Flux Narratif (Superposition subtile) --- */
#origines .narrative-flow {
    max-width: 750px;
    margin: 0 auto clamp(80px, 10vw, 120px);
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
}

/* Premier paragraphe légèrement mis en avant */
#origines .origines-text.primary-text {
    font-size: 1.35rem;
    line-height: 1.7;
    color: var(--dark);
    font-weight: 500;
}

#origines .origines-text.primary-text strong {
    color: var(--wine);
    font-weight: 800;
}

#origines .origines-text.secondary-text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(30, 16, 54, 0.85); /* Var --dark atténuée */
}

#origines .origines-text strong {
    color: var(--purple);
    font-weight: 700;
}

#origines .origines-text em {
    font-style: italic;
    color: var(--wine);
}

/* --- Box "Rituel Minute" - Le Point Focal Lumineux --- */
#origines .origines-ritual-box.focuse-card {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    overflow: visible; /* Pour laisser dépasser l'effet de lueur */
}

/* Lueur externe simulant la bougie */
#origines .origines-ritual-box::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 120%;
    background: radial-gradient(circle, var(--lavender) 0%, transparent 70%);
    filter: blur(20px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.8;
}

#origines .card-inner {
    position: relative;
    z-index: 1;
    background: var(--white);
    padding: clamp(35px, 6vw, 55px);
    border-radius: 24px;
    border: 1px solid var(--border-lux);
    box-shadow: 0 20px 50px rgba(110, 27, 137, 0.08);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

#origines .origines-ritual-box:hover .card-inner {
    transform: translateY(-5px);
    box-shadow: 0 30px 70px rgba(110, 27, 137, 0.12);
}

/* Icône de la bougie traitée de façon unique */
#origines .origines-ritual-title {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--wine);
    margin-bottom: 25px;
}

#origines .origines-ritual-title::before {
    content: '🕯️';
    font-size: 2rem;
    filter: drop-shadow(0 0 5px rgba(138, 21, 56, 0.4));
}

#origines .ritual-description {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--dark);
    opacity: 0.9;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    #origines.mystical-section { padding: 80px 0; }
    #origines .card-inner { padding: 30px; }
    #origines .the-veil { opacity: 0.4; } /* Moins de brume sur mobile */
}

/* --- OPTIMISATION RESPONSIVE MOBILE (Section Origines) --- */

@media (max-width: 768px) {
    /* On réduit le souffle vertical pour éviter un scroll infini sur mobile */
    #origines.mystical-section {
        padding: 60px 0;
        overflow: hidden; /* Sécurité absolue contre le scroll latéral */
    }

    /* Le Voile : On calme les effets de flou pour la performance batterie/GPU */
    #origines .the-veil {
        opacity: 0.35;
    }

    #origines .the-veil::before,
    #origines .the-veil::after {
        filter: blur(60px); /* Flou moins gourmand en ressources */
        width: 80%; /* On élargit pour que la couleur soit diffuse mais douce */
    }

    /* En-tête : Centrage parfait pour le focus mobile */
    #origines .origines-container.editorial-wrap {
        padding: 0 20px;
    }

    #origines .section-title {
        font-size: 2.1rem; /* Taille stabilisée pour les petits écrans */
        line-height: 1.2;
        margin-bottom: 20px;
    }

    #origines .origines-accent.horizontal-separator {
        width: 80px; /* Séparateur plus discret */
        height: 3px;
    }

    /* Flux Narratif : Lisibilité avant tout */
    #origines .narrative-flow {
        margin-bottom: 60px;
        gap: 20px;
    }

    #origines .origines-text.primary-text {
        font-size: 1.15rem; /* On évite le texte trop massif */
        line-height: 1.6;
        text-align: center; /* Plus élégant sur un flux vertical unique */
    }

    #origines .origines-text.secondary-text {
        font-size: 1.05rem;
        line-height: 1.7;
        text-align: left; /* On repasse à gauche pour le confort de lecture long */
    }

    /* --- La Carte Rituel (Point Focal) --- */
    #origines .origines-ritual-box.focuse-card {
        max-width: 100%;
    }

    /* Glow de la bougie : On le réduit pour éviter qu'il ne "mange" les bords de l'écran */
    #origines .origines-ritual-box::before {
        width: 100%;
        height: 100%;
        opacity: 0.5;
        filter: blur(30px);
    }

    #origines .card-inner {
        padding: 30px 20px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.95); /* Plus d'opacité pour la lisibilité mobile */
    }

    /* On annule le hover sur mobile pour éviter les bugs de "sticky touch" */
    #origines .origines-ritual-box:hover .card-inner {
        transform: none;
    }

    /* Titre du Rituel : On empile pour éviter que l'émoji ne pousse le texte */
    #origines .origines-ritual-title {
        font-size: 1.3rem;
        flex-direction: column; /* L'émoji passe au dessus */
        text-align: center;
        gap: 8px;
    }

    #origines .origines-ritual-title::before {
        font-size: 1.8rem;
        margin-bottom: 5px;
    }

    #origines .ritual-description {
        font-size: 0.95rem;
        line-height: 1.6;
        text-align: center;
    }
}

/* Ajustement pour les écrans ultra-compacts (iPhone SE / mini) */
@media (max-width: 380px) {
    #origines.mystical-section {
        padding: 40px 0;
    }

    #origines .section-title {
        font-size: 1.8rem;
    }

    #origines .origines-text.primary-text {
        font-size: 1.05rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-3fe7182 *//* --- Base Lumineuse --- */

#monde {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}


#monde.luminous-section {
    position: relative;
    padding: clamp(80px, 12vw, 140px) 0;
    background-color: var(--white);
    overflow: hidden;
    z-index: 1;
}

/* Le "Flare" lumineux qui baigne la section */
#monde .ambient-flare {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    height: 80vw;
    max-width: 800px;
    max-height: 800px;
    background: radial-gradient(circle, rgba(243, 229, 245, 0.8) 0%, rgba(255,255,255,0) 70%); /* Var --lavender */
    z-index: -1;
    pointer-events: none;
    filter: blur(60px);
}

#monde .monde-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- En-tête --- */
#monde .monde-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: clamp(40px, 6vw, 60px);
}

#monde .monde-accent {
    width: 8px;
    height: 36px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--lavender), var(--purple));
    box-shadow: 0 4px 15px rgba(110, 27, 137, 0.2);
}

#monde .section-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: var(--dark);
    line-height: 1.1;
    font-weight: 900;
}

#monde .title-wine {
    color: var(--wine);
    font-style: italic;
    font-weight: 400;
}

/* --- Grille Bento --- */
#monde .bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 60px;
    align-items: start;
}

/* Les Cartes */
#monde .bento-card {
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-lux);
    border-radius: 24px;
    padding: clamp(30px, 4vw, 40px);
    box-shadow: 0 10px 30px rgba(110, 27, 137, 0.04), inset 0 0 0 1px rgba(255,255,255,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

/* Décalage vertical pour la colonne de droite (casser la rigidité) */
#monde .card-offset {
    margin-top: 60px; 
}

/* Interaction Hover */
#monde .bento-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(110, 27, 137, 0.08), inset 0 0 0 1px rgba(255,255,255,1);
    border-color: rgba(110, 27, 137, 0.3);
}

#monde .card-glow-hover {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(138, 21, 56, 0.08) 0%, transparent 70%); /* Var --wine */
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

#monde .bento-card:hover .card-glow-hover {
    opacity: 1;
}

/* Typographie des cartes */
#monde .destination-title {
    margin: 0 0 16px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 800;
}

#monde .wine-text { color: var(--wine); }
#monde .purple-text { color: var(--purple); }

#monde .destination-desc {
    margin: 0;
    color: var(--dark);
    line-height: 1.7;
    font-size: 1.05rem;
    opacity: 0.85;
    flex-grow: 1;
}

#monde .destination-desc strong {
    color: var(--dark);
    font-weight: 800;
}

#monde .monde-link {
    color: var(--purple);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px dotted rgba(110, 27, 137, 0.4);
    transition: all 0.3s ease;
}

#monde .monde-link:hover {
    color: var(--wine);
    border-bottom-style: solid;
    border-bottom-color: var(--wine);
}

/* --- Bannière Profil --- */
#monde .profile-banner {
    position: relative;
    background: linear-gradient(135deg, var(--white) 0%, var(--lavender) 100%);
    border-radius: 20px;
    padding: 3px; /* Pour créer un effet de bordure dégradée */
    box-shadow: 0 15px 35px rgba(110, 27, 137, 0.06);
}

#monde .profile-content {
    background: var(--white);
    border-radius: 18px;
    padding: clamp(30px, 5vw, 40px);
    border-left: 6px solid var(--purple);
}

#monde .profile-title {
    display: inline-block;
    color: var(--purple);
    font-size: 1.25rem;
    font-weight: 800;
    font-family: 'Playfair Display', serif;
    margin-bottom: 12px;
}

#monde .profile-text {
    margin: 0;
    color: var(--dark);
    line-height: 1.7;
    font-size: 1.1rem;
}

#monde .profile-text strong {
    color: var(--wine);
}

/* --- Responsive --- */
@media (max-width: 850px) {
    #monde .bento-grid { 
        grid-template-columns: 1fr; 
        gap: 20px; 
    }
    #monde .card-offset { 
        margin-top: 0; /* On annule le décalage sur mobile */
    }
    #monde .monde-accent {
        height: 48px; /* Plus grand si le titre passe sur 2 lignes */
    }
}

/* --- OPTIMISATION RESPONSIVE MOBILE (Section Luminous #monde) --- */

@media (max-width: 768px) {
    #monde.luminous-section {
        padding: 60px 0; /* On réduit le souffle vertical */
        overflow: hidden; /* Sécurité anti-débordement pour le flare */
    }

    /* Adaptation du Flare Lumineux */
    #monde .ambient-flare {
        width: 120vw; /* On l'élargit pour qu'il baigne tout l'écran mobile */
        height: 120vw;
        top: 10%;
        opacity: 0.5; /* Plus doux sur mobile pour ne pas gêner la lecture */
        filter: blur(40px);
    }

    #monde .monde-container {
        padding: 0 20px;
    }

    /* En-tête : On réaligne pour le confort visuel */
    #monde .monde-header {
        gap: 12px;
        margin-bottom: 40px;
        align-items: flex-start; /* Garde l'accent aligné au haut du titre */
    }

    #monde .monde-accent {
        width: 6px; /* Plus fin sur mobile */
        height: 32px;
        flex-shrink: 0; /* Empêche la barre de s'écraser */
    }

    #monde .section-title {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    /* Grille Bento : Passage en colonne unique propre */
    #monde .bento-grid {
        grid-template-columns: 1fr;
        gap: 20px; /* Espace constant entre les cartes */
        margin-bottom: 40px;
    }

    /* Adaptation des Cartes */
    #monde .bento-card {
        padding: 25px 20px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.9); /* Plus d'opacité pour contrer le flare */
    }

    /* On annule le décalage (offset) et les effets de hover "sautants" */
    #monde .card-offset {
        margin-top: 0;
    }

    #monde .bento-card:hover {
        transform: none; /* Désactivé pour éviter le bug du "clic collant" sur mobile */
        box-shadow: 0 10px 30px rgba(110, 27, 137, 0.04); /* On garde l'ombre de base */
    }

    /* Typographie des cartes */
    #monde .destination-title {
        font-size: 1.3rem;
        margin-bottom: 12px;
    }

    #monde .destination-desc {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Bannière Profil : On l'adapte pour la lecture verticale */
    #monde .profile-banner {
        border-radius: 16px;
    }

    #monde .profile-content {
        padding: 25px 20px;
        border-left-width: 4px; /* Un peu plus discret */
    }

    #monde .profile-title {
        font-size: 1.15rem;
    }

    #monde .profile-text {
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* Optimisation spécifique pour les téléphones très étroits (iPhone SE, etc.) */
@media (max-width: 380px) {
    #monde .section-title {
        font-size: 1.6rem;
    }

    #monde .destination-title {
        font-size: 1.2rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-0c0aa07 *//* --- Base de la section --- */
#tendances-pratiques {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}



#tendances-pratiques.sculptural-section {
    padding: clamp(80px, 12vw, 120px) 0;
    background-color: var(--white);
    color: var(--dark);
    font-family: 'Inter', system-ui, sans-serif;
}

#tendances-pratiques .tendances-container {
    max-width: 900px; /* Un peu plus resserré pour faciliter la lecture des blocs longs */
    margin: 0 auto;
    padding: 0 24px;
}

/* --- En-tête --- */
#tendances-pratiques .sculptural-header {
    margin-bottom: clamp(50px, 8vw, 80px);
    position: relative;
    padding-left: 30px;
}

#tendances-pratiques .header-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: 6px;
    background: var(--purple);
}

#tendances-pratiques .section-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--dark);
    line-height: 1.15;
    font-weight: 900;
}

#tendances-pratiques .title-light {
    display: block;
    color: var(--wine);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    margin-top: 8px;
}

/* --- Stack de Tendances --- */
#tendances-pratiques .trends-stack {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#tendances-pratiques .trend-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--border-lux);
    border-radius: 20px;
    padding: clamp(30px, 5vw, 40px);
    box-shadow: 0 10px 30px rgba(110, 27, 137, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

#tendances-pratiques .trend-item:hover {
    transform: translateX(10px);
    box-shadow: 0 15px 40px rgba(110, 27, 137, 0.08);
    border-color: rgba(110, 27, 137, 0.3);
}

/* La numérotation massive en arrière-plan */
#tendances-pratiques .trend-number {
    position: absolute;
    top: -20px;
    right: 20px;
    font-family: 'Playfair Display', serif;
    font-size: 12rem;
    font-weight: 900;
    color: var(--lavender);
    line-height: 1;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
    transition: color 0.3s ease, opacity 0.3s ease;
}

#tendances-pratiques .trend-item:hover .trend-number {
    color: var(--purple);
    opacity: 0.1;
}

/* Contenu des cartes */
#tendances-pratiques .trend-content {
    position: relative;
    z-index: 1;
    width: 100%;
}

#tendances-pratiques .trend-title {
    margin: 0 0 15px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.3;
}

#tendances-pratiques .purple-text { color: var(--purple); }
#tendances-pratiques .wine-text { color: var(--wine); }

#tendances-pratiques .trend-desc {
    margin: 0 0 20px 0;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--dark);
    opacity: 0.9;
}

#tendances-pratiques .trend-desc em {
    color: var(--purple);
    font-weight: 600;
}

#tendances-pratiques .trend-link {
    color: var(--dark);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid var(--lavender);
    transition: all 0.3s ease;
}

#tendances-pratiques .trend-link:hover {
    color: var(--wine);
    border-bottom-color: var(--wine);
}

/* Blocs d'action et d'avertissement intégrés */
#tendances-pratiques .trend-action {
    display: inline-block;
    padding: 12px 20px;
    background: var(--lavender);
    border-radius: 12px;
    font-size: 0.95rem;
    color: var(--dark);
    border: 1px solid rgba(110, 27, 137, 0.1);
}

#tendances-pratiques .trend-action strong {
    color: var(--purple);
    font-weight: 800;
}

#tendances-pratiques .trend-warning {
    display: inline-block;
    padding: 12px 20px;
    background: #fff7fa; /* Fond légèrement rouge basé sur --wine */
    border-left: 4px solid var(--wine);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--wine);
}

/* --- Bannière "Défi Budget" (Refonte Premium sans Orange) --- */
#tendances-pratiques .challenge-banner {
    margin-top: 60px;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    background: linear-gradient(135deg, var(--dark) 0%, #2a1b4a 100%);
    border-radius: 24px;
    padding: clamp(30px, 5vw, 40px);
    box-shadow: 0 20px 50px rgba(30, 16, 54, 0.2);
    color: var(--white);
}

#tendances-pratiques .challenge-icon {
    font-size: 2.5rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

#tendances-pratiques .challenge-title {
    margin: 0 0 10px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--lavender);
    letter-spacing: 0.05em;
}

#tendances-pratiques .challenge-text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    #tendances-pratiques .trend-number {
        font-size: 8rem;
        top: -10px;
        right: 10px;
    }
    #tendances-pratiques .challenge-banner {
        flex-direction: column;
        gap: 15px;
    }
}

/* --- OPTIMISATION RESPONSIVE MOBILE (Section Tendances Pratiques) --- */

@media (max-width: 768px) {
    #tendances-pratiques.sculptural-section {
        padding: 60px 0; /* Plus compact pour le mobile */
    }

    #tendances-pratiques .tendances-container {
        padding: 0 20px;
    }

    /* En-tête : On réduit l'espace à gauche pour gagner de la place */
    #tendances-pratiques .sculptural-header {
        padding-left: 20px;
        margin-bottom: 40px;
    }

    #tendances-pratiques .header-line {
        width: 4px; /* Ligne plus fine */
    }

    #tendances-pratiques .section-title {
        font-size: 1.8rem;
    }

    #tendances-pratiques .title-light {
        font-size: 1.3rem;
        margin-top: 5px;
    }

    /* Stack de Tendances */
    #tendances-pratiques .trends-stack {
        gap: 25px; /* On resserre les cartes */
    }

    #tendances-pratiques .trend-item {
        padding: 25px 20px;
        border-radius: 16px;
    }

    /* On neutralise l'effet de translation au survol sur mobile pour éviter les bugs tactiles */
    #tendances-pratiques .trend-item:hover {
        transform: none;
    }

    /* Numérotation massive : On la rend beaucoup plus discrète et plus petite */
    #tendances-pratiques .trend-number {
        font-size: 6rem; /* Réduction drastique */
        top: -5px;
        right: 5px;
        opacity: 0.08; /* Presque invisible pour ne pas gêner le texte */
    }

    /* On force l'opacité basse même au "hover" (touch) sur mobile */
    #tendances-pratiques .trend-item:hover .trend-number {
        opacity: 0.08;
    }

    /* Typo interne des cartes */
    #tendances-pratiques .trend-title {
        font-size: 1.35rem;
        margin-bottom: 12px;
        padding-right: 40px; /* On laisse de la place pour le numéro en fond */
    }

    #tendances-pratiques .trend-desc {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Blocs d'action et alertes en pleine largeur */
    #tendances-pratiques .trend-action,
    #tendances-pratiques .trend-warning {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 14px;
    }

    /* --- Bannière Défi Budget Mobile --- */
    #tendances-pratiques .challenge-banner {
        flex-direction: column; /* Déjà présent dans ton code, on affine */
        align-items: center;
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
        margin-top: 40px;
    }

    #tendances-pratiques .challenge-icon {
        font-size: 2rem;
        padding: 12px;
        margin: 0 auto;
    }

    #tendances-pratiques .challenge-title {
        font-size: 1.3rem;
    }

    #tendances-pratiques .challenge-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

/* Optimisation pour les téléphones très étroits (iPhone SE, etc.) */
@media (max-width: 380px) {
    #tendances-pratiques .section-title {
        font-size: 1.6rem;
    }

    #tendances-pratiques .trend-title {
        font-size: 1.2rem;
    }

    #tendances-pratiques .trend-number {
        font-size: 5rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-b4c21ab *//* --- Base de la section --- */
#symboles {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}


#symboles.oracle-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, sans-serif;
}

#symboles .symboles-container {
    max-width: 1080px; /* Légèrement plus large pour la grille de 3 */
    margin: 0 auto;
    padding: 0 24px;
}

/* --- En-tête --- */
#symboles .symboles-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: clamp(40px, 6vw, 60px);
}

#symboles .symboles-accent {
    width: 6px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--wine), var(--purple));
    box-shadow: 0 4px 15px rgba(138, 21, 56, 0.2);
}

#symboles .section-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: var(--dark);
    line-height: 1.15;
    font-weight: 900;
}

#symboles .title-wine {
    color: var(--wine);
    font-style: italic;
    font-weight: 400;
}

/* --- Grille Cartes d'Oracle --- */
#symboles .oracle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

#symboles .oracle-card {
    background: var(--white);
    border: 1px solid var(--border-lux);
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(110, 27, 137, 0.04);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#symboles .oracle-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(110, 27, 137, 0.1);
    border-color: rgba(110, 27, 137, 0.3);
}

/* Les icônes avec halo mystique */
#symboles .card-icon-wrap {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 24px;
    background: var(--lavender);
    position: relative;
}

#symboles .card-icon-wrap::after {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border-radius: 50%;
    z-index: -1;
    filter: blur(10px);
    opacity: 0.6;
}

#symboles .wine-glow::after { background: var(--wine); }
#symboles .purple-glow::after { background: var(--purple); }
#symboles .dark-glow::after { background: var(--dark); }

#symboles .oracle-title {
    margin: 0 0 16px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--dark);
    font-weight: 800;
}

#symboles .oracle-desc {
    margin: 0;
    color: var(--dark);
    line-height: 1.6;
    font-size: 1.05rem;
    opacity: 0.85;
}

/* --- Le Rituel : Box "Autel de Minuit" --- */
#symboles .altar-box {
    position: relative;
    background: var(--dark); /* Plongée dans l'obscurité pour le rituel */
    border-radius: 30px;
    padding: clamp(40px, 6vw, 60px);
    color: var(--white);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(30, 16, 54, 0.3);
}

/* Lueur interne (la "bougie" de l'autel) */
#symboles .altar-glow {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(110, 27, 137, 0.5) 0%, transparent 70%); /* Lueur purple */
    border-radius: 50%;
    pointer-events: none;
}

#symboles .altar-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

#symboles .altar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: var(--lavender);
    margin: 0 0 30px 0;
    font-weight: 800;
}

#symboles .altar-icon { font-size: 1.2em; }
#symboles .altar-time {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.6;
    letter-spacing: 1px;
}

#symboles .altar-steps p {
    margin: 0 0 20px 0;
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

#symboles .altar-conclusion {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.2rem;
    color: var(--lavender);
    font-style: italic;
    line-height: 1.6;
}

#symboles .altar-conclusion strong {
    color: var(--white);
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    #symboles .oracle-card { padding: 30px 20px; }
    #symboles .altar-box { padding: 40px 24px; text-align: left; }
    #symboles .altar-content { text-align: left; }
    #symboles .altar-title { justify-content: flex-start; flex-wrap: wrap; }
}

/* --- OPTIMISATION RESPONSIVE MOBILE (Section Symboles) --- */

@media (max-width: 768px) {
    #symboles.oracle-section {
        padding: 60px 0; /* Plus compact pour le mobile */
        overflow: hidden; /* Sécurité absolue contre le scroll horizontal */
    }

    #symboles .symboles-container {
        padding: 0 20px;
    }

    /* En-tête : Recentrage et équilibre */
    #symboles .symboles-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        margin-bottom: 40px;
    }

    #symboles .symboles-accent {
        width: 40px; /* On transforme la barre verticale en séparateur horizontal */
        height: 4px;
        margin-bottom: 10px;
    }

    #symboles .section-title {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    /* Grille Oracle : Passage en colonne unique propre */
    #symboles .oracle-grid {
        grid-template-columns: 1fr; 
        gap: 25px;
        margin-bottom: 50px;
    }

    #symboles .oracle-card {
        padding: 35px 20px;
        border-radius: 20px;
    }

    /* On désactive l'effet de levée (hover) pour éviter les bugs tactiles */
    #symboles .oracle-card:hover {
        transform: none;
    }

    #symboles .card-icon-wrap {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
        margin-bottom: 20px;
    }

    #symboles .oracle-title {
        font-size: 1.35rem;
        margin-bottom: 12px;
    }

    #symboles .oracle-desc {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* --- L'Autel de Minuit (Box Dark) --- */
    #symboles .altar-box {
        padding: 45px 20px;
        border-radius: 24px;
        text-align: center; /* On garde le texte centré pour le côté "rituel" */
    }

    /* On réduit la lueur pour qu'elle ne "blanchisse" pas tout l'écran mobile */
    #symboles .altar-glow {
        width: 200px;
        height: 200px;
        top: -10%;
        opacity: 0.4;
    }

    #symboles .altar-content {
        text-align: center;
    }

    #symboles .altar-title {
        flex-direction: column; /* Icône au-dessus du texte */
        gap: 8px;
        font-size: 1.5rem;
        margin-bottom: 25px;
    }

    #symboles .altar-icon {
        font-size: 2.2rem;
    }

    #symboles .altar-time {
        font-size: 0.85rem;
        letter-spacing: 2px;
    }

    #symboles .altar-steps p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    #symboles .altar-conclusion {
        margin-top: 30px;
        padding-top: 25px;
        font-size: 1.05rem;
    }
}

/* Optimisation pour les écrans ultra-fins (iPhone SE / mini) */
@media (max-width: 380px) {
    #symboles .section-title {
        font-size: 1.6rem;
    }

    #symboles .oracle-title {
        font-size: 1.2rem;
    }

    #symboles .altar-box {
        padding: 35px 15px;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-cc9d9b8 *//* --- Base Lookbook --- */
#costumes {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}

#costumes.lookbook-section {
    padding: clamp(80px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, sans-serif;
}

#costumes .costumes-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- En-tête Centré --- */
#costumes .lookbook-header {
    text-align: center;
    margin-bottom: clamp(50px, 8vw, 70px);
}

#costumes .section-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    color: var(--dark);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

#costumes .subtitle-wine {
    display: block;
    margin-top: 10px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    color: var(--wine);
    font-style: italic;
}

#costumes .header-divider {
    width: 60px;
    height: 3px;
    margin: 25px auto 0;
    background: linear-gradient(90deg, var(--wine), var(--purple));
    border-radius: 3px;
}

/* --- Podium des Styles --- */
#costumes .style-podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    align-items: center; /* Permet l'effet de surélévation */
    margin-bottom: 60px;
}

#costumes .style-card {
    background: var(--white);
    border: 1px solid var(--border-lux);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(110, 27, 137, 0.04);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}

#costumes .style-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(110, 27, 137, 0.08);
}

/* Effet Podium : la carte centrale est plus grande */
#costumes .center-elevated {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(110, 27, 137, 0.06);
    border-color: rgba(138, 21, 56, 0.2);
    z-index: 2;
}
#costumes .center-elevated:hover {
    transform: scale(1.05) translateY(-8px);
}

/* Badges typographiques */
#costumes .card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    font-size: 1.2rem;
    margin-bottom: 20px;
}
#costumes .purple-badge { background: var(--lavender); color: var(--purple); }
#costumes .wine-badge { background: #fff1f4; color: var(--wine); }
#costumes .dark-badge { background: #f0f0f5; color: var(--dark); }

#costumes .style-title {
    margin: 0 0 15px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--dark);
    font-weight: 800;
}

#costumes .style-desc {
    margin: 0;
    color: var(--dark);
    line-height: 1.6;
    font-size: 1rem;
    opacity: 0.85;
}
#costumes .style-desc strong { color: var(--purple); font-weight: 700; }
#costumes .style-desc em { color: var(--wine); font-style: italic; font-weight: 600; }

/* --- L'Écrin (La Règle d'Or) --- */
#costumes .velvet-banner {
    position: relative;
    background: var(--wine); /* Contraste massif */
    border-radius: 24px;
    padding: clamp(30px, 5vw, 40px);
    text-align: center;
    color: var(--white);
    margin-bottom: 60px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(138, 21, 56, 0.2);
}

#costumes .velvet-glow {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(243, 229, 245, 0.15) 0%, transparent 70%); /* Lueur lavender */
    pointer-events: none;
}

#costumes .velvet-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

#costumes .crown-icon {
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

#costumes .velvet-text {
    margin: 0;
    font-size: clamp(1.1rem, 3vw, 1.35rem);
    line-height: 1.6;
    font-family: 'Playfair Display', serif;
    max-width: 800px;
}
#costumes .velvet-text strong {
    color: var(--lavender);
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.85em;
    font-family: 'Inter', sans-serif;
    display: block;
    margin-bottom: 8px;
}

/* --- Toolkit : Indispensables UI --- */
#costumes .practical-toolkit {
    background: linear-gradient(135deg, #fdfcfd 0%, var(--lavender) 100%);
    border: 1px solid var(--border-lux);
    border-radius: 24px;
    padding: clamp(30px, 5vw, 40px);
}

#costumes .toolkit-title {
    margin: 0 0 25px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--dark);
    font-weight: 800;
    text-align: center;
}

#costumes .pills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
}

/* Design des "Pills" (Boutons modernes) */
#costumes .utility-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid rgba(110, 27, 137, 0.08);
    box-shadow: 0 4px 12px rgba(110, 27, 137, 0.03);
    transition: transform 0.3s ease;
}

#costumes .utility-pill:hover {
    transform: translateY(-3px);
    border-color: rgba(110, 27, 137, 0.2);
}

#costumes .pill-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--purple);
    color: var(--white);
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: bold;
    flex-shrink: 0;
}

#costumes .pill-text {
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.4;
}
#costumes .pill-text strong {
    color: var(--wine);
}

/* --- Responsive --- */
@media (max-width: 900px) {
    #costumes .style-podium {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    #costumes .center-elevated {
        transform: scale(1); /* On annule le scale sur mobile */
        z-index: 1;
    }
    #costumes .center-elevated:hover {
        transform: translateY(-8px);
    }
}

/* --- OPTIMISATION RESPONSIVE MOBILE (Section Lookbook #costumes) --- */

@media (max-width: 768px) {
    #costumes.lookbook-section {
        padding: 60px 0; /* Plus dynamique sur mobile */
    }

    #costumes .costumes-container {
        padding: 0 20px;
    }

    /* En-tête : Recentrage et équilibre */
    #costumes .lookbook-header {
        margin-bottom: 40px;
    }

    #costumes .section-title {
        font-size: 1.9rem;
        line-height: 1.2;
    }

    #costumes .subtitle-wine {
        font-size: 1.2rem;
        margin-top: 5px;
    }

    /* Podium des Styles : On empile les cartes */
    #costumes .style-podium {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #costumes .style-card {
        padding: 30px 20px; /* On réduit pour gagner de la surface de lecture */
        border-radius: 18px;
        text-align: center; /* Plus harmonieux sur un flux vertical */
    }

    /* On annule l'effet Podium (scale) pour éviter les chevauchements ou flous */
    #costumes .center-elevated {
        transform: scale(1) !important; 
        border-color: var(--border-lux); /* On remet la bordure standard */
        background: linear-gradient(135deg, var(--white) 0%, #fff9fa 100%); /* Subtil rappel Wine */
    }

    /* On désactive le hover "translate" pour la stabilité tactile */
    #costumes .style-card:hover {
        transform: none;
    }

    #costumes .card-badge {
        margin: 0 auto 15px; /* Centrage du badge */
        width: 40px;
        height: 40px;
    }

    #costumes .style-title {
        font-size: 1.3rem;
    }

    #costumes .style-desc {
        font-size: 0.95rem;
    }

    /* L'Écrin (Velvet Banner) : On optimise l'impact visuel */
    #costumes .velvet-banner {
        padding: 40px 20px;
        border-radius: 20px;
        margin-bottom: 40px;
    }

    #costumes .crown-icon {
        font-size: 1.8rem;
    }

    #costumes .velvet-text {
        font-size: 1.1rem;
        line-height: 1.5;
    }

    /* Toolkit : Grille de Pills */
    #costumes .practical-toolkit {
        padding: 30px 15px;
        border-radius: 20px;
    }

    #costumes .toolkit-title {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    #costumes .pills-grid {
        grid-template-columns: 1fr; /* Force une seule colonne sur mobile */
        gap: 10px;
    }

    #costumes .utility-pill {
        padding: 14px 16px;
        border-radius: 12px;
    }

    #costumes .pill-text {
        font-size: 0.85rem;
    }
}

/* Optimisation pour les écrans ultra-compacts (iPhone SE / mini) */
@media (max-width: 380px) {
    #costumes .section-title {
        font-size: 1.6rem;
    }

    #costumes .velvet-text {
        font-size: 1rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9f2af61 *//* --- Base Moodboard --- */
#deco {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}

#deco.moodboard-section {
    padding: clamp(80px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, sans-serif;
    position: relative;
}

#deco .deco-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- En-tête : Élégance symétrique --- */
#deco .deco-header {
    text-align: center;
    margin-bottom: clamp(60px, 8vw, 80px);
}

#deco .section-title {
    margin: 0 0 15px 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: var(--wine);
    font-weight: 900;
    letter-spacing: -0.02em;
}

#deco .deco-subtitle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#deco .deco-line {
    height: 1px;
    width: clamp(40px, 10vw, 100px);
    background: var(--border-lux);
}

#deco .deco-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: var(--dark);
    font-style: italic;
    opacity: 0.8;
}

/* --- Grille des Arches (Arch Cards) --- */
#deco .arch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 70px;
}

/* La forme de l'arche : très arrondie en haut, classique en bas */
#deco .arch-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border-lux);
    border-radius: 140px 140px 24px 24px; /* Le secret de la forme d'arche */
    padding: 90px 30px 40px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(110, 27, 137, 0.03);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

#deco .arch-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(110, 27, 137, 0.08);
    border-color: rgba(110, 27, 137, 0.3);
}

/* Le médaillon incrusté en haut de l'arche */
#deco .arch-medallion {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--white);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    z-index: 2;
}

/* Bordures colorées subtiles pour les médaillons */
#deco .purple-medallion { border: 2px solid var(--purple); }
#deco .dark-medallion { border: 2px solid var(--dark); }
#deco .wine-medallion { border: 2px solid var(--wine); }

#deco .arch-title {
    margin: 0 0 16px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--dark);
    font-weight: 800;
}

#deco .arch-desc {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--dark);
    opacity: 0.85;
}

#deco .arch-desc strong { color: var(--wine); }
#deco .arch-desc em { color: var(--purple); font-style: italic; font-weight: 600; }

/* --- Astuce Vibratoire : Le Billet Mystique --- */
/* Boîte externe avec dégradé subtil */
#deco .aura-box {
    background: linear-gradient(135deg, var(--white) 0%, var(--lavender) 100%);
    border-radius: 30px;
    padding: 6px; /* Épaisseur du cadre extérieur */
    box-shadow: 0 20px 40px rgba(110, 27, 137, 0.06);
}

/* Boîte interne avec pointillés (façon ticket chic) */
#deco .aura-inner {
    background: var(--white);
    border-radius: 24px;
    border: 1px dashed rgba(110, 27, 137, 0.4); /* Pointillés purple */
    padding: clamp(30px, 5vw, 40px);
    display: flex;
    align-items: center;
    gap: 25px;
}

#deco .aura-icon-wrap {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--lavender);
    color: var(--purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

#deco .aura-content {
    flex-grow: 1;
}

#deco .aura-title {
    margin: 0 0 10px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--purple);
    font-weight: 800;
    letter-spacing: 0.02em;
}

#deco .aura-text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--dark);
}

/* --- Responsive --- */
@media (max-width: 900px) {
    #deco .arch-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    /* Sur mobile, on réduit un peu l'arrondi massif pour gagner de l'espace */
    #deco .arch-card {
        border-radius: 80px 80px 20px 20px;
        padding: 70px 24px 30px;
    }
    #deco .aura-inner {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* --- OPTIMISATION RESPONSIVE MOBILE (Section Moodboard #deco) --- */

@media (max-width: 768px) {
    #deco.moodboard-section {
        padding: 60px 0; /* Rythme plus nerveux pour le mobile */
    }

    #deco .deco-container {
        padding: 0 20px;
    }

    /* En-tête : On stabilise la symétrie */
    #deco .deco-header {
        margin-bottom: 40px;
    }

    #deco .section-title {
        font-size: 2.1rem;
        line-height: 1.1;
    }

    #deco .deco-subtitle-wrap {
        gap: 12px; /* On resserre pour éviter que les lignes ne sortent de l'écran */
    }

    #deco .deco-line {
        width: 30px; /* Lignes plus courtes pour laisser la place au texte */
    }

    #deco .deco-subtitle {
        font-size: 1rem;
    }

    /* Grille d'Arches : Passage en colonne unique */
    #deco .arch-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-bottom: 50px;
    }

    /* Adaptation de la forme de l'arche */
    #deco .arch-card {
        /* On réduit l'arrondi (140px -> 100px) pour ne pas compresser le titre */
        border-radius: 100px 100px 20px 20px; 
        padding: 75px 20px 30px;
        margin: 0 auto;
        max-width: 320px; /* On garde l'aspect "élancé" de l'arche */
    }

    /* On désactive le hover "translate" pour la stabilité tactile */
    #deco .arch-card:hover {
        transform: none;
        box-shadow: 0 15px 35px rgba(110, 27, 137, 0.05);
    }

    #deco .arch-medallion {
        width: 50px;
        height: 50px;
        top: 15px;
        font-size: 1.2rem;
    }

    #deco .arch-title {
        font-size: 1.25rem;
        margin-bottom: 12px;
    }

    #deco .arch-desc {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* --- Billet Mystique (Aura Box) Mobile --- */
    #deco .aura-box {
        border-radius: 24px;
        padding: 4px; /* On affine le contour */
    }

    #deco .aura-inner {
        flex-direction: column; /* Empilement icône + texte */
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
        border-radius: 20px;
    }

    #deco .aura-icon-wrap {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
    }

    #deco .aura-title {
        font-size: 1.25rem;
        margin-bottom: 8px;
    }

    #deco .aura-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

/* Optimisation pour les écrans ultra-compacts (iPhone SE / mini) */
@media (max-width: 380px) {
    #deco .section-title {
        font-size: 1.8rem;
    }

    #deco .arch-card {
        border-radius: 80px 80px 20px 20px;
        padding: 65px 15px 25px;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-d9eed3b *//* --- Base Safe Zone (Rupture avec le fond lavande) --- */
#enfants {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}

#enfants.safezone-section {
    padding: clamp(80px, 12vw, 120px) 0;
    background-color: var(--lavender); /* Le fond devient lavande pour créer un cocon */
    font-family: 'Inter', system-ui, sans-serif;
    border-radius: 40px 40px 0 0; /* Arrondi doux pour entrer dans la section */
}

#enfants .safezone-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- En-tête --- */
#enfants .safezone-header {
    text-align: center;
    margin-bottom: clamp(50px, 8vw, 70px);
}

#enfants .section-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: var(--dark);
    font-weight: 900;
    letter-spacing: -0.02em;
}

#enfants .subtitle-purple {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 20px;
    background: var(--white);
    color: var(--purple);
    border-radius: 100px;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(110, 27, 137, 0.1);
}

/* --- Grille des Widgets (Type iOS App) --- */
#enfants .widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

/* Cartes avec angles très arrondis */
#enfants .widget-card {
    background: var(--white);
    border-radius: 32px;
    padding: clamp(35px, 5vw, 45px);
    box-shadow: 0 20px 40px rgba(30, 16, 54, 0.05);
    transition: transform 0.3s ease;
    position: relative;
}

#enfants .widget-card:hover {
    transform: translateY(-5px);
}

/* Icônes flottantes (en haut à gauche) */
#enfants .widget-icon {
    position: absolute;
    top: -20px;
    left: 40px;
    width: 60px;
    height: 60px;
    background: var(--white);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 10px 20px rgba(30, 16, 54, 0.08);
}

#enfants .purple-shadow { border-bottom: 3px solid var(--purple); }
#enfants .wine-shadow { border-bottom: 3px solid var(--wine); }

#enfants .widget-title {
    margin: 20px 0 25px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: var(--dark);
    font-weight: 800;
}

/* UI Checklist Customisée */
#enfants .custom-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#enfants .custom-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

#enfants .check-mark {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fdfcfd;
    border: 2px solid var(--purple);
    position: relative;
    margin-top: 2px;
}
#enfants .check-mark::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    background: var(--purple);
    border-radius: 50%;
}

#enfants .custom-checklist p {
    margin: 0;
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.6;
}
#enfants .custom-checklist strong { color: var(--purple); }

/* UI Tip Box (La boîte bleue citrouille) */
#enfants .widget-desc {
    margin: 0 0 25px 0;
    font-size: 1.05rem;
    color: var(--dark);
    line-height: 1.6;
}
#enfants .widget-desc strong { color: var(--wine); }

#enfants .tip-box {
    position: relative;
    background: #fff7fa; /* Base wine très claire */
    border: 1px solid rgba(138, 21, 56, 0.15);
    border-radius: 20px;
    padding: 30px 25px 25px;
    margin-top: 10px;
}

#enfants .tip-badge {
    position: absolute;
    top: -12px;
    left: 20px;
    background: var(--wine);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#enfants .tip-box p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.6;
    font-style: italic;
}

/* --- Bannière "Étiquette" (Grounded Dark Mode) --- */
#enfants .etiquette-banner {
    display: flex;
    align-items: center;
    gap: 30px;
    background: var(--dark);
    border-radius: 32px;
    padding: clamp(30px, 5vw, 50px);
    color: var(--white);
    box-shadow: 0 25px 50px rgba(30, 16, 54, 0.15);
}

#enfants .etiquette-visual {
    font-size: 4rem;
    line-height: 1;
    opacity: 0.9;
    flex-shrink: 0;
}

#enfants .etiquette-content { flex-grow: 1; }

#enfants .etiquette-title {
    margin: 0 0 15px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--lavender);
    font-weight: 800;
}

#enfants .etiquette-text {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}
#enfants .etiquette-text strong {
    color: var(--white);
    font-weight: 900;
    border-bottom: 2px solid var(--wine);
}

/* --- Responsive --- */
@media (max-width: 900px) {
    #enfants .etiquette-banner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
}

/* --- OPTIMISATION RESPONSIVE MOBILE (Section Enfants / Safe Zone) --- */

@media (max-width: 768px) {
    #enfants.safezone-section {
        padding: 60px 0; /* Plus de dynamisme au scroll */
        border-radius: 30px 30px 0 0; /* Arrondi légèrement réduit pour mobile */
    }

    #enfants .safezone-container {
        padding: 0 20px;
    }

    /* En-tête : Centrage pour le côté "App iOS" */
    #enfants .safezone-header {
        margin-bottom: 50px;
    }

    #enfants .section-title {
        font-size: 2rem;
        line-height: 1.1;
    }

    #enfants .subtitle-purple {
        font-size: 0.9rem;
        padding: 6px 16px;
    }

    /* Grille des Widgets : On augmente l'espace entre les cartes à cause de l'icône flottante */
    #enfants .widget-grid {
        grid-template-columns: 1fr;
        gap: 55px; /* Gap important pour laisser respirer l'icône de la carte suivante */
        margin-bottom: 50px;
    }

    /* Cartes Widgets */
    #enfants .widget-card {
        padding: 40px 20px 30px; /* Padding haut plus important pour l'icône */
        border-radius: 28px;
        text-align: center; /* Centrage pour un look "Dashboard" mobile */
    }

    /* Icônes flottantes : On les recentre pour l'équilibre visuel */
    #enfants .widget-icon {
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 55px;
        height: 55px;
        font-size: 1.6rem;
    }

    #enfants .widget-title {
        margin: 25px 0 20px 0;
        font-size: 1.4rem;
    }

    /* UI Checklist : On réaligne le texte à gauche pour la lisibilité */
    #enfants .custom-checklist {
        text-align: left;
        gap: 12px;
    }

    #enfants .custom-checklist li {
        gap: 12px;
    }

    #enfants .check-mark {
        width: 20px;
        height: 20px;
        margin-top: 3px;
    }

    #enfants .custom-checklist p {
        font-size: 0.95rem;
    }

    /* UI Tip Box */
    #enfants .tip-box {
        padding: 25px 15px 20px;
        margin-top: 15px;
        text-align: left; /* Confort de lecture */
    }

    #enfants .tip-badge {
        left: 50%;
        transform: translateX(-50%); /* Centrage du badge */
        font-size: 0.7rem;
    }

    /* --- Bannière Étiquette (Grounded Dark) --- */
    #enfants .etiquette-banner {
        flex-direction: column; /* Déjà présent, on affine */
        padding: 40px 20px;
        gap: 20px;
        border-radius: 24px;
        text-align: center;
    }

    #enfants .etiquette-visual {
        font-size: 3.5rem;
        margin-bottom: 5px;
    }

    #enfants .etiquette-title {
        font-size: 1.5rem;
    }

    #enfants .etiquette-text {
        font-size: 1rem;
        line-height: 1.6;
        text-align: center;
    }
}

/* Optimisation pour les écrans de poche (iPhone SE / mini) */
@media (max-width: 380px) {
    #enfants .section-title {
        font-size: 1.7rem;
    }

    #enfants .widget-card {
        padding: 40px 15px 25px;
    }

    #enfants .etiquette-title {
        font-size: 1.3rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-45a4bfd *//* --- Base Eco-Section --- */
#conscient.eco-section {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}

#conscient .eco-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- En-tête --- */
#conscient .eco-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: clamp(50px, 8vw, 70px);
}

#conscient .eco-accent {
    width: 50px;
    height: 4px;
    border-radius: 2px;
    background: var(--purple);
}

#conscient .section-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: var(--dark);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

#conscient .title-wine {
    color: var(--wine);
    font-style: italic;
    font-weight: 400;
}

/* --- Grille "Offset" (Cartes décalées) --- */
#conscient .eco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-bottom: 70px;
}

#conscient .eco-card {
    position: relative;
    z-index: 1;
}

/* L'effet de papier décalé en arrière-plan */
#conscient .card-offset-bg {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    z-index: -1;
    transition: transform 0.3s ease;
}

#conscient .lavender-bg { background: var(--lavender); }
#conscient .wine-bg { background: rgba(138, 21, 56, 0.1); }
#conscient .dark-bg { background: rgba(30, 16, 54, 0.05); }

#conscient .eco-card:hover .card-offset-bg {
    transform: translate(5px, 5px);
}

/* Le vrai contenu de la carte */
#conscient .eco-card-inner {
    background: var(--white);
    border: 1px solid var(--border-lux);
    border-radius: 20px;
    padding: clamp(30px, 4vw, 40px);
    height: 100%;
    box-shadow: 0 4px 15px rgba(110, 27, 137, 0.02);
    transition: transform 0.3s ease;
}

#conscient .eco-card:hover .eco-card-inner {
    transform: translate(-5px, -5px);
}

#conscient .eco-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 800;
}

#conscient .eco-icon {
    font-size: 1.5rem;
    line-height: 1;
}

#conscient .purple-text { color: var(--purple); }
#conscient .wine-text { color: var(--wine); }
#conscient .dark-text { color: var(--dark); }

#conscient .eco-desc {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--dark);
    opacity: 0.85;
}

#conscient .eco-desc strong {
    color: var(--dark);
    font-weight: 800;
    border-bottom: 1px solid var(--lavender);
}

/* --- Note d'intention (Pledge Card) --- */
#conscient .pledge-box {
    position: relative;
    background: var(--lavender);
    border-radius: 24px;
    padding: clamp(30px, 6vw, 50px);
    border: 2px dashed rgba(110, 27, 137, 0.3); /* Pointillés pour le côté "coupon à détacher" */
    text-align: center;
    box-shadow: inset 0 0 0 4px var(--white), 0 15px 30px rgba(110, 27, 137, 0.05); /* Double bordure interne */
}

#conscient .pledge-content {
    max-width: 700px;
    margin: 0 auto;
}

#conscient .pledge-badge {
    display: inline-block;
    background: var(--purple);
    color: var(--white);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

#conscient .pledge-title {
    margin: 0 0 15px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--dark);
    font-weight: 900;
}

#conscient .pledge-text {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--dark);
}

#conscient .pledge-text strong {
    color: var(--wine);
    font-weight: 800;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    #conscient .eco-grid {
        gap: 30px;
    }
    #conscient .eco-card:hover .card-offset-bg { transform: translate(2px, 2px); }
    #conscient .eco-card:hover .eco-card-inner { transform: translate(-2px, -2px); }
}

/* --- OPTIMISATION RESPONSIVE MOBILE (Section Conscient / Eco-Section) --- */

@media (max-width: 768px) {
    #conscient.eco-section {
        padding: 50px 0; /* Un peu plus serré pour le flux mobile */
    }

    #conscient .eco-container {
        padding: 0 20px;
    }

    /* En-tête : Centrage pour un look plus "manifeste" sur mobile */
    #conscient .eco-header {
        align-items: center;
        text-align: center;
        margin-bottom: 40px;
    }

    #conscient .eco-accent {
        width: 40px; /* Barre plus petite */
        margin-bottom: 10px;
    }

    #conscient .section-title {
        font-size: 1.85rem;
        line-height: 1.2;
    }

    /* Grille : On force l'empilement vertical propre */
    #conscient .eco-grid {
        grid-template-columns: 1fr;
        gap: 35px; /* On laisse de l'espace pour l'effet de décalage arrière */
        margin-bottom: 50px;
    }

    /* Effet de décalage (Offset) : On le réduit pour mobile */
    #conscient .card-offset-bg {
        top: 6px;
        left: 6px;
        border-radius: 16px;
    }

    #conscient .eco-card-inner {
        padding: 25px 20px;
        border-radius: 16px;
    }

    /* Désactivation des effets de translation au survol (évite le côté "collant" sur mobile) */
    #conscient .eco-card:hover .card-offset-bg,
    #conscient .eco-card:hover .eco-card-inner {
        transform: none;
    }

    /* Typo interne des cartes */
    #conscient .eco-title {
        font-size: 1.25rem;
        gap: 10px;
    }

    #conscient .eco-icon {
        font-size: 1.3rem;
    }

    #conscient .eco-desc {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* --- Note d'Intention (Pledge Box / Coupon) --- */
    #conscient .pledge-box {
        padding: 35px 20px;
        border-radius: 20px;
        box-shadow: inset 0 0 0 3px var(--white), 0 10px 20px rgba(110, 27, 137, 0.05);
    }

    #conscient .pledge-badge {
        font-size: 0.75rem;
        padding: 5px 12px;
        margin-bottom: 15px;
    }

    #conscient .pledge-title {
        font-size: 1.45rem;
        margin-bottom: 12px;
    }

    #conscient .pledge-text {
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* Optimisation pour les écrans très étroits (iPhone SE / mini) */
@media (max-width: 380px) {
    #conscient .section-title {
        font-size: 1.65rem;
    }

    #conscient .pledge-title {
        font-size: 1.3rem;
    }
    
    #conscient .eco-title {
        font-size: 1.15rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-7f37d53 *//* --- Base Journey Section --- */
#soiree.journey-section {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}

#soiree .soiree-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- En-tête --- */
#soiree .soiree-header {
    text-align: center;
    margin-bottom: clamp(60px, 8vw, 90px);
}

#soiree .section-title {
    margin: 0 0 10px 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    color: var(--dark);
    font-weight: 900;
    letter-spacing: -0.02em;
}

#soiree .subtitle-wine {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    color: var(--wine);
    font-style: italic;
    opacity: 0.9;
}

#soiree .header-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--purple);
    margin: 25px auto 0;
    box-shadow: 0 0 0 4px var(--lavender);
}

/* --- La Frise Chronologique (Timeline) --- */
#soiree .journey-track {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    margin-bottom: 80px;
}

/* La ligne horizontale connectrice */
#soiree .journey-track::before {
    content: '';
    position: absolute;
    top: 30px; /* Alignée sur le milieu des marqueurs */
    left: 50px;
    right: 50px;
    height: 2px;
    background: linear-gradient(90deg, var(--wine), var(--purple), var(--dark));
    opacity: 0.2;
    z-index: 0;
}

#soiree .journey-node {
    flex: 1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Les points/marqueurs sur la ligne */
#soiree .node-marker {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.04);
    transition: transform 0.3s ease;
}

#soiree .journey-node:hover .node-marker {
    transform: scale(1.1);
}

#soiree .wine-marker { border-color: var(--wine); color: var(--wine); }
#soiree .purple-marker { border-color: var(--purple); color: var(--purple); }
#soiree .dark-marker { border-color: var(--dark); color: var(--dark); }

#soiree .node-icon {
    font-size: 1.2rem;
}

/* Contenu des étapes */
#soiree .node-content {
    background: var(--white);
    padding: 0 15px;
}

#soiree .node-title {
    margin: 0 0 12px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 800;
}

#soiree .wine-text { color: var(--wine); }
#soiree .purple-text { color: var(--purple); }
#soiree .dark-text { color: var(--dark); }

#soiree .node-desc {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dark);
    opacity: 0.85;
}

#soiree .node-desc strong {
    display: block;
    margin-bottom: 5px;
    color: var(--dark);
    font-weight: 700;
}

#soiree .node-desc em {
    color: var(--purple);
    font-style: italic;
    font-weight: 600;
}

/* --- Graver l'instant : Design Polaroid --- */
#soiree .keepsake-wrapper {
    display: flex;
    justify-content: center;
    padding: 20px;
}

#soiree .polaroid-frame {
    background: var(--white);
    padding: 40px 40px 50px 40px; /* Padding bas plus large comme un polaroid */
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(30, 16, 54, 0.08), 0 1px 3px rgba(0,0,0,0.05);
    max-width: 700px;
    transform: rotate(2deg); /* L'inclinaison poétique */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    border: 1px solid rgba(110, 27, 137, 0.05);
}

#soiree .polaroid-frame:hover {
    transform: rotate(0deg) translateY(-5px);
    box-shadow: 0 25px 50px rgba(30, 16, 54, 0.12);
}

#soiree .polaroid-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
    border-bottom: 1px dashed var(--border-lux);
    padding-bottom: 20px;
}

#soiree .camera-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 2px 4px rgba(110, 27, 137, 0.2));
}

#soiree .polaroid-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: var(--purple);
    font-weight: 800;
}

#soiree .title-light {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--dark);
    opacity: 0.5;
    letter-spacing: 1px;
}

#soiree .polaroid-text {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--dark);
    text-align: center;
}

#soiree .polaroid-text strong {
    color: var(--wine);
    font-weight: 800;
    background: linear-gradient(120deg, var(--lavender) 0%, transparent 100%);
    padding: 0 4px;
}

/* --- Responsive --- */
@media (max-width: 850px) {
    /* On passe la timeline en vertical sur mobile */
    #soiree .journey-track {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        padding-left: 20px;
    }
    
    #soiree .journey-track::before {
        top: 0;
        bottom: 0;
        left: 49px; /* Aligné sous les marqueurs */
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--wine), var(--purple), var(--dark));
    }

    #soiree .journey-node {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        gap: 25px;
    }

    #soiree .node-marker {
        margin-bottom: 0;
        flex-shrink: 0;
        background: var(--white); /* Pour masquer la ligne derrière */
    }

    #soiree .node-title { margin-top: 5px; }

    #soiree .polaroid-frame {
        padding: 30px 20px 40px;
        transform: rotate(0); /* On supprime la rotation sur mobile pour préserver la lisibilité */
    }
}

/* --- OPTIMISATION RESPONSIVE MOBILE (Section Soirée / Journey) --- */

@media (max-width: 768px) {
    #soiree.journey-section {
        padding: 50px 0; /* Plus compact pour le mobile */
        overflow: hidden; /* Sécurité anti-débordement */
    }

    #soiree .soiree-container {
        padding: 0 20px;
    }

    /* En-tête : Centrage et aération */
    #soiree .soiree-header {
        margin-bottom: 40px;
    }

    #soiree .section-title {
        font-size: 1.9rem;
        line-height: 1.2;
    }

    #soiree .subtitle-wine {
        font-size: 1.25rem;
        margin-top: 8px;
    }

    #soiree .header-dot {
        margin: 20px auto 0;
    }

    /* --- La Frise Chronologique Verticale --- */
    #soiree .journey-track {
        flex-direction: column;
        align-items: flex-start;
        gap: 35px;
        padding-left: 10px; /* Espace pour la ligne à gauche */
        margin-bottom: 60px;
    }

    /* La ligne connectrice devient verticale */
    #soiree .journey-track::before {
        top: 0;
        bottom: 0;
        left: 30px; /* Aligné pile au centre des marqueurs de 60px */
        width: 2px;
        height: 100%;
        background: linear-gradient(180deg, var(--wine), var(--purple), var(--dark));
        opacity: 0.15;
    }

    #soiree .journey-node {
        flex-direction: row; /* Icône à gauche, texte à droite */
        text-align: left;
        align-items: flex-start;
        gap: 20px;
        width: 100%;
    }

    /* Marqueurs : On les réduit un peu pour le mobile */
    #soiree .node-marker {
        width: 50px;
        height: 50px;
        flex-shrink: 0; /* Empêche l'icône de s'écraser */
        margin-bottom: 0;
        z-index: 2;
        background: var(--white); /* Masque la ligne derrière */
        border-width: 2px;
    }

    /* Ajustement de la ligne pour le nouveau centre (50px / 2 = 25px) */
    #soiree .journey-track::before {
        left: 25px;
    }

    #soiree .node-icon {
        font-size: 1rem;
    }

    #soiree .node-content {
        padding: 0;
        padding-top: 5px;
    }

    #soiree .node-title {
        font-size: 1.3rem;
        margin-bottom: 8px;
    }

    #soiree .node-desc {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    #soiree .node-desc strong {
        margin-bottom: 3px;
    }

    /* Désactivation du hover pour le tactile */
    #soiree .journey-node:hover .node-marker {
        transform: none;
    }

    /* --- Le Polaroid Mobile --- */
    #soiree .keepsake-wrapper {
        padding: 0;
    }

    #soiree .polaroid-frame {
        padding: 30px 20px 40px;
        border-radius: 2px;
        transform: rotate(0); /* On supprime l'inclinaison pour éviter de couper les bords */
        max-width: 100%;
        box-shadow: 0 15px 30px rgba(30, 16, 54, 0.1);
    }

    #soiree .polaroid-frame:hover {
        transform: none; /* Stabilité tactile */
    }

    #soiree .polaroid-header {
        flex-direction: column;
        gap: 10px;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    #soiree .camera-icon {
        font-size: 1.5rem;
    }

    #soiree .polaroid-title {
        font-size: 1.4rem;
        text-align: center;
    }

    #soiree .polaroid-text {
        font-size: 1.05rem;
        line-height: 1.6;
    }
}

/* Optimisation pour les écrans très étroits (iPhone SE / mini) */
@media (max-width: 380px) {
    #soiree .section-title {
        font-size: 1.7rem;
    }

    #soiree .journey-track {
        padding-left: 0;
    }

    #soiree .node-marker {
        width: 40px;
        height: 40px;
    }

    #soiree .journey-track::before {
        left: 20px;
    }

    #soiree .node-title {
        font-size: 1.15rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-ab4d6de *//* --- Base City Night --- */
#ville.city-night-section {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}

#ville .ville-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* --- En-tête --- */
#ville .city-header {
    text-align: center;
    margin-bottom: clamp(50px, 8vw, 80px);
}

#ville .city-kicker {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.1);
    color: #000;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

#ville .section-title {
    margin: 0 0 10px 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: #000;
    font-weight: 900;
    letter-spacing: -0.02em;
}

#ville .subtitle-lavender {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    color: #000;
    font-style: italic;
    opacity: 0.9;
}

/* --- Grille des Tickets --- */
#ville .ticket-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 70px;
}

/* Design du Ticket VIP */
#ville .ticket-card {
    display: flex;
    background: var(--white);
    border-radius: 20px;
    color: var(--dark);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: transform 0.3s ease;
}

#ville .ticket-card:hover {
    transform: translateY(-5px) scale(1.01);
}

/* Le Talon du ticket (gauche) */
#ville .ticket-stub {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    flex-shrink: 0;
    border-right: 3px dashed var(--lavender); /* Ligne de découpe perforée */
    position: relative;
    background: #fdfcfd;
}

/* Effet d'encoche en haut et en bas de la ligne perforée */
#ville .ticket-stub::before,
#ville .ticket-stub::after {
    content: '';
    position: absolute;
    right: -12px;
    width: 24px;
    height: 24px;
    background: var(--dark);
    border-radius: 50%;
}
#ville .ticket-stub::before { top: -12px; }
#ville .ticket-stub::after { bottom: -12px; }

#ville .ticket-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 4px 8px rgba(110, 27, 137, 0.15));
}

/* Corps du ticket (droite) */
#ville .ticket-details {
    padding: clamp(25px, 4vw, 40px);
    flex-grow: 1;
}

#ville .ticket-title {
    margin: 0 0 15px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 800;
}

#ville .purple-ticket .ticket-title { color: var(--purple); }
#ville .wine-ticket .ticket-title { color: var(--wine); }

#ville .ticket-desc {
    margin: 0 0 20px 0;
    font-size: 1.05rem;
    line-height: 1.65;
    opacity: 0.9;
}

#ville .ticket-desc strong {
    color: var(--purple);
    font-weight: 800;
}

#ville .ticket-desc a {
    color: var(--wine);
    text-decoration: none;
    border-bottom: 2px solid var(--border-lux);
    font-weight: 700;
    transition: border-color 0.3s;
}
#ville .ticket-desc a:hover { border-bottom-color: var(--wine); }

/* Blocs d'action et d'alerte dans les tickets */
#ville .ticket-action {
    background: var(--lavender);
    color: var(--purple);
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
}
#ville .ticket-action a {
    color: var(--purple);
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px dotted var(--purple);
}

#ville .ticket-warning {
    background: #fff1f4;
    color: var(--wine);
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    border-left: 4px solid var(--wine);
}

/* --- L'Astuce Clemy (Cinematic Billboard) --- */
#ville .clemy-billboard {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: clamp(35px, 5vw, 50px);
    text-align: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* Le faisceau de lumière interne */
#ville .billboard-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(138, 21, 56, 0.3) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

#ville .billboard-content {
    position: relative;
    z-index: 1;
}

#ville .billboard-badge {
    display: inline-block;
    background: linear-gradient(90deg, var(--wine), var(--purple));
    color: var(--white);
    padding: 6px 20px;
    border-radius: 100px;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(138, 21, 56, 0.4);
}

#ville .billboard-text {
    margin: 0;
    font-size: clamp(1.1rem, 3vw, 1.25rem);
    line-height: 1.7;
    color: #000;
}

#ville .billboard-text strong {
    color: var(--white);
    font-weight: 800;
    background: linear-gradient(120deg, rgba(138, 21, 56, 0.4) 0%, transparent 100%);
    padding: 0 4px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    #ville .ticket-card {
        flex-direction: column; /* Le ticket s'empile sur mobile */
    }
    #ville .ticket-stub {
        width: 100%;
        border-right: none;
        border-bottom: 3px dashed var(--lavender);
        padding: 20px;
    }
    
    /* On déplace les encoches pour le format horizontal */
    #ville .ticket-stub::before,
    #ville .ticket-stub::after {
        bottom: -12px;
        right: auto;
    }
    #ville .ticket-stub::before { left: -12px; top: auto; }
    #ville .ticket-stub::after { right: -12px; top: auto; }
}

/* --- OPTIMISATION RESPONSIVE MOBILE (Section City Night #ville) --- */

@media (max-width: 768px) {
    #ville.city-night-section {
        padding: 60px 0;
        /* Si le fond est censé être sombre pour le côté "Night", on s'assure du contraste ici */
        background-color: var(--dark); 
    }

    #ville .ville-container {
        padding: 0 20px;
    }

    /* En-tête : Recentrage pour l'impact "Billboard" */
    #ville .city-header {
        margin-bottom: 45px;
    }

    #ville .section-title {
        font-size: 2rem;
        line-height: 1.15;
        color : #fff;
    }

    #ville .city-kicker {
        font-size: 0.7rem;
        letter-spacing: 2px;
        padding: 5px 12px;
        color: #fff;
    }
    
    #ville .subtitle-lavender {
     color : #fff;   
    }

    /* --- Grille et Cartes Tickets --- */
    #ville .ticket-grid {
        gap: 25px;
    }

    #ville .ticket-card {
        flex-direction: column; /* On empile la souche et le corps */
        border-radius: 16px;
    }

    #ville .ticket-card:hover {
        transform: translateY(-3px); /* Hover plus doux sur mobile */
    }

    /* Le Talon (Stub) : Devient le bandeau supérieur */
    #ville .ticket-stub {
        width: 100%;
        height: 60px; /* Hauteur fixe pour la souche en haut */
        border-right: none;
        border-bottom: 3px dashed var(--lavender);
        padding: 10px;
        background: #fdfcfd;
    }

    /* Repositionnement des Encoches (Perforations) pour le format vertical */
    #ville .ticket-stub::before,
    #ville .ticket-stub::after {
        top: auto;
        bottom: -12px; /* Centré sur la ligne de pointillés horizontale */
        right: auto;
        background: var(--dark); /* Doit correspondre à la couleur de fond de la section */
    }

    #ville .ticket-stub::before { left: -12px; } /* Encoche gauche */
    #ville .ticket-stub::after { right: -12px; } /* Encoche droite */

    #ville .ticket-icon {
        font-size: 2rem;
    }

    /* Corps du ticket */
    #ville .ticket-details {
        padding: 25px 20px;
        text-align: center;
    }

    #ville .ticket-title {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }

    #ville .ticket-desc {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Action & Warning en pleine largeur */
    #ville .ticket-action,
    #ville .ticket-warning {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-top: 15px;
    }

    /* --- Billboard (L'Astuce Clemy) --- */
    #ville .clemy-billboard {
        padding: 35px 20px;
        border-radius: 20px;
        margin-top: 20px;
    }

    #ville .billboard-glow {
        width: 100%; /* Le halo baigne tout le bloc sur mobile */
        opacity: 0.4;
    }

    #ville .billboard-badge {
        font-size: 0.9rem;
        padding: 5px 15px;
        margin-bottom: 15px;
    }

    #ville .billboard-text {
        font-size: 1.05rem;
        line-height: 1.6;
        color : #fff;
    }
}

/* Optimisation pour les écrans ultra-compacts (iPhone SE / mini) */
@media (max-width: 380px) {
    #ville .section-title {
        font-size: 1.7rem;
    }
    
    #ville .ticket-title {
        font-size: 1.2rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2ab0919 *//* --- Base Data Section --- */
#chiffres.data-section {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}

#chiffres .data-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- En-tête --- */
#chiffres .data-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: clamp(50px, 8vw, 70px);
}

#chiffres .data-accent {
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--wine), var(--purple));
    margin-bottom: 20px;
}

#chiffres .section-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: var(--dark);
    font-weight: 900;
    line-height: 1.2;
}

#chiffres .title-wine {
    color: var(--wine);
    font-style: italic;
    font-weight: 400;
}

/* --- Grille des Datas --- */
#chiffres .data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

#chiffres .data-card {
    background: var(--white);
    border: 1px solid var(--border-lux);
    border-radius: 24px;
    padding: 35px 30px;
    box-shadow: 0 10px 30px rgba(110, 27, 137, 0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#chiffres .data-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(110, 27, 137, 0.08);
    border-color: rgba(110, 27, 137, 0.25);
}

/* Badges catégoriels */
#chiffres .card-head {
    margin-bottom: 25px;
}

#chiffres .data-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#chiffres .purple-badge { background: var(--lavender); color: var(--purple); }
#chiffres .wine-badge { background: #fff1f4; color: var(--wine); }
#chiffres .dark-badge { background: #f0f0f5; color: var(--dark); }

/* Typographie Héroïque pour les chiffres */
#chiffres .hero-stat {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 15px;
    background: linear-gradient(135deg, var(--wine), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}

#chiffres .stat-unit {
    font-size: 1.5rem;
    font-weight: 700;
}

#chiffres .data-context {
    margin: 0 0 25px 0;
    font-size: 1.05rem;
    color: var(--dark);
    line-height: 1.6;
    opacity: 0.9;
}

/* Liste de détails clean */
#chiffres .data-breakdown {
    margin: 0 0 30px 0;
    padding: 0;
    list-style: none;
    flex-grow: 1;
}

#chiffres .data-breakdown li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.5;
    opacity: 0.85;
}

#chiffres .bullet {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
#chiffres .purple-bullet { background: var(--purple); }
#chiffres .wine-bullet { background: var(--wine); }
#chiffres .dark-bullet { background: var(--dark); }

/* Sources stylisées */
#chiffres .data-source {
    font-size: 0.8rem;
    color: var(--dark);
    opacity: 0.6;
    border-top: 1px solid var(--border-lux);
    padding-top: 15px;
}

#chiffres .data-source a {
    color: var(--purple);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

#chiffres .data-source a:hover {
    color: var(--wine);
    text-decoration: underline;
}

/* --- Panel Insight (Le saviez-vous) --- */
#chiffres .insight-panel {
    display: flex;
    align-items: center;
    gap: 25px;
    background: linear-gradient(135deg, #fcfbfd 0%, var(--lavender) 100%);
    border: 1px solid rgba(110, 27, 137, 0.15);
    border-radius: 24px;
    padding: clamp(30px, 5vw, 40px);
    box-shadow: 0 15px 35px rgba(110, 27, 137, 0.05);
}

#chiffres .insight-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    background: var(--white);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(110, 27, 137, 0.08);
}

#chiffres .insight-content {
    flex-grow: 1;
}

#chiffres .insight-title {
    margin: 0 0 10px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--purple);
    font-weight: 800;
}

#chiffres .insight-text {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--dark);
}

#chiffres .highlight-stat {
    font-size: 1.3rem;
    color: var(--wine);
    font-weight: 900;
    font-family: 'Playfair Display', serif;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    #chiffres .insight-panel {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
}

/* --- OPTIMISATION RESPONSIVE MOBILE (Section Data #chiffres) --- */

@media (max-width: 768px) {
    #chiffres.data-section {
        padding: 50px 0; /* Plus de punch, moins de vide */
    }

    #chiffres .data-container {
        padding: 0 20px;
    }

    /* En-tête : Centrage parfait */
    #chiffres .data-header {
        margin-bottom: 40px;
    }

    #chiffres .data-accent {
        width: 40px; /* On affine le trait */
        margin-bottom: 15px;
    }

    #chiffres .section-title {
        font-size: 1.85rem;
        line-height: 1.2;
    }

    /* Grille : On force l'empilement vertical propre */
    #chiffres .data-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }

    /* Cartes de données : On réduit les paddings pour gagner de l'espace texte */
    #chiffres .data-card {
        padding: 25px 20px;
        border-radius: 20px;
        text-align: center; /* Centrage pour un look "Scorecard" */
        align-items: center;
    }

    /* Chiffres Héroïques : On s'assure qu'ils ne débordent jamais */
    #chiffres .hero-stat {
        font-size: 2.8rem; /* Réduction pour les écrans étroits */
        margin-bottom: 10px;
    }

    #chiffres .stat-unit {
        font-size: 1.2rem;
    }

    #chiffres .data-context {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }

    /* Liste de détails : Alignement à gauche pour la clarté de lecture */
    #chiffres .data-breakdown {
        width: 100%;
        text-align: left;
        margin-bottom: 25px;
    }

    #chiffres .data-breakdown li {
        font-size: 0.9rem;
        gap: 10px;
    }

    /* Désactivation du Hover Translate (Stabilité tactile) */
    #chiffres .data-card:hover {
        transform: none;
    }

    /* --- Panel Insight (Le saviez-vous) Mobile --- */
    #chiffres .insight-panel {
        flex-direction: column; /* Déjà amorcé, on peaufine */
        padding: 30px 20px;
        gap: 15px;
        border-radius: 20px;
        text-align: center;
    }

    #chiffres .insight-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
        margin: 0 auto;
    }

    #chiffres .insight-title {
        font-size: 1.25rem;
        margin-bottom: 8px;
    }

    #chiffres .insight-text {
        font-size: 1rem;
        line-height: 1.5;
    }

    #chiffres .highlight-stat {
        font-size: 1.15rem;
    }
}

/* Optimisation pour les terminaux ultra-fins (iPhone SE / mini) */
@media (max-width: 380px) {
    #chiffres .section-title {
        font-size: 1.6rem;
    }

    #chiffres .hero-stat {
        font-size: 2.4rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-d29cb13 *//* --- Base Finale Section --- */
#conclusion.finale-section {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}

/* Conteneur plus étroit pour un confort de lecture optimal */
#conclusion .finale-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- En-tête --- */
#conclusion .finale-kicker {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--purple);
    margin-bottom: 20px;
}

#conclusion .section-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 6vw, 4rem); /* Typographie géante assumée */
    color: var(--dark);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

#conclusion .title-wine {
    color: var(--wine);
    font-style: italic;
    font-weight: 400;
}

#conclusion .finale-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--wine), var(--purple));
    margin: 40px auto;
    border-radius: 2px;
}

/* --- Le Message --- */
#conclusion .finale-text {
    font-size: clamp(1.15rem, 3vw, 1.35rem);
    line-height: 1.8;
    color: var(--dark);
    opacity: 0.9;
    margin-bottom: 70px;
}

#conclusion .finale-text strong {
    color: var(--purple);
    font-weight: 800;
    border-bottom: 2px solid var(--lavender);
}

/* --- La Carte d'Engagement (Le Rideau de Velours final) --- */
#conclusion .vow-card {
    position: relative;
    background: linear-gradient(135deg, var(--wine) 0%, #4a091d 100%); /* Plongée dans un lie de vin très profond */
    border-radius: 32px;
    padding: clamp(40px, 6vw, 70px) 20px;
    color: var(--white);
    box-shadow: 0 30px 60px rgba(138, 21, 56, 0.25);
    overflow: hidden;
}

/* Halo doux à l'intérieur de la carte */
#conclusion .vow-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(243, 229, 245, 0.1) 0%, transparent 60%); /* Lumière issue de var(--lavender) */
    pointer-events: none;
    z-index: 0;
}

#conclusion .vow-inner {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

#conclusion .vow-icon {
    display: inline-block;
    font-size: 2.5rem;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}

#conclusion .vow-title {
    margin: 0 0 20px 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    color: var(--lavender);
    font-weight: 800;
    letter-spacing: 0.02em;
}

#conclusion .vow-text {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

/* La Citation d'engagement (Mise en valeur sculpturale) */
#conclusion .vow-quote {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    color: var(--white);
    font-style: italic;
    font-weight: 700;
    margin: 35px 0;
    line-height: 1.5;
    position: relative;
}

/* Les options (créativité, transmission...) en plus discret */
#conclusion .vow-options {
    display: block;
    margin-top: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.7;
    font-style: normal;
    letter-spacing: 0.5px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    #conclusion .vow-card {
        border-radius: 24px;
    }
}

/* --- OPTIMISATION RESPONSIVE MOBILE (Section Finale #conclusion) --- */

@media (max-width: 768px) {
    #conclusion.finale-section {
        padding: 50px 0; /* Plus compact pour finir sur une note dynamique */
    }

    #conclusion .finale-container {
        padding: 0 20px;
        text-align: center; /* Centrage global pour la solennité */
    }

    /* En-tête : Recentrage de la typographie géante */
    #conclusion .finale-kicker {
        font-size: 0.75rem;
        letter-spacing: 3px;
        margin-bottom: 15px;
    }

    #conclusion .section-title {
        font-size: 2.1rem; /* On stabilise le Playfair Display */
        line-height: 1.15;
    }

    #conclusion .finale-divider {
        width: 40px; /* Séparateur plus discret */
        margin: 30px auto;
    }

    /* Message de fin */
    #conclusion .finale-text {
        font-size: 1.1rem;
        line-height: 1.7;
        margin-bottom: 50px;
        text-align: center;
    }

    /* --- La Carte d'Engagement (Vow Card) --- */
    #conclusion .vow-card {
        padding: 45px 20px;
        border-radius: 28px;
        box-shadow: 0 20px 40px rgba(138, 21, 56, 0.2);
    }

    #conclusion .vow-inner {
        max-width: 100%;
    }

    #conclusion .vow-icon {
        font-size: 2.2rem;
        margin-bottom: 15px;
    }

    #conclusion .vow-title {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }

    #conclusion .vow-text {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* La Citation Mobile */
    #conclusion .vow-quote {
        font-size: 1.35rem;
        margin: 30px 0;
        line-height: 1.4;
    }

    /* Options discrètes */
    #conclusion .vow-options {
        font-size: 0.85rem;
        opacity: 0.6;
        letter-spacing: 0.3px;
    }
}

/* Optimisation pour les écrans ultra-fins (iPhone SE / mini) */
@media (max-width: 380px) {
    #conclusion .section-title {
        font-size: 1.8rem;
    }

    #conclusion .vow-title {
        font-size: 1.4rem;
    }

    #conclusion .vow-quote {
        font-size: 1.2rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-661149c6 *//* --- Base FAQ Section --- */
#faq.faq-section {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #8A1538;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.15);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dark);
    line-height: 1.6;
    overflow-x: clip; 
}

#faq .faq-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- En-tête --- */
#faq .faq-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: clamp(40px, 6vw, 60px);
}

#faq .faq-accent {
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: var(--dark);
    margin-bottom: 20px;
}

#faq .section-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: var(--dark);
    font-weight: 900;
}

#faq .title-light {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: var(--dark);
    opacity: 0.6;
    font-weight: 400;
    margin-top: 10px;
}

/* --- Accordéon FAQ --- */
#faq .faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 80px;
}

/* Nettoyage du style natif */
#faq .faq-item summary {
    list-style: none; /* Cache la flèche par défaut */
}
#faq .faq-item summary::-webkit-details-marker {
    display: none; /* Cache la flèche sur Safari/Chrome */
}

/* Design de la carte FAQ */
#faq .faq-item {
    background: var(--white);
    border: 1px solid var(--border-lux);
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(30, 16, 54, 0.03);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

#faq .faq-item:hover {
    box-shadow: 0 10px 25px rgba(30, 16, 54, 0.08);
}

/* Bordures latérales dynamiques */
#faq .border-purple { border-left: 6px solid var(--purple); }
#faq .border-wine { border-left: 6px solid var(--wine); }
#faq .border-dark { border-left: 6px solid var(--dark); }

/* La Question (Zone cliquable) */
#faq .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    user-select: none;
    transition: background-color 0.3s ease;
}

#faq .faq-item[open] .faq-question {
    background-color: #fcfbfd; /* Léger fond quand c'est ouvert */
}

/* L'icône + / - Custom animée */
#faq .faq-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 15px;
}

#faq .faq-icon::before,
#faq .faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--purple);
    transition: transform 0.3s ease;
}

#faq .faq-icon::before {
    width: 20px;
    height: 2px;
}

#faq .faq-icon::after {
    width: 2px;
    height: 20px;
}

/* Animation vers le signe MOINS quand la FAQ est ouverte */
#faq .faq-item[open] .faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* La Réponse */
#faq .faq-answer {
    padding: 0 24px 24px 24px;
    color: var(--dark);
    line-height: 1.7;
    font-size: 1.05rem;
    opacity: 0.85;
    animation: fadeInDown 0.4s ease forwards;
}

#faq .faq-answer p { margin: 0; }
#faq .faq-answer em { color: var(--wine); font-weight: 600; }

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 0.85; transform: translateY(0); }
}

/* --- CTAs Mystiques (Consultations) --- */
#faq .mystic-ctas-wrapper {
    background: linear-gradient(135deg, var(--dark) 0%, #2a1b4a 100%);
    border-radius: 32px;
    padding: clamp(40px, 6vw, 60px) clamp(20px, 4vw, 50px);
    text-align: center;
    color: var(--white);
    box-shadow: 0 25px 50px rgba(30, 16, 54, 0.2);
    position: relative;
    overflow: hidden;
}

/* Lueur d'arrière plan */
#faq .mystic-ctas-wrapper::before {
    content: '';
    position: absolute;
    top: -50%; left: 50%;
    transform: translateX(-50%);
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(110, 27, 137, 0.4) 0%, transparent 70%);
    pointer-events: none;
}

#faq .cta-header {
    position: relative;
    z-index: 1;
    margin-bottom: 40px;
}

#faq .cta-eyebrow {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    color: var(--lavender);
}

#faq .cta-title {
    margin: 0 0 10px 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
}

#faq .cta-desc {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Boutons d'action */
#faq .cta-buttons-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

#faq .premium-cta {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 25px;
    border-radius: 20px;
    text-decoration: none;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#faq .premium-cta:hover {
    transform: translateY(-5px);
}

#faq .cta-icon-ring {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

#faq .cta-text-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#faq .cta-main-text {
    font-size: 1.15rem;
    font-weight: 800;
}

#faq .cta-sub-text {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Style spécifique Téléphone (Urgence/Chaleur) */
#faq .cta-phone {
    background: var(--wine);
    color: var(--white);
    box-shadow: 0 10px 30px rgba(138, 21, 56, 0.3);
    border: 1px solid rgba(255,255,255,0.1);
}
#faq .cta-phone .cta-icon-ring {
    background: rgba(255,255,255,0.2);
}
#faq .cta-phone:hover {
    box-shadow: 0 15px 40px rgba(138, 21, 56, 0.5);
}

/* Style spécifique Mail (Réflexion/Douceur) */
#faq .cta-mail {
    background: var(--lavender);
    color: var(--purple);
    box-shadow: 0 10px 30px rgba(110, 27, 137, 0.15);
}
#faq .cta-mail .cta-icon-ring {
    background: var(--white);
    color: var(--purple);
}
#faq .cta-mail:hover {
    box-shadow: 0 15px 40px rgba(110, 27, 137, 0.25);
}

/* --- Responsive --- */
@media (max-width: 600px) {
    #faq .cta-buttons-grid {
        grid-template-columns: 1fr;
    }
}

/* --- OPTIMISATION RESPONSIVE MOBILE (Section FAQ & CTAs) --- */

@media (max-width: 768px) {
    #faq.faq-section {
        padding: 50px 0; /* Plus compact pour le mobile */
    }

    #faq .faq-container {
        padding: 0 20px;
    }

    /* En-tête : Recentrage et équilibre */
    #faq .faq-header {
        margin-bottom: 40px;
    }

    #faq .faq-accent {
        width: 40px; /* On affine le trait */
        margin-bottom: 15px;
    }

    #faq .section-title {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    #faq .title-light {
        font-size: 1rem;
        margin-top: 8px;
    }

    /* Accordéon : On optimise l'espace interne */
    #faq .faq-accordion {
        gap: 12px;
        margin-bottom: 60px;
    }

    #faq .faq-item {
        border-radius: 12px;
    }

    /* Les bordures de couleurs (Purple, Wine, Dark) sont conservées car elles aident au scan visuel */

    #faq .faq-question {
        padding: 20px 15px;
        font-size: 1rem;
        line-height: 1.4;
    }

    #faq .faq-icon {
        width: 16px;
        height: 16px;
        margin-left: 10px;
    }

    #faq .faq-icon::before { width: 16px; }
    #faq .faq-icon::after { height: 16px; }

    #faq .faq-answer {
        padding: 0 15px 20px 15px;
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* --- Zone de Consultations (CTAs Mystiques) --- */
    #faq .mystic-ctas-wrapper {
        padding: 45px 20px;
        border-radius: 24px;
    }

    #faq .cta-header {
        margin-bottom: 30px;
    }

    #faq .cta-title {
        font-size: 1.6rem;
    }

    #faq .cta-desc {
        font-size: 1rem;
    }

    /* Grille de boutons : On force la colonne unique */
    #faq .cta-buttons-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    #faq .premium-cta {
        padding: 15px 18px;
        border-radius: 16px;
        gap: 12px;
    }

    /* On annule le hover "translate" pour éviter les bugs tactiles */
    #faq .premium-cta:hover {
        transform: none;
    }

    #faq .cta-icon-ring {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    #faq .cta-main-text {
        font-size: 1.05rem;
    }

    #faq .cta-sub-text {
        font-size: 0.8rem;
    }
}

/* Optimisation pour les écrans ultra-fins (iPhone SE / mini) */
@media (max-width: 380px) {
    #faq .section-title {
        font-size: 1.6rem;
    }

    #faq .faq-question {
        font-size: 0.95rem;
    }

    #faq .cta-title {
        font-size: 1.4rem;
    }
}/* End custom CSS */