/* Options premium de la boutique (ShopTheme.Classes), par-dessus le gabarit et les réglages fins : chargé en dernier.
   En-tête et pied de page redéfinissent les variables (--ink, --muted, --line...) pour que les styles des gabarits suivent. */

/* ---------- Bandeau d'annonce ---------- */

.shop.ann-marquee .shop-announce {
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
}

    .shop.ann-marquee .shop-announce span {
        display: inline-block;
        padding-left: 100%;
        animation: shop-ann 24s linear infinite;
    }

@keyframes shop-ann {
    to { transform: translateX(-100%); }
}

/* Les bandeaux défilants sont un choix explicite du marchand : ils défilent même quand le système demande
   moins d'animations (Windows, « Effets d'animation » désactivé) ou que les animations de la boutique sont coupées. */
.shop.ann-marquee .shop-announce span {
    animation: shop-ann 24s linear infinite !important;
}

.shop .home-marquee-track {
    animation: shop-marquee 30s linear infinite !important;
}

.shop.ann-minimal .shop-announce {
    background: var(--bg);
    background-image: none;
    color: var(--muted);
    border: 0;
    border-bottom: 1px solid var(--line);
    animation: none;
    padding: 6px 16px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
}

/* ---------- En-tête ---------- */

.shop.hdr-light .shop-header {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f2f3f5;
    --ink: #111318;
    --muted: #5b6070;
    --line: #e6e7eb;
    background: #ffffff;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.shop.hdr-dark .shop-header {
    --bg: #0d0e12;
    --surface: #16171d;
    --surface-2: rgba(255, 255, 255, .08);
    --ink: #f5f6f8;
    --muted: rgba(245, 246, 248, .66);
    --line: rgba(255, 255, 255, .14);
    background: #0d0e12;
    color: var(--ink);
    border-bottom: 1px solid transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.shop.hdr-brand .shop-header {
    --bg: var(--brand);
    --surface: color-mix(in srgb, var(--brand) 82%, #000);
    --surface-2: rgba(255, 255, 255, .14);
    --ink: #ffffff;
    --muted: rgba(255, 255, 255, .78);
    --line: rgba(255, 255, 255, .22);
    background: var(--brand);
    color: var(--ink);
    border-bottom: 1px solid transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.shop.hdr-glass .shop-header {
    background: color-mix(in srgb, var(--bg) 50%, transparent);
    backdrop-filter: saturate(1.8) blur(22px);
    -webkit-backdrop-filter: saturate(1.8) blur(22px);
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

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

.shop.ftr-light .shop-footer,
.shop.ftr-dark .shop-footer,
.shop.ftr-brand .shop-footer {
    border-radius: 0;
    outline: 0;
}

    .shop.ftr-light .shop-footer::before,
    .shop.ftr-dark .shop-footer::before {
        display: none;
    }

.shop.ftr-light .shop-footer {
    background: #f5f5f2;
    color: #55565c;
    border-top: 1px solid #e3e3df;
}

.shop.ftr-light .shop-footer-inner a { color: #55565c; }
.shop.ftr-light .shop-footer-inner a:hover { color: #111318; }
.shop.ftr-light .shop-footer .shop-brand-name,
.shop.ftr-light .shop-footer-title { color: #111318; }
.shop.ftr-light .shop-social a { border-color: #d9d9d4; color: #55565c; }
.shop.ftr-light .shop-footer-bottom { border-color: #e3e3df; color: #77787e; }

.shop.ftr-dark .shop-footer {
    background: #0d0e12;
    color: #b9bbc4;
    border-top: 0;
}

.shop.ftr-dark .shop-footer-inner a { color: #b9bbc4; }
.shop.ftr-dark .shop-footer-inner a:hover { color: #ffffff; }
.shop.ftr-dark .shop-footer .shop-brand-name,
.shop.ftr-dark .shop-footer-title { color: #ffffff; }
.shop.ftr-dark .shop-social a { border-color: #2a2c35; color: #b9bbc4; }
.shop.ftr-dark .shop-footer-bottom { border-color: #22242c; color: #82848f; }

.shop.ftr-brand .shop-footer {
    background: var(--brand);
    color: rgba(255, 255, 255, .82);
    border-top: 0;
}

    .shop.ftr-brand .shop-footer::before {
        background: var(--accent);
    }

.shop.ftr-brand .shop-footer-inner a { color: rgba(255, 255, 255, .82); }
.shop.ftr-brand .shop-footer-inner a:hover { color: #ffffff; }
.shop.ftr-brand .shop-footer .shop-brand-name,
.shop.ftr-brand .shop-footer-title { color: #ffffff; }
.shop.ftr-brand .shop-social a { border-color: rgba(255, 255, 255, .3); color: #ffffff; }
.shop.ftr-brand .shop-footer-bottom { border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .7); }

/* ---------- Bannière : hauteur et alignement ---------- */

.shop.herobox-compact .shop-main .hero {
    min-height: 340px;
    padding-top: 44px;
    padding-bottom: 44px;
}

.shop.herobox-tall .shop-main .hero {
    min-height: 720px;
}

.shop.herobox-full .shop-main .hero {
    min-height: calc(100vh - 150px);
}

.shop.heroalign-center .shop-main .hero .hero-content {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.shop.heroalign-center .shop-main .hero .hero-cta,
.shop.heroalign-center .shop-main .hero .hero-stats {
    justify-content: center;
}

.shop.heroalign-center .shop-main .hero p.lead {
    margin-left: auto;
    margin-right: auto;
}

.shop.heroalign-left .shop-main .hero .hero-content {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.shop.heroalign-left .shop-main .hero .hero-cta,
.shop.heroalign-left .shop-main .hero .hero-stats {
    justify-content: flex-start;
}

.shop.heroalign-left .shop-main .hero p.lead {
    margin-left: 0;
}

/* ---------- Motif de fond (sur la couleur de fond) ---------- */

.shop.bg-dots {
    background-image: radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 1.6px);
    background-size: 22px 22px;
}

.shop.bg-grid {
    background-image:
        linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
    background-size: 34px 34px;
}

.shop.bg-lines {
    background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 6%, transparent) 0 1px, transparent 1px 14px);
}

.shop.bg-grain {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shop.bg-glow {
    background-image:
        radial-gradient(60% 50% at 0% 0%, rgba(var(--brand-rgb), .2), transparent 70%),
        radial-gradient(50% 40% at 100% 8%, rgba(var(--accent-rgb), .18), transparent 70%),
        radial-gradient(70% 50% at 50% 100%, rgba(var(--brand-rgb), .1), transparent 70%);
    background-attachment: fixed;
}

/* ---------- Espace entre les sections ---------- */

.shop.space-compact .shop-section,
.shop.space-compact .home-marquee {
    margin-top: 40px;
}

.shop.space-airy .shop-section,
.shop.space-airy .home-marquee {
    margin-top: 124px;
}

/* ---------- Survol des produits ---------- */

.shop.hover-lift .product-grid .product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .35);
}

.shop.hover-zoom .product-grid .product-card:hover {
    transform: none;
}

.shop.hover-zoom .product-grid .product-card .product-photo img {
    transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

.shop.hover-zoom .product-grid .product-card:hover .product-photo img {
    transform: scale(1.14);
}

.shop.hover-glow .product-grid .product-card:hover {
    transform: none;
    box-shadow: 0 0 0 2px var(--brand), 0 20px 50px -12px rgba(var(--brand-rgb), .55);
}

.shop.hover-none .product-grid .product-card:hover {
    transform: none;
    box-shadow: none;
}

.shop.hover-none .product-grid .product-card:hover .product-photo img {
    transform: none;
}

/* ---------- Bouton des cartes de produits ---------- */

.shop.cardbtn-full .product-card .product-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

    .shop.cardbtn-full .product-card .product-foot .btn {
        width: 100%;
        padding: 10px 14px;
    }

@media (hover: hover) {
    .shop.cardbtn-hover .product-card .product-foot .btn {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .2s, transform .2s;
    }

    .shop.cardbtn-hover .product-card:hover .product-foot .btn,
    .shop.cardbtn-hover .product-card:focus-within .product-foot .btn {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Titres ---------- */

.shop.weight-light :is(h1, h2, h3, .shop-brand-name, .product-title) { font-weight: 300 !important; }
.shop.weight-bold :is(h1, h2, h3, .shop-brand-name, .product-title) { font-weight: 700 !important; }
.shop.weight-black :is(h1, h2, h3, .shop-brand-name, .product-title) { font-weight: 900 !important; }

.shop.upper-headings :is(h1, h2, h3, .product-title) {
    text-transform: uppercase;
    letter-spacing: .01em;
}

/* ---------- Barre de progression et « Haut de page » (sans script : défilement de la page) ---------- */

.shop-progress {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 3px;
    background: var(--grad);
    transform-origin: 0 50%;
    transform: scaleX(0);
}

.shop-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--bg);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45);
    opacity: .9;
    transition: transform .2s, opacity .2s;
}

    .shop-top:hover {
        opacity: 1;
        transform: translateY(-3px);
    }

@supports (animation-timeline: scroll()) {
    .shop-progress {
        display: block;
        animation: shop-progress linear both;
        animation-timeline: scroll(root);
    }

    .shop-top {
        animation: shop-top-in linear both;
        animation-timeline: scroll(root);
        animation-range: 0 480px;
    }
}

@keyframes shop-progress {
    to { transform: scaleX(1); }
}

@keyframes shop-top-in {
    from { opacity: 0; visibility: hidden; }
    to { opacity: .9; visibility: visible; }
}