/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    height: var(--header-height);
}
.site-logo {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    white-space: nowrap;
    background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.site-logo-mark {
    display: block;
    width: 168px;
    height: 60px;
    overflow: hidden;
    flex-shrink: 0;
}
.site-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
[data-theme="site-dark"] .site-logo-mark img {
    filter: grayscale(1) invert(1) contrast(4);
}
.site-search-wrap { position: relative; flex: 1; }
.site-search {
    display: flex;
    width: 100%;
    background: var(--color-surface);
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 1px solid transparent;
    transition: border-color var(--transition-fast);
}
.site-search:focus-within { border-color: var(--color-secondary); }
.site-search input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.65rem 1.1rem;
    outline: none;
}
.site-search button {
    border: none;
    background: transparent;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}
.site-search button:hover { color: var(--color-secondary); }
.site-search button svg { width: 18px; height: 18px; }

.search-suggestions {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 200;
    background: var(--color-bg-elevated);
    border: 2px solid var(--color-ink);
    border-radius: 4px;
    box-shadow: 4px 4px 0 var(--color-ink);
    max-height: 420px; overflow-y: auto;
}
.search-suggestions__loading, .search-suggestions__empty { padding: var(--space-4); font-size: 0.85rem; color: var(--color-text-muted); }
.search-suggestions__item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}
.search-suggestions__item:hover { background: var(--color-surface); }
.search-suggestions__thumb {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 3px; overflow: hidden;
    background: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
}
.search-suggestions__thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-suggestions__thumb-ph { font-family: var(--font-display); color: #fff; font-size: 1.1rem; }
.search-suggestions__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-suggestions__name { font-size: 0.87rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestions__price { font-size: 0.82rem; color: var(--color-text-muted); }
.search-suggestions__more {
    display: block; padding: var(--space-3) var(--space-4);
    font-size: 0.85rem; font-weight: 700; text-align: center;
    color: var(--color-accent); background: var(--color-surface);
}
.search-suggestions__more:hover { background: var(--color-primary); color: var(--color-text-inverse); }
@media (max-width: 860px) {
    .site-search-wrap { display: none; }
}
.site-actions { display: flex; align-items: center; gap: var(--space-4); }
.site-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem; height: 2.4rem;
    border-radius: var(--radius-full);
    color: var(--color-text);
    transition: background var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}
.site-action:hover { background: var(--color-surface); transform: translateY(-1px); color: var(--color-secondary); }
.site-action svg { width: 21px; height: 21px; }
.cart-count {
    position: absolute;
    top: 0px; right: 0px;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    padding: 1px 6px;
    box-shadow: var(--shadow-sm);
}

/* ---------- Animation "vol vers le panier" ---------- */
.fly-to-cart {
    position: fixed;
    width: 52px; height: 52px;
    border-radius: var(--radius-full);
    overflow: hidden;
    z-index: 2000;
    pointer-events: none;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
    transition: transform 0.75s cubic-bezier(0.32, 0.9, 0.32, 1), opacity 0.75s ease 0.15s;
}
.fly-to-cart img { width: 100%; height: 100%; object-fit: cover; }

@keyframes cart-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.3); }
    60% { transform: scale(0.92); }
    100% { transform: scale(1); }
}
.site-action--cart.cart-bump { animation: cart-bump 0.42s ease; }
.site-action--cart.cart-bump .cart-count { animation: cart-bump 0.42s ease; }

/* ---------- Category nav (mega menu simplifié) ---------- */
.site-categories { border-top: 1px solid var(--color-border); background: var(--color-bg-elevated); }
.site-categories__inner { display: flex; gap: var(--space-6); padding-block: var(--space-2); }
.site-categories__item { position: relative; font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0; }
.site-categories__item > a.is-active { color: var(--color-accent); }
.site-categories__item:hover .site-categories__dropdown { display: flex; }
.site-categories__dropdown {
    display: none;
    position: absolute; top: 100%; left: 0;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-2);
    flex-direction: column;
    min-width: 160px;
    z-index: 50;
}
.site-categories__dropdown a { padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); font-weight: 400; }
.site-categories__dropdown a:hover { background: var(--color-surface); }
@media (max-width: 860px) {
    .site-categories__inner { overflow-x: auto; }
}

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(135deg, var(--color-surface), var(--color-bg-alt));
    padding: var(--space-8) 0;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: var(--space-7);
}
.hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    color: var(--color-secondary);
    font-weight: 700;
}
.hero__title { margin-block: var(--space-3); text-shadow: 4px 4px 0 color-mix(in srgb, var(--color-accent) 55%, transparent); }
.hero__text { color: var(--color-text-muted); max-width: 46ch; margin-bottom: var(--space-5); }
.hero__media {
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--color-primary), #2c2c2c 55%, var(--color-secondary));
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
    .hero__media img,
    .hero__media-placeholder { transform: scale(1.12); will-change: transform; }
}
.hero__media-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(224, 38, 46, 0.35), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 50%);
}
.hero__media-placeholder span {
    font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
    color: rgba(255,255,255,0.85); letter-spacing: 0.02em;
}

@media (max-width: 860px) {
    .hero__inner { grid-template-columns: 1fr; }
    .site-search { display: none; }
}

/* ---------- Category grid (homepage) ---------- */
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); }
.category-card { display: flex; flex-direction: column; gap: var(--space-3); text-align: center; }
.category-card__media {
    aspect-ratio: 1/1; border-radius: var(--radius-lg);
    background: linear-gradient(150deg, var(--color-surface), var(--color-bg-alt));
    overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), transform var(--transition-base);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border);
}
.category-card__media img { width: 100%; height: 100%; object-fit: cover; }
.category-card__monogram { font-family: var(--font-display); font-size: 2.75rem; font-weight: 700; color: var(--color-secondary); opacity: 0.55; }
.category-card:hover .category-card__media { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.category-card:hover .category-card__monogram { opacity: 0.8; }
.category-card span { font-weight: 600; font-size: 0.95rem; }

/* ---------- Perks ---------- */
/* ---------- Bandeau de réassurance (sous le héro) ---------- */
.trust-strip { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.trust-strip__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding-block: var(--space-4); }
.trust-strip__item { display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; font-weight: 600; }
.trust-strip__item svg { width: 20px; height: 20px; color: var(--color-secondary); flex-shrink: 0; }
@media (max-width: 700px) { .trust-strip__inner { justify-content: center; text-align: center; } }

/* ---------- Bannière promotionnelle ---------- */
.promo-banner {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, var(--color-surface), var(--color-bg-alt));
    border: 1px solid var(--color-border);
    isolation: isolate;
}
.promo-banner .promo-banner__ghost-mark {
    position: absolute !important; top: 50%; right: 2%; transform: translateY(-50%);
    font-family: var(--font-display); font-weight: 600; font-size: 16rem; line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--color-secondary) 35%, transparent);
    z-index: 0; pointer-events: none; user-select: none;
}
.promo-banner__content {
    position: relative; z-index: 1;
    padding: var(--space-8) var(--space-7);
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    text-align: left;
}
.promo-banner__content .hero__eyebrow { color: var(--color-secondary); }
.promo-banner__content h2 { color: var(--color-text); margin: var(--space-2) 0 var(--space-6); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; }
@media (max-width: 700px) {
    .promo-banner__ghost-mark { font-size: 9rem; right: -5%; }
    .promo-banner__content { padding: var(--space-6); }
}

/* ---------- Meilleures ventes (carrousel classé) ---------- */
.bestseller-section { background: var(--color-bg-alt); }
.bestseller-scroll { display: flex; gap: var(--space-5); overflow-x: auto; padding: var(--space-2) var(--space-2) var(--space-3); scroll-snap-type: x mandatory; }
.bestseller-scroll__item { position: relative; flex: 0 0 230px; scroll-snap-align: start; }
.bestseller-scroll__rank {
    position: absolute; top: -12px; left: 8px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary); color: var(--color-text-inverse);
    font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
    box-shadow: var(--shadow-sm);
}

/* ---------- Présentation de la marque ---------- */
.brand-story__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-7); align-items: center; }
.brand-story__media {
    aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--color-accent) 35%, transparent), transparent 55%),
        radial-gradient(circle at 80% 85%, color-mix(in srgb, var(--color-secondary) 40%, transparent), transparent 55%),
        var(--color-primary);
    box-shadow: var(--shadow-md);
}
.brand-story__monogram { font-family: var(--font-display); font-size: 5rem; font-weight: 700; color: rgba(255,255,255,0.92); letter-spacing: 0.02em; }
.brand-story__media img { width: 100%; height: 100%; object-fit: cover; }
.brand-story__content h2 { margin-bottom: var(--space-4); }
.brand-story__content > .text-muted { margin-bottom: var(--space-5); font-size: 1.02rem; line-height: 1.7; }
.brand-story__values { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-6); }
.brand-story__value { display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; font-weight: 600; }
.brand-story__value svg { width: 20px; height: 20px; color: var(--color-secondary); flex-shrink: 0; }
@media (max-width: 860px) {
    .brand-story__inner { grid-template-columns: 1fr; }
    .brand-story__media { aspect-ratio: 16/9; }
}

.perks { padding-block: var(--space-6); }
.perks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); text-align: center; }
.perk {
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.perk:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.perk__icon {
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-full);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.perk__icon svg { width: 26px; height: 26px; }
.perk__icon--1 { background: linear-gradient(135deg, #3a3a3a, #181818); }
.perk__icon--2 { background: linear-gradient(135deg, var(--color-accent), #7a1116); }
.perk__icon--3 { background: linear-gradient(135deg, #5c5c5c, #2c2c2c); }
.perk__icon--4 { background: linear-gradient(135deg, #b3272e, #5c1216); }
.perk h3 { margin-bottom: var(--space-2); font-size: 1.05rem; }
.perk p { font-size: 0.9rem; }

/* ---------- Newsletter section ---------- */
.newsletter-section { padding-block: var(--space-6); }
.newsletter-card {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-7);
    box-shadow: var(--shadow-md);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
}
.newsletter-card__heading { display: flex; align-items: center; gap: var(--space-4); }
.newsletter-card__badge {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    background: var(--color-accent);
    color: var(--color-text-inverse);
}
.newsletter-card__badge svg { width: 22px; height: 22px; }
.newsletter-card h2 { color: var(--color-text-inverse); margin-bottom: 2px; font-size: 1.4rem; }
.newsletter-card .text-muted { color: rgba(255,255,255,0.65); }
.newsletter-card__form {
    display: flex; gap: 4px; max-width: 400px; width: 100%;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-full);
    padding: 5px;
}
.newsletter-card__form input {
    flex: 1;
    min-width: 140px;
    border: none;
    background: transparent;
    color: #fff;
    padding: 0.65rem 1.1rem;
}
.newsletter-card__form input::placeholder { color: rgba(255,255,255,0.55); }
.newsletter-card__form input:focus { outline: none; }
.newsletter-card__form .btn { padding: 0.65rem 1.4rem; white-space: nowrap; }
@media (max-width: 700px) {
    .newsletter-card { padding: var(--space-5); }
    .newsletter-card__heading { flex-direction: column; text-align: center; }
}

/* ---------- Avis produit ---------- */
.product-rating-summary {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: var(--space-3);
}
.product-rating-summary__stars { display: flex; color: var(--color-accent); gap: 1px; }
.product-rating-summary:hover { color: var(--color-secondary); }

.product-reviews__summary { display: flex; align-items: center; gap: var(--space-2); color: var(--color-accent); font-size: 0.9rem; font-weight: 600; }
.product-reviews__summary svg { color: var(--color-accent); }

.review-list { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
.review-item { padding: var(--space-4) var(--space-5); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.review-item__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.review-item__stars { display: flex; color: var(--color-accent); gap: 1px; }
.review-item__author { font-weight: 600; font-size: 0.9rem; }
.review-item__date { font-size: 0.78rem; margin-left: auto; }
.review-item__title { font-weight: 700; margin-bottom: var(--space-1); }
.review-item__reply {
    margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
    background: var(--color-surface); border-radius: var(--radius-sm); border-left: 3px solid var(--color-secondary);
}
.review-item__reply strong { font-size: 0.82rem; }
.review-item__reply p { margin-top: 2px; font-size: 0.9rem; }

.review-form { max-width: 560px; }
.review-form__stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; margin-bottom: var(--space-4); }
.review-form__stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.review-form__stars label { font-size: 2rem; line-height: 1; color: var(--color-border); cursor: pointer; transition: color var(--transition-fast); }
.review-form__stars input:checked ~ label,
.review-form__stars label:hover,
.review-form__stars label:hover ~ label { color: var(--color-accent); }

.admin-review-item__reply-toggle summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--color-secondary); list-style: none; }
.admin-review-item__reply-toggle summary::-webkit-details-marker { display: none; }
.admin-review-item__reply-toggle summary:hover { text-decoration: underline; }

/* ---------- Sections & product grid ---------- */
.section { padding: var(--space-8) 0; }
.section__head a { display: inline-block; transition: transform var(--transition-fast), color var(--transition-fast); }
.section__head a:hover { transform: translateX(3px); color: var(--color-secondary); }
.section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    gap: var(--space-4);
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-5);
}
.product-card { display: flex; flex-direction: column; overflow: hidden; }
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.product-card__media { aspect-ratio: 1/1; background: var(--color-surface); overflow: hidden; position: relative; }
.product-card__media-link { display: block; width: 100%; height: 100%; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__quick-add {
    position: absolute; bottom: var(--space-2); right: var(--space-2); z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 3px;
    background: var(--color-bg-elevated);
    border: 2px solid var(--color-ink);
    box-shadow: 2px 2px 0 var(--color-ink);
    color: var(--color-ink);
    opacity: 0; transform: translateY(6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.product-card:hover .product-card__quick-add { opacity: 1; transform: translateY(0); }
.product-card__quick-add:hover { background: var(--color-primary); color: var(--color-text-inverse); }
.product-card__quick-add:active { box-shadow: none; transform: translate(1px, 1px); }
.product-card__quick-add svg { width: 19px; height: 19px; }
@media (hover: none) {
    .product-card__quick-add { opacity: 1; transform: translateY(0); }
}
.product-card__badge {
    position: absolute; top: var(--space-3); left: var(--space-3);
    transform: rotate(-4deg);
    border-radius: 2px;
    border: 2px solid var(--color-ink);
    box-shadow: 2px 2px 0 var(--color-ink);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: transform var(--transition-fast);
}
.product-card__badge::before { display: none; }
.product-card:hover .product-card__badge { transform: rotate(-2deg) scale(1.06); }
.product-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.product-card__title { font-weight: 600; font-size: 0.92rem; line-height: 1.35; }
.product-card__title a:hover { color: var(--color-secondary); }
.product-card__price { display: flex; align-items: baseline; gap: var(--space-2); font-weight: 700; }
.product-card__price del { color: var(--color-text-muted); font-weight: 400; font-size: 0.85rem; }
.product-card__rating { display: flex; align-items: center; gap: 4px; color: var(--color-accent); font-size: 0.75rem; }
.product-card__stock-note { font-size: 0.76rem; color: var(--color-text-muted); }
.product-card__stock-note--low { color: var(--color-warning); font-weight: 600; }

.product-card__colors { display: flex; align-items: center; gap: 6px; }
.color-swatch {
    display: inline-block; width: 15px; height: 15px; border-radius: 50%;
    border: 1.5px solid var(--color-border);
    box-shadow: 0 0 0 1px var(--color-bg-elevated);
    flex-shrink: 0;
}
.product-card__colors-more { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); }

.product-card__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    transition: transform 400ms ease;
}
.product-card:hover .product-card__placeholder { transform: scale(1.06); }
.product-card__placeholder span { font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: rgba(255,255,255,0.88); }
.ph-1 { background: linear-gradient(150deg, #3a3a3a, #181818); }
.ph-2 { background: linear-gradient(150deg, #8a1116, #40090c); }
.ph-3 { background: linear-gradient(150deg, #5c5c5c, #2c2c2c); }
.ph-4 { background: linear-gradient(150deg, #e0262e, #7a1116); }
.ph-5 { background: linear-gradient(150deg, #4a4a4a, #202020); }
.ph-6 { background: linear-gradient(150deg, #6e1a1f, #262626); }

/* ---------- Texture grain (esprit sérigraphie/rue) ---------- */
.grain-texture { position: relative; }
.grain-texture > * { position: relative; z-index: 1; }
.grain-texture::after {
    content: '';
    position: absolute; inset: 0;
    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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.06;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-primary); color: var(--color-text-inverse); padding-top: var(--space-8); overflow: hidden; }
.site-footer h3 { color: var(--color-text-inverse); font-size: 0.95rem; margin-bottom: var(--space-3); }
.site-footer .site-logo {
    background: linear-gradient(120deg, #fff, var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.site-footer a { color: rgba(255,255,255,0.75); }
.site-footer a:hover { color: #fff; }
.site-footer .text-muted { color: rgba(255,255,255,0.65); }
.site-footer__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-6); padding-bottom: var(--space-7); }
.site-footer li { margin-bottom: var(--space-2); }
.site-logo-mark--footer { width: 168px; height: 56px; margin-bottom: var(--space-3); }
.site-logo-mark--footer img {
    filter: grayscale(1) invert(1) contrast(4);
}
.site-footer__social-label {
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; font-weight: 700;
    color: var(--color-accent); margin: var(--space-5) 0 var(--space-3);
}
.site-footer__social { display: flex; gap: var(--space-3); }
.site-footer__social a {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--radius-md);
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.9);
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}
.site-footer__social a:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-inverse); transform: translateY(-2px); }
.site-footer__social svg { width: 20px; height: 20px; }
.footer-newsletter { display: flex; gap: var(--space-2); }
.footer-newsletter input { flex: 1; border-radius: var(--radius-full); border: none; padding: 0.6rem 1rem; }
.site-footer__bottom { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,0.12); padding-block: var(--space-4); }

@media (max-width: 860px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Alerts ---------- */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: 0.9rem;
}
.alert-success { background: var(--color-success-bg); color: var(--color-success); }
.alert-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.alert-info { background: var(--color-info-bg); color: var(--color-info); }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form > button:not(.btn-block) { align-self: flex-start; }
.form-field { display: flex; flex-direction: column; gap: 7px; font-size: 0.83rem; font-weight: 600; }
.form-field > span { color: var(--color-text); letter-spacing: 0.01em; }
.form-field input,
.form-field select,
.form-field textarea {
    font-weight: 400;
    padding: 0.7rem 0.95rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: var(--color-text-muted); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 20%, transparent);
}
.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled { opacity: 0.6; cursor: not-allowed; background: var(--color-surface); }
.form-field input[type="file"] { border-style: dashed; cursor: pointer; }
.form-field textarea { resize: vertical; min-height: 90px; font-family: inherit; line-height: 1.5; }
.form-error { color: var(--color-danger); font-weight: 500; font-size: 0.78rem; }
.form-field--checkbox {
    flex-direction: row; align-items: flex-start; gap: var(--space-3);
    font-weight: 400; font-size: 0.85rem; line-height: 1.5;
}
.form-field--checkbox input[type="checkbox"] {
    flex-shrink: 0; margin-top: 3px;
    width: 18px; height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
}
.form-field--checkbox span a { color: var(--color-secondary); font-weight: 600; text-decoration: underline; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-row-between { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
@media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* ---------- Auth pages ---------- */
.auth-page {
    padding: var(--space-8) 0;
    min-height: calc(100vh - var(--header-height));
    display: flex; align-items: center;
    background:
        radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent 40%),
        radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 40%);
}
.auth-page__inner { display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 420px; padding: var(--space-7) var(--space-6); box-shadow: var(--shadow-lg); }
.auth-card h1 { margin-bottom: var(--space-1); }
.auth-card__footer { margin-top: var(--space-5); text-align: center; font-size: 0.9rem; }
.auth-card__footer a { color: var(--color-secondary); font-weight: 600; }
.auth-card__footer a:hover { text-decoration: underline; }

/* ---------- Account layout ---------- */
.account-layout { display: grid; grid-template-columns: 250px 1fr; gap: var(--space-6); align-items: start; }
.account-sidebar {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
}
.account-sidebar ul { display: flex; flex-direction: column; gap: 2px; }
.account-sidebar a, .account-sidebar__soon {
    display: flex;
    align-items: center;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.account-sidebar a:hover { background: var(--color-bg-elevated); transform: translateX(2px); }
.account-sidebar a.is-active { background: var(--color-primary); color: var(--color-text-inverse); font-weight: 600; box-shadow: var(--shadow-sm); }
.account-sidebar__soon { color: var(--color-text-muted); cursor: default; justify-content: space-between; }
.account-sidebar__soon em { font-style: normal; font-size: 0.65rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.04em; }
.account-sidebar__icon { width: 1.4em; display: inline-block; text-align: center; margin-right: var(--space-2); flex-shrink: 0; }
.account-content h1 { margin-bottom: var(--space-1); }
@media (max-width: 780px) {
    .account-layout { grid-template-columns: 1fr; }
}

.account-hero { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.account-hero__avatar {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-sm);
}
.account-hero h1 { margin-bottom: 2px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); }
.account-stat-grid { margin-bottom: var(--space-6); }
.stat-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex; flex-direction: column; gap: 4px;
    position: relative; overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
    opacity: 0; transition: opacity var(--transition-base);
}
a.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
a.stat-card:hover::before { opacity: 1; }
.stat-card__label { font-size: 0.76rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.stat-card__value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.01em; }
.stat-card__hint { font-size: 0.78rem; color: var(--color-text-muted); }

.account-info-card h3 { margin-bottom: var(--space-4); }
.account-info-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 0 var(--space-4); }
.account-info-list > div { display: flex; gap: var(--space-3); align-items: baseline; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.account-info-list > div:last-child { border-bottom: none; padding-bottom: 0; }
.account-info-list dt { width: 90px; flex-shrink: 0; font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); }
.account-info-list dd { margin: 0; }
.account-info-card__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.loyalty-balance-card {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-md);
}
.loyalty-balance-card__value { display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; margin-bottom: var(--space-2); }
.loyalty-balance-card__value small { font-size: 1rem; font-weight: 500; opacity: 0.85; }
.loyalty-balance-card p { margin: 0; opacity: 0.9; }

/* ---------- Tableaux compte (partagé avec l'admin) ---------- */
.admin-table { width: 100%; border-collapse: collapse; background: var(--color-bg-elevated); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }
.admin-table th, .admin-table td { padding: 0.85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 0.88rem; }
.admin-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); background: var(--color-surface); font-weight: 700; }
.admin-table tbody tr { transition: background var(--transition-fast); }
.admin-table tbody tr:hover { background: var(--color-surface); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table a { font-weight: 600; }
.admin-table a:hover { color: var(--color-secondary); }
.table-scroll { overflow-x: auto; border-radius: var(--radius-lg); }
.admin-table__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.admin-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }
.admin-page-head h1 { margin-bottom: 2px; }
.admin-search { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); max-width: 420px; }
.admin-search input, .admin-search select {
    flex: 1; padding: 0.6rem 0.95rem; border-radius: var(--radius-md);
    border: 1.5px solid var(--color-border); background: var(--color-bg-elevated); color: var(--color-text);
    transition: border-color var(--transition-fast);
}
.admin-search input:focus, .admin-search select:focus { outline: none; border-color: var(--color-secondary); }
.admin-empty { padding: var(--space-7) var(--space-4); text-align: center; color: var(--color-text-muted); }

/* ---------- Historique fidélité (fiche client admin) ---------- */
.loyalty-timeline { display: flex; flex-direction: column; gap: var(--space-2); }
.loyalty-timeline__item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.loyalty-timeline__item:hover { border-color: transparent; box-shadow: var(--shadow-sm); }
.loyalty-timeline__icon {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.loyalty-timeline__icon svg { width: 16px; height: 16px; }
.loyalty-timeline__icon--positive { background: var(--color-success-bg); color: var(--color-success); }
.loyalty-timeline__icon--negative { background: var(--color-danger-bg); color: var(--color-danger); }
.loyalty-timeline__body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.loyalty-timeline__type { font-weight: 600; font-size: 0.88rem; }
.loyalty-timeline__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.loyalty-timeline__points { font-weight: 700; font-size: 0.95rem; }
.loyalty-timeline__date { font-size: 0.76rem; }

/* ---------- Listes simples (tickets sur fiche client admin) ---------- */
.admin-list { display: flex; flex-direction: column; gap: var(--space-2); }
.admin-list__item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.admin-list__item:hover { border-color: transparent; box-shadow: var(--shadow-sm); transform: translateX(2px); }
.admin-list__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.admin-list__title { font-weight: 600; font-size: 0.88rem; }

/* ---------- Panier ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-6); margin-top: var(--space-5); align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: var(--space-3); }
.cart-item {
    display: grid; grid-template-columns: 80px 1fr auto auto auto;
    align-items: center; gap: var(--space-4);
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-3);
}
.cart-item img { border-radius: var(--radius-md); object-fit: cover; background: var(--color-surface); }
.cart-item__info { display: flex; flex-direction: column; gap: 4px; }
.cart-item__qty input { width: 64px; padding: 0.4rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); text-align: center; }
.cart-item__price { font-weight: 700; white-space: nowrap; }
.cart-item__remove { background: none; border: none; font-size: 1rem; color: var(--color-text-muted); }
.cart-item__remove:hover { color: var(--color-danger); }
.cart-summary { background: var(--color-bg-elevated); border-radius: var(--radius-lg); padding: var(--space-5); position: sticky; top: calc(var(--header-height) + var(--space-4)); box-shadow: var(--shadow-sm); }
.cart-summary h3 { margin-bottom: var(--space-4); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.cart-summary__count { font-size: 0.76rem; font-weight: 500; }
.cart-summary__row { display: flex; justify-content: space-between; margin-bottom: var(--space-4); font-size: 1.05rem; }
.cart-summary__row--discount strong { color: var(--color-success); }
.cart-summary .btn { margin-bottom: var(--space-3); }
.cart-summary__note { font-size: 0.78rem; }
.cart-summary__items { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); max-height: 260px; overflow-y: auto; padding-right: 2px; }
.cart-summary__item { display: flex; align-items: center; gap: var(--space-3); }
.cart-summary__thumb-wrap { position: relative; flex-shrink: 0; }
.cart-summary__thumb { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; display: block; background: var(--color-surface); }
.cart-summary__thumb--ph { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: rgba(255,255,255,0.9); }
.cart-summary__qty-badge {
    position: absolute; top: -6px; right: -6px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--color-primary); color: var(--color-text-inverse);
    font-size: 0.65rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--color-bg-elevated);
}
.cart-summary__item-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.cart-summary__item-name { font-size: 0.87rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-summary__item-price { font-size: 0.87rem; font-weight: 700; white-space: nowrap; }

.cart-summary__promo { margin-bottom: var(--space-4); }
.cart-summary__promo-applied {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3); border-radius: var(--radius-md);
    background: var(--color-success-bg); color: var(--color-success);
    font-size: 0.85rem;
}
.cart-summary__promo-applied svg { width: 18px; height: 18px; flex-shrink: 0; }
.cart-summary__promo-toggle summary {
    cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--color-secondary);
    list-style: none;
}
.cart-summary__promo-toggle summary::-webkit-details-marker { display: none; }
.cart-summary__promo-toggle summary:hover { text-decoration: underline; }
.cart-summary__promo-field { margin-top: var(--space-3); }
.cart-summary__promo-field input { font-size: 0.9rem; }

.checkout-trust {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: 0.76rem; color: var(--color-text-muted); text-align: left;
    margin-top: var(--space-2);
}
.checkout-trust svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-success); }
@media (max-width: 860px) {
    .cart-layout { grid-template-columns: 1fr; }
    .cart-item { grid-template-columns: 60px 1fr; grid-template-areas: "img info" "img qty" "img price"; }
}

.checkout-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.checkout-header__back:hover { color: var(--color-secondary); }
.checkout-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-6); margin-top: var(--space-5); align-items: start; }
.payment-stripe-notice__text {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-success-bg);
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.5;
}
.payment-stripe-notice__text svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-success); }
.payment-brands { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.payment-brand {
    padding: 0.35rem 0.8rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-text-muted);
    background: var(--color-bg-elevated);
}
.payment-brand--stripe { color: #635bff; border-color: #635bff; }
.checkout-main { display: flex; flex-direction: column; gap: var(--space-5); }
.address-choice {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4); border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
    margin-bottom: var(--space-3); cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.address-choice:hover { border-color: var(--color-text-muted); }
.address-choice:has(input:checked) { border-color: var(--color-secondary); background: var(--color-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 12%, transparent); }
.address-choice input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.address-choice__check {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    border: 1.5px solid var(--color-border); position: relative;
    transition: border-color var(--transition-fast);
}
.address-choice:has(input:checked) .address-choice__check { border-color: var(--color-secondary); }
.address-choice:has(input:checked) .address-choice__check::after {
    content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--color-secondary);
}
.address-choice__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.address-choice__price { font-weight: 700; white-space: nowrap; }

.checkout-step h3 { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.checkout-step h3 svg { width: 20px; height: 20px; color: var(--color-secondary); flex-shrink: 0; }
.checkout-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    background: var(--color-primary); color: var(--color-text-inverse);
    font-family: var(--font-display); font-size: 0.8rem; font-weight: 700;
}
@media (max-width: 860px) { .checkout-layout { grid-template-columns: 1fr; } }

.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.address-card { padding: var(--space-4); }
.address-card p { margin-bottom: 4px; }

.ticket-thread { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.ticket-message { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); }
.ticket-message--admin { background: var(--color-info-bg); }
.ticket-message p { margin-top: var(--space-2); white-space: pre-wrap; }

/* ---------- Error pages (404/403/500) ---------- */
.error-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--color-secondary) 14%, transparent), transparent 45%),
        radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 45%),
        var(--color-bg-alt);
    padding: var(--space-5);
}
.error-page__card { max-width: 460px; text-align: center; background: var(--color-bg-elevated); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); }
.error-page__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; font-weight: 700; color: var(--color-secondary); margin-bottom: var(--space-3); }
.error-page__code { font-family: var(--font-display); font-size: 5.5rem; font-weight: 700; line-height: 1; margin-bottom: var(--space-4); background: linear-gradient(135deg, var(--color-accent), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-page__card h2 { margin-bottom: var(--space-3); }
.error-page__card p.text-muted { margin-bottom: var(--space-6); }
.error-page__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ---------- Utilitaires d'espacement / mise en page ---------- */
.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;
}
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-6 { margin-bottom: var(--space-6); }
.mt-1 { margin-top: var(--space-1); }
.password-field { display: flex; gap: var(--space-2); align-items: stretch; }
.password-field input { flex: 1; }
.password-field .btn { white-space: nowrap; }
.text-center { text-align: center; }
.text-success { color: var(--color-success); font-weight: 600; }
.text-danger { color: var(--color-danger); font-weight: 600; }
.form-narrow { max-width: 480px; }
.form-narrow--wide { max-width: 560px; }
.card-padded, .form-section { padding: var(--space-5); }
.form-section h3 { margin-bottom: var(--space-4); font-size: 1.05rem; }
.stat-value-lg { font-size: 1.4rem; }
.stat-value-md { font-size: 1.1rem; }

.page-content { line-height: 1.8; color: var(--color-text); }
.page-content p { margin-bottom: var(--space-4); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { margin-bottom: var(--space-4); font-size: 0.85rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; color: var(--color-text-muted); list-style: none; margin: 0; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 6px; }
.breadcrumb a:hover { color: var(--color-secondary); }

/* ---------- Catalog layout ---------- */
.catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-6); margin-top: var(--space-5); align-items: start; }
.catalog-filters { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-4); position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.filter-group { margin-bottom: var(--space-5); }
.filter-group h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); color: var(--color-text-muted); }
.filter-categories ul { padding-left: var(--space-3); margin-top: 4px; }
.filter-categories li { margin-bottom: 4px; }
.filter-categories a { font-size: 0.9rem; }
.filter-categories a.is-active { color: var(--color-secondary); font-weight: 700; }
.filter-price { display: flex; align-items: center; gap: var(--space-2); }
.filter-price input { width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.filter-checkbox { display: flex; align-items: center; gap: var(--space-2); font-size: 0.9rem; margin-bottom: var(--space-2); font-weight: 400; }
.catalog-content.is-loading { opacity: 0.5; pointer-events: none; }
.catalog-results__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.catalog-sort select { padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.catalog-empty { padding: var(--space-7) 0; text-align: center; color: var(--color-text-muted); }

.pagination { display: flex; gap: var(--space-2); margin-top: var(--space-6); flex-wrap: wrap; }
.pagination__item {
    width: 2.2rem; height: 2.2rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    font-size: 0.85rem;
}
.pagination__item.is-active { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }

@media (max-width: 860px) {
    .catalog-layout { grid-template-columns: 1fr; }
    .catalog-filters { position: static; }
}

/* ---------- Product detail page ---------- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); margin-top: var(--space-5); }
.product-gallery__main { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 3px;
    background: rgba(255,255,255,0.85);
    border: 2px solid var(--color-primary);
    box-shadow: 2px 2px 0 var(--color-primary);
    color: var(--color-primary);
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.product-gallery__nav:hover { background: var(--color-primary); color: var(--color-text-inverse); }
.product-gallery__nav:active { box-shadow: none; transform: translateY(-50%) translate(1px, 1px); }
.product-gallery__nav svg { width: 20px; height: 20px; }
.product-gallery__nav--prev { left: var(--space-3); }
.product-gallery__nav--next { right: var(--space-3); }
.product-gallery__thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.product-gallery__thumb { width: 64px; height: 64px; border-radius: var(--radius-md); overflow: hidden; border: 2px solid var(--color-border); padding: 0; transition: border-color var(--transition-fast); }
.product-gallery__thumb.is-active { border-color: var(--color-ink); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-info h1 { margin-bottom: var(--space-2); }
.product-sku { font-size: 0.8rem; }
.product-price { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-3) 0; }
.product-price__current { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; }
.product-price__old { color: var(--color-text-muted); }
.product-short-desc { margin-bottom: var(--space-4); color: var(--color-text-muted); }

.variant-group { margin-bottom: var(--space-4); }
.variant-group__label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: var(--space-2); }
.variant-group__options { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.variant-option input { position: absolute; opacity: 0; }
.variant-option span {
    display: inline-flex; padding: 0.45rem 0.9rem; border-radius: var(--radius-full);
    border: 1px solid var(--color-border); font-size: 0.85rem; cursor: pointer;
    transition: all var(--transition-fast);
}
.variant-option input:checked + span { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }

.variant-option--color { padding: 3px; border-radius: 50%; }
.variant-option--color .color-swatch--lg {
    width: 32px; height: 32px;
    border: 1.5px solid var(--color-border);
    box-shadow: none;
    padding: 0; border-radius: 50%;
}
.variant-option--color input:checked + .color-swatch--lg {
    border-color: var(--color-ink);
    box-shadow: 0 0 0 2px var(--color-bg-elevated), 0 0 0 4px var(--color-ink);
}

.variant-option.is-unavailable { cursor: not-allowed; }
.variant-option.is-unavailable span { cursor: not-allowed; opacity: 0.4; text-decoration: line-through; }
.variant-option.is-unavailable:hover span { background: none; border-color: var(--color-border); }
.variant-option--color.is-unavailable { cursor: not-allowed; }
.variant-option--color.is-unavailable .color-swatch--lg { opacity: 0.4; position: relative; }
.variant-option--color.is-unavailable .color-swatch--lg::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--color-danger) calc(50% - 1.5px), var(--color-danger) calc(50% + 1.5px), transparent calc(50% + 1.5px));
}
.variant-feedback { font-size: 0.8rem; margin-top: var(--space-2); }

.quantity-field { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; font-size: 0.85rem; font-weight: 600; }
.quantity-field input { width: 80px; padding: 0.5rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.product-description { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }

@media (max-width: 860px) {
    .product-detail { grid-template-columns: 1fr; }
}

/* ---------- Bandeau cookies / RGPD ---------- */
.cookie-banner {
    position: fixed;
    left: var(--space-5); right: var(--space-5); bottom: var(--space-5);
    z-index: 2000;
    max-width: 620px;
    margin-inline: auto;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--transition-base), transform var(--transition-base);
    pointer-events: none;
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cookie-banner__inner {
    background: var(--color-bg-elevated);
    border: 2px solid var(--color-ink);
    border-radius: 4px;
    box-shadow: 6px 6px 0 var(--color-ink);
    padding: var(--space-5) var(--space-5) var(--space-4);
}
.cookie-banner__eyebrow {
    display: inline-block;
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; font-weight: 700;
    color: var(--color-text-inverse); background: var(--color-accent);
    padding: 3px 10px; border-radius: 2px;
    transform: rotate(-2deg);
    margin-bottom: var(--space-3);
}
.cookie-banner__main h3 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: var(--space-2); text-transform: uppercase; }
.cookie-banner__main p.text-muted { font-size: 0.85rem; line-height: 1.6; margin-bottom: 0; }
.cookie-banner__main p.text-muted a { color: var(--color-secondary); font-weight: 600; text-decoration: underline; }

.cookie-banner__prefs {
    display: flex; flex-direction: column; gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1.5px dashed var(--color-border);
}
.cookie-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-3);
    background: var(--color-surface);
    border-radius: 3px;
    cursor: pointer;
}
.cookie-toggle span { display: flex; flex-direction: column; gap: 2px; }
.cookie-toggle strong { font-size: 0.85rem; }
.cookie-toggle .text-muted { font-size: 0.76rem; }
.cookie-toggle input[type="checkbox"] {
    flex-shrink: 0;
    appearance: none;
    width: 40px; height: 22px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-ink);
    background: var(--color-bg-elevated);
    position: relative;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.cookie-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute; top: 1px; left: 1px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--color-ink);
    transition: transform var(--transition-fast);
}
.cookie-toggle input[type="checkbox"]:checked { background: var(--color-accent); border-color: var(--color-accent); }
.cookie-toggle input[type="checkbox"]:checked::after { background: #fff; transform: translateX(18px); }
.cookie-toggle input[type="checkbox"]:disabled { opacity: 0.6; cursor: not-allowed; }

.cookie-banner__actions {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin-top: var(--space-4);
}
.cookie-banner__actions .btn { flex: 1; white-space: nowrap; justify-content: center; }

@media (max-width: 640px) {
    .cookie-banner { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }
    .cookie-banner__actions .btn { flex: 1 1 calc(50% - var(--space-2)); }
}