/* boutique.morgannriu.fr — LONEWOLF 2026 — Dark Theme (default) */
:root {
    /* Échelle de gris — 8 crans, base bleu-froid désaturé */
    --gray-0:  #0a0a0c;   /* fond page (near-black, jamais #000) */
    --gray-1:  #101014;   /* surface 1 : cartes, nav */
    --gray-2:  #16161c;   /* surface 2 : hover, inputs */
    --gray-3:  #1e1e26;   /* surface 3 : éléments actifs */
    --gray-4:  #2c2c36;   /* bordures */
    --gray-5:  #4a4a56;   /* bordures hover / disabled */
    --gray-6:  #8b8b98;   /* texte muted */
    --gray-7:  #b8b8c2;   /* texte secondaire */
    --gray-8:  #ececf1;   /* texte principal (off-white, jamais #fff) */

    --bg: var(--gray-0);
    --surface: var(--gray-1);
    --border: var(--gray-4);
    --text: var(--gray-8);
    --text-muted: var(--gray-6);

    /* Accent — violet unique */
    --accent: #7455ff; /* AA 4.68:1 avec texte blanc */
    --accent-hover: #8f73ff;      /* plus clair au hover en dark */
    --accent-ink: #ffffff;
    --accent-dim: color-mix(in srgb, var(--accent) 14%, transparent);
    --accent-glow: color-mix(in srgb, var(--accent) 25%, transparent);
    --accent-text: #a290ff;       /* petit texte violet — jamais --accent < 18px */

    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;

    /* Legacy aliases */
    --color-bg: var(--bg);
    --color-surface: var(--surface);
    --color-surface-hover: var(--gray-2);
    --color-border: var(--border);
    --color-text: var(--text);
    --color-text-muted: var(--text-muted);
    --color-accent: var(--accent);
    --color-accent-hover: var(--accent-hover);
    --color-highlight: var(--accent-text);
    --color-highlight-light: var(--accent-dim);
    --color-success: var(--success);
    --color-badge: var(--gray-3);

    /* Typographie */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;
    --fs-display: clamp(2.75rem, 1rem + 8vw, 7rem);
    --fs-h1: clamp(2rem, 1.2rem + 3vw, 3.25rem);
    --fs-h2: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
    --fs-h3: clamp(1.125rem, 1rem + .6vw, 1.375rem);
    --fs-body: 0.9375rem;
    --fs-sm: 0.8125rem;
    --fs-xs: 0.6875rem;
    --ls-display: -0.03em;
    --ls-label: 0.14em;

    /* Radius — brutalisme soft */
    --radius: 4px;
    --radius-sm: 2px;
    --radius-pill: 999px;

    /* Spacing */
    --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
    --space-5: 40px; --space-6: 64px; --space-7: 104px;
    --max-width: 1280px;

    /* Ombres / glow / grain */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 8px 24px -8px rgba(0,0,0,.6);
    --shadow-lg: 0 24px 48px -12px rgba(0,0,0,.7);
    --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
                   0 8px 32px -8px var(--accent-glow);
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");

    --transition: .2s cubic-bezier(.4,0,.2,1);
    --transition-slow: .6s cubic-bezier(.16,1,.3,1);
}

/* Light theme override — même DA inversée */
:root[data-theme="light"] {
    --gray-0: #f4f4f2; --gray-1: #fbfbfa; --gray-2: #ededea; --gray-3: #e2e2de;
    --gray-4: #d4d4cf; --gray-5: #a8a8a2; --gray-6: #6b6b70; --gray-7: #44444a;
    --gray-8: #161619;
    --bg: var(--gray-0); --surface: var(--gray-1); --border: var(--gray-4);
    --text: var(--gray-8); --text-muted: var(--gray-6);
    --accent: #5a3ff0;
    --accent-hover: #4930d1;
    --accent-text: #4d33e0;
    --accent-dim: color-mix(in srgb, #5a3ff0 10%, transparent);
    /* 3.34:1 sur --surface en clair (mesuré) : sous le seuil AA de 4.5:1 pour du
       petit texte. #1b7a44 donne 5.18:1. Le thème sombre était déjà à 9.87:1. */
    --success: #1b7a44;
    --shadow-sm: 0 1px 2px rgba(20,20,25,.07);
    --shadow-md: 0 8px 24px -8px rgba(20,20,25,.12);
    --shadow-lg: 0 24px 48px -12px rgba(20,20,25,.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Remove any accidental gradient bar from body/html pseudo-elements */
body::before, html::before, html::after { display: none !important; }
/* Neutralise any stray top border / scroll-progress bar */
html, body { border-top: none !important; }
/* Grain film — texture tactile */
body::after { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--noise); opacity: .028; mix-blend-mode: overlay; }
:root[data-theme="light"] body::after { opacity: .02; }

body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Label mono — LE marqueur streetwear du site */
.t-label { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--text-muted); }

/* View transitions MPA */
@view-transition { navigation: auto; }

/* === ANNOUNCEMENT BAR === */
.announce {
    background: var(--gray-1);
    border-bottom: 1px solid var(--border);
    text-align: center;
    padding: 8px 16px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--gray-7);
}
.announce strong { color: var(--accent-text); font-weight: 500; }

/* === NAV === */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}
@supports not (backdrop-filter: blur(1px)) { .nav { background: var(--bg); } }

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-4);
    min-height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    text-decoration: none;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.nav-brand-accent { color: var(--accent-text); }

.nav-links { display: flex; gap: 24px; align-items: center; }

.nav-links a {
    position: relative;
    color: var(--gray-6);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .1em;
    /* Sans ces deux lignes, l'apparition du badge panier suffisait à casser les libellés
       en « T- / SHIRTS » et « MON / COMPTE » dès 1440 px — la largeur desktop courante. */
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition);
}
.nav-links a::after {
    content: ''; position: absolute; left: 6px; right: 6px; bottom: 8px;
    height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform var(--transition);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }

/* === MAIN === */
.main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px 60px;
    min-height: 80vh;
}

/* === HERO === */
.hero {
    text-align: center;
    padding: 56px 0 32px;
}

.hero h1 {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    color: var(--color-text);
}

.hero h1 span {
    color: var(--accent);
}

.hero p {
    color: var(--color-text-muted);
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto;
}

/* === FILTER BAR === */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 40px;
    padding: 0 8px;
}

.filter-btn {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition);
    white-space: nowrap;
}

.filter-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

.filter-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* === PRODUCT GRID === */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
}

.product-card-wrap {
    position: relative;
}

.product-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
    text-decoration: none;
    color: inherit;
    display: block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}

.product-card-img-wrap {
    background: var(--color-surface-hover, #1a1f27);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

.product-card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.product-card-placeholder {
    aspect-ratio: 1 / 1;
    background: var(--color-surface-hover, #1a1f27);
    border-bottom: 1px solid var(--color-border);
}

.product-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.product-card-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--color-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-desc {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bouton « Voir le produit » des cartes : purement visuel (span DANS le lien
   carte — un vrai <button> serait du HTML invalide), même registre mono/uppercase
   que .filter-btn, hover accent porté par le survol de la carte entière. */
.product-card-cta {
    display: block;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border, var(--color-border));
    border-radius: var(--radius-sm, 2px);
    font-family: var(--font-mono, ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text, var(--color-text));
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.product-card:hover .product-card-cta,
.product-card:focus-visible .product-card-cta {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink, #fff);
}

.product-card-price {
    font-size: 18px;
    font-weight: 700;
    /* --accent-text et non --accent : à 18px/700 (13,5 pt gras < seuil "texte large"),
       #7455ff sur --surface ne fait que 4.06:1 (< AA 4.5). #a290ff / #4d33e0 ≈ 7:1. */
    color: var(--accent-text, #a290ff);
}

/* === BADGES === */
.badge-new {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--gray-8);
    color: var(--gray-0);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 2px;
    letter-spacing: .12em;
    text-transform: uppercase;
    pointer-events: none;
}

.badge-promo {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 2px;
    letter-spacing: .12em;
    text-transform: uppercase;
    pointer-events: none;
}

/* === PRODUCT PAGE === */
.product-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 32px;
}

.product-image {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

.product-info h1 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
}

.product-price {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 20px;
}

.product-description {
    color: var(--color-text-muted);
    font-size: 15px;
    margin-bottom: 28px;
    line-height: 1.7;
}

/* === BADGE === */
.badge {
    display: inline-block;
    background: var(--color-badge);
    color: var(--accent-text);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    margin-bottom: 16px;
}

/* === VARIANT SELECTOR === */
.variant-selector { margin-bottom: 24px; }

.variant-selector label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }

.variant-btn {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    color: var(--color-text);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

.variant-btn:hover { border-color: var(--color-text-muted); }

.variant-btn.active {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #fff;
}

/* === BUY BUTTON === */
.btn-buy {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: var(--radius-sm);
    min-height: 52px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform 0.1s;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-decoration: none;
    text-align: center;
}

.btn-buy:hover {
    background: var(--accent-hover);
    transform: none;
}

.btn-buy:active { transform: scale(0.98); }
.btn-buy:disabled { opacity: 0.4; cursor: not-allowed; }

/* === TRUST BADGES === */
.trust-badges {
    display: flex;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.trust-badge-icon {
    width: 16px;
    height: 16px;
    color: var(--color-success);
}

/* === FOOTER === */
.footer {
    background: var(--gray-0);
    border-top: 1px solid var(--border);
    padding: var(--space-6) 0 var(--space-4);
    color: var(--color-text-muted);
    font-size: 13px;
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-5);
    padding-bottom: 36px;
    border-bottom: 1px solid var(--color-border);
}

.footer-col-brand .footer-logo {
    font-size: 18px; font-weight: 800; letter-spacing: .22em;
    text-transform: uppercase; color: var(--color-text);
    text-decoration: none; display: inline-block; margin-bottom: 8px;
}
.footer-col-brand .footer-logo span { color: var(--accent-text); }
.footer-col-brand .footer-baseline {
    font-size: 13px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.5;
}
.footer-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-social-link {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    background: var(--color-bg); border: 1px solid var(--color-border);
    color: var(--text-muted); text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.footer-social-link:hover { border-color: var(--gray-6); color: var(--text); background: var(--gray-2); }
.footer-social-link svg { width: 16px; height: 16px; fill: currentColor; }

.footer-col-title {
    font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
    text-transform: uppercase; letter-spacing: var(--ls-label);
    color: var(--text-muted); margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a {
    color: var(--text-muted); text-decoration: none; font-size: 13px;
    transition: color .15s;
}
.footer-col ul li a:hover { color: var(--color-text); }

/* Wordmark géant — signature éditoriale */
.footer-wordmark {
    font-size: clamp(3rem, 12vw, 10rem); font-weight: 800;
    text-transform: uppercase; letter-spacing: -.03em; line-height: 1;
    color: var(--gray-2); user-select: none; text-align: center;
    margin-top: var(--space-6); -webkit-text-stroke: 1px var(--gray-3);
}

.footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; padding-top: 24px;
    font-family: var(--font-mono); font-size: var(--fs-xs);
    letter-spacing: var(--ls-label); text-transform: uppercase;
    color: var(--text-muted);
}
.footer-payment { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* opacity .7 : un moyen de paiement à demi effacé se lit « indisponible », pas
   « accepté ». Ces badges ne rassurent que par reconnaissance — donc pleine opacité. */
.footer-payment svg { height: 22px; width: auto; opacity: 1; }

.footer a { color: var(--color-text-muted); text-decoration: none; }
.footer a:hover { color: var(--color-text); }
.footer-links { margin-top: 8px; }

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .hero h1 { font-size: 28px; }
    .hero p { font-size: 14px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-card-body { padding: 12px; }
    .product-card-name { font-size: 13px; }
    .product-card-price { font-size: 15px; }
    .product-page { grid-template-columns: 1fr; gap: 24px; }
    .filter-bar { gap: 6px; }
    .filter-btn { padding: 6px 12px; font-size: 12px; }
    .nav-brand { font-size: 18px; letter-spacing: 2px; }
}

@media (max-width: 480px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-card-desc { display: none; }
}

/* === NEWSLETTER === */
.newsletter {
    background: var(--gray-1);
    border-block: 1px solid var(--border);
    padding: 48px 16px;
    text-align: center;
}
.newsletter-inner { max-width: 520px; margin: 0 auto; }
.newsletter h3 {
    font-size: var(--fs-h3); font-weight: 800; text-transform: uppercase;
    letter-spacing: var(--ls-display); margin: 0 0 6px;
    color: var(--text);
}
.newsletter .muted { color: var(--text-muted); font-size: 14px; margin: 0 0 20px; }
.nl-form {
    display: flex; position: relative;
    background: var(--gray-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color .15s;
}
.nl-form:focus-within { border-color: var(--accent); }
.nl-form input[type="email"] {
    flex: 1; background: transparent; border: 0; outline: 0;
    color: var(--text); padding: 13px 20px; font-size: 14px;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.nl-form input[type="email"]::placeholder { color: var(--text-muted); }
.nl-form button {
    background: var(--accent); color: var(--accent-ink); border: 0; padding: 13px 24px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-family: var(--font-mono); font-weight: 600; font-size: 13px;
    text-transform: uppercase; letter-spacing: .1em; cursor: pointer;
    transition: background .15s; white-space: nowrap; flex-shrink: 0;
}
.nl-form button:hover { background: var(--accent-hover); }
.nl-msg { margin-top: 12px; font-size: 13px; min-height: 18px; }
.nl-msg.ok { color: var(--success); }
.nl-msg.err { color: var(--danger); }

/* === SEARCH BAR === */
.search-bar {
    margin: 16px auto 24px;
    max-width: 600px;
    display: flex;
    background: var(--gray-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.search-bar input {
    flex: 1; background: transparent; border: 0; outline: 0;
    color: var(--text); padding: 12px 16px; font-size: 15px;
}
.search-bar input::placeholder { color: var(--text-muted); }

/* === ACCOUNT === */
.account-page { max-width: 900px; margin: 0 auto; padding: 32px 16px 64px; }
.account-header h1 { font-size: 28px; font-weight: 800; margin: 0 0 8px; color: var(--text); }
.account-page .muted { color: var(--text-muted); font-size: 14px; }
.account-page .muted a { color: var(--accent-text); text-decoration: none; }
.account-page h2 { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 16px; }
.account-orders { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.account-orders th, .account-orders td { padding: 12px 16px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.account-orders th { background: color-mix(in srgb, var(--bg) 85%, #000); font-weight: 600; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.account-orders tr:last-child td { border-bottom: 0; }
.account-orders .status { padding: 4px 8px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; background: var(--gray-3); color: var(--text); }
.account-orders .status.paid, .account-orders .status.shipped, .account-orders .status.delivered { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.account-orders .status.pending { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); }
.account-orders .status.cancelled { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

.account-login { max-width: 420px; margin: 0 auto; text-align: center; padding: 48px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.account-login h1 { font-size: 24px; margin: 0 0 12px; }
.login-form { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.login-form input { background: var(--gray-2); border: 1px solid var(--border); color: var(--text); padding: 12px 14px; border-radius: var(--radius-sm); font-size: 15px; outline: 0; }
.login-form input:focus { border-color: var(--accent); }
.login-form button { background: var(--accent); color: #fff; border: 0; padding: 12px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; font-size: 15px; }
.login-form button:hover { background: var(--accent-hover); }
.flash { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin: 16px 0 0; }
.flash.ok { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.flash.err { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }

/* === WISHLIST === */
.product-card-wrap { position: relative; }
.wishlist-btn {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    background: rgba(11,13,16,.85); border: 1px solid rgba(42,47,54,.6);
    color: var(--text-muted); width: 34px; height: 34px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .15s; backdrop-filter: blur(4px);
}
.wishlist-btn:hover { color: #ff6b7a; border-color: #ff6b7a; }
.wishlist-btn.active { color: #ff6b7a; background: rgba(255,107,122,.15); border-color: #ff6b7a; }
.wishlist-btn.active svg { fill: #ff6b7a; }

/* === COOKIE BANNER === */
.cookie-banner {
    position: fixed; bottom: 16px; left: 16px; right: 16px; max-width: 680px;
    margin: 0 auto; z-index: 9999; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px;
    box-shadow: var(--shadow-md);
}
.cookie-inner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cookie-inner p { margin: 0; color: var(--text-muted); font-size: 13px; flex: 1; min-width: 200px; }
.cookie-inner p a { color: var(--accent-text); text-decoration: none; }
.cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; align-items: center; }
.cookie-btn {
    border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 600;
    padding: 10px 18px; border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
}
.cookie-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.cookie-btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.cookie-btn-outline { background: transparent; color: var(--text); border-color: var(--border); }
.cookie-btn-outline:hover { border-color: var(--text-muted); background: transparent; }
.cookie-btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.cookie-btn-ghost:hover { color: var(--text); background: transparent; }

/* Cookie modal */
.cookie-modal {
    position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.6);
    display: none; align-items: center; justify-content: center; padding: 16px;
}
.cookie-modal-box {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 28px; max-width: 480px; width: 100%; box-shadow: var(--shadow-lg);
}
.cookie-modal-title { color: var(--text); font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.cookie-category { border-top: 1px solid var(--gray-3); padding: 16px 0; }
.cookie-category:first-of-type { border-top: none; padding-top: 0; }
.cookie-category-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cookie-category-header strong { color: var(--text); font-size: 14px; }
.cookie-category-desc { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.cookie-toggle-always { font-size: 11px; color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); border: 1px solid color-mix(in srgb, var(--success) 25%, transparent); border-radius: var(--radius-pill); padding: 4px 10px; white-space: nowrap; flex-shrink: 0; }
.cookie-toggle-wrap { flex-shrink: 0; cursor: pointer; }
.cookie-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.cookie-toggle-track {
    display: block; width: 42px; height: 24px; border-radius: var(--radius-pill);
    background: var(--gray-3); border: 1px solid var(--border); position: relative; transition: background .2s;
}
.cookie-toggle-track::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%; background: var(--gray-6); transition: transform .2s, background .2s;
}
.cookie-toggle-input:checked + .cookie-toggle-track { background: var(--accent); border-color: var(--accent); }
.cookie-toggle-input:checked + .cookie-toggle-track::after { transform: translateX(18px); background: #fff; }
.cookie-modal-footer { margin-top: 20px; display: flex; justify-content: flex-end; }

/* === WISHLIST BADGE === */
.wl-badge {
    display: inline-block; margin-left: 6px; background: var(--danger); color: var(--gray-0);
    font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-pill);
    min-width: 18px; text-align: center; vertical-align: middle;
}

/* === BREADCRUMB === */
.breadcrumb, .breadcrumbs {
    max-width: 1200px; margin: 16px auto 0; padding: 0 16px;
    font-size: 12px; color: var(--color-text-muted); display: flex; gap: 6px; align-items: center;
    flex-wrap: wrap;
}
.breadcrumb a, .breadcrumbs a { color: var(--color-text-muted); text-decoration: none; transition: color .15s; }
.breadcrumb a:hover, .breadcrumbs a:hover { color: var(--accent-text); }
.breadcrumb .sep, .breadcrumbs .sep { color: var(--color-text-muted); font-size: 12px; }
.breadcrumb .current, .breadcrumbs .current { color: var(--color-text); font-weight: 500; }
/* Le fil d'Ariane microdata est un <ol> (catégories, /nouveautes, /promotions) :
   sans ces règles il se rendait en liste NUMÉROTÉE verticale (« 1. Catalogue › »). */
.breadcrumb ol { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li .breadcrumb-sep { margin-left: 6px; }

/* === A11Y === */
.sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
}
.skip-link {
    position: absolute; top: -40px; left: 0; z-index: 10000;
    background: var(--accent); color: #fff; padding: 10px 16px;
    text-decoration: none; font-weight: 600; font-size: 14px;
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { top: 0; }
:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
    border-radius: var(--radius);
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .hero-wolf-mark, [style*="view-transition"] { view-transition-name: none !important; }
}

/* === RELATED === */
.related-section { max-width: 1200px; margin: 48px auto 0; padding: 0 16px; }
.related-section h2 { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.related-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* === REVIEWS === */
.reviews-section { max-width: 800px; margin: 48px auto 0; padding: 0 16px 64px; }
.reviews-header { display:flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.reviews-header h2 { font-size: 22px; font-weight: 700; }
.reviews-summary { display:flex; gap: 12px; align-items: center; color: color-mix(in srgb, var(--text) 75%, transparent); }
.stars-big { font-size: 20px; color: var(--accent-text); letter-spacing: 2px; }
.stars-small { font-size: 14px; color: var(--accent-text); letter-spacing: 1px; margin: 4px 0; }

.reviews-list { display: flex; flex-direction: column; gap: 16px; }
.review { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; }
.review-head { display:flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.review-head strong { color: var(--text); font-size: 14px; }
.badge-verified { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; }
.review-title { font-size: 15px; margin: 6px 0 4px; color: var(--text); }
.review-body { color: color-mix(in srgb, var(--text) 75%, transparent); font-size: 14px; line-height: 1.55; }

.review-form-wrap { margin-top: 32px; }
.review-form-wrap summary {
    cursor: pointer; color: var(--accent-text); font-weight: 600; padding: 12px 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); list-style: none;
}
.review-form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.review-form input:not([type=radio]):not([type=hidden]), .review-form textarea {
    background: var(--gray-2); border: 1px solid var(--border); color: var(--text);
    padding: 10px 12px; border-radius: var(--radius-sm); font-family: inherit; font-size: 14px;
}
.review-form button { background: var(--accent); color: #fff; border: 0; padding: 12px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; }
.rating-pick { display: flex; gap: 8px; }
.rating-pick label { display: flex; gap: 4px; cursor: pointer; padding: 6px 10px; background: var(--gray-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rating-pick label:has(input:checked) { background: var(--accent); color: #fff; border-color: var(--accent); }

/* === Produit/Panier components === */

/* 404 page */
.error-page { text-align: center; padding: 80px 0; }
.error-page p { margin-top: 16px; }
.error-page a { color: var(--color-highlight); }

/* Promo code block (shared produit + panier) */
.promo-wrap { margin-top: 12px; }
.promo-wrap summary {
    cursor: pointer; font-size: 13px; color: var(--text-muted); list-style: none;
}
.promo-row {
    display: flex; gap: 6px; margin-top: 8px;
}
.promo-input {
    flex: 1; background: var(--gray-2); border: 1px solid var(--border);
    color: var(--text); padding: 8px 10px; border-radius: var(--radius-sm);
    text-transform: uppercase; font-size: 13px;
    outline: 0; font-family: var(--font-mono);
}
.btn-buy--sm { padding: 8px 14px; font-size: 13px; }
.promo-msg { margin-top: 6px; font-size: 12px; min-height: 14px; }

/* Product action row */
.product-actions { display: flex; gap: 8px; margin-top: 12px; }
.product-actions .btn-buy { flex: 1; }
@media (max-width: 1024px) {
    /* Les 3 actions côte à côte débordaient de 209 px à 390 px (audit 07/08) :
       CTA principal pleine largeur, panier + partage passent dessous. Le libellé
       légal du CTA (« Commander avec obligation de paiement — X € ») ne tient pas
       sur une ligne à 390 px : sans white-space normal, le montant sortait du bouton. */
    .product-actions { flex-wrap: wrap; }
    .product-actions .btn-buy { flex: 1 1 100%; white-space: normal; line-height: 1.35; }
    .product-actions > button, .product-actions > div { flex: 1 1 auto; }
}
.btn-cart {
    background: transparent; color: var(--text); border: 1px solid var(--border);
    padding: 0 16px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.btn-cart:hover { border-color: var(--gray-6); background: var(--gray-2); }
.btn-share {
    background: transparent; color: var(--text-muted); border: 1px solid var(--border);
    padding: 0 14px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
}

/* FAQ section */
.faq-section { max-width: 800px; margin: 48px auto 0; padding: 0 16px; }
.faq-section h2 { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.faq-item {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 18px; margin-bottom: 8px;
}
.faq-item summary { cursor: pointer; font-weight: 500; color: var(--text); list-style: none; }
.faq-item p { margin-top: 8px; color: color-mix(in srgb, var(--text) 75%, transparent); font-size: 14px; }

/* Review date */
.review-date { margin-left: auto; font-size: 12px; }

/* Honeypot */
.field-honeypot { position: absolute; left: -9999px; }

/* Cart page */
.cart-hero { text-align: center; padding: 40px 16px; }
.cart-hero h1 { font-size: 32px; font-weight: 800; }
.cart-container { max-width: 800px; margin: 0 auto; padding: 0 16px 64px; }
.cart-empty-state {
    text-align: center; padding: 48px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.cart-empty-state .muted { margin-bottom: 16px; }
.btn-buy--inline { display: inline-block; text-decoration: none; padding: 10px 20px; }
.cart-footer-panel {
    margin-top: 16px; padding: var(--space-4);
    background: var(--gray-1); border: 1px solid var(--border); border-radius: var(--radius);
}
.shipping-hint {
    padding: 10px 14px;
    background: var(--accent-dim); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 13px; color: var(--accent-text);
}
.cart-total-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
}
.cart-total-label { font-size: 14px; }
.cart-total-amount { font-size: 24px; }
.promo-wrap--cart { margin-bottom: 16px; }
.btn-buy--checkout { width: 100%; padding: 14px; font-size: 15px; }

/* === MOBILE CART BAR === */
.mobile-cart-bar {
    display: none;
}
@media (max-width: 639px) {
    .mobile-cart-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-shadow: 0 -4px 16px rgba(0,0,0,.5);
    }
    .mobile-cart-bar__count {
        color: color-mix(in srgb, var(--text) 75%, transparent);
        font-size: 14px;
        font-weight: 600;
    }
    .mobile-cart-bar__btn {
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: var(--radius-sm);
        padding: 12px 24px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        min-height: 44px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
}

/* === CART FOOTER STICKY (mobile) === */
@media (max-width: 639px) {
    .cart-footer-panel--sticky {
        position: sticky;
        bottom: 0;
        box-shadow: 0 -8px 24px rgba(0,0,0,.4);
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
        border-radius: var(--radius) var(--radius) 0 0;
        z-index: 10;
    }
}

/* === TOUCH TARGETS (WCAG 44×44) === */
.nav-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
}
.filter-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.product-card {
    /* Ensure hit area spans full card */
    position: relative;
}
.product-card::after {
    content: '';
    position: absolute;
    inset: 0;
}
select, input[type="text"], input[type="email"], input[type="number"] {
    min-height: 44px;
}
.variant-btn {
    min-height: 44px;
    min-width: 44px;
}
.wishlist-btn {
    width: 44px;
    height: 44px;
}
.btn-buy {
    min-height: 44px;
}
.btn-cart, .btn-share {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* === MOBILE NAV TOGGLE === */
.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    cursor: pointer;
    color: var(--color-text);
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}
@media (max-width: 767px) {
    .nav-toggle {
        display: inline-flex;
    }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        padding: 12px 24px;
        flex-direction: column;
        gap: 4px;
        z-index: 99;
        box-shadow: var(--shadow-md);
    }
    .nav-links.is-open {
        display: flex;
    }
    .nav-links a {
        padding: 10px 0;
        font-size: 15px;
        border-bottom: 1px solid var(--color-border);
    }
    .nav-links a:last-child {
        border-bottom: none;
    }
    .nav-container {
        position: relative;
        flex-wrap: wrap;
    }
}


/* === SEARCH === */
.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-form {
    position: relative;
}

.search-input {
    background: var(--gray-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: 14px;
    padding: 7px 14px;
    width: 200px;
    transition: border-color var(--transition), box-shadow var(--transition), width var(--transition);
    outline: none;
}

.search-input::placeholder {
    color: var(--color-text-muted);
}

.search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
    width: 260px;
}

.search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    overflow: hidden;
    min-width: 300px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 14px;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition);
    cursor: pointer;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item[aria-selected="true"] {
    background: var(--gray-2);
    color: var(--color-text);
}

.search-result-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: var(--color-bg);
}

.search-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.search-result-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-name mark {
    background: var(--accent-dim);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

.search-result-price {
    color: var(--accent-text);
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .search-wrapper {
        order: 3;
        width: 100%;
        margin-top: 8px;
    }
    .search-form { width: 100%; }
    .search-input { width: 100%; }
    .search-input:focus { width: 100%; }
    .search-results { min-width: unset; }
}

/* === THEME TOGGLE === */
.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    line-height: 1;
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition), background var(--transition);
    flex-shrink: 0;
}
.theme-toggle:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* SVG icon swap: show moon by default, sun when light */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle[data-theme="light"] .icon-sun { display: block; }
.theme-toggle[data-theme="light"] .icon-moon { display: none; }

/* === WALLET HINT === */
.wallet-hint {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--gray-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--gray-7);
}
.wallet-hint__icon { flex-shrink: 0; }

/* === ORDER RECAP CARD === */
.cart-recap-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 16px;
    font-size: 13px;
}
.cart-recap-title {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-label);
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.cart-recap-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}
.cart-recap-head th {
    color: var(--text-muted);
    font-weight: 500;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.cart-recap-head th:last-child { text-align: right; }
.cart-recap-table tbody td { padding: 8px 0; border-bottom: 1px solid var(--gray-3); vertical-align: middle; }
.cart-recap-table tbody td:last-child { text-align: right; }
.cart-recap-totals { font-size: 13px; }
.cart-recap-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}
.cart-recap-total {
    font-weight: 700;
    font-size: 15px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 4px;
}

/* Fix: vus récemment avec peu d'items ne doit pas stretcher */
#recent-views-grid, .related-grid {
    grid-template-columns: repeat(auto-fill, 260px) !important;
    justify-content: center;
}

/* === TOASTS =========================================================== */
#toast-root {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    min-width: 220px;
    max-width: 360px;
    padding: 12px 16px;
    border-radius: var(--radius-sm, 8px);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(0,0,0,.2));
    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
}
.toast--show { opacity: 1; transform: translateY(0); }
.toast--success { border-left: 3px solid var(--success); }
.toast--error   { border-left: 3px solid var(--danger); }
.toast--info    { border-left: 3px solid var(--accent); }
@media (max-width: 640px) {
    #toast-root { left: 16px; right: 16px; bottom: 76px; }
    .toast { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .toast { transition: opacity .15s linear; transform: none; }
}

/* === SKELETONS ======================================================== */
.skeleton {
    background: linear-gradient(90deg, var(--color-border) 0%, var(--color-surface-hover) 50%, var(--color-border) 100%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm, 8px);
}
.skeleton-card { height: 320px; }
.skeleton-line { height: 12px; margin: 6px 0; }
.skeleton-line--sm { width: 40%; }
@keyframes sk-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* === LOAD MORE (pagination progressive) ============================== */
.load-more-wrap {
    display: flex;
    justify-content: center;
    margin: 32px 0 48px;
}
.load-more-btn {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
    display: inline-flex; gap: 10px; align-items: center;
}
.load-more-btn:hover {
    background: var(--gray-2);
    border-color: var(--gray-6);
    transform: translateY(-2px);
}
.load-more-btn:active { transform: scale(.98); }
.load-more-count {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 500;
}

/* === STICKY CTA PRODUIT (mobile) ===================================== */
.product-sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 16px rgba(0,0,0,.12);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    z-index: 1000;
    transform: translateY(100%);
    transition: transform .25s ease;
    display: none;
}
.product-sticky-cta__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    gap: 12px;
    align-items: center;
}
.product-sticky-cta__price {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.product-sticky-cta__label {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-sticky-cta__amount {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
}
.product-sticky-cta__btn {
    background: var(--accent);
    color: #fff;
    border: 0;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), transform var(--transition);
}
.product-sticky-cta__btn:hover { background: var(--accent-hover); }
.product-sticky-cta__btn:active { transform: scale(.98); }
.product-sticky-cta--hidden { transform: translateY(100%) !important; }

@media (max-width: 768px) {
    .product-sticky-cta {
        display: block;
        transform: translateY(0);
    }
    /* Retiré : `aria-hidden` n'est pas une propriété CSS, la déclaration était jetée
       par le parseur (l'attribut a été supprimé du HTML, c'est là que ça se règle).
       Retiré aussi : `.mobile-cart-bar ~ .product-sticky-cta` ne matchait jamais, les
       deux éléments n'étant pas frères — code mort. */
    /* Réserve espace bas de page */
    main.main { padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
    .product-sticky-cta { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   FEATURES 2026042214 — Conversion + PWA + Mobile
   ══════════════════════════════════════════════════════════ */

/* ── Feature 1 : Progress bar livraison gratuite ── */
.shipping-progress-wrap {
    margin: 8px 0 4px;
}
.shipping-progress-track {
    background: var(--gray-3);
    border-radius: var(--radius-pill);
    height: 6px;
    overflow: hidden;
}
.shipping-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-pill);
    transition: width .5s cubic-bezier(.4,0,.2,1), background .3s;
    will-change: width;
}
.shipping-progress-text {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 0;
}

/* ── Feature 2 : Badge stock bas ── */
.stock-low-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 10px;
}

/* ── Feature 3 : Filtres checkboxes taille/thème ── */
.filter-group--sizes,
.filter-group--tags {
    flex-direction: column;
    gap: 6px;
}
.filter-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.filter-check-label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    transition: border-color .2s, background .2s;
    user-select: none;
}
.filter-check-label input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
}
.filter-check-label:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent-text);
}

/* ── Feature 3/11 : Sticky filters mobile ── */
@media (max-width: 768px) {
    .category-filters {
        position: sticky;
        top: 56px; /* below nav */
        z-index: 40;
        background: var(--bg);
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .filter-group {
        flex-shrink: 0;
    }
}

/* ── Feature 4 : Zoom galerie ── */
.product-gallery-zoom {
    position: relative;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: var(--radius);
}
.product-gallery-zoom img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: center;
}
.product-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.product-lightbox__img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius);
}
.product-lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}

/* ── Feature 5 : Countdown livraison ── */
.countdown-shipping {
    font-size: 13px;
    color: var(--text-muted);
    background: var(--accent-dim);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    margin-bottom: 10px;
    display: none;
}

/* ── Feature 6 : Frequently Bought Together ── */
.fbt-section {
    max-width: var(--max-width);
    margin: 40px auto;
    padding: 0 16px;
}
.fbt-section h2 {
    font-size: 1.2rem;
    margin-bottom: 16px;
}
.fbt-bundle {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 16px;
}
.fbt-bundle .fbt-item + .fbt-item::before {
    content: '+';
    align-self: center;
    font-size: 24px;
    color: var(--text-muted);
    padding-right: 8px;
}
.fbt-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    flex: 1;
    min-width: 160px;
}
.fbt-item__img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.fbt-item__name {
    font-size: 13px;
    margin: 0;
    line-height: 1.3;
}
.fbt-item__price {
    font-size: 13px;
    color: var(--accent-text);
    margin: 0;
    font-weight: 600;
}
/* Variante par défaut de chaque item du bundle (affichée en mode live) */
.fbt-item__variant {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}
/* En vitrine le CTA du bundle est un LIEN vers la capture email */
a.btn-buy--fbt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.fbt-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.fbt-total {
    font-size: 15px;
    color: var(--text-muted);
}
.fbt-total strong {
    color: var(--text);
}
.btn-buy--fbt {
    padding: 10px 20px;
}

/* Lang switcher : lisible dans les deux themes */
/* nowrap : « FR / EN » s'empilait verticalement dans l'en-tête à 1440 px. */
.lang-switcher { color: var(--gray-6, var(--color-text-muted)); white-space: nowrap; flex-shrink: 0; }
.lang-switcher .lang-active { color: var(--gray-8, var(--color-text)); font-weight: 600; }
/* Zone tactile étendue (le lien mesurait 20×19 px — audit mobile 07/08) sans
   déplacer la mise en page : le padding est compensé par des marges négatives. */
.lang-switcher a { color: var(--gray-6, var(--color-text-muted)); padding: 13px 10px; margin: -13px -6px; }
.lang-switcher a:hover { color: var(--accent-text, var(--accent)); }


/* Logo mark dans la nav */
.nav-brand { display: inline-flex; align-items: center; gap: 10px; }
.nav-brand-mark { width: 28px; height: 28px; flex: none; color: var(--accent-text, var(--accent)); }

/* ── Bandeau cookies : il ne doit jamais recouvrir le CTA du hero ──────────
   Mesuré au DOM, bandeau affiché (aucun cookie de consentement) :
     390×844  → bandeau 640→836 vs bouton « Préviens-moi » 649→697 : recouvert
                intégralement (email saisissable, mais impossible à valider) ;
     1280×720 → bandeau 587→704 vs champ + bouton 670→721 : les deux recouverts ;
     1440×900 → aucun chevauchement, d'où l'invisibilité du défaut en desktop.
   `body.cookie-banner-visible` ne réserve de la place qu'en FIN DE DOCUMENT
   (padding-bottom) : ça ne protège pas un contenu situé à la hauteur du
   bandeau, comme le hero. Un levier déterministe par axe :
     • ≥ 1240px : le bandeau s'ancre en bas à DROITE. Le formulaire du hero est
       calé à gauche (bord droit = 508px + (100vw-1280)/2), le bandeau commence
       à 100vw-696px : séparation sur X, indépendante de la hauteur de fenêtre
       et de la longueur des textes.
     • < 1240px : l'esquive horizontale est géométriquement impossible (le
       bandeau prend presque toute la largeur). On compacte le bandeau, et le
       hero resserre son rythme vertical tant que le bandeau est là (home.css).
   Le bandeau reste fixe, opaque, au-dessus du contenu, non contournable, avec
   ses trois actions de même poids (refuser aussi simple qu'accepter, CNIL) :
   conformité RGPD et accessibilité inchangées. */

/* Espace vertical réellement occupé par le bandeau (hauteur mesurée + marge) :
   réserve le bas de document et remonte les toasts au-dessus du bandeau. */
body.cookie-banner-visible {
    --cookie-space: 150px;
    padding-bottom: var(--cookie-space);
}
body.cookie-banner-visible #toast-root { bottom: calc(var(--cookie-space) + var(--space-3)); }

@media (min-width: 1240px) {
    .cookie-banner {
        left: auto;
        right: var(--space-3);
        margin: 0;
    }
}

@media (min-width: 601px) and (max-width: 1239px) {
    /* Fenêtres basses (1024×768, 768×700…) : chaque pixel de bandeau gagné est
       un pixel de moins à reprendre sur le hero. */
    .cookie-banner { padding: 12px 20px; }
    .cookie-inner { gap: 10px; }
    .cookie-inner p { font-size: 12.5px; line-height: 1.4; }
}

@media (max-width: 600px) {
    .cookie-banner {
        left: var(--space-2);
        right: var(--space-2);
        bottom: var(--space-2);
        padding: 12px 14px;
    }

    .cookie-inner { gap: 8px; }
    .cookie-inner p { font-size: 12px; line-height: 1.45; min-width: 0; }

    /* Les 3 actions sur UNE ligne (au lieu d'une grille 2×2) : -52px de hauteur,
       c'est ce qui dégage le bouton du hero. Colonnes égales = refus aussi
       accessible que l'acceptation. */
    .cookie-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .cookie-btn {
        width: 100%;
        min-height: 44px;   /* cible tactile WCAG 2.5.5 — c'est le tout premier tap */
        padding: 8px 6px;
        font-size: 12px;
        line-height: 1.25;
        text-align: center;
    }
}

/* Bandeau d'annonce : le délai passe la ligne sur mobile et ajoute ~20 px à un
   en-tête déjà chargé (bandeau + nav sticky + recherche). On garde la promesse
   forte (livraison offerte) et on réserve le détail au desktop. */
@media (max-width: 600px) {
    .announce-delai { display: none; }
}

/* Cibles tactiles des 3 contrôles les plus utilisés au pouce : la règle 44px
   existait déjà pour les boutons principaux mais oubliait ceux-ci — dont le
   submit newsletter, seul organe de conversion en mode vitrine. */
@media (max-width: 768px) {
    .newsletter-form button,
    .newsletter-form input,
    .nav-search input,
    .search-input { min-height: 44px; }

    /* Liens légaux du footer : ~16px de haut, sous le minimum WCAG 2.5.8 (24px).
       Ce sont les liens qu'un acheteur méfiant va justement consulter. */
    .footer-col a,
    .footer-links a { display: inline-block; padding: 5px 0; min-height: 24px; }
}

/* Section « Les sept traces » (remplace la fausse galerie Instagram) */
.traces-intro {
    max-width: 62ch;
    margin: 0 0 var(--space-4, 24px);
    color: var(--text-muted, var(--color-text-muted));
    font-size: .9375rem;
    line-height: 1.6;
}
.ig-tile { position: relative; }
/* La tuile est en aspect-ratio 1/1 + overflow:hidden : un libellé dans le flux est
   poussé hors du cadre et coupé. Il reste donc en superposition — mais sur un bandeau
   OPAQUE, car un dégradé transparent laissait du blanc sur blanc sur les posters. */
.trace-nom {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    background: rgba(10, 10, 12, .88);
    color: #fff;
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.trace-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex-shrink: 0;
    border: 1px solid var(--accent); border-radius: 50%;
    color: #a290ff; font-size: 11px;
}


/* Nav : plage 768–1263 px. Le mode burger commence à 767 px et la barre desktop
   ne tient qu'à partir de ~1264 px ; entre les deux, le sélecteur de langue était
   tronqué et le bouton de thème sortait de l'écran. On comprime la recherche et les
   gouttières plutôt que d'imposer le burger sur tablette. */
@media (min-width: 768px) and (max-width: 1263px) {
    .nav-container { padding: 0 var(--space-3, 16px); gap: 8px; }
    /* Contraindre le wrapper ne suffit pas : l'input garde sa largeur propre et
       débordait par-dessus le sélecteur de langue, qui disparaissait visuellement. */
    .search-wrapper { max-width: 150px; }
    .search-wrapper .search-form,
    .search-wrapper input { width: 100%; max-width: 150px; min-width: 0; box-sizing: border-box; }
    .nav-links { gap: 14px; }
}