.elementor-4652 .elementor-element.elementor-element-69610e2{--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 );}.elementor-4652 .elementor-element.elementor-element-c817e43{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for text-editor, class: .elementor-element-e7dad93 */#ux-oracle-intro {
    --amethyst: #6d28d9;
    --wine: #8a1538;
    --white: #ffffff;
    --text-dark: #2d2d2d;
    --glass-bg: rgba(255, 255, 255, 0.8);
    
    padding-bottom: 100px;
    background-color: #fafafa;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--text-dark);
}

#ux-oracle-intro .ux-container { max-width: 1050px; margin: 0 auto; padding: 0 20px; }

/* --- NAV ISLAND --- */
#ux-oracle-intro .ux-nav-island {
    position: sticky; top: 20px; z-index: 100; margin-bottom: 80px;
}
#ux-oracle-intro .ux-nav-container {
    background: var(--glass-bg); backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.4); border-radius: 100px;
    padding: 10px 25px; display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 15px 40px rgba(109, 40, 217, 0.05);
}

#ux-oracle-intro .ux-dot-pulse {
    width: 8px; height: 8px; background: var(--amethyst); border-radius: 50%;
    margin-right: 10px; display: inline-block; box-shadow: 0 0 10px var(--amethyst);
}

#ux-oracle-intro .ux-sommaire a {
    text-decoration: none; font-size: 0.85rem; font-weight: 700; color: #666;
    padding: 8px 15px; transition: 0.3s;
}
#ux-oracle-intro .ux-sommaire a:hover { color: var(--amethyst); }

/* --- HERO --- */
#ux-oracle-intro .ux-hero-oracle { text-align: center; margin-bottom: 60px; }
#ux-oracle-intro .ux-badge-zen {
    display: inline-block; padding: 6px 20px; background: #e1bee7; color: #7b1fa2;
    border-radius: 50px; font-size: 0.75rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: 2px; margin-bottom: 30px;
}
#ux-oracle-intro .ux-h1-stellar {
    font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 950; line-height: 1.1; letter-spacing: -2px;
}
#ux-oracle-intro .ux-text-gradient {
    background: linear-gradient(135deg, var(--amethyst), var(--wine));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* --- FROSTED CARD (LE WAHOU) --- */
#ux-oracle-intro .ux-frosted-card {
    position: relative; border-radius: 40px; padding: 3px; /* Border-gradient effect */
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.2), rgba(138, 21, 56, 0.2));
    box-shadow: 0 40px 100px rgba(0,0,0,0.06);
}

#ux-oracle-intro .ux-card-inner {
    background: #ffffff; border-radius: 38px; padding: 60px; position: relative; overflow: hidden;
}

/* Abstract Background Glow */
#ux-oracle-intro .ux-card-glow {
    position: absolute; top: -100px; right: -100px; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(109, 40, 217, 0.05) 0%, transparent 70%);
}

#ux-oracle-intro .ux-main-narrative { line-height: 1.8; font-size: 1.1rem; }
#ux-oracle-intro .ux-p-lead { font-size: 1.25rem; font-weight: 500; color: #222; margin-bottom: 40px; }

#ux-oracle-intro .ux-signal-box {
    display: flex; gap: 30px; margin: 40px 0; padding: 30px;
    background: #fdfbff; border-radius: 25px; border-left: 8px solid var(--amethyst);
}
#ux-oracle-intro .ux-signal-box p { font-style: italic; color: #555; margin: 0; }

#ux-oracle-intro .ux-p-final { font-size: 1.15rem; font-weight: 600; color: var(--text-dark); margin-top: 40px; }

/* --- RESPONSIVE --- */
@media (max-width: 850px) {
    #ux-oracle-intro .ux-nav-container { border-radius: 20px; padding: 15px; }
    #ux-oracle-intro .ux-sommaire { display: none; }
    #ux-oracle-intro .ux-card-inner { padding: 40px 25px; }
    #ux-oracle-intro .ux-signal-box { flex-direction: column; gap: 15px; }
}@media (max-width: 768px) {
    /* ============================================================
   FORCE RESPONSIVE RADICAL : ORACLE INTRO (#ux-oracle-intro)
   ============================================================ */

    /* 1. RESET GLOBAL & SECTION */
    #ux-oracle-intro {
        padding-bottom: 60px !important;
        overflow-x: hidden !important;
    }

    #ux-oracle-intro .ux-container {
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. NAV ISLAND (L'ÉLÉGANCE DOCKÉE) */
    #ux-oracle-intro .ux-nav-island {
        top: 10px !important;
        margin-bottom: 40px !important;
    }

    #ux-oracle-intro .ux-nav-container {
        padding: 10px 20px !important;
        justify-content: center !important; /* Centrage royal du nom/dot */
        border-radius: 50px !important;
    }

    #ux-oracle-intro .ux-sommaire {
        display: none !important; /* Focus total sur le titre du dossier */
    }

    /* 3. HERO (L'IMPACT DU TITRE) */
    #ux-oracle-intro .ux-hero-oracle {
        margin-bottom: 35px !important;
    }

    #ux-oracle-intro .ux-badge-zen {
        font-size: 0.65rem !important;
        padding: 6px 15px !important;
        margin-bottom: 20px !important;
    }

    #ux-oracle-intro .ux-h1-stellar {
        font-size: 1.85rem !important;
        line-height: 1.2 !important;
        letter-spacing: -1px !important;
        padding: 0 10px;
    }

    /* 4. FROSTED CARD (LE COCON DE LECTURE) */
    #ux-oracle-intro .ux-frosted-card {
        border-radius: 30px !important;
        margin: 0 5px !important;
    }

    #ux-oracle-intro .ux-card-inner {
        padding: 35px 20px !important; /* On libère l'espace de lecture */
        border-radius: 28px !important;
    }

    #ux-oracle-intro .ux-card-glow {
        width: 250px !important; /* On réduit le halo pour ne pas "blanchir" le texte */
        height: 250px !important;
        top: -50px !important;
        right: -50px !important;
    }

    /* 5. NARRATIVE & SIGNAL BOX (LA CLARTÉ) */
    #ux-oracle-intro .ux-p-lead {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    #ux-oracle-intro .ux-main-narrative {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }

    #ux-oracle-intro .ux-signal-box {
        padding: 25px 15px !important;
        border-left: none !important;
        border-top: 6px solid var(--amethyst) !important; /* L'accent passe en tête */
        border-radius: 20px !important;
        text-align: center !important;
        margin: 30px 0 !important;
    }

    #ux-oracle-intro .ux-p-final {
        font-size: 1.05rem !important;
        text-align: center !important;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-8000582 */#ux-vibratory-tuning {
    --amethyst: #6d28d9;
    --wine: #8a1538;
    --text-main: #333333;
    --light-bg: #fdfbff;
    
    padding: 100px 20px;
    background-color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    overflow: hidden;
}

#ux-vibratory-tuning .ux-container { max-width: 1100px; margin: 0 auto; }

/* --- HEADER --- */
#ux-vibratory-tuning .ux-tuning-header { margin-bottom: 60px; position: relative; }
#ux-vibratory-tuning .ux-header-flex { display: flex; align-items: baseline; gap: 20px; }

#ux-vibratory-tuning .ux-num-stroke {
    font-size: 5rem; font-weight: 900; color: transparent;
    -webkit-text-stroke: 1px #e0e0e0; line-height: 1;
}

#ux-vibratory-tuning .ux-tag-micro {
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 3px; color: var(--amethyst); display: block; margin-bottom: 10px;
}

#ux-vibratory-tuning .ux-h2-title { font-size: 2.5rem; font-weight: 800; color: var(--text-main); line-height: 1.1; margin: 0; }
#ux-vibratory-tuning .ux-text-amethyst { color: var(--amethyst); }

#ux-vibratory-tuning .ux-header-line { width: 60px; height: 4px; background: var(--amethyst); margin-top: 25px; border-radius: 2px; }

/* --- LAYOUT --- */
#ux-vibratory-tuning .ux-tuning-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }

#ux-vibratory-tuning .ux-p-lead { font-size: 1.3rem; line-height: 1.6; color: #222; margin-bottom: 30px; font-weight: 500; }

#ux-vibratory-tuning .ux-rational-box {
    padding-left: 30px; border-left: 1px solid #eee; margin-bottom: 40px; color: #666; font-size: 1.05rem; line-height: 1.8;
}

/* LE CONSEIL (L'EFFET WAHOU) */
#ux-vibratory-tuning .ux-advice-vibe {
    background: var(--light-bg); padding: 40px; border-radius: 30px;
    position: relative; box-shadow: 0 20px 40px rgba(109, 40, 217, 0.05);
}

#ux-vibratory-tuning .ux-vibe-visualizer {
    display: flex; gap: 4px; margin-bottom: 20px; height: 20px; align-items: flex-end;
}

#ux-vibratory-tuning .ux-vibe-visualizer span {
    width: 3px; background: var(--amethyst); border-radius: 10px;
    animation: signal-bounce 1.5s infinite ease-in-out;
}
#ux-vibratory-tuning .ux-vibe-visualizer span:nth-child(1) { height: 40%; }
#ux-vibratory-tuning .ux-vibe-visualizer span:nth-child(2) { height: 100%; animation-delay: 0.2s; }
#ux-vibratory-tuning .ux-vibe-visualizer span:nth-child(3) { height: 60%; animation-delay: 0.4s; }
#ux-vibratory-tuning .ux-vibe-visualizer span:nth-child(4) { height: 80%; animation-delay: 0.1s; }

@keyframes signal-bounce { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.5); } }

#ux-vibratory-tuning .ux-advice-content { font-size: 1rem; color: #444; line-height: 1.6; }
#ux-vibratory-tuning .ux-advice-content strong { color: #6a1b9a; }

/* --- VISUAL SIDE --- */
#ux-vibratory-tuning .ux-image-mount { position: relative; padding: 20px; }
#ux-vibratory-tuning .ux-image-mount img { 
    width: 100%; border-radius: 20px; position: relative; z-index: 2; 
    transform: rotate(2deg); filter: grayscale(20%); transition: 0.5s;
}
#ux-vibratory-tuning .ux-image-mount:hover img { transform: rotate(0deg); filter: grayscale(0%); }

#ux-vibratory-tuning .ux-focus-corner {
    position: absolute; width: 40px; height: 40px; border: 2px solid var(--amethyst); z-index: 3; opacity: 0.3;
}
#ux-vibratory-tuning .top-left { top: 0; left: 0; border-right: 0; border-bottom: 0; }
#ux-vibratory-tuning .bottom-right { bottom: 0; right: 0; border-left: 0; border-top: 0; }

#ux-vibratory-tuning .ux-glow-core {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80%; height: 80%; background: var(--amethyst); filter: blur(60px); opacity: 0.1; z-index: 1;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    #ux-vibratory-tuning .ux-tuning-layout { grid-template-columns: 1fr; gap: 50px; }
    #ux-vibratory-tuning .ux-visual-side { order: -1; max-width: 400px; margin: 0 auto; }
}@media (max-width: 768px) {
    /* ============================================================
   FORCE RESPONSIVE RADICAL : TUNING (#ux-vibratory-tuning)
   ============================================================ */

    /* 1. RESET GLOBAL & SECTION */
    #ux-vibratory-tuning {
        padding: 60px 0 80px 0 !important;
        overflow-x: hidden !important;
    }

    #ux-vibratory-tuning .ux-container {
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. HEADER & NUMÉRO (L'AUTORITÉ CENTRÉE) */
    #ux-vibratory-tuning .ux-header-flex {
        flex-direction: column !important; /* Empilement vertical */
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
    }

    #ux-vibratory-tuning .ux-num-stroke {
        font-size: 3.5rem !important; /* Réduction pour l'équilibre mobile */
        margin-bottom: 5px !important;
    }

    #ux-vibratory-tuning .ux-h2-title {
        font-size: 1.85rem !important;
        line-height: 1.2 !important;
        letter-spacing: -1px !important;
        padding: 0 10px;
    }

    #ux-vibratory-tuning .ux-header-line {
        margin: 20px auto 40px !important; /* Centrage de la ligne de force */
    }

    /* 3. LAYOUT & TEXTE (LE FLUX) */
    #ux-vibratory-tuning .ux-tuning-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    #ux-vibratory-tuning .ux-p-lead {
        font-size: 1.1rem !important;
        text-align: center !important;
        line-height: 1.5 !important;
    }

    #ux-vibratory-tuning .ux-rational-box {
        padding-left: 0 !important;
        border-left: none !important;
        border-top: 2px solid #eee !important; /* L'accent passe en tête */
        padding-top: 25px !important;
        text-align: left !important;
        font-size: 0.95rem !important;
    }

    /* 4. VISUAL SIDE (L'IMMERSION PRIORITAIRE) */
    #ux-vibratory-tuning .ux-visual-side {
        order: -1 !important; /* L'image passe en tête pour le "Wahou" */
        max-width: 280px !important;
        margin: 0 auto !important;
    }

    #ux-vibratory-tuning .ux-image-mount img {
        transform: rotate(0deg) !important; /* Nettoyage Retina */
        border-radius: 20px !important;
    }

    #ux-vibratory-tuning .ux-focus-corner {
        width: 30px !important;
        height: 30px !important;
        opacity: 0.5 !important; /* On renforce le focus sur mobile */
    }

    /* 5. ADVICE BOX (LA CAPSULE VIBRANTE) */
    #ux-vibratory-tuning .ux-advice-vibe {
        padding: 30px 20px !important;
        border-radius: 25px !important;
        text-align: center !important;
    }

    #ux-vibratory-tuning .ux-vibe-visualizer {
        justify-content: center !important; /* Centrage des barres d'onde */
        margin-bottom: 25px !important;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-3f11e75 */#ux-cosmic-web, #ux-inner-voice {
    --amethyst: #6d28d9;
    --wine: #8a1538;
    --sky-blue: #29b6f6;
    --deep-purp: #ab47bc;
    --text: #333;
    padding: 100px 20px;
    background: #fff;
    font-family: 'Inter', system-ui, sans-serif;
}

#ux-cosmic-web .ux-container, #ux-inner-voice .ux-container { max-width: 1100px; margin: 0 auto; }

/* --- HEADER STYLE --- */
.ux-header-astral { margin-bottom: 60px; }
.ux-header-flex { display: flex; align-items: baseline; gap: 20px; border-bottom: 2px solid #eee; padding-bottom: 20px; margin-bottom: 30px; }
.ux-num-outline { font-size: 5rem; font-weight: 900; color: transparent; -webkit-text-stroke: 1px #e0e0e0; line-height: 1; }
.ux-h2-title { font-size: 2.5rem; font-weight: 800; color: var(--text); letter-spacing: -1.5px; margin: 0; }
.ux-text-blue { color: var(--sky-blue); }
.ux-text-wine { color: var(--wine); }

/* --- WEB LAYOUT (SECTION 02) --- */
.ux-web-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; position: relative; }

.ux-sync-card { 
    background: #fff; padding: 40px; border-radius: 30px; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.05); position: relative; z-index: 2;
    transition: transform 0.4s;
}
.ux-sync-card:hover { transform: translateY(-10px); }

.ux-card-tag { font-size: 0.7rem; font-weight: 900; letter-spacing: 2px; margin-bottom: 20px; opacity: 0.5; }
.ux-h3-card { font-size: 1.6rem; font-weight: 800; margin-bottom: 20px; }

.ux-card-blue { border-top: 6px solid var(--sky-blue); }
.ux-card-blue .ux-h3-card { color: var(--sky-blue); }

.ux-card-purple { border-top: 6px solid var(--deep-purp); }
.ux-card-purple .ux-h3-card { color: var(--deep-purp); }

.ux-card-footer { margin-top: 25px; padding-top: 20px; border-top: 1px dashed #eee; font-style: italic; font-size: 0.95rem; color: #666; }

/* Image Anchor */
.ux-visual-anchor { text-align: center; margin-top: 60px; position: relative; }
.ux-visual-anchor img { border-radius: 25px; max-width: 400px; width: 100%; position: relative; z-index: 2; }
.ux-image-aura { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; background: radial-gradient(circle, rgba(109, 40, 217, 0.05) 0%, transparent 70%); z-index: 1; }

/* --- DUAL DEPTH (SECTION 03) --- */
.ux-dual-depth { display: flex; flex-direction: column; gap: 40px; }
.ux-depth-panel { 
    display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: center;
    background: #fdfbff; padding: 50px; border-radius: 40px;
}
.ux-depth-panel.ux-day { grid-template-columns: 1.5fr 1fr; background: #fff; border: 1px solid #f0f0f0; }

.ux-panel-visual img { width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); transform: rotate(-2deg); }
.ux-panel-text h3 { font-size: 1.8rem; font-weight: 800; margin-bottom: 20px; }
.ux-night h3 { color: var(--wine); }
.ux-day h3 { color: #00897b; }

.ux-advice-pill { background: #fff; padding: 20px; border-radius: 15px; border-left: 5px solid var(--wine); box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
.ux-insight-box { background: #f1fbf9; padding: 25px; border-radius: 15px; border: 1px solid #d1f2eb; color: #00897b; font-weight: 500; }

/* --- RESPONSIVE --- */
@media (max-width: 800px) {
    .ux-depth-panel, .ux-depth-panel.ux-day { grid-template-columns: 1fr; gap: 30px; padding: 30px 20px; }
    .ux-panel-visual { order: -1; }
    .ux-h2-title { font-size: 1.8rem; }
}@media (max-width: 768px) {
    /* ============================================================
   FORCE RESPONSIVE RADICAL : COSMIC & VOICE (#02 & #03)
   ============================================================ */

    /* 1. RESET GLOBAL SECTIONS */
    #ux-cosmic-web, 
    #ux-inner-voice {
        padding: 60px 0 80px 0 !important;
        overflow-x: hidden !important;
    }

    .ux-container {
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. HEADER ASTRAL (CENTRE DE GRAVITÉ) */
    .ux-header-flex {
        flex-direction: column !important; /* Empilement vertical */
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
        padding-bottom: 25px !important;
    }

    .ux-num-outline {
        font-size: 3.2rem !important; /* Calibrage anti-collision */
        -webkit-text-stroke-width: 1px !important;
        margin-bottom: 5px !important;
    }

    .ux-h2-title {
        font-size: 1.85rem !important;
        line-height: 1.2 !important;
        letter-spacing: -1px !important;
        padding: 0 10px;
    }

    /* 3. SECTION 02 : COSMIC WEB (L'IMPACT VISUEL) */
    .ux-web-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    .ux-sync-card {
        padding: 30px 20px !important; /* Respiration récupérée */
        border-radius: 25px !important;
        text-align: center !important;
        transform: none !important; /* Stabilité tactile Retina */
    }

    .ux-sync-card:hover {
        transform: none !important; /* On évite le jitter au scroll */
    }

    .ux-visual-anchor {
        margin-top: 45px !important;
    }

    .ux-image-aura {
        width: 100% !important; /* On évite l'overflow horizontal */
        height: 100% !important;
        opacity: 0.1 !important; /* Un peu plus visible sur mobile */
    }

    /* 4. SECTION 03 : DUAL DEPTH (LE FLUX NARRATIF) */
    .ux-dual-depth {
        gap: 30px !important;
    }

    .ux-depth-panel, 
    .ux-depth-panel.ux-day {
        display: flex !important;
        flex-direction: column !important; /* Stack vertical strict */
        gap: 35px !important;
        padding: 35px 20px !important;
        border-radius: 30px !important;
    }

    .ux-panel-visual {
        order: -1 !important; /* L'image passe toujours en tête sur mobile */
        max-width: 280px !important;
        margin: 0 auto !important;
    }

    .ux-panel-visual img {
        transform: rotate(0deg) !important; /* Nettoyage des bords sur smartphone */
        border-radius: 20px !important;
    }

    .ux-panel-text {
        text-align: center !important;
    }

    .ux-panel-text h3 {
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
    }

    .ux-advice-pill, 
    .ux-insight-box {
        text-align: left !important; /* Confort de lecture maintenu pour les conseils */
        padding: 20px !important;
        font-size: 0.95rem !important;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-58105e2 */#ux-living-axis {
    --nature-green: #4caf50;
    --encounter-orange: #ff9800;
    --amethyst: #6d28d9;
    --wine: #8a1538;
    --text-dark: #333333;
    
    padding: 100px 20px;
    background-color: #ffffff;
    font-family: 'Inter', system-ui, sans-serif;
    overflow: hidden;
}

#ux-living-axis .ux-container { max-width: 1100px; margin: 0 auto; }

/* --- HEADER --- */
#ux-living-axis .ux-axis-header { margin-bottom: 80px; }
#ux-living-axis .ux-header-flex { display: flex; align-items: center; gap: 20px; }

#ux-living-axis .ux-num-outline {
    font-size: 5rem; font-weight: 950; color: transparent;
    -webkit-text-stroke: 1px #e0e0e0; line-height: 1;
}

#ux-living-axis .ux-badge-ethereal {
    display: inline-block; padding: 4px 12px; background: #f3f0ff; color: var(--amethyst);
    border-radius: 5px; font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px;
}

#ux-living-axis .ux-h2-title { font-size: 2.8rem; font-weight: 850; color: var(--text-dark); letter-spacing: -1.5px; line-height: 1.1; margin: 0; }
#ux-living-axis .ux-text-wine { color: var(--wine); }

/* --- BIOPHILIC GRID (LE WAHOU) --- */
#ux-living-axis .ux-biophilic-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 60px;
}

#ux-living-axis .ux-bio-tile {
    background: #fff; padding: 50px; border-radius: 40px; position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.02);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#ux-living-axis .ux-offset-top { margin-top: 60px; }

#ux-living-axis .ux-tile-icon { font-size: 3rem; margin-bottom: 30px; }

#ux-living-axis .ux-h3-tile { font-size: 1.8rem; font-weight: 800; margin-bottom: 25px; }
#ux-living-axis .ux-tile-green .ux-h3-tile { color: var(--nature-green); }
#ux-living-axis .ux-tile-orange .ux-h3-tile { color: var(--encounter-orange); }

#ux-living-axis .ux-tile-content p { font-size: 1.05rem; line-height: 1.7; color: #555; margin-bottom: 20px; }

/* Proverbe & Box focus */
#ux-living-axis .ux-proverb-box {
    margin: 30px 0; padding: 25px; background: #f1f8e9; border-radius: 20px;
    font-style: italic; color: #2e7d32; border-left: 5px solid var(--nature-green);
    font-size: 1.1rem; line-height: 1.5;
}

#ux-living-axis .ux-messenger-box {
    margin: 30px 0; padding: 25px; background: #fff3e0; border-radius: 20px;
    color: #ef6c00; border-left: 5px solid var(--encounter-orange);
}

#ux-living-axis .ux-tile-footer { font-weight: 700; color: var(--text-dark); margin-top: 30px; }

/* L'Aura de survol */
#ux-living-axis .ux-tile-aura {
    position: absolute; inset: 0; border-radius: 40px; opacity: 0; transition: 0.5s;
    pointer-events: none; z-index: -1;
}

#ux-living-axis .ux-tile-green:hover { transform: translateY(-10px); }
#ux-living-axis .ux-tile-green:hover .ux-tile-aura { opacity: 1; box-shadow: 0 40px 80px rgba(76, 175, 80, 0.15); }

#ux-living-axis .ux-tile-orange:hover { transform: translateY(-10px); }
#ux-living-axis .ux-tile-orange:hover .ux-tile-aura { opacity: 1; box-shadow: 0 40px 80px rgba(255, 152, 0, 0.15); }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    #ux-living-axis .ux-offset-top { margin-top: 0; }
    #ux-living-axis .ux-bio-tile { padding: 40px 25px; }
}@media (max-width: 768px) {
    /* ============================================================
   FORCE RESPONSIVE RADICAL : LIVING AXIS (#ux-living-axis)
   ============================================================ */

    /* 1. RESET GLOBAL & SECTION */
    #ux-living-axis {
        padding: 60px 0 80px 0 !important;
        overflow-x: hidden !important;
    }

    #ux-living-axis .ux-container {
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. HEADER & NUMÉRO (L'AUTORITÉ CENTRÉE) */
    #ux-living-axis .ux-header-flex {
        flex-direction: column !important; /* Empilement vertical */
        text-align: center !important;
        gap: 10px !important;
        margin-bottom: 40px !important;
    }

    #ux-living-axis .ux-num-outline {
        font-size: 3.2rem !important; /* Calibrage anti-collision */
        -webkit-text-stroke-width: 1px !important;
        margin-bottom: 5px !important;
    }

    #ux-living-axis .ux-h2-title {
        font-size: 1.85rem !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
        padding: 0 10px;
    }

    /* 3. GRID & OFFSET (LA STABILITÉ DU FLUX) */
    #ux-living-axis .ux-biophilic-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    #ux-living-axis .ux-offset-top {
        margin-top: 0 !important; /* On aligne tout pour le mobile */
    }

    /* 4. BIO TILES (L'IMMERSION) */
    #ux-living-axis .ux-bio-tile {
        padding: 35px 20px !important; /* Respiration récupérée */
        border-radius: 30px !important;
        margin: 0 5px !important;
        text-align: center !important;
        transform: none !important; /* Stabilité tactile Retina */
    }

    #ux-living-axis .ux-bio-tile:hover {
        transform: none !important;
    }

    #ux-living-axis .ux-tile-icon {
        font-size: 2.5rem !important;
        margin-bottom: 20px !important;
    }

    #ux-living-axis .ux-h3-tile {
        font-size: 1.45rem !important;
        margin-bottom: 20px !important;
    }

    #ux-living-axis .ux-tile-content p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        text-align: left !important; /* On garde le texte aligné pour le confort */
    }

    /* 5. PROVERB & MESSENGER BOXES (LA STRUCTURE) */
    #ux-living-axis .ux-proverb-box, 
    #ux-living-axis .ux-messenger-box {
        padding: 25px 20px !important;
        border-left: none !important;
        border-top: 5px solid !important; /* L'accent passe en tête */
        border-radius: 20px !important;
        text-align: center !important;
        font-size: 1rem !important;
        margin: 25px 0 !important;
    }

    #ux-living-axis .ux-tile-footer {
        font-size: 0.95rem !important;
        margin-top: 25px !important;
    }

    /* 6. AURA & TEXTURE */
    #ux-living-axis .ux-tile-aura {
        display: none !important; /* On épure pour la performance mobile */
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-43af45b */#ux-clarity-prism {
    --amethyst: #6d28d9;
    --wine: #8a1538;
    --text-deep: #1a1a1a;
    --white: #ffffff;
    
    padding: 100px 20px;
    background-color: #fcfcfc;
    font-family: 'Inter', -apple-system, sans-serif;
    overflow: hidden;
}

#ux-clarity-prism .ux-container { max-width: 1100px; margin: 0 auto; }

/* --- HEADER --- */
#ux-clarity-prism .ux-prism-header { margin-bottom: 80px; text-align: left; }
#ux-clarity-prism .ux-header-flex { display: flex; align-items: baseline; gap: 20px; margin-bottom: 25px; }

#ux-clarity-prism .ux-num-wrap { position: relative; }
#ux-clarity-prism .ux-num-outline {
    font-size: 5rem; font-weight: 900; color: transparent;
    -webkit-text-stroke: 1px #d0d0d0; line-height: 0.8;
}
#ux-clarity-prism .ux-num-ray {
    position: absolute; top: 50%; left: 50%; width: 120px; height: 1px;
    background: linear-gradient(to right, var(--amethyst), transparent);
    transform: rotate(-30deg) translate(-50%, -50%); opacity: 0.3;
}

#ux-clarity-prism .ux-badge-focus {
    display: inline-block; padding: 4px 12px; background: #f3f0ff; color: var(--amethyst);
    border-radius: 5px; font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px;
}

#ux-clarity-prism .ux-h2-title { font-size: clamp(2.2rem, 5vw, 2.8rem); font-weight: 800; color: var(--text-deep); letter-spacing: -2px; line-height: 1.1; margin: 0; }
#ux-clarity-prism .ux-p-intro { font-size: 1.25rem; color: #666; max-width: 750px; line-height: 1.6; margin-top: 20px; }

/* --- REFRACTION LAYOUT (LE WAHOU) --- */
#ux-clarity-prism .ux-refraction-layout {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
}

/* Pile de cartes (The Lens Stack) */
#ux-clarity-prism .ux-lens-stack { display: flex; flex-direction: column; gap: -20px; /* Effet de chevauchement */ }

#ux-clarity-prism .ux-lens-card {
    background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px);
    padding: 50px; border-radius: 35px; border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 20px 50px rgba(0,0,0,0.04);
    position: relative; transition: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#ux-clarity-prism .ux-lens-card:nth-child(2) { margin-top: -30px; margin-left: 40px; z-index: 2; }
#ux-clarity-prism .ux-lens-card:hover { transform: translateY(-10px) scale(1.02); z-index: 10; box-shadow: 0 40px 80px rgba(109, 40, 217, 0.1); }

#ux-clarity-prism .ux-lens-label { font-size: 0.65rem; font-weight: 900; color: #AAA; letter-spacing: 3px; margin-bottom: 25px; }

#ux-clarity-prism .ux-h3-lens { font-size: 1.6rem; font-weight: 800; margin-bottom: 20px; line-height: 1.2; }
#ux-clarity-prism .ux-lens-purp .ux-h3-lens { color: var(--amethyst); }
#ux-clarity-prism .ux-lens-wine .ux-h3-lens { color: var(--wine); }

#ux-clarity-prism .ux-lens-card p { font-size: 1.05rem; line-height: 1.7; color: #555; margin: 0; }
#ux-clarity-prism .ux-link-expert { color: var(--wine); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }

/* --- VISUAL FOCUS --- */
#ux-clarity-prism .ux-focus-visual { position: relative; }
#ux-clarity-prism .ux-image-shroud { position: relative; padding: 20px; }
#ux-clarity-prism .ux-image-shroud img { 
    width: 100%; border-radius: 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    filter: brightness(1.05) contrast(1.05);
}

#ux-clarity-prism .ux-focus-ring {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80%; height: 80%; border: 1px solid var(--amethyst); border-radius: 50%;
    opacity: 0.2; pointer-events: none;
}

#ux-clarity-prism .ux-focus-cross {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 40px; height: 40px; opacity: 0.3;
}
#ux-clarity-prism .ux-focus-cross::before, #ux-clarity-prism .ux-focus-cross::after {
    content: ''; position: absolute; background: var(--amethyst);
}
#ux-clarity-prism .ux-focus-cross::before { top: 50%; left: 0; width: 100%; height: 1px; }
#ux-clarity-prism .ux-focus-cross::after { left: 50%; top: 0; width: 1px; height: 100%; }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    #ux-clarity-prism .ux-refraction-layout { grid-template-columns: 1fr; }
    #ux-clarity-prism .ux-lens-card:nth-child(2) { margin-top: 20px; margin-left: 0; }
    #ux-clarity-prism .ux-focus-visual { order: -1; max-width: 400px; margin: 0 auto; }
}@media (max-width: 768px) {
    /* ============================================================
   FORCE RESPONSIVE RADICAL : CLARITY (#ux-clarity-prism)
   ============================================================ */

    /* 1. RESET GLOBAL & SECTION */
    #ux-clarity-prism {
        padding: 60px 0 80px 0 !important;
        overflow-x: hidden !important;
    }

    #ux-clarity-prism .ux-container {
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. HEADER & NUMÉRO RAYONNANT (CENTRE DE GRAVITÉ) */
    #ux-clarity-prism .ux-prism-header {
        text-align: center !important;
        margin-bottom: 45px !important;
    }

    #ux-clarity-prism .ux-header-flex {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    #ux-clarity-prism .ux-num-outline {
        font-size: 3.5rem !important; /* Calibrage pour éviter le dépassement */
        line-height: 1 !important;
    }

    #ux-clarity-prism .ux-num-ray {
        width: 80px !important; /* On ajuste le rayon laser pour le mobile */
        opacity: 0.2 !important;
    }

    #ux-clarity-prism .ux-h2-title {
        font-size: 1.85rem !important;
        line-height: 1.2 !important;
        letter-spacing: -1px !important;
        padding: 0 10px;
    }

    #ux-clarity-prism .ux-p-intro {
        font-size: 1.05rem !important;
        text-align: center !important;
        line-height: 1.6 !important;
        margin: 20px auto 0 !important;
    }

    /* 3. REFRACTION LAYOUT (LE FLUX VERTICAL) */
    #ux-clarity-prism .ux-refraction-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    /* 4. VISUAL FOCUS (IMMERSION PRIORITAIRE) */
    #ux-clarity-prism .ux-focus-visual {
        order: -1 !important; /* L'image de focus passe en tête */
        max-width: 300px !important;
        margin: 0 auto !important;
    }

    #ux-clarity-prism .ux-image-shroud img {
        border-radius: 20px !important;
    }

    #ux-clarity-prism .ux-focus-ring {
        width: 90% !important;
        height: 90% !important;
    }

    /* 5. LENS STACK (ALIGNEMENT CHIRURGICAL) */
    #ux-clarity-prism .ux-lens-stack {
        gap: 20px !important; /* On remplace le chevauchement par un gap propre */
    }

    #ux-clarity-prism .ux-lens-card {
        padding: 30px 20px !important; /* On libère l'espace de lecture */
        border-radius: 25px !important;
        margin-left: 0 !important; /* Neutralisation du décalage desktop */
        margin-top: 0 !important;
        text-align: center !important;
        transform: none !important; /* Stabilité Retina */
    }

    #ux-clarity-prism .ux-lens-card:nth-child(2) {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }

    #ux-clarity-prism .ux-lens-card:hover {
        transform: none !important;
    }

    #ux-clarity-prism .ux-h3-lens {
        font-size: 1.4rem !important;
        margin-bottom: 15px !important;
    }

    #ux-clarity-prism .ux-lens-card p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        text-align: left !important; /* Maintien du confort de lecture */
    }

    #ux-clarity-prism .ux-lens-label {
        margin-bottom: 15px !important;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2395b043 */#ux-aurora-final {
    --amethyst: #7b1fa2;
    --deep-purp: #4a148c;
    --white: #ffffff;
    --text-shadow: rgba(0, 0, 0, 0.2);
    
    padding: 100px 20px;
    background-color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    overflow: hidden;
}

#ux-aurora-final .ux-container { max-width: 900px; margin: 0 auto; position: relative; }

/* --- IMAGE BRIDGE --- */
#ux-aurora-final .ux-visual-bridge {
    display: flex; justify-content: center; margin-bottom: -50px; position: relative; z-index: 10;
}

#ux-aurora-final .ux-image-wrap { position: relative; width: 280px; }
#ux-aurora-final .ux-image-wrap img { 
    width: 100%; border-radius: 25px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.15); border: 4px solid var(--white);
    transform: translateY(0); transition: 0.5s ease;
}
#ux-aurora-final .ux-image-glow {
    position: absolute; inset: 0; background: var(--amethyst); filter: blur(40px);
    opacity: 0.2; z-index: -1;
}

/* --- STELLAR CTA (LE WAHOU) --- */
#ux-aurora-final .ux-stellar-cta {
    background: linear-gradient(135deg, var(--amethyst), var(--deep-purp));
    border-radius: 40px; padding: 100px 40px 60px;
    position: relative; overflow: hidden; color: var(--white); text-align: center;
    box-shadow: 0 30px 60px rgba(123, 31, 162, 0.3);
}

/* Décoration étincelles */
#ux-aurora-final .ux-spark {
    position: absolute; width: 150px; height: 150px; background: rgba(255,255,255,0.05);
    border-radius: 50%; filter: blur(30px);
}
#ux-aurora-final .s1 { top: -20px; right: -20px; }
#ux-aurora-final .s2 { bottom: -50px; left: -50px; }

#ux-aurora-final .ux-cta-content { position: relative; z-index: 5; }

#ux-aurora-final .ux-h3-finale {
    font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; margin-bottom: 25px;
    letter-spacing: -1.5px; line-height: 1.1;
}

#ux-aurora-final .ux-p-finale {
    font-size: 1.25rem; line-height: 1.7; max-width: 700px; margin: 0 auto 40px;
    opacity: 0.95;
}

/* LE BOUTON VIBRANT */
#ux-aurora-final .ux-btn-vibrant {
    display: inline-flex; align-items: center; gap: 15px;
    background: var(--white); color: var(--deep-purp);
    padding: 22px 50px; border-radius: 100px;
    text-decoration: none; font-weight: 900; font-size: 1.3rem;
    position: relative; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

#ux-aurora-final .ux-btn-vibrant:hover {
    transform: scale(1.05); box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

#ux-aurora-final .ux-btn-ripple {
    position: absolute; inset: -8px; border: 2px solid rgba(255,255,255,0.3);
    border-radius: 100px; animation: ripple-pulse 2s infinite;
}

@keyframes ripple-pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* Footer Signature */
#ux-aurora-final .ux-signature-footer {
    margin-top: 50px; display: flex; align-items: center; justify-content: center; gap: 15px;
    opacity: 0.6;
}
#ux-aurora-final .ux-line { width: 30px; height: 1px; background: #fff; }
#ux-aurora-final .ux-sig-text { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    #ux-aurora-final .ux-stellar-cta { padding: 80px 20px 40px; border-radius: 30px; }
    #ux-aurora-final .ux-btn-vibrant { width: 100%; justify-content: center; padding: 18px; font-size: 1.1rem; }/* ============================================================
   FORCE RESPONSIVE RADICAL : AURORA FINAL (#ux-aurora-final)
   ============================================================ */

    /* 1. RESET GLOBAL & SECTION */
    #ux-aurora-final {
        padding: 60px 0 80px 0 !important;
        overflow-x: hidden !important;
    }

    #ux-aurora-final .ux-container {
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. IMAGE BRIDGE (L'ÉLÉGANCE DU CHEVAUCHEMENT) */
    #ux-aurora-final .ux-visual-bridge {
        margin-bottom: -40px !important; /* On réduit l'overlap pour le mobile */
    }

    #ux-aurora-final .ux-image-wrap {
        width: 200px !important; /* Taille optimisée pour l'équilibre visuel */
    }

    #ux-aurora-final .ux-image-wrap img {
        border-width: 3px !important;
        border-radius: 20px !important;
    }

    /* 3. STELLAR CTA (L'ÉCRIN IMMERSIF) */
    #ux-aurora-final .ux-stellar-cta {
        padding: 75px 20px 45px !important; /* On ajuste la respiration interne */
        border-radius: 35px !important;
        margin: 0 5px !important;
        box-shadow: 0 20px 50px rgba(123, 31, 162, 0.4) !important;
    }

    /* On simplifie les sparks pour la performance mobile */
    #ux-aurora-final .ux-spark {
        width: 100px !important;
        height: 100px !important;
        opacity: 0.1 !important;
    }

    /* 4. CONTENU & TYPO (IMPACT MAXIMUM) */
    #ux-aurora-final .ux-h3-finale {
        font-size: 1.85rem !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
        margin-bottom: 20px !important;
    }

    #ux-aurora-final .ux-p-finale {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        margin-bottom: 35px !important;
        padding: 0 10px;
    }

    /* 5. BOUTON VIBRANT (CONVERSION SANS FRICTION) */
    #ux-aurora-final .ux-btn-vibrant {
        display: flex !important;
        width: 100% !important; /* Cible tactile de 100% pour le pouce */
        padding: 20px 15px !important;
        box-sizing: border-box !important;
        font-size: 1.15rem !important;
        justify-content: center !important;
        transform: none !important; /* Stabilité Retina : on supprime le scale */
    }

    #ux-aurora-final .ux-btn-vibrant:hover {
        transform: none !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
    }

    /* On adoucit le ripple pour ne pas distraire au clic */
    #ux-aurora-final .ux-btn-ripple {
        inset: -6px !important;
        border-width: 1.5px !important;
    }

    /* 6. SIGNATURE FOOTER */
    #ux-aurora-final .ux-signature-footer {
        margin-top: 40px !important;
        gap: 10px !important;
    }

    #ux-aurora-final .ux-sig-text {
        font-size: 0.7rem !important;
        letter-spacing: 1.5px !important;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-3bda243 *//* --- FAQ GUIDANCE UNIVERSELLE : CLEMY MASTER SYSTEM --- */
#clemy-faq-guidance {
    --purple: #6e1b89;
    --dark: #1e1036;
    --wine: #641235;
    --lavender: #f3e5f5;
    --white: #ffffff;
    --border-lux: rgba(110, 27, 137, 0.12);
    
    padding: clamp(60px, 12vw, 120px) 0;
    background: #ffffff;
    font-family: 'Inter', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

#clemy-faq-guidance .faq-canvas {
    max-width: 900px; margin: 0 auto; padding: 0 25px;
}

/* --- HEADER --- */
#clemy-faq-guidance .faq-header { text-align: center; margin-bottom: 60px; }

#clemy-faq-guidance .kicker-badge {
    display: inline-block; background: var(--lavender); color: var(--purple);
    padding: 8px 22px; border-radius: 50px; font-size: 0.75rem; 
    font-weight: 900; text-transform: uppercase; letter-spacing: 3px;
    margin-bottom: 25px; border: 1px solid rgba(110, 27, 137, 0.1);
}

#clemy-faq-guidance .display-title {
    font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 6vw, 3.5rem);
    font-weight: 900; line-height: 1.1; margin-bottom: 20px; color: var(--dark);
}

#clemy-faq-guidance .text-gradient {
    background: linear-gradient(135deg, var(--purple), var(--wine));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

#clemy-faq-guidance .faq-intro { font-size: 1.1rem; color: #666; max-width: 600px; margin: 0 auto; line-height: 1.6; }

/* --- ACCORDION SYSTEM --- */
#clemy-faq-guidance .faq-accordion-group { display: flex; flex-direction: column; gap: 15px; }

#clemy-faq-guidance .faq-item {
    background: #ffffff; border: 1px solid var(--border-lux); border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

#clemy-faq-guidance .faq-item:hover {
    border-color: var(--purple);
    box-shadow: 0 15px 35px rgba(110, 27, 137, 0.05);
}

#clemy-faq-guidance .faq-item[open] {
    border-color: var(--purple);
    box-shadow: 0 25px 60px rgba(30, 16, 54, 0.08);
}

/* Featured Guidance Styling */
#clemy-faq-guidance .featured-guidance[open] { border-left: 6px solid var(--wine); }

/* Summary Styling */
#clemy-faq-guidance summary {
    padding: 28px 30px; cursor: pointer; list-style: none;
    display: flex; align-items: center; gap: 20px;
}

#clemy-faq-guidance summary::-webkit-details-marker { display: none; }

#clemy-faq-guidance .q-num {
    font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 900;
    color: var(--purple); opacity: 0.4; min-width: 35px;
}

#clemy-faq-guidance .q-text {
    font-size: 1.05rem; font-weight: 700; color: var(--dark);
    flex-grow: 1; padding-right: 30px; line-height: 1.4;
}

/* Custom Chevron */
#clemy-faq-guidance .q-chevron {
    width: 20px; height: 20px; position: relative; transition: 0.4s;
}

#clemy-faq-guidance .q-chevron::before, 
#clemy-faq-guidance .q-chevron::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 12px; height: 2px; background: var(--purple); transition: 0.4s;
}

#clemy-faq-guidance .q-chevron::before { transform: translate(-50%, -50%) rotate(0deg); }
#clemy-faq-guidance .q-chevron::after { transform: translate(-50%, -50%) rotate(90deg); }

#clemy-faq-guidance .faq-item[open] .q-chevron { transform: rotate(45deg); }

/* Content Animation */
#clemy-faq-guidance .faq-content {
    padding: 0 35px 35px 85px; color: #555;
    line-height: 1.8; font-size: 1rem;
    animation: faqCelestialIn 0.5s ease-out;
}

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

#clemy-faq-guidance .faq-content strong { color: var(--wine); font-weight: 800; }

/* --- RESPONSIVE 2000% --- */
@media (max-width: 768px) {
    #clemy-faq-guidance .faq-canvas { padding: 0 20px; }
    #clemy-faq-guidance .faq-content { padding: 0 25px 30px 25px; }
    #clemy-faq-guidance .q-num { display: none; }
    #clemy-faq-guidance summary { padding: 25px; }
    #clemy-faq-guidance .display-title { text-align: left; }
    #clemy-faq-guidance .faq-intro { text-align: left; }/* ============================================================
   FORCE RESPONSIVE RADICAL : FAQ MASTER (#clemy-faq-guidance)
   ============================================================ */

    /* 1. RESET GLOBAL & SECTION */
    #clemy-faq-guidance {
        padding: 60px 0 80px 0 !important;
        overflow-x: hidden !important;
    }

    #clemy-faq-guidance .faq-canvas {
        padding: 0 15px !important; /* Gain de largeur pour le texte */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. HEADER (RÉTABLISSEMENT DE L'AUTORITÉ) */
    #clemy-faq-guidance .faq-header {
        margin-bottom: 45px !important;
        text-align: center !important; /* Centrage Prestige conservé */
    }

    #clemy-faq-guidance .kicker-badge {
        font-size: 0.65rem !important;
        padding: 6px 18px !important;
        letter-spacing: 2px !important;
    }

    #clemy-faq-guidance .display-title {
        font-size: 1.85rem !important; /* Calibrage anti-collision mobile */
        line-height: 1.15 !important;
        text-align: center !important; /* Re-centrage pour l'équilibre */
    }

    #clemy-faq-guidance .faq-intro {
        font-size: 1rem !important;
        text-align: center !important;
        line-height: 1.5 !important;
        padding: 0 10px;
    }

    /* 3. ACCORDION SYSTEM (ERGONOMIE TACTILE) */
    #clemy-faq-guidance .faq-accordion-group {
        gap: 12px !important;
    }

    #clemy-faq-guidance .faq-item {
        border-radius: 15px !important;
    }

    #clemy-faq-guidance summary {
        padding: 22px 18px !important; /* Zone de clic optimisée */
        gap: 12px !important;
    }

    /* Suppression du retrait car le numéro disparaît */
    #clemy-faq-guidance .q-num {
        display: none !important;
    }

    #clemy-faq-guidance .q-text {
        font-size: 0.95rem !important;
        padding-right: 5px !important;
        line-height: 1.3 !important;
    }

    #clemy-faq-guidance .q-chevron {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0;
    }

    /* 4. CONTENT (LECTURE SANS FRICTION) */
    #clemy-faq-guidance .faq-content {
        padding: 0 18px 25px 18px !important; /* Reset total du padding gauche de 85px */
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
        text-align: left !important;
    }

    /* Animation optimisée mobile */
    @keyframes faqCelestialInMobile {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    #clemy-faq-guidance .faq-item[open] .faq-content {
        animation: faqCelestialInMobile 0.4s ease-out;
    }

    /* 5. FOCUS "FEATURED" SUR MOBILE */
    #clemy-faq-guidance .featured-guidance[open] {
        border-left: none !important;
        border-top: 5px solid var(--wine) !important; /* L'accent passe en tête */
    }
}/* End custom CSS */