/* =============================================================
   NEOVIA — Main Stylesheet
   Structure: Variables → Base → Components → Layout → Pages
   ============================================================= */

/* --- Variables ------------------------------------------- */
:root {
    /* ── Palette Neovia — Noir · Gris · Corail ────────────── */
    --blush:          #D1BCB2;
    --sand:           #8F7E74;
    --sand-hover:     #7a6b62;
    --espresso:       #3D2E28;
    --espresso-hover: #2a1f1a;
    --petal:          #F4D9F5;
    --white:          #FFFFFF;
    --charcoal:       #212121;

    --pink-light:     var(--blush);
    --pink-cta:       var(--sand);
    --pink-hover:     var(--sand-hover);
    --lavender:       var(--petal);

    --shadow-sm:      0 2px 8px rgba(143,126,116,0.14);
    --shadow-md:      0 4px 20px rgba(143,126,116,0.22);
    --shadow-lg:      0 8px 40px rgba(143,126,116,0.30);
    --border-brand:   rgba(143,126,116,0.18);

    /* ── Tokens sémantiques ──────────────────────────────── */
    --star:           #E8930C;                      /* étoiles avis — lisible sur blanc */
    --sale:           #C62F2F;                      /* prix barrés / promos */
    --success:        #2E7D4F;                      /* stock, confirmation */
    --bg-wash:        rgba(209,188,178,0.18);       /* fond galeries / cartes */
    --text-soft:      rgba(33,33,33,0.65);          /* texte secondaire */
    --border-soft:    rgba(33,33,33,0.10);
    --focus-ring:     0 0 0 3px rgba(143,126,116,0.45);

    /* ── Typographie & layout ────────────────────────────── */
    --font-head:      'Montserrat', sans-serif;
    --font-body:      'Inter', sans-serif;
    --radius:         8px;
    --radius-pill:    50px;
    --transition:     0.25s ease;
    --container:      1240px;
    --gap:            clamp(1rem, 4vw, 2.5rem);
    --header-h:       90px;                          /* repli mobile — valeur exacte posée par initHeaderOffset() */
    --ratio-media:    4 / 5;                         /* format unique images produit/lifestyle */
    --ratio-banner:   16 / 9;                        /* format unique bannières pleine largeur */
}

/* Header plus haut sur desktop — source unique pour tous les décalages */
@media (min-width: 1024px) {
    :root { --header-h: 90px; }
}

/* --- Base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-body);
    color: var(--charcoal);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* Eliminate 300ms tap delay on all interactive elements */
a, button, label, [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* --- Typography ------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

/* --- Layout --------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gap);
}

section { padding-block: clamp(1rem, 3vw, 2rem); }

/* --- Components ----------------------------------------- */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 2rem;
    border-radius: var(--radius);
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: none;
    transition: background var(--transition), transform var(--transition);
}

/* Tier 1 — Power : espresso #3D2E28 — blanc sur fond = 13.3:1 AAA */
.btn--power {
    background: var(--espresso);
    color: var(--white);
}
.btn--power:hover { background: var(--espresso-hover); transform: translateY(-1px); }

/* Tier 2 — Standard : sand #8F7E74 — blanc = 3.84:1 AA large text */
.btn--primary {
    background: var(--sand);
    color: var(--white);
}
.btn--primary:hover { background: var(--sand-hover); transform: translateY(-1px); }

/* Tier 3 — Ghost */
.btn--outline {
    background: transparent;
    color: var(--sand);
    border: 2px solid var(--sand);
}
.btn--outline:hover { background: var(--sand); color: var(--white); }

/* --- Announcement bar ----------------------------------- */
.announcement-bar {
    background: var(--espresso);
    color: var(--white);
    text-align: center;
    padding: 0.35rem 1rem;
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.announcement-bar__text { margin: 0; }

/* --- Header --------------------------------------------- */
.site-header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

/* Hero pages (accueil) : header transparent, icônes sombres (fond beige clair) */
.site-header-wrapper.has-hero .site-header {
    background: transparent;
    border-bottom: none;
}

.site-header-wrapper.has-hero .header__logo-img {
    filter: brightness(0.4);
}

.site-header-wrapper.has-hero .header__burger span {
    background: var(--charcoal);
}

.site-header-wrapper.has-hero .header__icon-btn {
    color: var(--charcoal);
}

.site-header-wrapper.has-hero .header__icon-btn:hover {
    background: rgba(33, 33, 33, 0.06);
}

/* Pages sans hero : header blanc avec icônes sombres */
.site-header-wrapper.no-hero .site-header {
    background: var(--white);
    border-bottom: 1px solid rgba(33, 33, 33, 0.08);
}

.site-header-wrapper.no-hero .header__logo-img {
    filter: brightness(0.4);
}

.site-header-wrapper.no-hero .header__burger span {
    background: var(--charcoal);
}

.site-header-wrapper.no-hero .header__icon-btn {
    color: var(--charcoal);
}

.site-header-wrapper.no-hero .header__icon-btn:hover {
    background: rgba(33, 33, 33, 0.06);
}

.site-header {
    background: transparent;
    border-bottom: none;
}

.header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0.5rem var(--gap);
}

.header__left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.header__logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__logo-img {
    height: 22px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* woocommerce.css applique `.woocommerce-page img { height: auto }` (spécificité
   0,1,1) qui écrase la hauteur fixe ci-dessus sur panier / checkout / compte :
   le SVG s'affiche alors à sa taille intrinsèque (~500px). */
.woocommerce-page .header__logo-img {
    height: 22px;
    max-width: none;
}

.header__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--white);
    border-radius: 50%;
    transition: background var(--transition);
}

.header__icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.header__icon-btn svg {
    flex-shrink: 0;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    list-style: none;
}

.nav__link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-head);
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--charcoal);
    transition: color var(--transition);
    white-space: nowrap;
}
.nav__link:hover { color: var(--pink-cta); }

.nav__chevron {
    transition: transform var(--transition);
    flex-shrink: 0;
}

/* --- Dropdown ------------------------------------------- */
.nav__item--dropdown {
    position: relative;
}

/* Pont invisible qui comble le gap entre le lien et le dropdown */
.nav__item--dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -1rem;
    right: -1rem;
    height: 0.9rem;
}

.nav__dropdown {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 220px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--border-brand);
    list-style: none;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 200;
}

.nav__dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--white);
    border-top: none;
}

.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav__item--dropdown:hover .nav__chevron,
.nav__item--dropdown:focus-within .nav__chevron {
    transform: rotate(180deg);
}

.nav__item--dropdown:hover .nav__link,
.nav__item--dropdown:focus-within .nav__link {
    color: var(--pink-cta);
}

.nav__dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.25rem;
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--charcoal);
    transition: background var(--transition), color var(--transition), padding var(--transition);
}

.nav__dropdown-link:hover {
    background: var(--pink-light);
    color: var(--pink-cta);
    padding-left: 1.5rem;
}

.nav__dropdown-icon {
    color: var(--pink-cta);
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* --- Desktop Navigation --------------------------------- */
.desktop-nav {
    display: none;
}

@media (min-width: 1024px) {
    .header__inner {
        grid-template-columns: auto 1fr auto 2fr auto;
        gap: 0;
    }

    .header__left { display: none; } /* hide burger on desktop */

    .header__logo {
        justify-self: start;
        padding-left: 0.5rem;
    }

    .desktop-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-column: 4;
    }

    .desktop-nav__list {
        display: flex;
        align-items: center;
        gap: 2rem;
        list-style: none;
    }

    .desktop-nav__item {
        position: relative;
    }

    .desktop-nav__link {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-family: var(--font-head);
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--white);
        transition: opacity var(--transition);
        white-space: nowrap;
        padding: 0.5rem 0;
    }

    .desktop-nav__link:hover { opacity: 0.7; }

    .site-header-wrapper.has-hero .desktop-nav__link {
        color: var(--charcoal);
    }

    .site-header-wrapper.has-hero .desktop-nav__link:hover {
        color: var(--pink-cta);
        opacity: 1;
    }

    .site-header-wrapper.no-hero .desktop-nav__link {
        color: var(--charcoal);
    }

    .site-header-wrapper.no-hero .desktop-nav__link:hover {
        color: var(--pink-cta);
        opacity: 1;
    }

    .desktop-nav__chevron {
        transition: transform var(--transition);
        flex-shrink: 0;
    }

    /* Dropdown */
    .desktop-nav__item--dropdown::after {
        content: '';
        position: absolute;
        top: 100%;
        left: -1rem;
        right: -1rem;
        height: 0.75rem;
    }

    .desktop-nav__dropdown {
        position: absolute;
        top: calc(100% + 0.6rem);
        left: 50%;
        transform: translateX(-50%) translateY(-6px);
        min-width: 220px;
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: var(--shadow-md), 0 0 0 1px var(--border-brand);
        list-style: none;
        padding: 0.5rem 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
        z-index: 200;
    }

    .desktop-nav__dropdown::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-bottom-color: var(--white);
        border-top: none;
    }

    .desktop-nav__item--dropdown:hover .desktop-nav__dropdown,
    .desktop-nav__item--dropdown:focus-within .desktop-nav__dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    .desktop-nav__item--dropdown:hover .desktop-nav__chevron,
    .desktop-nav__item--dropdown:focus-within .desktop-nav__chevron {
        transform: rotate(180deg);
    }

    .desktop-nav__dropdown-link {
        display: block;
        padding: 0.7rem 1.25rem;
        font-family: var(--font-head);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--charcoal);
        transition: background var(--transition), color var(--transition), padding var(--transition);
    }

    .desktop-nav__dropdown-link:hover {
        background: var(--pink-light);
        color: var(--pink-cta);
        padding-left: 1.5rem;
    }

    .header__right {
        grid-column: 5;
    }
}

/* --- Cart badge ----------------------------------------- */
.header__cart-btn {
    position: relative;
}

.header__cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--pink-cta);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 3px;
}

/* --- Toast notification --------------------------------- */
.nv-toast {
    position: fixed;
    top: 5rem;
    right: 1.5rem;
    z-index: 9999;
    pointer-events: none;
}

.nv-toast__msg {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    background: var(--charcoal);
    color: var(--white);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    pointer-events: auto;
    animation: nv-toast-in 0.35s ease forwards;
    margin-bottom: 0.5rem;
}

.nv-toast__msg.is-leaving {
    animation: nv-toast-out 0.3s ease forwards;
}

@keyframes nv-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes nv-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}

/* --- Size Guide Modal ----------------------------------- */
.size-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: nv-fade-in 0.2s ease;
}

@keyframes nv-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.size-modal {
    background: var(--white);
    border-radius: calc(var(--radius) * 1.5);
    max-width: 520px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: nv-modal-in 0.3s ease;
}

@keyframes nv-modal-in {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.size-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.size-modal__title {
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.size-modal__close {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--transition);
    color: var(--charcoal);
}

.size-modal__close:hover { background: rgba(0,0,0,0.06); }

.size-modal__body {
    padding: 1.5rem;
}

.size-modal__tip {
    font-size: 0.82rem;
    color: var(--pink-cta);
    margin-bottom: 1rem;
    padding: 0.6rem 0.75rem;
    background: rgba(209,188,178,0.12);
    border-radius: var(--radius);
    line-height: 1.5;
}

.size-modal__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.size-modal__table th {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pink-cta);
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid var(--pink-light);
}

.size-modal__table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    color: var(--charcoal);
}

.size-modal__table tr:last-child td { border-bottom: none; }

.size-modal__table tbody tr:hover { background: rgba(209,188,178,0.08); }

/* --- Burger (mobile only) ------------------------------- */
.header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.header__burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.header__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger.is-open span:nth-child(2) { opacity: 0; }
.header__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile menu ---------------------------------------- */
.mobile-menu {
    display: block;
    position: fixed;
    inset: 0;
    top: 0;
    z-index: 99;
    background: var(--white);
    padding: 7rem 2rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-menu.is-open {
    transform: translateX(0);
}

.mobile-menu__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mobile-menu__item a,
.mobile-menu__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--charcoal);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    text-align: left;
}

.mobile-menu__toggle svg {
    transition: transform var(--transition);
    flex-shrink: 0;
}

.mobile-menu__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.mobile-menu__sub {
    list-style: none;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.mobile-menu__sub.is-open {
    max-height: 200px;
}

.mobile-menu__sub li a {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: var(--pink-cta);
    border-bottom: none;
}

/* Nav links no longer in header — all in mobile menu */

/* --- Footer --------------------------------------------- */
.site-footer {
    background: #3D2E28;
    color: rgba(255,255,255,0.75);
    font-family: var(--font-body);
}

.footer__container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gap);
}

/* Top — 4 colonnes */
.footer__top {
    padding-block: clamp(1rem, 3vw, 1.75rem) 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer__top .footer__container {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

/* Colonne marque */
.footer__col--brand { display: flex; flex-direction: column; gap: 1.25rem; }

.footer__logo-img {
    height: 28px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.footer__tagline {
    font-size: 0.83rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.8);
    max-width: 220px;
}

/* Réseaux sociaux */
.footer__social {
    display: flex;
    gap: 0.75rem;
    list-style: none;
}

.footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
    transition: border-color var(--transition), color var(--transition), background var(--transition);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.footer__social a:hover {
    border-color: var(--pink-light);
    color: var(--pink-light);
    background: rgba(209,188,178,0.08);
}

/* Titres colonnes */
.footer__col-title {
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.4);
    margin-bottom: 1.25rem;
}

/* Listes de liens */
.footer__links {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    list-style: none;
}

.footer__links a {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
    transition: color var(--transition);
}

.footer__links a:hover { color: var(--pink-light); }

/* Bloc réassurance */
.footer__reassurance {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.footer__reassurance p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
}

.footer__reassurance svg { flex-shrink: 0; opacity: 0.6; }

/* Bottom bar */
.footer__bottom {
    padding-block: 1.25rem;
}

.footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer__copy {
    font-size: 0.75rem;
    opacity: 0.4;
    line-height: 1.6;
}

.footer__copy-sep { margin-inline: 0.5rem; }

/* Badges paiement */
.footer__payments {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    flex-wrap: wrap;
}

.payment-badge {
    width: 48px;
    height: 30px;
    display: block;
    border-radius: 4px;
    opacity: 0.85;
    transition: opacity var(--transition);
}

.footer__payments li:hover .payment-badge { opacity: 1; }

/* --- Utilities ------------------------------------------ */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Section heading — left-aligned by default (Thrivin ref) */
.section-title {
    text-align: left;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Centered variant for reviews / standalone sections */
.section-title--center {
    text-align: center;
}

/* Accent subtitle below section heading */
.section-sub {
    font-size: 0.9rem;
    color: var(--pink-cta);
    font-style: italic;
    font-family: var(--font-body);
    font-weight: 400;
    margin-top: -0.75rem;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* =============================================================
   PAGE: HOME
   ============================================================= */

/* --- 1. Hero ---------------------------------------- */
.hero-main {
    width: 100%;
    line-height: 0;
    background: #fff;
    overflow: hidden;
}

/* Desktop */
.hero-main__desktop {
    display: block;
    position: relative;
}

.hero-main__desktop-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: cover;
    object-position: center center;
}

/* Mobile : masqué par défaut */
.hero-main__mobile {
    display: none;
    position: relative;
    overflow: hidden;
}

@media (max-width: 767px) {
    .hero-main__desktop { display: none; }
    .hero-main__mobile  { display: block; }
}

/* Carousel track */
.hero-carousel__track {
    display: flex;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.hero-carousel__slide {
    flex: 0 0 100%;
    width: 100%;
    position: relative;
}

.hero-carousel__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 68vh;
    object-fit: cover;
    object-position: center center;
}

/* Dots */
.hero-carousel__dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.45rem;
    z-index: 5;
}

.hero-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, transform 0.3s;
}

.hero-carousel__dot.is-active {
    background: #fff;
    transform: scale(1.25);
}

/* Hero overlay — gradient + text */
.hero-main__desktop::after,
.hero-carousel__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.08) 55%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.hero-main__overlay {
    position: absolute;
    bottom: 3.2rem;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0 1.5rem;
    z-index: 3;
    color: #fff;
}

.hero-main__eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.78;
    margin-bottom: 0.4rem;
}

.hero-main__title {
    font-family: var(--font-head);
    font-size: clamp(1.85rem, 7.5vw, 2.75rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

.hero-main__tagline {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: 0.88;
    margin-bottom: 1.4rem;
}

.hero-main__cta {
    display: inline-block;
    background: #fff;
    color: var(--charcoal);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.75rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.hero-main__cta:hover {
    opacity: 0.85;
}

@media (min-width: 768px) {
    .hero-main__overlay {
        bottom: 5rem;
    }
    .hero-main__title {
        font-size: clamp(2.8rem, 5vw, 4.5rem);
    }
    .hero-main__tagline {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    .hero-main__cta {
        font-size: 0.9rem;
        padding: 1rem 3.5rem;
    }
}

/* =========================================================
   BUNDLE HIGHLIGHT SECTION
   ========================================================= */
.hm-bundle {
    padding-block: 1.75rem;
    background: var(--blush);
    overflow: hidden;
}

@media (min-width: 768px) {
    .hm-bundle { padding-block: clamp(3rem, 6vw, 5rem); }
}

.hm-bundle__inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .hm-bundle__inner {
        flex-direction: row;
        align-items: center;
        gap: 4rem;
    }
    .hm-bundle__content { flex: 1; }
    .hm-bundle__visual   { flex: 0 0 420px; }
}

.hm-bundle__badge {
    display: inline-block;
    background: var(--espresso);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.35rem 0.9rem;
    border-radius: 50px;
    margin-bottom: 0.65rem;
}

.hm-bundle__title {
    font-size: clamp(1.35rem, 3.5vw, 2.75rem);
    color: var(--charcoal);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.hm-bundle__sub {
    font-size: 0.88rem;
    color: rgba(33,33,33,0.65);
    line-height: 1.55;
    max-width: 440px;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .hm-bundle__sub { font-size: 0.95rem; margin-bottom: 1.5rem; }
}

.hm-bundle__perks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .hm-bundle__perks { gap: 0.6rem; margin-bottom: 2rem; }
}

.hm-bundle__perks li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--charcoal);
}

.hm-bundle__perks svg { color: var(--pink-cta); flex-shrink: 0; }

.hm-bundle__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--espresso);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.95rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition);
    box-shadow: 0 4px 16px rgba(61,46,40,0.25);
}

@media (min-width: 768px) {
    .hm-bundle__cta { display: inline-flex; }
}

.hm-bundle__cta:hover {
    background: var(--espresso-hover);
    transform: translateY(-1px);
}

/* Visual stack — masqué sur mobile, visible desktop */
.hm-bundle__visual {
    display: none;
}

@media (min-width: 768px) {
    .hm-bundle__visual { display: block; }
}

.hm-bundle__img-stack {
    position: relative;
    height: 420px;
}

.hm-bundle__img {
    position: absolute;
    width: 55%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.hm-bundle__img--back {
    left: 0;
    top: 0;
    z-index: 1;
    filter: brightness(0.95);
}

.hm-bundle__img--front {
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 90%;
}

.hm-bundle__price-tag {
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background: var(--white);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.hm-bundle__price-label {
    font-size: 0.75rem;
    color: rgba(33,33,33,0.55);
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hm-bundle__price-value {
    font-family: var(--font-head);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--charcoal);
}

.hm-bundle__price-save {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--white);
    background: var(--pink-cta);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Category card featured variant */
.hm-category-card--featured .hm-category-card__img-wrap {
    border: 2px solid var(--pink-cta);
}

.hm-category-card__tag {
    display: inline-block;
    background: var(--pink-cta);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.hm-category-card__sub {
    font-size: 0.75rem;
    color: rgba(33,33,33,0.55);
    margin-top: 0.15rem;
}

/* =========================================================
   HOMEPAGE CATEGORY CAROUSEL
   ========================================================= */
.hm-category-carousel {
    padding: 1cm 0 0.5rem; /* +1 cm d'espace au-dessus de "Shop by Category" */
    overflow: hidden;
}

@media (min-width: 768px) {
    .hm-category-carousel {
        padding: 1cm 0 0.5rem;
    }
}

.hm-category-carousel__header {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .hm-category-carousel__header { margin-bottom: 1.5rem; }
}

.hm-category-carousel__title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    color: #1a1a1a;
}

.hm-category-carousel__sub {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-weight: 400;
    color: #4a4a4a;
}

.hm-category-carousel__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
}
.hm-category-carousel__track::-webkit-scrollbar {
    display: none;
}

.hm-category-card {
    flex: 0 0 56%;
    max-width: 220px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

@media (min-width: 768px) {
    .hm-category-card {
        flex: 0 0 calc(25% - 0.75rem); /* 4 catégories sur une ligne (3 gaps de 1rem) */
        max-width: none;
    }
}

.hm-category-card__img-wrap {
    position: relative;
    background-color: rgba(209,188,178,0.18);
    aspect-ratio: var(--ratio-media);
    overflow: hidden;
    margin-bottom: 0.6rem;
    border-radius: 8px;
}

.hm-category-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.hm-category-card:hover .hm-category-card__img-wrap img {
    transform: scale(1.03);
}

.hm-category-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--charcoal);
}

/* =========================================================
   HOMEPAGE PRODUCT CAROUSEL
   ========================================================= */
.hm-product-carousel {
    padding: 1rem 0 1rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .hm-product-carousel {
        padding: 1.5rem 0 2rem;
    }
}

.hm-product-carousel__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}

.hm-product-carousel__titles {
    flex: 1;
}

.hm-product-carousel__title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.hm-product-carousel__sub {
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1a1a1a;
}

.hm-product-carousel__link {
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: #1a1a1a;
    transition: color 0.3s ease;
    white-space: nowrap;
    margin-left: 1rem;
}

.hm-product-carousel__link:hover {
    color: var(--pink-cta);
}

.hm-product-carousel__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
}
.hm-product-carousel__track::-webkit-scrollbar {
    display: none;
}

/* Card */
.hm-product-card {
    flex: 0 0 80%;
    max-width: 300px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

@media (min-width: 768px) {
    .hm-product-card {
        flex: 0 0 45%;
        max-width: 340px;
    }
}

@media (min-width: 1024px) {
    .hm-product-card {
        flex: 0 0 calc(25% - 0.75rem);
        max-width: none;
    }
}

/* Image Wrap */
.hm-product-card__img-wrap {
    position: relative;
    background-color: rgba(209,188,178,0.18);
    aspect-ratio: var(--ratio-media);
    overflow: hidden;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.hm-product-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.hm-product-card:hover .hm-product-card__img-wrap img {
    transform: scale(1.03);
}

/* Badges & Icons */
.hm-product-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: #fff;
    color: #1a1a1a;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.35rem 0.6rem;
    border-radius: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.hm-product-card__wishlist {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    z-index: 2;
    transition: transform 0.2s ease, color 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.hm-product-card__wishlist:hover {
    transform: scale(1.1);
    color: var(--pink-cta);
}

.hm-product-card__quick-add {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, background 0.2s ease;
}
.hm-product-card__quick-add:hover {
    transform: scale(1.1);
    background: rgba(209,188,178,0.12);
}

/* Swatches */
.hm-product-card__swatches {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.hm-product-card__swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    display: block;
    position: relative;
}

.hm-product-card__swatch.is-active::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 1.5px solid #1a1a1a;
    border-radius: 50%;
}

.hm-product-card__swatch-more {
    font-size: 0.72rem;
    color: #666;
    margin-left: 0.2rem;
    font-weight: 600;
}

/* Info */
.hm-product-card__title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    color: #1a1a1a;
    min-height: calc(0.9rem * 1.3 * 2); /* reserve 2-line height so all titles align */
}

.hm-product-card__color {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.hm-product-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    margin-top: auto; /* pin price + CTA to card bottom */
}

.hm-product-card__price-was {
    color: #666;
    text-decoration: line-through;
}

.hm-product-card__price-now {
    color: var(--sale);
    font-weight: 600;
}

.hm-product-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1rem;
    background: var(--espresso);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 6px;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    box-shadow: 0 2px 8px rgba(61,46,40,0.22);
}

.hm-product-card:hover .hm-product-card__cta {
    background: var(--espresso-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(61,46,40,0.34);
}

/* --- 8. Trust Proof — Bottom anchors -------------------- */
.trust-proof {
    background: #F7F2EF;
    padding-block: clamp(1.5rem, 4vw, 3rem);
    border-top: 1px solid rgba(209,188,178,0.45);
}

.trust-proof__eyebrow {
    text-align: center;
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--sand);
    margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}

.trust-proof__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
    margin-bottom: 1.5rem;
}

/* Nombre de colonnes non figé : auto-fit efface les pistes vides et répartit
   la place entre celles qui restent. Ajouter ou retirer un pilier ne laisse
   donc plus de trou dans la rangée — le compte était codé en dur à 4. */
@media (min-width: 640px) {
    .trust-proof__grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 2rem;
    }
}

/* En 2 colonnes, un nombre impair de piliers laisse le dernier seul sur sa
   ligne : on lui fait prendre toute la largeur plutôt que la moitié gauche. */
@media (max-width: 639px) {
    .trust-proof__grid > .trust-proof__pillar:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

.trust-proof__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.trust-proof__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 0.9rem;
    color: var(--espresso);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-proof__icon svg {
    width: 100%;
    height: 100%;
}

.trust-proof__stat {
    font-family: var(--font-head);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 900;
    color: var(--espresso);
    line-height: 1;
    margin-bottom: 0.4rem;
    display: block;
}

.trust-proof__stat span {
    font-size: 0.52em;
    font-weight: 700;
    opacity: 0.6;
    vertical-align: super;
}

.trust-proof__label {
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--charcoal);
    margin-bottom: 0.3rem;
    display: block;
}

.trust-proof__desc {
    font-size: 0.78rem;
    color: var(--charcoal);
    opacity: 0.52;
    line-height: 1.45;
    max-width: 155px;
}

.trust-proof__shipping {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--charcoal);
    opacity: 0.65;
    border-top: 1px solid rgba(209,188,178,0.45);
    padding-top: 1.5rem;
}

.trust-proof__shipping strong {
    opacity: 1;
    font-weight: 700;
    color: var(--espresso);
}

/* --- 4. Collections — Bento hero layout ------------------ */
.collections {
    background: var(--white);
    padding-block: clamp(1.25rem, 3vw, 2.5rem);
}

/* Header */
.coll-header {
    margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
    text-align: center;
}

.coll-header__eyebrow {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sand);
    margin-bottom: 0.4rem;
}

.coll-header__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--charcoal);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Bento grid */
.coll-bento {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 10px;
}

@media (min-width: 640px) {
    .coll-bento {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        gap: 12px;
    }
}

/* Cards — format unique 4:5, plus de mosaïque hero/side */
.coll-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    text-decoration: none;
    background: var(--espresso);
    aspect-ratio: var(--ratio-media);
}

.coll-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.6s ease;
    display: block;
}

.coll-card:hover .coll-card__img {
    transform: scale(1.05);
}

/* Gradient overlay: transparent → dark espresso */
.coll-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 30%,
        rgba(30, 18, 14, 0.55) 65%,
        rgba(30, 18, 14, 0.88) 100%
    );
    transition: opacity 0.4s ease;
}

.coll-card:hover .coll-card__overlay {
    opacity: 0.9;
}

/* Body — overlaid at bottom */
.coll-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    color: var(--white);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.coll-card__badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    background: var(--blush);
    color: var(--espresso);
    font-family: var(--font-head);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    margin-bottom: 0.25rem;
}

.coll-card__title {
    font-family: var(--font-head);
    font-size: clamp(1.2rem, 2.5vw, 1.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--white);
    line-height: 1.1;
}

.coll-card__tagline {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.coll-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    border-bottom: 1.5px solid rgba(255,255,255,0.5);
    padding-bottom: 0.15rem;
    width: fit-content;
    transition: border-color 0.25s, gap 0.25s;
}

.coll-card:hover .coll-card__cta {
    border-color: var(--white);
    gap: 0.7rem;
}

/* --- 5. Technology Spotlight ---------------------------- */
.tech-spotlight {
    background: var(--espresso);
    padding-block: clamp(1.75rem, 4vw, 3.5rem);
}

.tech-spotlight__header {
    text-align: center;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.tech-spotlight__eyebrow {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--blush);
    margin-bottom: 0.75rem;
}

.tech-spotlight__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    color: var(--white);
    margin-bottom: 0.75rem;
    line-height: 1.15;
}

.tech-spotlight__lead {
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    color: rgba(33,33,33,0.65);
    max-width: 460px;
    margin-inline: auto;
    line-height: 1.65;
}

.tech-spotlight__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .tech-spotlight__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }
}

.tech-spotlight__card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 3vw, 2rem) 1.1rem;
    text-align: center;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

.tech-spotlight__card:hover {
    background: rgba(255,255,255,0.11);
    border-color: rgba(209,188,178,0.35);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.tech-spotlight__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    color: var(--blush);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-spotlight__icon svg {
    width: 100%;
    height: 100%;
}

.tech-spotlight__card-title {
    font-family: var(--font-head);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.tech-spotlight__card-text {
    font-size: 0.83rem;
    color: rgba(33,33,33,0.65);
    line-height: 1.55;
}

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

.btn--outline-light {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2.25rem;
    border: 2px solid rgba(255,255,255,0.45);
    border-radius: 2rem;
    font-family: var(--font-head);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--white);
    text-decoration: none;
    background: transparent;
    transition: background 0.22s, border-color 0.22s;
}

.btn--outline-light:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.80);
}

/* --- 5b. Fabric strip ----------------------------------- */
.fabric-strip {
    overflow: hidden;
    line-height: 0;
}

.fabric-strip__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
}

@media (min-width: 640px) {
    .fabric-strip__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.fabric-strip__item {
    aspect-ratio: var(--ratio-media);
    overflow: hidden;
}

.fabric-strip__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.fabric-strip__item:hover img {
    transform: scale(1.06);
}

/* --- 6. Testimonials ------------------------------------ */
.testimonials {
    background: var(--pink-light);
}

.testimonials__title {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.testimonials__viewport {
    overflow: hidden;
    border-radius: var(--radius);
}

.testimonials__track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.testimonial-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2rem);
    box-shadow: var(--shadow-sm);
    min-width: calc((100% - 3rem) / 3);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    contain: layout;
}

.testimonial-card__stars {
    color: var(--star);
    font-size: 1rem;
    letter-spacing: 2px;
}

.testimonial-card__quote {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--charcoal);
    font-style: italic;
    flex: 1;
    border: none;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--charcoal);
}

.testimonial-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pink-cta);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.testimonials__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.testimonials__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--pink-cta);
    background: transparent;
    color: var(--pink-cta);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
}

.testimonials__btn:hover {
    background: var(--pink-cta);
    color: var(--white);
}

.testimonials__dots {
    display: flex;
    gap: 0.5rem;
}

.testimonials__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(143, 126, 116, 0.3);
    transition: background var(--transition), transform var(--transition);
    cursor: pointer;
    border: none;
}

.testimonials__dot.is-active {
    background: var(--pink-cta);
    transform: scale(1.3);
}

/* --- 7. Newsletter -------------------------------------- */
.newsletter {
    background: #3D2E28;
    color: var(--white);
}

.newsletter__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}

.newsletter__title {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    color: var(--white);
}

.newsletter__sub {
    font-size: 1rem;
    opacity: 0.85;
    max-width: 520px;
    line-height: 1.6;
}

.newsletter__sub strong {
    color: var(--lavender);
}

.newsletter__form {
    display: flex;
    gap: 0;
    width: 100%;
    max-width: 480px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.newsletter__form input[type="email"] {
    flex: 1;
    padding: 0.9rem 1.25rem;
    border: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--charcoal);
    outline: none;
    background: var(--white);
    min-width: 0;
}

.newsletter__form .btn {
    border-radius: 0;
    white-space: nowrap;
    padding-inline: 1.5rem;
}

.newsletter__legal {
    font-size: 0.75rem;
    opacity: 0.5;
}

.newsletter__legal a {
    text-decoration: underline;
    color: inherit;
}

/* =============================================================
   MEMBER ACCOUNT CTA (home)
   ============================================================= */
.member-cta {
    background: var(--bg-wash);
    color: var(--charcoal);
}

.member-cta__inner {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    align-items: flex-start;
    text-align: left;
}

.member-cta__eyebrow {
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--sand);
    margin-bottom: 0.5rem;
}

.member-cta__title {
    font-family: var(--font-head);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--espresso);
}

.member-cta__sub {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 540px;
    margin-top: 0.75rem;
}

.member-cta__sub strong { color: var(--espresso); }

.member-cta__perks {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.member-cta__perks li {
    position: relative;
    padding-left: 1.75rem;
    font-size: 0.95rem;
    color: var(--charcoal);
}

.member-cta__perks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--sand);
    /* checkmark */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/0.8rem no-repeat, linear-gradient(#000,#000);
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/0.8rem no-repeat;
}

.member-cta__actions {
    width: 100%;
    max-width: 360px;
}

.member-cta__btn {
    width: 100%;
    gap: 0.6rem;
    padding-block: 1rem;
}

.member-cta__note {
    margin-top: 0.85rem;
    font-size: 0.85rem;
    color: var(--text-soft);
    text-align: center;
}

.member-cta__note a {
    color: var(--espresso);
    font-weight: 600;
    text-decoration: underline;
}

@media (min-width: 768px) {
    .member-cta__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 3rem;
    }
    .member-cta__actions { flex-shrink: 0; }
}

/* =============================================================
   PAGE: MY ACCOUNT (WooCommerce)
   ============================================================= */
.account-page {
    padding-block: clamp(1.5rem, 4vw, 3rem);
}

.account-page__inner {
    max-width: 960px;
}

.account-page__header {
    text-align: center;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.account-page__title {
    font-family: var(--font-head);
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--espresso);
}

.account-page__sub {
    margin-top: 0.6rem;
    color: var(--text-soft);
    font-size: 0.95rem;
}

/* WooCommerce forms — alignés sur la charte */
.account-page .woocommerce form .form-row label,
.account-page .woocommerce-form-login__rememberme {
    font-size: 0.9rem;
    color: var(--charcoal);
}

.account-page .woocommerce input.input-text,
.account-page .woocommerce input[type="text"],
.account-page .woocommerce input[type="email"],
.account-page .woocommerce input[type="password"],
.account-page .woocommerce input[type="tel"] {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: var(--white);
    color: var(--charcoal);
}

.account-page .woocommerce input.input-text:focus {
    outline: none;
    border-color: var(--sand);
    box-shadow: var(--focus-ring);
}

.account-page .woocommerce button.button,
.account-page .woocommerce a.button,
.account-page .woocommerce input.button,
.account-page .woocommerce button.woocommerce-Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 2rem;
    background: var(--sand);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition);
}

.account-page .woocommerce button.button:hover,
.account-page .woocommerce a.button:hover,
.account-page .woocommerce input.button:hover {
    background: var(--sand-hover);
}

/* Navigation "Mon compte" (dashboard connecté) */
.account-page .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.account-page .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    color: var(--charcoal);
    text-decoration: none;
}

.account-page .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--espresso);
    color: var(--white);
    border-color: var(--espresso);
}

/* =============================================================
   PAGE: SOLUTIONS HUB
   ============================================================= */

/* Shared solution utilities */
.solutions-eyebrow {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.75rem;
    display: block;
}
.solutions-eyebrow--legging { color: #8F7E74; }
.solutions-eyebrow--body    { color: var(--pink-cta); }

.solutions-product-title {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    color: var(--charcoal);
    margin-bottom: 1rem;
    line-height: 1.1;
}

.solutions-product-desc {
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0.85;
    margin-bottom: 1rem;
    max-width: 480px;
}

.solutions-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

/* Hero hub */
.solutions-hero {
    position: relative;
    background: #3D2E28;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    overflow: hidden;
}

.solutions-hero__mesh {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(143,126,116,0.08) 28px, rgba(143,126,116,0.08) 29px),
        repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(143,126,116,0.08) 28px, rgba(143,126,116,0.08) 29px);
}

.solutions-hero__content {
    position: relative;
    z-index: 1;
    max-width: 680px;
}

.solutions-hero__eyebrow {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pink-cta);
    margin-bottom: 0.5rem;
    display: block;
}

.solutions-hero__title {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    color: var(--white);
    margin-bottom: 0.75rem;
}

.solutions-hero__sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    max-width: 560px;
    margin-bottom: 1.25rem;
}

.solutions-hero__links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.solutions-hero__links .btn--outline {
    color: var(--white);
    border-color: rgba(255,255,255,0.4);
}
.solutions-hero__links .btn--outline:hover {
    background: var(--white);
    color: var(--charcoal);
    border-color: var(--white);
}

/* Section legging */
.section-solutions-legging {
    background: var(--white);
}

.section-solutions-legging__inner,
.section-solutions-body__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

.section-solutions-legging__media,
.section-solutions-body__media {
    position: relative;
}

.section-solutions-legging__media img,
.section-solutions-body__media img {
    width: 100%;
    height: auto;
    aspect-ratio: var(--ratio-media);
    border-radius: var(--radius);
    object-fit: cover;
}

.section-solutions-legging__badge,
.section-solutions-body__badge {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--pink-cta);
    color: var(--white);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 4px 16px rgba(143,126,116,0.35);
}

.section-solutions-legging__badge span,
.section-solutions-body__badge span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.9;
}

.section-solutions-legging__badge strong,
.section-solutions-body__badge strong {
    font-size: 0.9rem;
}

/* Solutions features list */
.solutions-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.solutions-features__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--pink-light);
    border-radius: var(--radius);
    border-left: 3px solid #8F7E74;
}

.solutions-features__item--light {
    background: var(--white);
    border-left-color: var(--pink-cta);
    box-shadow: var(--shadow-sm);
}

.solutions-features__icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.solutions-features__item strong {
    display: block;
    font-family: var(--font-head);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--charcoal);
    margin-bottom: 0.25rem;
}

.solutions-features__item p {
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
    opacity: 0.8;
}

/* Section body */
.section-solutions-body {
    background: var(--pink-light);
}

/* Comparative matrix */
.solutions-compare {
    background: var(--white);
}

.solutions-compare__table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.solutions-compare__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.solutions-compare__table th,
.solutions-compare__table td {
    padding: 1rem 1.5rem;
    text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.solutions-compare__table thead th {
    background: #3D2E28;
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.solutions-compare__table thead th:first-child {
    background: #3D2E28;
}

.solutions-compare__table tbody tr:last-child td { border-bottom: none; }
.solutions-compare__table tbody tr:nth-child(even) td { background: rgba(209,188,178,0.25); }
.solutions-compare__table tbody td:first-child {
    font-family: var(--font-head);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--charcoal);
    opacity: 0.6;
}

.compare-th-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
}
.compare-th-badge--legging { background: #8F7E74; color: var(--white); }
.compare-th-badge--body    { background: var(--pink-light); color: var(--pink-cta); }

.compare-level {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.compare-level__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(143,126,116,0.15);
    flex-shrink: 0;
}

.compare-level__dot--on { background: var(--pink-cta); }

.compare-level em {
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pink-cta);
    margin-left: 0.25rem;
}

/* Compare cards (mobile) */
.solutions-compare__cards {
    display: none;
    gap: 1rem;
}

.compare-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.compare-card--legging { border-top: 4px solid #8F7E74; }
.compare-card--body    { border-top: 4px solid var(--pink-cta); }

.compare-card__title {
    font-size: 1.1rem;
    color: var(--charcoal);
}

.compare-card__list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.875rem;
}

.compare-card__list dt {
    font-family: var(--font-head);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.55;
    padding-top: 0.1rem;
}

/* =============================================================
   PAGE: LEGGING SCULPTANT
   ============================================================= */

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    opacity: 0.6;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.breadcrumb a:hover { color: var(--pink-cta); opacity: 1; }
.breadcrumb span[aria-current] { opacity: 1; font-weight: 600; }

/* Hero legging */
.legging-hero {
    background: var(--pink-light);
    padding-block: clamp(1.25rem, 3vw, 2rem);
}

.legging-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.legging-hero__media {
    position: relative;
    order: 2;
}

.legging-hero__media img {
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
}

.legging-hero__tag,
.body-hero__tag {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    background: var(--pink-cta);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
}

.legging-hero__eyebrow,
.body-hero__eyebrow {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #8F7E74;
    margin-bottom: 0.75rem;
    display: block;
}

.legging-hero__title,
.body-hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--charcoal);
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.legging-hero__desc,
.body-hero__desc {
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0.85;
    margin-bottom: 0.75rem;
    max-width: 460px;
}

.stars { color: var(--star); letter-spacing: 2px; }

.legging-hero__rating,
.body-hero__rating {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.legging-hero__quick,
.body-hero__quick {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    color: var(--charcoal);
}

.legging-hero__actions,
.body-hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Tech grid */
.legging-tech {
    background: var(--white);
}

.legging-tech__grid,
.body-tech__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
}

.legging-tech__card,
.body-tech__card {
    background: var(--pink-light);
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}

.legging-tech__card:hover,
.body-tech__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(143,126,116,0.1);
}

.legging-tech__icon,
.body-tech__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.legging-tech__card h3,
.body-tech__card h3 {
    font-size: 0.85rem;
    color: #8F7E74;
    margin-bottom: 0.6rem;
}

.legging-tech__card p,
.body-tech__card p {
    font-size: 0.825rem;
    line-height: 1.65;
    opacity: 0.8;
}

/* Results section */
.legging-results {
    background: #3D2E28;
    color: var(--white);
}

.legging-results .section-title { color: var(--white); }

.legging-results__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.legging-results__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.legging-results__images figure {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
}

.legging-results__images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.legging-results__images figcaption {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    white-space: nowrap;
}

.legging-results__quote {
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.7;
    opacity: 0.8;
    margin-top: 1.5rem;
    border-left: 3px solid var(--pink-cta);
    padding-left: 1rem;
}

.legging-results__stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.legging-stat strong {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--pink-light);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.legging-stat span {
    font-size: 0.875rem;
    opacity: 0.7;
    line-height: 1.6;
}

/* Size tables */
.legging-sizes,
.body-sizes {
    background: var(--pink-light);
}

.legging-sizes__intro,
.body-sizes__intro {
    text-align: center;
    max-width: 540px;
    margin-inline: auto;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    opacity: 0.8;
    line-height: 1.6;
}

.legging-sizes__table-wrap,
.body-sizes__table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.legging-sizes__table,
.body-sizes__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--white);
    min-width: 480px;
}

.legging-sizes__table th,
.legging-sizes__table td,
.body-sizes__table th,
.body-sizes__table td {
    padding: 0.875rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.legging-sizes__table thead th,
.body-sizes__table thead th {
    background: #3D2E28;
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.legging-sizes__table tbody td:first-child,
.body-sizes__table tbody td:first-child {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--pink-cta);
}

.legging-sizes__table tbody tr:last-child td,
.body-sizes__table tbody tr:last-child td { border-bottom: none; }

/* Reviews grid (shared) */
.legging-reviews,
.body-reviews {
    background: var(--white);
}

.legging-reviews__grid,
.body-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
}

.review-card {
    background: var(--pink-light);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.review-card__stars { color: var(--star); letter-spacing: 2px; }

.review-card blockquote {
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.65;
    flex: 1;
}

.review-card footer {
    font-size: 0.8rem;
    opacity: 0.65;
}

/* Upsell sections */
.legging-upsell {
    background: var(--pink-light);
}

.legging-upsell__inner,
.body-upsell__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.legging-upsell__content h2,
.body-upsell__content h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: 1rem;
}

.legging-upsell__content p,
.body-upsell__content p {
    font-size: 0.95rem;
    line-height: 1.7;
    opacity: 0.8;
    margin-bottom: 1.5rem;
}

.legging-upsell__media img,
.body-upsell__media img {
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
}

.body-upsell { background: var(--white); }
.body-tech   { background: var(--pink-light); }

/* Coloris grid (body page) */
.body-coloris { background: var(--white); padding-block: clamp(1.5rem, 3vw, 2.5rem); }

.body-coloris__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: 1.5rem;
}

.body-coloris__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.body-coloris__img-wrap {
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: #F7F2EF;
    aspect-ratio: var(--ratio-media);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease;
}

.body-coloris__item:hover .body-coloris__img-wrap {
    box-shadow: 0 12px 40px rgba(143,126,116,0.18);
}

.body-coloris__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 1rem;
    transition: transform 0.4s ease;
}

.body-coloris__item:hover .body-coloris__img-wrap img { transform: scale(1.04); }

.body-coloris__info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.body-coloris__swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.12);
    flex-shrink: 0;
}

.body-coloris__name {
    font-family: var(--font-head);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--charcoal);
}

.body-coloris__cta {
    text-align: center;
    margin-top: 1.25rem;
}

/* Body hero specifics */
.body-hero {
    background: var(--white);
    padding-block: clamp(1.25rem, 3vw, 2rem);
}

.body-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.body-hero__media {
    position: relative;
    order: 1;
}

.body-hero__content {
    order: 2;
}

.body-hero__media img {
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
}

/* =============================================================
   RESPONSIVE — Mobile
   ============================================================= */
@media (max-width: 768px) {

    /* Hero — mobile */
    .hero {
        aspect-ratio: auto;
        min-height: auto;
        padding-block: clamp(2.5rem, 9vw, 4rem) clamp(0.5rem, 2vw, 1rem);
        background-size: 150% auto;
        background-position: center bottom;
    }

    .hero__center {
        padding: 0 1.25rem clamp(9rem, 38vw, 13rem);
        max-width: 100%;
    }

    .hero__eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        margin-bottom: 0.6rem;
    }

    .hero__title {
        font-size: clamp(1.5rem, 6.5vw, 2rem);
        margin-bottom: 0.8rem;
        line-height: 1.15;
    }

    .hero__sub {
        font-size: 0.9rem;
        line-height: 1.55;
        max-width: 34ch;
        margin: 0 auto 1.4rem;
    }

    .hero__cta {
        font-size: 0.85rem;
        padding: 0.85rem 1.75rem;
    }

    /* Header logo réduit */
    .header__logo-img,
    .woocommerce-page .header__logo-img { height: 18px; }

    /* Footer — mobile */
    .footer__top .footer__container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer__col--brand {
        grid-column: 1 / -1;
    }

    .footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Testimonials */
    .testimonial-card { min-width: 85vw; }

    /* Newsletter */
    .newsletter__form {
        flex-direction: column;
        border-radius: var(--radius);
        overflow: visible;
    }
    .newsletter__form input[type="email"] {
        border-radius: var(--radius);
        width: 100%;
    }
    .newsletter__form .btn {
        border-radius: var(--radius);
        width: 100%;
    }

    /* Solutions hub */
    .solutions-hero__links { flex-direction: column; }
    .section-solutions-legging__inner,
    .section-solutions-body__inner { grid-template-columns: 1fr; }
    .section-solutions-body__media { order: -1; }
    .solutions-compare__table-wrap { display: none; }
    .solutions-compare__cards { display: flex; flex-direction: column; }

    /* Product pages */
    .legging-hero__inner,
    .body-hero__inner { grid-template-columns: 1fr; }
    .legging-hero__media { order: -1; }

    .legging-tech__grid,
    .body-tech__grid { grid-template-columns: repeat(2, 1fr); }

    .legging-results__grid { grid-template-columns: 1fr; }
    .legging-results__stats { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
    .legging-stat strong { font-size: 2.5rem; }

    .legging-reviews__grid,
    .body-reviews__grid { grid-template-columns: 1fr; }

    .legging-upsell__inner,
    .body-upsell__inner { grid-template-columns: 1fr; }
    .legging-upsell__media,
    .body-upsell__media { order: -1; }

    .body-coloris__grid { grid-template-columns: 1fr; }
}

/* =============================================================
   PRODUCT COLOR CAROUSEL
   ============================================================= */

.product-carousel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Stage — image unique visible, les autres masquées */
.product-carousel__stage {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: #F7F2EF;
    aspect-ratio: var(--ratio-media);
}

.product-carousel__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.product-carousel__img.is-active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
}

/* Footer : label + swatches */
.product-carousel__footer {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.product-carousel__color-label {
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--charcoal);
    min-width: 3rem;
}

.product-carousel__swatches {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.product-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--swatch);
    border: 2px solid transparent;
    outline: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
    .product-swatch {
        width: 44px;
        height: 44px;
    }
}

.product-swatch:hover {
    transform: scale(1.15);
}

.product-swatch.is-active {
    box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--pink-cta);
    transform: scale(1.1);
}

/* =============================================================
   PAGE STUBS (other pages — populated later)
   ============================================================= */
.page--solutions-hub {}
.page--body-gainants {}
.page--accessoires {}
.page--about {}
.page--contact {}

@media (max-width: 480px) {
    .footer__top .footer__container {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   BODY GAINANTS — Inline purchase form
   ============================================================= */

.body-purchase {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(143,126,116,0.25);
}

.body-purchase__price-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.body-purchase__price {
    font-family: var(--font-head, 'Montserrat', sans-serif);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    color: var(--sand, #8F7E74);
}

.body-purchase__price .woocommerce-Price-amount {
    font: inherit;
    color: inherit;
}

.body-purchase__stock {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0a7d32;
    font-weight: 600;
}

.body-purchase__stock::before {
    content: "●";
    margin-right: 0.4em;
}

.body-purchase__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.body-purchase__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--charcoal, #212121);
    min-width: 80px;
}

/* --- Size pills --- */
.body-purchase__sizes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.body-purchase__size {
    position: relative;
    cursor: pointer;
}

.body-purchase__size input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.body-purchase__size span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 42px;
    padding: 0 0.8rem;
    border: 1.5px solid #d0cdcb;
    border-radius: 6px;
    background: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--charcoal, #212121);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
    user-select: none;
}

.body-purchase__size:hover span {
    border-color: var(--sand, #8F7E74);
}

.body-purchase__size input:checked + span {
    border-color: var(--sand, #8F7E74);
    background: var(--sand, #8F7E74);
    color: #fff;
}

.body-purchase__size input:focus-visible + span {
    outline: 2px solid var(--sand, #8F7E74);
    outline-offset: 2px;
}

/* --- Quantity stepper --- */
.body-purchase__qty {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #d0cdcb;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.body-purchase__qty input {
    width: 44px;
    height: 44px;
    border: 0;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    background: transparent;
    -moz-appearance: textfield;
}

.body-purchase__qty input::-webkit-outer-spin-button,
.body-purchase__qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.body-purchase__qty-btn {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--charcoal, #212121);
    cursor: pointer;
    transition: background .15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.body-purchase__qty-btn:hover {
    background: var(--blush, #D1BCB2);
}

.body-purchase__submit {
    flex: 1 1 auto;
}

@media (max-width: 600px) {
    .body-purchase__row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }
    .body-purchase__label {
        min-width: 0;
    }
    .body-purchase__size span {
        min-width: 44px;
        height: 44px;
        font-size: 0.8rem;
        padding: 0 0.5rem;
    }
    .body-purchase__sizes {
        gap: 0.4rem;
    }
}

/* =============================================================
   WOOCOMMERCE — Cart page (Neovia styling)
   ============================================================= */

/* Les templates rendent .page--cart / .page--checkout (templates/page-cart.php,
   page-checkout.php) ; .page--woocommerce ne sort que du wrapper woocommerce.php. */
.woocommerce-cart .page--woocommerce,
.woocommerce-checkout .page--woocommerce,
.woocommerce-cart .page--cart,
.woocommerce-checkout .page--checkout {
    padding-block: clamp(1.25rem, 3vw, 2.5rem);
}

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
    max-width: 1100px;
    margin: 0 auto;
}

.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: #fff;
    border-radius: var(--radius, 8px);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(143,126,116,0.08);
}

.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th {
    background: var(--blush, #D1BCB2);
    color: var(--charcoal, #212121);
    font-family: var(--font-head, 'Montserrat', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    padding: 1rem;
    border: 0;
}

.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table td {
    padding: 1rem;
    border-top: 1px solid #eee;
    vertical-align: middle;
}

.woocommerce-cart .cart_item .product-thumbnail img {
    width: 80px;
    height: auto;
    border-radius: 6px;
}

.woocommerce-cart .cart-collaterals {
    margin-top: 2rem;
}

.woocommerce .cart-collaterals .cart_totals {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    background: #fff;
    padding: 1.5rem;
    border-radius: var(--radius, 8px);
    box-shadow: 0 4px 20px rgba(143,126,116,0.08);
}

.woocommerce .cart-collaterals .cart_totals h2 {
    font-family: var(--font-head, 'Montserrat', sans-serif);
    font-size: 1.2rem;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.woocommerce .wc-proceed-to-checkout .checkout-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
    background: var(--espresso, #3D2E28);
    color: #fff;
    border: 0;
    padding: 0.9rem 1.75rem;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: background .2s ease, transform .15s ease;
    cursor: pointer;
}

.woocommerce .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--espresso-hover, #2a1f1a);
    transform: translateY(-1px);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: 6px;
    /* WC positionne son icône ::before en absolu à left:1.5em (+16px de large) :
       il faut ≥ 3rem à gauche sinon elle recouvre le début du message. */
    padding: 1rem 1.25rem 1rem 3.25rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--sand, #8F7E74);
}

.woocommerce-message { background: #f5fdf4; border-left-color: #0a7d32; }
.woocommerce-info    { background: #fff9ed; border-left-color: #b8860b; }
.woocommerce-error   { background: #fff0f3; border-left-color: #c2185b; }

.woocommerce .quantity input[type="number"] {
    width: 60px;
    padding: 0.4rem;
    text-align: center;
    border: 1.5px solid #d0cdcb;
    border-radius: 6px;
}

/* Cart: remove item link */
.woocommerce-cart .product-remove a.remove {
    background: transparent;
    color: #c2185b;
    font-size: 1.3rem;
    font-weight: 400;
    text-decoration: none;
    width: auto;
    height: auto;
}

/* =============================================================
   WOOCOMMERCE — Product color swatches + filtered gallery
   ============================================================= */

.nv-gallery-wrapper {
    width: 100%;
}

.nv-gallery {
    display: grid;
    gap: 0.75rem;
}

.nv-gallery__main {
    aspect-ratio: var(--ratio-media);
    background: var(--blush, #D1BCB2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.nv-gallery__main img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nv-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.nv-gallery__thumb {
    all: unset;
    cursor: pointer;
    aspect-ratio: var(--ratio-media);
    background: #F7F2EF;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease;
    box-sizing: border-box;
}

.nv-gallery__thumb:hover {
    transform: translateY(-2px);
}

.nv-gallery__thumb.is-active {
    border-color: var(--sand, #8F7E74);
}

.nv-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nv-gallery__thumb[hidden] {
    display: none !important;
}

/* --- Swatches --------------------------------------------- */
.nv-swatches {
    margin: 1.25rem 0 1.5rem;
}

.nv-swatches__label {
    font-size: 0.9rem;
    color: var(--charcoal, #212121);
    margin-bottom: 0.6rem;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.nv-swatches__current {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    margin-left: 0.25rem;
}

.nv-swatches__list {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.nv-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: #fff;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    box-shadow: inset 0 0 0 2px #fff;
}

/* Hex de coloris — repli CSS pour les pastilles rendues sans style inline.
   Les valeurs doivent rester alignées sur nv_color_hex() (inc/woo-color-swatches.php),
   qui sert les gabarits posant la couleur via --sw. Ajouter un coloris aux
   deux endroits, et à nv_color_swatch_products(). */
.nv-swatch[data-color="black"],
.nv-pcard__swatch[data-color="black"] { background: #1a1a1a; }
.nv-swatch[data-color="nude"],
.nv-pcard__swatch[data-color="nude"]  { background: #d6b49d; }
.nv-swatch[data-color="mocha"],
.nv-pcard__swatch[data-color="mocha"] { background: #5c3a28; }
.nv-swatch[data-color="brown"],
.nv-pcard__swatch[data-color="brown"] { background: #6b4636; }
.nv-swatch[data-color="cherry"],
.nv-pcard__swatch[data-color="cherry"] { background: #7a1f38; }
.nv-swatch[data-color="sand-gray"],
.nv-pcard__swatch[data-color="sand-gray"] { background: #a2988c; }

.nv-swatch:hover {
    transform: scale(1.08);
    border-color: #bbb;
}

.nv-swatch.is-active {
    border-color: var(--sand, #8F7E74);
    transform: scale(1.08);
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--sand, #8F7E74);
}

.nv-swatch:focus-visible {
    outline: 2px solid var(--sand, #8F7E74);
    outline-offset: 3px;
}

/* --- Responsive ------------------------------------------- */
@media (max-width: 600px) {
    .nv-gallery__thumbs {
        grid-template-columns: repeat(3, 1fr);
    }
    .nv-swatch {
        width: 40px;
        height: 40px;
    }
}

/* =============================================================
   BETTERME-STYLE PRODUCT PAGES — Mobile-first
   Classes: .pd-* (product detail)
   ============================================================= */

/* --- Product page wrapper --------------------------------- */
.page--product {
    padding-top: 0;
}

/* Offset fixed header+announcement bar — hauteur pilotée par --header-h */
.pd-offset {
    height: var(--header-h);
}

/* --- Breadcrumb ------------------------------------------ */
.pd-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0.75rem var(--gap);
    font-size: 0.72rem;
    color: rgba(33,33,33,0.5);
    font-family: var(--font-body);
    background: var(--white);
}

.pd-breadcrumb a { color: rgba(33,33,33,0.5); }
.pd-breadcrumb a:hover { color: var(--charcoal); }
.pd-breadcrumb span[aria-current] { color: var(--charcoal); font-weight: 600; }
.pd-breadcrumb__sep { opacity: 0.4; }

/* --- Product gallery ------------------------------------- */
.pd-gallery {
    position: relative;
    background: rgba(209, 188, 178, 0.18);
    overflow: hidden;
}

.pd-gallery__track {
    display: flex;
    transition: transform 0.4s ease;
}

.pd-gallery__slide {
    flex: 0 0 100%;
    aspect-ratio: var(--ratio-media);
    overflow: hidden;
}

.pd-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.page--legging .pd-gallery__slide img {
    object-fit: cover;
    object-position: center top;
}

/* Shapewear Body — same head-to-toe framing as the legging gallery. */
.page--body-gainants .pd-gallery__slide {
    aspect-ratio: var(--ratio-media);
}
.page--body-gainants .pd-gallery__slide img {
    object-fit: cover;
    object-position: center center;
    transform: none;
}

.pd-gallery__dots {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}

.pd-gallery__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, width 0.2s;
}

.pd-gallery__dot.is-active {
    background: var(--white);
    width: 18px;
    border-radius: 3px;
}

@media (min-width: 768px) {
    .pd-gallery {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3px;
        aspect-ratio: auto;
    }
    .pd-gallery__track { display: contents; }
    .pd-gallery__slide { aspect-ratio: var(--ratio-media); flex: none; }
    .page--body-gainants .pd-gallery__slide { aspect-ratio: var(--ratio-media); }
    .pd-gallery__dots { display: none; }
}

/* --- Product info block ---------------------------------- */
.pd-info {
    padding: 1rem var(--gap) 0;
    max-width: 680px;
    margin-inline: auto;
}

.pd-store {
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pink-cta);
    margin-bottom: 0.4rem;
}

.pd-title {
    font-size: clamp(1.4rem, 4vw, 2rem);
    line-height: 1.15;
    color: var(--charcoal);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.pd-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: rgba(33,33,33,0.55);
    margin-bottom: 0.75rem;
}

.pd-rating__stars { color: var(--pink-cta); letter-spacing: 0.05em; }
.pd-rating__count { text-decoration: underline; cursor: pointer; }

.pd-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.pd-price {
    font-family: var(--font-head);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--charcoal);
}

.pd-price-original {
    font-size: 1rem;
    color: rgba(33,33,33,0.4);
    text-decoration: line-through;
}

.pd-shipping-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pink-cta);
    background: rgba(209, 188, 178, 0.22);
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    margin-bottom: 1.25rem;
}

/* --- Color selector -------------------------------------- */
.pd-colors {
    margin-bottom: 1.25rem;
}

.pd-section-label {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(33,33,33,0.55);
    margin-bottom: 0.6rem;
}

.pd-section-label strong { color: var(--charcoal); }

.pd-swatches {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pd-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
    padding: 0;
    background-color: var(--sw-color, #ccc);
}

.pd-swatch.is-active,
.pd-swatch:hover {
    border-color: var(--charcoal);
    box-shadow: inset 0 0 0 2px var(--white);
    transform: scale(1.1);
}

/* --- Size selector --------------------------------------- */
.pd-sizes { margin-bottom: 1rem; }

.pd-sizes__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.pd-size-guide {
    font-size: 0.72rem;
    color: var(--pink-cta);
    text-decoration: underline;
    cursor: pointer;
}

.pd-size-btns {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pd-size-btn {
    min-width: 48px;
    height: 40px;
    padding: 0 0.75rem;
    border: 1.5px solid rgba(33,33,33,0.2);
    border-radius: var(--radius);
    background: var(--white);
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.pd-size-btn.is-active,
.pd-size-btn:hover {
    border-color: var(--pink-cta);
    background: var(--pink-cta);
    color: var(--white);
}

.pd-size-btn.is-oos {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* --- Fit notes ------------------------------------------- */
.pd-fit-notes {
    font-size: 0.78rem;
    color: rgba(33,33,33,0.65);
    line-height: 1.55;
    background: rgba(209, 188, 178, 0.12);
    border-left: 3px solid var(--pink-light);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 1.5rem;
}

/* --- Add to cart button ---------------------------------- */
.pd-atc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1.1rem 1.75rem;
    background: linear-gradient(135deg, var(--espresso) 0%, #4f3a32 100%);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 16px rgba(61,46,40,0.32), inset 0 1px 0 rgba(255,255,255,0.07);
    text-decoration: none;
}

.pd-atc-btn:hover {
    background: linear-gradient(135deg, #2a1f1a 0%, var(--espresso) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(61,46,40,0.44), inset 0 1px 0 rgba(255,255,255,0.07);
}

.pd-atc-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(61,46,40,0.28);
}

.pd-atc-btn__icon {
    flex-shrink: 0;
    opacity: 0.9;
}

.pd-atc-btn__label {
    flex: 1;
    text-align: left;
}

.pd-atc-btn__price {
    font-size: 1.05em;
    font-weight: 800;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(255,255,255,0.22);
    letter-spacing: 0.02em;
}

/* Secondary — texte seul, sans compétition visuelle avec le primary */
.pd-atc-btn--secondary {
    background: transparent;
    border: 1.5px solid rgba(143,126,116,0.35);
    color: var(--sand);
    margin-bottom: 1.5rem;
    box-shadow: none;
    font-size: 0.8rem;
    padding: 0.8rem 1.5rem;
}

.pd-atc-btn--secondary:hover {
    background: rgba(143,126,116,0.08);
    border-color: var(--sand);
    color: var(--sand);
    transform: none;
    box-shadow: none;
}

/* --- Trust badges ---------------------------------------- */
.pd-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--border-brand);
    border-bottom: 1px solid var(--border-brand);
    margin-bottom: 0;
}

.pd-trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
}

.pd-trust__item svg { flex-shrink: 0; }

.pd-trust__label {
    font-size: 0.72rem;
    font-family: var(--font-head);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(33,33,33,0.7);
    line-height: 1.3;
}

/* --- Accordions ------------------------------------------ */
.pd-accordions {
    border-top: 1px solid rgba(33,33,33,0.08);
}

.pd-accordion {
    border-bottom: 1px solid rgba(33,33,33,0.08);
}

.pd-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem var(--gap);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-head);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--charcoal);
    text-align: left;
}

.pd-accordion__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    position: relative;
    transition: transform 0.25s ease;
}

.pd-accordion__icon::before,
.pd-accordion__icon::after {
    content: '';
    position: absolute;
    background: var(--charcoal);
    border-radius: 2px;
}

.pd-accordion__icon::before {
    width: 14px; height: 2px;
    top: 8px; left: 2px;
}

.pd-accordion__icon::after {
    width: 2px; height: 14px;
    top: 2px; left: 8px;
    transition: opacity 0.25s, transform 0.25s;
}

.pd-accordion.is-open .pd-accordion__icon::after {
    opacity: 0;
    transform: rotate(90deg);
}

.pd-accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.pd-accordion.is-open .pd-accordion__body {
    max-height: 600px;
}

.pd-accordion__content {
    padding: 0 var(--gap) 1.25rem;
    font-size: 0.83rem;
    line-height: 1.7;
    color: rgba(33,33,33,0.75);
}

.pd-accordion__content ul {
    list-style: disc;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

/* --- Related / "Étoffe la collection" -------------------- */
.pd-related {
    padding: clamp(1rem, 3vw, 1.75rem) 0;
    background: var(--white);
}

.pd-related__header {
    padding-inline: var(--gap);
    margin-bottom: 1rem;
}

.pd-related__title {
    font-size: 1rem;
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--charcoal);
    margin-bottom: 0.2rem;
}

.pd-related__sub {
    font-size: 0.75rem;
    color: rgba(33,33,33,0.55);
}

.pd-related__scroll {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--gap);
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pd-related__scroll::-webkit-scrollbar { display: none; }

.pd-related__card {
    flex: 0 0 160px;
    scroll-snap-align: start;
    border-radius: var(--radius);
    overflow: hidden;
    background: rgba(209, 188, 178, 0.12);
    text-decoration: none;
    color: var(--charcoal);
    display: flex;
    flex-direction: column;
}

.pd-related__card-img {
    aspect-ratio: var(--ratio-media);
    overflow: hidden;
}

.pd-related__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.pd-related__card:hover .pd-related__card-img img {
    transform: scale(1.04);
}

.pd-related__card-body {
    padding: 0.6rem 0.75rem;
}

.pd-related__card-name {
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}

.pd-related__card-price {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pink-cta);
}

/* --- Reviews section ------------------------------------ */
.pd-reviews {
    padding: clamp(1rem, 3vw, 1.75rem) var(--gap);
    border-top: 1px solid rgba(33,33,33,0.08);
    max-width: 680px;
    margin-inline: auto;
}

.pd-reviews__title {
    font-family: var(--font-head);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
}

.pd-reviews__summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pd-reviews__score {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1;
}

.pd-reviews__stars-col { display: flex; flex-direction: column; gap: 0.2rem; }
.pd-reviews__stars { color: var(--pink-cta); font-size: 1rem; letter-spacing: 0.05em; }
.pd-reviews__count { font-size: 0.72rem; color: rgba(33,33,33,0.5); }

.pd-reviews__write-btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.7rem 1.5rem;
    border: 1.5px solid var(--pink-cta);
    border-radius: var(--radius);
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pink-cta);
    cursor: pointer;
    background: none;
    transition: background var(--transition), color var(--transition);
}

.pd-reviews__write-btn:hover {
    background: var(--pink-cta);
    color: var(--white);
}

/* --- Brand story / Values -------------------------------- */
.pd-brand-story {
    background: rgba(209, 188, 178, 0.12);
    padding: clamp(1rem, 3vw, 1.75rem) 0 0;
}

.pd-brand-story__intro {
    padding-inline: var(--gap);
    margin-bottom: 1.5rem;
    text-align: center;
}

.pd-brand-story__eyebrow {
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pink-cta);
    margin-bottom: 0.5rem;
}

.pd-brand-story__title {
    font-size: clamp(1.2rem, 3.5vw, 1.6rem);
    color: var(--charcoal);
    line-height: 1.25;
}

.pd-brand-story__hero-img {
    width: 100%;
    aspect-ratio: var(--ratio-banner);
    object-fit: cover;
    display: block;
}

/* Visuel paysage des deux modèles (neovia-home-hero-main) : retiré sur smartphone
   à la demande — display:none, donc l'image lazy n'est même pas téléchargée. */
@media (max-width: 767px) {
    .pd-brand-story__hero-img--no-mobile,
    .nv-no-mobile { display: none !important; }
}

.pd-brand-values {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pd-brand-value {
    display: grid;
    grid-template-rows: auto 1fr;
}

.pd-brand-value__img {
    width: 100%;
    aspect-ratio: var(--ratio-media);
    object-fit: cover;
    display: block;
    background: var(--pink-light);
}

.pd-brand-value__body {
    padding: 1.25rem var(--gap);
    background: var(--white);
}

.pd-brand-value__heading {
    font-size: 1rem;
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--charcoal);
    margin-bottom: 0.4rem;
}

.pd-brand-value__text {
    font-size: 0.82rem;
    line-height: 1.65;
    color: rgba(33,33,33,0.7);
}

@media (min-width: 768px) {
    .pd-brand-values {
        flex-direction: row;
    }
    .pd-brand-value {
        flex: 1;
        grid-template-rows: auto 1fr;
    }
}

/* --- Sticky ATC ----------------------------------------- */
/* Styles déplacés dans assets/css/sticky-atc.css (version complète :
   qty stepper, safe-area, media queries). Bloc obsolète retiré pour
   éviter les conflits z-index/transform. */

/* --- About page ----------------------------------------- */
/* décalage header géré par .pd-offset (--header-h) ; pas de padding-top ici */

.about-hero {
    background: var(--espresso);
    color: var(--white);
    padding: clamp(3rem, 8vw, 6rem) var(--gap);
    text-align: center;
}

.about-hero__eyebrow {
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin-bottom: 0.75rem;
}

.about-hero__title {
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1.05;
    color: var(--white);
    max-width: 700px;
    margin-inline: auto;
    margin-bottom: 1rem;
}

.about-hero__sub {
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    color: rgba(255,255,255,0.7);
    max-width: 560px;
    margin-inline: auto;
    line-height: 1.7;
}

.about-values {
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.about-value {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gap);
    align-items: center;
}

.about-value + .about-value {
    margin-top: clamp(2rem, 5vw, 4rem);
}

.about-value__media {
    border-radius: var(--radius);
}

@media (min-width: 768px) {
    .about-value { grid-template-columns: 1fr 1fr; }
    .about-value:nth-child(even) .about-value__media { order: 2; }
}

.about-value__media {
    aspect-ratio: var(--ratio-media);
    overflow: hidden;
    background: rgba(209, 188, 178, 0.12);
}

.about-value__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-value__body {
    padding: clamp(1.5rem, 4vw, 3rem) var(--gap);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-value__eyebrow {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pink-cta);
    margin-bottom: 0.5rem;
}

.about-value__title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    color: var(--charcoal);
    margin-bottom: 0.75rem;
}

.about-value__text {
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(33,33,33,0.7);
}

.about-value__text + .about-value__text {
    margin-top: 0.6rem;
}

/* Bloc texte seul (sans visuel) — page À propos */
@media (min-width: 768px) {
    .about-value--text { grid-template-columns: 1fr; max-width: 760px; }
}

/* --- Founder Story section ------------------------------ */
.founder-story {
    padding: clamp(3rem, 8vw, 6rem) var(--gap);
    background: var(--white);
}

.founder-story__inner {
    max-width: 1140px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

@media (min-width: 768px) {
    .founder-story__inner {
        grid-template-columns: 420px 1fr;
    }
}

.founder-story__media {
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: var(--ratio-media);
    background: var(--blush, #D1BCB2);
}

.founder-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.founder-story__eyebrow {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pink-cta);
    margin-bottom: 0.75rem;
}

.founder-story__title {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    line-height: 1.15;
    color: var(--charcoal);
    margin-bottom: 1.5rem;
}

.founder-story__text {
    font-size: 0.92rem;
    line-height: 1.75;
    color: rgba(33,33,33,0.72);
    margin-bottom: 1rem;
}

.founder-story__text em {
    font-style: italic;
    color: var(--charcoal);
}

.founder-story__quote {
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--pink-cta);
    background: rgba(209,188,178,0.15);
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.65;
    color: var(--charcoal);
    border-radius: 0 4px 4px 0;
}

.founder-story__quote cite {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pink-cta);
}

/* --- Contact page --------------------------------------- */
/* décalage header géré par .pd-offset (--header-h) ; pas de padding-top ici */

.contact-hero {
    text-align: center;
    padding: clamp(2rem, 5vw, 4rem) var(--gap) 1rem;
    background: rgba(209, 188, 178, 0.12);
}

.contact-hero__title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--charcoal);
    margin-bottom: 0.5rem;
}

.contact-hero__sub {
    font-size: 0.88rem;
    color: rgba(33,33,33,0.55);
    max-width: 480px;
    margin-inline: auto;
    line-height: 1.6;
}

.contact-form-wrap {
    max-width: 600px;
    margin-inline: auto;
    padding: 2rem var(--gap) 3rem;
}

.contact-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.contact-form label {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(33,33,33,0.55);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid rgba(33,33,33,0.15);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--charcoal);
    background: var(--white);
    transition: border-color var(--transition);
    appearance: none;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--pink-cta);
}

.contact-form textarea { resize: vertical; min-height: 120px; }

.contact-form__submit {
    width: 100%;
    padding: 1rem;
    background: var(--espresso);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition);
    margin-top: 0.5rem;
}

.contact-form__submit:hover { background: var(--espresso-hover); }

.contact-notice {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.contact-notice--success {
    background: rgba(61, 46, 40, 0.08);
    border-left: 4px solid var(--espresso);
    color: var(--espresso);
}
.contact-notice--error {
    background: rgba(192, 57, 43, 0.08);
    border-left: 4px solid #c0392b;
    color: #7b1f17;
}

.contact-faq {
    background: rgba(209, 188, 178, 0.12);
    padding: clamp(2rem, 5vw, 3rem) var(--gap);
    text-align: center;
}

.contact-faq__title {
    font-size: 1.1rem;
    color: var(--charcoal);
    margin-bottom: 1.25rem;
}

.contact-faq__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    max-width: 560px;
    margin-inline: auto;
}

@media (max-width: 480px) {
    .contact-faq__grid { grid-template-columns: 1fr; }
}

.contact-faq__item {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: left;
    font-size: 0.8rem;
    color: rgba(33,33,33,0.75);
    border: 1px solid rgba(33,33,33,0.07);
}

.contact-faq__item strong {
    display: block;
    color: var(--charcoal);
    font-family: var(--font-head);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

/* --- Accessories page ----------------------------------- */
/* (classe .page--accessoires non utilisée — la page accessoires = page--sport-bras) */

.accessories-hero {
    text-align: center;
    padding: clamp(2rem, 5vw, 4rem) var(--gap);
    background: var(--espresso);
    color: var(--white);
}

.accessories-hero__title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--white);
    margin-bottom: 0.5rem;
}

.accessories-hero__sub {
    font-size: 0.88rem;
    color: rgba(33,33,33,0.75);
    max-width: 480px;
    margin-inline: auto;
}

.accessories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(33,33,33,0.08);
    padding: 1px;
}

@media (min-width: 640px) {
    .accessories-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .accessories-grid { grid-template-columns: repeat(4, 1fr); }
}

.accessory-card {
    background: var(--white);
    text-decoration: none;
    color: var(--charcoal);
    display: flex;
    flex-direction: column;
    transition: opacity var(--transition);
}

.accessory-card:hover { opacity: 0.9; }

.accessory-card__img {
    aspect-ratio: var(--ratio-media);
    overflow: hidden;
    background: rgba(209, 188, 178, 0.12);
}

.accessory-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.accessory-card:hover .accessory-card__img img { transform: scale(1.04); }

.accessory-card__body {
    padding: 0.75rem;
}

.accessory-card__name {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}

.accessory-card__price {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pink-cta);
}

/* =============================================================
   PAGE: LEGAL (Terms, Privacy, etc.)
   ============================================================= */

.legal-page {
    padding-block: 1rem 4rem;
}

.legal-page__container {
    max-width: 760px;
}

.legal-page__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: 0.5rem;
}

.legal-page__updated {
    font-size: 0.82rem;
    color: var(--pink-cta);
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Chapeau, tableau (bases légales), formulaire type de rétractation */
.legal-page__intro {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--charcoal, #212121);
    border-left: 3px solid var(--blush, #D1BCB2);
    padding-left: 1rem;
    margin: 0 0 2rem;
}
.legal-page__table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.92rem;
}
.legal-page__table th,
.legal-page__table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}
.legal-page__table th {
    background: var(--blush, #D1BCB2);
    font-family: var(--font-head, 'Montserrat', sans-serif);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.legal-page__form {
    background: #faf8f6;
    border: 1px dashed #d0cdcb;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    line-height: 1.9;
}
/* Champs restant à renseigner (identité société, hébergeur, médiateur…) :
   volontairement voyants tant qu'ils ne sont pas remplacés. */
.nv-legal-todo {
    background: #fff3cd;
    color: #7a5a00;
    padding: 0 0.3em;
    border-radius: 3px;
    font-weight: 600;
}

.legal-page__content h2 {
    font-size: 1.15rem;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--pink-light);
}

.legal-page__content h3 {
    font-size: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.legal-page__content p {
    font-size: 0.92rem;
    line-height: 1.75;
    margin-bottom: 1rem;
    color: rgba(33,33,33,0.85);
}

.legal-page__content ul,
.legal-page__content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.legal-page__content li {
    font-size: 0.92rem;
    line-height: 1.75;
    margin-bottom: 0.35rem;
    color: rgba(33,33,33,0.85);
}

.legal-page__content a {
    color: var(--pink-cta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-page__content a:hover {
    color: var(--pink-hover);
}

.legal-page__content strong {
    font-weight: 600;
    color: var(--charcoal);
}

.legal-page__content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
}

.legal-page__content th,
.legal-page__content td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    text-align: left;
}

.legal-page__content th {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pink-cta);
    border-bottom: 2px solid var(--pink-light);
}

/* =============================================================
   COMPLETE THE LOOK — Bundle Block
   ============================================================= */

.nv-bundle {
    scroll-margin-top: 90px; /* header fixe — arrivée par #nv-sb-bundle */
    background: linear-gradient(135deg, #F7F2EF 0%, rgba(209,188,178,0.22) 100%);
    border-top: 1px solid rgba(143,126,116,0.15);
    border-bottom: 1px solid rgba(143,126,116,0.15);
    padding-block: clamp(1.25rem, 3vw, 2rem);
}

.nv-bundle__inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Header ──────────────────────────────────────────────── */
.nv-bundle__head { text-align: center; }

.nv-bundle__badge {
    display: inline-block;
    background: var(--pink-cta);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    margin-bottom: 0.6rem;
}

.nv-bundle__title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    color: var(--charcoal);
    margin-bottom: 0.3rem;
}

.nv-bundle__sub {
    font-size: 0.88rem;
    color: rgba(33,33,33,0.55);
    line-height: 1.5;
}

/* ── Shipping bar ─────────────────────────────────────────── */
.nv-bundle__ship {
    background: var(--white);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    border: 1px solid rgba(143,126,116,0.12);
}

.nv-bundle__ship-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--charcoal);
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.nv-bundle__ship-label svg { flex-shrink: 0; color: var(--pink-cta); }
.nv-bundle__ship-label strong { color: var(--pink-cta); }

.nv-bundle__ship-delta {
    color: rgba(33,33,33,0.5);
    font-size: 0.78rem;
}

.nv-bundle__ship-track {
    height: 5px;
    background: rgba(143,126,116,0.18);
    border-radius: 99px;
    overflow: hidden;
}

.nv-bundle__ship-fill {
    height: 100%;
    background: var(--pink-cta);
    border-radius: 99px;
    transition: width 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ── Product rows ─────────────────────────────────────────── */
.nv-bundle__products {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.nv-bundle__product {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--white);
    border-radius: var(--radius);
    padding: 1rem;
    border: 1px solid rgba(143,126,116,0.12);
    transition: border-color var(--transition);
}

.nv-bundle__product.is-selected {
    border-color: var(--pink-cta);
}

.nv-bundle__product-img {
    flex-shrink: 0;
    width: 72px;
    height: 96px;
    border-radius: calc(var(--radius) - 2px);
    overflow: hidden;
    background: #f2ede9;
}

.nv-bundle__product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nv-bundle__product-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.nv-bundle__product-name {
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--charcoal);
    line-height: 1.3;
}

.nv-bundle__product-price {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--pink-cta);
}

.nv-bundle__product-oos {
    font-size: 0.75rem;
    color: #c0392b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Size chips */
.nv-bundle__product-sizes {
    margin-top: 0.4rem;
}

.nv-bundle__size-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(33,33,33,0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.nv-bundle__size-label strong {
    color: var(--charcoal);
}

.nv-bundle__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.nv-bundle__chip {
    min-width: 38px;
    height: 34px;
    padding: 0 0.55rem;
    border: 1.5px solid rgba(33,33,33,0.18);
    border-radius: 6px;
    background: var(--white);
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--charcoal);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    line-height: 1;
}

.nv-bundle__chip:hover:not(:disabled) {
    border-color: var(--pink-cta);
}

.nv-bundle__chip.is-active {
    border-color: var(--pink-cta);
    background: var(--pink-cta);
    color: var(--white);
}

.nv-bundle__chip.is-oos,
.nv-bundle__chip:disabled {
    opacity: 0.28;
    cursor: not-allowed;
    text-decoration: line-through;
}

.nv-bundle__chip:focus-visible {
    outline: 2px solid var(--pink-cta);
    outline-offset: 2px;
}

/* ── Footer: pricing + CTA ────────────────────────────────── */
.nv-bundle__footer {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.nv-bundle__pricing {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.nv-bundle__price-was {
    font-size: 1rem;
    color: rgba(33,33,33,0.35);
    text-decoration: line-through;
    font-weight: 500;
}

.nv-bundle__price-now {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1;
}

.nv-bundle__price-tag {
    background: #fdf0d5;
    color: #b8860b;
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    border: 1px solid rgba(184,134,11,0.2);
}

/* CTA — mirrors pd-atc-btn style */
.nv-bundle__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 1.1rem 1.75rem;
    background: linear-gradient(135deg, var(--espresso) 0%, #4f3a32 100%);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
    box-shadow: 0 4px 16px rgba(61,46,40,0.32), inset 0 1px 0 rgba(255,255,255,0.07);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.nv-bundle__cta:hover:not(:disabled) {
    background: linear-gradient(135deg, #2a1f1a 0%, var(--espresso) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(61,46,40,0.44), inset 0 1px 0 rgba(255,255,255,0.07);
}

.nv-bundle__cta:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.nv-bundle__cta.is-loading {
    opacity: 0.75;
    cursor: wait;
}

.nv-bundle__cta.is-success {
    background: #2e7d32;
}

.nv-bundle__reassurance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: rgba(33,33,33,0.5);
    text-align: center;
}

.nv-bundle__reassurance svg { flex-shrink: 0; }

.nv-bundle__error {
    font-size: 0.8rem;
    color: #c0392b;
    font-weight: 600;
    text-align: center;
    min-height: 1.2em;
}

/* ── Desktop: side-by-side product rows ──────────────────── */
@media (min-width: 768px) {
    .nv-bundle__products {
        flex-direction: row;
        gap: 1rem;
    }
    .nv-bundle__product {
        flex: 1;
    }
    .nv-bundle__footer {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem 2rem;
    }
    .nv-bundle__pricing {
        flex-shrink: 0;
    }
    .nv-bundle__cta {
        flex: 1;
        min-width: 220px;
    }
    .nv-bundle__reassurance {
        width: 100%;
    }
}

/* =============================================================
   DESKTOP LAYOUT OVERRIDES (≥ 1024 px)
   Fixes for product pages (2-column) and solutions hub header
   ============================================================= */

@media (min-width: 1024px) {

    /* décalage header géré par .pd-offset (--header-h) ;
       le padding de base de .solutions-hero suffit pour l'aération */

    /* ── Pages produit: layout 2 colonnes ────────────────────── */

    /* Le wrapper .pd-layout isole la zone sticky : gallery + info + accordéons.
       Les sections full-width (related, reviews, brand-story) sont en dehors,
       ce qui libère correctement le sticky de la galerie quand on les atteint. */
    .pd-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start; /* indispensable : sans ça, sticky est ignoré en grid */
        max-width: var(--container);
        margin-inline: auto;
    }

    /* Galerie : colonne gauche, sticky dans .pd-layout uniquement */
    .pd-layout > .pd-gallery {
        grid-column: 1;
        grid-row: span 2;
        position: sticky;
        top: 110px;
        align-self: start;
        display: block;
        aspect-ratio: auto;
        /* Hauteur max = viewport - header, évite que la galerie dépasse l'écran */
        max-height: calc(100vh - 120px);
        overflow: hidden;
    }

    /* Rétablir le carousel (track display:contents → flex) */
    .pd-layout > .pd-gallery .pd-gallery__track {
        display: flex;
    }

    /* Slide unique, hauteur contrainte à la fenêtre — ratio 4/5 = natif des photos */
    .pd-layout > .pd-gallery .pd-gallery__slide {
        flex: 0 0 100%;
        aspect-ratio: var(--ratio-media);
        max-height: calc(100vh - 130px);
    }

    /* Dots de navigation visibles en desktop */
    .pd-layout > .pd-gallery .pd-gallery__dots {
        display: flex;
    }

    /* Info produit : colonne droite */
    .pd-layout > .pd-info {
        grid-column: 2;
        max-width: none;
        margin-inline: 0;
        padding: 2rem 3rem 0 2.5rem;
    }

    /* Accordéons : colonne droite, sous l'info */
    .pd-layout > .pd-accordions {
        grid-column: 2;
    }
}

/* =========================================================
   PACK CAROUSEL BUNDLE (SPORT BRAS + LEGGINGS)
   ========================================================= */
.nv-pack-bundle {
    padding: 2rem 0;
    background: #F7F2EF;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .nv-pack-bundle {
        padding: 3rem 0;
        margin: 2rem 0;
    }
}

.nv-pack-bundle__header {
    text-align: center;
    margin-bottom: 2rem;
}

.nv-pack-bundle__badge {
    display: inline-block;
    background: #E8F5E9;
    color: #2E7D32;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.nv-pack-bundle__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--charcoal);
    margin-bottom: 0.5rem;
}

.nv-pack-bundle__sub {
    font-size: 1rem;
    color: rgba(33,33,33,0.7);
}

.nv-pack-carousel__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    padding-inline: var(--gap);
}
.nv-pack-carousel__track::-webkit-scrollbar {
    display: none;
}

.nv-pack-card {
    flex: 0 0 85%;
    max-width: 320px;
    scroll-snap-align: center;
    background: var(--white);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .nv-pack-card {
        flex: 0 0 calc(33.333% - 1rem);
        max-width: none;
    }
}

.nv-pack-card__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: #fff;
}

.nv-pack-card__img-wrap {
    position: relative;
    background: rgba(209,188,178,0.18);
    aspect-ratio: var(--ratio-media);
    overflow: hidden;
}

.nv-pack-card__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nv-pack-card__placeholder-text {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nv-pack-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.nv-pack-card__body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.nv-pack-card__name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 0.35rem;
}

.nv-pack-card__pricing {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.nv-pack-card__was {
    font-size: 0.95rem;
    color: rgba(33,33,33,0.4);
}

.nv-pack-card__now {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sale);
}

.nv-pack-card__sizes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    margin-top: auto;
}

.nv-pack-card__select-wrap {
    position: relative;
}

.nv-pack-card__select {
    width: 100%;
    appearance: none;
    background: #F7F2EF;
    border: 1px solid var(--border-brand);
    border-radius: 4px;
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
    font-family: inherit;
    color: var(--charcoal);
    cursor: pointer;
}

.nv-pack-card__select:focus {
    outline: none;
    border-color: var(--pink-cta);
}

.nv-pack-card__select-wrap::after {
    content: "▼";
    font-size: 0.7rem;
    color: #888;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.nv-pack-card__btn {
    width: 100%;
    padding: 0.6rem;
    font-size: 0.9rem;
}

/* =============================================================
   FLOAT CART
   ============================================================= */

.float-cart {
    position: fixed;
    bottom: 2rem;
    right: 1.5rem;
    z-index: 95;
}

body:has(.sticky-atc.is-visible) .float-cart {
    bottom: 5.5rem;
    transition: bottom 0.25s ease;
}

.float-cart__btn {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--espresso);
    color: var(--blush);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(61,46,40,0.40);
    opacity: 0;
    transform: scale(0.75);
    pointer-events: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.28s ease;
}

.float-cart__btn.is-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.float-cart__btn:hover {
    transform: scale(1.09);
    box-shadow: 0 6px 28px rgba(61,46,40,0.52);
}

.float-cart__btn:active {
    transform: scale(0.96);
}

.float-cart__count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    background: var(--sand);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--white);
    line-height: 1;
}

.float-cart__count:empty { display: none; }

.float-cart__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(61,46,40,0.30);
    z-index: 198;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.float-cart__backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.float-cart__panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 100vw;
    background: var(--white);
    z-index: 199;
    display: flex;
    flex-direction: column;
    transform: translateX(110%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 40px rgba(61,46,40,0.16);
}

.float-cart__panel.is-open {
    transform: translateX(0);
}

.float-cart__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(209,188,178,0.35);
    flex-shrink: 0;
}

.float-cart__panel-title {
    font-family: var(--font-head);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--espresso);
}

.float-cart__close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(209,188,178,0.18);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--charcoal);
    transition: background 0.2s;
}

.float-cart__close:hover {
    background: rgba(209,188,178,0.42);
}

.float-cart__body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1.5rem 1rem;
    -webkit-overflow-scrolling: touch;
}

.float-cart__item {
    display: flex;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(209,188,178,0.22);
}

.float-cart__item:last-child { border-bottom: none; }

.float-cart__item-img {
    width: 68px;
    height: 68px;
    border-radius: var(--radius);
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(209,188,178,0.12);
}

.float-cart__item-details {
    flex: 1;
    min-width: 0;
}

.float-cart__item-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 0.2rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.float-cart__item-meta {
    font-size: 0.72rem;
    color: var(--sand);
    margin-bottom: 0.3rem;
}

.float-cart__item-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.float-cart__item-price {
    font-family: var(--font-head);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--espresso);
}

.float-cart__item-qty {
    font-size: 0.73rem;
    color: var(--charcoal);
    opacity: 0.5;
}

.float-cart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    min-height: 200px;
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--charcoal);
    opacity: 0.5;
}

.float-cart__empty svg {
    width: 44px;
    height: 44px;
    opacity: 0.4;
}

.float-cart__empty p { font-size: 0.85rem; }

.float-cart__footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid rgba(209,188,178,0.35);
    flex-shrink: 0;
}

.float-cart__subtotal-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.float-cart__subtotal-label {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--charcoal);
    opacity: 0.6;
}

.float-cart__subtotal-amount {
    font-family: var(--font-head);
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--espresso);
}

.float-cart__view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1.5rem;
    background: var(--espresso);
    color: var(--white);
    border: none;
    border-radius: 2rem;
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.22s;
}

.float-cart__view-btn:hover { background: var(--espresso-hover); }

.float-cart__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

.float-cart__loading::after {
    content: '';
    width: 26px;
    height: 26px;
    border: 2.5px solid rgba(209,188,178,0.3);
    border-top-color: var(--espresso);
    border-radius: 50%;
    animation: fc-spin 0.7s linear infinite;
}

@keyframes fc-spin { to { transform: rotate(360deg); } }

@media (max-width: 479px) {
    .float-cart {
        bottom: 1.25rem;
        right: 1rem;
    }

    body:has(.sticky-atc.is-visible) .float-cart {
        bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }

    .float-cart__panel { width: 100vw; }
}

/* =============================================================
   CART-SHOP — Add-to-cart products on the WooCommerce /cart/ page
   ============================================================= */
.cart-shop {
    margin: 3rem auto 4rem;
    padding: 2.25rem 1rem 2.5rem;
    background: rgba(209, 188, 178, 0.12);
    border-radius: 18px;
    border: 1px solid var(--border-brand, rgba(143,126,116,0.18));
}

.cart-shop__head {
    text-align: center;
    margin-bottom: 1.75rem;
}

.cart-shop__title {
    font-family: var(--font-head, 'Montserrat', sans-serif);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--espresso, #3D2E28);
    margin: 0 0 0.4rem;
    text-transform: uppercase;
}

.cart-shop__sub {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    color: var(--sand, #8F7E74);
    margin: 0;
}

.cart-shop__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    max-width: 1100px;
    margin: 0 auto;
}

@media (min-width: 720px) {
    .cart-shop__grid { grid-template-columns: repeat(3, 1fr); }
}

.cart-shop__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(143,126,116,0.14));
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cart-shop__card:hover {
    box-shadow: var(--shadow-md, 0 4px 20px rgba(143,126,116,0.22));
    transform: translateY(-2px);
}

.cart-shop__media {
    display: block;
    aspect-ratio: var(--ratio-media);
    background: rgba(209, 188, 178, 0.12);
    overflow: hidden;
}

.cart-shop__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.cart-shop__body {
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}

.cart-shop__name {
    font-family: var(--font-head, 'Montserrat', sans-serif);
    font-size: 1rem;
    font-weight: 800;
    color: var(--espresso, #3D2E28);
    margin: 0;
    letter-spacing: -0.01em;
}

.cart-shop__tagline {
    font-size: 0.78rem;
    color: var(--sand, #8F7E74);
    margin: 0;
    line-height: 1.4;
}

.cart-shop__price {
    margin: 0.15rem 0 0.4rem;
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
}

.cart-shop__price-now {
    font-family: var(--font-head, 'Montserrat', sans-serif);
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--espresso, #3D2E28);
}

.cart-shop__price-was {
    font-size: 0.875rem;
    color: var(--sand, #8F7E74);
    text-decoration: line-through;
    opacity: 0.7;
}

.cart-shop__oos {
    font-size: 0.78rem;
    color: #C0392B;
    font-weight: 700;
    margin: 0.5rem 0 0;
}

.cart-shop__form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
}

.cart-shop__size-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--sand, #8F7E74);
    text-transform: uppercase;
}

.cart-shop__size-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 0.65rem 2rem 0.65rem 0.85rem;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--espresso, #3D2E28);
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M2 3.5l3 3 3-3' stroke='%233D2E28' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 0.75rem center;
    border: 1.5px solid var(--border-brand, rgba(143,126,116,0.25));
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.cart-shop__size-select:focus {
    outline: none;
    border-color: var(--espresso, #3D2E28);
}

.cart-shop__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--espresso, #3D2E28);
    color: #fff;
    font-family: var(--font-head, 'Montserrat', sans-serif);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    border-radius: 99px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.cart-shop__cta:hover { background: var(--espresso-hover, #2a1f1a); }
.cart-shop__cta:active { transform: scale(0.98); }


/* ═══════════════════════════════════════════════════════════
   ISC PRODUCT CARD SYSTEM
   ═══════════════════════════════════════════════════════════ */

.isc-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .isc-grid--2 { grid-template-columns: repeat(4, 1fr); } }

.isc-card { position: relative; transition: transform 0.3s ease; }
.isc-card:hover { transform: translateY(-2px); }

.isc-card__img-wrap {
    position: relative; overflow: hidden;
    aspect-ratio: var(--ratio-media);
    background: rgba(209,188,178,0.15); border-radius: 4px;
}
.isc-card__img-link { display: block; height: 100%; }
.isc-card__img { width: 100%; height: 100%; object-fit: cover; display: none; transition: opacity 0.4s ease; }
.isc-card__img--active { display: block; }
.isc-card__img:only-of-type { display: block; }
.isc-card__img-placeholder { width: 100%; height: 100%; background: rgba(209,188,178,0.2); }

.isc-card__pagination {
    position: absolute; top: 8px; left: 8px; right: 8px;
    display: flex; gap: 4px; z-index: 2; pointer-events: none;
}
.isc-card__pagination span {
    flex: 1; height: 2px; border-radius: 1px;
    background: rgba(255,255,255,0.4); transition: background 0.2s ease;
}
.isc-card__pagination span.is-active { background: #fff; }

.isc-card__badge {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    background: var(--espresso); color: var(--white);
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em;
    padding: 3px 8px; border-radius: 2px; pointer-events: none;
}
.isc-card__oos-label {
    position: absolute; bottom: 10px; left: 10px; z-index: 3;
    background: rgba(33,33,33,0.72); color: #fff;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
    padding: 3px 8px; border-radius: 2px; pointer-events: none;
}
.isc-card--oos .isc-card__img { opacity: 0.55; }

.isc-card__cart-trigger {
    position: absolute; bottom: 10px; right: 10px; z-index: 4;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--white); border: 1px solid var(--border-brand);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--charcoal);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.isc-card__cart-trigger:hover {
    background: var(--espresso); color: var(--white);
    border-color: var(--espresso); transform: scale(1.08);
}
.isc-card__cart-trigger.isc-loading { pointer-events: none; }

.isc-card__sizes-panel {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
    background: rgba(61,46,40,0.93); padding: 10px;
    border-radius: 0 0 4px 4px;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
}
.isc-card__sizes-panel.isc-panel--open { transform: translateY(0); }
.isc-card__sizes-inner { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }

.isc-size-btn {
    position: relative;
    min-width: 42px; height: 34px; padding: 0 10px;
    background: transparent; border: 1.5px solid rgba(255,255,255,0.5);
    border-radius: 4px; color: #fff;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
    cursor: pointer; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.isc-size-btn:hover:not([disabled]) { background: rgba(255,255,255,0.18); border-color: #fff; }
.isc-size-btn--oos { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; }
.isc-size-btn[disabled]:not(.isc-size-btn--oos) { cursor: wait; }
.isc-size-btn__label { transition: opacity 0.12s ease; }
.isc-size-btn__loader {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.12s ease;
}
.isc-loading .isc-size-btn__loader { opacity: 1; }
.isc-loading .isc-size-btn__label  { opacity: 0; }
.isc-svg-spinner { animation: isc-spin 0.75s linear infinite; }
@keyframes isc-spin { to { transform: rotate(360deg); } }
.isc-size-btn__check {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.12s ease; font-size: 13px;
}
.isc-size-btn__check::after { content: "✓"; }
.isc-success .isc-size-btn__check  { opacity: 1; }
.isc-success .isc-size-btn__label,
.isc-success .isc-size-btn__loader { opacity: 0; }
.isc-success { background: rgba(255,255,255,0.18); border-color: #fff; }

.isc-card__info { padding: 0.65rem 0 0.5rem; text-align: center; }
.isc-card__title { font-size: 0.78rem; font-weight: 600; margin: 0 0 0.2rem; line-height: 1.3; color: var(--charcoal); }
.isc-card__title a { text-decoration: none; color: inherit; }
.isc-card__title a:hover { color: var(--espresso); }
.isc-card__price { font-size: 0.8rem; font-weight: 700; color: var(--charcoal); }
.isc-card__price del { color: var(--sand); font-weight: 400; margin-right: 3px; font-size: 0.72rem; }
.isc-card__price ins { text-decoration: none; color: var(--espresso); }


/* ═══════════════════════════════════════════════════════════
   ISC CART DRAWER
   ═══════════════════════════════════════════════════════════ */

.isc-cart-backdrop {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.32); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.isc-cart-backdrop--open { opacity: 1; pointer-events: auto; }

.isc-cart-drawer {
    position: fixed; top: 0; right: 0;
    width: 400px; max-width: 92vw; height: 100%;
    background: var(--white); z-index: 2001;
    box-shadow: -12px 0 40px rgba(61,46,40,0.12);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    display: flex; flex-direction: column;
}
.isc-cart-drawer--open { transform: translateX(0); }
.isc-cart-drawer__inner { height: 100%; display: flex; flex-direction: column; }

.isc-cart-drawer__header {
    padding: 1rem 1.25rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--border-brand);
}
.isc-cart-drawer__title {
    font-size: 0.75rem; font-weight: 900;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--charcoal); margin: 0;
}
.isc-cart-drawer__close {
    width: 32px; height: 32px; border-radius: 50%;
    background: none; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--charcoal); transition: background 0.2s ease;
}
.isc-cart-drawer__close:hover { background: rgba(209,188,178,0.3); }

.isc-cart-drawer__content {
    flex: 1; overflow-y: auto; padding: 1rem 1.25rem;
    overscroll-behavior: contain;
}

.isc-drawer-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.75rem; padding: 2.5rem 0; color: var(--sand); text-align: center;
}
.isc-drawer-empty svg { opacity: 0.35; }
.isc-drawer-empty p { font-size: 0.85rem; margin: 0; }
.isc-drawer-shop-link {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--espresso);
    text-decoration: underline; text-underline-offset: 3px;
}

.isc-drawer-items { display: flex; flex-direction: column; }
.isc-cart-item {
    display: flex; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--border-brand);
    transition: opacity 0.25s ease;
}
.isc-cart-item:last-child { border-bottom: none; }
.isc-cart-item__thumb {
    width: 72px; height: 90px; flex-shrink: 0;
    background: rgba(209,188,178,0.15); border-radius: 4px; overflow: hidden;
}
.isc-cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.isc-cart-item__info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.isc-cart-item__title {
    font-size: 0.78rem; font-weight: 600; color: var(--charcoal);
    text-decoration: none; line-height: 1.3; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.isc-cart-item__title:hover { color: var(--espresso); }
.isc-cart-item__meta { font-size: 0.75rem; color: var(--sand); }
.isc-cart-item__pricing { font-weight: 700; font-size: 0.8rem; color: var(--charcoal); margin-top: 2px; }
.isc-cart-item__pricing del { color: var(--sand); font-weight: 400; font-size: 0.75rem; margin-right: 3px; }
.isc-cart-item__pricing ins { text-decoration: none; color: var(--espresso); }
.isc-cart-item__footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto; padding-top: 4px;
}
.isc-cart-item__qty { font-size: 0.75rem; color: var(--sand); }
.isc-cart-item__remove {
    background: none; border: none; padding: 0;
    font-size: 0.75rem; color: var(--sand); cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
    transition: color 0.15s ease;
}
.isc-cart-item__remove:hover { color: var(--charcoal); }

.isc-cart-drawer__footer {
    padding: 1rem 1.25rem; flex-shrink: 0;
    border-top: 1px solid var(--border-brand);
    background: var(--white);
    box-shadow: 0 -6px 20px rgba(61,46,40,0.06);
}
.isc-drawer-subtotal {
    display: flex; align-items: center; flex-wrap: wrap;
    justify-content: space-between; gap: 6px; margin-bottom: 0.75rem;
}
.isc-drawer-subtotal__label { font-size: 0.8rem; font-weight: 600; color: var(--charcoal); }
.isc-drawer-subtotal__value { font-size: 1rem; font-weight: 800; color: var(--charcoal); }
.isc-drawer-save-badge {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em;
    color: var(--espresso); border: 1.5px solid var(--espresso);
    padding: 1px 6px; border-radius: 2px;
}
.isc-drawer-actions { display: flex; flex-direction: column; gap: 8px; }
.isc-drawer-btn {
    display: block; text-align: center; padding: 11px 16px;
    font-size: 0.75rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.1em;
    text-decoration: none; border-radius: 4px; transition: all 0.2s ease;
}
.isc-drawer-btn--outline { background: var(--white); color: var(--charcoal); border: 1.5px solid var(--charcoal); }
.isc-drawer-btn--outline:hover { background: var(--charcoal); color: var(--white); }
.isc-drawer-btn--filled { background: var(--espresso); color: var(--white); border: 1.5px solid var(--espresso); }
.isc-drawer-btn--filled:hover { background: var(--espresso-hover); transform: translateY(-1px); }

@media (max-width: 480px) {
    .isc-cart-drawer { width: 100%; max-width: 100%; }
}


/* =============================================================
   NEOVIA — UI/UX REFRESH (2026-06-11)
   Cible : jeune femme sportive — look "Modern Sport"
   Couche de surcharge : accessibilité, micro-interactions,
   typographie impactante, tap targets, motion-safe.
   ============================================================= */

/* --- 1. Accessibilité : focus visible partout -------------- */
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}
.btn:focus-visible,
.hero-main__cta:focus-visible,
.pd-atc-btn:focus-visible {
    box-shadow: var(--focus-ring), var(--shadow-md);
}

/* --- 2. Motion-safe : respect de prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- 3. Typographie "Power & Performance" ------------------ */
.hero-main__title {
    font-weight: 900;
    font-size: clamp(2.1rem, 8.5vw, 3.4rem);
    letter-spacing: -0.01em;
    line-height: 0.98;
}

.hero-main__eyebrow {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.hero-main__eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: currentColor;
    display: inline-block;
}

.hero-main__tagline {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.92;
}

.section-title,
.hm-category-carousel__title,
.hm-product-carousel__title,
.coll-header__title,
.tech-spotlight__title,
.newsletter__title {
    font-weight: 800;
    letter-spacing: 0.01em;
}

/* Eyebrows de section : barre d'accent sportive */
.coll-header__eyebrow,
.tech-spotlight__eyebrow,
.trust-proof__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}
.coll-header__eyebrow::before,
.tech-spotlight__eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--sand);
    display: inline-block;
}

/* --- 4. Boutons : pill + micro-interactions ----------------- */
.btn,
.hero-main__cta,
.pd-atc-btn {
    border-radius: var(--radius-pill);
    transition: background var(--transition), transform 0.18s ease, box-shadow var(--transition);
    will-change: transform;
}
.btn:hover { box-shadow: var(--shadow-md); }
.btn:active,
.hero-main__cta:active,
.pd-atc-btn:active { transform: translateY(0) scale(0.97); }

.hero-main__cta {
    transition: transform 0.18s ease, box-shadow var(--transition), opacity 0.2s;
}
.hero-main__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(33,33,33,0.25);
    opacity: 1;
}

/* --- 5. Cartes : zoom image + élévation au survol ----------- */
.hm-category-card__img-wrap { overflow: hidden; border-radius: var(--radius); }
.hm-category-card__img-wrap img,
.coll-card__img,
.product-card__img {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hm-category-card:hover .hm-category-card__img-wrap img,
.coll-card:hover .coll-card__img,
.product-card:hover .product-card__img {
    transform: scale(1.05);
}
.coll-card,
.hm-category-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.coll-card:hover { box-shadow: var(--shadow-lg); }

.coll-card__cta svg,
.hm-product-carousel__link svg {
    transition: transform 0.25s ease;
}
.coll-card:hover .coll-card__cta svg { transform: translateX(4px); }

/* --- 6. Badges plus lisibles -------------------------------- */
.hm-category-card__tag,
.coll-card__badge {
    font-size: 0.7rem;
    padding: 0.28rem 0.7rem;
    letter-spacing: 0.12em;
}

/* --- 7. Tap targets ≥ 44px (mobile sport = pouce en mouvement) */
.pd-swatch {
    width: 40px;
    height: 40px;
    min-width: 40px;
}
.pd-size-btn,
.isc-size-btn {
    min-width: 48px;
    min-height: 44px;
}
.pd-swatch:focus-visible,
.pd-size-btn:focus-visible,
.product-swatch:focus-visible,
.isc-size-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.pd-swatch.is-active,
.pd-swatch[aria-pressed="true"] {
    border-color: var(--charcoal);
    box-shadow: inset 0 0 0 2px var(--white);
}

/* --- 8. Annonce défilante (marquee sport) ------------------- */
.announcement-bar { overflow: hidden; padding: 0.45rem 0; }
.announcement-bar__track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: nv-marquee 28s linear infinite;
}
.announcement-bar__text {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    white-space: nowrap;
}
.announcement-bar__text::after {
    content: "•";
    opacity: 0.45;
}
@keyframes nv-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .announcement-bar__track { animation: none; justify-content: center; width: 100%; }
    .announcement-bar__text:nth-child(n+2) { display: none; }
    .announcement-bar__text::after { content: none; }
}

/* --- 9. Avis & confiance ------------------------------------ */
.testimonial-card {
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
}
.testimonial-card__quote { font-style: normal; }

.trust-proof__desc,
.newsletter__legal { color: var(--text-soft); }

/* --- 10. Formulaires : feedback focus ----------------------- */
.newsletter__form input:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible {
    outline: none;
    border-color: var(--sand);
    box-shadow: var(--focus-ring);
}

/* --- 11. Respiration entre sections ("modern feel") --------- */
section { padding-block: clamp(1.5rem, 4.5vw, 3.5rem); }
.hero-main { padding-block: 0; }

/* =============================================================
   PRODUCT CARD — wishlist heart + badges (all grids)
   ============================================================= */
.isc-card__badges {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
    pointer-events: none;
}
.isc-card__badge {
    position: static; top: auto; left: auto;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 2px;
}
.isc-card__badge--new  { background: var(--white); color: var(--espresso); box-shadow: var(--shadow-sm); }
.isc-card__badge--sale { background: var(--sale); color: var(--white); }

.isc-card__wishlist {
    position: absolute; top: 8px; right: 8px; z-index: 4;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.9); border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--charcoal);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.isc-card__wishlist:hover { transform: scale(1.08); }
.isc-card__wishlist.is-active { color: var(--sale); }
.isc-card__wishlist.is-active svg { fill: var(--sale); stroke: var(--sale); }

/* =============================================================
   PAGE: COLLECTION (catalogue GymShark style)
   ============================================================= */
.page--collection { --col-pad: clamp(1rem, 4vw, 2rem); }

/* Hero */
.col-hero {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ratio-media);
    max-height: 78vh;
    overflow: hidden;
    background: var(--bg-wash);
}
@media (min-width: 768px) { .col-hero { aspect-ratio: var(--ratio-banner); } }
.col-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.col-hero__overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: clamp(1.25rem, 5vw, 3rem) var(--col-pad);
    background: linear-gradient(to top, rgba(255,255,255,0.85) 10%, rgba(255,255,255,0) 100%);
}
.col-hero__title {
    font-family: var(--font-head);
    font-size: clamp(1.6rem, 6vw, 3rem);
    font-weight: 800; line-height: 1.05; color: var(--charcoal);
    max-width: 16ch;
}
.col-hero__sub {
    margin-top: 0.6rem;
    font-family: var(--font-head);
    font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    font-size: clamp(0.8rem, 2.5vw, 1rem); color: var(--charcoal);
}

/* Toolbar : Filter + Sort */
.col-toolbar {
    display: flex; align-items: stretch; justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem var(--col-pad);
    border-bottom: 1px solid var(--border-soft);
}
.col-toolbar__btn,
.col-toolbar__sort {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border-soft); border-radius: var(--radius);
    background: var(--white);
    font-family: var(--font-head); font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--charcoal);
    cursor: pointer; flex: 1; justify-content: center;
    min-height: 44px;
}
@media (min-width: 640px) { .col-toolbar__btn, .col-toolbar__sort { flex: 0 0 auto; min-width: 200px; } }
.col-toolbar__btn .col-toolbar__chevron { transition: transform 0.2s ease; margin-left: auto; }
.col-toolbar__btn.is-open .col-toolbar__chevron { transform: rotate(180deg); }
.col-toolbar__sort { padding-block: 0; }
.col-toolbar__select {
    border: none; background: transparent; cursor: pointer;
    font-family: var(--font-head); font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--charcoal);
    outline: none; padding: 0.65rem 0.25rem; flex: 1;
}

/* Filter panel */
.col-filter-panel {
    padding: 1.25rem var(--col-pad);
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-wash);
    display: flex; flex-direction: column; gap: 1.5rem;
}
.col-filter-panel__label { font-size: 0.8rem; font-weight: 700; margin-bottom: 0.6rem; color: var(--charcoal); }
.col-filter-panel__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.col-chip {
    padding: 0.4rem 0.9rem; border-radius: var(--radius-pill);
    border: 1px solid var(--border-soft); background: var(--white);
    font-size: 0.82rem; color: var(--charcoal); cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.col-chip.is-active { background: var(--espresso); color: var(--white); border-color: var(--espresso); }
.col-filter-panel__range { width: 100%; max-width: 320px; accent-color: var(--sand); }
.col-filter-panel__reset {
    align-self: flex-start; background: none; border: none;
    color: var(--sand); font-weight: 600; cursor: pointer; text-decoration: underline;
    font-size: 0.85rem; padding: 0;
}

/* Category tabs */
.col-tabs { border-bottom: 1px solid var(--border-soft); }
.col-tabs__list {
    display: flex; gap: 0.25rem; list-style: none; margin: 0;
    padding: 0 var(--col-pad);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.col-tabs__list::-webkit-scrollbar { display: none; }
.col-tab {
    position: relative; white-space: nowrap;
    padding: 0.9rem 0.75rem; background: none; border: none; cursor: pointer;
    font-family: var(--font-head); font-size: 0.9rem; font-weight: 700;
    color: var(--text-soft); transition: color 0.2s ease;
}
.col-tab.is-active { color: var(--charcoal); }
.col-tab.is-active::after {
    content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0;
    height: 2px; background: var(--charcoal);
}

/* Grid */
.col-grid { padding: var(--col-pad); }
@media (min-width: 768px) { .col-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
@media (min-width: 1200px) { .col-grid { grid-template-columns: repeat(4, 1fr); } }
.col-grid__empty, .col-noresults {
    grid-column: 1 / -1; text-align: center; color: var(--text-soft);
    padding: 3rem 1rem; font-size: 0.95rem;
}
.col-noresults { padding: 2rem 1rem; }

/* Rewards floating button */
.col-rewards {
    position: fixed; left: 1rem; bottom: 1rem; z-index: 60;
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.15rem; border-radius: var(--radius-pill);
    background: var(--charcoal); color: var(--white);
    font-family: var(--font-head); font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.04em; text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transition: transform 0.2s ease, background 0.2s ease;
}
.col-rewards:hover { transform: translateY(-2px); background: var(--espresso); }
@media (max-width: 767px) { .col-rewards { bottom: calc(1rem + env(safe-area-inset-bottom)); } }

/* =============================================================
   LANGUAGE SWITCHER (header)
   ============================================================= */
/* Rendu dans le pied de page (toutes tailles) et dans le menu mobile.
   Retiré du header : sur mobile il décalait le logo de l'axe et faisait
   un 5e élément dans une barre déjà chargée.

   color: inherit — la couleur vient du contexte, jamais du composant.
   Codé en dur en blanc, il devenait invisible dans le menu mobile de la
   home (fond blanc), qui n'est pas couvert par la surcharge .no-hero. */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: inherit;
}

.lang-switch__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 44px; /* zone tactile */
    padding: 0 2px;
    color: inherit;
    opacity: 0.45;
    text-decoration: none;
    transition: opacity var(--transition);
}

.lang-switch__opt:hover { opacity: 0.8; }

.lang-switch__opt.is-active {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.lang-switch__sep { opacity: 0.3; }

/* Pied de page : groupé avec le copyright, à l'opposé des moyens de paiement */
.footer__bottom-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.footer__bottom-left .lang-switch__opt { min-height: 32px; }

/* Entrée langue du menu mobile */
.mobile-menu__lang {
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
    margin-top: 1rem;
    color: var(--charcoal);
}

/* Les <a> du menu mobile héritent d'un border-bottom et d'un width: 100%
   pensés pour les entrées pleine largeur — sur EN et FR ça dessinait deux
   traits parasites sous les libellés. */
.mobile-menu__lang .lang-switch__opt {
    width: auto;
    padding: 0 2px;
    border-bottom: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

/* =========================================================================
   NEOVIA — Carte produit « pcard » (2026-08-27)
   Réf. : site/screenshot ref/ref produit.png
   Namespace .nv-pcard-* — n'entre pas en conflit avec .isc-card existante.
   ========================================================================= */

.nv-pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    font-family: var(--font-body);
}

/* ── Média ─────────────────────────────────────────────── */
.nv-pcard__media {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-wash);
}

.nv-pcard__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nv-pcard:hover .nv-pcard__img,
.nv-pcard:focus-within .nv-pcard__img {
    transform: scale(1.045);
}

/* Lien étendu : toute la carte est cliquable, sauf les boutons (z-index 2) */
.nv-pcard__link {
    text-decoration: none;
    color: inherit;
}

.nv-pcard__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ── Boutons d'action flottants ────────────────────────── */
.nv-pcard__action {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--white);
    color: var(--charcoal);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(33, 33, 33, 0.16);
    transition: transform 0.2s var(--transition), box-shadow 0.2s ease;
}

.nv-pcard__action:hover {
    transform: scale(1.09);
    box-shadow: 0 5px 16px rgba(33, 33, 33, 0.24);
}

.nv-pcard__action:active {
    transform: scale(0.95);
}

.nv-pcard__action:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), 0 2px 8px rgba(33, 33, 33, 0.16);
}

.nv-pcard__action svg {
    width: 45%;
    height: 45%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.nv-pcard__wish {
    top: 0.75rem;
    right: 0.75rem;
    width: 38px;
    height: 38px;
}

.nv-pcard__wish.is-active svg {
    fill: var(--charcoal);
}

.nv-pcard__bag {
    right: 0.85rem;
    bottom: 0.85rem;
    width: 48px;
    height: 48px;
}

/* ── Nuancier ──────────────────────────────────────────── */
.nv-pcard__swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.15rem;
}

.nv-pcard__swatch {
    position: relative;
    z-index: 2;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: var(--sw, #ccc);
    box-shadow: inset 0 0 0 1px rgba(33, 33, 33, 0.14);
    transition: box-shadow 0.2s ease;
}

/* Zone tactile ~34px sans impacter la mise en page */
.nv-pcard__swatch::before {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
}

/* État sélectionné : pastille → liseré blanc → anneau noir */
.nv-pcard__swatch[aria-checked='true'] {
    box-shadow:
        inset 0 0 0 1px rgba(33, 33, 33, 0.14),
        0 0 0 2px var(--white),
        0 0 0 3.5px var(--charcoal);
}

.nv-pcard__swatch:focus-visible {
    outline: none;
    box-shadow:
        inset 0 0 0 1px rgba(33, 33, 33, 0.14),
        0 0 0 2px var(--white),
        var(--focus-ring);
}

/* ── Texte ─────────────────────────────────────────────── */
.nv-pcard__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.nv-pcard__title {
    margin: 0;
    /* Réinitialisations : le composant doit rendre à l'identique quelle que
       soit la grille hôte, dont certaines mettent les h3 en capitales. */
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
    color: var(--charcoal);
    text-wrap: pretty;
}

.nv-pcard__color {
    font-size: 0.875rem;
    color: var(--text-soft);
}

.nv-pcard__price {
    margin-top: 0.3rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--charcoal);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .nv-pcard__img,
    .nv-pcard__action {
        transition: none;
    }
    .nv-pcard:hover .nv-pcard__img,
    .nv-pcard:focus-within .nv-pcard__img {
        transform: none;
    }
    .nv-pcard__action:hover,
    .nv-pcard__action:active {
        transform: none;
    }
}

/* =========================================================================
   NEOVIA — Grilles catalogue par catégorie (2026-08-27)
   Réf. : site/screenshot ref/ref page produit.png

   Surcharge la couche « PAGE: COLLECTION » plus haut : toolbar à deux
   blocs égaux, onglets-liens, grille 2 colonnes bord à bord sur mobile,
   et l'état « emplacement libre » de la carte .nv-pcard.
   ========================================================================= */

/* ── Gouttière unique ──────────────────────────────────────────
   Toolbar, onglets et grille partagent --col-pad. C'est la seule
   marge horizontale de la page : trois valeurs différentes (le cas
   avant) se voient immédiatement à l'œil, les bords ne s'alignent
   sur rien. */

/* ── Toolbar : deux blocs bordés de largeur égale ──────────── */
.page--collection .col-toolbar {
    gap: 0.75rem;
    padding: 0.9rem var(--col-pad);
    border-bottom: 1px solid var(--border-soft);
}

.page--collection .col-toolbar__btn,
.page--collection .col-toolbar__sort {
    flex: 1 1 50%;
    min-width: 0;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.9rem clamp(0.6rem, 3vw, 1rem);
    border: 1px solid var(--charcoal);
    border-radius: var(--radius);
    min-height: 56px;
}

@media (min-width: 640px) {
    .page--collection .col-toolbar__btn,
    .page--collection .col-toolbar__sort { flex: 0 0 clamp(240px, 26vw, 320px); }
}

/* Héros : plein cadre sur mobile, mais borné en desktop pour ne pas
   repousser la grille sous la ligne de flottaison. */
@media (min-width: 768px) {
    .page--collection .col-hero { max-height: 60vh; }
}

/* <picture> est inline par défaut, et un height:100% ne se résout pas contre
   une hauteur qui vient d'aspect-ratio : l'image se dimensionnait alors sur
   son propre ratio et laissait un vide en bas du héros (390x440 dans un cadre
   de 390x488). Le positionner en absolu lui donne un cadre définitif. */
.col-hero picture {
    display: block;
    position: absolute;
    inset: 0;
}

/* Héros sans visuel smartphone (onglet All) : simple bandeau texte sous 768px. */
@media (max-width: 767px) {
    .col-hero--text-mobile { aspect-ratio: auto; }
    .col-hero--text-mobile picture { display: none; }
    .col-hero--text-mobile .col-hero__overlay { position: static; background: none; }
}

.page--collection .col-toolbar__icon { flex: 0 0 auto; }

.page--collection .col-toolbar__label,
.page--collection .col-toolbar__select {
    flex: 1 1 auto;
    text-align: center;
    letter-spacing: 0.08em;
}

/* Le select natif porte son propre chevron : on le neutralise au profit
   du SVG, pour que les deux blocs soient rigoureusement identiques.

   min-width: 0 est indispensable : un <select> ne descend jamais sous la
   largeur de sa plus longue <option> (« Price: Low to High »), et comme
   tout élément flex il a min-width: auto par défaut. Sans ça il pousse le
   chevron hors du cadre — 30px de débordement à 390px, ce qui élargit le
   viewport de mise en page sur mobile et fait glisser TOUTE la page
   latéralement, header fixe compris. */
.page--collection .col-toolbar__select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
    padding: 0;
    text-align-last: center;
    text-overflow: ellipsis;
}

.page--collection .col-toolbar__chevron {
    flex: 0 0 auto;
    margin-left: 0;
    color: var(--charcoal);
}

.page--collection .col-toolbar__sort { position: relative; }

/* ── Panneau de filtres ────────────────────────────────────── */

/* Le panneau est rendu avec [hidden] et n'est ouvert que par le bouton
   FILTER. Sans cette règle, le `display: flex` déclaré plus haut bat la
   feuille de style du navigateur ([hidden] { display: none }) et le
   panneau reste ouvert en permanence. */
.col-filter-panel[hidden] { display: none; }

.col-chip--color {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.col-chip__dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--sw, #ccc);
    box-shadow: inset 0 0 0 1px rgba(33, 33, 33, 0.18);
}

.col-filter-panel__check {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--charcoal);
    cursor: pointer;
    min-height: 44px;
}

.col-filter-panel__check input { width: 18px; height: 18px; accent-color: var(--sand); }

/* ── Onglets catégorie (liens) ─────────────────────────────── */
.col-tabs__list .col-tab {
    display: block;
    text-decoration: none;
    font-size: 1rem;
    padding: 1rem 0.85rem;
}

.col-tabs__list .col-tab.is-active::after { left: 0.85rem; right: 0.85rem; }

/* ── Grille : 2 colonnes bord à bord sur mobile ────────────── */
/* minmax(0, 1fr) et non 1fr : une piste « 1fr » ne descend pas sous la
   largeur min-content de son contenu, et un titre long ferait alors
   déborder la grille hors de l'écran.

   align-items: start — une carte « emplacement libre » n'a pas de bloc
   texte ; sans ça elle s'étirerait sur la hauteur de la plus haute de
   sa rangée et son nuancier flotterait au milieu du vide. */
.col-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: 0.6rem;
    row-gap: 2rem;
    padding: 1.25rem var(--col-pad) 3rem;
}

@media (min-width: 768px) {
    .col-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 1rem;
        row-gap: 2.5rem;
        padding: 1.5rem var(--col-pad) 4rem;
    }
}

@media (min-width: 1200px) {
    .col-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Carte : ajustements réf. ──────────────────────────────── */
.col-grid .nv-pcard__media {
    aspect-ratio: var(--ratio-media);
    border-radius: 0;
}

@media (min-width: 768px) {
    .col-grid .nv-pcard__media { border-radius: var(--radius); }
}

.nv-pcard__badge {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.28rem 0.55rem;
    border-radius: 3px;
    background: var(--charcoal);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Le sac est le seul appel à l'action de la carte : il doit se lire
   d'un coup d'œil, contrairement au cœur qui reste discret. */
.col-grid .nv-pcard__bag svg { width: 55%; height: 55%; stroke-width: 1.8; }

/* Compteur de coloris surnuméraires (« +5 » sur la réf.) */
.nv-pcard__more {
    font-size: 0.8rem;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
    margin-left: 0.1rem;
}

/* Pastille en attente de coloris : contour pointillé, non interactive */
.nv-pcard__swatch--empty {
    display: inline-block;
    background: transparent;
    box-shadow: none;
    border: 1px dashed rgba(33, 33, 33, 0.28);
    cursor: default;
}

/* ── Prix ──────────────────────────────────────────────────── */
.nv-pcard__price ins { text-decoration: none; }

.nv-pcard__price del {
    margin-right: 0.4rem;
    color: var(--text-soft);
    font-weight: 400;
    text-decoration-thickness: 1px;
}

.nv-pcard__price--sale ins { color: var(--sale); }


/* ── Emplacement libre ─────────────────────────────────────── */

/* Contour pointillé plutôt que plein : ça se lit comme une place
   réservée, pas comme une carte dont l'image n'aurait pas chargé. */
.nv-pcard--slot .nv-pcard__media {
    background: transparent;
    border: 1px dashed rgba(33, 33, 33, 0.20);
    box-shadow: none;
}

.nv-pcard--slot .nv-pcard__swatches { opacity: 0.75; }

.nv-pcard--slot:hover .nv-pcard__img { transform: none; }

.nv-pcard__ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1rem;
    text-align: center;
    color: var(--text-soft);
}

.nv-pcard__ph-ref {
    font-family: var(--font-head);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--charcoal);
}

.nv-pcard__ph-hint {
    font-size: 0.72rem;
    line-height: 1.3;
    max-width: 16ch;
}

.nv-pcard--slot .nv-pcard__title,
.nv-pcard--slot .nv-pcard__color { color: var(--text-soft); }

/* =========================================================================
   NEOVIA — Espace Conseils (2026-08-28)
   Hub /conseils/, archives de thème et article.
   Namespace .adv-* — n'entre en conflit avec rien d'existant.
   ========================================================================= */

.page--advice,
.page--advice-single { --adv-pad: clamp(1rem, 4vw, 2rem); }

/* ── En-tête du hub ────────────────────────────────────────── */
.adv-head {
    padding: clamp(2rem, 7vw, 4rem) var(--adv-pad) clamp(1.25rem, 4vw, 2rem);
    max-width: var(--container);
    margin-inline: auto;
}

.adv-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-head);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sand);
}

/* Petite barre d'accent, comme les eyebrows du reste du site */
.adv-head__eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--sand);
}

.adv-head__title {
    margin-top: 0.6rem;
    font-family: var(--font-head);
    font-size: clamp(2rem, 7vw, 3.4rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--charcoal);
}

.adv-head__sub {
    margin-top: 0.75rem;
    max-width: 46ch;
    color: var(--text-soft);
    font-size: clamp(0.95rem, 2.4vw, 1.05rem);
    line-height: 1.6;
}

/* ── Onglets de thème ──────────────────────────────────────── */
.adv-tabs {
    border-bottom: 1px solid var(--border-soft);
    max-width: var(--container);
    margin-inline: auto;
}

.adv-tabs__list {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0 var(--adv-pad);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.adv-tabs__list::-webkit-scrollbar { display: none; }

.adv-tab {
    position: relative;
    display: block;
    white-space: nowrap;
    padding: 0.9rem 0.85rem;
    font-family: var(--font-head);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-soft);
    text-decoration: none;
    transition: color var(--transition);
}

.adv-tab:hover { color: var(--charcoal); }
.adv-tab.is-active { color: var(--charcoal); }

.adv-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0;
    height: 2px;
    background: var(--charcoal);
}

/* ── Bandeau « il faut un compte » ─────────────────────────── */
.adv-note {
    max-width: var(--container);
    margin: 1.25rem auto 0;
    padding: 0.85rem var(--adv-pad);
    background: var(--bg-wash);
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: var(--charcoal);
}

.adv-note a {
    color: var(--sand);
    font-weight: 600;
    text-underline-offset: 3px;
}

/* ── Grille d'articles ─────────────────────────────────────── */
.adv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding: clamp(1.5rem, 5vw, 2.5rem) var(--adv-pad) clamp(3rem, 8vw, 5rem);
    max-width: var(--container);
    margin-inline: auto;
}

@media (min-width: 600px) {
    .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    .adv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
}

/* ── Carte article ─────────────────────────────────────────── */
.adv-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.adv-card__media {
    display: block;
    aspect-ratio: var(--ratio-banner);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-wash);
}

.adv-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.adv-card:hover .adv-card__img { transform: scale(1.04); }

.adv-card__ph {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--text-soft);
}

.adv-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.adv-card__meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-family: var(--font-head);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.adv-card__topic { color: var(--sand); }
.adv-card__time  { color: var(--text-soft); font-weight: 600; letter-spacing: 0.06em; }

.adv-card__title {
    margin: 0;
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--charcoal);
    text-wrap: pretty;
}

.adv-card__title a { color: inherit; text-decoration: none; }
.adv-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.adv-card__excerpt {
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.6;
    text-wrap: pretty;
}

/* Emplacement libre — même motif que les grilles catalogue :
   un contour pointillé se lit comme une place réservée, pas comme
   une carte dont l'image aurait échoué. */
.adv-card--slot .adv-card__media {
    background: transparent;
    border: 1px dashed rgba(33, 33, 33, 0.20);
}

.adv-card--slot .adv-card__topic--slot { color: var(--text-soft); }

/* ── Pagination ────────────────────────────────────────────── */
.adv-pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--container);
    margin: 0 auto clamp(3rem, 8vw, 5rem);
    padding: 0 var(--adv-pad);
}

.adv-pager a {
    font-family: var(--font-head);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--charcoal);
    text-decoration: none;
    text-underline-offset: 4px;
}

.adv-pager a:hover { text-decoration: underline; }

/* =========================================================================
   Article
   ========================================================================= */

.adv-article {
    max-width: 46rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 5vw, 2.5rem) var(--adv-pad) clamp(3rem, 8vw, 5rem);
}

.adv-article__crumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-soft);
    margin-bottom: 1.5rem;
}

.adv-article__crumb a { color: inherit; text-decoration: none; }
.adv-article__crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

.adv-article__meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-family: var(--font-head);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.adv-article__title {
    margin-top: 0.7rem;
    font-family: var(--font-head);
    font-size: clamp(1.8rem, 5.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.12;
    color: var(--charcoal);
    text-wrap: balance;
}

.adv-article__media {
    margin: clamp(1.5rem, 5vw, 2.5rem) 0;
    aspect-ratio: var(--ratio-banner);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-wash);
}

.adv-article__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Corps de texte — mesure et rythme pensés pour la lecture longue */
.adv-article__body {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--charcoal);
}

.adv-article__body > * + * { margin-top: 1.15em; }

.adv-article__body h2 {
    margin-top: 2.2em;
    font-family: var(--font-head);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
}

.adv-article__body h3 {
    margin-top: 1.8em;
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}

.adv-article__body ul,
.adv-article__body ol { padding-left: 1.4em; }
.adv-article__body li + li { margin-top: 0.45em; }

.adv-article__body blockquote {
    padding-left: 1.2em;
    border-left: 3px solid var(--sand);
    color: var(--text-soft);
    font-style: italic;
}

.adv-article__body img { max-width: 100%; height: auto; border-radius: var(--radius); }

.adv-article__body a { color: var(--sand); text-underline-offset: 3px; }

.adv-article__lede { font-size: 1.1rem; line-height: 1.7; color: var(--charcoal); }

/* Aperçu verrouillé : le texte s'efface au lieu d'être coupé net */
.adv-article__body--locked {
    position: relative;
    max-height: 12rem;
    overflow: hidden;
}

.adv-article__body--locked::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 7rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white));
}

/* ── Mur membres ───────────────────────────────────────────── */
.adv-gate {
    margin-top: 1.5rem;
    padding: clamp(1.5rem, 5vw, 2.25rem);
    border-radius: var(--radius);
    background: var(--bg-wash);
    text-align: center;
}

.adv-gate__title {
    font-family: var(--font-head);
    font-size: clamp(1.15rem, 3.5vw, 1.4rem);
    font-weight: 800;
    color: var(--charcoal);
}

.adv-gate__text {
    margin: 0.6rem auto 1.25rem;
    max-width: 42ch;
    color: var(--text-soft);
    line-height: 1.6;
}

.adv-gate__btn { min-height: 48px; }

/* ── Suite de lecture ──────────────────────────────────────── */
.adv-more { margin-top: clamp(2.5rem, 8vw, 4rem); }

.adv-more__title {
    font-family: var(--font-head);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--charcoal);
}

.adv-grid--compact {
    padding: 1.25rem 0 0;
    gap: 1.5rem;
    max-width: none;
}

.adv-grid--compact .adv-card__title { font-size: 1rem; }

@media (min-width: 600px) {
    .adv-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .adv-card__img { transition: none; }
    .adv-card:hover .adv-card__img { transform: none; }
}

/* =========================================================================
   NEOVIA — Centre d'aide (2026-08-28)
   Mobile-first : tout ce qui suit vaut pour le téléphone, les media queries
   n'ajoutent que l'élargissement. Namespace .sup-*.
   ========================================================================= */

.page--support {
    --sup-pad: clamp(1rem, 4vw, 2rem);
    --sup-max: 54rem;
}

/* ── En-tête ───────────────────────────────────────────────── */
.sup-head {
    max-width: var(--sup-max);
    margin-inline: auto;
    padding: clamp(2rem, 7vw, 3.5rem) var(--sup-pad) clamp(1.5rem, 5vw, 2.5rem);
}

.sup-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-head);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sand);
}

.sup-head__eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--sand);
}

.sup-head__title {
    margin-top: 0.6rem;
    font-family: var(--font-head);
    font-size: clamp(1.9rem, 7vw, 3rem);
    font-weight: 800;
    line-height: 1.06;
    color: var(--charcoal);
    text-wrap: balance;
}

.sup-head__sub {
    margin-top: 0.7rem;
    max-width: 44ch;
    color: var(--text-soft);
    line-height: 1.6;
}

/* ── Recherche ─────────────────────────────────────────────── */
.sup-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: clamp(1.25rem, 4vw, 1.75rem);
    background: var(--white);
    border: 1px solid var(--charcoal);
    border-radius: var(--radius-pill);
    transition: box-shadow 0.2s ease;
}

.sup-search:focus-within { box-shadow: var(--focus-ring); }

.sup-search__icon {
    display: grid;
    place-items: center;
    width: 44px;
    flex: 0 0 auto;
    color: var(--charcoal);
}

.sup-search__icon svg { width: 20px; height: 20px; }

/* min-width: 0 — un input est un élément remplaçable avec une taille
   intrinsèque : sans ça il refuse de se réduire et déborde du cadre. */
.sup-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    padding: 1rem 0.25rem;
    font-family: var(--font-body);
    font-size: 1rem;      /* 16px : en dessous, iOS zoome au focus */
    color: var(--charcoal);
}

.sup-search__input::placeholder { color: var(--text-soft); }
.sup-search__input::-webkit-search-cancel-button { display: none; }

.sup-search__clear {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: 0.15rem;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 50%;
    color: var(--text-soft);
    cursor: pointer;
}

.sup-search__clear:hover { color: var(--charcoal); }
.sup-search__clear svg { width: 16px; height: 16px; }

.sup-search__status {
    margin-top: 0.75rem;
    min-height: 1.2em;
    font-size: 0.85rem;
    color: var(--text-soft);
}

/* ── Grille de catégories ──────────────────────────────────── */
.sup-cats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    max-width: var(--sup-max);
    margin-inline: auto;
    padding: 0 var(--sup-pad);
}

@media (min-width: 640px) {
    .sup-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}

.sup-cat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        'icon body'
        '.    count';
    gap: 0.25rem 0.9rem;
    padding: 1.1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--white);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.sup-cat:hover {
    border-color: var(--charcoal);
    transform: translateY(-2px);
}

.sup-cat:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.sup-cat__icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-wash);
    color: var(--charcoal);
}

.sup-cat__icon svg { width: 19px; height: 19px; }

.sup-cat__body { grid-area: body; display: flex; flex-direction: column; gap: 0.15rem; }

.sup-cat__title {
    font-family: var(--font-head);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--charcoal);
    text-wrap: pretty;
}

.sup-cat__intro {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-soft);
}

.sup-cat__count {
    grid-area: count;
    margin-top: 0.35rem;
    font-family: var(--font-head);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sand);
}

/* ── Sections ──────────────────────────────────────────────── */
.sup-sections {
    max-width: var(--sup-max);
    margin-inline: auto;
    padding: clamp(2rem, 6vw, 3rem) var(--sup-pad) 0;
}

.sup-section { margin-bottom: clamp(2rem, 6vw, 3rem); }

/* scroll-margin : sans lui, l'ancre d'une carte place le titre SOUS le
   header fixe. --header-h est mesuré en JS (initHeaderOffset). */
.sup-section { scroll-margin-top: calc(var(--header-h) + 1rem); }

.sup-section__title {
    font-family: var(--font-head);
    font-size: clamp(1.1rem, 3.5vw, 1.35rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--charcoal);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-soft);
}

/* ── Question / réponse ────────────────────────────────────── */
.sup-item { border-bottom: 1px solid var(--border-soft); }

.sup-item__heading { margin: 0; font: inherit; }

.sup-item__trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 56px;
    padding: 1.1rem 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--charcoal);
}

.sup-item__trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

.sup-item__q {
    font-family: var(--font-body);
    font-size: 0.97rem;
    font-weight: 500;
    line-height: 1.45;
    text-wrap: pretty;
}

/* Icône + / − dessinée en CSS : pas d'image à charger, et elle suit la
   couleur du texte. */
.sup-item__icon {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 0.15rem;
}

.sup-item__icon::before,
.sup-item__icon::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.3s var(--transition);
}

.sup-item__icon::after { transform: rotate(90deg); }
.sup-item.is-open .sup-item__icon::after { transform: rotate(0deg); }

/* Ouverture animée par grid-template-rows 0fr -> 1fr : la hauteur cible est
   celle du contenu réel, donc rien n'est jamais coupé — contrairement à un
   max-height fixe, qui tronque dès qu'une réponse dépasse. */
.sup-item__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* L'état est porté par .sup-item et non par un sélecteur frère du bouton :
   le déclencheur vit dans un <h3> (pour la structure de titres), donc le
   corps n'est pas son frère et « trigger + body » ne matcherait jamais. */
.sup-item.is-open .sup-item__body { grid-template-rows: 1fr; }

.sup-item__content {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 0.94rem;
    line-height: 1.7;
}

.sup-item__content > p { padding-bottom: 1.2rem; padding-right: 2rem; }

/* Repli sans JavaScript : rien ne pilote aria-expanded, donc tout reste
   ouvert et lisible plutôt que définitivement fermé. */
.no-js .sup-item__body { grid-template-rows: 1fr; }

/* Terme recherché mis en évidence */
.sup-mark {
    background: var(--bg-wash);
    color: var(--charcoal);
    border-radius: 2px;
    padding: 0 0.15em;
}

.sup-empty {
    padding: 2.5rem 0;
    text-align: center;
    color: var(--text-soft);
}

/* Masquage par la recherche — séparé de [hidden] pour rester lisible */
.sup-item.is-filtered,
.sup-section.is-filtered { display: none; }

/* ── Contact ───────────────────────────────────────────────── */
.sup-contact {
    max-width: var(--sup-max);
    margin: 0 auto clamp(3rem, 9vw, 5rem);
    padding: clamp(1.75rem, 6vw, 2.5rem) var(--sup-pad);
    text-align: center;
}

.sup-contact__title {
    font-family: var(--font-head);
    font-size: clamp(1.15rem, 4vw, 1.4rem);
    font-weight: 800;
    color: var(--charcoal);
}

.sup-contact__text {
    margin: 0.5rem auto 1.25rem;
    max-width: 40ch;
    color: var(--text-soft);
    line-height: 1.6;
}

.sup-contact__btn { min-height: 48px; }

@media (prefers-reduced-motion: reduce) {
    .sup-cat,
    .sup-item__body,
    .sup-item__icon::before,
    .sup-item__icon::after { transition: none; }
    .sup-cat:hover { transform: none; }
}

/* =========================================================================
   NEOVIA — Héros d'accueil : descendre sous le header (2026-08-28)

   Le header est en position:fixed et transparent sur l'accueil (.has-hero) :
   il se posait donc SUR la photo. Sur les visuels chargés (mur texturé,
   feuillage), le logo sombre et les icônes devenaient illisibles.

   On décale le héros de la hauteur réelle du header — --header-h est mesurée
   en JS (initHeaderOffset), donc le décalage suit toute retouche du header
   sans jamais redériver.
   ========================================================================= */
@media (max-width: 767px) {
    .page--home .hero-main { margin-top: var(--header-h); }
}


/* =========================================================================
   NEOVIA — Nappe de tailles sur carte catalogue (2026-08-28)

   Le sac passe de 48 à 36px peints — sa cible tactile reste à 44x44 grâce au
   ::before, la convention déjà employée par .nv-pcard__swatch::before — et il
   n'ajoute plus rien directement : il révèle une nappe qui glisse sur le bas
   du média. Une pastille = un ajout, taille ET coloris compris.

   PLACEMENT NON NÉGOCIABLE — fin de fichier. .nv-pcard__action (7197),
   .nv-pcard__bag (7248) et .col-grid .nv-pcard__bag svg (7544) sont à
   spécificité égale : seul l'ordre source les départage. Le bloc doit aussi
   passer après le @media (prefers-reduced-motion) de la ligne 7337, d'où sa
   re-déclaration en fin de bloc.

   Namespace .nv-pcard__sizes / .nv-pcard__size. Aucune règle .isc-* touchée :
   la carte de l'accueil (SPECIAL OFFERS) garde son panneau espresso.
   ========================================================================= */

/* ── Le sac rétrécit ───────────────────────────────────────── */
.nv-pcard__bag {
    right: 0.6rem;
    bottom: 0.6rem;
    width: 36px;
    height: 36px;
    z-index: 2;
}

/* 36 peints + 2x4 = 44 tactiles. Même technique que les pastilles de coloris :
   on n'introduit pas une seconde convention pour le même problème. */
.nv-pcard__bag::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
}

/* Bat .col-grid .nv-pcard__bag svg (l.7544, 55%) à spécificité égale, par
   position plus basse. L'icône garde sa taille optique dans un cercle plus
   petit : 52% de 36 = 18,7px. */
.col-grid .nv-pcard__bag svg { width: 52%; height: 52%; stroke-width: 1.7; }

/* CORRECTIF de la ligne 7209 : `transform 0.2s var(--transition)` se développe
   en `transform 0.2s 0.25s ease` — le second <time> d'un raccourci est le
   DÉLAI, pas la durée. Les boutons d'action attendaient donc 250 ms avant de
   réagir au survol et à l'appui. */
.nv-pcard__action {
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.18s ease;
}

/* Nappe ouverte : le sac s'efface mais reste dans le DOM, focusable, et son
   aria-expanded reste juste — Échap lui rend le focus. */
.nv-pcard.is-sizing .nv-pcard__bag { opacity: 0; pointer-events: none; }

/* Sans ça, le zoom d'image se déclencherait derrière la nappe ouverte. */
.nv-pcard.is-sizing .nv-pcard__img { transform: none; }


/* ── La nappe ──────────────────────────────────────────────── */
/* Blanc translucide + charbon : le registre de la carte. Le panneau espresso
   de .isc-card__sizes-panel jurerait ici, et son rayon 0 0 4px 4px ne
   correspond à aucun des rayons du média. */
.nv-pcard__sizes {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;                       /* cibles JOINTIVES : un appui décalé tombe
                                     toujours sur une taille, jamais dans le
                                     vide ni sur le lien étendu */
    padding: 5px 0;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -1px 0 var(--border-soft);

    /* Fermée : hors cadre ET hors arbre d'accessibilité. `visibility`, et non
       un simple translate, sort les pastilles de l'ordre de tabulation. Le
       délai la garde peinte le temps de l'animation de sortie. */
    visibility: hidden;
    transform: translateY(101%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0.28s;
}

@supports (backdrop-filter: blur(8px)) {
    .nv-pcard__sizes {
        background: rgba(255, 255, 255, 0.84);
        -webkit-backdrop-filter: blur(8px) saturate(1.1);
        backdrop-filter: blur(8px) saturate(1.1);
    }
}

.nv-pcard.is-sizing .nv-pcard__sizes {
    visibility: visible;
    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s;
}


/* ── Pastilles ─────────────────────────────────────────────── */
/* Arithmétique du pire cas — viewport 320px, .col-grid en 2 colonnes,
   --col-pad bloqué sur 1rem : carte = (320 - 32 - 9,6)/2 = 139,2px, donc
   cellule = 46,4 x 44px. Le plancher de 44px de large n'est atteint qu'à
   296px de viewport.
   Volontairement PAS .isc-size-btn : la couche « tap targets » lui impose
   min-width:48px, ce qui déborderait la cellule ; et la branche 2 de
   initCardInteractions la capterait pour aller chercher un .isc-card qui
   n'existe pas sur une .nv-pcard. */
.nv-pcard__size {
    position: relative;
    min-width: 0;                 /* un enfant de grille est en min-width:auto :
                                     « XXL » pourrait déborder sa piste et se
                                     faire clipper par l'overflow du média */
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--charcoal);
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

/* outline et non box-shadow : la nappe est ancrée à bottom:0 d'un
   .nv-pcard__media en overflow:hidden — un anneau extérieur sur la rangée du
   bas serait rogné. L'offset négatif le peint à l'intérieur. */
/* box-shadow:none neutralise l'anneau global de la ligne 6699 : son sélecteur
   passe par :where(), donc à spécificité 0-1-0, et notre règle gagne sur
   `outline` mais PAS sur `box-shadow` — les deux anneaux se superposaient. */
.nv-pcard__size:focus-visible {
    outline: 2px solid var(--espresso);
    outline-offset: -3px;
    box-shadow: none;
}

/* Le thème n'a aucun @media (hover) : sans ce garde, l'état survolé reste
   collé après un tap — le défaut déjà constaté sur .isc-card__cart-trigger. */
@media (hover: hover) and (pointer: fine) {
    .nv-pcard__size:hover:not(:disabled) {
        background: var(--espresso);
        color: var(--white);
    }
}

.nv-pcard__size:active:not(:disabled) {
    background: var(--espresso);
    color: var(--white);
}

.nv-pcard__size:disabled {
    color: var(--text-soft);
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Pendant la requête : toute la nappe est neutralisée, mais SANS attribut
   disabled — il ferait passer les pastilles disponibles en barré, ce qui se
   lirait comme une rupture de stock. */
.nv-pcard__sizes.is-locked .nv-pcard__size { pointer-events: none; }
.nv-pcard__sizes.is-locked .nv-pcard__size:not(.is-busy):not(.is-done) { opacity: 0.4; }

/* Le libellé s'efface, la marque prend sa place : la pastille ne change pas de
   taille, la grille ne bouge pas. */
.nv-pcard__size.is-busy,
.nv-pcard__size.is-done { color: transparent; text-decoration: none; }

.nv-pcard__size.is-busy::after,
.nv-pcard__size.is-done::after {
    position: absolute;
    color: var(--charcoal);
    font-size: 0.9rem;
    line-height: 1;
}

.nv-pcard__size.is-busy::after { content: '…'; }

.nv-pcard__size.is-done { background: var(--espresso); }
.nv-pcard__size.is-done::after {
    content: '✓';
    color: var(--white);
}


/* ── Respiration à partir de 768px ─────────────────────────── */
/* Carte = 224,9px en 3 colonnes : (224,9 - 12 - 4)/3 = 69,6px. */
@media (min-width: 768px) {
    .nv-pcard__sizes { padding: 6px; gap: 2px; }
    .nv-pcard__size  { font-size: 0.75rem; border-radius: 4px; }
}

/* Une seule rangée seulement à partir de 1400px (carte 332px, cellule 51,7px).
   PAS à 1200px : la carte y fait 272px et six colonnes tomberaient à 41,7px,
   sous le plancher de 44. */
@media (min-width: 1400px) {
    .nv-pcard__sizes { grid-template-columns: repeat(6, 1fr); }
}


/* ── Emplacement libre ─────────────────────────────────────── */
/* La garde PHP est déjà en place ; ceinture et bretelles. */
.nv-pcard--slot .nv-pcard__sizes { display: none; }


/* ── Mouvement réduit ──────────────────────────────────────── */
/* Re-déclaré ici : le bloc de la ligne 7337 est plus haut dans le fichier et
   serait écrasé par la correction de transition ci-dessus. */
@media (prefers-reduced-motion: reduce) {
    .nv-pcard__action { transition: none; }
    .nv-pcard__action:hover,
    .nv-pcard__action:active { transform: none; }
    .nv-pcard__size { transition: none; }
    .nv-pcard__sizes,
    .nv-pcard.is-sizing .nv-pcard__sizes { transition: visibility 0s; }
}