/* ==========================================================================
   White Smile — couche de thème e-commerce
   Chargée EN DERNIER : elle surcharge volontairement style.css (thème acheté)
   et Bootstrap. Ne pas éditer style.css, tout ajout de style vient ici.
   ========================================================================== */

:root {
    /* Marque */
    --ws-purple-50:  #f6f2ff;
    --ws-purple-100: #ece3ff;
    --ws-purple-200: #d9c7ff;
    --ws-purple-300: #bda0f7;
    --ws-purple-500: #7c3aed;
    --ws-purple-600: #6d28d9;
    --ws-purple-700: #5b21b6;

    /* Neutres */
    --ws-ink:      #16121f;
    --ws-body:     #4b4560;
    --ws-muted:    #857f96;
    --ws-line:     #ece9f2;
    --ws-surface:  #ffffff;
    --ws-canvas:   #faf9fc;

    /* Sémantique */
    --ws-success:  #16a34a;
    --ws-danger:   #dc2626;
    --ws-warning:  #d97706;
    --ws-sale:     #e11d48;

    /* Formes */
    --ws-radius-sm: 10px;
    --ws-radius:    16px;
    --ws-radius-lg: 24px;
    --ws-radius-pill: 999px;

    /* Élévations : douces, jamais noires — le noir pur fait "template gratuit" */
    --ws-shadow-xs: 0 1px 2px rgba(22, 18, 31, .05);
    --ws-shadow-sm: 0 2px 8px rgba(22, 18, 31, .06);
    --ws-shadow:    0 8px 24px rgba(22, 18, 31, .08);
    --ws-shadow-lg: 0 20px 48px rgba(91, 33, 182, .14);

    --ws-ease: cubic-bezier(.2, .8, .3, 1);

    /* Alias Bootstrap pour que btn-primary, .text-primary, etc. suivent la marque */
    --bs-primary: var(--ws-purple-500);
    --bs-primary-rgb: 124, 58, 237;
    --bs-link-color: var(--ws-purple-600);
    --bs-link-hover-color: var(--ws-purple-700);
    --bs-body-color: var(--ws-body);
    --bs-border-radius: var(--ws-radius-sm);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    /* Poppins vient de style.css (import Google Fonts) : c'est la police de la
       marque, on ne la remplace pas — on se contente d'un repli propre. */
    font-family: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    color: var(--ws-body);
    background: var(--ws-surface);
    /* carousel.css imposait un padding-bottom de 3rem sur toutes les pages */
    padding-bottom: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ws-ink);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

h1, .h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
h2, .h2 { font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.35rem); }
h3, .h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }

p { line-height: 1.7; }

a { text-decoration: none; transition: color .18s var(--ws-ease); }

img { max-width: 100%; height: auto; }

::selection { background: var(--ws-purple-200); color: var(--ws-ink); }

:focus-visible {
    outline: 3px solid var(--ws-purple-300);
    outline-offset: 2px;
    border-radius: 6px;
}

.text-purple { color: var(--ws-purple-500) !important; }
.bg-purple   { background-color: var(--ws-purple-500) !important; }
.text-muted  { color: var(--ws-muted) !important; }
.ws-canvas   { background: var(--ws-canvas); }

.section_padding,
.ws-section { padding: clamp(3rem, 6vw, 5.5rem) 0; }

/* Titre de section homogène sur tout le site */
.section_tittle h2,
.ws-section-title {
    position: relative;
    display: inline-block;
    margin-bottom: 2.25rem;
}
.section_tittle h2::after,
.ws-section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -.7rem;
    width: 56px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: var(--ws-radius-pill);
    background: linear-gradient(90deg, var(--ws-purple-500), var(--ws-purple-300));
}

/* `block` : en inline-block, le sur-titre se retrouvait sur la même ligne que
   le h2 qui suit (lui aussi inline-block pour porter son trait). */
.ws-eyebrow {
    display: block;
    margin-bottom: .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ws-purple-600);
}

/* Sauf dans le bloc d'achat, où il tient lieu de nom de marque au-dessus du titre. */
.ws-buybox .ws-eyebrow { margin-bottom: .15rem; }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-font-weight: 600;
    border-radius: var(--ws-radius-pill);
    padding: .72rem 1.6rem;
    transition: transform .18s var(--ws-ease), box-shadow .18s var(--ws-ease), background .18s var(--ws-ease);
}

.btn:active { transform: translateY(1px); }

.btn-purple,
.btn-primary {
    background: var(--ws-purple-500);
    border: none;
    color: #fff;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .25);
}

.btn-purple:hover, .btn-purple:focus,
.btn-primary:hover, .btn-primary:focus {
    background: var(--ws-purple-600);
    color: #fff;
    box-shadow: 0 10px 24px rgba(124, 58, 237, .32);
    transform: translateY(-1px);
}

.btn-outline-purple {
    border: 1.5px solid var(--ws-purple-200);
    color: var(--ws-purple-600);
    background: #fff;
}
.btn-outline-purple:hover {
    border-color: var(--ws-purple-500);
    background: var(--ws-purple-50);
    color: var(--ws-purple-700);
}

.btn-lg { padding: .95rem 2.1rem; font-size: 1.05rem; }
.btn-sm { padding: .45rem 1.05rem; font-size: .875rem; }

/* État "chargement" du bouton panier, piloté par ws-shop.js */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ws-spin .6s linear infinite;
}
@keyframes ws-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Bandeau promo + en-tête
   -------------------------------------------------------------------------- */

/* Bandeau promo : message fixe et centré. Le défilement en marquee de la
   version précédente rendait le texte illisible et faisait « template gratuit ». */
.promo-banner {
    background: linear-gradient(90deg, var(--ws-purple-700), var(--ws-purple-500) 55%, var(--ws-purple-700));
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-align: center;
    padding: .55rem 1rem;
    white-space: normal;
    overflow: visible;
}
.promo-banner i { margin-right: .45rem; opacity: .9; }
.promo-banner strong { font-weight: 700; }

/* Le thème hérité pose `margin: 20px 0` et un fond transparent sur .main_menu :
   le header collant flottait au-dessus du contenu avec un trou de 20 px. */
.main_menu {
    margin: 0 !important;
    padding: 0 !important;
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--ws-line);
    transition: box-shadow .25s var(--ws-ease);
}

.main_menu.is-stuck {
    box-shadow: 0 4px 20px rgba(22, 18, 31, .07);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.main_menu .navbar {
    min-height: 74px;
    padding: 0 !important;
    gap: 1rem;
}

.main_menu .navbar-brand { padding: 0; margin: 0; }
.main_menu .navbar-brand img {
    display: block;
    height: 42px;
    width: auto;
    max-width: none;
}

/* Liens : soulignement animé plutôt qu'une pastille, plus sobre. */
.main_menu .navbar-nav .nav-link {
    position: relative;
    color: var(--ws-ink) !important;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .01em;
    padding: 1.6rem .9rem !important;
    background: none !important;
}

/* Le trait se place sous le texte, pas au milieu : `bottom` était calculé pour
   l'ancien padding vertical et le soulignement traversait le libellé. */
.main_menu .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: .35rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ws-purple-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s var(--ws-ease);
}

/* Aucune décoration héritée du thème ne doit barrer le libellé. */
.main_menu .navbar-nav .nav-link,
.main_menu .navbar-nav .nav-link:hover { text-decoration: none !important; }

.main_menu .navbar-nav .nav-link:hover,
.main_menu .navbar-nav .nav-link:focus-visible { color: var(--ws-purple-600) !important; }
.main_menu .navbar-nav .nav-link:hover::after { transform: scaleX(1); }

/* La flèche du dropdown Bootstrap alourdit la barre : on la remplace par un chevron discret. */
.main_menu .dropdown-toggle::after {
    margin-left: .4rem;
    border-top-color: currentColor;
    opacity: .5;
}

/* Actions : cibles tactiles homogènes de 42 px. */
.navbar-actions { gap: .15rem; }

.navbar-actions .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 !important;
    color: var(--ws-ink) !important;
    font-size: 1.02rem;
    border-radius: 50%;
    transition: background .18s var(--ws-ease), color .18s var(--ws-ease);
}

.navbar-actions .nav-link:hover,
.navbar-actions .nav-link:focus-visible {
    color: var(--ws-purple-600) !important;
    background: var(--ws-purple-50);
}

.cart-badge {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .67rem;
    font-weight: 700;
    color: #fff;
    background: var(--ws-sale);
    border: 2px solid #fff;
    border-radius: var(--ws-radius-pill);
    line-height: 1;
}

/* Tiroir mobile */
@media (max-width: 991.98px) {
    .main_menu .navbar { min-height: 60px; }
    .main_menu .navbar-brand img { height: 34px; }

    /* Le thème dessinait le burger en image de fond SVG de 2.3em sur une base
       de 2.2rem, soit ~80 px de traits épais. On le redessine en CSS : trois
       filets de 2 px sur 20 px, qui se transforment en croix à l'ouverture. */
    .navbar-toggler {
        order: -1;
        position: relative;
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        background: none;
        box-shadow: none !important;
        font-size: 0 !important;
    }

    .navbar-toggler .navbar-toggler-icon {
        background-image: none !important;
        width: 20px;
        height: 2px;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -1px 0 0 -10px;
        border-radius: 2px;
        background: var(--ws-ink);
        transition: background .2s var(--ws-ease);
    }

    .navbar-toggler .navbar-toggler-icon::before,
    .navbar-toggler .navbar-toggler-icon::after {
        content: "";
        position: absolute;
        left: 0;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--ws-ink);
        transition: transform .25s var(--ws-ease);
    }

    .navbar-toggler .navbar-toggler-icon::before { top: -6px; }
    .navbar-toggler .navbar-toggler-icon::after  { top: 6px; }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background: transparent; }
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { transform: translateY(6px) rotate(45deg); }
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after  { transform: translateY(-6px) rotate(-45deg); }

    .main_menu .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(320px, 86vw);
        padding: 1.25rem 1rem 2rem;
        background: #fff;
        box-shadow: var(--ws-shadow-lg);
        transform: translateX(-100%);
        transition: transform .28s var(--ws-ease);
        overflow-y: auto;
        display: block !important;
        z-index: 1050;
    }

    .main_menu .navbar-collapse.show { transform: translateX(0); }

    .main_menu .navbar-nav .nav-link {
        padding: .85rem .6rem !important;
        border-bottom: 1px solid var(--ws-line);
    }
    .main_menu .navbar-nav .nav-link::after { display: none; }

    .navbar-actions {
        flex-direction: column;
        align-items: stretch !important;
        margin-top: 1rem;
        gap: .25rem;
    }
    .navbar-actions .nav-link {
        justify-content: flex-start;
        gap: .75rem;
        padding: .7rem .6rem !important;
        border-radius: var(--ws-radius-sm);
        width: 100%;
    }
    .cart-badge { position: static; margin-left: auto; border: none; }

    .drawer-overlay {
        position: fixed;
        inset: 0;
        z-index: 1049;
        background: rgba(22, 18, 31, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s var(--ws-ease), visibility .25s;
    }
    .drawer-overlay.open { opacity: 1; visibility: visible; }
}

.dropdown-menu {
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    box-shadow: var(--ws-shadow);
    padding: .5rem;
}
.dropdown-item { border-radius: var(--ws-radius-sm); font-weight: 500; padding: .55rem .8rem; }
.dropdown-item:hover { background: var(--ws-purple-50); color: var(--ws-purple-700); }

/* Bandeau de réassurance sous le header */
.ws-trustbar {
    border-bottom: 1px solid var(--ws-line);
    background: var(--ws-canvas);
    font-size: .84rem;
    color: var(--ws-body);
}
.ws-trustbar ul {
    display: flex;
    gap: 2.5rem;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: .6rem 0;
    list-style: none;
    flex-wrap: wrap;
}
.ws-trustbar li { display: flex; align-items: center; gap: .45rem; font-weight: 500; }
.ws-trustbar i { color: var(--ws-purple-500); }

@media (max-width: 767.98px) {
    .ws-trustbar ul { gap: 1.1rem; font-size: .76rem; }
}

/* --------------------------------------------------------------------------
   Carte produit
   -------------------------------------------------------------------------- */

.ws-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    overflow: hidden;
    transition: transform .25s var(--ws-ease), box-shadow .25s var(--ws-ease), border-color .25s var(--ws-ease);
}

.ws-product-card:hover {
    transform: translateY(-4px);
    border-color: var(--ws-purple-200);
    box-shadow: var(--ws-shadow);
}

.ws-product-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--ws-purple-50);
    overflow: hidden;
}

.ws-product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.1rem;
    transition: transform .4s var(--ws-ease);
}

.ws-product-card:hover .ws-product-card__media img { transform: scale(1.05); }

.ws-product-card__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.1rem 1.15rem;
    flex: 1;
}

.ws-product-card__title {
    font-size: 1rem;
    font-weight: 650;
    color: var(--ws-ink);
    margin: 0;
    /* Deux lignes max pour que toutes les cartes d'une rangée s'alignent */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.ws-product-card__title a { color: inherit; }
.ws-product-card:hover .ws-product-card__title a { color: var(--ws-purple-600); }

.ws-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ws-price__now { font-size: 1.22rem; font-weight: 750; color: var(--ws-ink); }
.ws-price__was { font-size: .92rem; color: var(--ws-muted); text-decoration: line-through; }

.ws-badge {
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 2;
    padding: .28rem .6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: var(--ws-sale);
    border-radius: var(--ws-radius-pill);
}
.ws-badge--out { background: var(--ws-muted); }

.ws-wishlist {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ws-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ws-muted);
    transition: all .18s var(--ws-ease);
}
.ws-wishlist:hover { color: var(--ws-sale); border-color: var(--ws-sale); transform: scale(1.08); }
.ws-wishlist.active { color: #fff; background: var(--ws-sale); border-color: var(--ws-sale); }

.ws-rating { display: inline-flex; align-items: center; gap: .18rem; font-size: .82rem; color: var(--ws-muted); }
/* Cible toutes les variantes d'étoile : la demi-étoile est `fa-star-half-alt`
   et restait grise avec un sélecteur limité à `.fa-star`. */
.ws-rating i[class*="fa-star"] { font-size: .8rem; color: #d8d3e2; }
.ws-rating i[class*="fa-star"].is-on { color: #f59e0b; }

/* --------------------------------------------------------------------------
   Fiche produit — galerie
   -------------------------------------------------------------------------- */

.product-detail { background: var(--ws-surface); }

.ws-gallery {
    position: relative;
    padding: 1rem;
    background: var(--ws-canvas);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
}

.ws-gallery__flag {
    position: absolute;
    top: 1.35rem;
    left: 1.35rem;
    z-index: 3;
    padding: .35rem .8rem;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    background: var(--ws-sale);
    border-radius: var(--ws-radius-pill);
    box-shadow: var(--ws-shadow-sm);
}

#mainProductSlider .main-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
    border-radius: var(--ws-radius);
    padding: 1rem;
}

#productThumbsSlider .thumb-switcher {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
    border: 2px solid var(--ws-line);
    border-radius: var(--ws-radius-sm);
    padding: .3rem;
    cursor: pointer;
    opacity: .8;
    transition: opacity .18s var(--ws-ease), border-color .18s var(--ws-ease);
}
#productThumbsSlider .thumb-switcher:hover { opacity: 1; }
#productThumbsSlider .thumb-switcher.active { opacity: 1; border-color: var(--ws-purple-500); }

/* --------------------------------------------------------------------------
   Fiche produit — bloc d'achat
   -------------------------------------------------------------------------- */

.ws-buybox { max-width: 520px; }

.ws-buybox__title {
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
    margin: .35rem 0 .75rem;
}

.ws-buybox__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    border-radius: var(--ws-radius-pill);
    background: var(--ws-purple-50);
    color: var(--ws-purple-700);
}
.stock-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stock-badge.in-stock { background: #eafaef; color: #157a3a; }
.stock-badge.out-stock { background: #fdeaea; color: #b42318; }

.ws-buybox__price {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ws-buybox__now { font-size: 2.1rem; font-weight: 750; color: var(--ws-ink); line-height: 1; }
.ws-buybox__was { font-size: 1.05rem; color: var(--ws-muted); text-decoration: line-through; }

.ws-save {
    padding: .25rem .7rem;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: var(--ws-sale);
    border-radius: var(--ws-radius-pill);
}

.ws-buybox__desc { color: var(--ws-body); margin-bottom: 1.35rem; }
.ws-buybox__desc p:last-child { margin-bottom: 0; }

/* Sélecteur de format : des radios natives déguisées en cartes cliquables,
   pour que la quantité soit postée même sans JavaScript. */
.ws-qty-options { border: 0; padding: 0; margin: 0 0 1.1rem; }
.ws-qty-options__legend {
    float: none;
    width: auto;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ws-muted);
    margin-bottom: .55rem;
}

.ws-qty-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    margin-bottom: .55rem;
    background: #fff;
    border: 1.5px solid var(--ws-line);
    border-radius: var(--ws-radius);
    cursor: pointer;
    transition: border-color .18s var(--ws-ease), background .18s var(--ws-ease);
}
.ws-qty-option:hover { border-color: var(--ws-purple-300); }
.ws-qty-option:has(input:checked) {
    border-color: var(--ws-purple-500);
    background: var(--ws-purple-50);
    box-shadow: 0 0 0 3px var(--ws-purple-100);
}
.ws-qty-option:has(input:focus-visible) { outline: 3px solid var(--ws-purple-300); outline-offset: 2px; }

/* Puce ronde dessinée à la place du radio natif. */
.ws-qty-option input { position: absolute; opacity: 0; pointer-events: none; }
.ws-qty-option::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ws-line);
    border-radius: 50%;
    transition: border-color .18s var(--ws-ease), box-shadow .18s var(--ws-ease);
}
.ws-qty-option:has(input:checked)::before {
    border-color: var(--ws-purple-500);
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--ws-purple-500);
}

.ws-qty-option__body { display: flex; flex-direction: column; line-height: 1.3; }
.ws-qty-option__title { font-weight: 650; color: var(--ws-ink); }
.ws-qty-option__meta { font-size: .82rem; color: var(--ws-muted); }
.ws-qty-option__total { margin-left: auto; font-weight: 750; color: var(--ws-ink); }
.ws-qty-option__flag {
    position: absolute;
    top: -9px;
    right: 1rem;
    padding: .12rem .55rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ws-success);
    border-radius: var(--ws-radius-pill);
}

.ws-qty-option.is-highlighted { border-color: var(--ws-purple-300); }
.ws-qty-option__off {
    display: inline-block;
    margin-left: .35rem;
    padding: .1rem .45rem;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    background: var(--ws-sale);
    border-radius: var(--ws-radius-pill);
    vertical-align: middle;
}
.ws-qty-option__meta s { margin-left: .3rem; opacity: .7; }

/* Sélecteur simple, pour les produits sans palier configuré. */
.ws-qty-stepper {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
}
.ws-qty-stepper__label { font-weight: 600; color: var(--ws-ink); }
.ws-qty-stepper .input-number {
    width: 64px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-sm);
    font-weight: 600;
}
.ws-qty-stepper .btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; }

/* --------------------------------------------------------------------------
   Composition d'un pack
   -------------------------------------------------------------------------- */

.ws-pack {
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.35rem;
    background: var(--ws-purple-50);
    border: 1px solid var(--ws-purple-100);
    border-radius: var(--ws-radius);
}
.ws-pack__title {
    display: block;
    margin-bottom: .75rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ws-purple-700);
}
.ws-pack__title i { margin-right: .35rem; }
.ws-pack__list { list-style: none; margin: 0; padding: 0; }
.ws-pack__list li {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .45rem 0;
    font-size: .92rem;
}
.ws-pack__list li + li { border-top: 1px dashed var(--ws-purple-200); }
.ws-pack__list img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
}
.ws-pack__qty { font-weight: 700; color: var(--ws-purple-700); }
.ws-pack__list a { color: var(--ws-ink); font-weight: 500; }
.ws-pack__list a:hover { color: var(--ws-purple-600); }
.ws-pack__value { margin-left: auto; color: var(--ws-muted); font-size: .86rem; }
.ws-pack__saving {
    margin: .75rem 0 0;
    font-size: .88rem;
    color: var(--ws-body);
}
.ws-pack__saving strong { color: var(--ws-success); }

/* Badge « pack » sur la carte produit */
.ws-badge--pack { background: var(--ws-purple-600); left: auto; right: .7rem; }

.ws-cta { font-size: 1.05rem; padding: 1rem 1.5rem; }

.ws-buybox__ship {
    margin: .75rem 0 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ws-purple-700);
    text-align: center;
}
.ws-buybox__ship i { margin-right: .35rem; }

.ws-buybox__perks {
    list-style: none;
    margin: 1.5rem 0 1rem;
    padding: 1.1rem 1.2rem;
    background: var(--ws-canvas);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
}
.ws-buybox__perks li {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .9rem;
    color: var(--ws-body);
}
.ws-buybox__perks li + li { margin-top: .6rem; }
.ws-buybox__perks i { color: var(--ws-purple-500); width: 18px; text-align: center; }

/* --------------------------------------------------------------------------
   Bandeau des piliers produit
   -------------------------------------------------------------------------- */

/* Marge basse : le bandeau collait au bloc « Description complète » qui suit. */
.ws-pillars-section { padding: 2.5rem 0; margin-bottom: 3rem; background: var(--ws-purple-50); }

.ws-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.ws-pillars li { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.ws-pillars i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: .35rem;
    font-size: 1.15rem;
    color: var(--ws-purple-600);
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--ws-shadow-xs);
}
.ws-pillars strong { color: var(--ws-ink); font-size: .95rem; }
.ws-pillars span { font-size: .82rem; color: var(--ws-muted); max-width: 22ch; }

@media (max-width: 767.98px) {
    .ws-pillars { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

.ws-steps-list { padding-left: 1.1rem; margin: 0; }
.ws-steps-list li { margin-bottom: .5rem; }
.ws-steps-list li::marker { color: var(--ws-purple-500); font-weight: 700; }

/* --------------------------------------------------------------------------
   Avis
   -------------------------------------------------------------------------- */

.ws-review-summary {
    position: sticky;
    top: 110px;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    text-align: center;
}
.ws-review-summary__value { font-size: 3rem; font-weight: 800; color: var(--ws-ink); line-height: 1; }
.ws-review-summary__bars { margin-top: 1.25rem; text-align: left; }

.ws-review-bar { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.ws-review-bar__label { font-size: .82rem; color: var(--ws-muted); white-space: nowrap; }
.ws-review-bar .progress { flex: 1; height: 7px; }
.ws-review-bar__count { font-size: .8rem; color: var(--ws-muted); width: 1.6rem; text-align: right; }

.ws-review {
    padding: 1.15rem 1.25rem;
    background: #fff;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    margin-bottom: .85rem;
}
.ws-review__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.ws-review__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-weight: 700;
    color: var(--ws-purple-700);
    background: var(--ws-purple-100);
    border-radius: 50%;
}
.ws-review__author { display: block; font-weight: 650; color: var(--ws-ink); font-size: .93rem; }
.ws-review__verified { font-size: .76rem; color: var(--ws-success); font-weight: 600; }
.ws-review__verified i { margin-right: .2rem; }
.ws-review__date { margin-left: auto; font-size: .8rem; color: var(--ws-muted); }

.ws-review-form {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
}

/* --------------------------------------------------------------------------
   Avis illustrés (« Ce que nos clients disent »)
   -------------------------------------------------------------------------- */

.ws-testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
}

.ws-testimonial {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: #fff;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    overflow: hidden;
    transition: transform .25s var(--ws-ease), box-shadow .25s var(--ws-ease);
}
.ws-testimonial:hover { transform: translateY(-4px); box-shadow: var(--ws-shadow); }

.ws-testimonial img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--ws-purple-50);
}

.ws-testimonial figcaption { padding: 1rem 1.1rem 1.15rem; }
.ws-testimonial blockquote {
    margin: 0 0 .6rem;
    font-size: .92rem;
    color: var(--ws-body);
    line-height: 1.6;
    /* Quatre lignes maximum pour que la grille reste régulière. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ws-testimonial cite {
    font-style: normal;
    font-weight: 650;
    font-size: .88rem;
    color: var(--ws-ink);
}
.ws-review-form .star-rating { color: #d8d3e2; transition: color .12s var(--ws-ease); }
.ws-review-form .star-rating.is-on { color: #f59e0b; }

/* Barre d'achat collante */
.bottom-cart {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--ws-line);
    box-shadow: 0 -8px 24px rgba(22, 18, 31, .1);
    transform: translateY(100%);
    transition: transform .3s var(--ws-ease);
}
.bottom-cart.is-visible { transform: translateY(0); }
.bottom-cart__img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--ws-purple-50);
    border-radius: 10px;
}

/* Sur mobile la barre passait à 148 px de haut : le nom du produit repliait
   sur plusieurs lignes et mangeait un cinquième de l'écran. On compacte. */
@media (max-width: 575.98px) {
    .bottom-cart .container { gap: .75rem !important; padding-top: .5rem; padding-bottom: .5rem; }
    .bottom-cart__img { display: none; }
    .bottom-cart .fw-semibold { font-size: .85rem; }
    .bottom-cart form { flex: 0 0 auto; }
    .bottom-cart .btn { padding: .6rem 1.1rem; font-size: .9rem; }
}

/* --------------------------------------------------------------------------
   Panier & mini-panier
   -------------------------------------------------------------------------- */

.cart-product-card,
.cart-summary-card {
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
}

.cart-product-img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    background: var(--ws-purple-50);
    border-radius: var(--ws-radius-sm);
    padding: .35rem;
}

.qty-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
}

.progress { background: var(--ws-purple-100); border-radius: var(--ws-radius-pill); }
.progress-bar { background: linear-gradient(90deg, var(--ws-purple-500), var(--ws-purple-300)); }

.mini-cart { position: fixed; inset: 0; z-index: 1060; }
.mini-cart-overlay {
    position: absolute;
    inset: 0;
    background: rgba(22, 18, 31, .42);
    backdrop-filter: blur(2px);
    animation: ws-fade .2s var(--ws-ease);
}
.mini-cart-content {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--ws-surface);
    box-shadow: var(--ws-shadow-lg);
    animation: ws-slide-in .28s var(--ws-ease);
    overflow-y: auto;
}
@keyframes ws-fade { from { opacity: 0; } }
@keyframes ws-slide-in { from { transform: translateX(100%); } }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */

.form-control, .form-select {
    border: 1.5px solid var(--ws-line);
    border-radius: var(--ws-radius-sm);
    padding: .7rem .95rem;
    color: var(--ws-ink);
    transition: border-color .18s var(--ws-ease), box-shadow .18s var(--ws-ease);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ws-purple-500);
    box-shadow: 0 0 0 4px var(--ws-purple-100);
}
.form-control::placeholder { color: #b6b0c4; }
.form-label { font-weight: 600; color: var(--ws-ink); margin-bottom: .35rem; }

.form-check-input:checked { background-color: var(--ws-purple-500); border-color: var(--ws-purple-500); }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--ws-purple-100); border-color: var(--ws-purple-300); }

/* Choix adresse / transporteur du tunnel : de vraies cartes cliquables */
#order_addresses .form-check,
#order_carriers .form-check {
    background: var(--ws-surface);
    border: 1.5px solid var(--ws-line);
    border-radius: var(--ws-radius);
    padding: 1rem 1rem 1rem 2.8rem;
    margin-bottom: .75rem;
    transition: border-color .18s var(--ws-ease), background .18s var(--ws-ease);
}
#order_addresses .form-check:hover,
#order_carriers .form-check:hover { border-color: var(--ws-purple-300); background: var(--ws-purple-50); }
#order_addresses .form-check-input,
#order_carriers .form-check-input { margin-left: -1.9rem; margin-top: .3rem; }
#order_addresses .form-check:has(.form-check-input:checked),
#order_carriers .form-check:has(.form-check-input:checked) {
    border-color: var(--ws-purple-500);
    background: var(--ws-purple-50);
}

/* Squelette de chargement du mini-panier */
.ws-skeleton {
    background: linear-gradient(90deg, var(--ws-line) 25%, #f6f4fa 50%, var(--ws-line) 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: ws-shimmer 1.2s ease-in-out infinite;
}
.ws-skeleton--line { height: 56px; margin-bottom: .75rem; }
.ws-skeleton--line.short { width: 60%; }
@keyframes ws-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Ligne en cours de mise à jour : on atténue sans figer l'interface. */
.mini-cart-item.is-busy { opacity: .6; transition: opacity .15s var(--ws-ease); }

/* Livraison offerte : rappel du transporteur retenu, sans choix à faire. */
.ws-shipping-free {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.15rem;
    background: #eafaef;
    border: 1px solid #b7ebc6;
    border-radius: var(--ws-radius);
}
.ws-shipping-free > i { font-size: 1.25rem; color: var(--ws-success); }
.ws-shipping-free strong { color: var(--ws-ink); }
.ws-shipping-free__price {
    margin-left: auto;
    font-weight: 700;
    color: var(--ws-success);
    white-space: nowrap;
}

/* Suggestions d'adresse (Base Adresse Nationale) */
.ws-address-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1055;
    margin: .25rem 0 0;
    padding: .3rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-sm);
    box-shadow: var(--ws-shadow);
    max-height: 260px;
    overflow-y: auto;
    display: none;
}
.ws-address-suggestions.is-open { display: block; }
.ws-address-suggestions li {
    padding: .55rem .7rem;
    font-size: .9rem;
    color: var(--ws-body);
    border-radius: 8px;
    cursor: pointer;
}
.ws-address-suggestions li.is-active,
.ws-address-suggestions li:hover { background: var(--ws-purple-50); color: var(--ws-purple-700); }

/* --------------------------------------------------------------------------
   Alertes (flash)
   -------------------------------------------------------------------------- */

.custom-alert {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    border: 1px solid var(--ws-line);
    border-left: 4px solid var(--ws-purple-500);
    border-radius: var(--ws-radius);
    background: var(--ws-surface);
    box-shadow: var(--ws-shadow-sm);
    padding: 1rem 1.1rem;
}
.custom-alert-danger  { border-left-color: var(--ws-danger); }
.custom-alert-warning { border-left-color: var(--ws-warning); }
.custom-alert-info    { border-left-color: #0ea5e9; }
.custom-alert-title   { font-weight: 700; color: var(--ws-ink); }
.custom-alert-text    { color: var(--ws-body); font-size: .94rem; }
.custom-alert-close   { margin-left: auto; background: none; border: none; opacity: .5; }
.custom-alert-close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Blocs marketing
   -------------------------------------------------------------------------- */

.advantage-item, .service-box {
    height: 100%;
    padding: 1.75rem 1.35rem;
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    transition: transform .25s var(--ws-ease), box-shadow .25s var(--ws-ease);
}
.advantage-item:hover, .service-box:hover { transform: translateY(-4px); box-shadow: var(--ws-shadow); }

/* Pastille d'icône : dégradé de marque et glyphe blanc — l'aplat très clair
   d'origine donnait des pictos délavés, à peine visibles. */
.advantage-icon, .service-box > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 1rem;
    font-size: 1.35rem;
    color: #fff !important;
    background: linear-gradient(135deg, var(--ws-purple-600), var(--ws-purple-300));
    border-radius: 18px;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .28);
}
.advantage-icon i { color: #fff !important; }

.advantage-item h4, .service-box h5 { font-size: 1.05rem; margin-bottom: .5rem; }
/* `--ws-muted` sur fond blanc tombait sous le seuil de contraste AA :
   le texte des cartes était quasi illisible. */
.advantage-item p, .service-box p { font-size: .92rem; color: var(--ws-body); margin: 0; }

.statistics-section { background: var(--ws-canvas) !important; }
.stat-item h2 {
    font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem);
    background: linear-gradient(120deg, var(--ws-purple-600), var(--ws-purple-300));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-item p { font-size: .95rem; color: var(--ws-muted); max-width: 32ch; margin: 0 auto; }

.purple-box {
    background: linear-gradient(135deg, var(--ws-purple-700), var(--ws-purple-500));
    border-radius: var(--ws-radius-lg);
    box-shadow: var(--ws-shadow-lg);
}
/* `!important` : sur fond violet, le thème rendait ce bouton blanc sur blanc. */
.purple-box .btn,
.purple-box .btn-primary,
.purple-box .btn-primary:focus {
    background: #fff !important;
    color: var(--ws-purple-700) !important;
    border: none !important;
    font-weight: 700;
}
.purple-box .btn-primary:hover {
    background: var(--ws-purple-50) !important;
    color: var(--ws-purple-700) !important;
}
.purple-box p { color: rgba(255, 255, 255, .95) !important; }

.custom-accordion-item {
    border: 1px solid var(--ws-line) !important;
    border-radius: var(--ws-radius) !important;
    overflow: hidden;
    background: var(--ws-surface);
}
.custom-accordion-btn {
    font-weight: 650;
    color: var(--ws-ink);
    padding: 1.1rem 1.25rem;
}
.custom-accordion-btn:not(.collapsed) { background: var(--ws-purple-50); color: var(--ws-purple-700); box-shadow: none; }
.custom-accordion-btn:focus { box-shadow: none; }
.accordion-body { color: var(--ws-body); font-size: .95rem; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.footer2025 {
    background: var(--ws-ink);
    color: #cfc9dd;
    margin-top: clamp(3rem, 6vw, 5rem);
}
.footer2025 .footer-title {
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.footer2025 .footer-desc { font-size: .92rem; color: #a49dba; max-width: 34ch; }
.footer2025 .footer-links { list-style: none; padding: 0; margin: 0; }
.footer2025 .footer-links li { margin-bottom: .55rem; }
.footer2025 .footer-links a { color: #cfc9dd; font-size: .93rem; }
.footer2025 .footer-links a:hover { color: #fff; }
.footer2025 .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
    transition: background .18s var(--ws-ease), transform .18s var(--ws-ease);
}
.footer2025 .footer-social a:hover { background: var(--ws-purple-500); transform: translateY(-2px); }
.footer2025 .footer-social svg { width: 17px; height: 17px; fill: currentColor; }
.footer2025 .footer-divider { border-color: rgba(255, 255, 255, .1); opacity: 1; }
.footer2025 .footer-copyright, .footer2025 .footer-made { color: #8f88a6; }
.footer2025 a.text-reset:hover { color: #fff; }
/* Le bouton s'étirait sur toute la hauteur du conteneur flex (84 px contre
   39 px pour le champ) et son libellé se repliait. On fige l'alignement et on
   laisse le champ absorber l'espace disponible. */
.footer-newsletter {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.footer-newsletter .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: .6rem 1rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--ws-radius-pill);
    color: #fff;
}
.footer-newsletter .form-control::placeholder { color: #8f88a6; }
.footer-newsletter .form-control:focus { background: rgba(255, 255, 255, .1); box-shadow: none; border-color: var(--ws-purple-300); }

.btn-footer {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 1.35rem;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    background: var(--ws-purple-500);
    color: #fff;
    border: none;
    border-radius: var(--ws-radius-pill);
}
.btn-footer:hover { background: var(--ws-purple-600); color: #fff; }

@media (max-width: 400px) {
    .footer-newsletter { flex-wrap: wrap; }
    .footer-newsletter .form-control, .btn-footer { width: 100%; justify-content: center; }
}

.ws-payment-icons { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ws-payment-icons img {
    height: 26px;
    width: auto;
    padding: 3px 5px;
    background: #fff;
    border-radius: 5px;
}

/* --------------------------------------------------------------------------
   Carrousels Owl : flèches et puces au style de la marque
   -------------------------------------------------------------------------- */

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    transform: translateY(-50%);
    font-size: 0 !important;
    background: #fff !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: 50%;
    box-shadow: var(--ws-shadow-sm);
    transition: all .18s var(--ws-ease);
}
.owl-carousel .owl-nav button.owl-prev { left: -8px; }
.owl-carousel .owl-nav button.owl-next { right: -8px; }
.owl-carousel .owl-nav button:hover { border-color: var(--ws-purple-500) !important; }
.owl-carousel .owl-nav button::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--ws-purple-600);
    border-right: 2px solid var(--ws-purple-600);
}
.owl-carousel .owl-nav button.owl-prev::before { transform: rotate(-135deg) translate(-2px, -2px); }
.owl-carousel .owl-nav button.owl-next::before { transform: rotate(45deg) translate(-2px, -2px); }

.owl-carousel .owl-dots { margin-top: 1.5rem; text-align: center; }
.owl-carousel .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background: var(--ws-purple-200) !important;
    border-radius: var(--ws-radius-pill);
    transition: width .25s var(--ws-ease), background .25s var(--ws-ease);
    display: block;
}
.owl-carousel .owl-dots .owl-dot.active span { width: 24px; background: var(--ws-purple-500) !important; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Dégradé de marque sous l'image : si l'illustration du header n'est pas
   encore déposée dans public/uploads/, la bannière reste présentable au lieu
   d'afficher un aplat sombre sur du vide. */
.hero-slide-bgfull {
    min-height: clamp(430px, 60vh, 660px);
    background: linear-gradient(115deg, var(--ws-purple-700) 0%, var(--ws-purple-500) 55%, #b98ff5 100%);
}
.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(22, 18, 31, .68) 0%, rgba(22, 18, 31, .38) 48%, rgba(22, 18, 31, .05) 100%);
}
.hero-img-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* Même logique pour l'en-tête de catégorie : l'image (--ws-cat-image, posée en
   inline par le template) se superpose au dégradé, qui prend le relais si elle
   est absente. */
.breadcrumb_bg {
    background-color: var(--ws-purple-700);
    background-image: var(--ws-cat-image, none), linear-gradient(115deg, var(--ws-purple-700), var(--ws-purple-500));
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}
.breadcrumb_bg .breadcrumb { background: transparent; padding: 0; }
.breadcrumb_bg .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .6); }

/* Visuel de remplacement : jamais déformé, toujours centré. */
.ws-img-placeholder { object-fit: contain !important; background: var(--ws-purple-50); }

/* --------------------------------------------------------------------------
   Comparateur avant / après
   --------------------------------------------------------------------------
   Le thème imposait une hauteur fixe (130 px mobile) : les visuels réels
   (1500 × 483) étaient rognés sur les côtés et la bouche sortait du cadre.
   On raisonne en ratio pour afficher l'image entière quelle que soit la largeur.
   -------------------------------------------------------------------------- */

.before-after-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.before-after-slider {
    height: auto !important;
    aspect-ratio: 1500 / 483;
    border-radius: var(--ws-radius);
    box-shadow: var(--ws-shadow);
    overflow: hidden;
}

.slider-line {
    width: 3px !important;
    background: #fff !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, .35);
}

.slider-handle {
    width: 46px !important;
    height: 46px !important;
    background: #fff !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(22, 18, 31, .28) !important;
    cursor: ew-resize;
}
.slider-handle .handle-dots span { background: var(--ws-purple-500) !important; }
.slider-handle:focus-visible { outline: 3px solid var(--ws-purple-300); outline-offset: 3px; }

.before-label, .after-label {
    padding: .3rem .8rem !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: var(--ws-radius-pill) !important;
    background: rgba(22, 18, 31, .55) !important;
    color: #fff !important;
    backdrop-filter: blur(4px);
}
.after-label { background: var(--ws-purple-500) !important; }

/* --------------------------------------------------------------------------
   Galerie produit
   -------------------------------------------------------------------------- */

#mainProductSlider .main-image {
    background: var(--ws-purple-50);
    border-radius: var(--ws-radius);
    padding: .5rem;
}

#productThumbsSlider .thumb-switcher {
    border: 2px solid transparent;
    border-radius: var(--ws-radius-sm);
    background: var(--ws-purple-50);
    padding: .2rem;
    opacity: .75;
    transition: opacity .18s var(--ws-ease), border-color .18s var(--ws-ease);
}
#productThumbsSlider .thumb-switcher:hover { opacity: 1; }
#productThumbsSlider .thumb-switcher.active {
    opacity: 1;
    border-color: var(--ws-purple-500);
}
.hero-title { color: #fff; font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem); }
.hero-desc { color: rgba(255, 255, 255, .88); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); max-width: 48ch; }
.hero-eyebrow {
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .16);
    border-radius: var(--ws-radius-pill);
    padding: .35rem .9rem;
    width: fit-content;
}
.btn-hero-main {
    background: #fff;
    color: var(--ws-purple-700);
    border-radius: var(--ws-radius-pill);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
.btn-hero-main:hover { background: var(--ws-purple-50); color: var(--ws-purple-700); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Barre d'outils catégorie
   -------------------------------------------------------------------------- */

.ws-toolbar {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    margin-bottom: 1.75rem;
}
.ws-toolbar .form-control, .ws-toolbar .form-select { padding: .55rem .85rem; }
.ws-empty {
    padding: 3.5rem 1rem;
    text-align: center;
    color: var(--ws-muted);
    border: 1px dashed var(--ws-line);
    border-radius: var(--ws-radius);
}

/* --------------------------------------------------------------------------
   Accessibilité & préférences système
   -------------------------------------------------------------------------- */

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.ws-skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .6rem 1rem;
    background: var(--ws-purple-600);
    color: #fff;
    border-radius: var(--ws-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .ws-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Reprise sur le thème hérité
   --------------------------------------------------------------------------
   `style.css` (le thème acheté) verrouille certaines propriétés avec
   `!important` — 151 occurrences dans le fichier. Charger ws-theme.css en
   dernier ne suffit donc pas : il faut répondre avec la même priorité.

   Ce bloc est la SEULE zone du fichier où `!important` est autorisé, et
   uniquement sur les propriétés réellement verrouillées en amont. Vérifier
   la liste avant d'en ajouter :
     document.styleSheets → chercher les déclarations !important qui matchent
     l'élément (cf. commentaire du même bloc dans CLAUDE.md).
   -------------------------------------------------------------------------- */

.btn-purple,
.btn-purple:focus,
.btn-purple:active {
    background: var(--ws-purple-500) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--ws-radius-pill) !important;
    padding: .72rem 1.6rem !important;
    font-weight: 600 !important;
}

.btn-purple:hover {
    background: var(--ws-purple-600) !important;
    color: #fff !important;
}

.btn-purple.btn-sm { padding: .45rem 1.05rem !important; }
.btn-purple.btn-lg { padding: .95rem 2.1rem !important; font-size: 1.05rem; }

.btn-outline-purple,
.btn-outline-purple:focus {
    background: #fff !important;
    color: var(--ws-purple-600) !important;
    border: 1.5px solid var(--ws-purple-200) !important;
    border-radius: var(--ws-radius-pill) !important;
}

.btn-outline-purple:hover {
    background: var(--ws-purple-50) !important;
    color: var(--ws-purple-700) !important;
    border-color: var(--ws-purple-500) !important;
}

/* Les pastilles +/− doivent rester rondes malgré le padding forcé ci-dessus. */
.qty-btn.btn-purple,
.qty-btn.btn-outline-purple,
.qty-btn.btn-outline-danger {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

@media (min-width: 992px) {
    /* Scopé à .navbar-nav : en visant `.main_menu .nav-link`, cette règle
       s'appliquait aussi aux icônes compte/panier et leur imposait un padding
       horizontal — la pastille de survol devenait une ellipse de 74 × 42. */
    .main_menu .navbar-nav .nav-link {
        padding: .55rem .95rem !important;
        color: var(--ws-ink) !important;
    }
    .main_menu .navbar-nav .nav-link:hover,
    .main_menu .navbar-nav .nav-link:focus { color: var(--ws-purple-600) !important; }
}

/* Icônes d'action : cercle strict, quelle que soit la largeur du contenu. */
.main_menu .navbar-actions .nav-link {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

@media (max-width: 991.98px) {
    /* Dans le tiroir, les entrées redeviennent des lignes de menu. */
    .main_menu .navbar-actions .nav-link {
        width: 100% !important;
        height: auto !important;
        padding: .7rem .6rem !important;
        border-radius: var(--ws-radius-sm) !important;
    }
}

/* Bouton du hero : `style.css` force `color: #fff !important` — sur fond
   blanc, le libellé devenait invisible. */
.btn-hero-main,
.btn-hero-main:focus {
    background: #fff !important;
    color: var(--ws-purple-700) !important;
}
.btn-hero-main:hover {
    background: var(--ws-purple-50) !important;
    color: var(--ws-purple-700) !important;
}

/* ==========================================================================
   PURPLE LAB — expérience immersive 2026
   Une couche visuelle expressive, sans dépendance, qui conserve les gabarits
   métier existants. Les transformations suivent des variables alimentées par
   ws-experience.js et restent neutres sans JavaScript.
   ========================================================================== */

:root {
    --ws-night: #13051f;
    --ws-night-soft: #241036;
    --ws-violet: #7c3aed;
    --ws-violet-electric: #9f67ff;
    --ws-lilac: #d9c7ff;
    --ws-blush: #ffb7d5;
    --ws-cream: #fffaf3;
    --ws-glass: rgba(255, 255, 255, .72);
    --ws-glass-line: rgba(255, 255, 255, .52);
    --ws-shadow-3d: 0 30px 80px rgba(72, 25, 125, .16), 0 8px 24px rgba(22, 18, 31, .08);
    --ws-ease-spring: cubic-bezier(.16, 1, .3, 1);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 112px;
}

body.ws-app {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 5% 20%, rgba(217, 199, 255, .28), transparent 24rem),
        radial-gradient(circle at 94% 48%, rgba(255, 183, 213, .18), transparent 28rem),
        #fdfcff;
}

body.ws-app main,
body.ws-app .promo-banner,
body.ws-app .ws-trustbar,
body.ws-app .footer2025 {
    position: relative;
    z-index: 1;
}

/* Le header doit vivre dans un contexte d'empilement supérieur au contenu :
   sinon le hero et ses transformations 3D interceptent les clics du drawer. */
body.ws-app .promo-banner { z-index: 1051; }
body.ws-app .main_menu {
    position: sticky;
    top: 0;
    z-index: 1050;
}
body.ws-app .ws-trustbar { z-index: 1045; }

.ws-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.ws-ambient__orb {
    position: absolute;
    width: 34rem;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: .11;
    filter: blur(80px);
}

.ws-ambient__orb--one { top: 16%; left: -18rem; background: #8b5cf6; }
.ws-ambient__orb--two { top: 62%; right: -20rem; background: #f472b6; }
.ws-ambient__grain {
    position: absolute;
    inset: 0;
    opacity: .026;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.ws-display-title {
    margin: 0;
    font-size: clamp(2.45rem, 4.8vw, 5rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.065em;
}

.ws-display-title em,
.ws-science h2 em {
    color: var(--ws-violet);
    font-style: normal;
    font-weight: 500;
}

.ws-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: end;
    margin-bottom: clamp(2.8rem, 5vw, 5rem);
}

.ws-section-heading > p {
    max-width: 36rem;
    margin: 0 0 .35rem;
    color: #6e657d;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
}

.ws-section-heading--center { text-align: left; }
.ws-section-heading--light h2,
.ws-section-heading--light p { color: #fff; }
.ws-section-heading--light p { color: rgba(255, 255, 255, .66); }

.ws-eyebrow {
    margin-bottom: 1rem;
    font-size: .72rem;
    letter-spacing: .2em;
}

.ws-eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.8rem;
    height: 1px;
    margin-right: .65rem;
    vertical-align: middle;
    background: currentColor;
    opacity: .55;
}

.ws-eyebrow--light { color: #d8c7ff; }

/* Bandeau et navigation flottante */
.promo-banner {
    padding: .55rem 1rem;
    background: var(--ws-night);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.promo-banner__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 5vw, 4.5rem);
    max-width: 1320px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .78);
    font-size: .72rem;
    letter-spacing: .045em;
}

.promo-banner__inner i { color: #cdb7ff; }
.promo-banner__offer { color: #fff; }

.main_menu {
    margin: 0 !important;
    background: rgba(255, 255, 255, .76) !important;
    border-bottom: 1px solid rgba(87, 47, 132, .09);
    box-shadow: none;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.main_menu.is-stuck {
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 14px 42px rgba(46, 16, 75, .1);
}

.main_menu .navbar { min-height: 76px; }
.main_menu .navbar-brand { position: relative; }
.navbar-brand__glow {
    position: absolute;
    inset: -12px -18px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, .16), transparent 68%);
    opacity: 0;
    transition: opacity .3s ease;
}
.navbar-brand:hover .navbar-brand__glow { opacity: 1; }
.main_menu .navbar-brand img { height: 42px; width: auto; }

.main_menu .navbar-nav {
    gap: .15rem;
    padding: .28rem;
    border: 1px solid rgba(91, 33, 182, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .56);
    box-shadow: inset 0 1px rgba(255, 255, 255, .8);
}

.main_menu .navbar-nav .nav-link {
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 600;
}

.main_menu .navbar-nav .nav-link::after { display: none; }

.main_menu .navbar-nav .nav-link:hover {
    background: var(--ws-purple-50);
}

.main_menu .navbar-actions { gap: .4rem; }
.main_menu .navbar-actions .nav-link {
    border: 1px solid rgba(91, 33, 182, .11);
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 5px 14px rgba(50, 20, 85, .06);
}
.main_menu .navbar-actions .nav-link:hover {
    color: #fff;
    background: var(--ws-night);
    transform: translateY(-2px);
}

.ws-trustbar {
    border-bottom: 1px solid rgba(91, 33, 182, .06);
    background: rgba(249, 247, 253, .76);
}

.ws-trustbar li { font-size: .72rem; letter-spacing: .015em; }

/* Hero 3D */
.ws-hero-shell {
    padding: 0 clamp(.5rem, 1.4vw, 1.4rem);
    background: transparent;
}

.ws-hero-shell .owl-stage-outer,
.ws-hero {
    border-radius: 0 0 clamp(2rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem);
}

.ws-hero {
    --ws-px: 0;
    --ws-py: 0;
    position: relative;
    min-height: clamp(650px, 78vh, 830px);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 76% 46%, rgba(170, 100, 255, .46), transparent 24%),
        linear-gradient(125deg, #12031e 8%, #2a0b43 52%, #6f2b91 100%);
    isolation: isolate;
}

.ws-hero .hero-img-bg {
    z-index: -3;
    opacity: .13;
    background-position: center;
    filter: saturate(.75) contrast(1.1);
    mix-blend-mode: screen;
    transform: scale(1.04);
}

.ws-hero__wash {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at calc(72% + var(--ws-px)), calc(42% + var(--ws-py)), rgba(196, 139, 255, .24), transparent 28%),
        linear-gradient(90deg, rgba(14, 2, 24, .82) 0%, rgba(21, 5, 34, .68) 44%, rgba(65, 19, 85, .2) 100%);
}

.ws-hero__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .12;
    background-image:
        linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
    transform: perspective(600px) rotateX(64deg) scale(1.45) translateY(31%);
    transform-origin: bottom;
}

.ws-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(400px, .97fr);
    gap: 2rem;
    align-items: center;
    min-height: clamp(650px, 78vh, 830px);
    padding: clamp(4.2rem, 7vw, 7rem) 0 clamp(5.4rem, 8vw, 7.2rem);
}

.ws-hero__content { position: relative; z-index: 4; max-width: 710px; }
.ws-hero .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.5rem;
    padding: .55rem .85rem;
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
}

.ws-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d8b4fe;
    box-shadow: 0 0 0 5px rgba(216, 180, 254, .11), 0 0 16px #d8b4fe;
    animation: ws-live 2s ease-in-out infinite;
}

.ws-hero .hero-title {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(3.25rem, 6.2vw, 6.8rem);
    font-weight: 800;
    line-height: .91;
    letter-spacing: -.075em;
    text-wrap: balance;
    text-shadow: 0 10px 44px rgba(0, 0, 0, .18);
}

.ws-hero .hero-desc {
    max-width: 570px;
    margin-top: 1.7rem;
    color: rgba(255, 255, 255, .7);
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.75;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ws-hero__actions {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-top: 2.2rem;
}

.btn-hero-main {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: .72rem .78rem .72rem 1.5rem !important;
    border: 1px solid rgba(255, 255, 255, .65) !important;
    box-shadow: 0 16px 50px rgba(4, 0, 10, .3), inset 0 1px rgba(255, 255, 255, .8) !important;
}
.btn-hero-main::after { display: none; }

.ws-btn-arrow {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--ws-night);
    transition: transform .35s var(--ws-ease-spring);
}

.btn:hover .ws-btn-arrow { transform: rotate(-38deg); }

.ws-hero__link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: rgba(255, 255, 255, .72);
    font-size: .88rem;
    font-weight: 600;
}
.ws-hero__link:hover { color: #fff; }
.ws-hero__link i { font-size: .72rem; animation: ws-nudge-down 1.8s ease-in-out infinite; }

.ws-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1.2rem;
    margin-top: 2rem;
    color: rgba(255, 255, 255, .68);
    font-size: .76rem;
}
.ws-hero__proof span { display: inline-flex; align-items: center; gap: .42rem; }
.ws-hero__proof i { color: #d8b4fe; }

.ws-orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}
.ws-orb--one {
    top: 14%; right: 4%;
    width: 11rem; aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .15);
    background: linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(173, 111, 255, .05));
    box-shadow: inset -20px -20px 50px rgba(34, 3, 48, .32), 0 30px 70px rgba(0, 0, 0, .18);
}
.ws-orb--two {
    right: 40%; bottom: 6%;
    width: 4.5rem; aspect-ratio: 1;
    background: radial-gradient(circle at 30% 24%, #fff, #d8b4fe 18%, #7c3aed 58%, #2a063d 100%);
    box-shadow: 0 18px 45px rgba(16, 0, 30, .44);
    animation: ws-float 6s ease-in-out infinite reverse;
}

.ws-hero-product {
    --ws-depth-x: 0px;
    --ws-depth-y: 0px;
    position: relative;
    z-index: 2;
    width: min(100%, 610px);
    aspect-ratio: 1 / 1.03;
    margin-inline: auto;
    perspective: 1100px;
    transform: translate3d(var(--ws-depth-x), var(--ws-depth-y), 0);
    transform-style: preserve-3d;
    will-change: transform;
}

.ws-hero-product__halo {
    position: absolute;
    inset: 8% 5%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 161, 255, .48), rgba(124, 58, 237, .16) 43%, transparent 72%);
    filter: blur(14px);
    animation: ws-breathe 5s ease-in-out infinite;
}

.ws-hero-product__orbit {
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    transform: rotateX(67deg) rotateZ(-12deg);
    box-shadow: 0 0 32px rgba(199, 156, 255, .08);
}
.ws-hero-product__orbit::after {
    content: "";
    position: absolute;
    top: 50%; left: -7px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 18px #fff;
}
.ws-hero-product__orbit--outer { animation: ws-orbit 13s linear infinite; }
.ws-hero-product__orbit--inner { inset: 22%; animation: ws-orbit 9s linear infinite reverse; opacity: .56; }

.ws-hero-product__pedestal {
    position: absolute;
    left: 19%; right: 17%; bottom: 9%;
    height: 15%;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .19), rgba(255, 255, 255, .035));
    box-shadow: inset 0 12px 30px rgba(255, 255, 255, .08), 0 28px 55px rgba(6, 0, 13, .45);
    backdrop-filter: blur(15px);
    transform: rotateX(58deg);
}

.ws-hero-product__image {
    position: absolute;
    z-index: 2;
    inset: 5% 10% 13%;
    width: 80%;
    height: 82%;
    object-fit: contain;
    border-radius: 2rem;
    filter: drop-shadow(0 35px 32px rgba(7, 0, 16, .45));
    transform: translateZ(75px) rotateY(-7deg) rotateX(2deg);
    animation: ws-product-float 5.8s ease-in-out infinite;
}

.ws-float-card {
    --ws-depth-x: 0px;
    --ws-depth-y: 0px;
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .72rem;
    padding: .72rem .9rem;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 1.1rem;
    color: #fff;
    background: rgba(255, 255, 255, .11);
    box-shadow: 0 18px 40px rgba(9, 1, 17, .24), inset 0 1px rgba(255, 255, 255, .2);
    backdrop-filter: blur(18px) saturate(140%);
    transform: translate3d(var(--ws-depth-x), var(--ws-depth-y), 110px);
    will-change: transform;
}
.ws-float-card strong,
.ws-float-card small { display: block; white-space: nowrap; }
.ws-float-card strong { font-size: .84rem; }
.ws-float-card small { color: rgba(255, 255, 255, .6); font-size: .64rem; }
.ws-float-card__icon {
    display: grid;
    width: 2.1rem; height: 2.1rem;
    place-items: center;
    border-radius: .75rem;
    color: #3f1d02;
    background: linear-gradient(135deg, #fff6bf, #f7c65c);
}
.ws-float-card--rating { top: 17%; left: -2%; animation: ws-float 5s ease-in-out infinite; }
.ws-float-card--result { top: 42%; right: -2%; display: block; padding: .85rem 1.1rem; animation: ws-float 6s 1s ease-in-out infinite; }
.ws-float-card--result strong { color: #f5eaff; font-size: 1.12rem; }
.ws-float-card--formula { left: 3%; bottom: 15%; animation: ws-float 5.5s .4s ease-in-out infinite reverse; }
.ws-float-card--formula .ws-float-card__icon { color: #113b27; background: linear-gradient(135deg, #e8fff1, #86efac); }

.ws-scroll-cue {
    position: absolute;
    left: 50%; bottom: 1.35rem;
    display: grid;
    width: 25px; height: 40px;
    place-items: start center;
    padding-top: 7px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    transform: translateX(-50%);
}
.ws-scroll-cue span { width: 3px; height: 8px; border-radius: 4px; background: #fff; animation: ws-scroll 1.8s ease-in-out infinite; }

.ws-hero-shell .owl-dots { position: absolute; right: 2.3rem; bottom: 1.7rem; margin: 0; }
.ws-hero-shell .owl-carousel .owl-dots .owl-dot span { background: rgba(255, 255, 255, .3) !important; }
.ws-hero-shell .owl-carousel .owl-dots .owl-dot.active span { background: #fff !important; }

/* Rail de preuve */
.ws-proof-rail {
    position: relative;
    z-index: 3;
    margin-top: -1px;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(80, 44, 121, .08);
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(16px);
}
.ws-proof-rail__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ws-proof-rail__item { display: flex; align-items: center; gap: .85rem; padding: .65rem 1.4rem; border-right: 1px solid rgba(74, 33, 115, .1); }
.ws-proof-rail__item:last-child { border: 0; }
.ws-proof-rail__item > strong { color: #c5a9ef; font-size: .68rem; font-weight: 600; }
.ws-proof-rail__item b,
.ws-proof-rail__item small { display: block; }
.ws-proof-rail__item b { color: var(--ws-ink); font-size: .85rem; }
.ws-proof-rail__item small { margin-top: .12rem; color: #92879e; font-size: .67rem; }

/* Boutique et cartes produit */
.ws-shop-showcase { position: relative; background: linear-gradient(180deg, #fdfcff, #f8f4ff); }
.ws-product-grid { perspective: 1200px; }
.ws-product-card {
    --ws-tilt-x: 0deg;
    --ws-tilt-y: 0deg;
    --ws-glow-x: 50%;
    --ws-glow-y: 50%;
    overflow: hidden;
    border: 1px solid rgba(104, 61, 150, .1);
    border-radius: 1.8rem;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 12px 35px rgba(58, 26, 91, .07), inset 0 1px rgba(255, 255, 255, .8);
    backdrop-filter: blur(12px);
    transform: perspective(900px) rotateX(var(--ws-tilt-x)) rotateY(var(--ws-tilt-y));
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .45s var(--ws-ease-spring), box-shadow .45s var(--ws-ease-spring), border-color .35s ease;
}
.ws-product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--ws-glow-x) var(--ws-glow-y), rgba(255, 255, 255, .62), transparent 34%);
    transition: opacity .3s ease;
}
.ws-product-card:hover {
    border-color: rgba(124, 58, 237, .24);
    box-shadow: var(--ws-shadow-3d);
    transform: perspective(900px) rotateX(var(--ws-tilt-x)) rotateY(var(--ws-tilt-y)) translateY(-8px);
}
.ws-product-card:hover::after { opacity: .34; }
.ws-product-card__media {
    margin: .65rem .65rem 0;
    overflow: hidden;
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 70% 20%, rgba(255, 255, 255, .95), transparent 32%),
        linear-gradient(145deg, #f1e9ff, #fff 52%, #fbeafb);
    transform: translateZ(18px);
}
.ws-product-card__media::after {
    content: "";
    position: absolute;
    inset: auto 12% 8% 12%;
    height: 12%;
    border-radius: 50%;
    background: rgba(64, 21, 100, .14);
    filter: blur(16px);
    transform: rotateX(68deg);
}
.ws-product-card__media img {
    position: relative;
    z-index: 1;
    transition: transform .7s var(--ws-ease-spring), filter .7s ease;
}
.ws-product-card:hover .ws-product-card__media img { transform: scale(1.07) translateY(-5px) rotate(-1deg); filter: saturate(1.08); }
.ws-product-card__body { padding: 1.15rem 1.25rem 1.3rem; transform: translateZ(22px); }
.ws-product-card__title { font-size: .98rem; letter-spacing: -.025em; }
.ws-product-card .ws-price__now { color: var(--ws-night); font-size: 1.05rem; }
.ws-product-card .btn-purple {
    box-shadow: none;
    background: var(--ws-night) !important;
}
.ws-product-card .btn-purple:hover { background: var(--ws-violet) !important; }
.ws-badge { top: 1rem; left: 1rem; z-index: 4; border: 1px solid rgba(255, 255, 255, .45); box-shadow: 0 8px 18px rgba(33, 5, 54, .14); backdrop-filter: blur(8px); }
.ws-wishlist { top: 1rem; right: 1rem; z-index: 4; background: rgba(255, 255, 255, .82); backdrop-filter: blur(10px); }

/* Avantages — cartes 3D */
.advantages-section { position: relative; background: var(--ws-cream); }
.advantages-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .32;
    background-image: radial-gradient(rgba(124, 58, 237, .16) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.advantage-item {
    --ws-tilt-x: 0deg;
    --ws-tilt-y: 0deg;
    position: relative;
    min-height: 300px;
    padding: 1.55rem;
    overflow: hidden;
    border: 1px solid rgba(112, 69, 150, .12);
    border-radius: 1.75rem;
    text-align: left;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 16px 40px rgba(53, 25, 78, .06), inset 0 1px rgba(255, 255, 255, .9);
    backdrop-filter: blur(16px);
    transform: perspective(800px) rotateX(var(--ws-tilt-x)) rotateY(var(--ws-tilt-y));
    transform-style: preserve-3d;
    transition: transform .45s var(--ws-ease-spring), box-shadow .4s ease;
}
.advantage-item:hover { transform: perspective(800px) rotateX(var(--ws-tilt-x)) rotateY(var(--ws-tilt-y)) translateY(-8px); box-shadow: var(--ws-shadow-3d); }
.advantage-number { position: absolute; top: 1.35rem; right: 1.45rem; color: #b8a9c6; font-size: .67rem; letter-spacing: .15em; }
.advantage-icon {
    width: 3.7rem; height: 3.7rem;
    margin: 2.4rem 0 2.2rem;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 1.25rem;
    background: linear-gradient(145deg, #8d52f5, #51209e);
    box-shadow: 0 14px 25px rgba(90, 33, 170, .25), inset 0 1px rgba(255, 255, 255, .35);
    transform: translateZ(28px) rotate(-5deg);
}
.advantage-item:nth-child(even) .advantage-icon { background: linear-gradient(145deg, #ff9bc7, #bb3d8e); }
.advantage-item h3 { font-size: 1.08rem; transform: translateZ(18px); }
.advantage-item p { color: #70667b; font-size: .86rem; transform: translateZ(12px); }
.advantage-line { position: absolute; left: 1.55rem; right: 1.55rem; bottom: 1.1rem; height: 2px; overflow: hidden; border-radius: 2px; background: #eee7f3; }
.advantage-line::after { content: ""; display: block; width: 34%; height: 100%; background: linear-gradient(90deg, var(--ws-violet), var(--ws-blush)); transition: width .5s var(--ws-ease-spring); }
.advantage-item:hover .advantage-line::after { width: 100%; }

/* Avant / après */
.before-after-section { position: relative; background: #fff; }
.before-after-wrapper {
    --ws-tilt-x: 0deg;
    --ws-tilt-y: 0deg;
    position: relative;
    max-width: 1060px;
    padding: .65rem;
    border: 1px solid rgba(103, 60, 145, .12);
    border-radius: 2.35rem;
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--ws-shadow-3d);
    transform: perspective(1200px) rotateX(var(--ws-tilt-x)) rotateY(var(--ws-tilt-y));
    transition: transform .45s var(--ws-ease-spring);
}
.before-after-slider { position: relative; z-index: 2; border-radius: 1.85rem; }
.before-after-wrapper__caption {
    position: absolute;
    top: -1.25rem; right: 2.4rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .85rem;
    border-radius: 999px;
    color: #fff;
    background: var(--ws-night);
    box-shadow: 0 10px 25px rgba(25, 7, 43, .23);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.before-after-wrapper__glow { position: absolute; z-index: 0; inset: 20% 8% -5%; border-radius: 50%; background: rgba(124, 58, 237, .22); filter: blur(45px); }
.slider-handle { box-shadow: 0 8px 28px rgba(57, 16, 91, .34) !important; }

/* Statistiques */
.statistics-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 15%, rgba(150, 83, 235, .34), transparent 28rem),
        linear-gradient(135deg, #12031e, #241039 55%, #32104d) !important;
}
.statistics-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .11;
    background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom, transparent, #000 30%, #000);
}
.ws-stat-orb { position: absolute; top: -8rem; right: -6rem; width: 25rem; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: inset -40px -40px 90px rgba(0,0,0,.3); }
.stat-item {
    --ws-tilt-x: 0deg;
    --ws-tilt-y: 0deg;
    position: relative;
    min-height: 300px;
    padding: 1.7rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1.8rem;
    color: #fff;
    background: rgba(255, 255, 255, .055);
    box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 25px 60px rgba(0, 0, 0, .12);
    backdrop-filter: blur(16px);
    transform: perspective(800px) rotateX(var(--ws-tilt-x)) rotateY(var(--ws-tilt-y));
    transform-style: preserve-3d;
    transition: transform .45s var(--ws-ease-spring), background .35s ease;
}
.stat-item:hover { background: rgba(255, 255, 255, .09); transform: perspective(800px) rotateX(var(--ws-tilt-x)) rotateY(var(--ws-tilt-y)) translateY(-7px); }
.stat-item--featured { background: linear-gradient(145deg, rgba(142, 80, 242, .42), rgba(255, 166, 208, .12)); }
.stat-index { color: rgba(255,255,255,.42); font-size: .68rem; letter-spacing: .18em; }
.stat-value { margin: 2.5rem 0 1.5rem; color: #fff; font-size: clamp(4rem, 7vw, 7rem); font-weight: 800; line-height: .8; letter-spacing: -.08em; transform: translateZ(30px); }
.stat-value sup { top: -.55em; margin-left: .14em; color: #d8b4fe; font-size: .28em; }
.stat-item p { max-width: 27ch; margin: 0; color: rgba(255,255,255,.64); font-size: .85rem; transform: translateZ(18px); }

/* Laboratoire couleur */
.ws-science {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(120deg, #6c27ca, #4a1285 52%, #250839);
}
.ws-science::before { content: ""; position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ws-science__glow { position: absolute; width: 34rem; height: 34rem; right: -8rem; top: -9rem; border-radius: 50%; background: rgba(244, 189, 222, .38); filter: blur(100px); }
.ws-science__copy h2 { margin: 0; color: #fff; font-size: clamp(2.7rem, 5vw, 5.4rem); line-height: .98; letter-spacing: -.065em; }
.ws-science__copy h2 em { color: #f1c3df; }
.ws-science__copy > p { max-width: 570px; margin-top: 1.5rem; color: rgba(255,255,255,.7); font-size: 1.02rem; }
.ws-science__steps { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.ws-science__steps > div { display: flex; align-items: center; gap: .65rem; padding-right: 1rem; }
.ws-science__steps > div + div { border-left: 1px solid rgba(255,255,255,.16); padding-left: 1rem; }
.ws-science__steps > div > span { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #ead9ff; font-size: .7rem; }
.ws-science__steps p { margin: 0; line-height: 1.2; }
.ws-science__steps strong,
.ws-science__steps small { display: block; }
.ws-science__steps strong { color: #fff; font-size: .78rem; }
.ws-science__steps small { margin-top: .25rem; color: rgba(255,255,255,.52); font-size: .62rem; }

.ws-color-lab {
    --ws-tilt-x: 0deg;
    --ws-tilt-y: 0deg;
    position: relative;
    width: min(100%, 570px);
    aspect-ratio: 1;
    margin-inline: auto;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 3rem;
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.035));
    box-shadow: inset 0 1px rgba(255,255,255,.18), 0 40px 80px rgba(18,0,33,.3);
    backdrop-filter: blur(20px);
    transform: perspective(900px) rotateX(var(--ws-tilt-x)) rotateY(var(--ws-tilt-y));
    transform-style: preserve-3d;
    transition: transform .45s var(--ws-ease-spring);
}
.ws-color-lab__ring { position: absolute; inset: 14%; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.ws-color-lab__ring--a { transform: rotateX(68deg) rotateZ(18deg); animation: ws-orbit 12s linear infinite; }
.ws-color-lab__ring--b { inset: 24%; transform: rotateY(68deg) rotateZ(-25deg); animation: ws-orbit-y 9s linear infinite reverse; }
.ws-color-lab__core { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; width: 12rem; height: 12rem; place-content: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; text-align: center; background: linear-gradient(145deg, rgba(255,255,255,.25), rgba(255,255,255,.06)); box-shadow: 0 25px 55px rgba(24,1,39,.28), inset 0 1px rgba(255,255,255,.25); backdrop-filter: blur(22px); transform: translate(-50%,-50%) translateZ(75px); }
.ws-color-lab__core span,
.ws-color-lab__core strong { font-size: 1.4rem; }
.ws-color-lab__core span { color: #ead8ff; }
.ws-color-lab__core small { padding: .25rem 0; color: rgba(255,255,255,.5); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; }
.ws-color-lab__core strong { color: #ffe998; }
.ws-color-lab__chip { position: absolute; z-index: 4; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.24); border-radius: .75rem; color: #fff; background: rgba(255,255,255,.11); box-shadow: 0 14px 34px rgba(15,0,28,.2); font-size: .65rem; backdrop-filter: blur(12px); }
.ws-color-lab__chip--purple { top: 17%; left: 8%; transform: translateZ(65px) rotate(-8deg); }
.ws-color-lab__chip--yellow { right: 7%; bottom: 18%; color: #392b02; background: #ffe998; transform: translateZ(80px) rotate(7deg); }
.ws-color-lab__product { position: absolute; z-index: 2; right: 5%; top: 9%; width: 31%; height: 42%; object-fit: contain; border-radius: 1.3rem; filter: drop-shadow(0 18px 18px rgba(12,0,25,.3)); opacity: .72; transform: translateZ(35px) rotate(9deg); }

/* Services en bento */
.services-section { background: #fbf9ff; }
.ws-service-grid { display: grid; grid-template-columns: 1.3fr .7fr 1fr; grid-template-rows: repeat(2, minmax(220px, auto)); gap: 1.25rem; }
.service-box {
    --ws-tilt-x: 0deg;
    --ws-tilt-y: 0deg;
    position: relative;
    min-height: 0;
    margin: 0;
    padding: 1.7rem;
    overflow: hidden;
    border: 1px solid rgba(95, 54, 136, .11);
    border-radius: 1.8rem;
    text-align: left;
    background: rgba(255,255,255,.82);
    box-shadow: 0 18px 45px rgba(48,20,75,.06), inset 0 1px #fff;
    transform: perspective(850px) rotateX(var(--ws-tilt-x)) rotateY(var(--ws-tilt-y));
    transform-style: preserve-3d;
    transition: transform .45s var(--ws-ease-spring), box-shadow .4s ease;
}
.service-box:hover { transform: perspective(850px) rotateX(var(--ws-tilt-x)) rotateY(var(--ws-tilt-y)) translateY(-7px); box-shadow: var(--ws-shadow-3d); }
.service-box--wide { grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; background: radial-gradient(circle at 80% 16%, rgba(207,174,255,.65), transparent 35%), linear-gradient(145deg,#fff,#f2eaff); }
.service-box--wide::before { content: ""; position: absolute; top: -9rem; right: -7rem; width: 23rem; aspect-ratio: 1; border: 1px solid rgba(103,46,157,.13); border-radius: 50%; box-shadow: inset -35px -35px 70px rgba(93,38,144,.08); }
.service-box--dark { grid-column: 3; grid-row: 1 / 3; color: #fff; background: radial-gradient(circle at 80% 12%, rgba(155,90,238,.35),transparent 35%), var(--ws-night); }
.service-box--accent { color: #3b1332; background: linear-gradient(145deg,#ffe6f1,#f8c8df); }
.service-box__icon { display: grid; width: 3.3rem; height: 3.3rem; margin-bottom: auto; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 1rem; color: #fff; background: linear-gradient(145deg,var(--ws-violet-electric),#5821a7); box-shadow: 0 12px 25px rgba(97,35,173,.2); transform: translateZ(25px); }
.service-box--dark .service-box__icon { color: var(--ws-night); background: #fff; }
.service-box__kicker { display: block; margin-bottom: .55rem; color: var(--ws-violet); font-size: .64rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.service-box h3 { margin-bottom: .55rem; font-size: clamp(1.2rem, 2vw, 1.65rem); }
.service-box p { margin: 0; color: #71677c; font-size: .86rem; }
.service-box--dark h3 { color: #fff; }
.service-box--dark p,
.service-box--dark .service-box__kicker { color: rgba(255,255,255,.62); }
.service-box__visual { position: absolute; top: 1.8rem; right: 1.8rem; display: grid; width: 3.3rem; height: 3.3rem; place-items: center; border: 1px solid rgba(77,34,120,.14); border-radius: 50%; color: var(--ws-violet); background: rgba(255,255,255,.45); transform: translateZ(35px) rotate(-38deg); }

/* FAQ éditoriale */
.ws-faq { position: relative; background: var(--ws-cream); }
.ws-faq__intro { position: sticky; top: 130px; max-width: 390px; }
.ws-faq__intro > p { margin-top: 1.5rem; color: #746a7e; }
.ws-faq__contact { display: inline-flex; align-items: center; gap: .55rem; margin-top: .6rem; color: var(--ws-violet); font-size: .86rem; font-weight: 700; }
.ws-faq__contact i { transition: transform .25s ease; }
.ws-faq__contact:hover i { transform: translateX(4px); }
.ws-faq .custom-accordion-item { margin: 0; border: 0; border-bottom: 1px solid rgba(83,47,116,.12); border-radius: 0; background: transparent; }
.ws-faq .custom-accordion-btn { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 1rem; align-items: center; padding: 1.5rem .5rem; color: var(--ws-ink); background: transparent; box-shadow: none; font-size: .96rem; }
.ws-faq .custom-accordion-btn:not(.collapsed) { color: var(--ws-violet); background: transparent; }
.ws-faq .custom-accordion-btn::after { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(92,46,137,.15); border-radius: 50%; background-position: center; background-size: .65rem; }
.ws-faq__number { color: #b5a6c2; font-size: .64rem; letter-spacing: .12em; }
.ws-faq .accordion-body { padding: 0 3.7rem 1.6rem; color: #71677b; line-height: 1.75; }

/* Pied de page */
.footer2025 {
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 12%, rgba(128, 70, 202, .28), transparent 23rem),
        radial-gradient(circle at 88% 84%, rgba(228, 111, 174, .12), transparent 28rem),
        #100419;
}
.footer2025::before { content: ""; position: absolute; inset: 0; opacity: .06; background-image: linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to bottom,#000,transparent 70%); }
.ws-footer-cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: clamp(2rem,5vw,4rem); padding: clamp(1.6rem,4vw,3rem); overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 2.2rem; background: linear-gradient(110deg,rgba(255,255,255,.12),rgba(255,255,255,.045)); box-shadow: inset 0 1px rgba(255,255,255,.14); backdrop-filter: blur(18px); }
.ws-footer-cta::after { content: ""; position: absolute; right: 14%; bottom: -11rem; width: 22rem; height: 22rem; border-radius: 50%; background: rgba(152,82,232,.36); filter: blur(60px); }
.ws-footer-cta > * { position: relative; z-index: 1; }
.ws-footer-cta h2 { margin: 0; color: #fff; font-size: clamp(1.8rem,3.2vw,3.2rem); letter-spacing: -.05em; }
.footer2025 > .container.py-5 { position: relative; }
.footer2025 .footer-title { color: #fff; }
.footer2025 .footer-logo img { filter: brightness(0) invert(1); opacity: .92; }
.footer-newsletter { overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.07); }

/* Gabarits intérieurs : même langage de surface sur tout le parcours */
body.ws-app:not(.ws-home) main { min-height: 56vh; background: linear-gradient(180deg, rgba(249,246,255,.72), rgba(255,255,255,.96)); }
.breadcrumb_bg { overflow: hidden; min-height: 310px; border-radius: 0 0 3rem 3rem; background-color: var(--ws-night); background-blend-mode: soft-light, normal; }
.breadcrumb_bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 30%,rgba(186,122,255,.35),transparent 30%),linear-gradient(100deg,rgba(17,3,28,.91),rgba(50,15,74,.54)); }
.breadcrumb_bg .container { z-index: 2; }
.breadcrumb_bg h1 { font-size: clamp(2.7rem,5vw,5rem); letter-spacing: -.06em; }
.ws-toolbar,
.cart-product-card,
.cart-summary-card,
.ws-order-card,
.card {
    border: 1px solid rgba(97,54,139,.1);
    border-radius: 1.5rem;
    box-shadow: 0 14px 38px rgba(48,20,75,.06);
}
.ws-toolbar { padding: 1.15rem; background: rgba(255,255,255,.8); backdrop-filter: blur(16px); }
.form-control,
.form-select { min-height: 48px; border-color: rgba(96,56,133,.16); border-radius: .9rem; background-color: rgba(255,255,255,.86); }
.form-control:focus,
.form-select:focus { border-color: rgba(124,58,237,.48); box-shadow: 0 0 0 .25rem rgba(124,58,237,.09); }
.cart-summary-card { top: 120px !important; overflow: hidden; }
.cart-summary-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,var(--ws-violet),var(--ws-blush)); }

/* Fiche produit : galerie et bloc d'achat traités comme deux objets premium */
.product-detail { position: relative; padding-top: 2rem !important; padding-bottom: clamp(4rem,8vw,7rem) !important; }
.product-detail::before { content: ""; position: absolute; top: 5%; left: -12rem; width: 28rem; aspect-ratio: 1; border-radius: 50%; background: rgba(188,153,244,.17); filter: blur(75px); pointer-events: none; }
.ws-gallery {
    position: sticky;
    top: 122px;
    padding: .9rem;
    overflow: hidden;
    border: 1px solid rgba(104,61,150,.11);
    border-radius: 2rem;
    background: linear-gradient(145deg,rgba(247,241,255,.88),rgba(255,255,255,.92));
    box-shadow: var(--ws-shadow-3d);
}
.ws-gallery::before { content: ""; position: absolute; top: -9rem; right: -7rem; width: 21rem; aspect-ratio: 1; border: 1px solid rgba(124,58,237,.12); border-radius: 50%; box-shadow: inset -30px -30px 60px rgba(124,58,237,.06); }
.ws-gallery #mainProductSlider { position: relative; z-index: 1; }
.ws-gallery #mainProductSlider .main-image { min-height: 480px; object-fit: contain; border-radius: 1.4rem; background: transparent; }
.ws-gallery__flag { z-index: 4; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 10px 25px rgba(57,16,91,.2); }
.ws-buybox {
    position: relative;
    padding: clamp(1.5rem,3vw,2.2rem);
    border: 1px solid rgba(104,61,150,.1);
    border-radius: 2rem;
    background: rgba(255,255,255,.76);
    box-shadow: 0 20px 55px rgba(52,21,82,.07), inset 0 1px #fff;
    backdrop-filter: blur(18px);
}
.ws-buybox::before { content: ""; position: absolute; top: 0; left: 2.2rem; right: 2.2rem; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg,var(--ws-violet),var(--ws-blush)); }
.ws-buybox__title { font-size: clamp(2.2rem,4vw,3.7rem); line-height: .98; letter-spacing: -.06em; }
.ws-buybox__now { color: var(--ws-night); font-size: clamp(1.8rem,3vw,2.6rem); }
.ws-pack { border: 1px solid rgba(124,58,237,.1); border-radius: 1.25rem; background: linear-gradient(145deg,#f8f3ff,#f1e9ff); }
.ws-buybox .ws-cta { min-height: 58px; background: var(--ws-night) !important; box-shadow: 0 15px 35px rgba(25,7,43,.2); }
.ws-buybox .ws-cta:hover { background: var(--ws-violet) !important; }
.ws-buybox__perks { border-radius: 1.2rem; background: rgba(247,243,252,.72); }
.ws-pillars-section { position: relative; border-block: 1px solid rgba(99,57,140,.08); background: var(--ws-cream); }
.ws-pillars li { border-radius: 1.2rem; transition: transform .35s var(--ws-ease-spring),background .35s ease; }
.ws-pillars li:hover { background: #fff; transform: translateY(-5px); }
.ws-pillars i { color: var(--ws-violet); }
#productDetails .custom-accordion-item { overflow: hidden; border: 1px solid rgba(98,56,138,.1); border-radius: 1.2rem; background: rgba(255,255,255,.78); box-shadow: 0 10px 28px rgba(48,20,75,.045); }
.ws-testimonial,
.ws-review-summary,
.ws-review,
.ws-review-form { border: 1px solid rgba(99,58,138,.1); border-radius: 1.4rem; box-shadow: 0 12px 30px rgba(47,21,72,.05); }

/* Authentification, contact et tunnel */
.login-bg,
.register-bg,
.contact-section {
    position: relative;
    min-height: 68vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 20%,rgba(209,180,255,.36),transparent 24rem),
        radial-gradient(circle at 86% 75%,rgba(255,190,218,.25),transparent 28rem),
        #faf8fe;
}
.login-bg::before,
.register-bg::before,
.contact-section::before { content: ""; position: absolute; top: 9%; left: 50%; width: 38rem; aspect-ratio: 1; border: 1px solid rgba(124,58,237,.09); border-radius: 50%; transform: translateX(-50%); box-shadow: inset -50px -50px 100px rgba(124,58,237,.035); }
.login-card,
.register-card,
.contact-section .card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(104,61,150,.11) !important;
    border-radius: 2rem !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 30px 80px rgba(55,24,85,.13), inset 0 1px #fff !important;
    backdrop-filter: blur(22px);
}
.login-card::before,
.register-card::before,
.contact-section .card::before { content: ""; position: absolute; top: 0; left: 2rem; right: 2rem; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg,var(--ws-violet),var(--ws-blush)); }
.login-card h1,
.register-card h1,
.contact-section h1 { color: var(--ws-night) !important; font-size: clamp(2rem,4vw,3.2rem); letter-spacing: -.055em; }
.login-card .input-group,
.register-card .input-group { overflow: hidden; border: 1px solid rgba(96,56,133,.16); border-radius: .9rem; background: #fff; }
.login-card .input-group .form-control,
.register-card .input-group .form-control { border: 0; }
.login-card .input-group-text,
.register-card .input-group-text { border: 0; }
.form-floating > label > i { font-size: 1.1em; vertical-align: middle; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { opacity: .7; color: var(--ws-violet); transform: scale(.85) translateY(-1.8rem) translateX(.15rem); }
.ws-steps li { border: 1px solid rgba(99,56,141,.1); border-radius: 999px; background: rgba(255,255,255,.68); }
.ws-steps li.is-current { color: #fff; background: var(--ws-night); box-shadow: 0 10px 28px rgba(25,7,43,.16); }
body.ws-app main .bg-white.border.rounded-4 { border-color: rgba(99,56,141,.1) !important; box-shadow: 0 14px 36px rgba(49,21,76,.055); }

/* Animations */
@keyframes ws-live { 50% { opacity: .6; box-shadow: 0 0 0 8px rgba(216,180,254,0),0 0 18px #d8b4fe; } }
@keyframes ws-float { 50% { margin-top: -10px; } }
@keyframes ws-breathe { 50% { transform: scale(1.08); opacity: .75; } }
@keyframes ws-product-float { 50% { transform: translateZ(75px) translateY(-12px) rotateY(1deg) rotateX(-1deg); } }
@keyframes ws-orbit { to { transform: rotateX(67deg) rotateZ(348deg); } }
@keyframes ws-orbit-y { to { transform: rotateY(68deg) rotateZ(335deg); } }
@keyframes ws-scroll { 0%,100% { transform: translateY(0); opacity: .35; } 45% { transform: translateY(14px); opacity: 1; } }
@keyframes ws-nudge-down { 50% { transform: translateY(4px); } }

@media (max-width: 1199.98px) {
    .ws-hero__layout { grid-template-columns: minmax(0,1.06fr) minmax(350px,.94fr); }
    .ws-float-card--rating { left: 2%; }
    .ws-float-card--result { right: 0; }
    .ws-service-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .service-box--wide { grid-row: 1 / 3; }
    .service-box--dark { grid-column: auto; grid-row: auto; }
}

@media (max-width: 991.98px) {
    .main_menu .navbar { min-height: 66px; }
    .main_menu .navbar-toggler { position: relative; left: auto; order: initial; margin-left: auto; }
    .main_menu .navbar-brand { margin-left: 0; }
    .main_menu .navbar-brand img { position: relative; inset: auto; display: block; max-width: none; margin: 0; }
    .main_menu .navbar-nav { gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .main_menu .navbar-collapse { background: rgba(255,255,255,.96); backdrop-filter: blur(22px); }
    .ws-hero { min-height: auto; }
    .ws-hero__layout { grid-template-columns: 1fr; min-height: auto; padding-top: 5rem; }
    .ws-hero__content { max-width: 730px; }
    .ws-hero .hero-title { max-width: 760px; font-size: clamp(3.5rem,10vw,6rem); }
    .ws-hero-product { width: min(92%,590px); margin-top: -1rem; }
    .ws-proof-rail__grid { grid-template-columns: repeat(3,1fr); }
    .ws-proof-rail__item { justify-content: center; padding-inline: .7rem; }
    .ws-section-heading { grid-template-columns: 1fr; gap: 1.4rem; }
    .ws-section-heading > p { max-width: 650px; }
    .ws-color-lab { margin-top: 1rem; }
    .ws-faq__intro { position: static; max-width: 650px; }
    .ws-gallery { position: relative; top: auto; }
}

@media (max-width: 767.98px) {
    .promo-banner__inner { justify-content: space-between; }
    .promo-banner__inner > span:first-child { display: none; }
    .ws-trustbar { display: none !important; }
    .ws-hero-shell { padding: 0; }
    .ws-hero-shell .owl-stage-outer,
    .ws-hero { border-radius: 0 0 2.2rem 2.2rem; }
    .ws-hero__layout { padding: 4.2rem 0 4.8rem; }
    .ws-hero .hero-title { font-size: clamp(3rem,14vw,5.2rem); }
    .ws-hero .hero-desc { margin-top: 1.25rem; }
    .ws-hero__actions { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .ws-hero__proof { gap: .55rem 1rem; }
    .ws-hero-product { width: min(100%,500px); }
    .ws-float-card--rating { top: 13%; }
    .ws-float-card--formula { left: 0; }
    .ws-scroll-cue { display: none; }
    .ws-proof-rail { max-width: 100vw; overflow-x: auto; }
    .ws-proof-rail__grid { min-width: 650px; }
    .ws-display-title { font-size: clamp(2.6rem,12vw,4.2rem); }
    .advantage-item { min-height: 285px; }
    .before-after-wrapper { padding: .4rem; border-radius: 1.7rem; }
    .before-after-slider { border-radius: 1.35rem; }
    .before-after-wrapper__caption { right: 1rem; }
    .stat-item { min-height: 250px; }
    .ws-science__steps { display: grid; }
    .ws-science__steps > div + div { padding-left: 0; border-left: 0; }
    .ws-color-lab { border-radius: 2rem; }
    .ws-service-grid { grid-template-columns: 1fr; }
    .service-box--wide { grid-row: auto; min-height: 310px; }
    .service-box--dark { min-height: 250px; }
    .ws-footer-cta { align-items: flex-start; flex-direction: column; border-radius: 1.65rem; }
    .ws-faq .custom-accordion-btn { grid-template-columns: 1.7rem 1fr auto; gap: .65rem; padding: 1.3rem 0; font-size: .88rem; }
    .ws-faq .accordion-body { padding-inline: 2.35rem 0; }
}

@media (max-width: 575.98px) {
    .main_menu .navbar-brand img { height: 35px; }
    .ws-hero__content { text-align: left; }
    .ws-hero .hero-eyebrow { font-size: .61rem; letter-spacing: .11em; }
    .ws-hero .hero-title { font-size: clamp(2.85rem,14vw,4.6rem); }
    .ws-hero__proof { font-size: .68rem; }
    .ws-hero-product { margin-top: -2.2rem; }
    .ws-float-card { padding: .58rem .68rem; border-radius: .9rem; }
    .ws-float-card__icon { width: 1.7rem; height: 1.7rem; }
    .ws-float-card--result { right: 1%; }
    .ws-float-card--formula { bottom: 12%; }
    .ws-product-grid { --bs-gutter-x: .75rem; }
    .ws-product-card { border-radius: 1.15rem; }
    .ws-product-card__media { margin: .35rem .35rem 0; border-radius: .9rem; }
    .ws-product-card__body { padding: .75rem; }
    .ws-product-card__title { font-size: .8rem; }
    .ws-product-card .ws-price__now { font-size: .9rem; }
    .ws-product-card .btn-purple { padding-inline: .55rem !important; font-size: .72rem; }
    .ws-product-card .btn-purple i { display: none; }
    .ws-color-lab__core { width: 8.5rem; height: 8.5rem; }
    .ws-color-lab__core span,
    .ws-color-lab__core strong { font-size: 1.05rem; }
    .ws-ambient { width: 100vw; contain: strict; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-ws-depth],
    [data-ws-tilt] { transform: none !important; }
}