/* =============================================================
   SKI MARSEILLE — woocommerce.css
   Styles de la boutique WooCommerce dans l'esprit du thème.
   Dépend de main.css (variables CSS héritées).
   ============================================================= */

/* ---------------------------------------------------------------
   0. RESET DES STYLES PAR DÉFAUT DE WOOCOMMERCE
   WooCommerce applique float + width% sur li.product.
   On neutralise avec une spécificité supérieure + !important.
   --------------------------------------------------------------- */

/* Forcer notre grid — spécificité élevée pour battre WC */
.woocommerce ul.products.shop-products-grid,
.woocommerce-page ul.products.shop-products-grid {
    display: grid !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Neutraliser float/width sur chaque li.product */
.woocommerce ul.products.shop-products-grid li.product,
.woocommerce-page ul.products.shop-products-grid li.product,
.shop-products-grid li.product {
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

/* Désactive les ::before/::after clearfix WooCommerce */
ul.products::before,
ul.products::after {
    display: none !important;
}

/* ---------------------------------------------------------------
   1. BANDEAU BOUTIQUE (.shop-banner)
   --------------------------------------------------------------- */
.shop-banner {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-primary);
}

.shop-banner__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    transition: transform 8s ease;
}
.shop-banner:hover .shop-banner__bg { transform: scale(1.03); }

.shop-banner__bg--default {
    background-image:
        linear-gradient(135deg, var(--color-primary) 0%, #1a3f6f 40%, #0d47a1 80%, var(--color-primary-light) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.shop-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 35, 66, .5) 0%,
        rgba(10, 35, 66, .72) 100%
    );
}

.shop-banner__content {
    position: relative;
    z-index: 1;
    padding-block: var(--space-2xl) var(--space-xl);
    color: var(--color-white);
}

.shop-banner__eyebrow {
    display: block;
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
    margin-bottom: var(--space-sm);
}

.shop-banner__title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-white) !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
    margin-bottom: var(--space-md) !important;
    line-height: 1.15;
}

.shop-banner__desc {
    font-size: 1rem;
    color: rgba(255,255,255,.8);
    max-width: 60ch;
    margin-bottom: var(--space-md);
    line-height: 1.6;
    text-align: left;
}

/* Fil d'Ariane */
.shop-breadcrumb {
    font-size: .8rem;
    color: rgba(255,255,255,.6);
    margin-top: var(--space-sm);
}
.shop-breadcrumb .shop-breadcrumb__item a {
    color: rgba(255,255,255,.75);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.shop-breadcrumb .shop-breadcrumb__item a:hover {
    color: var(--color-white);
}
.shop-breadcrumb .shop-breadcrumb__sep {
    margin-inline: .35rem;
    opacity: .5;
}

/* ---------------------------------------------------------------
   2. SIDEBAR CATÉGORIES (.shop-sidebar)
   --------------------------------------------------------------- */
.shop-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

.shop-sidebar {
    position: sticky;
    top: calc(var(--total-header-h) + var(--space-lg));
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.shop-sidebar__title {
    font-family: var(--font-heading);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-accent);
}

.shop-sidebar__list,
.shop-sidebar__children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-sidebar__children {
    padding-left: var(--space-md);
    margin-top: var(--space-xs);
}

.shop-sidebar__item,
.shop-sidebar__child-item {
    margin-bottom: 2px;
}

.shop-sidebar__link,
.shop-sidebar__child-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: .38rem var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: .875rem;
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.shop-sidebar__child-link {
    font-size: .82rem;
    color: var(--color-text-muted);
}

.shop-sidebar__link:hover,
.shop-sidebar__child-link:hover {
    background: var(--color-snow, #f4f7fb);
    color: var(--color-primary);
}

.shop-sidebar__item.is-active > .shop-sidebar__link,
.shop-sidebar__child-item.is-active > .shop-sidebar__child-link {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
}

.shop-sidebar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    font-size: .7rem;
    font-weight: 600;
    background: rgba(0,0,0,.08);
    border-radius: 100px;
    flex-shrink: 0;
}
.is-active > .shop-sidebar__link .shop-sidebar__count,
.is-active > .shop-sidebar__child-link .shop-sidebar__count {
    background: rgba(255,255,255,.25);
}

.shop-main {
    min-width: 0;
}

/* ---------------------------------------------------------------
   3. ZONE PRINCIPALE (.shop-wrap)
   --------------------------------------------------------------- */
.shop-wrap {
    padding-block: var(--space-2xl) var(--space-3xl);
    background: var(--color-bg);
}

/* ---------------------------------------------------------------
   4. BARRE D'OUTILS (.shop-toolbar)
   --------------------------------------------------------------- */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.shop-toolbar__left { flex: 1; }
.shop-toolbar__right { display: flex; align-items: center; gap: var(--space-md); }

/* Compteur résultats */
.shop-result-count {
    font-size: .875rem;
    color: var(--color-text-muted);
    margin: 0;
    text-align: left;
}

/* Sélecteur de tri */
.shop-orderby {
    margin: 0;
}

.shop-orderby__wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .4rem .75rem;
    background: var(--color-white);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.shop-orderby__wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(21,101,192,.15);
}

.shop-orderby__icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.shop-orderby__select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    font-family: var(--font-heading);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text);
    cursor: pointer;
    padding-right: var(--space-lg);
    outline: none;
}

.shop-orderby__chevron {
    position: absolute;
    right: .6rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* ---------------------------------------------------------------
   5. GRILLE PRODUITS (.shop-products-grid)
   auto-fill + min 250px / max 1fr :
   - 1 produit  → carte ~250-320px (pas pleine page)
   - 4 produits → 4 colonnes sur 1200px
   --------------------------------------------------------------- */
.shop-products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: var(--space-xl);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Limite la largeur max d'une carte (évite 1 carte = toute la page) */
.shop-product-card {
    max-width: 360px;
}

@media (max-width: 768px) {
    .shop-products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: var(--space-md); }
    .shop-product-card  { max-width: none; }
}
@media (max-width: 480px) {
    .shop-products-grid { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------
   6. CARTE PRODUIT (.shop-product-card)
   --------------------------------------------------------------- */
.shop-product-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    position: relative;
}
.shop-product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Lien englobant toute la carte */
.shop-product-card__inner {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* Zone image */
.shop-product-card__media {
    position: relative;
    overflow: hidden;
    background: var(--color-snow);
    aspect-ratio: 4 / 3;
}

.shop-product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    display: block;
}
.shop-product-card:hover .shop-product-card__img {
    transform: scale(1.06);
}

/* Placeholder si pas d'image */
.shop-product-card__no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    background: var(--color-snow);
}

/* Badges overlay */
.shop-product-card__badges {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.shop-product-card__badge {
    display: inline-block;
    padding: .2em .65em;
    font-family: var(--font-heading);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-radius: 100px;
    line-height: 1.5;
}
.shop-product-card__badge--ski {
    background: #dbeafe;
    color: #1e3a8a;
}
.shop-product-card__badge--rando {
    background: #dcfce7;
    color: #14532d;
}
.shop-product-card__badge--handi {
    background: #ffedd5;
    color: #7c2d12;
}
.shop-product-card__badge--shop {
    background: rgba(10,35,66,.75);
    color: var(--color-white);
}

/* Badge statut (promo / épuisé) */
.shop-product-card__status {
    display: inline-block;
    padding: .2em .65em;
    font-family: var(--font-heading);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-radius: 100px;
    line-height: 1.5;
}
.shop-product-card__status--sale {
    background: var(--color-accent);
    color: var(--color-white);
}
.shop-product-card__status--soldout {
    background: rgba(107,114,128,.8);
    color: var(--color-white);
}

/* Corps de la carte */
.shop-product-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    gap: var(--space-sm);
    /* Rupture de stock en bas */
    justify-content: flex-start;
}

/* Titre */
.shop-product-card__title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.25;
    margin: 0 !important;
    transition: color var(--transition-fast);
}
.shop-product-card:hover .shop-product-card__title {
    color: var(--color-primary-light);
}

/* Description courte */
.shop-product-card__desc {
    font-size: .82rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    text-align: left;
    flex: 1;
    margin: 0;
}

/* Prix */
.shop-product-card__price {
    margin-top: var(--space-xs);
}
.shop-product-card__price .price {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-accent);
}
.shop-product-card__price .price del {
    color: var(--color-text-muted);
    font-size: .875rem;
    font-weight: 400;
    margin-right: var(--space-xs);
    text-decoration: line-through;
    opacity: .7;
}
.shop-product-card__price .price ins {
    text-decoration: none;
    color: var(--color-accent);
}

/* Label rupture de stock */
.shop-product-card__soldout-label {
    display: block;
    font-size: .78rem;
    font-family: var(--font-heading);
    color: var(--color-text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: auto;
    padding-top: var(--space-sm);
}

/* ---------------------------------------------------------------
   7. PAGINATION (.shop-pagination)
   --------------------------------------------------------------- */
.shop-pagination {
    margin-top: var(--space-2xl);
    display: flex;
    justify-content: center;
}

.shop-pagination .page-numbers {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.shop-pagination .page-numbers li {
    display: flex;
}

.shop-pagination .page-numbers a,
.shop-pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-sm);
    font-family: var(--font-heading);
    font-size: .875rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-border);
    color: var(--color-text);
    background: var(--color-white);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.shop-pagination .page-numbers a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-snow);
}

.shop-pagination .page-numbers .current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.shop-pagination .page-numbers .prev,
.shop-pagination .page-numbers .next {
    border-color: var(--color-border);
}
.shop-pagination .page-numbers .prev:hover,
.shop-pagination .page-numbers .next:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.shop-pagination .page-numbers .dots {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
   8. MESSAGE "AUCUN PRODUIT"
   --------------------------------------------------------------- */
.woocommerce-info,
.woocommerce-NoUpdateNotice,
.woocommerce-message {
    background: var(--color-snow);
    border-left: 4px solid var(--color-primary-light);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    font-size: .95rem;
    color: var(--color-text);
    list-style: none;
    margin-bottom: var(--space-xl);
}

.woocommerce-error {
    background: #fff0ee;
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    font-size: .95rem;
    color: var(--color-text);
    list-style: none;
    margin-bottom: var(--space-xl);
}

/* ---------------------------------------------------------------
   9. NOTICE "AJOUTÉ AU PANIER" (FLASH)
   --------------------------------------------------------------- */
/* Réinitialise le <ul> généré par WooCommerce */
.woocommerce-notices-wrapper .woocommerce-messages {
    list-style: none;
    padding:    0;
    margin:     0;
}
/* Le <li class="woocommerce-message"> */
.woocommerce-notices-wrapper .woocommerce-message {
    display:      flex;
    align-items:  center;
    gap:          var(--space-md);
    background:   #f0fdf4;
    border-color: var(--color-rando);
    padding:      var(--space-md) var(--space-lg);
}
/* Cache l'icône WooCommerce native (font-icon mal positionnée avec flex) */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper li.woocommerce-message::before,
.woocommerce-notices-wrapper ul.woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-messages li::before {
    display: none !important;
    content:  ''  !important;
}
.woocommerce-notices-wrapper .woocommerce-message a.button {
    margin-left: auto;
    padding: .4rem .9rem;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.woocommerce-notices-wrapper .woocommerce-message a.button:hover {
    background: var(--color-primary-light);
}

/* ---------------------------------------------------------------
   10. RESPONSIVE TOOLBAR
   --------------------------------------------------------------- */
@media (max-width: 640px) {
    .shop-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .shop-toolbar__right { width: 100%; justify-content: flex-end; }

    .shop-banner {
        min-height: 200px;
    }
    .shop-banner__title {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }
}

@media (max-width: 768px) {
    .shop-layout {
        grid-template-columns: 1fr;
    }
    .shop-sidebar {
        position: static;
    }
}

/* =============================================================
   PAGE PRODUIT UNIQUE (single-product.php)
   ============================================================= */

/* ---------------------------------------------------------------
   SP-1. BANDEAU PRODUIT (.sp-banner)
   --------------------------------------------------------------- */
.sp-banner {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-primary);
}

.sp-banner__bg--default {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, var(--color-primary) 0%, #1a3f6f 40%, #0d47a1 80%, var(--color-primary-light) 100%);
}

.sp-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10,35,66,.45) 0%, rgba(10,35,66,.68) 100%);
}

.sp-banner__content {
    position: relative;
    z-index: 1;
    padding-block: var(--space-xl) var(--space-lg);
    color: var(--color-white);
}

/* Fil d'Ariane */
.sp-breadcrumb {
    font-size: .78rem;
    color: rgba(255,255,255,.6);
    margin-bottom: var(--space-sm);
}
.sp-breadcrumb .sp-breadcrumb__item a {
    color: rgba(255,255,255,.75);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.sp-breadcrumb .sp-breadcrumb__item a:hover { color: var(--color-white); }
.sp-breadcrumb .sp-breadcrumb__sep { margin-inline: .3rem; opacity: .45; }

.sp-banner__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

/* Badges catégorie / statut */
.sp-badge {
    display: inline-block;
    padding: .22em .75em;
    font-family: var(--font-heading);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-radius: 100px;
    text-decoration: none;
    line-height: 1.5;
    transition: opacity var(--transition-fast);
}
.sp-badge--ski   { background: #dbeafe; color: #1e3a8a; }
.sp-badge--rando { background: #dcfce7; color: #14532d; }
.sp-badge--handi { background: #ffedd5; color: #7c2d12; }
.sp-badge--shop  { background: rgba(255,255,255,.18); color: var(--color-white); }
.sp-badge--sale  { background: var(--color-accent); color: var(--color-white); }
.sp-badge--soldout { background: rgba(107,114,128,.75); color: var(--color-white); }

.sp-banner__title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 700;
    color: var(--color-white) !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-shadow: 0 2px 10px rgba(0,0,0,.3);
    margin: 0 !important;
    line-height: 1.15;
}

/* ---------------------------------------------------------------
   SP-2. ZONE PRINCIPALE : galerie + résumé
   --------------------------------------------------------------- */
.sp-main {
    background: var(--color-bg);
    padding-block: var(--space-2xl) var(--space-3xl);
}

.sp-main__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

@media (max-width: 860px) {
    .sp-main__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ---------------------------------------------------------------
   SP-3. GALERIE (.sp-gallery)
   --------------------------------------------------------------- */
.sp-gallery {
    position: sticky;
    top: calc(var(--total-header-h) + var(--space-xl));
}

.sp-gallery__main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    aspect-ratio: 1 / 1;
    position: relative;
}

.sp-gallery__slide {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}
.sp-gallery__slide--active { display: flex; }

.sp-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-md);
}

/* Placeholder */
.sp-gallery__main--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-gallery__no-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    color: var(--color-text-muted);
    font-size: .875rem;
}

/* Miniatures */
.sp-gallery__thumbs {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

.sp-gallery__thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--color-border);
    background: var(--color-white);
    cursor: pointer;
    padding: 0;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    flex-shrink: 0;
}
.sp-gallery__thumb:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}
.sp-gallery__thumb--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(21,101,192,.2);
}

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

/* Flèches de navigation carrousel */
.sp-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.9);
    border: 1.5px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-primary);
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
    padding: 0;
}
.sp-gallery__arrow--prev { left: var(--space-sm); }
.sp-gallery__arrow--next { right: var(--space-sm); }
.sp-gallery__arrow:hover {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

/* Compteur d'images */
.sp-gallery__counter {
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-sm);
    background: rgba(10,35,66,.65);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    padding: .2em .65em;
    border-radius: 100px;
    line-height: 1.5;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* ---------------------------------------------------------------
   SP-4. RÉSUMÉ (.sp-summary)
   --------------------------------------------------------------- */
.sp-summary {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Prix */
.sp-summary__price .price {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
}
.sp-summary__price .price del {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-text-muted);
    text-decoration: line-through;
    opacity: .7;
    margin-right: var(--space-sm);
}
.sp-summary__price .price ins {
    text-decoration: none;
    color: var(--color-accent);
}

/* Courte description */
.sp-summary__short-desc {
    font-size: .95rem;
    color: var(--color-text);
    line-height: 1.7;
}
.sp-summary__short-desc p { text-align: left; margin-bottom: var(--space-sm); }
.sp-summary__short-desc p:last-child { margin-bottom: 0; }

/* Séparateur */
.sp-summary__sep {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0;
}

/* Formulaire add-to-cart WooCommerce */
.sp-summary__cart .quantity {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
/* Rend le label "Quantité" visible (WC lui met .screen-reader-text par défaut) */
.sp-summary__cart .quantity label,
.sp-summary__cart .quantity .screen-reader-text {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    overflow: visible !important;
    margin: 0 !important;
    font-family: var(--font-heading);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.sp-summary__cart .quantity input[type="number"] {
    width: 72px;
    height: 44px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-white);
    padding: 0 var(--space-sm);
    transition: border-color var(--transition-fast);
    -moz-appearance: textfield;
}
.sp-summary__cart .quantity input[type="number"]::-webkit-outer-spin-button,
.sp-summary__cart .quantity input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.sp-summary__cart .quantity input[type="number"]:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(21,101,192,.15);
}

/* Bouton Ajouter au panier (WC injecte .single_add_to_cart_button) */
.sp-summary__cart .single_add_to_cart_button,
.sp-summary__cart button[type="submit"] {
    display: block;
    width: 100%;
    padding: .85rem 1.5rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-base), transform var(--transition-fast);
    text-align: center;
}
.sp-summary__cart .single_add_to_cart_button:hover,
.sp-summary__cart button[type="submit"]:hover {
    background: var(--color-accent);
    transform: translateY(-2px);
}
.sp-summary__cart .single_add_to_cart_button:active { transform: translateY(0); }

/* ── Formulaire variations WooCommerce ──────────────────────
   WC génère : table.variations > tbody > tr > th.label + td.value > select
   On réinitialise le tableau et on affiche les lignes en colonne.
   ─────────────────────────────────────────────────────────── */

/* Masquer le style tableau natif */
.sp-summary__cart .variations {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    border: none;
    width: 100%;
    margin-bottom: var(--space-md);
}
.sp-summary__cart .variations tbody,
.sp-summary__cart .variations tr {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* Label : toujours visible, style Oswald */
.sp-summary__cart .variations th.label {
    display: block;
    padding: 0;
    border: none;
    width: auto;
    font-family: var(--font-heading);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.sp-summary__cart .variations th.label label {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: default;
    display: block;
}

/* Cellule valeur */
.sp-summary__cart .variations td.value {
    display: block;
    padding: 0;
    border: none;
    width: auto;
    position: relative;
}

/* Select uniforme – même style que quantity input */
.sp-summary__cart .variations td.value select,
.sp-summary__cart .variations td.value .wc-variation-selection-needed {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 2.5rem 0 var(--space-md);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.sp-summary__cart .variations td.value select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(21,101,192,.15);
}
.sp-summary__cart .variations td.value select:hover {
    border-color: var(--color-primary-light);
}

/* Lien « Effacer » la variation */
.sp-summary__cart .reset_variations {
    display: inline-block;
    margin-top: var(--space-xs);
    font-size: .78rem;
    color: var(--color-text-muted);
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--transition-fast);
}
.sp-summary__cart .reset_variations:hover { color: var(--color-accent); }

/* Zone variation dynamique (prix + bouton injectés par WC) */
.sp-summary__cart .single_variation_wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}
.sp-summary__cart .single_variation_wrap .woocommerce-variation-price .price {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-accent);
}
.sp-summary__cart .single_variation_wrap .woocommerce-variation-price .price del {
    font-size: 1rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
    opacity: .7;
    margin-right: var(--space-xs);
}
.sp-summary__cart .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Message rupture */
.sp-summary__soldout {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: #f3f4f6;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-text-muted);
    font-size: .9rem;
    color: var(--color-text-muted);
}

/* Méta (SKU, catégories, tags) */
.sp-summary__meta {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.sp-summary__meta-item {
    font-size: .82rem;
    color: var(--color-text-muted);
    margin: 0;
    text-align: left;
}
.sp-summary__meta-item a {
    color: var(--color-primary-light);
    text-decoration: none;
}
.sp-summary__meta-item a:hover { color: var(--color-primary); }
.sp-summary__meta-label {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-right: .3em;
}

/* ---------------------------------------------------------------
   SP-5. ONGLETS (.sp-tabs-section)
   --------------------------------------------------------------- */
.sp-tabs-section {
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding-bottom: var(--space-3xl);
}

/* Barre d'onglets */
.sp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-2xl);
    overflow-x: auto;
    scrollbar-width: none;
}
.sp-tabs::-webkit-scrollbar { display: none; }

.sp-tabs__tab {
    padding: var(--space-lg) var(--space-xl);
    font-family: var(--font-heading);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.sp-tabs__tab:hover { color: var(--color-primary); }
.sp-tabs__tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Panneaux */
.sp-tab-panel { display: none; }
.sp-tab-panel--active { display: block; }

.sp-tab-panel__content {
    max-width: 760px;
    line-height: 1.8;
    font-size: .97rem;
    color: var(--color-text);
}
.sp-tab-panel__content p { text-align: left; margin-bottom: var(--space-md); }
.sp-tab-panel__content h2,
.sp-tab-panel__content h3,
.sp-tab-panel__content h4 {
    margin-top: var(--space-xl) !important;
    margin-bottom: var(--space-md) !important;
}
.sp-tab-panel__content ul,
.sp-tab-panel__content ol {
    list-style: disc;
    padding-left: 1.5em;
    margin-bottom: var(--space-md);
}

/* Tableau attributs */
.sp-attrs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.sp-attrs-table__row {
    border-bottom: 1px solid var(--color-border);
}
.sp-attrs-table__row:last-child { border-bottom: none; }
.sp-attrs-table__label {
    padding: var(--space-md) var(--space-lg) var(--space-md) 0;
    font-family: var(--font-heading);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text);
    width: 35%;
    vertical-align: top;
}
.sp-attrs-table__value {
    padding: var(--space-md) 0;
    color: var(--color-text-muted);
    vertical-align: top;
}

/* ---------------------------------------------------------------
   SP-6. RESPONSIVE MOBILE
   --------------------------------------------------------------- */
@media (max-width: 860px) {
    .sp-gallery { position: static; }
    .sp-summary { padding: var(--space-xl); }
    .sp-tabs__tab { padding: var(--space-md) var(--space-lg); font-size: .85rem; }
}

@media (max-width: 480px) {
    .sp-gallery__thumbs { gap: var(--space-xs); }
    .sp-gallery__thumb  { width: 56px; height: 56px; }
    .sp-summary__price .price { font-size: 1.6rem; }
}

/* ---------------------------------------------------------------
   SP-7. LIGHTBOX GALERIE PRODUIT
   --------------------------------------------------------------- */

/* Curseur zoom sur les slides cliquables */
.sp-gallery__slide {
    cursor: zoom-in;
}

/* Overlay plein écran */
.sp-lightbox {
    position:        fixed;
    inset:           0;
    z-index:         9999;
    background:      rgba(0, 0, 0, .88);
    display:         flex;
    align-items:     center;
    justify-content: center;
    animation:       sp-lb-in .18s ease;
}
.sp-lightbox[hidden] {
    display: none;
}
@keyframes sp-lb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Image */
.sp-lightbox__wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    max-width:       90vw;
    max-height:      90vh;
}
.sp-lightbox__img {
    max-width:     90vw;
    max-height:    90vh;
    object-fit:    contain;
    border-radius: var(--radius-sm);
    box-shadow:    0 8px 48px rgba(0, 0, 0, .7);
    display:       block;
}

/* Bouton fermer — coin supérieur droit */
.sp-lightbox__close {
    position:      absolute;
    top:           1rem;
    right:         1rem;
    background:    rgba(255, 255, 255, .15);
    border:        none;
    border-radius: 50%;
    width:         44px;
    height:        44px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         #fff;
    cursor:        pointer;
    transition:    background var(--transition-fast);
    z-index:       1;
}
.sp-lightbox__close:hover,
.sp-lightbox__close:focus-visible {
    background: rgba(255, 255, 255, .3);
    outline:    none;
}

/* Boutons de navigation précédent / suivant */
.sp-lightbox__nav {
    position:      absolute;
    top:           50%;
    transform:     translateY(-50%);
    background:    rgba(255, 255, 255, .15);
    border:        none;
    border-radius: 50%;
    width:         52px;
    height:        52px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         #fff;
    cursor:        pointer;
    transition:    background var(--transition-fast);
    z-index:       1;
}
.sp-lightbox__nav--prev { left:  1rem; }
.sp-lightbox__nav--next { right: 1rem; }
.sp-lightbox__nav:hover,
.sp-lightbox__nav:focus-visible {
    background: rgba(255, 255, 255, .3);
    outline:    none;
}
.sp-lightbox__nav[hidden] {
    display: none;
}

@media (max-width: 600px) {
    .sp-lightbox__nav--prev { left:  .4rem; }
    .sp-lightbox__nav--next { right: .4rem; }
}