.elementor-6162 .elementor-element.elementor-element-540754b{--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-6162 .elementor-element.elementor-element-17be95f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-6162 .elementor-element.elementor-element-3ec9a1e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6162 .elementor-element.elementor-element-3d56867{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6162 .elementor-element.elementor-element-d7a5fc0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6162 .elementor-element.elementor-element-c4abdfe{--display:flex;}.elementor-6162 .elementor-element.elementor-element-078f64f{--display:flex;}.elementor-6162 .elementor-element.elementor-element-8f161a4{--display:flex;}.elementor-6162 .elementor-element.elementor-element-e7188c9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6162 .elementor-element.elementor-element-555eda3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6162 .elementor-element.elementor-element-78420f0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6162 .elementor-element.elementor-element-15fbae2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6162 .elementor-element.elementor-element-5843aef{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6162 .elementor-element.elementor-element-d1ba211{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6162 .elementor-element.elementor-element-bb2d446{--display:flex;}.elementor-6162 .elementor-element.elementor-element-360fa45{--display:flex;}.elementor-6162 .elementor-element.elementor-element-d33a1d0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6162 .elementor-element.elementor-element-d89d194{--display:flex;}.elementor-6162 .elementor-element.elementor-element-c8b06f2{--display:flex;}.elementor-6162 .elementor-element.elementor-element-95b8dbc{--display:flex;}.elementor-6162 .elementor-element.elementor-element-cc9c7c9{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for text-editor, class: .elementor-element-17be95f *//* ==========================================================================
   HERO PREMIUM 2026 — AMETHYSTE & WINE
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --bg-main: #fcfaff;
    --bg-soft: #f8f3ff;
    --text-dark: #24153d;
    --text-body: #574d69;
    --text-soft: #7a718d;
    --white: #ffffff;

    --amethyst: #7c3aed;
    --amethyst-2: #a855f7;
    --amethyst-3: #e9d5ff;

    --wine: #9f2856;
    --wine-2: #c13b6b;
    --wine-3: #ffd8e4;

    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-border: rgba(124, 58, 237, 0.14);

    --shadow-soft: 0 16px 40px rgba(36, 21, 61, 0.08);
    --shadow-strong: 0 28px 80px rgba(36, 21, 61, 0.16);
}

html, body {
    width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   SECTION
   ========================================================================== */

.ux-hero-section {
    position: relative;
    overflow: hidden;
    min-height: min(100svh, 920px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 48px) 0;
    background:
        radial-gradient(circle at 12% 10%, rgba(168, 85, 247, 0.18), transparent 26%),
        radial-gradient(circle at 88% 16%, rgba(159, 40, 86, 0.16), transparent 24%),
        radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.08), transparent 30%),
        linear-gradient(180deg, #fdfaff 0%, #ffffff 42%, #fcfbff 100%);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ==========================================================================
   GLOWS
   ========================================================================== */

.ambient-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.42;
    animation: auroraMove 12s ease-in-out infinite alternate;
}

.glow-purple {
    top: -6%;
    left: -4%;
    width: 34vw;
    height: 34vw;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.26), transparent 70%);
}

.glow-wine {
    right: -6%;
    bottom: 4%;
    width: 30vw;
    height: 30vw;
    background: radial-gradient(circle, rgba(159, 40, 86, 0.22), transparent 70%);
}

.glow-soft {
    top: 28%;
    left: 48%;
    transform: translateX(-50%);
    width: 24vw;
    height: 24vw;
    background: radial-gradient(circle, rgba(233, 213, 255, 0.35), transparent 72%);
    filter: blur(110px);
}

@keyframes auroraMove {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(18px, -18px, 0) scale(1.08); }
}

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.ux-hero-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 56px);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: clamp(26px, 4vw, 64px);
    align-items: center;
}

/* ==========================================================================
   CONTENT
   ========================================================================== */

.ux-hero-content {
    min-width: 0;
    max-width: 690px;
}

.ux-topline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ux-topline-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--amethyst);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(159, 40, 86, 0.08));
    border: 1px solid rgba(124, 58, 237, 0.10);
    box-shadow: 0 8px 22px rgba(124, 58, 237, 0.06);
}

.ux-topline-pill-soft {
    color: var(--wine);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(159, 40, 86, 0.10);
}

.ux-title {
    margin: 0 0 18px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.25rem, 5vw, 3rem);
    line-height: 0.9;
    letter-spacing: -0.045em;
    font-weight: 900;
    color: transparent;
    background:
        linear-gradient(135deg,
            #6d28d9 0%,
            #8b5cf6 24%,
            #b83280 55%,
            #9f2856 80%,
            #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.ux-title-line {
    display: block;
    margin: 0;
    padding: 0;
    color: transparent;
    background:
        linear-gradient(135deg,
            #6d28d9 0%,
            #8b5cf6 24%,
            #b83280 55%,
            #9f2856 80%,
            #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.ux-title-gradient {
    color: transparent;
    background:
        linear-gradient(135deg,
            #d8b4fe 0%,
            #8b5cf6 24%,
            #9f2856 74%,
            #f472b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.ux-subtitle {
    margin: 0 0 20px;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    color: var(--text-body);
    line-height: 1.72;
    max-width: 640px;
}

.ux-reassurance-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 28px;
    padding: 0;
}

.ux-reassurance-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.5;
}

.check-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(159, 40, 86, 0.10));
    color: var(--wine);
    font-size: 0.72rem;
    box-shadow: 0 6px 14px rgba(124, 58, 237, 0.08);
}

.ux-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.ux-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 14px 24px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.96rem;
    font-weight: 700;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
    text-align: center;
}

.ux-btn:hover {
    transform: translateY(-2px);
}

.ux-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--wine) 0%, #7f1e45 100%);
    box-shadow: 0 14px 30px rgba(159, 40, 86, 0.24);
}

.ux-btn-primary:hover {
    box-shadow: 0 18px 38px rgba(159, 40, 86, 0.30);
}

.ux-btn-glass {
    color: var(--text-dark);
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(124, 58, 237, 0.14);
    box-shadow: 0 10px 24px rgba(36, 21, 61, 0.06);
}

.ux-trust-note {
    font-size: 0.88rem;
    color: var(--text-soft);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   VISUAL
   ========================================================================== */

.ux-hero-visual {
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ux-portrait-shell {
    position: relative;
    width: min(78vw, 300px);
    height: min(78vw, 300px);
    display: grid;
    place-items: center;
    margin: 0 auto;
}

.ux-portrait-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(
            from 180deg,
            rgba(124, 58, 237, 0.9),
            rgba(159, 40, 86, 0.85),
            rgba(233, 213, 255, 0.95),
            rgba(124, 58, 237, 0.9)
        );
    animation: slowSpin 14s linear infinite;
    box-shadow:
        0 24px 60px rgba(124, 58, 237, 0.18),
        0 18px 42px rgba(159, 40, 86, 0.12);
}


@keyframes slowSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ux-image-mask {
    position: relative;
    z-index: 2;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff, #f9f3ff);
    border: 6px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.82),
        0 24px 60px rgba(36, 21, 61, 0.16);
}

.ux-profile-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
}

.ux-floating-badge {
    position: absolute;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--text-dark);
    font-size: 0.84rem;
    font-weight: 800;
    border: 1px solid rgba(159, 40, 86, 0.14);
    box-shadow: 0 14px 30px rgba(36, 21, 61, 0.10);
    white-space: nowrap;
}

.star-icon {
    color: var(--wine);
    font-size: 0.9rem;
}

.ux-floating-card {
    position: absolute;
    top: 10%;
    right: -2%;
    z-index: 3;
    max-width: 210px;
    padding: 14px 16px;
    border-radius: 22px;
    background: rgba(36, 21, 61, 0.80);
    color: rgba(255,255,255,0.94);
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 700;
    box-shadow: 0 18px 34px rgba(36, 21, 61, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}.ux-hero-review-link {
  margin-top: 14px;
}

.ux-inline-review-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #c08ab2;
  text-decoration: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ux-inline-review-link:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* ==========================================================================
   DESKTOP REDUCTION
   ========================================================================== */

@media (max-width: 1200px) {
    .ux-hero-container {
        gap: 42px;
        padding: 42px 24px;
    }

    .ux-title {
        font-size: clamp(2.1rem, 5vw, 3rem);
    }

    .ux-portrait-shell {
        width: clamp(270px, 32vw, 390px);
    }
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 992px) {
    .ux-hero-section {
        min-height: auto;
        padding: 28px 0 34px;
    }

    .ux-hero-container {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
        padding: 30px 22px;
    }

    .ux-hero-content {
        max-width: 100%;
        order: 2;
    }

    .ux-hero-visual {
        order: 1;
    }

    .ux-topline,
    .ux-action-group {
        justify-content: center;
    }

    .ux-reassurance-list {
        align-items: center;
    }

    .ux-reassurance-list li {
        justify-content: center;
        text-align: center;
    }

    .ux-subtitle,
    .ux-trust-note {
        max-width: 100%;
    }

    .ux-portrait-shell {
        width: clamp(250px, 46vw, 360px);
    }

    .ux-floating-card {
        top: 8%;
        right: 2%;
        max-width: 190px;
    }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    .ux-hero-section {
        padding: 22px 0 28px;
    }

    .ux-hero-container {
        gap: 24px;
        padding: 24px 18px 30px;
    }

    .ux-topline {
        gap: 8px;
        margin-bottom: 14px;
    }

    .ux-topline-pill {
        min-height: 34px;
        padding: 0 12px;
        font-size: 0.64rem;
        letter-spacing: 1px;
    }

    .ux-title {
        font-size: clamp(1.9rem, 8vw, 3rem);
        line-height: 0.9;
        margin-bottom: 14px;
        letter-spacing: -0.04em;
    }


    .ux-subtitle {
        font-size: 0.96rem;
        line-height: 1.64;
        margin-bottom: 16px;
    }

    .ux-reassurance-list {
        gap: 10px;
        margin-bottom: 20px;
    }

    .ux-reassurance-list li {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .ux-action-group {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-bottom: 14px;
    }

    .ux-btn {
        width: 100%;
        min-height: 50px;
        font-size: 0.92rem;
        padding: 13px 16px;
    }

    .ux-trust-note {
        font-size: 0.82rem;
        line-height: 1.5;
    }

.ux-portrait-shell {
        width: min(72vw, 300px);
    }

    .ux-image-mask {
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        border-width: 5px;
    }


    .ux-floating-badge {
        bottom: -8px;
        min-height: 40px;
        padding: 10px 14px;
        font-size: 0.74rem;
        max-width: calc(100% - 16px);
        white-space: normal;
        text-align: center;
    }

    .ux-floating-card {
        position: static;
        margin-top: 12px;
        max-width: 100%;
        border-radius: 18px;
        font-size: 0.78rem;
        text-align: center;
        background: rgba(36, 21, 61, 0.82);
    }

    .ambient-glow {
        filter: blur(64px);
        opacity: 0.34;
    }

    .glow-purple {
        width: 52vw;
        height: 52vw;
    }

    .glow-wine {
        width: 48vw;
        height: 48vw;
    }

    .glow-soft {
        width: 38vw;
        height: 38vw;
    }
}

/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 380px) {
    .ux-hero-container {
        padding: 22px 12px 28px;
    }

    .ux-title {
        font-size: 1.66rem;
    }

    .ux-subtitle {
        font-size: 0.9rem;
    }

    .ux-reassurance-list li {
        font-size: 0.84rem;
    }

    .ux-btn {
        font-size: 0.88rem;
    }

  .ux-portrait-shell {
        width: min(78vw, 260px);
    }

    .ux-image-mask {
        border-width: 4px;
    }
}

/* ==========================================================================
   TOUCH / ACCESSIBILITY
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
    .ux-btn:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-glow,
    .ux-portrait-ring {
        animation: none !important;
    }

    .ux-btn {
        transition: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-5e8726c */#mirror-anchor-nav {
    position: relative;
    max-width: 1180px;
    margin: 30px auto 0;
    padding: 0 24px;
}

#mirror-anchor-nav-inner {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 24px;
    background:
        radial-gradient(circle at 12% 18%, rgba(168, 85, 247, 0.14), transparent 24%),
        radial-gradient(circle at 88% 20%, rgba(159, 40, 86, 0.10), transparent 22%),
        linear-gradient(145deg, rgba(255,255,255,0.94), rgba(252,248,255,0.96));
    border: 1px solid var(--border-lux);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#mirror-anchor-nav-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(124, 58, 237, 0.22),
        rgba(159, 40, 86, 0.16),
        rgba(255,255,255,0.5)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

#mirror-anchor-nav-header {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    text-align: center;
}

#mirror-anchor-nav-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(159, 40, 86, 0.08));
    border: 1px solid rgba(124, 58, 237, 0.10);
    color: var(--purple);
    font-size: 0.70rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.06);
}

#mirror-anchor-nav-title {
    margin: 12px 0 0;
    font-size: clamp(1rem, 1.4vw, 1.14rem);
    line-height: 1.5;
    color: var(--text);
    font-weight: 600;
}

#mirror-anchor-links {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.mirror-anchor-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    padding: 16px 18px;
    border-radius: 22px;
    text-decoration: none;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(124, 58, 237, 0.10);
    box-shadow: 0 10px 26px rgba(32, 19, 54, 0.06);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

.mirror-anchor-item:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(249,243,255,0.98));
    border-color: rgba(159, 40, 86, 0.18);
    box-shadow: 0 18px 34px rgba(32, 19, 54, 0.12);
}

.mirror-anchor-item:focus-visible {
    outline: 3px solid rgba(124, 58, 237, 0.20);
    outline-offset: 3px;
}

.mirror-anchor-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.28rem;
    line-height: 1;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.72), transparent 42%),
        linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(159, 40, 86, 0.14));
    border: 1px solid rgba(124, 58, 237, 0.12);
    box-shadow:
        0 12px 24px rgba(124, 58, 237, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.65);
}

.mirror-anchor-label {
    color: var(--dark);
    font-size: 0.98rem;
    line-height: 1.45;
    font-weight: 800;
    text-wrap: balance;
}

/* Le dernier item prend toute la largeur */
.mirror-anchor-item:last-child {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    #mirror-anchor-nav {
        margin-top: 24px;
    }

    #mirror-anchor-nav-inner {
        padding: 20px;
        border-radius: 24px;
    }

    #mirror-anchor-links {
        grid-template-columns: 1fr;
    }

    .mirror-anchor-item:last-child {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    #mirror-anchor-nav {
        padding: 0 18px;
    }

    #mirror-anchor-nav-inner {
        padding: 18px 14px;
        border-radius: 22px;
    }

    #mirror-anchor-nav-header {
        margin-bottom: 14px;
    }

    #mirror-anchor-nav-title {
        font-size: 0.95rem;
        line-height: 1.55;
    }

    .mirror-anchor-item {
        min-height: 70px;
        padding: 14px;
        gap: 12px;
        border-radius: 18px;
    }

    .mirror-anchor-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 1.08rem;
    }

    .mirror-anchor-label {
        font-size: 0.92rem;
        line-height: 1.4;
    }
}

@media (max-width: 380px) {
    .mirror-anchor-item {
        align-items: flex-start;
    }

    .mirror-anchor-label {
        font-size: 0.88rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-a4d1189 *//* ==========================================================================
   SECTION TARIFS "SÉRÉNITÉ & AMÉTHYSTE" 2026 - BENTO & GLASS EDITION
   ========================================================================== */

.ux-pricing-section {
    position: relative;
    background: linear-gradient(180deg, var(--bg-main, #ffffff) 0%, #F3EBFF 100%);
    padding: 100px 20px;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* --- Halos lumineux ultra-doux --- */
.pricing-glow-left, 
.pricing-glow-right {
    position: absolute;
    pointer-events: none;
    mask-image: radial-gradient(circle, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
}

.pricing-glow-left {
    width: 600px; /* Remplace la virgule par un point-virgule */
    height: 600px;
    background: radial-gradient(circle, rgba(142, 68, 173, 0.15), transparent 70%);
    top: -10%; left: -10%;
}

.pricing-glow-right {
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(212, 172, 13, 0.15), transparent 70%);
    bottom: -15%; right: -10%;
}

.ux-pricing-container {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}

/* --- En-tête --- */
.ux-pricing-header {
    text-align: center;
    margin-bottom: 70px;
}

.ux-section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark, #2D1E40);
    margin-bottom: 15px;
    letter-spacing: -1.5px;
}

.ux-section-subtitle {
    font-size: 1.15rem;
    color: #564D65;
    max-width: 500px;
    margin: 0 auto;
    opacity: 0.9;
}

/* --- Grille Bento --- */
.ux-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 32px;
    align-items: start;
}

/* --- Design des Cartes --- */
.ux-pricing-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 32px;
    position: relative;
    box-shadow: 0 20px 40px rgba(45, 30, 64, 0.04), inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2), box-shadow 0.4s ease;
    overflow: visible; /* IMPORTANT : Permet au badge de déborder en haut */
}

.ux-pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(142, 68, 173, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
    overflow: visible; /* <--- Ajoute le ; ici */
}

/* Nouveau conteneur interne pour bloquer l'animation Shimmer */
.ux-card-inner-wrapper {
    position: relative;
    padding: 40px;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Ajout : centre horizontalement */
    text-align: center;  /* Ajout : centre le texte */
    overflow: hidden; 
    box-sizing: border-box;
}

/* --- Typographie et Hiérarchie --- */
.ux-card-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.text-amethyst { color: var(--amethyst, #8E44AD); }

.ux-price-wrap {
    display: flex;
    justify-content: center; /* Ajout : centre le prix et la devise */
    align-items: baseline;
    gap: 5px;
    margin-bottom: 25px;
}

.ux-price {
  font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--text-dark, #2D1E40);
    letter-spacing: -2px;
    line-height: 1;
}

.ux-price-currency {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--amethyst, #8E44AD);
}

.ux-duration-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(142, 68, 173, 0.08);
    color: var(--amethyst, #8E44AD);
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid rgba(142, 68, 173, 0.1);
    width: fit-content;
    margin: 0 auto; /* Centre horizontalement et met les marges haut/bas à 0 */
}

/* --- Carte Premium & Effets --- */
.ux-card-premium {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 245, 255, 0.7) 100%);
    border: 1px solid rgba(142, 68, 173, 0.3);
    box-shadow: 0 20px 50px rgba(142, 68, 173, 0.15), inset 0 1px 0 rgba(255, 255, 255, 1);
    margin-top: 25px; /* NOUVEAU : Pousse la carte vers le bas pour libérer le badge */
    
}

/* L'effet Shimmer ciblé sur le wrapper interne de la carte premium */
.ux-card-premium .ux-card-inner-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-20deg);
    animation: shimmer 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
    justify-content: flex-start;
}

@keyframes shimmer {
    0% { left: -100%; }
    20%, 100% { left: 200%; }
}

.ux-badge-recommended {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--amethyst, #8E44AD) 0%, #A569BD 100%);
    color: #fff;
    padding: 8px 24px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 8px 20px rgba(142, 68, 173, 0.4);
    z-index: 50; /* NOUVEAU : On force le passage au premier plan */
    white-space: nowrap;
}

/* --- Boutons et Actions --- */
.ux-card-action {
    margin-top: 25px !important; /* Force une petite marge au lieu du 'auto' */
    padding-top: 20px !important;
    border-top: 1px solid rgba(142, 68, 173, 0.1); /* Petite ligne de séparation propre */
    width: 100%;
}

.ux-btn-pay {
    width: 100%;
    padding: 16px;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
}

.ux-btn-secondary-pay {
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-dark, #2D1E40);
    border: 1px solid rgba(142, 68, 173, 0.2);
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.ux-btn-secondary-pay:hover {
    background: #fff;
    border-color: var(--amethyst, #8E44AD);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(142, 68, 173, 0.1);
    color: var(--amethyst, #8E44AD);
}

.ux-btn-premium-pay {
    background: linear-gradient(135deg, var(--amethyst, #8E44AD) 0%, #8E44AD 100%);
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(142, 68, 173, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

.ux-btn-premium-pay:hover {
    background: #fff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 15px 35px rgba(142, 68, 173, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.2);
    color:var(--text-dark, #2D1E40);
}

/* --- Bloc Alternatif (Téléphone) --- */
.ux-pay-alternative {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    text-align: center;
}

.ux-pay-alternative span {
    font-size: 0.8rem;
    color: #7E748F;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

.ux-phone-link {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-dark, #2D1E40);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.ux-phone-link:hover {
    color: var(--amethyst, #8E44AD);
    transform: scale(1.05);
}


form[target="paypal"] input[type="hidden"] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ux-card-action form br,
.ux-card-action form p {
    display: none;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   RESPONSIVE ULTRA PROPRE
   ========================================================================== */

/* --- Desktop moyen / laptop --- */
@media (max-width: 1200px) {
    .ux-pricing-section {
        padding: 90px 24px;
    }

    .ux-pricing-container {
        max-width: 1000px;
    }

    .ux-pricing-header {
        margin-bottom: 55px;
    }

    .ux-section-title {
        font-size: 1.9rem;
        margin-bottom: 12px;
    }

    .ux-section-subtitle {
        font-size: 1.05rem;
        max-width: 520px;
    }

    .ux-pricing-grid {
        gap: 24px;
    }

    .ux-card-inner-wrapper {
        padding: 34px 30px;
    }

    .ux-card-title {
        font-size: 1.6rem;
    }

    .ux-price-currency {
        font-size: 1.3rem;
    }

    .pricing-glow-left {
        width: 500px;
        height: 500px;
    }

    .pricing-glow-right {
        width: 560px;
        height: 560px;
    }
}

/* --- Tablette paysage / petit laptop --- */
@media (max-width: 992px) {
    .ux-pricing-section {
        padding: 80px 20px;
    }

    .ux-pricing-header {
        margin-bottom: 45px;
    }

    .ux-section-title {
        font-size: 1.8rem;
        letter-spacing: -1px;
    }

    .ux-section-subtitle {
        font-size: 1rem;
        line-height: 1.6;
    }

    .ux-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 680px;
        margin: 0 auto;
        gap: 28px;
    }

    .ux-pricing-card {
        border-radius: 28px;
    }

    .ux-card-inner-wrapper {
        padding: 32px 28px;
    }

    .ux-card-premium {
        margin-top: 20px;
    }

    .ux-badge-recommended {
        top: -16px;
        font-size: 0.72rem;
        padding: 8px 20px;
        letter-spacing: 1.5px;
    }

    .ux-btn-pay {
        padding: 15px 18px;
        font-size: 0.96rem;
    }

    .ux-pay-alternative {
        padding: 18px;
    }

    .pricing-glow-left {
        width: 420px;
        height: 420px;
        top: -12%;
        left: -18%;
    }

    .pricing-glow-right {
        width: 460px;
        height: 460px;
        bottom: -18%;
        right: -18%;
    }
}

/* --- Tablette portrait / gros mobile --- */
@media (max-width: 768px) {
    .ux-pricing-section {
        padding: 65px 16px;
    }

    .ux-pricing-header {
        margin-bottom: 38px;
    }

    .ux-section-title {
        font-size: 1.65rem;
        line-height: 1.15;
    }

    .ux-section-subtitle {
        font-size: 0.96rem;
        max-width: 100%;
    }

    .ux-pricing-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ux-pricing-card {
        border-radius: 24px;
    }

    .ux-card-inner-wrapper {
        padding: 26px 22px;
    }

    .ux-card-title {
        font-size: 1.4rem;
        margin-bottom: 16px;
    }

    .ux-price-wrap {
        gap: 4px;
        margin-bottom: 18px;
    }

    .ux-price {
        font-size: clamp(2rem, 9vw, 2.6rem);
        letter-spacing: -1.5px;
    }

    .ux-price-currency {
        font-size: 1.15rem;
    }

    .ux-duration-pill {
        font-size: 0.78rem;
        padding: 7px 13px;
        border-radius: 10px;
    }

    .ux-card-action {
        margin-top: 22px !important;
        padding-top: 18px !important;
    }

    .ux-btn-pay {
        padding: 14px 16px;
        font-size: 0.93rem;
        gap: 8px;
    }

    .ux-badge-recommended {
        top: -14px;
        font-size: 0.66rem;
        padding: 7px 16px;
        letter-spacing: 1.2px;
        max-width: calc(100% - 24px);
        text-align: center;
        white-space: normal;
    }

    .ux-pay-alternative {
        padding: 16px;
        border-radius: 16px;
    }

    .ux-phone-link {
        font-size: 0.95rem;
        line-height: 1.4;
        word-break: break-word;
    }

    .pricing-glow-left {
        width: 280px;
        height: 280px;
        opacity: 0.8;
    }

    .pricing-glow-right {
        width: 320px;
        height: 320px;
        opacity: 0.8;
    }
}

/* --- Mobile --- */
@media (max-width: 576px) {
    .ux-pricing-section {
        padding: 55px 14px;
    }

    .ux-section-title {
        font-size: 1.45rem;
        letter-spacing: -0.8px;
    }

    .ux-section-subtitle {
        font-size: 0.92rem;
        line-height: 1.6;
    }

    .ux-pricing-grid {
        gap: 20px;
    }

    .ux-pricing-card {
        border-radius: 22px;
    }

    .ux-card-inner-wrapper {
        padding: 22px 18px;
    }

    .ux-card-title {
        font-size: 1.25rem;
        margin-bottom: 14px;
    }

    .ux-price {
        font-size: clamp(1.85rem, 10vw, 2.3rem);
    }

    .ux-price-currency {
        font-size: 1rem;
    }

    .ux-duration-pill {
        font-size: 0.74rem;
        padding: 6px 12px;
    }

    .ux-badge-recommended {
        top: -12px;
        font-size: 0.62rem;
        padding: 6px 14px;
        border-radius: 999px;
    }

    .ux-btn-pay {
        width: 100%;
        font-size: 0.9rem;
        padding: 13px 14px;
    }

    .ux-pay-alternative span {
        font-size: 0.72rem;
    }

    .ux-phone-link {
        font-size: 0.9rem;
    }

    .pricing-glow-left,
    .pricing-glow-right {
        display: none;
    }
}

/* --- Très petits mobiles --- */
@media (max-width: 380px) {
    .ux-pricing-section {
        padding: 48px 12px;
    }

    .ux-section-title {
        font-size: 1.3rem;
    }

    .ux-section-subtitle {
        font-size: 0.88rem;
    }

    .ux-card-inner-wrapper {
        padding: 20px 14px;
    }

    .ux-card-title {
        font-size: 1.15rem;
    }

    .ux-price {
        font-size: 1.75rem;
    }

    .ux-price-currency {
        font-size: 0.95rem;
    }

    .ux-duration-pill {
        font-size: 0.7rem;
        padding: 6px 10px;
    }

    .ux-badge-recommended {
        font-size: 0.58rem;
        letter-spacing: 1px;
        padding: 6px 12px;
    }

    .ux-btn-pay {
        font-size: 0.86rem;
        padding: 12px 12px;
    }
}

/* --- Pas de hover agressif sur tactile --- */
@media (hover: none) and (pointer: coarse) {
    .ux-pricing-card:hover,
    .ux-btn-secondary-pay:hover,
    .ux-btn-premium-pay:hover,
    .ux-phone-link:hover {
        transform: none;
    }

    .ux-pricing-card:hover {
        box-shadow: 0 20px 40px rgba(45, 30, 64, 0.04), inset 0 1px 0 rgba(255, 255, 255, 1);
    }

    .ux-btn-secondary-pay:hover {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(142, 68, 173, 0.2);
        color: var(--text-dark, #2D1E40);
    }

    .ux-btn-premium-pay:hover {
        background: linear-gradient(135deg, var(--amethyst, #8E44AD) 0%, #8E44AD 100%);
        color: #fff;
        box-shadow: 0 10px 25px rgba(142, 68, 173, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.2);
    }

    .ux-phone-link:hover {
        color: var(--text-dark, #2D1E40);
    }
}

/* --- Réduction des animations si besoin --- */
@media (prefers-reduced-motion: reduce) {
    .ux-pricing-card,
    .ux-btn-pay,
    .ux-phone-link,
    .ux-card-premium .ux-card-inner-wrapper::before {
        transition: none !important;
        animation: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2982ff6 *//* ==========================================================================
   SECTION TEASER VOYANCE PAR MAIL (HOME PAGE)
   ========================================================================== */

.ux-mail-cta-section {
    background: #f8fafc; /* Fond très clair pour trancher avec les sections sombres */
    padding: 60px 20px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.ux-mail-teaser-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.ux-mail-teaser-content {
    flex: 1;
}

/* Badge discret */
.ux-badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(142, 68, 173, 0.1);
    color: #8e44ad;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ux-teaser-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a0e24;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

.ux-teaser-text {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* Bouton style "Glass" Violet */
.ux-btn-glass-purple {
    display: inline-flex;
    align-items: center;
    padding: 16px 32px;
    background: #ffffff;
    color: #8e44ad;
    border: 2px solid #8e44ad;
    border-radius: 100px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.ux-btn-glass-purple:hover {
    background: #8e44ad;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(142, 68, 173, 0.2);
}.ux-mail-teaser-content {
    min-width: 0;
}

.ux-btn-glass-purple {
    justify-content: center;
    text-align: center;
}

/* ==========================================================================
   RESPONSIVE ULTRA PROPRE
   ========================================================================== */

/* --- Petits laptops / tablettes paysage --- */
@media (max-width: 1024px) {
    .ux-mail-cta-section {
        padding: 52px 24px;
    }

    .ux-mail-teaser-container {
        gap: 28px;
    }

    .ux-teaser-title {
        font-size: 1.45rem;
    }

    .ux-teaser-text {
        font-size: 1rem;
    }

    .ux-btn-glass-purple {
        padding: 14px 26px;
        font-size: 0.95rem;
    }
}

/* --- Tablette --- */
@media (max-width: 768px) {
    .ux-mail-cta-section {
        padding: 46px 20px;
    }

    .ux-mail-teaser-container {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 24px;
    }

    .ux-mail-teaser-content {
        width: 100%;
    }

    .ux-badge-soft {
        margin-bottom: 14px;
    }

    .ux-teaser-title {
        font-size: 1.3rem;
        line-height: 1.2;
    }

    .ux-teaser-text {
        font-size: 0.98rem;
        line-height: 1.6;
    }

    .ux-btn-glass-purple {
        width: 100%;
        max-width: 420px;
        padding: 14px 22px;
    }
}

/* --- Mobile --- */
@media (max-width: 576px) {
    .ux-mail-cta-section {
        padding: 38px 16px;
    }

    .ux-mail-teaser-container {
        gap: 20px;
    }

    .ux-badge-soft {
        font-size: 0.72rem;
        padding: 6px 12px;
        letter-spacing: 0.4px;
    }

    .ux-teaser-title {
        font-size: 1.15rem;
        margin-bottom: 8px;
        letter-spacing: -0.3px;
    }

    .ux-teaser-text {
        font-size: 0.92rem;
        line-height: 1.55;
    }

    .ux-btn-glass-purple {
        width: 100%;
        max-width: none;
        padding: 13px 18px;
        font-size: 0.92rem;
        white-space: normal;
        line-height: 1.35;
    }
}

/* --- Très petits mobiles --- */
@media (max-width: 380px) {
    .ux-mail-cta-section {
        padding: 32px 12px;
    }

    .ux-badge-soft {
        font-size: 0.68rem;
        padding: 5px 10px;
    }

    .ux-teaser-title {
        font-size: 1.02rem;
    }

    .ux-teaser-text {
        font-size: 0.88rem;
    }

    .ux-btn-glass-purple {
        padding: 12px 14px;
        font-size: 0.88rem;
        border-width: 1.5px;
    }
}

/* --- Tactile : hover désactivé proprement --- */
@media (hover: none) and (pointer: coarse) {
    .ux-btn-glass-purple:hover {
        background: #ffffff;
        color: #8e44ad;
        transform: none;
        box-shadow: none;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-03a2412 *//* ==========================================================================
   SECTION "DEEP" (CATÉGORIES & PRÉSENTATION) - LIGHT SERENITY 2026
   ========================================================================== */

:root {
    --bg-main: #FBF8FF;
    --bg-card: #F3EBFF;
    --text-dark: #2D1E40;
    --text-muted: #564D65;
    --amethyst: #8E44AD;
    --amethyst-light: #B270CD;
    --gold: #D4AC0D;
    --border-soft: rgba(142, 68, 173, 0.1);
}


.ux-panel-content,
.ux-panel-image {
    min-width: 0;
}

.ux-btn-amethyst {
    justify-content: center;
    text-align: center;
}

.ux-deep-section {
    position: relative;
    background-color: var(--bg-main);
    padding: 100px 20px;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-muted);
}

/* --- Halos Aurora (Version Diurne) --- */
.deep-glow-top {
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(215, 185, 255, 0.4), transparent 70%);
    top: -10%; left: -10%;
    pointer-events: none;
}
.deep-glow-bottom {
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(212, 172, 13, 0.08), transparent 70%);
    bottom: -5%; right: -5%;
    pointer-events: none;
}

.ux-deep-container {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}

.text-center { text-align: center; }

/* --- Grille des Catégories --- */
.ux-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 60px;
}

/* --- Cartes "Soft UI" (Élevées et Épurées) --- */
.ux-glass-card {
    background: #ffffff;
    border: 1px solid var(--border-soft);
    border-radius: 32px;
    padding: 45px 35px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(45, 30, 64, 0.03);
}

/* Orbes d'icônes (Pastels & Or) */
.ux-icon-orb {
    width: 75px; height: 75px;
    border-radius: 24px; /* Un carré arrondi plus moderne qu'un cercle parfait */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 25px;
    background: var(--bg-card);
    border: 1px solid white;
    box-shadow: 0 8px 20px rgba(142, 68, 173, 0.1);
    transition: all 0.3s ease;
}

.ux-card-heading {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 15px 0;
}

.ux-card-text {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Effets de lueur au survol (Adaptés au mode clair) */
.hover-glow-purple:hover {
    transform: translateY(-8px);
    border-color: var(--amethyst);
    box-shadow: 0 20px 40px rgba(142, 68, 173, 0.12);
}
.hover-glow-purple:hover .orb-purple { 
    background: var(--amethyst); 
    color: white; 
    transform: rotate(-5deg);
}

.hover-glow-gold:hover {
    transform: translateY(-8px);
    border-color: var(--gold);
    box-shadow: 0 20px 40px rgba(212, 172, 13, 0.12);
}
.hover-glow-gold:hover .orb-gold { 
    background: var(--gold); 
    color: white; 
    transform: rotate(5deg);
}

/* --- Liens Inline --- */
.ux-inline-link {
    text-decoration: none;
    font-weight: 700;
    position: relative;
    transition: color 0.3s ease;
}
.ux-inline-link::after {
    content: '';
    position: absolute;
    width: 100%; height: 2px;
    bottom: -2px; left: 0;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.ux-inline-link:hover::after { transform: scaleX(1); }

.link-purple { color: var(--amethyst); }
.link-purple::after { background: var(--amethyst); }
.link-gold { color: var(--gold); }
.link-gold::after { background: var(--gold); }

/* --- Séparateur Doux --- */
.ux-soft-divider {
    height: 1px;
    width: 100%;
    max-width: 400px;
    margin: 80px auto;
    background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
}

/* ==========================================================================
   PARTIE 2 : PANNEAU DE PRÉSENTATION (Soft Panel)
   ========================================================================== */
.ux-presentation-panel {
    background: white;
    border: 1px solid var(--border-soft);
    border-radius: 40px;
    padding: 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
    box-shadow: 0 30px 60px rgba(45, 30, 64, 0.05);
}

.ux-panel-content {
    flex: 1.2;
    min-width: 300px;
}.ux-panel-image {
    flex: 0.9;
    min-width: 280px;
    max-width: 380px;
    width: 100%;
    margin: 0 auto;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.10), rgba(212, 172, 13, 0.08));
    border: 1px solid var(--border-soft);
    box-shadow: 0 18px 40px rgba(45, 30, 64, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.ux-panel-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    object-position: center;
    border-radius: 22px;
}

.ux-panel-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 25px 0;
    letter-spacing: -1px;
}

.ux-panel-intro {
    font-size: 1.15rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 35px;
}

.text-highlight-amethyst {
    color: var(--amethyst);
    font-weight: 800;
}

/* La Citation (Version Lilas Serein) */
.ux-quote-block {
    position: relative;
    margin: 0 0 35px 0;
    padding: 30px;
    background: var(--bg-card);
    border-left: 5px solid var(--amethyst);
    border-radius: 0 24px 24px 0;
    font-size: 1.25rem;
    font-style: italic;
    color: var(--text-dark);
    line-height: 1.6;
}

/* Note de confidentialité */
.ux-privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-main);
    padding: 10px 24px;
    border-radius: 100px;
    border: 1px solid var(--border-soft);
}

.ux-btn-amethyst {
    background: var(--amethyst);
    color: #ffffff;
    padding: 20px 45px;
    border-radius: 18px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(142, 68, 173, 0.25);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.ux-btn-amethyst:hover {
    background: var(--amethyst-light);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(142, 68, 173, 0.35);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* ==========================================================================
   RESPONSIVE ULTRA PROPRE
   ========================================================================== */

/* --- Desktop moyen / petit laptop --- */
@media (max-width: 1200px) {
    .ux-deep-section {
        padding: 90px 24px;
    }

    .ux-deep-container {
        max-width: 1000px;
    }

    .ux-categories-grid {
        gap: 24px;
        margin-top: 42px;
        margin-bottom: 50px;
    }

    .ux-glass-card {
        padding: 38px 28px;
        border-radius: 28px;
    }

    .ux-icon-orb {
        width: 68px;
        height: 68px;
        font-size: 1.85rem;
        margin-bottom: 20px;
    }

    .ux-card-heading {
        font-size: 1.35rem;
    }

    .ux-card-text {
        font-size: 1rem;
    }

    .ux-soft-divider {
        margin: 65px auto;
    }

    .ux-presentation-panel {
        padding: 48px;
        gap: 40px;
        border-radius: 32px;
    }

    .ux-panel-title {
        font-size: 2.05rem;
        margin-bottom: 20px;
    }

    .ux-panel-intro {
        font-size: 1.05rem;
        margin-bottom: 28px;
    }

    .ux-quote-block {
        font-size: 1.12rem;
        padding: 24px;
    }

    .deep-glow-top {
        width: 520px;
        height: 520px;
    }

    .deep-glow-bottom {
        width: 420px;
        height: 420px;
    }
}

/* --- Tablette paysage / petit laptop --- */
@media (max-width: 992px) {
    .ux-deep-section {
        padding: 78px 20px;
    }

    .ux-categories-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
        gap: 22px;
        margin-top: 36px;
        margin-bottom: 44px;
    }

    .ux-glass-card {
        padding: 32px 24px;
        border-radius: 24px;
    }

    .ux-card-heading {
        font-size: 1.25rem;
        margin-bottom: 12px;
    }

    .ux-card-text {
        font-size: 0.98rem;
        line-height: 1.6;
    }

    .ux-soft-divider {
        margin: 55px auto;
    }

    .ux-presentation-panel {
        padding: 38px 30px;
        gap: 30px;
        flex-direction: column;
        text-align: center;
    }

    .ux-panel-content {
        flex: none;
        width: 100%;
    }

    .ux-panel-image {
        flex: none;
        width: 100%;
        max-width: 420px;
    }

    .ux-panel-title {
        font-size: 1.9rem;
        line-height: 1.15;
    }

    .ux-panel-intro {
        font-size: 1rem;
        line-height: 1.7;
    }

    .ux-quote-block {
        border-left-width: 4px;
        border-radius: 0 20px 20px 0;
        text-align: left;
    }

    .ux-privacy-badge {
        justify-content: center;
        margin: 0 auto;
    }

    .deep-glow-top {
        width: 420px;
        height: 420px;
        top: -12%;
        left: -18%;
    }

    .deep-glow-bottom {
        width: 340px;
        height: 340px;
        bottom: -10%;
        right: -12%;
    }
}

/* --- Tablette portrait / gros mobile --- */
@media (max-width: 768px) {
    .ux-deep-section {
        padding: 64px 16px;
    }

    .ux-categories-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 30px;
        margin-bottom: 38px;
    }

    .ux-glass-card {
        padding: 26px 20px;
        border-radius: 22px;
    }

    .ux-icon-orb {
        width: 60px;
        height: 60px;
        font-size: 1.65rem;
        border-radius: 18px;
        margin-bottom: 18px;
    }

    .ux-card-heading {
        font-size: 1.1rem;
    }

    .ux-card-text {
        font-size: 0.94rem;
        line-height: 1.65;
    }

    .ux-soft-divider {
        margin: 42px auto;
        max-width: 260px;
    }

    .ux-presentation-panel {
        padding: 28px 20px;
        gap: 24px;
        border-radius: 24px;
    }

    .ux-panel-title {
        font-size: 1.65rem;
        margin-bottom: 16px;
        letter-spacing: -0.6px;
    }

    .ux-panel-intro {
        font-size: 0.96rem;
        line-height: 1.65;
        margin-bottom: 22px;
    }

    .ux-panel-image {
        max-width: 100%;
        width: 100%;
        padding: 8px;
        border-radius: 20px;
    }

    .ux-panel-image img {
        width: 100%;
        max-height: 360px;
        border-radius: 16px;
    }

    .ux-quote-block {
        padding: 20px 18px;
        font-size: 1rem;
        line-height: 1.6;
        border-radius: 0 16px 16px 0;
        margin-bottom: 24px;
    }

    .ux-privacy-badge {
        font-size: 0.85rem;
        padding: 9px 16px;
        gap: 10px;
        line-height: 1.4;
    }

    .ux-btn-amethyst {
        width: 100%;
        padding: 16px 20px;
        font-size: 1rem;
        border-radius: 16px;
    }
}

/* --- Mobile --- */
@media (max-width: 576px) {
    .ux-deep-section {
        padding: 52px 14px;
    }

    .ux-glass-card {
        padding: 22px 16px;
    }

    .ux-icon-orb {
        width: 54px;
        height: 54px;
        font-size: 1.45rem;
        border-radius: 16px;
    }

    .ux-card-heading {
        font-size: 1rem;
    }

    .ux-card-text {
        font-size: 0.9rem;
    }

    .ux-presentation-panel {
        padding: 22px 16px;
        gap: 20px;
        border-radius: 20px;
    }

    .ux-panel-title {
        font-size: 1.4rem;
    }

    .ux-panel-intro {
        font-size: 0.92rem;
        margin-bottom: 18px;
    }

    .ux-panel-image img {
        max-height: 300px;
    }

    .ux-quote-block {
        font-size: 0.94rem;
        padding: 16px 14px;
        border-left-width: 3px;
    }

    .ux-privacy-badge {
        width: 100%;
        justify-content: center;
        font-size: 0.8rem;
        padding: 8px 12px;
    }

    .ux-btn-amethyst {
        width: 100%;
        font-size: 0.94rem;
        padding: 14px 16px;
        gap: 10px;
    }

    .deep-glow-top,
    .deep-glow-bottom {
        display: none;
    }
}

/* --- Très petits mobiles --- */
@media (max-width: 380px) {
    .ux-deep-section {
        padding: 46px 12px;
    }

    .ux-glass-card {
        padding: 20px 14px;
    }

    .ux-card-heading {
        font-size: 0.94rem;
    }

    .ux-card-text {
        font-size: 0.86rem;
    }

    .ux-presentation-panel {
        padding: 20px 14px;
    }

    .ux-panel-title {
        font-size: 1.25rem;
    }

    .ux-panel-intro {
        font-size: 0.88rem;
    }

    .ux-panel-image img {
        max-height: 250px;
    }

    .ux-quote-block {
        font-size: 0.88rem;
        padding: 14px 12px;
    }

    .ux-privacy-badge {
        font-size: 0.74rem;
        padding: 8px 10px;
    }

    .ux-btn-amethyst {
        font-size: 0.88rem;
        padding: 13px 14px;
    }
}

/* --- Tactile : hover neutralisé --- */
@media (hover: none) and (pointer: coarse) {
    .hover-glow-purple:hover,
    .hover-glow-gold:hover,
    .ux-btn-amethyst:hover,
    .ux-inline-link:hover::after {
        transform: none;
    }

    .hover-glow-purple:hover {
        border-color: var(--border-soft);
        box-shadow: 0 10px 30px rgba(45, 30, 64, 0.03);
    }

    .hover-glow-purple:hover .orb-purple,
    .hover-glow-gold:hover .orb-gold {
        background: var(--bg-card);
        color: inherit;
        transform: none;
    }

    .hover-glow-gold:hover {
        border-color: var(--border-soft);
        box-shadow: 0 10px 30px rgba(45, 30, 64, 0.03);
    }

    .ux-btn-amethyst:hover {
        background: var(--amethyst);
        box-shadow: 0 10px 25px rgba(142, 68, 173, 0.25);
    }

    .ux-inline-link::after {
        transform: scaleX(1);
        opacity: 0.35;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-4d0ccab *//* ==========================================================================
   SECTION BIO / VIDÉO "LIGHT MODE 2026"
   ========================================================================== */

:root {
    --wine-red: #A9445B;
    --wine-red-light-bg: rgba(169, 68, 91, 0.08);
    --text-dark: #1a0e24; 
    --text-muted: #64748b;
    --surface-white: #ffffff;
}

/* --- Transition CTA (Entre la section noire et la blanche) --- */
.ux-transition-cta {
    display: flex;
    justify-content: center;
    background-color: var(--surface-white);
    padding: 60px 20px 0; /* Uniquement du padding en haut */
}

/* Conteneur de la vidéo */
.youtube-facade {
    background-color: #000;
    background-image: url('https://img.youtube.com/vi/VVoz4mCharw/maxresdefault.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
}

/* Le bouton Play YouTube */
.youtube-facade .play-btn {
    width: 68px;
    height: 48px;
    background-color: rgba(33, 33, 33, 0.8);
    border-radius: 12%;
    position: relative;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

/* Triangle blanc à l'intérieur */
.youtube-facade .play-btn::before {
    content: '';
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
}

/* Effet au survol : le bouton devient rouge */
.youtube-facade:hover .play-btn {
    background-color: #ff0000;
}

/* Style de l'iframe une fois injectée */
.youtube-facade iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
}

/* --- Conteneur Principal --- */
.ux-bio-light {
    background-color: var(--surface-white);
    padding: 60px 20px 100px;
    font-family: system-ui, -apple-system, sans-serif;
    overflow: hidden;
}

.ux-bio-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- En-tête --- */
.ux-bio-header {
    text-align: center;
    margin-bottom: 60px;
}

/* --- Grille Asymétrique --- */
.ux-bio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes égales sur Desktop */
    gap: 60px;
    align-items: center; /* Centre la vidéo et le texte verticalement */
}

/* ==========================================
   COLONNE GAUCHE : LA VIDÉO
   ========================================== */
.ux-bio-video-col {
    position: relative;
    padding: 20px; /* Laisse de la place pour le décor arrière */
}

/* Bloc décoratif décalé pour l'effet 3D */
.ux-video-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--wine-red-light-bg), transparent);
    border-radius: 32px;
    transform: translate(-15px, 15px);
    z-index: 0;
}

/* Le cadre façon "Soft UI" / Verre */
.ux-video-glass-frame {
    position: relative;
    z-index: 1;
    background: #ffffff;
    padding: 12px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Ratio 16:9 parfait pour l'iframe Youtube */
.ux-video-ratio {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background-color: #000; /* Fond noir pendant le chargement */
}

.ux-video-ratio iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/* ==========================================
   COLONNE DROITE : LE TEXTE
   ========================================== */
.ux-bio-text-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ux-bio-heading {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.3;
    margin: 0;
    letter-spacing: -0.5px;
}

.ux-bio-paragraph {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

.ux-bio-paragraph strong {
    color: var(--text-dark);
    font-weight: 700;
}

/* --- La Citation (façon Magazine) --- */
.ux-bio-quote {
    position: relative;
    background: var(--wine-red-light-bg);
    border-left: 4px solid var(--wine-red);
    border-radius: 0 20px 20px 0;
    padding: 25px 30px;
    margin: 10px 0;
}

.ux-quote-icon {
    width: 30px;
    height: 30px;
    color: var(--wine-red);
    opacity: 0.2;
    position: absolute;
    top: 20px;
    left: 20px;
}

.ux-bio-quote p {
    margin: 0;
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 500;
    color: var(--wine-red);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* --- Bouton Secondaire (Lien Flèche) --- */
.ux-bio-action {
    margin-top: 15px;
}

.ux-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wine-red);
    text-decoration: none;
    transition: all 0.3s ease;
}

.ux-link-arrow .arrow {
    transition: transform 0.3s ease;
}

.ux-link-arrow:hover {
    color: #7d3142;
}

.ux-link-arrow:hover .arrow {
    transform: translateX(5px); /* Animation subtile de la flèche */
}.ux-bio-video-col,
.ux-bio-text-col {
    min-width: 0;
}

.ux-link-arrow {
    flex-wrap: wrap;
}

.youtube-facade {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   RESPONSIVE ULTRA PROPRE
   ========================================================================== */

/* --- Desktop moyen / petit laptop --- */
@media (max-width: 1200px) {
    .ux-transition-cta {
        padding: 50px 24px 0;
    }

    .ux-bio-light {
        padding: 50px 24px 90px;
    }

    .ux-bio-grid {
        gap: 44px;
    }

    .ux-bio-header {
        margin-bottom: 46px;
    }

    .ux-bio-heading {
        font-size: 1.65rem;
    }

    .ux-bio-paragraph {
        font-size: 1rem;
    }

    .ux-bio-quote {
        padding: 22px 24px 22px 26px;
    }

    .ux-bio-quote p {
        font-size: 1.05rem;
    }
}

/* --- Tablette / petit laptop --- */
@media (max-width: 992px) {
    .ux-transition-cta {
        padding: 42px 20px 0;
    }

    .ux-bio-light {
        padding: 46px 20px 80px;
    }

    .ux-bio-grid {
        grid-template-columns: 1fr;
        gap: 38px;
        align-items: start;
    }

    .ux-bio-video-col {
        order: -1;
        padding: 12px;
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
    }

    .ux-bio-text-col {
        gap: 16px;
        text-align: left;
    }

    .ux-bio-heading {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    .ux-bio-paragraph {
        font-size: 0.98rem;
        line-height: 1.68;
    }

    .ux-bio-quote {
        margin: 8px 0;
        padding: 20px 20px 20px 22px;
        border-radius: 0 18px 18px 0;
    }

    .ux-quote-icon {
        width: 24px;
        height: 24px;
        top: 14px;
        left: 14px;
    }

    .ux-bio-quote p {
        font-size: 1rem;
        line-height: 1.65;
    }

    .ux-link-arrow {
        font-size: 1rem;
    }
}

/* --- Tablette portrait / gros mobile --- */
@media (max-width: 768px) {
    .ux-transition-cta {
        padding: 34px 16px 0;
    }

    .ux-bio-light {
        padding: 38px 16px 64px;
    }

    .ux-bio-header {
        margin-bottom: 34px;
    }

    .ux-bio-grid {
        gap: 28px;
    }

    .ux-bio-video-col {
        padding: 8px;
    }

    .ux-video-backdrop {
        transform: translate(-8px, 8px);
        border-radius: 24px;
    }

    .ux-video-glass-frame {
        padding: 10px;
        border-radius: 20px;
    }

    .ux-video-ratio {
        border-radius: 14px;
    }

    .ux-bio-heading {
        font-size: 1.32rem;
        letter-spacing: -0.3px;
    }

    .ux-bio-paragraph {
        font-size: 0.94rem;
        line-height: 1.65;
    }

    .ux-bio-quote {
        padding: 18px 16px 18px 18px;
        border-left-width: 3px;
        border-radius: 0 14px 14px 0;
    }

    .ux-quote-icon {
        width: 20px;
        height: 20px;
        top: 12px;
        left: 12px;
        opacity: 0.14;
    }

    .ux-bio-quote p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .ux-bio-action {
        margin-top: 10px;
    }

    .ux-link-arrow {
        font-size: 0.95rem;
        gap: 8px;
    }
}

/* --- Mobile --- */
@media (max-width: 576px) {
    .ux-transition-cta {
        padding: 28px 14px 0;
    }

    .ux-bio-light {
        padding: 30px 14px 52px;
    }

    .ux-bio-grid {
        gap: 22px;
    }

    .ux-bio-video-col {
        padding: 0;
    }

    .ux-video-backdrop {
        transform: translate(-6px, 6px);
        border-radius: 20px;
    }

    .ux-video-glass-frame {
        padding: 8px;
        border-radius: 16px;
    }

    .ux-video-ratio {
        border-radius: 12px;
    }

    .ux-bio-text-col {
        gap: 14px;
    }

    .ux-bio-heading {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .ux-bio-paragraph {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .ux-bio-quote {
        margin: 4px 0;
        padding: 16px 14px 16px 14px;
        border-left-width: 3px;
        border-radius: 0 12px 12px 0;
    }

    .ux-quote-icon {
        display: none;
    }

    .ux-bio-quote p {
        font-size: 0.9rem;
        line-height: 1.65;
        font-style: italic;
    }

    .ux-link-arrow {
        font-size: 0.9rem;
        line-height: 1.4;
    }
}

/* --- Très petits smartphones --- */
@media (max-width: 380px) {
    .ux-transition-cta {
        padding: 24px 12px 0;
    }

    .ux-bio-light {
        padding: 26px 12px 46px;
    }

    .ux-bio-heading {
        font-size: 1.02rem;
    }

    .ux-bio-paragraph {
        font-size: 0.86rem;
    }

    .ux-bio-quote {
        padding: 14px 12px;
    }

    .ux-bio-quote p {
        font-size: 0.86rem;
    }

    .ux-link-arrow {
        font-size: 0.86rem;
    }
}

/* --- Tactile : hover neutralisé proprement --- */
@media (hover: none) and (pointer: coarse) {
    .youtube-facade:hover .play-btn {
        background-color: rgba(33, 33, 33, 0.8);
    }

    .ux-link-arrow:hover .arrow {
        transform: none;
    }

    .ux-link-arrow:hover {
        color: var(--wine-red);
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-fdf259b *//* ==========================================================================
   SECTION TÉMOIGNAGES (LIVRE D'OR) - SERENITY LIGHT 2026
   ========================================================================== */

:root {
    --bg-main: #FBF8FF;
    --bg-card: #F3EBFF;
    --text-dark: #2D1E40;
    --text-muted: #564D65;
    --amethyst: #8E44AD;
    --amethyst-light: #B270CD;
    --gold: #D4AC0D;
    --border-soft: rgba(142, 68, 173, 0.1);
}

.ux-testimonials-section {
    position: relative;
    background-color: var(--bg-main);
    padding: 100px 20px;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Halos d'ambiance (Très diffus pour fond clair) */
.testimo-glow-top {
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(142, 68, 173, 0.06), transparent 70%);
    top: -10%; left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}
.testimo-glow-bottom {
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(212, 172, 13, 0.05), transparent 70%);
    bottom: -15%; right: -5%;
    pointer-events: none;
}

.ux-testimo-container {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}

/* --- En-tête --- */
.ux-testimo-header {
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ux-testimo-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 15px auto 30px;
    line-height: 1.6;
}

/* Indicateur de scroll (Version Améthyste) */
.ux-scroll-indicator {
    width: 26px;
    height: 44px;
    border: 2px solid var(--border-soft);
    border-radius: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.mouse-wheel {
    width: 4px; height: 8px;
    background: var(--amethyst);
    border-radius: 2px;
    margin-top: 8px;
    animation: scrollWheel 2s infinite ease-in-out;
}
@keyframes scrollWheel {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(18px); opacity: 0; }
}

/* --- Grille des Cartes --- */
.ux-testimo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 30px;
    margin-bottom: 60px;
}.ux-author-box,
.ux-details-summary,
.summary-text {
    min-width: 0;
}

/* --- Cartes Témoignages (Style "Purity") --- */
.ux-testimo-card {
    background: #ffffff;
    border: 1px solid var(--border-soft);
    border-radius: 32px;
    padding: 45px 35px;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
    box-shadow: 0 10px 30px rgba(45, 30, 64, 0.03);
}

.ux-testimo-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(142, 68, 173, 0.08);
    border-color: var(--amethyst-light);
}

/* Carte mise en avant (Highlight Or & Lilas) */
.ux-card-highlight {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-card) 100%);
    border: 1px solid var(--gold);
    box-shadow: 0 15px 45px rgba(212, 172, 13, 0.1);
}

/* Étoiles (Or mat sans ombre portée agressive) */
.ux-stars {
    color: var(--gold);
    font-size: 1.3rem;
    letter-spacing: 4px;
    margin-bottom: 25px;
}

/* Texte de la citation */
.ux-quote-text {
    font-size: 1.05rem;
    color: var(--text-dark);
    line-height: 1.8;
    font-style: italic;
    margin: 0 0 30px 0;
    flex-grow: 1;
}

/* --- Auteur --- */
.ux-author-box {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid var(--bg-card);
    padding-top: 25px;
}

.ux-avatar {
    width: 48px; height: 48px;
    border-radius: 16px; /* Squircle pour l'avatar aussi */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
}
/* Dégradés frais pour les avatars */
.avatar-amethyst { background: linear-gradient(135deg, var(--amethyst), var(--amethyst-light)); }
.avatar-gold { background: linear-gradient(135deg, var(--gold), #F1C40F); }

.ux-author-name {
    font-weight: 800;
    color: var(--text-dark);
    font-size: 1rem;
    margin: 0;
}

.ux-author-loc {
    font-size: 0.85rem;
    color: var(--text-muted);
}.ux-testimo-image {
    width: 100%;
    max-width: 520px;
    margin: 10px auto 22px;
    padding: 10px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.10), rgba(212, 172, 13, 0.08));
    border: 1px solid var(--border-soft);
    box-shadow: 0 18px 40px rgba(45, 30, 64, 0.06);
}

.ux-testimo-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: contain;
    object-position: center;
    border-radius: 20px;
}

/* ==========================================================================
   ACCORDÉON UI (FAQ / DÉTAILS)
   ========================================================================== */
.ux-details-accordion {
    background: #ffffff;
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.ux-details-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 35px;
    cursor: pointer;
    list-style: none;
    background: #ffffff;
    transition: background 0.3s ease;
}

.ux-details-summary::-webkit-details-marker { display: none; }

.ux-details-summary:hover {
    background: var(--bg-card);
}

.summary-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.summary-icon {
    font-size: 1.5rem;
    color: var(--amethyst);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ux-details-accordion[open] .summary-icon {
    transform: rotate(45deg);
    color: var(--gold);
}

.ux-details-content {
    padding: 0 35px 30px;
    background: #ffffff;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ==========================================================================
   RESPONSIVE ULTRA PROPRE
   ========================================================================== */

/* --- Desktop moyen / petit laptop --- */
@media (max-width: 1200px) {
    .ux-testimonials-section {
        padding: 90px 24px;
    }

    .ux-testimo-container {
        max-width: 1000px;
    }

    .ux-testimo-header {
        margin-bottom: 48px;
    }

    .ux-testimo-subtitle {
        font-size: 1.02rem;
        margin: 12px auto 24px;
    }

    .ux-testimo-grid {
        gap: 24px;
        margin-bottom: 48px;
    }

    .ux-testimo-card {
        padding: 36px 28px;
        border-radius: 28px;
    }

    .ux-stars {
        font-size: 1.15rem;
        margin-bottom: 18px;
        letter-spacing: 3px;
    }

    .ux-quote-text {
        font-size: 1rem;
        line-height: 1.72;
        margin-bottom: 24px;
    }

    .ux-author-box {
        padding-top: 20px;
    }

    .ux-details-summary {
        padding: 22px 28px;
    }

    .summary-text {
        font-size: 1rem;
    }

    .ux-details-content {
        padding: 0 28px 24px;
        font-size: 0.98rem;
    }
}

/* --- Tablette / petit laptop --- */
@media (max-width: 992px) {
    .ux-testimonials-section {
        padding: 78px 20px;
    }

    .ux-testimo-header {
        margin-bottom: 40px;
    }

    .ux-testimo-subtitle {
        font-size: 0.98rem;
        line-height: 1.65;
        margin: 12px auto 20px;
    }

    .ux-testimo-grid {
        grid-template-columns: 1fr;
        max-width: 720px;
        margin: 0 auto 42px;
        gap: 20px;
    }

    .ux-testimo-card {
        padding: 30px 24px;
        border-radius: 24px;
    }

    .ux-testimo-image {
        max-width: 100%;
        margin: 8px auto 18px;
        padding: 8px;
        border-radius: 22px;
    }

    .ux-testimo-image img {
        max-height: 260px;
        border-radius: 16px;
    }

    .ux-details-summary {
        padding: 18px 22px;
        gap: 16px;
    }

    .summary-text {
        font-size: 0.98rem;
        line-height: 1.45;
    }

    .summary-icon {
        font-size: 1.3rem;
        flex-shrink: 0;
    }

    .ux-details-content {
        padding: 0 22px 22px;
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .testimo-glow-top {
        width: 420px;
        height: 420px;
    }

    .testimo-glow-bottom {
        width: 340px;
        height: 340px;
    }
}

/* --- Tablette portrait / gros mobile --- */
@media (max-width: 768px) {
    .ux-testimonials-section {
        padding: 64px 16px;
    }

    .ux-testimo-header {
        margin-bottom: 34px;
    }

    .ux-testimo-subtitle {
        font-size: 0.94rem;
        margin: 10px auto 18px;
    }

    .ux-scroll-indicator {
        width: 22px;
        height: 38px;
    }

    .mouse-wheel {
        margin-top: 7px;
    }

    .ux-testimo-grid {
        gap: 16px;
        margin-bottom: 34px;
    }

    .ux-testimo-card {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .ux-testimo-card:hover {
        transform: none;
    }

    .ux-stars {
        font-size: 1rem;
        letter-spacing: 2px;
        margin-bottom: 14px;
    }

    .ux-quote-text {
        font-size: 0.92rem;
        line-height: 1.68;
        margin-bottom: 18px;
    }

    .ux-author-box {
        gap: 12px;
        padding-top: 16px;
    }

    .ux-avatar {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .ux-author-name {
        font-size: 0.94rem;
    }

    .ux-author-loc {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .ux-testimo-image {
        margin: 6px auto 16px;
        padding: 7px;
        border-radius: 18px;
    }

    .ux-testimo-image img {
        max-height: 220px;
        border-radius: 14px;
    }

    .ux-details-accordion {
        border-radius: 18px;
    }

    .ux-details-summary {
        padding: 16px 16px;
        gap: 12px;
        align-items: center;
    }

    .summary-text {
        font-size: 0.92rem;
    }

    .summary-icon {
        font-size: 1.15rem;
    }

    .ux-details-content {
        padding: 0 16px 18px;
        font-size: 0.9rem;
        line-height: 1.65;
    }
}

/* --- Mobile --- */
@media (max-width: 576px) {
    .ux-testimonials-section {
        padding: 54px 14px;
    }

    .ux-testimo-header {
        margin-bottom: 28px;
    }

    .ux-testimo-subtitle {
        font-size: 0.9rem;
        line-height: 1.6;
        margin: 8px auto 16px;
    }

    .ux-scroll-indicator {
        display: none;
    }

    .ux-testimo-grid {
        gap: 14px;
        margin-bottom: 28px;
    }

    .ux-testimo-card {
        padding: 20px 14px;
        border-radius: 18px;
    }

    .ux-stars {
        font-size: 0.92rem;
        letter-spacing: 1.5px;
        margin-bottom: 12px;
    }

    .ux-quote-text {
        font-size: 0.88rem;
        line-height: 1.62;
        margin-bottom: 16px;
    }

    .ux-author-box {
        gap: 10px;
        padding-top: 14px;
    }

    .ux-avatar {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 0.92rem;
    }

    .ux-author-name {
        font-size: 0.9rem;
    }

    .ux-author-loc {
        font-size: 0.76rem;
    }

    .ux-testimo-image {
        margin: 4px auto 14px;
        padding: 6px;
        border-radius: 16px;
    }

    .ux-testimo-image img {
        max-height: 190px;
        border-radius: 12px;
    }

    .ux-details-accordion {
        border-radius: 16px;
    }

    .ux-details-summary {
        padding: 14px 14px;
    }

    .summary-text {
        font-size: 0.88rem;
        line-height: 1.45;
    }

    .summary-icon {
        font-size: 1rem;
    }

    .ux-details-content {
        padding: 0 14px 16px;
        font-size: 0.86rem;
    }

    .testimo-glow-top,
    .testimo-glow-bottom {
        display: none;
    }
}

/* --- Très petits mobiles --- */
@media (max-width: 380px) {
    .ux-testimonials-section {
        padding: 46px 12px;
    }

    .ux-testimo-card {
        padding: 18px 12px;
    }

    .ux-quote-text {
        font-size: 0.84rem;
    }

    .ux-author-name {
        font-size: 0.86rem;
    }

    .ux-author-loc {
        font-size: 0.72rem;
    }

    .ux-testimo-image img {
        max-height: 170px;
    }

    .summary-text {
        font-size: 0.84rem;
    }

    .ux-details-content {
        font-size: 0.82rem;
    }
}

/* --- Tactile : hover neutralisé --- */
@media (hover: none) and (pointer: coarse) {
    .ux-testimo-card:hover {
        transform: none;
        box-shadow: 0 10px 30px rgba(45, 30, 64, 0.03);
        border-color: var(--border-soft);
    }

    .ux-details-summary:hover {
        background: #ffffff;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-89efca2 *//* ==========================================================================
   SECTION FIDÉLITÉ (POURQUOI MOI) - BENTO & GLASS 2026 (CORRIGÉ)
   ========================================================================== */

:root {
    --bg-main: #FBF8FF;           
    --bg-card: #F3EBFF;           
    --text-dark: #2D1E40;         
    --text-muted: #564D65;        
    --amethyst: #8E44AD;          
    --wine: #9A2A5B;              /* Ton accent Wine ajouté ici */
}

.ux-fidelity-section {
    position: relative;
    background-color: var(--bg-main);
    padding: 100px 20px;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* --- Halos ambiants (Adaptés à tes classes HTML) --- */
.ambient-glow {
    position: absolute;
    pointer-events: none;
    mask-image: radial-gradient(circle, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
}

.glow-wine-left {
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(154, 42, 91, 0.08), transparent 70%); /* Halo Wine */
    top: -20%; left: -15%;
}

.glow-purple-right {
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(142, 68, 173, 0.06), transparent 70%); /* Halo Améthyste */
    bottom: -30%; right: -20%;
}

.ux-fidelity-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- En-tête --- */
.ux-section-header {
    margin-bottom: 70px;
}

.text-center {
    text-align: center;
}

.ux-overline-dark {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--amethyst);
    margin-bottom: 20px;
    background: rgba(243, 235, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 24px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 15px rgba(142, 68, 173, 0.05);
}

.ux-section-title-dark {
        font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--text-dark);
    margin: 0;
    letter-spacing: -1.5px;
    line-height: 1.1;
}

/* --- Grille Bento --- */
.ux-fidelity-grid {
    display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

/* --- Design des Cartes --- */
.ux-fidelity-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 32px;
    padding: 45px 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    box-shadow: 0 20px 40px rgba(45, 30, 64, 0.03), inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.ux-fidelity-card:hover {
    transform: translateY(-8px);
    border-color: rgba(142, 68, 173, 0.3);
    box-shadow: 0 30px 60px rgba(142, 68, 173, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* --- Les Icônes (Adaptées à ux-card-icon-glass) --- */
.ux-card-icon-glass {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(243, 235, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 35px;
    box-shadow: 0 10px 25px rgba(142, 68, 173, 0.08), inset 0 2px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ux-emoji {
    transition: transform 0.3s ease;
}

/* Au survol de la carte : l'icône s'illumine avec les couleurs de la marque */
.ux-fidelity-card:hover .ux-card-icon-glass {
    background: linear-gradient(135deg, var(--wine) 0%, var(--amethyst) 100%);
    transform: scale(1.08) translateY(-5px);
    box-shadow: 0 15px 30px rgba(142, 68, 173, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.3);
    border-color: transparent;
}

.ux-fidelity-card:hover .ux-emoji {
    transform: scale(1.15); /* Agrandit l'emoji au survol */
}

/* --- La Typographie interne --- */
.ux-card-heading-dark {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 16px 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.ux-card-text-dark {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Accentuation Wine pour les mots clés (Adapté à text-wine-accent) */
.text-wine-accent {
    color: var(--wine);
    font-weight: 800;
    background: linear-gradient(90deg, var(--wine), var(--amethyst));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}.ux-fidelity-image {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 50px;
    padding: 10px;
    border-radius: 32px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(154, 42, 91, 0.10), rgba(142, 68, 173, 0.10));
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 40px rgba(45, 30, 64, 0.05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ux-fidelity-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    object-position: center;
    border-radius: 24px;
}

/* ==========================================================================
   RESPONSIVE ULTRA CLEAN
   ========================================================================== */

/* Grand laptop / petit desktop */
@media (max-width: 1200px) {
    .ux-fidelity-section {
        padding: 90px 24px;
    }

    .ux-fidelity-container {
        max-width: 1100px;
    }

    .ux-fidelity-grid {
        gap: 28px;
    }

    .ux-fidelity-card {
        padding: 40px 34px;
        border-radius: 28px;
    }

    .ux-fidelity-image {
        max-width: 520px;
        margin: 0 auto 42px;
    }

    .ux-fidelity-image img {
        max-height: 380px;
    }

    .glow-wine-left {
        width: 560px;
        height: 560px;
        left: -18%;
        top: -18%;
    }

    .glow-purple-right {
        width: 620px;
        height: 620px;
        right: -18%;
        bottom: -22%;
    }
}

/* Tablette paysage */
@media (max-width: 992px) {
    .ux-fidelity-section {
        padding: 80px 20px;
    }

    .ux-section-header {
        margin-bottom: 55px;
    }

    .ux-overline-dark {
        font-size: 0.78rem;
        letter-spacing: 1.6px;
        padding: 8px 20px;
    }

    .ux-section-title-dark {
        font-size: 2.2rem;
        letter-spacing: -1.2px;
        line-height: 1.15;
    }

    .ux-fidelity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .ux-fidelity-card {
        padding: 34px 28px;
        border-radius: 26px;
    }

    .ux-card-icon-glass {
        width: 64px;
        height: 64px;
        font-size: 1.8rem;
        border-radius: 20px;
        margin-bottom: 24px;
    }

    .ux-card-heading-dark {
        font-size: 1.35rem;
        margin-bottom: 12px;
    }

    .ux-card-text-dark {
        font-size: 1rem;
        line-height: 1.65;
    }

    .ux-fidelity-image {
        max-width: 100%;
        margin: 0 auto 36px;
        padding: 8px;
        border-radius: 26px;
    }

    .ux-fidelity-image img {
        max-height: 320px;
        border-radius: 20px;
    }

    .glow-wine-left {
        width: 420px;
        height: 420px;
        left: -22%;
        top: -12%;
    }

    .glow-purple-right {
        width: 480px;
        height: 480px;
        right: -22%;
        bottom: -18%;
    }
}

/* Tablette portrait */
@media (max-width: 768px) {
    .ux-fidelity-section {
        padding: 70px 16px;
    }

    .ux-section-header {
        margin-bottom: 42px;
    }

    .ux-overline-dark {
        font-size: 0.72rem;
        letter-spacing: 1.4px;
        padding: 7px 16px;
        margin-bottom: 16px;
    }

    .ux-section-title-dark {
        font-size: 1.95rem;
        letter-spacing: -1px;
        line-height: 1.15;
    }

    .ux-fidelity-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ux-fidelity-card {
        padding: 30px 24px;
        border-radius: 24px;
        align-items: center;
        text-align: center;
    }

    .ux-card-icon-glass {
        width: 60px;
        height: 60px;
        font-size: 1.7rem;
        border-radius: 18px;
        margin-bottom: 20px;
    }

    .ux-card-heading-dark {
        font-size: 1.25rem;
        line-height: 1.25;
    }

    .ux-card-text-dark {
        font-size: 0.98rem;
        line-height: 1.6;
    }

    .ux-fidelity-image {
        margin: 0 auto 30px;
        padding: 8px;
        border-radius: 22px;
    }

    .ux-fidelity-image img {
        max-height: 280px;
        border-radius: 18px;
    }

    .glow-wine-left,
    .glow-purple-right {
        opacity: 0.7;
        filter: blur(10px);
    }
}

/* Mobile large */
@media (max-width: 576px) {
    .ux-fidelity-section {
        padding: 60px 14px;
    }

    .ux-section-header {
        margin-bottom: 34px;
    }

    .ux-overline-dark {
        font-size: 0.68rem;
        letter-spacing: 1.2px;
        padding: 6px 14px;
        border-radius: 999px;
    }

    .ux-section-title-dark {
        font-size: 1.7rem;
        letter-spacing: -0.8px;
        line-height: 1.18;
    }

    .ux-fidelity-card {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .ux-card-icon-glass {
        width: 54px;
        height: 54px;
        font-size: 1.45rem;
        border-radius: 16px;
        margin-bottom: 18px;
    }

    .ux-card-heading-dark {
        font-size: 1.12rem;
        margin-bottom: 10px;
    }

    .ux-card-text-dark {
        font-size: 0.94rem;
        line-height: 1.55;
    }

    .ux-fidelity-image {
        margin: 0 auto 24px;
        padding: 6px;
        border-radius: 18px;
    }

    .ux-fidelity-image img {
        max-height: 230px;
        border-radius: 14px;
        object-fit: cover;
    }

    .glow-wine-left {
        width: 280px;
        height: 280px;
        left: -30%;
        top: -10%;
    }

    .glow-purple-right {
        width: 320px;
        height: 320px;
        right: -30%;
        bottom: -12%;
    }
}

/* Très petit mobile */
@media (max-width: 400px) {
    .ux-fidelity-section {
        padding: 52px 12px;
    }

    .ux-overline-dark {
        font-size: 0.62rem;
        letter-spacing: 1px;
        padding: 6px 12px;
    }

    .ux-section-title-dark {
        font-size: 1.45rem;
        line-height: 1.2;
    }

    .ux-fidelity-card {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .ux-card-icon-glass {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        border-radius: 14px;
    }

    .ux-card-heading-dark {
        font-size: 1.02rem;
    }

    .ux-card-text-dark {
        font-size: 0.9rem;
    }

    .ux-fidelity-image img {
        max-height: 190px;
    }
}

/* Écrans tactiles : on évite les hover agressifs */
@media (hover: none) and (pointer: coarse) {
    .ux-fidelity-card:hover {
        transform: none;
        border-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0 20px 40px rgba(45, 30, 64, 0.03), inset 0 1px 0 rgba(255, 255, 255, 1);
    }

    .ux-fidelity-card:hover .ux-card-icon-glass {
        background: linear-gradient(135deg, rgba(243, 235, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%);
        transform: none;
        box-shadow: 0 10px 25px rgba(142, 68, 173, 0.08), inset 0 2px 0 rgba(255, 255, 255, 0.8);
        border-color: rgba(255, 255, 255, 0.9);
    }

    .ux-fidelity-card:hover .ux-emoji {
        transform: none;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c71bd52 *//* ==========================================================================
   SECTION BLOG - LIGHT MODE 2026
   ========================================================================== */

:root {
    --wine-red: #A9445B;
    --text-dark: #1a0e24; 
    --text-muted: #64748b;
    --surface-white: #ffffff;
    --bg-light-gray: #fafafa;
    --border-soft: #f1f5f9;
}

.ux-blog-light {
    /* Fond très légèrement teinté pour faire ressortir la blancheur des cartes */
    background-color: var(--bg-light-gray);
    padding: 100px 20px;
    font-family: system-ui, -apple-system, sans-serif;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
}

.ux-blog-container {
    max-width: 1000px; /* Largeur optimale pour la lecture */
    margin: 0 auto;
}

.text-center { text-align: center; }

/* --- En-tête --- */
.ux-section-header {
    margin-bottom: 60px;
}

.ux-overline {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--wine-red);
    margin-bottom: 15px;
    background: rgba(169, 68, 91, 0.08);
    padding: 6px 16px;
    border-radius: 100px;
}

.ux-section-title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0;
    letter-spacing: -0.5px;
}

/* --- Grille du Blog --- */
.ux-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

/* --- Cartes Articles (Soft UI) --- */
.ux-blog-card-light {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Assure l'alignement des boutons en bas */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Ombre ultra-douce typique du design 2026 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02), 0 2px 10px rgba(0, 0, 0, 0.01);
    height: 100%;
}

.ux-blog-card-light:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    /* Apparition subtile de la couleur de la marque sur la bordure */
    border-color: rgba(169, 68, 91, 0.15);
}

.ux-blog-content {
    margin-bottom: 30px;
}

/* --- Étiquettes (Tags Light) --- */
.ux-tag-wrapper {
    margin-bottom: 20px;
}

.ux-tag-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tag-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
}

/* Tag Rose (Amour) */
.tag-pink-light {
    background: #fdf2f8;
    color: #db2777;
    border: 1px solid #fbcfe8;
}
.tag-pink-light .tag-dot { background-color: #db2777; }

/* Tag Vert (Destin/Année) */
.tag-green-light {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}
.tag-green-light .tag-dot { background-color: #059669; }

/* --- Typographie Article --- */
.ux-blog-title-light {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.35;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.ux-blog-excerpt-light {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* --- Bouton "Lire la suite" --- */
.ux-read-more-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ux-read-more-light .arrow {
    transition: transform 0.3s ease;
}

.ux-read-more-light:hover .arrow {
    transform: translateX(5px); /* Micro-interaction de la flèche */
}

.link-pink { color: #db2777; }
.link-pink:hover { color: #be185d; }

.link-green { color: #059669; }
.link-green:hover { color: #047857; }

/* --- Bouton Global (Voir tous les articles) --- */
.ux-blog-footer {
    margin-top: 20px;
}

.ux-link-underlined-light {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
    text-decoration: none;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

/* Animation élégante du soulignement */
.ux-link-underlined-light::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--wine-red);
    transform: scaleX(0.3);
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ux-link-underlined-light:hover {
    color: var(--wine-red);
}

.ux-link-underlined-light:hover::after {
    transform: scaleX(1); /* S'étend sur toute la largeur au survol */
}

/* ==========================================================================
   RESPONSIVE DESIGN ULTRA PROPRE
   ========================================================================== */

/* Grand laptop / petit desktop */
@media (max-width: 1200px) {
    .ux-blog-light {
        padding: 90px 24px;
    }

    .ux-blog-container {
        max-width: 960px;
    }

    .ux-section-header {
        margin-bottom: 52px;
    }

    .ux-blog-grid {
        gap: 30px;
        margin-bottom: 50px;
    }

    .ux-blog-card-light {
        padding: 34px 30px;
        border-radius: 22px;
    }
}

/* Tablette paysage */
@media (max-width: 992px) {
    .ux-blog-light {
        padding: 80px 20px;
    }

    .ux-section-header {
        margin-bottom: 46px;
    }

    .ux-overline {
        font-size: 0.78rem;
        letter-spacing: 1.6px;
        padding: 6px 14px;
        margin-bottom: 14px;
    }

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

    .ux-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        margin-bottom: 46px;
    }

    .ux-blog-card-light {
        padding: 30px 24px;
        border-radius: 20px;
    }

    .ux-blog-content {
        margin-bottom: 24px;
    }

    .ux-blog-title-light {
        font-size: 1.25rem;
        line-height: 1.35;
        margin-bottom: 12px;
    }

    .ux-blog-excerpt-light {
        font-size: 1rem;
        line-height: 1.6;
    }

    .ux-read-more-light {
        font-size: 1rem;
    }

    .ux-link-underlined-light {
        font-size: 1.05rem;
    }
}

/* Tablette portrait */
@media (max-width: 768px) {
    .ux-blog-light {
        padding: 68px 16px;
    }

    .ux-section-header {
        margin-bottom: 38px;
    }

    .ux-overline {
        font-size: 0.72rem;
        letter-spacing: 1.4px;
        padding: 6px 12px;
        margin-bottom: 12px;
    }

    .ux-section-title {
        font-size: 1.65rem;
        line-height: 1.2;
        letter-spacing: -0.4px;
    }

    .ux-blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 38px;
    }

    .ux-blog-card-light {
        padding: 26px 20px;
        border-radius: 18px;
    }

    .ux-tag-wrapper {
        margin-bottom: 16px;
    }

    .ux-tag-light {
        font-size: 0.74rem;
        padding: 6px 12px;
        gap: 6px;
    }

    .ux-blog-content {
        margin-bottom: 22px;
    }

    .ux-blog-title-light {
        font-size: 1.18rem;
        line-height: 1.35;
        margin-bottom: 10px;
    }

    .ux-blog-excerpt-light {
        font-size: 0.96rem;
        line-height: 1.58;
    }

    .ux-read-more-light {
        font-size: 0.98rem;
        gap: 6px;
    }

    .ux-blog-footer {
        margin-top: 10px;
    }

    .ux-link-underlined-light {
        font-size: 1rem;
    }
}

/* Mobile large */
@media (max-width: 576px) {
    .ux-blog-light {
        padding: 56px 14px;
    }

    .ux-section-header {
        margin-bottom: 32px;
    }

    .ux-overline {
        font-size: 0.66rem;
        letter-spacing: 1.2px;
        padding: 5px 11px;
        margin-bottom: 10px;
    }

    .ux-section-title {
        font-size: 1.45rem;
        line-height: 1.22;
    }

    .ux-blog-grid {
        gap: 16px;
        margin-bottom: 32px;
    }

    .ux-blog-card-light {
        padding: 22px 16px;
        border-radius: 16px;
    }

    .ux-tag-light {
        font-size: 0.68rem;
        padding: 5px 10px;
        letter-spacing: 0.8px;
    }

    .tag-dot {
        width: 5px;
        height: 5px;
    }

    .ux-blog-title-light {
        font-size: 1.08rem;
        margin-bottom: 8px;
    }

    .ux-blog-excerpt-light {
        font-size: 0.92rem;
        line-height: 1.55;
    }

    .ux-read-more-light {
        font-size: 0.93rem;
    }

    .ux-link-underlined-light {
        font-size: 0.95rem;
        padding-bottom: 3px;
    }
}

/* Très petit mobile */
@media (max-width: 400px) {
    .ux-blog-light {
        padding: 48px 12px;
    }

    .ux-section-title {
        font-size: 1.28rem;
    }

    .ux-blog-card-light {
        padding: 18px 14px;
        border-radius: 14px;
    }

    .ux-blog-title-light {
        font-size: 1rem;
        line-height: 1.32;
    }

    .ux-blog-excerpt-light {
        font-size: 0.88rem;
    }

    .ux-read-more-light,
    .ux-link-underlined-light {
        font-size: 0.9rem;
    }
}

/* Désactive les hover trop agressifs sur mobile/tactile */
@media (hover: none) and (pointer: coarse) {
    .ux-blog-card-light:hover {
        transform: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02), 0 2px 10px rgba(0, 0, 0, 0.01);
        border-color: var(--border-soft);
    }

    .ux-read-more-light:hover .arrow {
        transform: none;
    }

    .ux-link-underlined-light:hover::after {
        transform: scaleX(0.3);
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-3befd13 *//* ==========================================================================
   BANNIÈRE DE CONTACT FINALE - LIGHT MODE 2026
   ========================================================================== */

:root {
    --wine-red: #A9445B;
    --text-dark: #1a0e24; 
    --text-muted: #64748b;
    --surface-white: #ffffff;
    --bg-very-light: #fafafb;
}

.ux-contact-light {
    /* Fond de la section très clair pour faire ressortir la carte blanche */
    background-color: var(--bg-very-light);
    padding: 100px 20px;
    display: flex;
    justify-content: center;
    font-family: system-ui, -apple-system, sans-serif;
}

/* --- La Grande Carte Finale (Elevation Card) --- */
.ux-contact-card {
    background-color: var(--surface-white);
    max-width: 900px;
    width: 100%;
    border-radius: 40px; /* Bords très arrondis, très 2026 */
    padding: 80px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Ombre très ample et douce pour l'effet de lévitation */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.03), 0 5px 15px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.ux-contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 35px 60px rgba(169, 68, 91, 0.05), 0 10px 20px rgba(0, 0, 0, 0.02);
}

/* --- Effet de fond subtil (Mesh Gradient) --- */
.ux-contact-mesh {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Un halo bordeaux extrêmement clair en haut de la carte */
    background: radial-gradient(circle at 50% 0%, rgba(169, 68, 91, 0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.ux-contact-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Icône d'en-tête --- */
.ux-icon-badge-large {
    width: 80px; height: 80px;
    background: #fff0f4; /* Bordeaux super clair */
    border-radius: 24px; /* Squircle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
    box-shadow: 0 10px 20px rgba(169, 68, 91, 0.1);
    color: var(--wine-red);
}

/* --- Typographie --- */
.ux-contact-title {
       font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.2;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
}

.ux-contact-desc {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 650px;
    line-height: 1.6;
    margin: 0 0 40px 0;
}

.text-wine-bold {
    color: var(--wine-red);
    font-weight: 800;
}

/* --- Le Bouton d'Appel (Massive CTA) --- */
.ux-contact-actions {
    margin-bottom: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.ux-btn-call-massive {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, var(--wine-red) 0%, #8a364a 100%);
    color: #ffffff;
    padding: 20px 50px;
    border-radius: 100px; /* Forme de pilule géante */
    text-decoration: none;
    box-shadow: 0 15px 35px rgba(169, 68, 91, 0.25);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ux-btn-call-massive:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 45px rgba(169, 68, 91, 0.4);
     background: #fff;
}

.ux-btn-call-massive .phone-number {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 1px;
}

.ux-btn-call-massive .pulse-icon {
    font-size: 1.5rem;
    animation: wiggle 3s infinite;
}

@keyframes wiggle {
    0%, 90%, 100% { transform: rotate(0deg); }
    93% { transform: rotate(-15deg); }
    96% { transform: rotate(15deg); }
}

/* --- Footer de la carte (Lien secondaire) --- */
.ux-contact-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 30px;
    border-top: 1px solid rgba(0,0,0,0.05);
    width: 80%;
}

.ux-subtext {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
}

.ux-link-scroll-down {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wine-red);
    text-decoration: none;
    transition: color 0.3s ease;
}

.ux-link-scroll-down:hover {
    color: #7d3142;
}

/* Animation douce de la flèche vers le bas */
.arrow-bounce {
    display: inline-block;
    transition: transform 0.3s ease;
}

.ux-link-scroll-down:hover .arrow-bounce {
    transform: translateY(4px);
}

/* ==========================================================================
   RESPONSIVE DESIGN ULTRA PROPRE
   ========================================================================== */

/* Grand laptop / petit desktop */
@media (max-width: 1200px) {
    .ux-contact-light {
        padding: 90px 24px;
    }

    .ux-contact-card {
        max-width: 860px;
        padding: 70px 36px;
        border-radius: 34px;
    }

    .ux-icon-badge-large {
        width: 74px;
        height: 74px;
        font-size: 2.2rem;
        border-radius: 22px;
        margin-bottom: 26px;
    }

    .ux-contact-title {
        font-size: 1.9rem;
    }

    .ux-contact-desc {
        font-size: 1.12rem;
        max-width: 620px;
        margin-bottom: 34px;
    }

    .ux-contact-actions {
        margin-bottom: 34px;
    }

    .ux-btn-call-massive {
        padding: 18px 42px;
    }

    .ux-contact-footer {
        width: 85%;
    }
}

/* Tablette paysage */
@media (max-width: 992px) {
    .ux-contact-light {
        padding: 80px 20px;
    }

    .ux-contact-card {
        padding: 60px 30px;
        border-radius: 30px;
    }

    .ux-icon-badge-large {
        width: 68px;
        height: 68px;
        font-size: 2rem;
        border-radius: 20px;
        margin-bottom: 22px;
    }

    .ux-contact-title {
        font-size: 1.75rem;
        line-height: 1.2;
        letter-spacing: -0.8px;
    }

    .ux-contact-desc {
        font-size: 1.05rem;
        line-height: 1.6;
        max-width: 560px;
        margin-bottom: 30px;
    }

    .ux-contact-actions {
        margin-bottom: 30px;
    }

    .ux-btn-call-massive {
        gap: 12px;
        padding: 16px 34px;
    }

    .ux-btn-call-massive .phone-number {
        font-size: 0.98rem;
        letter-spacing: 0.8px;
    }

    .ux-btn-call-massive .pulse-icon {
        font-size: 1.35rem;
    }

    .ux-contact-footer {
        width: 90%;
        padding-top: 24px;
    }

    .ux-subtext {
        font-size: 0.96rem;
    }

    .ux-link-scroll-down {
        font-size: 1rem;
    }
}

/* Tablette portrait */
@media (max-width: 768px) {
    .ux-contact-light {
        padding: 68px 16px;
    }

    .ux-contact-card {
        padding: 48px 22px;
        border-radius: 26px;
    }

    .ux-icon-badge-large {
        width: 60px;
        height: 60px;
        font-size: 1.7rem;
        border-radius: 18px;
        margin-bottom: 18px;
    }

    .ux-contact-title {
        font-size: 1.55rem;
        line-height: 1.2;
        letter-spacing: -0.6px;
        margin-bottom: 14px;
    }

    .ux-contact-desc {
        font-size: 0.98rem;
        line-height: 1.58;
        margin-bottom: 26px;
    }

    .ux-contact-actions {
        margin-bottom: 26px;
    }

    .ux-btn-call-massive {
        width: 100%;
        justify-content: center;
        padding: 16px 24px;
        gap: 10px;
    }

    .ux-btn-call-massive .phone-number {
        font-size: 0.95rem;
        letter-spacing: 0.5px;
    }

    .ux-btn-call-massive .pulse-icon {
        font-size: 1.2rem;
    }

    .ux-contact-footer {
        width: 100%;
        padding-top: 20px;
        gap: 6px;
    }

    .ux-subtext {
        font-size: 0.92rem;
        text-align: center;
    }

    .ux-link-scroll-down {
        font-size: 0.96rem;
        text-align: center;
    }
}

/* Mobile large */
@media (max-width: 576px) {
    .ux-contact-light {
        padding: 56px 14px;
    }

    .ux-contact-card {
        padding: 38px 16px;
        border-radius: 22px;
    }

    .ux-icon-badge-large {
        width: 54px;
        height: 54px;
        font-size: 1.45rem;
        border-radius: 16px;
        margin-bottom: 16px;
    }

    .ux-contact-title {
        font-size: 1.35rem;
        line-height: 1.22;
        margin-bottom: 12px;
    }

    .ux-contact-desc {
        font-size: 0.92rem;
        line-height: 1.55;
        margin-bottom: 22px;
    }

    .ux-btn-call-massive {
        padding: 14px 18px;
        border-radius: 999px;
        gap: 8px;
    }

    .ux-btn-call-massive .phone-number {
        font-size: 0.88rem;
        letter-spacing: 0.3px;
    }

    .ux-btn-call-massive .pulse-icon {
        font-size: 1.05rem;
    }

    .ux-contact-footer {
        padding-top: 18px;
    }

    .ux-subtext {
        font-size: 0.88rem;
    }

    .ux-link-scroll-down {
        font-size: 0.9rem;
    }
}

/* Très petit mobile */
@media (max-width: 400px) {
    .ux-contact-light {
        padding: 48px 12px;
    }

    .ux-contact-card {
        padding: 32px 14px;
        border-radius: 18px;
    }

    .ux-icon-badge-large {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        border-radius: 14px;
    }

    .ux-contact-title {
        font-size: 1.18rem;
    }

    .ux-contact-desc {
        font-size: 0.88rem;
    }

    .ux-btn-call-massive {
        padding: 13px 14px;
    }

    .ux-btn-call-massive .phone-number {
        font-size: 0.8rem;
    }

    .ux-btn-call-massive .pulse-icon {
        font-size: 0.95rem;
    }

    .ux-subtext,
    .ux-link-scroll-down {
        font-size: 0.84rem;
    }
}

/* Mobile/tactile : on évite les hover trop agressifs */
@media (hover: none) and (pointer: coarse) {
    .ux-contact-card:hover {
        transform: none;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.03), 0 5px 15px rgba(0, 0, 0, 0.02);
    }

    .ux-btn-call-massive:hover {
        transform: none;
        box-shadow: 0 15px 35px rgba(169, 68, 91, 0.25);
    }

    .ux-link-scroll-down:hover .arrow-bounce {
        transform: none;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-a7eedd6 *//* ==========================================================================
   SECTION FAQ INTRO & MENU RAPIDE - LIGHT SERENITY 2026
   ========================================================================== */

:root {
    --bg-main: #FBF8FF;           /* Blanc cassé lilas */
    --bg-card: #F3EBFF;           /* Violet très pâle */
    --text-dark: #2D1E40;         /* Violet sombre */
    --text-muted: #564D65;        /* Gris-violet doux */
    --amethyst: #8E44AD;          /* Améthyste vibrant */
    --amethyst-light: #A569BD;    /* Améthyste clair */
    --gold: #D4AC0D;              /* Or mat (Alertes / Focus) */
    --border-soft: rgba(142, 68, 173, 0.1);
}

.ux-faq-light-section {
    position: relative;
    background-color: var(--bg-main);
    padding: 100px 20px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow: hidden;
}

/* Halos lumineux Aurora (Version Diurne) */
.faq-glow-top {
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(142, 68, 173, 0.05), transparent 70%);
    top: -10%; left: -5%;
    pointer-events: none;
}
.faq-glow-bottom {
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(212, 172, 13, 0.05), transparent 70%);
    bottom: -10%; right: -5%;
    pointer-events: none;
}

.ux-faq-container {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

.text-center { text-align: center; }

/* ==========================================
   PARTIE 1 : L'INTRODUCTION
   ========================================== */
.ux-faq-intro {
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ux-overline {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--amethyst);
    margin-bottom: 20px;
    background: var(--bg-card);
    padding: 8px 20px;
    border-radius: 100px;
    border: 1px solid var(--border-soft);
}

.ux-section-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 25px 0;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.ux-faq-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin: 0;
    max-width: 700px;
}

/* Accentuation Améthyste */
.text-amethyst-accent {
    color: var(--amethyst);
    font-weight: 800;
}

/* ==========================================
   PARTIE 2 : LE MENU "SOFT GLASS" (DOCK BLANC)
   ========================================== */
.ux-quick-nav-card {
    background: white;
    border: 1px solid var(--border-soft);
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(45, 30, 64, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.ux-quick-nav-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(142, 68, 173, 0.1);
    border-color: var(--amethyst-light);
}

.ux-nav-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    border-bottom: 1px dashed var(--border-soft);
    padding-bottom: 20px;
}

/* Le point lumineux (Focus Gold) */
.nav-pulse-dot {
    width: 10px; height: 10px;
    background-color: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(212, 172, 13, 0.6);
    position: relative;
}
.nav-pulse-dot::after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    background: var(--gold);
    border-radius: 50%;
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}

.ux-nav-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Conteneur des Boutons */
.ux-nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* --- Design des Pills --- */
.ux-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid transparent;
    color: var(--text-dark);
    padding: 12px 24px;
    border-radius: 16px; /* Squircle */
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pill-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

/* Interaction Pills */
.ux-pill:hover {
    background: var(--amethyst);
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(142, 68, 173, 0.2);
}

.ux-pill:hover .pill-icon {
    transform: scale(1.2) rotate(-5deg);
}

/* Bouton Spécial Or (Alerte / Urgent) */
.pill-alert {
    background: rgba(212, 172, 13, 0.1);
    color: var(--gold);
    border-color: rgba(212, 172, 13, 0.2);
}

.pill-alert:hover {
    background: var(--gold);
    color: white;
    border-color: var(--gold);
    box-shadow: 0 10px 20px rgba(212, 172, 13, 0.2);
}
.ux-pill {
    min-width: 0;
    text-align: left;
}
/* ==========================================================================
   RESPONSIVE ULTRA PROPRE
   ========================================================================== */

/* Grand laptop / petit desktop */
@media (max-width: 1200px) {
    .ux-faq-light-section {
        padding: 90px 24px;
    }

    .ux-faq-container {
        max-width: 880px;
    }

    .ux-faq-intro {
        margin-bottom: 52px;
    }

    .ux-section-title {
        font-size: 2.7rem;
        letter-spacing: -1.2px;
    }

    .ux-faq-subtitle {
        font-size: 1.08rem;
        max-width: 660px;
    }

    .ux-quick-nav-card {
        padding: 34px;
        border-radius: 28px;
    }

    .faq-glow-top {
        width: 500px;
        height: 500px;
        left: -10%;
        top: -8%;
    }

    .faq-glow-bottom {
        width: 420px;
        height: 420px;
        right: -10%;
        bottom: -8%;
    }
}

/* Tablette paysage */
@media (max-width: 992px) {
    .ux-faq-light-section {
        padding: 80px 20px;
    }

    .ux-faq-intro {
        margin-bottom: 44px;
    }

    .ux-overline {
        font-size: 0.78rem;
        letter-spacing: 1.6px;
        padding: 7px 16px;
        margin-bottom: 16px;
    }

    .ux-section-title {
        font-size: 2.3rem;
        line-height: 1.12;
        margin-bottom: 18px;
    }

    .ux-faq-subtitle {
        font-size: 1rem;
        line-height: 1.7;
        max-width: 620px;
    }

    .ux-quick-nav-card {
        padding: 30px 24px;
        border-radius: 24px;
    }

    .ux-nav-header {
        gap: 12px;
        margin-bottom: 22px;
        padding-bottom: 16px;
    }

    .ux-nav-title {
        font-size: 0.92rem;
        letter-spacing: 1.2px;
    }

    .ux-nav-pills {
        gap: 10px;
    }

    .ux-pill {
        padding: 11px 18px;
        font-size: 0.9rem;
        border-radius: 14px;
    }

    .pill-icon {
        font-size: 1.05rem;
    }

    .faq-glow-top {
        width: 380px;
        height: 380px;
    }

    .faq-glow-bottom {
        width: 320px;
        height: 320px;
    }
}

/* Tablette portrait */
@media (max-width: 768px) {
    .ux-faq-light-section {
        padding: 68px 16px;
    }

    .ux-faq-intro {
        margin-bottom: 36px;
    }

    .ux-overline {
        font-size: 0.72rem;
        letter-spacing: 1.4px;
        padding: 6px 14px;
        margin-bottom: 14px;
    }

    .ux-section-title {
        font-size: 1.95rem;
        line-height: 1.15;
        letter-spacing: -0.9px;
        margin-bottom: 14px;
    }

    .ux-faq-subtitle {
        font-size: 0.96rem;
        line-height: 1.65;
        max-width: 100%;
    }

    .ux-quick-nav-card {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .ux-nav-header {
        margin-bottom: 18px;
        padding-bottom: 14px;
        justify-content: center;
        text-align: center;
    }

    .ux-nav-title {
        font-size: 0.86rem;
        letter-spacing: 1px;
    }

    .ux-nav-pills {
        gap: 8px;
    }

    .ux-pill {
        width: 100%;
        justify-content: space-between;
        padding: 14px 16px;
        font-size: 0.92rem;
        border-radius: 14px;
    }

    .pill-icon {
        font-size: 1rem;
    }

    .faq-glow-top,
    .faq-glow-bottom {
        opacity: 0.7;
        filter: blur(8px);
    }
}

/* Mobile large */
@media (max-width: 576px) {
    .ux-faq-light-section {
        padding: 56px 14px;
    }

    .ux-faq-intro {
        margin-bottom: 30px;
    }

    .ux-overline {
        font-size: 0.66rem;
        letter-spacing: 1.1px;
        padding: 6px 12px;
        margin-bottom: 12px;
    }

    .ux-section-title {
        font-size: 1.6rem;
        line-height: 1.18;
        letter-spacing: -0.6px;
        margin-bottom: 12px;
    }

    .ux-faq-subtitle {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .ux-quick-nav-card {
        padding: 20px 14px;
        border-radius: 18px;
    }

    .ux-nav-header {
        gap: 10px;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    .nav-pulse-dot {
        width: 8px;
        height: 8px;
    }

    .ux-nav-title {
        font-size: 0.8rem;
        letter-spacing: 0.8px;
    }

    .ux-nav-pills {
        gap: 8px;
    }

    .ux-pill {
        padding: 13px 14px;
        font-size: 0.86rem;
        gap: 8px;
        border-radius: 12px;
    }

    .pill-icon {
        font-size: 0.95rem;
    }

    .faq-glow-top {
        width: 240px;
        height: 240px;
        left: -18%;
        top: -8%;
    }

    .faq-glow-bottom {
        width: 220px;
        height: 220px;
        right: -18%;
        bottom: -8%;
    }
}

/* Très petit mobile */
@media (max-width: 400px) {
    .ux-faq-light-section {
        padding: 48px 12px;
    }

    .ux-overline {
        font-size: 0.62rem;
        padding: 5px 10px;
    }

    .ux-section-title {
        font-size: 1.35rem;
        line-height: 1.2;
    }

    .ux-faq-subtitle {
        font-size: 0.86rem;
    }

    .ux-quick-nav-card {
        padding: 18px 12px;
        border-radius: 16px;
    }

    .ux-pill {
        padding: 12px 12px;
        font-size: 0.82rem;
    }

    .pill-icon {
        font-size: 0.9rem;
    }
}

/* Évite les effets hover agressifs sur écrans tactiles */
@media (hover: none) and (pointer: coarse) {
    .ux-quick-nav-card:hover {
        transform: none;
        box-shadow: 0 20px 50px rgba(45, 30, 64, 0.05);
        border-color: var(--border-soft);
    }

    .ux-pill:hover {
        transform: none;
        box-shadow: none;
        background: var(--bg-card);
        color: var(--text-dark);
    }

    .ux-pill:hover .pill-icon {
        transform: none;
    }

    .pill-alert:hover {
        background: rgba(212, 172, 13, 0.1);
        color: var(--gold);
        border-color: rgba(212, 172, 13, 0.2);
        box-shadow: none;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-affeb2a *//* ==========================================================================
   SECTION FAQ CONTENU (PRÉCISION & CAPACITÉS) - LIGHT MODE 2026
   ========================================================================== */

:root {
    --wine-red: #A9445B;
    --text-dark: #1a0e24; 
    --text-muted: #64748b;
    --surface-white: #ffffff;
    --bg-very-light: #fafafb;
    --border-soft: #f1f5f9;
}

.ux-faq-light-section {
    background-color: var(--surface-white); /* Fond blanc pur pour la lecture */
    padding: 100px 20px;
    font-family: system-ui, -apple-system, sans-serif;
}

.ux-faq-light-container {
    max-width: 1100px;
    margin: 0 auto;
}

.text-center { text-align: center; }

/* --- Typographie commune --- */
.ux-overline {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--wine-red);
    margin-bottom: 15px;
    background: rgba(169, 68, 91, 0.08);
    padding: 6px 16px;
    border-radius: 100px;
}

.ux-faq-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.3;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.ux-faq-paragraph {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.ux-faq-paragraph strong {
    color: var(--text-dark);
    font-weight: 700;
}

/* Lien animé */
.ux-link-animated {
    color: var(--wine-red);
    text-decoration: none;
    font-weight: 700;
    position: relative;
    padding-bottom: 2px;
}
.ux-link-animated::after {
    content: '';
    position: absolute;
    width: 100%; height: 2px;
    bottom: 0; left: 0;
    background-color: var(--wine-red);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}
.ux-link-animated:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ==========================================
   BLOC 1 : PRÉCISION (SPLIT-SCREEN)
   ========================================== */
.ux-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 100px;
}

.ux-faq-text-col {
    display: flex;
    flex-direction: column;
}

/* Citation éditoriale */
.ux-editorial-quote {
    position: relative;
    margin: 20px 0 0 0;
    padding: 25px 30px;
    background: var(--bg-very-light);
    border-left: 4px solid var(--wine-red);
    border-radius: 0 16px 16px 0;
    font-size: 1.15rem;
    font-style: italic;
    color: var(--text-dark);
    line-height: 1.6;
    font-weight: 500;
}

.ux-quote-mark {
    width: 24px; height: 24px;
    color: var(--wine-red);
    opacity: 0.2;
    position: absolute;
    top: 20px; left: 20px;
}

/* L'image et son badge */
.ux-image-showcase {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.ux-faq-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.ux-image-showcase:hover .ux-faq-img {
    transform: scale(1.03); /* Zoom très léger et lent au survol */
}

.ux-img-caption-glass {
    position: absolute;
    bottom: 20px; left: 20px; right: 20px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ==========================================
   BLOC 2 : LES CAPACITÉS (CARTES SOFT UI)
   ========================================== */
.ux-capacities-block {
    padding-top: 60px;
    border-top: 1px solid var(--border-soft);
}

.ux-capacities-block .ux-faq-title {
    margin-bottom: 50px;
}

.ux-capacities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.ux-capacity-card {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    padding: 40px 30px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.ux-capacity-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

/* Les icônes pastel (Squircle) */
.ux-cap-icon-box {
    width: 70px; height: 70px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}

.ux-capacity-card:hover .ux-cap-icon-box {
    transform: scale(1.1) rotate(-5deg);
}

/* Couleurs spécifiques par carte */
.bg-blue-soft { background: #eff6ff; color: #3b82f6; }
.text-blue { color: #1e40af; }

.bg-wine-soft { background: #fff0f4; color: var(--wine-red); }
.text-wine { color: var(--wine-red); font-weight: 700; }

.bg-green-soft { background: #ecfdf5; color: #10b981; }
.text-green { color: #065f46; }

/* Typographie des cartes */
.ux-cap-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 12px 0;
}

.ux-cap-text {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.ux-capacity-image {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 50px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    background: #fff;
}

.ux-capacity-image img {
    display: block;
     width: 100%;
    max-width: 560px;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    object-position: center;
}

/* ==========================================================================
   RESPONSIVE DESIGN ULTRA PROPRE
   ========================================================================== */

/* Grand laptop / petit desktop */
@media (max-width: 1200px) {
    .ux-faq-light-section {
        padding: 90px 24px;
    }

    .ux-faq-light-container {
        max-width: 1000px;
    }

    .ux-faq-grid {
        gap: 44px;
        margin-bottom: 80px;
    }

    .ux-faq-title {
        font-size: 1.7rem;
        line-height: 1.28;
    }

    .ux-faq-paragraph {
        font-size: 1.04rem;
    }

    .ux-editorial-quote {
        padding: 22px 24px 22px 26px;
        font-size: 1.05rem;
    }

    .ux-image-showcase {
        border-radius: 22px;
    }

    .ux-img-caption-glass {
        bottom: 16px;
        left: 16px;
        right: 16px;
        padding: 11px 16px;
        font-size: 0.9rem;
    }

    .ux-capacities-block {
        padding-top: 50px;
    }

    .ux-capacities-block .ux-faq-title {
        margin-bottom: 40px;
    }

    .ux-capacities-grid {
        gap: 24px;
    }

    .ux-capacity-card {
        padding: 34px 24px;
        border-radius: 20px;
    }

    .ux-cap-icon-box {
        width: 64px;
        height: 64px;
        font-size: 1.65rem;
        border-radius: 18px;
        margin-bottom: 20px;
    }

    .ux-cap-title {
        font-size: 1.2rem;
    }

    .ux-cap-text {
        font-size: 1rem;
    }

    .ux-capacity-image {
        max-width: 520px;
        margin: 0 auto 42px;
        border-radius: 22px;
    }

    .ux-capacity-image img {
        max-height: 360px;
    }
}

/* Tablette paysage */
@media (max-width: 992px) {
    .ux-faq-light-section {
        padding: 78px 20px;
    }

    .ux-faq-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-bottom: 70px;
    }

    .ux-faq-img-col {
        order: -1;
    }

    .ux-overline {
        font-size: 0.78rem;
        letter-spacing: 1.6px;
        padding: 6px 14px;
        margin-bottom: 12px;
    }

    .ux-faq-title {
        font-size: 1.6rem;
        line-height: 1.25;
        margin-bottom: 16px;
    }

    .ux-faq-paragraph {
        font-size: 1rem;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .ux-editorial-quote {
        margin-top: 16px;
        padding: 20px 22px 20px 24px;
        font-size: 1rem;
        line-height: 1.55;
        border-radius: 0 14px 14px 0;
    }

    .ux-quote-mark {
        width: 20px;
        height: 20px;
        top: 16px;
        left: 16px;
    }

    .ux-image-showcase {
        max-width: 760px;
        margin: 0 auto;
        border-radius: 20px;
    }

    .ux-img-caption-glass {
        font-size: 0.88rem;
        gap: 8px;
        border-radius: 14px;
    }

    .ux-capacities-block {
        padding-top: 42px;
    }

    .ux-capacities-block .ux-faq-title {
        margin-bottom: 34px;
    }

    .ux-capacities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .ux-capacity-card {
        padding: 28px 22px;
        border-radius: 18px;
    }

    .ux-cap-icon-box {
        width: 58px;
        height: 58px;
        font-size: 1.45rem;
        border-radius: 16px;
        margin-bottom: 18px;
    }

    .ux-cap-title {
        font-size: 1.12rem;
        margin-bottom: 10px;
    }

    .ux-cap-text {
        font-size: 0.96rem;
        line-height: 1.58;
    }

    .ux-capacity-image {
        margin: 0 auto 34px;
        border-radius: 20px;
    }

    .ux-capacity-image img {
        max-height: 320px;
    }
}

/* Tablette portrait */
@media (max-width: 768px) {
    .ux-faq-light-section {
        padding: 64px 16px;
    }

    .ux-faq-grid {
        gap: 28px;
        margin-bottom: 54px;
    }

    .ux-overline {
        font-size: 0.72rem;
        letter-spacing: 1.4px;
        padding: 6px 12px;
        margin-bottom: 10px;
    }

    .ux-faq-title {
        font-size: 1.4rem;
        line-height: 1.24;
        letter-spacing: -0.4px;
        margin-bottom: 14px;
    }

    .ux-faq-paragraph {
        font-size: 0.96rem;
        line-height: 1.62;
        margin-bottom: 14px;
    }

    .ux-editorial-quote {
        padding: 18px 18px 18px 20px;
        font-size: 0.95rem;
        line-height: 1.55;
        border-left-width: 3px;
        border-radius: 0 12px 12px 0;
    }

    .ux-quote-mark {
        width: 18px;
        height: 18px;
        top: 14px;
        left: 14px;
    }

    .ux-image-showcase {
        border-radius: 18px;
    }

    .ux-img-caption-glass {
        bottom: 12px;
        left: 12px;
        right: 12px;
        padding: 10px 12px;
        font-size: 0.82rem;
        line-height: 1.4;
        border-radius: 12px;
    }

    .ux-capacities-block {
        padding-top: 34px;
    }

    .ux-capacities-block .ux-faq-title {
        margin-bottom: 28px;
    }

    .ux-capacities-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ux-capacity-card {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .ux-cap-icon-box {
        width: 54px;
        height: 54px;
        font-size: 1.3rem;
        border-radius: 14px;
        margin-bottom: 16px;
    }

    .ux-cap-title {
        font-size: 1.04rem;
        margin-bottom: 8px;
    }

    .ux-cap-text {
        font-size: 0.93rem;
        line-height: 1.55;
    }

    .ux-capacity-image {
        margin: 0 auto 28px;
        border-radius: 16px;
    }

    .ux-capacity-image img {
        max-height: 280px;
    }
}

/* Mobile large */
@media (max-width: 576px) {
    .ux-faq-light-section {
        padding: 54px 14px;
    }

    .ux-overline {
        font-size: 0.66rem;
        letter-spacing: 1.1px;
        padding: 5px 10px;
    }

    .ux-faq-title {
        font-size: 1.24rem;
        line-height: 1.22;
    }

    .ux-faq-paragraph {
        font-size: 0.9rem;
        line-height: 1.58;
    }

    .ux-editorial-quote {
        padding: 16px 14px 16px 16px;
        font-size: 0.9rem;
        margin-top: 14px;
    }

    .ux-img-caption-glass {
        position: static;
        margin: 10px 10px 0;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 8px 18px rgba(0,0,0,0.06);
    }

    .ux-capacity-card {
        padding: 20px 14px;
        border-radius: 14px;
    }

    .ux-cap-icon-box {
        width: 48px;
        height: 48px;
        font-size: 1.15rem;
        border-radius: 12px;
    }

    .ux-cap-title {
        font-size: 0.98rem;
    }

    .ux-cap-text {
        font-size: 0.88rem;
    }

    .ux-capacity-image {
        margin: 0 auto 24px;
        border-radius: 14px;
    }

    .ux-capacity-image img {
        max-height: 220px;
        object-fit: cover;
    }
}

/* Très petit mobile */
@media (max-width: 400px) {
    .ux-faq-light-section {
        padding: 46px 12px;
    }

    .ux-faq-title {
        font-size: 1.12rem;
    }

    .ux-faq-paragraph,
    .ux-editorial-quote,
    .ux-cap-text {
        font-size: 0.84rem;
    }

    .ux-capacity-card {
        padding: 18px 12px;
    }

    .ux-cap-title {
        font-size: 0.92rem;
    }

    .ux-capacity-image img {
        max-height: 190px;
    }
}

/* Écrans tactiles : hover plus doux */
@media (hover: none) and (pointer: coarse) {
    .ux-image-showcase:hover .ux-faq-img {
        transform: none;
    }

    .ux-capacity-card:hover {
        transform: none;
        box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    }

    .ux-capacity-card:hover .ux-cap-icon-box {
        transform: none;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-f6f539c *//* ==========================================================================
   SECTION SUPPORTS (OUTILS & INTUITION) - LIGHT SERENITY 2026
   ========================================================================== */

.ux-supports-light-section {
    position: relative;
    background-color: var(--bg-main);
    padding: 100px 20px;
    /* CORRECTIF : Suppression de overflow: hidden qui bloquait le sticky */
    overflow: visible; 
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* DÉBLOQUE LE STICKY BLOQUÉ PAR LE THÈME GLOBAL */
html, body, #page, #content, .site-main, .site-content, .wrapper {
    overflow-x: clip !important; /* "clip" remplace "hidden" sans casser le sticky ! */
    overflow-y: visible !important;
}

/* Neutralise le transform de l'animation une fois qu'elle est terminée */
.ux-supports-light-section {
    transform: none !important;
    animation: none !important;
}

/* Halos Aurora */
.support-glow-left {
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(142, 68, 173, 0.05), transparent 70%);
    top: -10%; left: -15%;
    pointer-events: none;
    z-index: 0;
}
.support-glow-right {
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(212, 172, 13, 0.05), transparent 70%);
    bottom: -10%; right: -5%;
    pointer-events: none;
    z-index: 0;
}

.ux-supports-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    /* CORRECTIF : On s'assure que le container ne bloque pas non plus */
    overflow: visible; 
}

.ux-supports-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    /* CORRECTIF : Aligner au début pour laisser l'image "glisser" le long du texte */
    align-items: start; 
    gap: 80px;
}

/* --- PARTIE IMAGE : Le Cadre Élégant --- */
.ux-image-elegant-frame {
    position: relative;
    padding: 15px;
    background: white;
    border-radius: 40px;
    box-shadow: 0 30px 60px rgba(45, 30, 64, 0.08);
}

.ux-img-backdrop-lilac {
    position: absolute;
    top: -20px; left: -20px;
    width: 100px; height: 100px;
    background: var(--bg-card);
    border-radius: 30px;
    z-index: -1;
}

.ux-support-img {
    width: 100%;
    height: auto;
    border-radius: 30px;
    display: block;
    object-fit: cover;
}

.ux-img-badge-soft {
    position: absolute;
    bottom: 35px;
    right: -20px;
    background: white;
    padding: 15px 25px;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(142, 68, 173, 0.15);
    font-weight: 800;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-soft);
}

/* --- PARTIE TEXTE : Le Panneau Clarté --- */
.ux-soft-panel-light {
    background: white;
    border: 1px solid var(--border-soft);
    border-radius: 40px;
    padding: 60px;
    box-shadow: 0 20px 50px rgba(45, 30, 64, 0.04);
}

.ux-overline {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--amethyst);
    background: var(--bg-card);
    padding: 8px 20px;
    border-radius: 100px;
    margin-bottom: 25px;
}

.ux-section-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 20px;
}

.ux-paragraph {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 35px;
}

.text-amethyst-accent {
    color: var(--amethyst);
    font-weight: 800;
}

/* --- LISTE DES FEATURES (Supports) --- */
.ux-features-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 40px;
}

.ux-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.ux-feat-icon-sq {
    min-width: 54px;
    height: 54px;
    background: var(--bg-card);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 8px 15px rgba(142, 68, 173, 0.08);
}

.ux-feat-title {
    display: block;
    font-weight: 800;
    color: var(--text-dark);
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.ux-feat-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* --- BOX RÉASSURANCE (Or Mat) --- */
.ux-reassurance-box {
    background: rgba(212, 172, 13, 0.05);
    border: 1px dashed var(--gold);
    border-radius: 24px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--text-dark);
    line-height: 1.6;
}

.box-icon {
    font-size: 1.8rem;
    color: var(--gold);
}

/* ==========================================================================
   GESTION DU STICKY + RESPONSIVE ULTRA PROPRE
   ========================================================================== */

/* Desktop large */
@media (min-width: 1400px) {
    .ux-supports-container {
        max-width: 1240px;
    }

    .ux-supports-grid {
        gap: 90px;
    }

    .ux-supports-img-col {
        top: 110px;
    }
}

/* Desktop / laptop */
@media (min-width: 992px) {
    .ux-supports-img-col {
        position: -webkit-sticky;
        position: sticky;
        top: 90px;
        align-self: start;
        height: fit-content;
        z-index: 10;
    }
}

/* Petit desktop */
@media (max-width: 1200px) {
    .ux-supports-light-section {
        padding: 90px 24px;
    }

    .ux-supports-container {
        max-width: 1100px;
    }

    .ux-supports-grid {
        grid-template-columns: 0.95fr 1.05fr;
        gap: 52px;
    }

    .ux-image-elegant-frame {
        padding: 12px;
        border-radius: 32px;
    }

    .ux-img-backdrop-lilac {
        width: 80px;
        height: 80px;
        top: -14px;
        left: -14px;
        border-radius: 22px;
    }

    .ux-support-img {
        border-radius: 24px;
    }

    .ux-img-badge-soft {
        right: -12px;
        bottom: 22px;
        padding: 12px 18px;
        border-radius: 16px;
        font-size: 0.92rem;
        gap: 8px;
    }

    .ux-soft-panel-light {
        padding: 46px 40px;
        border-radius: 30px;
    }

    .ux-overline {
        font-size: 0.78rem;
        letter-spacing: 1.6px;
        padding: 7px 16px;
        margin-bottom: 20px;
    }

    .ux-section-title {
        font-size: 1.65rem;
        line-height: 1.2;
        margin-bottom: 16px;
    }

    .ux-paragraph {
        font-size: 1.02rem;
        margin-bottom: 28px;
    }

    .ux-features-list {
        gap: 20px;
        margin-bottom: 30px;
    }

    .ux-feature-item {
        gap: 16px;
    }

    .ux-feat-icon-sq {
        min-width: 48px;
        height: 48px;
        font-size: 1.25rem;
        border-radius: 14px;
    }

    .ux-feat-title {
        font-size: 1rem;
    }

    .ux-feat-desc {
        font-size: 0.92rem;
    }

    .ux-reassurance-box {
        padding: 20px 22px;
        border-radius: 20px;
        gap: 16px;
        font-size: 0.96rem;
    }

    .box-icon {
        font-size: 1.5rem;
    }

    .support-glow-left {
        width: 460px;
        height: 460px;
        left: -16%;
        top: -8%;
    }

    .support-glow-right {
        width: 380px;
        height: 380px;
        right: -8%;
        bottom: -8%;
    }
}

/* Tablette */
@media (max-width: 992px) {
    .ux-supports-light-section {
        padding: 78px 20px;
    }

    .ux-supports-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .ux-supports-img-col {
        order: 2;
        position: static;
        top: auto;
    }

    .ux-supports-text-col {
        order: 1;
    }

    .ux-image-elegant-frame {
        max-width: 720px;
        margin: 0 auto;
        padding: 12px;
        border-radius: 28px;
    }

    .ux-support-img {
        border-radius: 22px;
    }

    .ux-img-badge-soft {
        right: 16px;
        bottom: 16px;
        padding: 12px 18px;
        border-radius: 16px;
        font-size: 0.9rem;
    }

    .ux-soft-panel-light {
        padding: 38px 28px;
        border-radius: 28px;
    }

    .ux-overline {
        font-size: 0.74rem;
        letter-spacing: 1.4px;
        padding: 7px 14px;
        margin-bottom: 18px;
    }

    .ux-section-title {
        font-size: 1.5rem;
        margin-bottom: 14px;
    }

    .ux-paragraph {
        font-size: 0.98rem;
        line-height: 1.65;
        margin-bottom: 24px;
    }

    .ux-features-list {
        gap: 18px;
        margin-bottom: 26px;
    }

    .ux-feature-item {
        gap: 14px;
    }

    .ux-feat-icon-sq {
        min-width: 46px;
        height: 46px;
        font-size: 1.15rem;
        border-radius: 13px;
    }

    .ux-feat-title {
        font-size: 0.98rem;
    }

    .ux-feat-desc {
        font-size: 0.9rem;
    }

    .ux-reassurance-box {
        padding: 18px 18px;
        gap: 14px;
        border-radius: 18px;
        line-height: 1.55;
    }

    .box-icon {
        font-size: 1.35rem;
    }

    .support-glow-left {
        width: 320px;
        height: 320px;
        left: -18%;
    }

    .support-glow-right {
        width: 280px;
        height: 280px;
        right: -14%;
    }
}

/* Mobile / tablette portrait */
@media (max-width: 768px) {
    .ux-supports-light-section {
        padding: 64px 16px;
    }

    .ux-supports-grid {
        gap: 34px;
    }

    .ux-image-elegant-frame {
        padding: 10px;
        border-radius: 22px;
    }

    .ux-img-backdrop-lilac {
        width: 60px;
        height: 60px;
        top: -10px;
        left: -10px;
        border-radius: 18px;
    }

    .ux-support-img {
        border-radius: 16px;
    }

    .ux-img-badge-soft {
        position: static;
        margin-top: 14px;
        justify-content: center;
        padding: 12px 14px;
        border-radius: 14px;
        font-size: 0.86rem;
    }

    .ux-soft-panel-light {
        padding: 28px 20px;
        border-radius: 22px;
    }

    .ux-overline {
        font-size: 0.68rem;
        letter-spacing: 1.2px;
        padding: 6px 12px;
        margin-bottom: 14px;
    }

    .ux-section-title {
        font-size: 1.3rem;
        line-height: 1.22;
        margin-bottom: 12px;
    }

    .ux-paragraph {
        font-size: 0.93rem;
        line-height: 1.6;
        margin-bottom: 22px;
    }

    .ux-features-list {
        gap: 16px;
        margin-bottom: 22px;
    }

    .ux-feature-item {
        gap: 12px;
    }

    .ux-feat-icon-sq {
        min-width: 42px;
        height: 42px;
        font-size: 1rem;
        border-radius: 12px;
    }

    .ux-feat-title {
        font-size: 0.94rem;
        margin-bottom: 2px;
    }

    .ux-feat-desc {
        font-size: 0.86rem;
        line-height: 1.5;
    }

    .ux-reassurance-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 14px;
        gap: 10px;
        border-radius: 16px;
        font-size: 0.9rem;
    }

    .box-icon {
        font-size: 1.2rem;
    }

    .support-glow-left,
    .support-glow-right {
        opacity: 0.7;
        filter: blur(8px);
    }
}

/* Mobile large */
@media (max-width: 576px) {
    .ux-supports-light-section {
        padding: 54px 14px;
    }

    .ux-supports-grid {
        gap: 28px;
    }

    .ux-image-elegant-frame {
        padding: 8px;
        border-radius: 18px;
    }

    .ux-support-img {
        border-radius: 14px;
    }

    .ux-img-badge-soft {
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 0.8rem;
        gap: 6px;
    }

    .ux-soft-panel-light {
        padding: 22px 16px;
        border-radius: 18px;
    }

    .ux-overline {
        font-size: 0.64rem;
        letter-spacing: 1px;
        padding: 5px 10px;
    }

    .ux-section-title {
        font-size: 1.15rem;
    }

    .ux-paragraph {
        font-size: 0.88rem;
        margin-bottom: 18px;
    }

    .ux-feat-icon-sq {
        min-width: 38px;
        height: 38px;
        font-size: 0.92rem;
        border-radius: 10px;
    }

    .ux-feat-title {
        font-size: 0.9rem;
    }

    .ux-feat-desc {
        font-size: 0.82rem;
    }

    .ux-reassurance-box {
        padding: 14px 12px;
        font-size: 0.84rem;
    }

    .box-icon {
        font-size: 1.05rem;
    }

    .support-glow-left {
        width: 200px;
        height: 200px;
    }

    .support-glow-right {
        width: 180px;
        height: 180px;
    }
}

/* Très petit mobile */
@media (max-width: 400px) {
    .ux-supports-light-section {
        padding: 46px 12px;
    }

    .ux-soft-panel-light {
        padding: 18px 12px;
    }

    .ux-section-title {
        font-size: 1.02rem;
    }

    .ux-paragraph,
    .ux-feat-desc,
    .ux-reassurance-box {
        font-size: 0.78rem;
    }

    .ux-feat-title {
        font-size: 0.84rem;
    }

    .ux-img-badge-soft {
        font-size: 0.74rem;
    }
}

/* Tactile : hover plus doux */
@media (hover: none) and (pointer: coarse) {
    .ux-image-elegant-frame,
    .ux-soft-panel-light,
    .ux-img-badge-soft,
    .ux-feature-item,
    .ux-reassurance-box {
        transition: none;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-62c5ab1 *//* ==========================================================================
   SECTION TIMELINE (DÉROULÉ) - LIGHT MODE 2026
   ========================================================================== */

:root {
    --wine-red: #A9445B;
    --text-dark: #1a0e24; 
    --text-muted: #64748b;
    --surface-white: #ffffff;
    --bg-light-gray: #fafafb;
    --border-soft: #f1f5f9;
}

.ux-timeline-light-section {
    background-color: var(--bg-light-gray);
    padding: 100px 20px;
    font-family: system-ui, -apple-system, sans-serif;
}

.ux-timeline-container {
    max-width: 900px;
    margin: 0 auto;
}

.text-center { text-align: center; }

/* --- En-tête --- */
.ux-section-header {
    margin-bottom: 70px;
}

.ux-overline {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--wine-red);
    margin-bottom: 15px;
    background: rgba(169, 68, 91, 0.08);
    padding: 6px 16px;
    border-radius: 100px;
}

.ux-section-title {
   font-size: clamp(1.25rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0;
    letter-spacing: -0.5px;
}

/* ==========================================
   LA TIMELINE (Ligne & Structure)
   ========================================== */
.ux-timeline-wrapper {
    position: relative;
    padding-left: 30px; /* Laisse de la place pour la ligne sur la gauche */
}

/* La Ligne Continue */
.ux-timeline-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 54px; /* Centré exactement par rapport aux marqueurs (50px / 2 + padding) */
    width: 4px;
    background: linear-gradient(to bottom, rgba(169, 68, 91, 0.3) 0%, rgba(169, 68, 91, 0.05) 100%);
    border-radius: 2px;
    z-index: 0;
}

/* Un conteneur d'étape */
.ux-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

/* On enlève la marge du dernier pour la propreté */
.ux-timeline-item:last-child {
    margin-bottom: 0;
}

/* --- Les Marqueurs (Cercles avec Chiffres ou Icônes) --- */
.ux-timeline-marker {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    background-color: var(--surface-white);
    border: 4px solid var(--bg-light-gray); /* Fait une "coupure" visuelle sur la ligne */
    transition: transform 0.3s ease;
}

.ux-timeline-item:hover .ux-timeline-marker {
    transform: scale(1.1); /* Petit rebond au survol */
}

/* Styles de marqueurs spécifiques */
.marker-base {
    color: var(--text-muted);
    background: var(--surface-white);
    border-color: #e2e8f0;
}

.marker-wine {
    background: linear-gradient(135deg, var(--wine-red) 0%, #8a364a 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(169, 68, 91, 0.3);
    border-color: #fff0f4;
}

.marker-green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
    border-color: #ecfdf5;
}

/* --- Les Cartes de Contenu (Soft UI) --- */
.ux-timeline-card {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    padding: 30px 40px;
        width: 100%;
    min-width: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.ux-timeline-item:hover .ux-timeline-card {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    border-color: rgba(169, 68, 91, 0.1);
}

/* Typographie des cartes */
.ux-step-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 12px 0;
}

.ux-step-desc {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.text-wine-bold { color: var(--wine-red); font-weight: 800; }
.text-dark-bold { color: var(--text-dark); font-weight: 800; }
.text-green-bold { color: #059669; font-weight: 800; }

/* --- Cartes Highlightées (Bordeaux et Vert) --- */
.card-highlight-wine {
    border-left: 4px solid var(--wine-red);
    background: linear-gradient(90deg, rgba(169, 68, 91, 0.03) 0%, transparent 100%);
}
.card-highlight-wine .text-wine { color: var(--wine-red); }

.card-highlight-green {
    border-left: 4px solid #10b981;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.03) 0%, transparent 100%);
}
.card-highlight-green .text-green { color: #059669; }

/* --- Lien Animé --- */
.ux-link-animated {
    color: var(--wine-red);
    text-decoration: none;
    font-weight: 700;
    position: relative;
    padding-bottom: 2px;
}
.ux-link-animated::after {
    content: '';
    position: absolute;
    width: 100%; height: 2px;
    bottom: 0; left: 0;
    background-color: var(--wine-red);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}
.ux-link-animated:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ==========================================================================
   RESPONSIVE DESIGN ULTRA PROPRE
   ========================================================================== */

/* Grand laptop / petit desktop */
@media (max-width: 1200px) {
    .ux-timeline-light-section {
        padding: 90px 24px;
    }

    .ux-timeline-container {
        max-width: 860px;
    }

    .ux-section-header {
        margin-bottom: 56px;
    }

    .ux-section-title {
        font-size: 2.2rem;
        line-height: 1.15;
    }

    .ux-timeline-wrapper {
        padding-left: 24px;
    }

    .ux-timeline-track {
        left: 48px;
    }

    .ux-timeline-item {
        gap: 24px;
        margin-bottom: 32px;
    }

    .ux-timeline-marker {
        width: 48px;
        height: 48px;
        font-size: 1.08rem;
    }

    .ux-timeline-card {
        padding: 26px 30px;
        border-radius: 22px;
    }

    .ux-step-title {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .ux-step-desc {
        font-size: 1rem;
        line-height: 1.58;
    }
}

/* Tablette paysage */
@media (max-width: 992px) {
    .ux-timeline-light-section {
        padding: 80px 20px;
    }

    .ux-section-header {
        margin-bottom: 48px;
    }

    .ux-overline {
        font-size: 0.78rem;
        letter-spacing: 1.6px;
        padding: 6px 14px;
        margin-bottom: 12px;
    }

    .ux-section-title {
        font-size: 1.95rem;
        line-height: 1.15;
    }

    .ux-timeline-wrapper {
        padding-left: 18px;
    }

    .ux-timeline-track {
        left: 42px;
        width: 3px;
    }

    .ux-timeline-item {
        gap: 18px;
        margin-bottom: 26px;
    }

    .ux-timeline-marker {
        width: 44px;
        height: 44px;
        font-size: 1rem;
        border-width: 3px;
    }

    .ux-timeline-card {
        padding: 24px 22px;
        border-radius: 20px;
    }

    .ux-step-title {
        font-size: 1.12rem;
        margin-bottom: 8px;
    }

    .ux-step-desc {
        font-size: 0.96rem;
        line-height: 1.55;
    }
}

/* Tablette portrait */
@media (max-width: 768px) {
    .ux-timeline-light-section {
        padding: 64px 16px;
    }

    .ux-section-header {
        margin-bottom: 38px;
    }

    .ux-overline {
        font-size: 0.72rem;
        letter-spacing: 1.3px;
        padding: 6px 12px;
        margin-bottom: 10px;
    }

    .ux-section-title {
        font-size: 1.65rem;
        line-height: 1.18;
        letter-spacing: -0.4px;
    }

    .ux-timeline-wrapper {
        padding-left: 10px;
    }

    .ux-timeline-track {
        left: 31px;
        width: 3px;
    }

    .ux-timeline-item {
        gap: 14px;
        margin-bottom: 20px;
    }

    .ux-timeline-marker {
        width: 40px;
        height: 40px;
        font-size: 0.92rem;
        border-width: 3px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    }

    .ux-timeline-card {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .ux-step-title {
        font-size: 1rem;
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .ux-step-desc {
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .card-highlight-wine,
    .card-highlight-green {
        border-left-width: 3px;
    }
}

/* Mobile large */
@media (max-width: 576px) {
    .ux-timeline-light-section {
        padding: 54px 14px;
    }

    .ux-section-header {
        margin-bottom: 30px;
    }

    .ux-overline {
        font-size: 0.66rem;
        letter-spacing: 1.1px;
        padding: 5px 10px;
        margin-bottom: 8px;
    }

    .ux-section-title {
        font-size: 1.4rem;
        line-height: 1.2;
    }

    .ux-timeline-wrapper {
        padding-left: 4px;
    }

    .ux-timeline-track {
        left: 25px;
        width: 2px;
    }

    .ux-timeline-item {
        gap: 12px;
        margin-bottom: 16px;
    }

    .ux-timeline-marker {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
        border-width: 2px;
    }

    .ux-timeline-card {
        padding: 16px 14px;
        border-radius: 16px;
    }

    .ux-step-title {
        font-size: 0.94rem;
        margin-bottom: 6px;
    }

    .ux-step-desc {
        font-size: 0.84rem;
        line-height: 1.5;
    }
}

/* Très petit mobile */
@media (max-width: 400px) {
    .ux-timeline-light-section {
        padding: 46px 12px;
    }

    .ux-section-title {
        font-size: 1.22rem;
    }

    .ux-timeline-track {
        left: 22px;
    }

    .ux-timeline-item {
        gap: 10px;
    }

    .ux-timeline-marker {
        width: 30px;
        height: 30px;
        font-size: 0.72rem;
    }

    .ux-timeline-card {
        padding: 14px 12px;
        border-radius: 14px;
    }

    .ux-step-title {
        font-size: 0.88rem;
    }

    .ux-step-desc {
        font-size: 0.8rem;
    }
}

/* Tactile : hover plus doux */
@media (hover: none) and (pointer: coarse) {
    .ux-timeline-item:hover .ux-timeline-marker {
        transform: none;
    }

    .ux-timeline-item:hover .ux-timeline-card {
        transform: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
        border-color: var(--border-soft);
    }

    .ux-link-animated:hover::after {
        transform: scaleX(0);
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-b3bf6c8 *//* ==========================================================================
   SECTION PRÉPARATION - LIGHT MODE 2026
   ========================================================================== */

:root {
    --wine-red: #A9445B;
    --text-dark: #1a0e24; 
    --text-muted: #64748b;
    --surface-white: #ffffff;
    --bg-light-gray: #fafafb;
    --border-soft: #f1f5f9;
}

.ux-prep-light-section {
    background-color: var(--surface-white);
    padding: 100px 20px;
    font-family: system-ui, -apple-system, sans-serif;
}

.ux-prep-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- Grille Asymétrique --- */
.ux-prep-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.ux-prep-text-col {
    display: flex;
    flex-direction: column;
}

/* --- En-tête --- */
.ux-overline {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--wine-red);
    margin-bottom: 15px;
    background: rgba(169, 68, 91, 0.08);
    padding: 6px 16px;
    border-radius: 100px;
    align-self: flex-start;
}

.ux-prep-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.25;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.ux-prep-intro {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 40px 0;
}

/* ==========================================
   LES PROCESS CARDS (La Liste Interactive)
   ========================================== */
.ux-step-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.ux-step-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    background: var(--bg-light-gray);
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ux-step-item:hover {
    transform: translateX(10px);
    background: var(--surface-white);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
    border-color: rgba(169, 68, 91, 0.15);
}

/* Les Numéros Pastels */
.ux-step-number {
    width: 50px; height: 50px;
    flex-shrink: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
}

.bg-blue-soft { background: #eff6ff; } .text-blue { color: #2563eb; }
.bg-wine-soft { background: #fff0f4; } .text-wine { color: var(--wine-red); }
.bg-green-soft { background: #ecfdf5; } .text-green { color: #059669; }

/* Contenu des étapes */
.ux-step-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ux-step-heading {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-dark);
}

.ux-step-desc {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ==========================================
   LA NOTE IMPORTANTE (Santé / Tabou)
   ========================================== */
.ux-prep-note {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 25px;
    background: linear-gradient(90deg, #fffbeb 0%, transparent 100%);
    border-left: 4px solid #f59e0b;
    border-radius: 0 16px 16px 0;
}

.ux-prep-note .note-icon {
    font-size: 1.6rem;
}

.ux-prep-note p {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-dark);
    line-height: 1.5;
}

.ux-prep-note strong {
    font-weight: 800;
}

/* ==========================================
   COLONNE IMAGE (Soft UI Frame)
   ========================================== */
.ux-image-glass-frame-light {
    position: relative;
    padding: 15px;
    background: var(--surface-white);
    border-radius: 32px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-soft);
}

.ux-img-backdrop-blue {
    position: absolute;
    top: 5%; right: -5%;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #eff6ff, transparent);
    border-radius: 32px;
    z-index: 0;
}

.ux-prep-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
}

.ux-img-badge-light {
    position: absolute;
    bottom: -20px; left: -20px;
    z-index: 2;
    background: var(--surface-white);
    padding: 12px 24px;
    border-radius: 100px;
    font-weight: 700;
    color: var(--text-dark);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-soft);
}

/* ==========================================================================
   L'EFFET STICKY POUR ORDINATEUR (C'EST ICI QUE ÇA SE PASSE)
   ========================================================================== */
@media (min-width: 992px) {
    .ux-prep-light-section,
    .ux-prep-container {
        overflow: visible !important;
        transform: none !important;
    }

    .ux-prep-grid {
        overflow: visible !important;
        transform: none !important;
        align-items: start !important; /* TRÈS IMPORTANT: libère la hauteur pour glisser */
    }

    .ux-prep-img-col {
        height: 100% !important;
        position: relative;
        display: block !important;
    }

    .ux-image-glass-frame-light {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 120px !important; 
        z-index: 99;
    }
}

========================================================================== STICKY DESKTOP + RESPONSIVE ULTRA PROPRE ========================================================================== */ /* Desktop large */ @media (min-width: 1400px) { .ux-prep-container { max-width: 1160px; } .ux-prep-grid { gap: 80px; } .ux-image-glass-frame-light { top: 130px; } } /* Desktop / laptop */ @media (min-width: 992px) { .ux-prep-light-section, .ux-prep-container, .ux-prep-grid, .ux-prep-img-col { overflow: visible !important; transform: none !important; } .ux-prep-grid { align-items: start !important; } .ux-prep-img-col { position: relative; display: block; height: 100%; } .ux-image-glass-frame-light { position: -webkit-sticky !important; position: sticky !important; top: 100px !important; z-index: 20; } } /* Petit desktop */ @media (max-width: 1200px) { .ux-prep-light-section { padding: 90px 24px; } .ux-prep-container { max-width: 1040px; } .ux-prep-grid { gap: 50px; } .ux-prep-title { font-size: 1.65rem; line-height: 1.22; } .ux-prep-intro { font-size: 1.02rem; margin-bottom: 30px; } .ux-step-list { gap: 16px; margin-bottom: 30px; } .ux-step-item { padding: 20px; border-radius: 18px; gap: 16px; } .ux-step-number { width: 44px; height: 44px; font-size: 1.05rem; border-radius: 14px; } .ux-step-heading { font-size: 1.02rem; } .ux-step-desc { font-size: 0.92rem; } .ux-prep-note { padding: 18px 20px; border-radius: 0 14px 14px 0; } .ux-prep-note p { font-size: 0.98rem; } .ux-image-glass-frame-light { padding: 12px; border-radius: 26px; } .ux-img-backdrop-blue { border-radius: 26px; } .ux-prep-img { border-radius: 18px; } .ux-img-badge-light { left: -10px; bottom: -10px; padding: 10px 18px; font-size: 0.92rem; gap: 8px; } } /* Tablette */ @media (max-width: 992px) { .ux-prep-light-section { padding: 78px 20px; } .ux-prep-grid { grid-template-columns: 1fr; gap: 44px; align-items: start; } .ux-prep-img-col { order: -1; max-width: 560px; width: 100%; margin: 0 auto; } .ux-prep-text-col { width: 100%; } .ux-overline { font-size: 0.78rem; letter-spacing: 1.6px; padding: 6px 14px; margin-bottom: 12px; } .ux-prep-title { font-size: 1.5rem; line-height: 1.22; margin-bottom: 14px; } .ux-prep-intro { font-size: 0.98rem; line-height: 1.6; margin-bottom: 26px; } .ux-step-list { gap: 14px; margin-bottom: 26px; } .ux-step-item { padding: 18px; gap: 14px; } .ux-step-number { width: 42px; height: 42px; font-size: 1rem; border-radius: 13px; } .ux-step-heading { font-size: 0.98rem; } .ux-step-desc { font-size: 0.9rem; line-height: 1.5; } .ux-prep-note { padding: 16px 18px; gap: 12px; } .ux-prep-note .note-icon { font-size: 1.35rem; } .ux-prep-note p { font-size: 0.94rem; } .ux-image-glass-frame-light { padding: 12px; border-radius: 24px; } .ux-img-backdrop-blue { top: 4%; right: -3%; border-radius: 24px; } .ux-prep-img { border-radius: 16px; } .ux-img-badge-light { left: 16px; bottom: -12px; padding: 10px 16px; font-size: 0.88rem; border-radius: 999px; } } /* Tablette portrait / mobile */ @media (max-width: 768px) { .ux-prep-light-section { padding: 64px 16px; } .ux-prep-grid { gap: 34px; } .ux-overline { font-size: 0.72rem; letter-spacing: 1.3px; padding: 6px 12px; margin-bottom: 10px; } .ux-prep-title { font-size: 1.34rem; line-height: 1.22; letter-spacing: -0.4px; margin-bottom: 12px; } .ux-prep-intro { font-size: 0.93rem; margin-bottom: 22px; } .ux-step-list { gap: 12px; margin-bottom: 22px; } .ux-step-item { flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; } .ux-step-item:hover { transform: none; } .ux-step-number { width: 38px; height: 38px; font-size: 0.92rem; border-radius: 12px; } .ux-step-content { gap: 6px; } .ux-step-heading { font-size: 0.94rem; } .ux-step-desc { font-size: 0.86rem; } .ux-prep-note { flex-direction: column; align-items: flex-start; padding: 14px 14px 14px 16px; border-left-width: 3px; border-radius: 0 12px 12px 0; } .ux-prep-note .note-icon { font-size: 1.15rem; } .ux-prep-note p { font-size: 0.88rem; line-height: 1.5; } .ux-image-glass-frame-light { padding: 10px; border-radius: 20px; } .ux-img-backdrop-blue { top: 0; right: 0; border-radius: 20px; opacity: 0.7; } .ux-prep-img { border-radius: 14px; } .ux-img-badge-light { position: static; margin-top: 14px; justify-content: center; width: 100%; padding: 10px 14px; font-size: 0.84rem; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,0.05); } } /* Mobile large */ @media (max-width: 576px) { .ux-prep-light-section { padding: 54px 14px; } .ux-prep-grid { gap: 28px; } .ux-overline { font-size: 0.66rem; letter-spacing: 1.1px; padding: 5px 10px; } .ux-prep-title { font-size: 1.18rem; } .ux-prep-intro { font-size: 0.88rem; margin-bottom: 18px; } .ux-step-item { padding: 14px; border-radius: 14px; } .ux-step-number { width: 34px; height: 34px; font-size: 0.82rem; border-radius: 10px; } .ux-step-heading { font-size: 0.9rem; } .ux-step-desc { font-size: 0.82rem; } .ux-prep-note { padding: 12px 12px 12px 14px; } .ux-prep-note p { font-size: 0.82rem; } .ux-image-glass-frame-light { padding: 8px; border-radius: 16px; } .ux-img-backdrop-blue { border-radius: 16px; } .ux-prep-img { border-radius: 12px; } .ux-img-badge-light { padding: 9px 12px; font-size: 0.78rem; gap: 6px; } } /* Très petit mobile */ @media (max-width: 400px) { .ux-prep-light-section { padding: 46px 12px; } .ux-prep-title { font-size: 1.05rem; } .ux-prep-intro, .ux-step-desc, .ux-prep-note p { font-size: 0.78rem; } .ux-step-heading { font-size: 0.84rem; } .ux-step-item { padding: 12px; } .ux-img-badge-light { font-size: 0.72rem; } } /* Tactile : hover plus doux */ @media (hover: none) and (pointer: coarse) { .ux-step-item:hover { transform: none; background: var(--bg-light-gray); box-shadow: none; border-color: var(--border-soft); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-4535fa2 *//* ==========================================================================
   SECTION ARNAQUES & ALERTES - LIGHT SERENITY 2026
   ========================================================================== */

:root {
    --bg-main: #FBF8FF;           /* Blanc cassé lilas */
    --bg-card: #F3EBFF;           /* Violet très pâle */
    --text-dark: #2D1E40;         /* Violet sombre */
    --text-muted: #564D65;        /* Gris-violet doux */
    --gold: #D4AC0D;              /* Or mat (Alerte & Valeur) */
    --gold-light: rgba(212, 172, 13, 0.1);
    --border-soft: rgba(142, 68, 173, 0.1);
}

.ux-warning-light-section {
    position: relative;
    background-color: var(--bg-main);
    padding: 100px 20px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow: hidden;
}

.ux-warning-light-section,
.ux-warning-container,
.ux-warning-main-panel,
.ux-warning-grid,
.ux-alert-card {
    box-sizing: border-box;
}

.ux-warning-title,
.ux-warning-intro,
.ux-alert-heading,
.ux-alert-text {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Halo central (Version douce) */
.alert-glow-center {
    position: absolute;
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(212, 172, 13, 0.05), transparent 60%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ux-warning-container {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}

/* --- Le Grand Panneau (Card Design) --- */
.ux-warning-main-panel {
    background: white;
    border: 1px solid var(--border-soft);
    /* Ligne supérieure en Or mat pour signifier l'importance */
    border-top: 4px solid var(--gold);
    border-radius: 40px;
    padding: 60px 50px;
    box-shadow: 0 30px 70px rgba(45, 30, 64, 0.06);
}

/* --- L'en-tête de l'Alerte --- */
.ux-warning-header {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 50px;
    padding-bottom: 45px;
    border-bottom: 1px dashed var(--border-soft);
}

.ux-alert-icon-box {
    width: 90px; height: 90px;
    flex-shrink: 0;
    background: var(--gold-light);
    border: 1px solid rgba(212, 172, 13, 0.2);
    border-radius: 28px; /* Squircle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    box-shadow: 0 10px 25px rgba(212, 172, 13, 0.1);
}

/* Clignotement doux (Animation discrète mais efficace) */
.pulse-alert {
    animation: pulse-gold 3s infinite ease-in-out;
}
@keyframes pulse-gold {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(212, 172, 13, 0)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 15px rgba(212, 172, 13, 0.3)); }
}

.ux-warning-title-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ux-warning-title {
    color: var(--text-dark);
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.ux-warning-intro {
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1.7;
    margin: 0;
    max-width: 800px;
}

/* Texte accentué en Or */
.text-gold-accent {
    color: var(--gold);
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* --- Grille des Cartes Alerte --- */
.ux-warning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Cartes Internes (Style "Nested Card") */
.ux-alert-card {
    background: var(--bg-main);
    border: 1px solid var(--border-soft);
    border-radius: 28px;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
    display: flex;
    flex-direction: column;
}

.ux-alert-card:hover {
    transform: translateY(-8px);
    background: white;
    border-color: var(--gold);
    box-shadow: 0 20px 40px rgba(212, 172, 13, 0.1);
}

/* Numéro Géant en Filigrane (Plus élégant en violet très pâle) */
.ux-alert-number {
    font-size: 5rem;
    font-weight: 900;
    color: rgba(45, 30, 64, 0.04);
    position: absolute;
    top: 5px;
    right: 20px;
    pointer-events: none;
    transition: all 0.4s ease;
    line-height: 1;
}

.ux-alert-card:hover .ux-alert-number {
    color: var(--gold-light);
    transform: scale(1.2) translateY(5px);
}

.ux-alert-heading {
    color: var(--text-dark);
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 15px 0;
    position: relative;
    z-index: 1;
}

.ux-alert-text {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
    position: relative;
    z-index: 1;
}

.text-bold-dark { 
    color: var(--text-dark); 
    font-weight: 700; 
}

/* ==========================================================================
   RESPONSIVE ULTRA COMPLET
   ========================================================================== */

/* Très grands écrans */
@media (min-width: 1400px) {
    .ux-warning-container {
        max-width: 1240px;
    }

    .ux-warning-main-panel {
        padding: 70px 60px;
    }

    .ux-warning-grid {
        gap: 35px;
    }

    .ux-warning-title {
        font-size: 2rem;
    }

    .ux-warning-intro {
        font-size: 1.2rem;
    }
}

/* Desktop / laptop */
@media (max-width: 1200px) {
    .alert-glow-center {
        width: 680px;
        height: 680px;
    }

    .ux-warning-main-panel {
        padding: 55px 35px;
        border-radius: 34px;
    }

    .ux-warning-header {
        gap: 30px;
    }

    .ux-warning-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }

    .ux-alert-card {
        padding: 35px 25px;
    }
}

/* Tablettes paysage / petits laptops */
@media (max-width: 992px) {
    .ux-warning-light-section {
        padding: 80px 20px;
    }

    .alert-glow-center {
        width: 560px;
        height: 560px;
    }

    .ux-warning-main-panel {
        padding: 45px 28px;
        border-radius: 30px;
    }

    .ux-warning-header {
        gap: 24px;
        margin-bottom: 40px;
        padding-bottom: 35px;
    }

    .ux-alert-icon-box {
        width: 78px;
        height: 78px;
        border-radius: 24px;
        font-size: 2.3rem;
    }

    .ux-warning-title {
        font-size: 1.65rem;
        letter-spacing: -1px;
    }

    .ux-warning-intro {
        font-size: 1.05rem;
        line-height: 1.65;
    }

    .ux-warning-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .ux-alert-heading {
        font-size: 1.2rem;
    }

    .ux-alert-text {
        font-size: 1rem;
        line-height: 1.65;
    }

    .ux-alert-number {
        font-size: 4.2rem;
        right: 14px;
    }
}

/* Tablettes portrait */
@media (max-width: 768px) {
    .ux-warning-light-section {
        padding: 60px 15px;
    }

    .alert-glow-center {
        width: 420px;
        height: 420px;
        opacity: 0.9;
    }

    .ux-warning-container {
        max-width: 100%;
    }

    .ux-warning-main-panel {
        padding: 35px 20px;
        border-radius: 26px;
    }

    .ux-warning-header {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 20px;
        margin-bottom: 32px;
        padding-bottom: 28px;
    }

    .ux-warning-title-group {
        align-items: center;
    }

    .ux-alert-icon-box {
        width: 72px;
        height: 72px;
        font-size: 2rem;
        border-radius: 22px;
    }

    .ux-warning-title {
        font-size: 1.45rem;
        line-height: 1.2;
        letter-spacing: -0.8px;
    }

    .ux-warning-intro {
        font-size: 1rem;
        line-height: 1.6;
        max-width: 100%;
    }

    .ux-warning-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ux-alert-card {
        padding: 30px 22px;
        border-radius: 24px;
    }

    .ux-alert-heading {
        font-size: 1.15rem;
        margin-bottom: 12px;
        padding-right: 40px;
    }

    .ux-alert-text {
        font-size: 0.98rem;
        line-height: 1.6;
    }

    .ux-alert-number {
        font-size: 3.3rem;
        top: 10px;
        right: 14px;
    }

    .ux-alert-card:hover {
        transform: none;
    }
}

/* Grands mobiles */
@media (max-width: 576px) {
    .ux-warning-light-section {
        padding: 50px 12px;
    }

    .alert-glow-center {
        width: 320px;
        height: 320px;
    }

    .ux-warning-main-panel {
        padding: 28px 16px;
        border-radius: 22px;
        box-shadow: 0 18px 40px rgba(45, 30, 64, 0.05);
    }

    .ux-warning-header {
        gap: 16px;
        margin-bottom: 26px;
        padding-bottom: 24px;
    }

    .ux-alert-icon-box {
        width: 64px;
        height: 64px;
        font-size: 1.8rem;
        border-radius: 20px;
    }

    .ux-warning-title {
        font-size: 1.3rem;
    }

    .ux-warning-intro {
        font-size: 0.95rem;
        line-height: 1.55;
    }

    .ux-alert-card {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .ux-alert-heading {
        font-size: 1.05rem;
        padding-right: 34px;
    }

    .ux-alert-text {
        font-size: 0.94rem;
        line-height: 1.55;
    }

    .ux-alert-number {
        font-size: 2.8rem;
        top: 10px;
        right: 12px;
    }
}

/* Très petits mobiles */
@media (max-width: 400px) {
    .ux-warning-light-section {
        padding: 42px 10px;
    }

    .ux-warning-main-panel {
        padding: 22px 14px;
        border-radius: 18px;
    }

    .ux-warning-header {
        gap: 14px;
        margin-bottom: 22px;
        padding-bottom: 20px;
    }

    .ux-alert-icon-box {
        width: 56px;
        height: 56px;
        font-size: 1.55rem;
        border-radius: 18px;
    }

    .ux-warning-title {
        font-size: 1.15rem;
        letter-spacing: -0.4px;
    }

    .ux-warning-intro {
        font-size: 0.9rem;
    }

    .ux-alert-card {
        padding: 20px 15px;
        border-radius: 18px;
    }

    .ux-alert-heading {
        font-size: 1rem;
        margin-bottom: 10px;
        padding-right: 28px;
    }

    .ux-alert-text {
        font-size: 0.9rem;
    }

    .ux-alert-number {
        font-size: 2.25rem;
        right: 10px;
    }
}

/* Écrans tactiles : hover neutralisé */
@media (hover: none) and (pointer: coarse) {
    .ux-alert-card:hover {
        transform: none;
        background: var(--bg-main);
        border-color: var(--border-soft);
        box-shadow: none;
    }

    .ux-alert-card:hover .ux-alert-number {
        color: rgba(45, 30, 64, 0.04);
        transform: none;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-bb7f7ad *//* ==========================================================================
   SECTION INFOS PRATIQUES & ÉTHIQUE - LIGHT MODE 2026
   ========================================================================== */

:root {
    --wine-red: #A9445B;
    --text-dark: #1a0e24; 
    --text-muted: #64748b;
    --surface-white: #ffffff;
    --bg-light: #f8fafc;
}

.ux-pratique-light-section {
    background-color: var(--surface-white);
    padding: 80px 20px;
    font-family: system-ui, -apple-system, sans-serif;
}

.ux-pratique-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- Grille --- */
.ux-pratique-grid {
    display: grid;
    grid-template-columns: 1fr 400px; /* Colonne principale large + colonne infos fixe */
    gap: 40px;
}

/* ==========================================
   COLONNE GAUCHE (CARTE NARRATIVE)
   ========================================== */
.ux-trust-card-light {
    background: var(--bg-light);
    border-radius: 32px;
    padding: 50px;
    height: 100%;
}

.ux-overline {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--wine-red);
    margin-bottom: 20px;
}

.ux-faq-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 30px;
}

.ux-paragraph-light {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Barre de confidentialité */
.ux-confidentiality-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ffffff;
    padding: 20px;
    border-radius: 20px;
    margin: 30px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border-left: 4px solid #10b981;
}

.ux-confidentiality-bar p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.ux-image-frame-minimal {
    border-radius: 20px;
    overflow: hidden;
    margin-top: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.ux-full-img {
    width: 100%;
    display: block;
}

/* ==========================================
   COLONNE DROITE (MODULES)
   ========================================== */
.ux-pratique-side-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- Modules Communs --- */
.ux-info-module, .ux-ethique-module {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 28px;
    padding: 35px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.02);
}

.ux-module-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 25px;
    color: var(--text-dark);
}

/* --- Tuiles Infos Pratiques --- */
.ux-info-tile {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 16px;
    margin-bottom: 12px;
    position: relative;
}

.tile-icon {
    font-size: 1.3rem;
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 12px;
}

.tile-text {
    display: flex;
    flex-direction: column;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.tile-text strong {
    color: var(--text-dark);
}

.tile-blue { background: #eff6ff; }
.tile-green { background: #f0fdf4; }
.tile-red { background: #fff1f2; }

.tile-payments {
    position: absolute;
    right: 15px;
    display: flex;
    gap: 10px;
}
.tile-payments img { height: 18px; opacity: 0.6; }

/* --- Module Éthique --- */
.ux-ethique-title {
    color: var(--wine-red);
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 25px;
}

.ux-ethique-list {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.ux-ethique-list li {
    display: flex;
    gap: 12px;
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.ux-ethique-list .check {
    color: var(--wine-red);
    font-weight: bold;
}

.ux-ethique-quote {
    background: #fdf2f8;
    color: var(--wine-red);
    font-style: italic;
    font-weight: 600;
    padding: 15px 20px;
    border-radius: 12px;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 20px;
}

.ux-method-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}
.ux-pratique-light-section,
.ux-pratique-container,
.ux-pratique-grid,
.ux-trust-card-light,
.ux-pratique-side-col,
.ux-info-module,
.ux-ethique-module,
.ux-info-tile {
    box-sizing: border-box;
}

.ux-faq-title,
.ux-paragraph-light,
.ux-module-title,
.tile-text,
.ux-ethique-list li,
.ux-ethique-quote,
.ux-method-text,
.ux-confidentiality-bar p {
    overflow-wrap: break-word;
    word-break: break-word;
}

.tile-text,
.ux-pratique-side-col,
.ux-info-module,
.ux-ethique-module {
    min-width: 0;
}
/* ==========================================================================
   RESPONSIVE ULTRA COMPLET
   ========================================================================== */

/* Très grands écrans */
@media (min-width: 1400px) {
    .ux-pratique-container {
        max-width: 1200px;
    }

    .ux-pratique-grid {
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 50px;
    }

    .ux-trust-card-light {
        padding: 60px;
    }

    .ux-faq-title {
        font-size: 2.4rem;
    }

    .ux-paragraph-light {
        font-size: 1.12rem;
    }
}

/* Desktop moyen */
@media (max-width: 1200px) {
    .ux-pratique-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 30px;
    }

    .ux-trust-card-light {
        padding: 42px;
    }

    .ux-info-module,
    .ux-ethique-module {
        padding: 30px;
    }

    .ux-faq-title {
        font-size: 2rem;
    }
}

/* Tablettes paysage / petits laptops */
@media (max-width: 992px) {
    .ux-pratique-light-section {
        padding: 65px 20px;
    }

    .ux-pratique-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ux-trust-card-light {
        padding: 38px 32px;
    }

    .ux-pratique-side-col {
        gap: 24px;
    }

    .ux-info-module,
    .ux-ethique-module {
        padding: 28px;
        border-radius: 24px;
    }

    .ux-faq-title {
        font-size: 1.9rem;
        line-height: 1.2;
    }

    .ux-paragraph-light {
        font-size: 1.02rem;
        line-height: 1.65;
    }

    .ux-module-title {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }
}

/* Tablettes portrait */
@media (max-width: 768px) {
    .ux-pratique-light-section {
        padding: 50px 15px;
    }

    .ux-pratique-grid {
        gap: 22px;
    }

    .ux-trust-card-light {
        padding: 30px 22px;
        border-radius: 24px;
    }

    .ux-overline {
        font-size: 0.75rem;
        letter-spacing: 1.6px;
        margin-bottom: 16px;
    }

    .ux-faq-title {
        font-size: 1.65rem;
        margin-bottom: 22px;
    }

    .ux-paragraph-light {
        font-size: 0.98rem;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .ux-confidentiality-bar {
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        margin: 24px 0;
        border-radius: 16px;
    }

    .ux-confidentiality-bar p {
        font-size: 0.92rem;
        line-height: 1.5;
    }

    .ux-image-frame-minimal {
        margin-top: 24px;
        border-radius: 16px;
    }

    .ux-pratique-side-col {
        gap: 20px;
    }

    .ux-info-module,
    .ux-ethique-module {
        padding: 24px 20px;
        border-radius: 22px;
    }

    .ux-module-title {
        font-size: 1.2rem;
        margin-bottom: 18px;
    }

    .ux-info-tile {
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .tile-icon {
        width: 38px;
        height: 38px;
        font-size: 1.15rem;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .tile-text {
        font-size: 0.92rem;
        line-height: 1.45;
        padding-right: 0;
    }

    .tile-payments {
        position: static;
        margin-top: 10px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .tile-payments img {
        height: 16px;
    }

    .ux-ethique-title {
        font-size: 1.1rem;
        margin-bottom: 18px;
    }

    .ux-ethique-list li {
        font-size: 0.96rem;
        gap: 10px;
        margin-bottom: 10px;
    }

    .ux-ethique-quote {
        font-size: 0.95rem;
        padding: 14px 16px;
        margin-bottom: 16px;
    }

    .ux-method-text {
        font-size: 0.92rem;
        line-height: 1.55;
    }
}

/* Grands mobiles */
@media (max-width: 576px) {
    .ux-pratique-light-section {
        padding: 40px 12px;
    }

    .ux-trust-card-light {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .ux-faq-title {
        font-size: 1.45rem;
        margin-bottom: 18px;
    }

    .ux-paragraph-light {
        font-size: 0.94rem;
    }

    .ux-confidentiality-bar {
        padding: 14px;
        gap: 10px;
        border-radius: 14px;
    }

    .ux-confidentiality-bar p {
        font-size: 0.88rem;
    }

    .ux-image-frame-minimal {
        border-radius: 14px;
    }

    .ux-info-module,
    .ux-ethique-module {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .ux-module-title {
        font-size: 1.08rem;
        margin-bottom: 16px;
    }

    .ux-info-tile {
        padding: 12px;
        gap: 10px;
        border-radius: 12px;
    }

    .tile-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
        border-radius: 9px;
    }

    .tile-text {
        font-size: 0.88rem;
    }

    .tile-payments img {
        height: 15px;
    }

    .ux-ethique-title {
        font-size: 1rem;
        letter-spacing: 0.8px;
    }

    .ux-ethique-list li {
        font-size: 0.9rem;
    }

    .ux-ethique-quote {
        font-size: 0.9rem;
        padding: 12px 14px;
    }

    .ux-method-text {
        font-size: 0.88rem;
    }
}

/* Très petits mobiles */
@media (max-width: 400px) {
    .ux-pratique-light-section {
        padding: 34px 10px;
    }

    .ux-trust-card-light {
        padding: 20px 14px;
        border-radius: 18px;
    }

    .ux-overline {
        font-size: 0.7rem;
        letter-spacing: 1.2px;
    }

    .ux-faq-title {
        font-size: 1.25rem;
        line-height: 1.25;
    }

    .ux-paragraph-light {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .ux-confidentiality-bar {
        padding: 12px;
        border-radius: 12px;
    }

    .ux-confidentiality-bar p {
        font-size: 0.84rem;
    }

    .ux-info-module,
    .ux-ethique-module {
        padding: 16px 13px;
        border-radius: 16px;
    }

    .ux-module-title {
        font-size: 1rem;
    }

    .ux-info-tile {
        padding: 10px;
    }

    .tile-icon {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }

    .tile-text {
        font-size: 0.84rem;
    }

    .tile-payments {
        gap: 6px;
    }

    .tile-payments img {
        height: 14px;
    }

    .ux-ethique-list li,
    .ux-method-text,
    .ux-ethique-quote {
        font-size: 0.84rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-192db0b *//* --- FAQ STYLE LIGHT SERENITY --- */
.ux-faq-section {
    position: relative;
    background-color: var(--bg-main);
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
}

.ux-faq-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ux-faq-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}

/* Style des questions façon "Price Chip" */
.ux-faq-item {
    background: white;
    border: 1px solid var(--border-soft);
    border-radius: 25px;
    padding: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(45, 30, 64, 0.02);
}

.ux-faq-item:hover {
    transform: translateY(-5px);
    border-color: var(--amethyst-light);
    box-shadow: 0 15px 40px rgba(142, 68, 173, 0.08);
}

.ux-faq-question {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.3;
}

.ux-faq-question::before {
    content: "✦";
    color: var(--amethyst);
    font-size: 1.2rem;
}

.ux-faq-answer {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7;
    padding-left: 28px;
    border-left: 2px solid var(--bg-card);
}

.ux-faq-answer strong {
    color: var(--amethyst);
    font-weight: 700;
}

.ux-faq-section,
.ux-faq-container,
.ux-faq-list,
.ux-faq-item,
.ux-faq-question,
.ux-faq-answer {
    box-sizing: border-box;
}

.ux-faq-question,
.ux-faq-answer {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ==========================================================================
   RESPONSIVE FAQ
   ========================================================================== */

/* Très grands écrans */
@media (min-width: 1400px) {
    .ux-faq-container {
        max-width: 980px;
    }

    .ux-faq-section {
        padding: 100px 24px;
    }

    .ux-faq-list {
        gap: 24px;
        margin-top: 50px;
    }

    .ux-faq-item {
        padding: 34px;
    }

    .ux-faq-question {
        font-size: 1.22rem;
    }

    .ux-faq-answer {
        font-size: 1.04rem;
    }
}

/* Desktop moyen / laptop */
@media (max-width: 1200px) {
    .ux-faq-section {
        padding: 70px 20px;
    }

    .ux-faq-container {
        max-width: 860px;
    }

    .ux-faq-item {
        padding: 28px;
        border-radius: 22px;
    }
}

/* Tablettes paysage */
@media (max-width: 992px) {
    .ux-faq-section {
        padding: 60px 18px;
    }

    .ux-faq-container {
        max-width: 100%;
    }

    .ux-faq-list {
        gap: 18px;
        margin-top: 32px;
    }

    .ux-faq-item {
        padding: 24px;
        border-radius: 20px;
    }

    .ux-faq-question {
        font-size: 1.08rem;
        gap: 10px;
        margin-bottom: 12px;
    }

    .ux-faq-question::before {
        font-size: 1.05rem;
    }

    .ux-faq-answer {
        font-size: 0.97rem;
        line-height: 1.65;
        padding-left: 20px;
    }
}

/* Tablettes portrait */
@media (max-width: 768px) {
    .ux-faq-section {
        padding: 50px 15px;
    }

    .ux-faq-list {
        gap: 16px;
        margin-top: 28px;
    }

    .ux-faq-item {
        padding: 20px 18px;
        border-radius: 18px;
    }

    .ux-faq-item:hover {
        transform: none;
    }

    .ux-faq-question {
        font-size: 1rem;
        line-height: 1.4;
        align-items: flex-start;
        gap: 9px;
        margin-bottom: 10px;
    }

    .ux-faq-question::before {
        font-size: 1rem;
        margin-top: 1px;
        flex-shrink: 0;
    }

    .ux-faq-answer {
        font-size: 0.94rem;
        line-height: 1.6;
        padding-left: 16px;
        border-left-width: 2px;
    }
}

/* Grands mobiles */
@media (max-width: 576px) {
    .ux-faq-section {
        padding: 42px 12px;
    }

    .ux-faq-list {
        gap: 14px;
        margin-top: 24px;
    }

    .ux-faq-item {
        padding: 16px 15px;
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(45, 30, 64, 0.025);
    }

    .ux-faq-question {
        font-size: 0.95rem;
        gap: 8px;
    }

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

    .ux-faq-answer {
        font-size: 0.9rem;
        line-height: 1.55;
        padding-left: 14px;
    }
}

/* Très petits mobiles */
@media (max-width: 400px) {
    .ux-faq-section {
        padding: 36px 10px;
    }

    .ux-faq-item {
        padding: 14px 12px;
        border-radius: 14px;
    }

    .ux-faq-question {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .ux-faq-answer {
        font-size: 0.86rem;
        padding-left: 12px;
    }
}

/* Écrans tactiles */
@media (hover: none) and (pointer: coarse) {
    .ux-faq-item:hover {
        transform: none;
        border-color: var(--border-soft);
        box-shadow: 0 10px 30px rgba(45, 30, 64, 0.02);
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-920b3d4 *//* ==========================================================================
   SECTION RÉCAPITULATIF TARIFS - LIGHT SERENITY 2026
   ========================================================================== */

:root {
    --bg-main: #FBF8FF;           /* Blanc cassé lilas */
    --bg-card: #F3EBFF;           /* Violet très pâle */
    --text-dark: #2D1E40;         /* Violet sombre */
    --text-muted: #564D65;        /* Gris-violet doux */
    --amethyst: #8E44AD;          /* Améthyste vibrant */
    --amethyst-light: #A569BD;    /* Améthyste clair */
    --gold: #D4AC0D;              /* Or mat */
    --border-soft: rgba(142, 68, 173, 0.1);
}

.ux-pricing-summary-section {
    position: relative;
    background-color: var(--bg-main);
    padding: 80px 20px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    /* On enlève overflow: hidden ici pour permettre le sticky plus bas */
}

/* Halo central (Pastel Améthyste) */
.summary-glow {
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(142, 68, 173, 0.05), transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.ux-summary-container {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
}

/* --- Le Panneau "Soft UI" --- */
.ux-summary-main-panel {
    background: white;
    border: 1px solid var(--border-soft);
    border-radius: 40px;
    padding: 55px;
    box-shadow: 0 30px 60px rgba(45, 30, 64, 0.04);
}

.ux-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: center; /* Sera écrasé sur ordinateur pour le sticky */
}

/* ==========================================
   COLONNE IMAGE
   ========================================== */
.ux-img-frame-modern {
    position: relative;
    border-radius: 30px;
    padding: 10px;
    background: var(--bg-card); /* Petit liseré lilas autour de l'image */
}

.ux-summary-img {
    width: 100%;
    height: auto;
    border-radius: 22px;
    display: block;
    box-shadow: 0 15px 35px rgba(45, 30, 64, 0.1);
}

.ux-guarantee-badge {
    position: absolute;
    top: -15px;
    right: -15px;
    background: var(--amethyst);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 100px;
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 10px 20px rgba(142, 68, 173, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================
   COLONNE INFORMATIONS
   ========================================== */
.ux-overline-amethyst {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--amethyst);
    margin-bottom: 15px;
}

.ux-summary-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 20px 0;
    line-height: 1.1;
    letter-spacing: -1px;
}

.ux-summary-text {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 35px;
}

/* --- Les Price Chips (UI Moderne) --- */
.ux-price-chips-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}

.ux-price-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: var(--bg-main);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ux-price-chip:hover {
    background: white;
    border-color: var(--amethyst-light);
    transform: translateX(8px);
    box-shadow: 0 10px 20px rgba(142, 68, 173, 0.05);
}

/* Version "Highlight" (Le prix star) */
.chip-highlight {
    background: var(--bg-card);
    border-color: var(--amethyst);
}

.chip-label {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1.05rem;
}

.chip-value {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--amethyst);
}

.chip-highlight .chip-value {
    color: var(--amethyst);
    text-shadow: 0 0 20px rgba(142, 68, 173, 0.1);
}

/* --- Footer Sécurité --- */
.ux-security-footer {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding-top: 30px;
    border-top: 1px solid var(--bg-card);
}

.security-icon {
    font-size: 1.5rem;
    color: #27AE60; /* Un vert émeraude doux pour la confiance */
}

.ux-security-footer p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.ux-security-footer strong {
    color: var(--text-dark);
}

/* ==========================================================================
   L'EFFET STICKY POUR ORDINATEUR (TARIFS)
   ========================================================================== */
@media (min-width: 992px) {
    .ux-pricing-summary-section,
    .ux-summary-container,
    .ux-summary-main-panel {
        overflow: visible !important;
        transform: none !important;
    }

    .ux-summary-grid {
        align-items: start !important; /* Libère la hauteur pour que l'image glisse */
        transform: none !important;
    }

    /* La colonne sert de toboggan */
    .ux-summary-img-col {
        height: 100% !important;
        position: relative;
        display: block !important;
    }

    /* C'est le cadre de l'image qui glisse à l'intérieur de la colonne */
    .ux-img-frame-modern {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 120px !important; 
        z-index: 99;
    }
}

/* ==========================================================================
   RESPONSIVE ULTRA COMPLET
   ========================================================================== */

/* Très grands écrans */
@media (min-width: 1400px) {
    .ux-summary-container {
        max-width: 1120px;
    }

    .ux-summary-main-panel {
        padding: 65px;
    }

    .ux-summary-grid {
        grid-template-columns: minmax(320px, 1fr) minmax(0, 1.55fr);
        gap: 70px;
    }

    .ux-summary-title {
        font-size: 2rem;
    }

    .ux-summary-text {
        font-size: 1.15rem;
    }

    .ux-price-chip {
        padding: 22px 32px;
    }

    .chip-value {
        font-size: 1.7rem;
    }
}

/* Desktop moyen */
@media (max-width: 1200px) {
    .summary-glow {
        width: 520px;
        height: 520px;
    }

    .ux-summary-main-panel {
        padding: 48px 40px;
        border-radius: 34px;
    }

    .ux-summary-grid {
        gap: 40px;
    }

    .ux-summary-title {
        font-size: 1.7rem;
    }

    .ux-summary-text {
        font-size: 1.02rem;
        margin-bottom: 30px;
    }

    .ux-price-chip {
        padding: 18px 22px;
    }

    .chip-label {
        font-size: 1rem;
    }

    .chip-value {
        font-size: 1.4rem;
    }
}

/* Tablettes paysage / petits laptops */
@media (max-width: 992px) {
    .ux-pricing-summary-section {
        padding: 65px 20px;
    }

    .summary-glow {
        width: 430px;
        height: 430px;
    }

    .ux-summary-main-panel {
        padding: 40px 30px;
        border-radius: 30px;
    }

    .ux-summary-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        align-items: start;
    }

    .ux-summary-img-col {
        max-width: 420px;
        width: 100%;
        margin: 0 auto;
    }

    .ux-img-frame-modern {
        border-radius: 24px;
        padding: 8px;
    }

    .ux-summary-img {
        border-radius: 18px;
    }

    .ux-guarantee-badge {
        top: -12px;
        right: -10px;
        padding: 10px 18px;
        font-size: 0.75rem;
        letter-spacing: 0.8px;
        gap: 6px;
    }

    .ux-summary-title {
        font-size: 1.6rem;
        line-height: 1.15;
    }

    .ux-summary-text {
        font-size: 1rem;
        line-height: 1.65;
        margin-bottom: 28px;
    }

    .ux-price-chips-container {
        gap: 12px;
        margin-bottom: 30px;
    }

    .ux-price-chip {
        padding: 17px 18px;
        border-radius: 18px;
    }

    .chip-value {
        font-size: 1.3rem;
    }

    .ux-security-footer {
        padding-top: 24px;
    }
}

/* Tablettes portrait */
@media (max-width: 768px) {
    .ux-pricing-summary-section {
        padding: 50px 15px;
    }

    .summary-glow {
        width: 340px;
        height: 340px;
    }

    .ux-summary-main-panel {
        padding: 32px 20px;
        border-radius: 24px;
        box-shadow: 0 20px 40px rgba(45, 30, 64, 0.04);
    }

    .ux-summary-grid {
        gap: 30px;
    }

    .ux-img-frame-modern {
        border-radius: 20px;
        padding: 7px;
    }

    .ux-summary-img {
        border-radius: 15px;
    }

    .ux-guarantee-badge {
        position: static;
        margin: 0 auto 14px auto;
        width: fit-content;
        justify-content: center;
        padding: 9px 16px;
        font-size: 0.72rem;
    }

    .ux-overline-amethyst {
        font-size: 0.74rem;
        letter-spacing: 1.6px;
        margin-bottom: 12px;
    }

    .ux-summary-title {
        font-size: 1.4rem;
        margin-bottom: 16px;
        letter-spacing: -0.6px;
    }

    .ux-summary-text {
        font-size: 0.96rem;
        line-height: 1.6;
        margin-bottom: 24px;
    }

    .ux-price-chips-container {
        gap: 10px;
        margin-bottom: 24px;
    }

    .ux-price-chip {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 16px;
        border-radius: 16px;
    }

    .ux-price-chip:hover {
        transform: none;
    }

    .chip-label {
        font-size: 0.96rem;
    }

    .chip-value {
        font-size: 1.18rem;
        line-height: 1.1;
    }

    .ux-security-footer {
        gap: 12px;
        padding-top: 20px;
    }

    .security-icon {
        font-size: 1.25rem;
    }

    .ux-security-footer p {
        font-size: 0.9rem;
        line-height: 1.55;
    }
}

/* Grands mobiles */
@media (max-width: 576px) {
    .ux-pricing-summary-section {
        padding: 40px 12px;
    }

    .summary-glow {
        width: 260px;
        height: 260px;
    }

    .ux-summary-main-panel {
        padding: 24px 16px;
        border-radius: 20px;
    }

    .ux-summary-grid {
        gap: 24px;
    }

    .ux-img-frame-modern {
        border-radius: 18px;
        padding: 6px;
    }

    .ux-summary-img {
        border-radius: 13px;
    }

    .ux-guarantee-badge {
        padding: 8px 14px;
        font-size: 0.68rem;
        border-radius: 999px;
    }

    .ux-summary-title {
        font-size: 1.22rem;
        line-height: 1.2;
    }

    .ux-summary-text {
        font-size: 0.92rem;
        margin-bottom: 20px;
    }

    .ux-price-chip {
        padding: 14px;
        border-radius: 14px;
    }

    .chip-label {
        font-size: 0.9rem;
    }

    .chip-value {
        font-size: 1.05rem;
    }

    .ux-security-footer p {
        font-size: 0.85rem;
    }
}

/* Très petits mobiles */
@media (max-width: 400px) {
    .ux-pricing-summary-section {
        padding: 34px 10px;
    }

    .ux-summary-main-panel {
        padding: 20px 13px;
        border-radius: 18px;
    }

    .ux-overline-amethyst {
        font-size: 0.68rem;
        letter-spacing: 1.2px;
    }

    .ux-summary-title {
        font-size: 1.08rem;
        margin-bottom: 14px;
    }

    .ux-summary-text {
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .ux-guarantee-badge {
        font-size: 0.62rem;
        padding: 7px 12px;
    }

    .ux-price-chip {
        padding: 12px;
    }

    .chip-label {
        font-size: 0.84rem;
    }

    .chip-value {
        font-size: 0.96rem;
    }

    .ux-security-footer {
        gap: 10px;
    }

    .ux-security-footer p {
        font-size: 0.8rem;
    }
}

/* Tactile : on neutralise les hover trop agressifs */
@media (hover: none) and (pointer: coarse) {
    .ux-price-chip:hover {
        transform: none;
        background: var(--bg-main);
        border-color: var(--border-soft);
        box-shadow: none;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-4d74fff *//* ==========================================================================
   FOOTER CTA - LIGHT SERENITY 2026
   ========================================================================== */

:root {
    --bg-main: #FBF8FF;           /* Blanc cassé lilas */
    --bg-card: #F3EBFF;           /* Violet très pâle */
    --text-dark: #2D1E40;         /* Violet sombre */
    --text-muted: #564D65;        /* Gris-violet doux */
    --amethyst: #8E44AD;          /* Améthyste vibrant */
    --amethyst-light: #A569BD;    /* Améthyste clair */
    --gold: #D4AC0D;              /* Or mat */
    --border-soft: rgba(142, 68, 173, 0.1);
}

.ux-footer-cta-section {
    position: relative;
    background-color: var(--bg-main);
    padding: 100px 20px 60px;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    text-align: center;
}

/* Halo central Aurora (Version Améthyste Douce) */
.footer-glow-center {
    position: absolute;
    width: 800px; height: 600px;
    background: radial-gradient(circle, rgba(142, 68, 173, 0.08), transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.ux-footer-container {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

/* --- La Carte de Sortie (Soft UI Panel) --- */
.ux-footer-main-card {
    background: white;
    border: 1px solid var(--border-soft);
    border-radius: 48px; /* Coins très arrondis pour la douceur */
    padding: 80px 40px;
    box-shadow: 0 40px 80px rgba(45, 30, 64, 0.08);
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
}

/* Petit rappel Or Mat en haut de carte */
.ux-footer-main-card::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 120px; height: 4px;
    background: var(--gold);
    border-radius: 0 0 10px 10px;
}

.ux-footer-icon {
    font-size: 3rem;
    margin-bottom: 25px;
    display: inline-block;
    filter: drop-shadow(0 10px 15px rgba(142, 68, 173, 0.2));
}

.ux-footer-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 25px;
    letter-spacing: -1.5px;
    line-height: 1.1;
}

.ux-footer-text {
    font-size: 1.25rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 45px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Bouton Améthyste Éclatant --- */
.ux-btn-footer-call {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: var(--amethyst);
    color: #ffffff;
    padding: 22px 50px;
    border-radius: 20px; /* Squircle */
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 15px 35px rgba(142, 68, 173, 0.3);
}

.ux-btn-footer-call:hover {
    transform: translateY(-5px) scale(1.02);
    background: rgba(142, 68, 173, 0.15);
    box-shadow: 0 25px 50px rgba(142, 68, 173, 0.4);
}

.pulse-icon {
    animation: pulse-phone 2s infinite ease-in-out;
}

@keyframes pulse-phone {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* --- Infos de pied de carte --- */
.ux-footer-info {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 600;
}

.info-divider {
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0.6;
}

.ux-copyright {
    font-size: 0.9rem;
    color: #94a3b8;
    letter-spacing: 0.5px;
    margin-top: 30px;
    border-top: 1px solid var(--border-soft);
    padding-top: 30px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}.ux-footer-cta-section,
.ux-footer-container,
.ux-footer-main-card,
.ux-btn-footer-call,
.ux-footer-info,
.ux-copyright {
    box-sizing: border-box;
}

.ux-footer-title,
.ux-footer-text,
.ux-footer-info,
.ux-copyright,
.ux-btn-footer-call {
    overflow-wrap: break-word;
    word-break: break-word;
}

.ux-footer-container,
.ux-footer-main-card,
.ux-footer-info {
    min-width: 0;
}

/* ==========================================================================
   RESPONSIVE ULTRA COMPLET
   ========================================================================== */

/* Très grands écrans */
@media (min-width: 1400px) {
    .ux-footer-container {
        max-width: 980px;
    }

    .ux-footer-main-card {
        padding: 90px 50px;
    }

    .ux-footer-title {
        font-size: 2.2rem;
    }

    .ux-footer-text {
        font-size: 1.3rem;
        max-width: 700px;
    }
}

/* Desktop moyen */
@media (max-width: 1200px) {
    .footer-glow-center {
        width: 700px;
        height: 520px;
    }

    .ux-footer-main-card {
        padding: 70px 35px;
        border-radius: 40px;
        margin-bottom: 50px;
    }

    .ux-footer-title {
        font-size: 1.85rem;
    }

    .ux-footer-text {
        font-size: 1.15rem;
        margin-bottom: 38px;
    }

    .ux-btn-footer-call {
        padding: 20px 40px;
    }
}

/* Tablettes paysage */
@media (max-width: 992px) {
    .ux-footer-cta-section {
        padding: 80px 18px 50px;
    }

    .footer-glow-center {
        width: 560px;
        height: 440px;
    }

    .ux-footer-main-card {
        padding: 60px 30px;
        border-radius: 34px;
        margin-bottom: 40px;
    }

    .ux-footer-main-card::before {
        width: 100px;
    }

    .ux-footer-icon {
        font-size: 2.6rem;
        margin-bottom: 20px;
    }

    .ux-footer-title {
        font-size: 1.7rem;
        line-height: 1.15;
        margin-bottom: 20px;
    }

    .ux-footer-text {
        font-size: 1.05rem;
        line-height: 1.65;
        margin-bottom: 32px;
        max-width: 100%;
    }

    .ux-btn-footer-call {
        padding: 18px 30px;
        border-radius: 18px;
        font-size: 0.98rem;
        gap: 12px;
    }

    .ux-footer-info {
        margin-top: 36px;
        gap: 18px;
        font-size: 0.95rem;
        flex-wrap: wrap;
    }

    .ux-copyright {
        margin-top: 24px;
        padding-top: 24px;
    }
}

/* Tablettes portrait */
@media (max-width: 768px) {
    .ux-footer-cta-section {
        padding: 60px 15px 40px;
    }

    .footer-glow-center {
        width: 420px;
        height: 320px;
    }

    .ux-footer-main-card {
        padding: 46px 22px;
        border-radius: 26px;
        margin-bottom: 32px;
        box-shadow: 0 24px 50px rgba(45, 30, 64, 0.06);
    }

    .ux-footer-main-card::before {
        width: 82px;
        height: 4px;
    }

    .ux-footer-icon {
        font-size: 2.2rem;
        margin-bottom: 16px;
    }

    .ux-footer-title {
        font-size: 1.45rem;
        letter-spacing: -0.8px;
        margin-bottom: 16px;
    }

    .ux-footer-text {
        font-size: 0.98rem;
        line-height: 1.6;
        margin-bottom: 26px;
    }
    
    .ux-btn-footer-call {
        width: 100%;
        justify-content: center;
        padding: 18px 20px;
        font-size: 1rem;
        border-radius: 16px;
        gap: 10px;
    }
    
    .ux-footer-info {
        flex-direction: column;
        gap: 12px;
        margin-top: 28px;
        font-size: 0.92rem;
    }

    .info-divider {
        display: none;
    }

    .ux-copyright {
        font-size: 0.84rem;
        margin-top: 22px;
        padding-top: 20px;
        max-width: 100%;
    }
}

/* Grands mobiles */
@media (max-width: 576px) {
    .ux-footer-cta-section {
        padding: 46px 12px 34px;
    }

    .footer-glow-center {
        width: 300px;
        height: 240px;
    }

    .ux-footer-main-card {
        padding: 34px 16px;
        border-radius: 20px;
        margin-bottom: 26px;
    }

    .ux-footer-main-card::before {
        width: 70px;
    }

    .ux-footer-icon {
        font-size: 1.95rem;
        margin-bottom: 14px;
    }

    .ux-footer-title {
        font-size: 1.2rem;
        line-height: 1.2;
        margin-bottom: 14px;
    }

    .ux-footer-text {
        font-size: 0.9rem;
        line-height: 1.55;
        margin-bottom: 22px;
    }

    .ux-btn-footer-call {
        padding: 16px 14px;
        font-size: 0.92rem;
        border-radius: 14px;
    }

    .ux-footer-info {
        font-size: 0.86rem;
        gap: 10px;
    }

    .ux-copyright {
        font-size: 0.78rem;
        letter-spacing: 0.2px;
    }
}

/* Très petits mobiles */
@media (max-width: 400px) {
    .ux-footer-cta-section {
        padding: 38px 10px 28px;
    }

    .ux-footer-main-card {
        padding: 28px 13px;
        border-radius: 18px;
    }

    .ux-footer-title {
        font-size: 1.05rem;
    }

    .ux-footer-text {
        font-size: 0.84rem;
    }

    .ux-btn-footer-call {
        padding: 14px 12px;
        font-size: 0.86rem;
        gap: 8px;
    }

    .ux-footer-info {
        font-size: 0.8rem;
    }

    .ux-copyright {
        font-size: 0.74rem;
    }
}

/* Tactile : hover neutralisé */
@media (hover: none) and (pointer: coarse) {
    .ux-btn-footer-call:hover {
        transform: none;
        background: var(--amethyst);
        box-shadow: 0 15px 35px rgba(142, 68, 173, 0.3);
    }
}/* End custom CSS */