/* ============================================================
 YZA - STYLES (mise en page & composants)
 N'utilise QUE les variables de tokens.css.
 ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* overflow-x: clip (not hidden) - clips sideways overflow WITHOUT making html/body
 a scroll container, which would break the sticky header's position: sticky. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 80px) + 1.5rem); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
 font-family: var(--font-body);
 font-size: var(--fs-base);
 line-height: var(--leading-body);
 color: var(--color-fg);
 background: var(--color-bg);
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 1px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--color-fg); color: var(--cream); padding: 0.7rem 1.1rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.skip-link:focus { left: 8px; top: 8px; outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--accent-2); color: var(--jq-ink); }

/* Jacquemus type signature: Futura PT (Jost substitute), Regular 400 — never
   bold — with a hair of positive tracking (real spec ≈0.56–0.8px). */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; font-style: normal; line-height: var(--leading-tight); letter-spacing: 0.012em; font-optical-sizing: auto; }

/* Arabic / RTL: the Latin display + mono faces carry no Arabic glyphs, and italic
 is wrong for Arabic script. Re-point the type tokens to a clean system Naskh/Kufi
 stack and drop italic so Arabic renders correctly. */
[dir="rtl"] {
 --font-display: 'Noto Naskh Arabic', 'Geeza Pro', 'Segoe UI', 'Times New Roman', serif;
 --font-title: var(--font-display);
 --font-body: 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
 --font-mono: 'Noto Kufi Arabic', 'Segoe UI', system-ui, sans-serif;
 --font-hand: var(--font-mono);
 --font-serif: 'Noto Naskh Arabic', 'Geeza Pro', 'Segoe UI', serif;
 --font-hand-accent: 'Noto Naskh Arabic', 'Geeza Pro', 'Segoe UI', serif;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .eyebrow, [dir="rtl"] .btn, [dir="rtl"] .link-underline,
[dir="rtl"] .product-card__name, [dir="rtl"] .yza-marquee__item,
[dir="rtl"] .hero--video .hero__content h1,
[dir="rtl"] .hero--video .hero__subheading { font-style: normal; }

/* ---- utilitaires ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.section { padding-block: clamp(3.5rem, 8vw, var(--space-24)); }
.section--surface { background: var(--color-bg); border-block: 1px solid var(--color-border); }
.section--ink { background: var(--color-dark); color: var(--color-dark-fg); }
.section-head { max-width: 60ch; margin-bottom: var(--space-12); }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head h2 { font-size: var(--fs-2xl); margin-top: var(--space-3); text-wrap: balance; }
.eyebrow { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.2; color: var(--accent); }
/* Client (2026-07-13): "Ne pas mettre de sous-titres dans aucune section" — hide the
   small italic section eyebrows across the ENTIRE site. One global rule so JS-rendered
   eyebrows are covered too; breadcrumbs (.breadcrumb/.breadcrumbs) are a separate class
   and untouched. To re-show a specific one later, add an explicit override after this. */
.eyebrow, .b2b-eyebrow { display: none !important; }
.section--ink .eyebrow { color: var(--color-accent-2); }
.lede { font-size: var(--fs-md); color: var(--color-muted); max-width: 56ch; }

/* ---- boutons ---- */
.btn {
 display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
 font-family: var(--font-display);
 font-size: 0.72rem; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase;
 padding: 0.9rem var(--space-8); border-radius: 0; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
 white-space: nowrap; border: 1px solid currentColor;
}
.btn--solid { background: var(--color-fg); color: var(--white); border-color: var(--color-fg); }
.btn--solid:hover { background: transparent; color: var(--color-fg); }
.btn--accent { background: transparent; color: var(--color-accent-text); border-color: var(--color-accent-text); }
.btn--accent:hover { background: var(--color-accent-text); color: var(--white); }
.btn--outline { background: transparent; border-color: currentColor; }
.btn--outline:hover { background: var(--color-fg); color: var(--white); border-color: var(--color-fg); }
.btn--light { background: transparent; color: var(--white); border-color: var(--white); }
.btn--light:hover { background: var(--white); color: var(--black); }
.btn--block { width: 100%; }
.btn--sm { padding: 0.6rem var(--space-6); }

.link-underline { position: relative; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid currentColor; transition: var(--transition-fast); color: var(--accent-3); }
.link-underline:hover { color: var(--terracotta); }

/* ---- placeholder image (rare : tout est en vraies photos) ---- */
.media { position: relative; overflow: hidden; background: var(--color-surface-2); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.ratio-portrait { aspect-ratio: 3 / 4; }
.ratio-square { aspect-ratio: 1 / 1; }
.ratio-tall { aspect-ratio: 4 / 5; }
.ratio-wide { aspect-ratio: 16 / 10; }

/* ---- badges ---- */
.badge {
 display: inline-block; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
 padding: 0.34em 0.7em; border-radius: 0; background: var(--black); color: var(--white); line-height: 1;
}
.badge--bestseller { background: var(--black); color: var(--white); }
.badge--new { background: var(--accent-2); color: var(--jq-ink); }
.badge--limited { background: var(--white); color: var(--black); border: 1px solid rgba(0,0,0,0.32); }
.badge--bespoke { background: var(--violet); color: var(--black); }

/* ============================================================
 ANNONCE
 ============================================================ */
.announcement { position: sticky; top: 0; z-index: 51; background: var(--color-bg); color: var(--color-fg); border-bottom: 0; }
.announcement__inner {
 min-height: 40px; display: flex; justify-content: center; align-items: center; gap: var(--space-4);
 font-size: 0.78rem; font-weight: 400; letter-spacing: 0.01em; text-transform: none; text-align: center;
}
.announcement__line { margin: 0; max-width: none; white-space: nowrap; }
.announcement__inner > :nth-child(2) { justify-self: center; }
.announcement__inner > :last-child { justify-self: end; }
.announcement__inner a { border-bottom: 1px solid transparent; }
.announcement__inner a:hover { border-bottom-color: currentColor; }
.announcement__track { text-align: center; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; padding: 0.7rem var(--gutter); }

/* Center announcement gently cross-fades between the sale link and the
 "éditions limitées" line. Both share one grid cell (no width jump); the
 alt is offset by half the cycle so one is always resolving as the other fades. */
.announcement__cycle { display: inline-grid; place-items: center; }
.announcement__cycle .announcement__msg { grid-area: 1 / 1; animation: announce-cycle 13s ease-in-out infinite; }
.announcement__cycle .announcement__msg--alt { animation-delay: -6.5s; }
@keyframes announce-cycle {
 0% { opacity: 0; }
 6% { opacity: 1; }
 50% { opacity: 1; }
 56% { opacity: 0; }
 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
 .announcement__cycle .announcement__msg { animation: none; opacity: 1; }
 .announcement__cycle .announcement__msg--alt { display: none; }
}

/* ============================================================
 HEADER / NAV
 ============================================================ */
.header {
 position: sticky; top: var(--yza-ann-h, 40px); z-index: 50;
 background: var(--color-bg);
 border-bottom: 1px solid var(--color-border); transition: box-shadow var(--transition);
}
.header.is-stuck { box-shadow: 0 1px 20px -12px rgba(0, 0, 0, 0.18); }
.header__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; height: var(--header-h); gap: clamp(0.75rem, 1.6vw, var(--space-8)); }
.logo--wordmark { transition: none; }

/* Collapse the announcement bar once scrolled */
.announcement { overflow: hidden; max-height: 4rem; transition: max-height var(--transition), opacity var(--transition); }
.is-scrolled .announcement { max-height: 4rem; opacity: 1; }

/* ===== Transparent header over the home hero video — solid once scrolled ===== */
.header, .announcement { transition: background-color var(--transition), color var(--transition), border-color var(--transition), backdrop-filter var(--transition), box-shadow var(--transition); }
/* Home header stays solid like every other page (no transparent-over-hero treatment);
   the hero now sits below the bar rather than being tucked under it. */

/* Desktop keeps the condensed nav when stuck; hamburger stays mobile-only */
.header__actions .burger { order: 99; }
.header__left { grid-column: 1; display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.header__actions { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: clamp(0.45rem, 0.9vw, var(--space-4)); min-width: 0; }

.logo { display: inline-flex; align-items: center; justify-content: center; color: var(--color-fg); }
.logo--wordmark { width: 10.5rem; min-width: 8.5rem; }
.logo__img { width: 100%; height: auto; display: block; }

.nav { grid-column: 2; display: flex; justify-content: flex-start; align-items: center; gap: clamp(0.65rem, 1.35vw, 1.5rem); min-width: 0; transition: gap var(--transition); }
.nav a, .nav-more__btn { font-size: 0.875rem; font-weight: 400; letter-spacing: 0.01em; text-transform: none; position: relative; padding-block: var(--space-2); color: var(--color-fg); white-space: nowrap; transition: font-size var(--transition); }
.nav a:hover, .nav-more__btn:hover { color: var(--jq-ink-hover); }
.nav a::after, .nav-more__btn::after { content: ""; position: absolute; left: 0; bottom: 6px; width: 0; height: 1px; background: currentColor; transition: width var(--transition); }
.nav a:hover::after, .nav a[aria-current="page"]::after, .nav-more:hover .nav-more__btn::after, .nav-more__btn[aria-current="page"]::after { width: 100%; }
/* Le lien de nav ACTIF est du texte : terracotta lisible, pas terracotta de remplissage. */
.nav a[aria-current="page"], .nav-more__btn[aria-current="page"] { color: var(--accent-text, var(--accent)); }
.nav-more { position: relative; }
.nav-more__btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-more__btn::before { content: ""; width: 0.28rem; height: 0.28rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-1px); order: 2; }
.nav-more__menu {
 position: absolute; top: calc(100% + 0.5rem); right: 50%; min-width: 12rem; padding: var(--space-3);
 background: var(--color-bg); border: 1px solid var(--color-border); box-shadow: var(--shadow);
 opacity: 0; visibility: hidden; transform: translate(50%, -6px); transition: var(--transition-fast); z-index: 20;
}
.nav-more:hover .nav-more__menu, .nav-more:focus-within .nav-more__menu { opacity: 1; visibility: visible; transform: translate(50%, 0); }
.nav-more__menu a { display: block; padding: var(--space-2) var(--space-3); }

.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 0; color: var(--color-fg); transition: opacity var(--transition-fast), width var(--transition), height var(--transition); }
.icon-btn:hover { opacity: 0.58; }
.icon-btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.header-search {
 width: min(12rem, 14vw); min-width: 7.25rem; height: 2rem; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3);
 border-bottom: 1px solid var(--color-border); color: var(--color-muted); font-size: 0.82rem; font-weight: 500; line-height: 1;
 transition: height var(--transition), font-size var(--transition);
}
.header-search:hover { color: var(--color-fg); }
.header-search svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.15; }

.lang { display: inline-flex; align-items: center; color: var(--color-fg); }
.lang-select {
 position: relative; display: inline-flex; align-items: center;
}
.lang-select__button {
 display: inline-flex; align-items: center; gap: 0.28rem;
 padding: 0.2rem 0; border: 0; border-radius: 0;
 background: transparent; color: var(--color-fg); font: inherit; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
 letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
 transition: opacity var(--transition-fast);
}
.lang-select__button:hover { opacity: 0.6; }
.lang-select__flag { display: none; }
.lang-select__code { white-space: nowrap; }
.lang-select__chevron { width: 0.28rem; height: 0.28rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-1px); opacity: 0.7; }
.lang-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 0; display: inline-block; vertical-align: middle; }
.lang-select__menu button span { display: inline-flex; align-items: center; }
.lang-select__menu {
 position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 45; min-width: 6.5rem;
 display: grid; padding: 0; background: var(--color-bg); border: 1px solid var(--color-fg);
 opacity: 0; visibility: hidden; transform: translateY(-4px);
 transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
}
.lang-select.is-open .lang-select__menu { opacity: 1; visibility: visible; transform: none; }
.lang-select__menu button {
 display: flex; align-items: center; gap: 0.5rem;
 padding: 0.52rem 0.7rem; text-align: left; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
 border-bottom: 1px solid var(--color-border); transition: background var(--transition-fast);
}
.lang-select__menu button:last-child { border-bottom: 0; }
.lang-select__menu button:hover { background: var(--color-surface); }
.lang-select__menu button strong { line-height: 1; }
.lang-select__menu button[aria-selected="true"] { background: var(--color-fg); color: var(--color-bg); }

/* Currency is a display preference only; checkout and order data remain MAD. */
.locale-tools { display: inline-flex; align-items: center; gap: 0.7rem; }
.currency-select { position: relative; display: inline-flex; align-items: center; color: var(--color-fg); }
.currency-select__control {
 min-height: 36px; padding: 0.2rem 0.15rem; border: 0; border-bottom: 1px solid transparent;
 border-radius: 0; background: transparent; color: inherit; font-family: var(--font-mono);
 font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; line-height: 1;
 text-transform: uppercase; cursor: pointer; transition: border-color var(--transition-fast), opacity var(--transition-fast);
 direction: ltr;
}
.currency-select__control:hover { border-bottom-color: currentColor; opacity: 0.65; }
.currency-select__control:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.currency-select__note { display: block; color: var(--color-muted); font-size: 0.58rem; letter-spacing: 0.04em; line-height: 1.3; text-align: end; white-space: nowrap; }
.currency-select--checkout { display: grid; justify-items: end; gap: 0.15rem; margin-inline-start: auto; }
.drawer__locale { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.cart-drawer__tools { display: inline-flex; align-items: center; gap: var(--space-3); }
[dir="rtl"] .currency-select--checkout { justify-items: start; }

.cart-btn { position: relative; width: 2.65rem; height: 2.65rem; }
.cart-btn .cart-svg { width: 21px; height: 20px; stroke: none; fill: currentColor; overflow: visible; }
.cart-btn .cart-svg path { stroke: none; fill: currentColor; }
.cart-count {
 position: absolute;
 top: 0.1rem;
 right: 0;
 min-width: 19px;
 height: 19px;
 padding: 0 5px;
 border-radius: 50% 50% 50% 2px;
 background: var(--black);
 color: var(--white);
 font-size: 0.62rem;
 font-weight: 700;
 line-height: 1;
 display: grid;
 place-items: center;
 opacity: 0;
 transform: scale(0.64);
 transform-origin: 85% 15%;
 transition: var(--transition);
}
.cart-count.is-visible { opacity: 1; transform: scale(1); }
/* Header favourites heart + saved-count badge (mirrors the cart count). */
.wishlist-btn { position: relative; }
.wishlist-btn.has-items .wishlist-count { opacity: 1; transform: scale(1); }
.burger { display: none; }

/* ---- drawer mobile ---- */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(360px, 78%); z-index: 90; background: var(--color-bg); transform: translateX(100%); transition: transform var(--transition); padding: var(--space-16) var(--space-8) var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); box-shadow: var(--shadow); overflow-y: auto; }
.drawer.is-open { transform: translateX(0); }
.drawer a { font-family: var(--font-display); font-size: var(--fs-lg); padding-block: var(--space-2); transition: opacity .12s ease, background-color .12s ease; border-radius: 6px; }
/* Instant tap acknowledgement on touch so navigation never feels "stuck" */
.drawer a:active { opacity: .5; background: rgba(0,0,0,.05); }
a, button, .btn, .icon-btn, [role="button"], summary, label { touch-action: manipulation; }
.drawer__close { position: absolute; top: var(--space-4); right: var(--space-4); }
.drawer__lang { order: -1; margin: 0 0 var(--space-4); font-size: var(--fs-sm); }
.drawer__group { display: flex; flex-direction: column; gap: var(--space-1); }
.drawer__group + .drawer__group { margin-top: var(--space-4); }
.drawer__title { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-accent-text); opacity: 1; margin: var(--space-2) 0 var(--space-2); }
.overlay { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

/* ---- recherche ---- */
.search-overlay {
 position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,0.34);
 opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition), visibility var(--transition);
}
.search-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
body.has-search-overlay { overflow: hidden; }
.search-mega {
 width: min(100%, 100vw); min-height: min(620px, 100vh);
 background: var(--color-bg); color: var(--color-fg); border-bottom: 1px solid var(--black);
 transform: translateY(-18px); transition: transform var(--transition); box-shadow: var(--shadow);
}
.search-overlay.is-open .search-mega { transform: none; }
.search-mega__top {
 min-height: var(--header-h); display: grid; grid-template-columns: minmax(7rem, 0.25fr) minmax(260px, 0.75fr) auto;
 align-items: center; gap: var(--space-8); padding: var(--space-4) var(--gutter); border-bottom: 1px solid var(--color-border);
}
.search-box { display: flex; align-items: center; gap: var(--space-3); width: 100%; border-bottom: 1px solid var(--black); padding-block: var(--space-2); }
.search-box input { flex: 1; min-width: 0; width: 100%; border: none; background: none; font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 4rem); line-height: 1; color: var(--color-fg); }
.search-box input:focus { outline: none; }
.search-box .icon-btn { flex: 0 0 auto; }
.search-mega__body { display: grid; grid-template-columns: minmax(220px, 0.28fr) 1fr; gap: clamp(2rem, 5vw, var(--space-16)); padding: var(--space-10) var(--gutter) var(--space-12); }
.search-mega__suggestions { display: grid; align-content: start; gap: var(--space-5); }
.search-mega__suggestions h2 { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.search-mega__suggestions button { justify-self: start; font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 500; letter-spacing: 0.02em; transition: transform var(--transition-fast), color var(--transition-fast); }
.search-mega__suggestions button:hover { transform: translateX(5px); color: var(--terracotta); }
.search-mega__results { min-width: 0; display: grid; gap: var(--space-4); }
.search-mega__hint { color: var(--color-muted); font-size: var(--fs-sm); }
.search-result-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: var(--space-4); }
.search-result-card { display: grid; align-content: start; gap: 0.12rem; opacity: 0; animation: card-in 0.55s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 55ms); }
.search-result-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--color-surface-2); margin-bottom: var(--space-2); }
.search-result-card span { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.search-result-card strong { font-size: var(--fs-xs); line-height: 1.2; text-transform: uppercase; }
.search-result-card em { font-style: normal; font-size: var(--fs-xs); color: var(--color-muted); }
.search-mega__all { justify-self: start; margin-top: var(--space-3); border-bottom: 1px solid currentColor; font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================================
 PANIER (drawer)
 ============================================================ */
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 95; background: var(--color-bg); transform: translateX(100%); transition: transform var(--transition); display: flex; flex-direction: column; box-shadow: var(--shadow); }
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6) var(--space-6) var(--space-4); border-bottom: 1px solid var(--color-border); }
.cart-drawer__head h2 { font-size: var(--fs-lg); }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-6); }
.cart-drawer__foot { padding: var(--space-5) var(--space-6) var(--space-6); border-top: 1px solid var(--color-border); }
.cart-empty { text-align: center; padding: var(--space-16) 0; color: var(--color-muted); display: grid; gap: var(--space-6); place-items: center; }
.cart-progress { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.cart-progress p { font-size: var(--fs-xs); color: var(--color-muted); margin: 0; }
.cart-progress__track { height: 2px; background: var(--color-border); overflow: hidden; }
.cart-progress__track span { display: block; height: 100%; background: var(--color-fg); transition: width 0.35s var(--ease-out); }
.cart-progress__meta { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 0.62rem; color: var(--color-muted); letter-spacing: 0.06em; text-transform: uppercase; }

.cart-line { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.cart-line__img img { border-radius: var(--radius); }
.cart-line__name { font-weight: 500; }
.cart-line__variant { font-size: var(--fs-xs); color: var(--color-muted); margin-top: 2px; }
.cart-line__price { font-size: var(--fs-sm); margin-top: var(--space-1); }
.cart-line__row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); }
.cart-line__remove { font-size: var(--fs-xs); color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; }
.cart-line__remove:hover { color: var(--terracotta); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius); }
.qty__btn { width: 30px; height: 30px; display: grid; place-items: center; font-size: var(--fs-md); color: var(--color-muted); transition: color 0.15s ease, transform 0.12s ease; }
.qty__btn:focus-visible { outline: 1px solid var(--color-fg); outline-offset: 2px; }
.qty__btn:active { transform: scale(0.92); }
.qty__btn:hover { color: var(--color-fg); }
.qty__n { min-width: 26px; text-align: center; font-size: var(--fs-sm); }

.cart-sub { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-md); }
.cart-sub strong { font-family: var(--font-display); font-size: var(--fs-lg); }
.cart-note { font-size: var(--fs-xs); color: var(--color-muted); margin: var(--space-2) 0 var(--space-5); }

/* ─── "Complétez votre pièce" cross-sell (drawer + checkout step 1) ─── */
.cart-upsell { border-top: 1px solid var(--color-border); margin-top: var(--space-5); padding-top: var(--space-4); }
.cart-upsell__title { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-2); }
.cart-upsell__nudge { font-size: var(--fs-xs); color: var(--color-fg); margin-bottom: var(--space-3); }
.cart-upsell__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.cart-upsell--checkout { margin-top: var(--space-6); }
.upsell-card { display: flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-border); padding: var(--space-2); min-width: 0; }
.upsell-card__img { flex: 0 0 44px; }
.upsell-card__img img { width: 44px; height: 56px; object-fit: cover; display: block; }
.upsell-card__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.upsell-card__name { font-size: 0.68rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.upsell-card__price { font-size: 0.68rem; color: var(--color-muted); }
.upsell-card__chip { font-size: 0.56rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--jq-coral, #c96f4a); }
.upsell-card__add { flex: 0 0 28px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-strong); border-radius: 999px; font-size: 1rem; line-height: 1; background: var(--color-bg); transition: background var(--transition-fast), color var(--transition-fast); }
.upsell-card__add:hover { background: var(--color-fg); color: var(--color-bg); }
[dir="rtl"] .upsell-card { flex-direction: row-reverse; }

/* Honest scarcity lines (real inventory 1–5) */
.cart-line__scarcity, .co-line__scarcity { font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--jq-coral, #c96f4a); margin-top: 2px; }

/* Charm-tier discount rows */
.cart-foot__discount { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); font-size: var(--fs-xs); }
.cart-foot__discount span { letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.cart-foot__discount strong { font-weight: 500; }

/* — Cart drawer accordions + secure-payment logos (Jacquemus style) — */
.cart-acc { border-top: 1px solid var(--color-border); }
.cart-acc__item { border-bottom: 1px solid var(--color-border); }
.cart-acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0; font-size: var(--fs-sm); color: var(--color-fg); background: none; text-align: left; }
.cart-acc__btn svg { width: 12px; height: 12px; transition: transform var(--transition-fast); }
.cart-acc__item.is-open .cart-acc__btn svg { transform: rotate(180deg); }
.cart-acc__panel { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.cart-acc__item.is-open .cart-acc__panel { max-height: 320px; }
.cart-acc__panel > div { padding: 0 0 var(--space-4); font-size: var(--fs-xs); color: var(--color-muted); line-height: 1.55; }
.cart-acc__panel a { text-decoration: underline; text-underline-offset: 2px; }
.pay-logos { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding-bottom: var(--space-2); }
.pay-logos img { height: 22px; width: auto; display: block; }
.cart-foot__total { display: flex; align-items: baseline; justify-content: space-between; margin: var(--space-4) 0 var(--space-1); }
.cart-foot__total span { font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; }
.cart-foot__total small { display: block; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--color-muted); text-transform: uppercase; }
.cart-foot__total strong { font-family: var(--font-display); font-size: var(--fs-lg); }
.cart-drawer__foot .btn { margin-top: var(--space-3); }

/* ============================================================
 CHECKOUT (page — 3 steps, no account)
 ============================================================ */
.checkout { padding-block: var(--space-8) var(--space-24); }
.checkout__loading { min-height: 60vh; }
.checkout__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-10); }
.checkout__logo { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.14em; font-size: 1.4rem; text-transform: uppercase; }
.checkout__steps { display: flex; align-items: center; gap: clamp(1rem, 4vw, 3rem); list-style: none; margin: 0; padding: 0; }
.checkout__step { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.checkout__step-n { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--color-border-strong); border-radius: 50%; font-size: 0.66rem; }
.checkout__step.is-active { color: var(--color-fg); }
.checkout__step.is-active .checkout__step-n { border-color: var(--color-fg); background: var(--color-fg); color: var(--color-bg); }
.checkout__step.is-done { color: var(--color-fg); cursor: pointer; }
.checkout__step.is-done .checkout__step-n { border-color: var(--color-fg); }
.checkout__step[data-goto]:hover { color: var(--terracotta); }
.checkout__grid { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.checkout__main { min-width: 0; }
.checkout__main--done { max-width: 620px; margin-inline: auto; text-align: center; padding-block: var(--space-16); }
.co-h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; margin-bottom: var(--space-8); }

/* Cart lines on the checkout page */
.co-lines { border-top: 1px solid var(--color-border); }
.co-line { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.co-line__img img { width: 80px; height: 100px; object-fit: cover; background: var(--paper-card); }
.co-line__name { font-weight: 500; }
.co-line__var { font-size: var(--fs-xs); color: var(--color-muted); margin-top: 2px; }
.co-line__price { font-size: var(--fs-sm); margin-top: var(--space-2); }
.co-line__ctl { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); max-width: 220px; }
.co-line__remove { font-size: var(--fs-xs); color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; }
.co-line__remove:hover { color: var(--terracotta); }
.co-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-10); flex-wrap: wrap; }
.co-empty { text-align: center; display: grid; gap: var(--space-6); place-items: center; padding: var(--space-20) 0; color: var(--color-muted); }

/* Shipping form */
.co-form__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.co-field.is-err input, .co-field.is-err textarea { border-color: var(--terracotta); }
.co-field__err { display: block; min-height: 0; font-size: 0.66rem; color: var(--terracotta); margin-top: 4px; }

/* Payment options */
.co-pay { display: grid; gap: var(--space-3); }
.pay-option { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); cursor: pointer; transition: border-color var(--transition-fast); }
.pay-option:hover { border-color: var(--color-border-strong); }
.pay-option.is-selected { border-color: var(--color-fg); }
.pay-option input { accent-color: var(--color-fg); width: 16px; height: 16px; }
.pay-option__logo { display: flex; align-items: center; justify-content: flex-start; gap: 5px; min-width: 40px; flex-wrap: wrap; max-width: 96px; }
.pay-option__logo img { max-height: 22px; width: auto; }
.cart-acc__note { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-muted); line-height: 1.55; }
.pay-option__name { display: block; font-size: var(--fs-sm); }
.pay-option__txt { display: block; font-size: var(--fs-xs); color: var(--color-muted); margin-top: 2px; }
.pay-details { border: 1px solid var(--color-border); border-top: 0; padding: var(--space-5); background: var(--paper-card); display: grid; gap: var(--space-3); }
.pay-details__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-sm); }
.pay-details__row > span { min-width: 78px; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.pay-details__row code { font-family: var(--font-mono, monospace); letter-spacing: 0.04em; }
.pay-copy { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--color-border-strong); padding: 3px 8px; color: var(--color-fg); }
.pay-copy:hover { background: var(--color-fg); color: var(--color-bg); }
.pay-eur { font-size: var(--fs-sm); font-weight: 500; }
.pay-note { font-size: var(--fs-xs); color: var(--color-muted); }
.pay-note--fee { color: var(--color-fg); background: #faf6f0; border: 1px solid var(--color-border); padding: 0.55rem 0.7rem; }

/* Order summary */
.co-sum { border: 1px solid var(--color-border); padding: var(--space-6); position: sticky; top: 100px; }
.co-sum__title { font-size: var(--fs-md); margin-bottom: var(--space-5); }
.co-sum__items { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); max-height: 320px; overflow-y: auto; }
.co-sum__item { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--space-3); align-items: center; }
.co-sum__thumb img { width: 48px; height: 60px; object-fit: cover; background: var(--paper-card); }
.co-sum__name { display: block; font-size: var(--fs-sm); }
.co-sum__var, .co-sum__qty { font-size: var(--fs-xs); color: var(--color-muted); }
.co-sum__price { font-size: var(--fs-sm); white-space: nowrap; }
.co-sum__rows { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.co-sum__row { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--color-muted); }
.co-sum__row--discount span:last-child { color: var(--color-fg); }
.co-sum__progress { margin: var(--space-3) 0; padding: var(--space-3) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-muted); }
.co-sum__progress p { margin-bottom: var(--space-2); }
.co-sum__total { display: flex; align-items: baseline; justify-content: space-between; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.co-sum__total span { font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; }
.co-sum__total small { display: block; font-size: 0.58rem; color: var(--color-muted); letter-spacing: 0.1em; }
.co-sum__total strong { font-family: var(--font-display); font-size: var(--fs-lg); text-align: right; }
.co-sum__eur { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--color-muted); }
/* CODE PROMO — dans le recapitulatif, sous les totaux. Discret par defaut : un champ
   promo trop voyant fait partir la cliente chercher un code ailleurs au lieu d'acheter. */
.co-coupon { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.co-coupon__label { display: block; font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-2); }
.co-coupon__row { display: flex; gap: var(--space-2); }
.co-coupon__row input {
  flex: 1 1 auto; min-width: 0; padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-fg);
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
}
.co-coupon__btn {
  flex: 0 0 auto; padding: 0.6rem 1rem; border: 1px solid var(--color-fg); background: var(--color-fg);
  color: var(--cream); font-family: var(--font-display); font-size: 11px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; cursor: pointer;
}
.co-coupon__btn[disabled] { opacity: 0.55; cursor: default; }
.co-coupon__msg { margin: var(--space-2) 0 0; font-size: var(--fs-sm); line-height: 1.5; }
.co-coupon__msg.is-err { color: var(--color-muted); }
.co-coupon__msg.is-ok { color: var(--color-fg); }
/* Applique : on montre le code, pas un champ vide — la cliente doit voir que c'est pris. */
.co-coupon--on { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.co-coupon__tag {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--color-fg); padding: 0.28rem 0.5rem;
}
.co-coupon__ok { font-size: var(--fs-sm); color: var(--color-muted); }
.co-coupon__remove {
  margin-inline-start: auto; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--fs-sm); color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px;
}

.co-terms { font-size: var(--fs-xs); color: var(--color-muted); margin-top: var(--space-5); line-height: 1.5; }
.co-terms a { text-decoration: underline; text-underline-offset: 2px; }

/* Payment-step trust reassurance */
.co-reassure { list-style: none; margin: var(--space-4) 0 var(--space-2); padding: var(--space-3) var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); background: var(--color-bg-soft, #faf7f1); border: 1px solid var(--color-border); border-radius: 8px; }
.co-reassure li { position: relative; padding-left: 18px; font-size: var(--fs-xs); color: var(--color-fg); }
.co-reassure li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--color-accent, #de733d); font-weight: 700; }
.co-reassure__note { font-size: var(--fs-xs); color: var(--color-muted); line-height: 1.5; margin: var(--space-2) 0 0; }

/* Confirmation */
.co-done__check { width: 54px; height: 54px; margin: 0 auto var(--space-6); display: grid; place-items: center; border: 1px solid var(--color-fg); border-radius: 50%; font-size: 1.4rem; }
.co-done__no { text-align: center; margin: 0 auto var(--space-3); font-size: var(--fs-sm); letter-spacing: .02em; }
.co-done__no strong { font-family: var(--font-display); letter-spacing: .04em; }
.co-done__msg { max-width: 44ch; margin: 0 auto var(--space-4); color: var(--color-muted); }
.co-done__emailed { max-width: 44ch; margin: 0 auto var(--space-8); font-size: var(--fs-xs); color: var(--color-muted); }
.co-done__actions { display: grid; gap: var(--space-4); max-width: 340px; margin-inline: auto; }

/* PDP: honest "what the YZA girls say" link (replaces a decorative 5-star row when there is no real aggregate) */
.pp-rating-note { font-size: var(--fs-sm); color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; }

/* Order bump (payment step) — one unchecked low-ticket add above Place order */
.co-bump { display: flex; align-items: center; gap: var(--space-3); border: 1px solid var(--color-border); padding: var(--space-3); margin: var(--space-5) 0; cursor: pointer; transition: border-color var(--transition-fast); }
.co-bump.is-on { border-color: var(--color-border-strong); }
.co-bump input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--jq-ink, #2e2e2e); }
.co-bump img { flex: 0 0 44px; width: 44px; height: 56px; object-fit: cover; display: block; }
.co-bump__body { display: grid; gap: 2px; min-width: 0; }
.co-bump__kicker { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.co-bump__name { font-size: var(--fs-sm); font-weight: 500; }
.co-bump__txt { font-size: var(--fs-xs); color: var(--color-muted); }
[dir="rtl"] .co-bump { flex-direction: row-reverse; }

/* Post-order add-on (done screen) — "add to my parcel" via WhatsApp */
.co-addon { border-top: 1px solid var(--color-border); margin-top: var(--space-10); padding-top: var(--space-8); text-align: center; }
.co-addon__title { font-size: var(--fs-md); }
.co-addon__sub { font-size: var(--fs-xs); color: var(--color-muted); max-width: 46ch; margin: var(--space-2) auto var(--space-6); }
.co-addon__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); max-width: 460px; margin-inline: auto; }
.co-addon .upsell-card { flex-direction: column; align-items: stretch; text-align: left; }
.co-addon__btn { margin-top: var(--space-2); min-height: 40px; }
.co-addon__btn[disabled] { opacity: 0.6; pointer-events: none; }
@media (max-width: 560px) { .co-addon__grid { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .checkout__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .co-sum { position: static; order: -1; }
  .checkout__head { margin-bottom: var(--space-6); }
}
@media (max-width: 560px) {
  .co-form__two { grid-template-columns: 1fr; gap: 0; }
  .checkout__step-t { display: none; }
  .co-actions { flex-direction: column-reverse; align-items: stretch; }
  .co-actions .btn { width: 100%; }
  .checkout__head .currency-select--checkout { width: 100%; justify-items: start; margin-inline-start: 0; }
  .checkout__head .currency-select__note { text-align: start; white-space: normal; }
}

/* ============================================================
 HERO (accueil)
 ============================================================ */
.hero { position: relative; min-height: 720px; display: flex; align-items: flex-start; color: var(--color-fg); background: var(--color-bg); overflow: hidden; border-bottom: 1px solid var(--color-border); }
.hero__img { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 340px; z-index: 1; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.hero__scrim { display: none; }
.hero__content { position: relative; z-index: 2; padding-top: var(--space-16); padding-bottom: var(--space-12); max-width: 980px; margin-inline: auto; text-align: center; }
.hero__content .eyebrow { color: var(--color-fg); opacity: 1; }
.hero__content h1 { font-size: 4.5rem; font-weight: 400; margin: var(--space-4) 0 var(--space-5); white-space: pre-line; text-wrap: balance; line-height: 0.96; }
.hero__content p { font-size: var(--fs-md); max-width: 46ch; margin: 0 auto var(--space-8); color: var(--color-fg); }
.hero__cta { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
/* Discreet scarcity note under the hero CTAs - small, wide-tracked, low-contrast */
.hero__editions { margin: var(--space-5) 0 0; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--color-fg); opacity: 0.6; white-space: normal; }
/* Win over the generic .hero--video body-paragraph rules (styles.css ~2260/2349) so the scarcity
 note stays a discreet, faded footnote instead of matching the hero copy's size and brightness.
 Subtlety comes from the color alpha, not opacity, so the inherited text-rise entrance still fades it in. */
.hero--video .hero__content p.hero__editions:not(.eyebrow):not(.hero__subheading) {
 margin: var(--space-3) 0 0; /* kill the generic `.hero__content p { margin:0 auto }` centering → flush-left under the CTA */
 max-width: 520px;
 font-family: var(--font-mono); /* match the mono CTA directly above it */
 font-size: 0.625rem; /* ~10px - smaller, quieter than the CTA */
 font-weight: 400;
 letter-spacing: 0.03em; /* sentence-case caption: subtle tracking, fits one line on mobile and wraps cleanly if not */
 color: rgba(246, 246, 246, 0.5); /* faded - discretion from the alpha, not opacity (entrance fade owns opacity) */
 padding-top: 0;
 border-top: 0;
}

/* ============================================================
 GRILLE CATÉGORIES
 ============================================================ */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.cat-card { position: relative; overflow: hidden; border-radius: var(--radius); display: block; }
.cat-card .media { aspect-ratio: 3 / 4; }
.cat-card img { transition: transform 0.7s var(--ease-out); }
.cat-card:hover img { transform: scale(1.05); }
.cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 55%); }
.cat-card__cap { position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); z-index: 2; color: var(--white); }
.cat-card__cap h3 { font-size: var(--fs-xl); }
.cat-card__cap span { font-size: var(--fs-sm); opacity: 0.9; }
/* Model-on-default, product-still-on-hover (bags) */
.cat-card--swap .media { position: relative; }
.cat-card--swap .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-card--swap .cat-card__hover { opacity: 0; transition: opacity 0.6s var(--ease-out); }
.cat-card--swap:hover .cat-card__hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cat-card--swap .cat-card__hover { transition: none; } }

/* ============================================================
 GRILLE & CARTE PRODUIT
 ============================================================ */
/* JACQUEMUS PRODUCT GRID — full-bleed, image-led, hover-reveal.
   Full-bleed: break out of any container to the viewport edges. html/body use
   overflow-x: clip, so 100vw never introduces a horizontal scrollbar. */
.product-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
  width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); padding: 5px;
}
/* Collection grid: a small page gutter so card text + images are never glued to the
   viewport edge (client: "texte collé à gauche"). Inner 5px gaps stay tight/editorial. */
body[data-page="collections"] .product-grid:not(.collection-grid--bag-families) {
  padding-inline: clamp(0.85rem, 2.6vw, 2.25rem);
}
.product-card { position: relative; display: block; min-width: 0; }
.product-card__media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-card); border-radius: 0; margin: 0; }
/* Client 2026-07-22: product shots are white-on-white, so neighbouring tiles bled into
   each other. A hairline separates them. 1px on standard screens (0.5px there rounds to
   0 or renders blurry); a true half-pixel — i.e. exactly one device pixel — on retina,
   which is the crisp line asked for. box-shadow rather than border so the frame sits
   outside the overflow:hidden box and never eats into the image. */
.product-card__media { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .product-card__media { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.09); }
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* second image cross-fades in on hover (Jacquemus image swap) */
.product-card__media .product-card__img--hover { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease-out); }
/* `:focus-within` autant que `:hover` (2026-08-06). La photo portee n'existait que pour
   la souris : au clavier, la carte se focalisait sans jamais reveler l'image. Avec 70
   coloris desormais photographies, laisser ce contenu inaccessible au clavier serait
   d'autant plus dommage. Le tactile, lui, passe par .is-touch-preview. */
.product-card:hover .product-card__img--hover,
.product-card:focus-within .product-card__img--hover { opacity: 1; }
/* Hover-preview video on a product card (client: "hovering should preview 4 sec of this video"). */
.product-card__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s var(--ease-out); pointer-events: none; z-index: 1; }
.product-card__media.has-hover-video:hover .product-card__vid { opacity: 1; }

/* Collection grids: a small side gutter so tiles + name/price aren't glued to the screen
   edge (kept tight to preserve the near-full-bleed editorial feel). */
body[data-page="collections"] .product-grid:not(.collection-grid--bag-families) { padding-inline: clamp(0.9rem, 2.6vw, 2.25rem); }

/* Name + price share one row. On touch they sit statically below the image;
   on hover-capable screens they overlay the image bottom and fade in. */
.product-card__info {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-3); min-width: 0; padding: var(--space-2) 2px 0; color: var(--color-fg);
}
.product-card__name {
  font-family: var(--font-display); font-weight: 400; text-transform: none;
  font-size: 14px; letter-spacing: 0.4px; line-height: 1.2; color: var(--color-fg);
  /* Never crop the product name — let it wrap fully (esp. on mobile/tablet). */
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word;
}
.product-card__price { font-family: var(--font-display); font-weight: 400; font-size: 12px; letter-spacing: 0.4px; color: var(--color-fg); white-space: nowrap; }
/* On a markdown the live (reduced) price turns Jacquemus sale-red; the struck
   original keeps the muted treatment from .was below. */
.product-card__price:has(s), .offer-card__price:has(s) { color: var(--jq-sale); }
.product-card__limited { display: block; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jq-coral); }

/* Scarcity nudge — Jacquemus "coming soon" treatment: bare micro-caps, top-left of
   the image, no chip. Shown on every in-stock card (hidden when almost-gone/sold-out,
   where the more specific badge takes over). */
/* Pastille de remise — operation -50 % La Nouvelle Vague (2026-08-06).
   Posee en HAUT A DROITE : le coin haut-gauche est deja pris par « Plus que quelques
   pieces » et le coeur des favoris occupe la droite plus bas. Aplat d'encre plutot que
   rouge solde : la maison n'a pas de code promo criard, et l'encre sur photo claire tient
   le contraste (blanc sur #292725 = 14,9) sans jurer avec le reste de la grille. */
.product-card__sale {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  padding: 0.32rem 0.5rem; line-height: 1;
  font-family: var(--font-display); font-size: 10px; font-weight: 400;
  letter-spacing: 0.1em; white-space: nowrap;
  color: #FFFFFF; background: var(--color-fg);
  pointer-events: none;
}
/* Le coeur des favoris est au meme coin : on le decale sous la pastille quand elle est la. */
.product-card:has(.product-card__sale) .product-card__wish { top: 38px; }
/* Ancien prix barre : discret, l'oeil doit tomber sur le prix courant. */
.product-card__price s.was, .product-info__price s.was {
  opacity: 0.55; margin-inline-end: 0.35em; text-decoration-thickness: 1px;
}
.product-card__few {
  position: absolute; top: 10px; left: 11px; z-index: 4;
  font-family: var(--font-display); font-size: 9.5px; font-weight: 400;
  /* « Plus que quelques pieces » etait en BLANC a 68 % pose sur des packshots... blancs.
     Contraste mesure 1,10:1 : le pire du site, une mention de rarete que personne ne
     pouvait lire. Le blanc venait d'une epoque ou la vignette avait un fond sombre.
     On reprend le gris secondaire, qui est deja ce que la version « ambiance » utilise
     juste en dessous — les deux disent enfin la meme chose. */
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted);
  pointer-events: none;
}

/* Wishlist heart — bare charcoal, no chip. Visible top-right on touch; fades in
   bottom-right on hover-capable screens. */
.product-card__wish {
  position: absolute; top: 8px; right: 8px; left: auto; z-index: 5;
  width: 28px; height: 28px; display: grid; place-items: center;
  color: var(--color-fg); background: none; border: 0; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.product-card__wish:hover { transform: none; background: none; color: var(--jq-ink-hover); }
.product-card__wish svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.product-card__wish.is-active { color: var(--accent); }
.product-card__wish.is-active svg { fill: currentColor; }

/* Overlay + hover-reveal only on wide, hover-capable screens. Narrow widths
   (real mobile, or a resized desktop window) keep name/price/heart visible. */
@media (min-width: 861px) and (hover: hover) {
  .product-card__info {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    padding: 12px 12px 14px;
    background: linear-gradient(to top, rgba(255,255,255,0.92), rgba(255,255,255,0));
    opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease-out);
  }
  .product-card:hover .product-card__info { opacity: 1; pointer-events: auto; }
  .product-card__wish { top: 8px; bottom: auto; right: 8px; opacity: 0; transition: opacity 0.25s var(--ease-out); }
  .product-card:hover .product-card__wish { opacity: 1; }
}
.product-card__stock,
.product-card__sold {
  position: absolute; right: 0.62rem; bottom: 0.62rem; z-index: 4;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.32rem 0.5rem; background: rgba(255, 255, 255, 0.88); color: var(--color-fg);
  border: 1px solid var(--color-border); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.product-card__sold { inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: var(--cream); border: 0; font-size: 0.75rem; }
.product-card.is-sold-out .product-card__img { filter: grayscale(0.25); }
.product-card__row, .product-card__short, .product-card__meta { display: none; }
.product-card__meta { flex-wrap: wrap; gap: 0.35rem; margin-top: var(--space-3); }
.product-card__meta span {
 display: inline-flex; align-items: center; min-height: 1.55rem; padding: 0.28rem 0.55rem;
 border: 1px solid rgba(0,0,0,0.18); border-radius: 0; font-size: 0.61rem; font-weight: 500;
 letter-spacing: 0.06em; text-transform: uppercase; background: transparent; color: var(--color-muted);
}
.product-card__meta span:first-child, .product-card__meta span:last-child { background: transparent; }

/* Image hover-swap + quick-view bar + pill badge (landing carousel style) */
.product-card__media .product-card__img--hover { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s var(--ease-out); }
/* Second exemplaire de la regle (elle est declaree deux fois dans la feuille) : le focus
   doit etre ajoute ICI AUSSI, sinon celle-ci, plus tardive, reannule l'autre. */
.product-card:hover .product-card__img--hover,
.product-card:focus-within .product-card__img--hover { opacity: 1; }
.product-card__quick {
 position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: rgba(33, 28, 20, 0.9); color: var(--white); text-align: center;
 font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
 padding: 0.72rem 0.5rem; transform: translateY(100%); transition: transform 0.4s var(--ease-out);
}
.product-card:hover .product-card__quick { transform: translateY(0); }
@media (hover: none) { .product-card__quick { display: none; } }
.product-card .badge {
 background: var(--color-fg); color: var(--color-bg); font-size: 0.6rem; font-weight: 700;
 letter-spacing: 0.06em; text-transform: uppercase; padding: 0.34rem 0.72rem; border-radius: 0; line-height: 1;
}

/* Product carousels are styled in the YZA PRODUCT CAROUSEL (Swiper) block
 near the end of this file. The old scroll-row implementation lived here
 and has been removed. */
@media (prefers-reduced-motion: reduce) {
 .product-card__quick, .product-card__img--hover { transition: none; }
}

/* ============================================================
   CLOTHING / READY-TO-WEAR LISTING GRID — Jacquemus reference
   View-by 3/4/6 density · static name/price/swatch dots below
   the image · circular quick-add "+" . Scoped to .product-card--tile
   so home carousels keep their hover-overlay treatment.
   ============================================================ */
/* View-by density — desktop only (tablet stays 3-up, phone 2-up); bag families keep their own columns */
@media (min-width: 1025px) {
  .product-grid:not(.collection-grid--bag-families)[data-density="3"] { grid-template-columns: repeat(3, 1fr); }
  .product-grid:not(.collection-grid--bag-families)[data-density="4"] { grid-template-columns: repeat(4, 1fr); }
  .product-grid:not(.collection-grid--bag-families)[data-density="6"] { grid-template-columns: repeat(6, 1fr); }
}

/* View-by control (toolbar) */
.grid-density { display: inline-flex; align-items: center; gap: 0.5rem; }
.grid-density__label { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.grid-density__btn {
  font-family: var(--font-display); font-size: 12px; line-height: 1; color: var(--color-muted);
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center; background: none;
  border: 1px solid transparent; border-radius: 0; transition: color var(--transition-fast), border-color var(--transition-fast);
}
.grid-density__btn:hover { color: var(--color-fg); }
.grid-density__btn.is-active { color: var(--color-fg); border-color: var(--color-fg); }
/* M-batch: never show the "Voir par 3/4/6" density switch on the bags page — only 3 of each collection/colour, bag families use their own layout. (Belt-and-braces alongside main.js hiding it.) */
body[data-page="collections"][data-collection="bags"] .grid-density { display: none !important; }

/* Tile media wrapper anchors the circular quick-add to the image bottom-right */
.product-card__media-wrap { position: relative; display: block; }
.product-card__add {
  position: absolute; right: 9px; bottom: 9px; z-index: 5;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-bg); color: var(--color-fg); border: 1px solid var(--color-border-strong);
  font-family: var(--font-display); font-size: 19px; font-weight: 300; line-height: 1; padding-bottom: 2px;
  transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.product-card__add:hover { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }

/* Swatch dots + "+N colors" */
.product-card__swatches { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 2px 0; min-height: 12px; }
.product-card__swatch-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22); }
/* Jawhara colourways (2026-07-21): the dots become real, operable buttons on products
   that have per-colour photography. Same 11px mark as the decorative dots so the card
   layout is unchanged — only the affordance and the a11y wiring are added. */
.product-card__swatches--live { padding-top: 8px; }
.product-card__swatch-dot--btn { padding: 0; border: 0; cursor: pointer; appearance: none; position: relative; transition: transform var(--transition-fast); }
.product-card__swatch-dot--btn:hover { transform: scale(1.18); }
.product-card__swatch-dot--btn.is-active { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28), 0 0 0 2px var(--color-bg), 0 0 0 3px var(--color-fg); }
.product-card__swatch-dot--btn:focus-visible,
.product-color__swatch:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .product-card__swatch-dot--btn { transition: none; } .product-card__swatch-dot--btn:hover { transform: none; } }
.product-card__more-colors { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.02em; color: var(--color-muted); margin-left: 2px; }

/* Tile text sits statically below the image (Jacquemus listing) */
.product-card--tile .product-card__info {
  position: static; opacity: 1; pointer-events: auto; background: none;
  flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 2px 0;
}
.product-card--tile .product-card__name { white-space: normal; }
.product-card--tile .product-card__swatches + .product-card__info { padding-top: 4px; }

/* Count superscript on the category banner (Jacquemus seoBanner) — small count tag, not scaled to the giant H1 */
.collection-head__count { font-size: clamp(0.8rem, 1.3vw, 1.15rem); font-weight: 400; color: var(--color-muted); vertical-align: super; margin-left: 0.45em; letter-spacing: 0; }
.collection-head__count:empty { display: none; }

/* Desktop hover: keep tile text static (override the carousel overlay), fade the quick-add in like the heart */
@media (min-width: 861px) and (hover: hover) {
  .product-card--tile .product-card__info {
    position: static; opacity: 1; pointer-events: auto; background: none; padding: 6px 2px 0;
  }
  .product-card--tile .product-card__swatches + .product-card__info { padding-top: 4px; }
  .product-card__add { opacity: 0; }
  .product-card:hover .product-card__add { opacity: 1; }
}

/* ===================================================================
   COLLECTION LISTING — reference (Talisman) layout, YZA brand kept.
   Taller 2:3 cards, uppercase name/price, hover "Add to bag" button,
   sold-out pill, airier 3-up grid. Page aesthetics scoped to
   body[data-page="collections"]; the button itself is styled on its
   class so it also renders cleanly on the wishlist grid.
   =================================================================== */
body[data-page="collections"] .product-card__media { aspect-ratio: 2 / 3; }
/* Les visuels catalogue normalisés sont cadrés en 3:4 (1100x1467) avec une marge
   blanche intégrée. Le cadre 2:3 des pages collection est plus étroit : en
   `cover`, il en rognait 11,1 % de largeur (5,5 % de chaque côté), soit les bords
   du produit — boucles d'oreilles coupées à gauche et à droite. `contain` montre
   la pièce entière. Le fond doit être le MÊME blanc que celui incrusté dans ces
   photos (#fff) : le cadre est en --paper-card (#f1efe9, beige), ce qui ferait
   apparaître deux bandes beiges au-dessus et en dessous d'une image blanche.
   DEUX arborescences sont concernées, pas une : les visuels normalisés ET les 144
   rendus catalogue Jawhara (tous 3:4, coins blancs 252-254). Ne cibler que la
   première laissait les cartes vêtement rognées, et le clic sur une pastille de
   couleur réécrit justement le src vers assets/catalog/… */
body[data-page="collections"] .product-card__img[src^="assets/normalized/"],
body[data-page="collections"] .product-card__img[src^="assets/catalog/jawhara-v1/"] { object-fit: contain; background: #fff; }

/* Airier grid (base gap is 5px) */
body[data-page="collections"] .product-grid:not(.collection-grid--bag-families) {
  gap: clamp(2rem, 3vw, 3rem) clamp(0.75rem, 1.6vw, 1.5rem);
}

/* Name + price — uppercase, tracked, static BELOW the image (never an overlay).
   Tile cards inherit their static/column reset from the .product-card--tile rules
   above, but bag-variant cards don't — on wide hover screens the base rule turns
   .product-card__info into an absolute image-bottom overlay, which then collides
   with the "Ajouter au panier" button. Force BOTH card types to sit under the
   product box, left-aligned (title, then price) to match the reference. */
body[data-page="collections"] .product-card--tile .product-card__info,
body[data-page="collections"] .product-card--bag-variant .product-card__info {
  position: static; opacity: 1; pointer-events: auto; background: none;
  flex-direction: column; align-items: flex-start; justify-content: flex-start;
  padding: var(--space-4) 2px var(--space-8); gap: 4px;
}
body[data-page="collections"] .product-card__name {
  text-transform: uppercase; letter-spacing: 0.13em; font-size: 12px; line-height: 1.45;
}
body[data-page="collections"] .product-card__price {
  text-transform: uppercase; letter-spacing: 0.13em; font-size: 12px;
}

/* « AJOUTER AU PANIER » — barre d'achat rapide posee sur le bas de l'image.
   REFONTE 2026-08-05 (cliente : « une seule ligne, plus premium »).
   Deux choses reglees d'un coup :
   1. UNE SEULE LIGNE. `white-space: nowrap` l'impose, mais imposer ne suffit pas : a
      11px avec 0,14em de chasse, les 17 signes d'« AJOUTER AU PANIER » demandent ~160px
      alors qu'une carte de grille 2 colonnes sur un telephone n'en offre que ~150. On
      passe donc la taille et la chasse en `clamp()` indexes sur la largeur reelle de la
      CARTE (`cqw`), pas sur celle de l'ecran : c'est la carte qui contraint, et une
      grille 6 colonnes sur grand ecran est plus etroite qu'une carte de telephone.
      Repli `@supports not (container-type)` en dessous pour les navigateurs sans
      requetes de conteneur.
   2. PLUS PREMIUM. Le liseré noir plein 1px et le blanc a 62 % faisaient « controle de
      formulaire » pose sur la photo. On garde l'angle vif (signature de la maison, on ne
      passe pas en coins arrondis) et on change la matiere : blanc quasi opaque, filet
      d'un dixieme d'encre, ombre portee tres basse qui decolle la barre de la photo.
      L'inversion a l'appui/au survol reste le geste fort. */
/* Le conteneur de requete est le parent DIRECT du bouton, et lui seul : `.product-card__media`
   est un FRERE du bouton, pas un ancetre — le declarer aussi n'aurait rien mesure et aurait
   ajoute du confinement a l'element qui porte les calques de survol, pour rien. */
.product-card__media-wrap { container-type: inline-size; }
.product-card__addbag {
  position: absolute; left: 50%; bottom: 14px; z-index: 5;
  transform: translate(-50%, 6px);
  width: calc(100% - 20px); max-width: 300px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0.78em 0.9em; line-height: 1;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(8.5px, 6.1cqw, 11px);
  letter-spacing: clamp(0.05em, 0.9cqw, 0.14em);
  text-transform: uppercase;
  color: var(--color-fg); background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(31, 31, 31, 0.10); border-radius: 0;
  box-shadow: 0 1px 1px rgba(31, 31, 31, 0.04), 0 8px 20px -10px rgba(31, 31, 31, 0.22);
  -webkit-backdrop-filter: saturate(1.08) blur(6px); backdrop-filter: saturate(1.08) blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out),
              background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
@supports not (container-type: inline-size) {
  .product-card__addbag { font-size: 10px; letter-spacing: 0.1em; }
  @media (min-width: 861px) { .product-card__addbag { font-size: 11px; letter-spacing: 0.14em; } }
}
.product-card__addbag:hover {
  background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg);
}
@media (min-width: 861px) and (hover: hover) {
  .product-card:hover .product-card__addbag { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
}
/* Tactile : pas de survol, la barre est montree en permanence. Meme blanc que sur
   pointeur (0,94) — elle se lit sur toutes les photos, y compris les fonds clairs. */
@media (hover: none) {
  .product-card__addbag { opacity: 1; transform: translateX(-50%); pointer-events: auto; background: rgba(255, 255, 255, 0.94); }
}

/* ÉPUISEMENT PAR CORIS (cliente 2026-08-03). Une seule couleur peut manquer sans que la
   piece le soit : la jupe pareo midi est vendue dans neuf coloris et epuisee en Jaune
   Safran. Le voile sombre plein cadre de .product-card__sold serait trop violent pour ca —
   on garde la petite pastille, meme forme que sur les pages collection, partout.
   La regle est ecrite AVANT l'override de collections pour que celui-ci, plus specifique,
   ne se batte pas avec elle : les deux disent la meme chose. */
.product-card__sold--color {
  inset: auto; top: 10px; left: 10px; right: auto; bottom: auto;
  display: inline-block; place-items: initial;
  background: var(--color-bg); color: var(--color-fg); border: 1px solid var(--color-border);
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.55rem; -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* « Plus que quelques pieces » et « Epuise » se posent au meme endroit et se contredisent :
   le second gagne. Idem pour les autres mentions de rarete. */
.product-card.is-color-sold-out .product-card__few,
.product-card.is-color-sold-out .product-card__stock,
.product-card.is-color-sold-out .product-card__limited { display: none; }
/* L'achat rapide disparait — le clic est de toute facon reverifie en JS avant le panier. */
.product-card.is-color-sold-out .product-card__addbag { display: none; }
/* La pastille du coloris epuise est barree, sans changer sa couleur : c'est elle qu'on
   vient regarder. Le trait est en surimpression pour rester lisible sur clair comme sur
   fonce, et il est purement decoratif — le nom accessible porte deja « Epuise ». */
/* Popup « Voir les couleurs » : la mention se lit AVANT le clic, alignee a droite du nom. */
.colors-modal__item.is-sold-out .colors-modal__name { opacity: 0.55; }
.colors-modal__gone {
  margin-left: auto; font-family: var(--font-display); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted);
}

.product-card__swatch-dot--btn.is-sold-out,
.product-color__swatch.is-sold-out { position: relative; opacity: 0.55; }
.product-card__swatch-dot--btn.is-sold-out::after,
.product-color__swatch.is-sold-out::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: 50%;
  height: 1px; background: var(--color-fg);
  transform: rotate(-45deg); transform-origin: center; pointer-events: none;
}

/* Sold-out — small top-left pill instead of the full dark overlay */
body[data-page="collections"] .product-card__sold {
  inset: auto; top: 10px; left: 10px; right: auto; bottom: auto;
  display: inline-block; place-items: initial;
  background: var(--color-bg); color: var(--color-fg); border: 1px solid var(--color-border);
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.55rem; -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* The View-by control is a desktop affordance — tablet/phone keep their fixed columns */
@media (max-width: 1024px) {
  .grid-density { display: none; }
}

.collection-empty { grid-column: 1 / -1; display: grid; place-items: center; gap: var(--space-4); text-align: center; padding: clamp(3rem, 8vw, var(--space-20)) 0; color: var(--color-muted); }
.collection-empty__title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--color-fg); }
.collection-grid--bag-families {
 display: block;
 /* Cancel the .product-grid full-bleed breakout (100vw + negative margins + 5px
    padding) so the bag families sit inside the page container, with the standard
    left/right gutter and aligned to the breadcrumb/header. */
 width: auto;
 max-width: none;
 margin-inline: 0;
 padding: 0;
}
.bag-family-section {
 border-top: 0;
 padding-block: clamp(2rem, 5vw, var(--space-12));
}
.bag-family-section:first-child {
 padding-top: var(--space-6);
}
/* Collection section header — a big, stylized editorial headline on the plain
   page ground (no tinted panel). Introduces each bag collection (La Sculpture,
   La Nouvelle Vague…), centred; the headline itself is the section divider. */
.bag-family-head {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: var(--space-3);
 margin-bottom: var(--space-10);
 padding-block: clamp(1.5rem, 3.5vw, 3rem);
}
.bag-family-head > div {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--space-2);
}
.bag-family-head .eyebrow::before {
 content: "\25C6";
 margin-right: 0.5em;
 font-size: 0.72em;
 vertical-align: 0.08em;
 color: var(--accent);
}
.bag-family-head h2 {
 font-size: clamp(2.5rem, 5.4vw, 4.75rem);
 font-weight: 450;
 line-height: 0.98;
 letter-spacing: -0.01em;
}
.bag-family-head p:not(.eyebrow) {
 max-width: 52ch;
 margin-inline: auto;
 color: var(--color-muted);
}
.bag-family-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: var(--space-12) var(--space-8);
}
.bag-color-row {
 display: grid;
 gap: var(--space-5);
 padding-top: var(--space-10);
 margin-top: var(--space-10);
 border-top: 1px solid var(--color-border);
}
.bag-family-head + .bag-color-row {
 margin-top: 0;
 padding-top: 0;
 border-top: 0;
}
.bag-color-row--compact {
 gap: 0;
}
.bag-color-row__head {
 display: flex;
 align-items: end;
 justify-content: space-between;
 gap: var(--space-5);
}
.bag-color-row__head h3 {
 font-family: var(--font-body);
 font-size: var(--fs-sm);
 font-weight: 700;
 letter-spacing: var(--tracking-wide);
 text-transform: uppercase;
 line-height: 1;
}
.bag-color-row__head p {
 font-size: var(--fs-xs);
 font-weight: 700;
 letter-spacing: var(--tracking-wide);
 text-transform: uppercase;
 color: var(--color-muted);
 white-space: nowrap;
}
.product-card--bag-variant .product-card__media img {
 object-fit: cover; object-position: center bottom;
}

.product-story { grid-column: 1 / -1; position: relative; margin-block: clamp(1.5rem, 4vw, var(--space-8)); }
.product-story--duo {
 display: grid; grid-template-columns: minmax(230px, 0.62fr) 1fr 1fr; gap: var(--space-4);
 align-items: stretch; min-height: clamp(420px, 58vw, 680px);
}
.product-story__copy {
 align-self: end; padding: clamp(1rem, 3vw, var(--space-8)) clamp(0.2rem, 2vw, var(--space-4)) clamp(1rem, 3vw, var(--space-8)) 0;
}
.product-story__copy h2 { font-size: clamp(2.2rem, 5vw, 4.8rem); font-weight: 400; line-height: 0.95; margin: var(--space-3) 0 var(--space-4); }
.product-story__copy p:not(.eyebrow) { color: var(--color-muted); max-width: 35ch; font-size: var(--fs-sm); }
.product-story__image { overflow: hidden; background: var(--color-surface-2); border: 1px solid rgba(0,0,0,0.08); }
.product-story__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out), filter 0.8s var(--ease-out); }
.product-story:hover .product-story__image img { transform: scale(1.025); }
.product-story--wide { min-height: clamp(430px, 66vw, 740px); overflow: hidden; margin-inline: 0; }
.product-story--wide .product-story__image { position: absolute; inset: 0; border-inline: 0; }
.product-story--wide .product-story__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.56), transparent 58%); pointer-events: none; }
.product-story--wide .product-story__copy--overlay {
 position: absolute; left: var(--gutter); bottom: var(--space-10); color: var(--white); max-width: min(680px, 78vw); padding: 0;
}
.product-story--wide .eyebrow { color: var(--white); }
/* Editorial "duo" breaks live inside the full-bleed product grid (rtw/charms/
   accessories), so without a side gutter the copy clips at the viewport edge and
   the images bleed off-screen. Add the standard gutter — but only in the full-bleed
   context, since the bags grid is already contained (avoids a double indent). */
.product-grid:not(.collection-grid--bag-families) .product-story--duo { padding-inline: var(--gutter); box-sizing: border-box; }

.product-color-story { padding-block: clamp(2.5rem, 6vw, var(--space-20)); border-block: 1px solid var(--color-border); }
.product-color-story__inner { display: grid; grid-template-columns: minmax(260px, 0.42fr) 1fr; gap: clamp(1.5rem, 5vw, var(--space-16)); align-items: center; }
.product-color-story__copy { max-width: 50ch; }
.product-motif { width: clamp(88px, 12vw, 148px); height: auto; margin-bottom: var(--space-2); opacity: 0.9; }
[dir="rtl"] .product-motif { margin-left: auto; }

/* ===== Scarcity: sold-out / never-remade pills + banner (gallery pieces not sold in store) ===== */
.girls-feed__item, .girls-card figure, .girls-archive-item { position: relative; }
.scarcity-pill {
 position: absolute; top: var(--space-3); left: var(--space-3); z-index: 3;
 font-family: var(--font-body); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
 color: var(--white); background: rgba(20, 16, 12, 0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
 padding: 0.38rem 0.66rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2);
 pointer-events: none; transition: background var(--transition-fast);
}
.scarcity-pill--archive { top: var(--space-2); left: var(--space-2); font-size: 0.5rem; padding: 0.28rem 0.5rem; }
.is-soldout:hover .scarcity-pill { background: var(--brand-orange); }
[dir="rtl"] .scarcity-pill { left: auto; right: var(--space-3); }
[dir="rtl"] .scarcity-pill--archive { right: var(--space-2); }
/* YZA Girls Guides — monthly Instagram interviews (client 2026-07-17).
   Centres a single post, grids out to 2-3 once there are several. */
.girls-guides { display: grid; gap: clamp(1rem, 2.5vw, 2rem); justify-items: center; grid-template-columns: 1fr; margin-top: var(--space-8); }
.girls-guides:has(> :nth-child(2)) { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.girls-guides .instagram-media { min-width: 0 !important; }
.scarcity-banner-section { padding-block: clamp(2rem, 5vw, var(--space-12)); }
/* Olive community block — the approved YZA Girls endpoint. */
/* Client 2026-07-17: this block is terracotta, not olive. */
.scarcity-banner { max-width: 760px; margin-inline: auto; text-align: center; display: grid; gap: var(--space-4); justify-items: center; background: var(--terracotta); color: #fff; border: 0; border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, var(--space-12)); }
/* The pill was ink on olive; on terracotta a deep burnt orange keeps it legible without
   introducing a second colour (same #4a1c05 used on the hero panel). */
.scarcity-pill--lg { position: static; font-size: 0.66rem; padding: 0.5rem 0.9rem; background: #4a1c05; color: #fff; border-color: transparent; }
.scarcity-banner h2 { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.05; }
.scarcity-banner p { color: color-mix(in srgb, var(--color-dark-fg) 82%, transparent); max-width: 56ch; }
.scarcity-banner .btn--solid { background: var(--color-dark-fg) !important; border-color: var(--color-dark-fg) !important; color: var(--color-fg) !important; }
.product-color-story__copy h2 { font-size: clamp(2.3rem, 5.5vw, 5.2rem); font-weight: 400; line-height: 0.95; margin: var(--space-3) 0 var(--space-5); }
.product-color-story__copy p:not(.eyebrow) { color: var(--color-muted); margin-bottom: var(--space-5); }
.product-color-story__facts { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: var(--space-6); }
.product-color-story__facts span { border-bottom: 1px solid rgba(0,0,0,0.28); padding-bottom: 0.2rem; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.product-color-story__grid { display: grid; grid-template-columns: 1.08fr 0.92fr; grid-template-rows: repeat(2, minmax(180px, 1fr)); gap: var(--space-4); min-height: clamp(460px, 58vw, 760px); }
.product-color-story__image { overflow: hidden; background: var(--color-surface-2); border: 1px solid rgba(0,0,0,0.08); }
.product-color-story__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.product-color-story__image:hover img { transform: scale(1.035); }
.product-color-story__image--0 { grid-row: 1 / -1; }
.product-color-story__image--3 { display: none; }
.charm-story__collection {
 border-top: 1px solid var(--color-border);
 border-bottom: 1px solid var(--color-border);
 padding: var(--space-4) 0;
 margin: var(--space-5) 0;
}
.charm-story__collection h3 {
 font-family: var(--font-body);
 font-size: var(--fs-sm);
 letter-spacing: 0.08em;
 text-transform: uppercase;
 margin-bottom: var(--space-2);
}
.charm-story__collection p { margin-bottom: 0 !important; }

.yza-girls-home { overflow: hidden; }
.girls-home-grid { display: grid; grid-template-columns: repeat(8, minmax(160px, 1fr)); gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-3); scroll-snap-type: x proximity; touch-action: pan-x; cursor: grab; }
.girls-home-grid.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.girls-home-grid.is-dragging > * { pointer-events: none; }
.girls-home-card { min-width: min(48vw, 230px); scroll-snap-align: start; display: block; }
.girls-home-card figure, .girls-card figure { position: relative; overflow: hidden; background: var(--color-surface-2); }
.girls-home-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.girls-home-card:hover img, .girls-card:hover img { transform: scale(1.035); }
.girls-home-card figcaption, .girls-card figcaption {
 position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4);
 color: var(--white); background: linear-gradient(to top, rgba(0,0,0,0.68), transparent);
 display: grid; gap: 0.1rem;
}
.girls-home-card figcaption strong, .girls-card figcaption strong { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; }
.girls-home-card figcaption span, .girls-card figcaption span { font-size: var(--fs-xs); opacity: 0.86; }
.girls-home-card figcaption em, .girls-card figcaption em {
 justify-self: start;
 margin-top: var(--space-2);
 font-size: 0.62rem;
 font-style: normal;
 font-weight: 700;
 letter-spacing: var(--tracking-wide);
 text-transform: uppercase;
 border-bottom: 1px solid currentColor;
}
.section-cta { display: flex; justify-content: center; margin-top: var(--space-8); }

/* Charms styling - how to clip a raffia fruit onto any bag (collections.html?cat=charms) */
.charm-styling { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--color-border); }
.charm-styling__head { max-width: 60ch; margin-bottom: var(--space-10); display: grid; gap: var(--space-3); }
.charm-styling__head h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; line-height: 1.02; }
/* "YZA Fruit Market" — its own typo: branded uppercase market label, not the italic-serif eyebrow */
.charm-styling__head .eyebrow { font-family: var(--font-display); font-style: normal; text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.74rem; font-weight: 500; }
.charm-styling__text { color: var(--color-muted); max-width: 56ch; }
.charm-styling__tag { font-family: var(--font-serif); font-style: italic; color: var(--accent); margin-top: var(--space-2); }
.charm-styling__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8) var(--space-6); }
.charm-styling__item { position: relative; overflow: hidden; background: var(--color-surface-2); display: grid; gap: var(--space-3); }
.charm-styling__item img, .charm-styling__item video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform 0.9s var(--ease-out); }
/* The two charm-styling clips are portrait 9:16 source; show them square so they
   sit as calm 1:1 tiles beside the stills instead of towering over the grid. */
.charm-styling__item--video video { aspect-ratio: 3 / 4; height: auto; }
/* M-batch: category story moved BELOW the grid (was breaking the grid mid-tiles and hiding
   the last products) and restyled clean/premium. */
.col-story--below { display: block !important; margin-top: clamp(2.5rem, 6vw, 5rem); padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 2rem) 0; border-top: 1px solid var(--color-border); background: transparent; }
.col-story--below .col-story-panel { max-width: 64ch; margin-inline: auto; text-align: center; display: grid; gap: var(--space-4); }
.col-story--below .col-story-panel blockquote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.4; color: var(--accent); margin: 0; padding: 0; }
.col-story--below .col-story-panel blockquote::before { display: none; }
.col-story--below .col-story-panel h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.45rem, 2.8vw, 2.15rem); line-height: 1.12; margin: 0; }
.col-story--below .col-story-panel p { color: var(--color-muted); line-height: 1.8; max-width: 60ch; margin: 0 auto; font-size: var(--fs-sm); }
.col-story--below .col-story-panel__cta { color: var(--color-fg); font-family: var(--font-display); letter-spacing: 0.02em; }
.charm-styling__item:hover img { transform: scale(1.035); }
.charm-styling__item figcaption { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted); }
.charm-styling__cta { display: inline-block; margin-top: var(--space-8); }
.charm-styling__cats { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-5); margin-top: var(--space-8); }
.charm-styling__cats-label { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
[dir="rtl"] .charm-styling__cats { flex-direction: row-reverse; }
@media (max-width: 900px) { .charm-styling__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .charm-styling__grid { grid-template-columns: 1fr; } }
/* First charm-styling slot shows its still image on every viewport; the section
   keeps a single video (band-charm.mp4) in the last slot — no doubled clip on mobile. */

/* ============ À PROPOS DE L’IMPRIMÉ - Fruit Market editorial collage ============ */
.print-story { display: grid; grid-template-columns: 0.82fr 1fr; gap: clamp(2rem, 5vw, var(--space-20)); align-items: center; }
.print-story__text { max-width: 46ch; }
.print-story__text .eyebrow { margin-bottom: var(--space-4); }
.print-story__text h2 { font-size: var(--fs-2xl); color: var(--color-accent-text); margin-bottom: var(--space-5); }
.print-story__text p { color: var(--color-fg); margin-bottom: var(--space-6); }
.print-story__text .link-underline { color: var(--color-accent-text); }
.print-story__collage { position: relative; min-height: clamp(420px, 44vw, 620px); }
.print-story__toile { position: absolute; inset: 0 16% 0 0; background-size: cover; background-position: center; border-radius: var(--radius); }
.print-story__photo { position: absolute; overflow: hidden; background: var(--color-surface-2); border: 6px solid var(--white); box-shadow: var(--shadow); }
.print-story__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.print-story__photo--back { width: 42%; aspect-ratio: 3 / 4; right: 5%; top: 4%; transform: rotate(3deg); }
.print-story__photo--front { width: 52%; aspect-ratio: 4 / 5; left: 7%; bottom: 4%; transform: rotate(-3deg); z-index: 2; }
.print-story__photo figcaption { position: absolute; inset: auto 0 0 0; padding: var(--space-3) var(--space-4); font-size: var(--fs-xs); color: var(--white); background: linear-gradient(to top, rgba(0,0,0,0.62), transparent); }

.worlds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: clamp(2.5rem, 6vw, var(--space-24)); }
.world-card { position: relative; display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; }
.world-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.world-card:hover img { transform: scale(1.05); }
.world-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0.04) 60%); }
.world-card__body { position: absolute; inset: auto 0 0 0; z-index: 2; color: var(--white); padding: clamp(1.25rem, 3vw, var(--space-10)); display: grid; gap: var(--space-2); justify-items: start; }
.world-card__eyebrow { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.world-card__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, var(--fs-xl)); line-height: 1.05; }
.world-card__btn { margin-top: var(--space-3); display: inline-block; background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.7); font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase; padding: 0.6rem 1.4rem; border-radius: 0; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.world-card:hover .world-card__btn { background: var(--white); color: var(--black); border-color: var(--white); }

/* ============ MARQUEE - “C’est mieux à Marrakech” ============ */
.yza-marquee { overflow: hidden; border-block: 1px solid var(--color-border); padding-block: clamp(0.55rem, 1.5vw, 1rem); margin-bottom: clamp(2rem, 5vw, var(--space-16)); }
.yza-marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: yza-marquee 38s linear infinite; }
.yza-marquee__item { font-family: var(--font-display); font-style: normal; font-size: clamp(1.6rem, 4.6vw, 3.4rem); line-height: 1; color: var(--color-accent); padding-inline: clamp(0.6rem, 1.6vw, 1.4rem); }
.yza-marquee__sep { color: var(--brand-yellow); font-size: clamp(0.5rem, 1.2vw, 0.95rem); line-height: 1; margin: 0 0.15em; vertical-align: 0.14em; }
@keyframes yza-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .yza-marquee__track { animation: none; transform: none; } }

/* ============ GIRLS FEED - Instagram-style wall ============ */
.girls-feed { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.girls-feed__item { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; background: var(--color-surface-2); }
.girls-feed__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.girls-feed__item:hover img { transform: scale(1.06); }
.girls-feed__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.42); opacity: 0; transition: opacity var(--transition-fast); }
.girls-feed__item:hover .girls-feed__overlay { opacity: 1; }
.girls-feed__cta { color: var(--white); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; border: 1px solid var(--white); padding: 0.5rem 1rem; text-align: center; text-wrap: balance; }
/* Always-visible name caption on each YZA Girls feed tile (client: "je préférais quand il y avait le nom"). */
.girls-feed__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 2.2rem 0.5rem 0.6rem; color: var(--white); text-align: center; background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0)); pointer-events: none; }
.girls-feed__meta strong { font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.girls-feed__meta span { font-size: 0.62rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: 0.88; }
.girls-feed__intro { max-width: 620px; margin: var(--space-3) auto 0; font-size: var(--fs-sm); line-height: 1.65; opacity: 0.78; text-wrap: pretty; }
/* Breathing room: between each home FAQ question, and before the YZA Girls band (client feedback). */
#homeFaq .faq-item + .faq-item { margin-top: var(--space-3); }
body[data-page="home"] .girls-feed-section { margin-top: var(--space-7); }

/* Remove all editorial product-story breaks from the collection grid — pure uniform product grid */
#collectionGrid .product-story { display: none !important; }

/* Footer contact hours — direct-edit settled values */
.footer__contact-hours { font-size: 14px; max-width: 500px; text-align: left; margin: 0 0 8px 40px; padding: 0 40px 0 0; white-space: pre-line; }

/* Bag-family grid — ensure all images cover the card without clipping */
.bag-family-grid .product-card__media img,
.bag-family-grid .product-card__img { object-fit: cover; object-position: center center; }

/* Lead-chat widget — direct-edit settled values */
.lead-chat__eyebrow { font-size: 10px; margin: 0 40px 0 0; }
.lead-chat__avatar { background-color: rgb(196, 94, 41); color: #fff; }
.lead-chat__avatar img { width: 35px; object-fit: contain; }
#leadChatTitle { font-family: 'Jost', sans-serif; font-weight: 500; }
.lead-chat__online-status { flex-direction: column-reverse; align-items: stretch; justify-content: flex-start; text-align: left; gap: 0; }

@media (max-width: 1024px) { .girls-feed { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) {
 .print-story { grid-template-columns: 1fr; gap: var(--space-8); }
 .print-story__collage { min-height: 78vw; }
 .worlds-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .girls-feed { grid-template-columns: repeat(2, 1fr); } }

/* ============ VIDEO BANDS - full-bleed cinematic sections ============ */
.video-band { position: relative; width: 100%; min-height: 100dvh; overflow: hidden; background: var(--black); display: flex; }
/* Split band (desktop): two videos side by side, each filling its half. Falls back to a
   single full-bleed video (the first) on mobile/tablet to keep phone bandwidth in check. */
.video-band__split-media { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: 1fr 1fr; }
.video-band__split-media .video-band__media { position: static; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
 .video-band__split-media { grid-template-columns: 1fr; }
 .video-band__split-media .video-band__media--second { display: none; }
}
.video-band__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.video-band__overlay { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; padding: clamp(2rem, 6vw, var(--space-24)); padding-bottom: clamp(4rem, 9vw, 7rem); background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.12) 55%, rgba(0,0,0,0.28)); }
.video-band__content { max-width: 42ch; color: var(--white); display: grid; gap: var(--space-4); }
.video-band__content .eyebrow { color: rgba(255, 255, 255, 0.82); }
.video-band__content h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-3xl); line-height: 1.02; color: var(--white); }
.video-band__content p { color: rgba(255,255,255,0.9); max-width: 40ch; }
.video-band--center .video-band__overlay { justify-content: center; text-align: center; }
.video-band--center .video-band__content { justify-items: center; }

/* ---- Jacquemus-minimal video band (savoir-faire) ---- */
.video-band--minimal .yza-marquee { display: none; }
.video-band--minimal .video-band__overlay {
 align-items: flex-end;
 background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 48%);
 padding-bottom: clamp(5rem, 9vw, 7.5rem);
}
.video-band--minimal .video-band__content { gap: var(--space-3); max-width: 44ch; }
.video-band--minimal .video-band__content .eyebrow {
 color: rgba(255,255,255,0.85); font-family: var(--font-display);
 font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 400;
}
.video-band--minimal .video-band__content h2 {
 font-size: clamp(1.7rem, 4vw, 3rem); font-weight: 400; line-height: 1.05;
 letter-spacing: -0.005em; text-shadow: 0 1px 18px rgba(0,0,0,0.4);
}
.video-band--minimal .video-band__content p {
 font-size: 12.5px; line-height: 1.55; letter-spacing: 0.01em;
 color: rgba(255,255,255,0.78); max-width: 36ch;
}
.video-band__link {
 justify-self: start; margin-top: var(--space-2);
 font-family: var(--font-display); font-size: 10px; letter-spacing: 0.2em;
 text-transform: uppercase; font-weight: 400; color: var(--white);
 padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,0.55);
 transition: border-color var(--transition-fast), opacity var(--transition-fast);
}
.video-band__link:hover { border-bottom-color: var(--white); }
.video-band--center .video-band__link { justify-self: center; }

/* minimal player controls (Jacquemus) */
.vb-controls {
 position: absolute; left: 50%; transform: translateX(-50%);
 bottom: clamp(1rem, 2.2vw, 1.5rem); z-index: 6;
 width: min(70%, 720px); display: flex; align-items: center;
 gap: clamp(0.9rem, 1.8vw, 1.35rem); color: var(--white); font-family: var(--font-display);
}
.vb-ctrl {
 flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
 width: 20px; height: 20px; padding: 0; background: none; border: 0;
 color: var(--white); cursor: pointer; opacity: 0.88; transition: opacity var(--transition-fast);
}
.vb-ctrl:hover { opacity: 1; }
.vb-ctrl:focus-visible { outline: 1px solid rgba(255,255,255,0.8); outline-offset: 3px; }
.vb-ctrl svg { width: 13px; height: 13px; display: block; fill: currentColor; }
.vb-ctrl--play svg { width: 11px; height: 11px; }
.vb-progress { position: relative; flex: 1 1 auto; display: flex; align-items: center; }
.vb-seek {
 -webkit-appearance: none; appearance: none; width: 100%; height: 2px; margin: 0; padding: 0;
 cursor: pointer; border-radius: 0; outline: none;
 background: linear-gradient(to right, var(--white) var(--vb-pct, 0%), rgba(255,255,255,0.32) var(--vb-pct, 0%));
}
.vb-seek::-webkit-slider-thumb {
 -webkit-appearance: none; appearance: none; width: 9px; height: 9px;
 border-radius: 50%; background: var(--white); border: 0; cursor: pointer; margin-top: 0;
}
.vb-seek::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--white); cursor: pointer; }
.vb-seek::-moz-range-track { height: 2px; background: transparent; }
.vb-seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(255,255,255,0.35); }
.vb-ctrl--play .vb-ic--play { display: none; }
.vb-ctrl--play.is-paused .vb-ic--pause { display: none; }
.vb-ctrl--play.is-paused .vb-ic--play { display: block; }
.vb-ctrl--mute .vb-ic--on { display: none; }
.vb-ctrl--mute.is-on .vb-ic--off { display: none; }
.vb-ctrl--mute.is-on .vb-ic--on { display: block; }
@media (max-width: 700px) {
 .vb-controls { width: min(88%, 520px); bottom: 1rem; gap: 0.9rem; }
 .video-band--minimal .video-band__overlay { padding-bottom: clamp(4.5rem, 16vw, 6rem); }
}
.btn--light { background: var(--white); color: var(--black); border: 1px solid var(--white); }
.btn--light:hover { background: transparent; color: var(--white); }
.yza-marquee--onband { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; border-color: rgba(255,255,255,0.28); background: rgba(0,0,0,0.22); }
.yza-marquee--onband .yza-marquee__item { color: var(--white); }
.yza-marquee--onband .yza-marquee__sep { color: var(--brand-yellow); }
@media (max-width: 700px) { .video-band { min-height: 100dvh; } .video-band__overlay { align-items: flex-end; } }

/* ---- Closing CTA (YZA terracotta-orange band, no video) ---- */
.closing-cta {
 background: var(--yza-orange);
 color: var(--white);
 display: flex; align-items: center; justify-content: center;
 padding-block: clamp(5rem, 12vw, 9rem);
 text-align: center;
}
.closing-cta__inner { display: grid; gap: 1.5rem; justify-items: center; }
.closing-cta__eye { color: rgba(255,255,255,0.92); font-size: 1.2rem; letter-spacing: 0; text-transform: none; margin: 0; }
.closing-cta__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem,5vw,3.5rem); line-height: 1.05; color: var(--white); margin: 0; }
.closing-cta__link { display: inline-block; font-size: 0.7rem; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.45); padding-bottom: 2px; transition: border-color var(--transition-fast); }
.closing-cta__link:hover { border-bottom-color: var(--white); }
.closing-cta__sub { color: rgba(255,255,255,0.94); font-size: clamp(0.95rem,1.6vw,1.1rem); line-height: 1.5; max-width: 46ch; margin: -0.5rem auto 0.4rem; }
.closing-cta__link--btn { background: var(--white); color: var(--jq-ink); padding: 0.95rem 2rem; border-bottom: 0; }
.closing-cta__link--btn:hover { opacity: 0.86; border-bottom-color: transparent; }
/* Brand opener — Jacquemus-style split: portrait 4K brand video + quiet brand statement
   (client: "démarrer avec une photo/vidéo et un texte de marque, pas salesy"). */
.brand-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--color-bg); }
.brand-hero__media { overflow: hidden; max-height: 92vh; }
.brand-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-hero__cap { align-self: center; justify-self: center; display: grid; gap: var(--space-4); justify-items: center; text-align: center; max-width: 560px; padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem); }
.brand-hero__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.08; margin: 0; text-wrap: balance; }
.brand-hero__sub { color: var(--color-muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--fs-xs); margin: 0; }

/* Overlay variant (home): one full-bleed video with the title laid over it at the
   bottom, on a soft dark scrim for legibility — the Jacquemus hero pattern. */
.brand-hero--overlay { display: block; position: relative; background: #16130f; }
/* Poster painted as a background so the hero ALWAYS shows the image, even when the
   video can't autoplay (iOS Low Power Mode, slow connection). Framed at 40% to show
   the subject, not the pale sky. The <video> sits on top and covers this once it plays. */
.brand-hero--overlay .brand-hero__media { position: relative; width: 100%; height: min(88vh, 156vw); max-height: 88vh; background: #16130f url('/assets/video/jawhara-summer-poster-hd.jpg?v=20260709e') center 40% / cover no-repeat; }
.brand-hero--overlay .brand-hero__video { object-position: center 40%; }
.brand-hero--overlay .brand-hero__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-width: none; align-self: end;
  padding: clamp(2.5rem, 9vw, 5rem) clamp(1.5rem, 6vw, 4rem) clamp(1.75rem, 5vw, 3rem);
  gap: var(--space-2); color: #fff; pointer-events: none;
}
/* M-batch: bottom shadow as a media overlay so it ALWAYS covers the section full-width down to the
   very bottom edge (the cap's bottom offset used to leave an uncovered pale strip). */
.brand-hero--overlay .brand-hero__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(15,12,9,0.80) 0%, rgba(15,12,9,0.52) 26%, rgba(15,12,9,0.24) 54%, rgba(15,12,9,0) 100%);
}
.brand-hero--overlay .brand-hero__cap a { pointer-events: auto; }
.brand-hero--overlay .brand-hero__title { color: #fff; }
.brand-hero--overlay .brand-hero__sub { color: rgba(255,255,255,0.85); }
.brand-hero--overlay .brand-hero__cap .link-underline { color: #fff; }
.brand-hero--overlay .brand-hero__cap .link-underline:hover { color: rgba(255,255,255,0.72); }
/* M-batch: the trilingual YZA lockup as a hero eyebrow, above the title, in white over the video. */
.brand-hero--overlay .brand-mark-tri--hero { color: #fff; font-size: clamp(0.95rem, 1.5vw, 1.15rem); letter-spacing: 0.16em; margin: 0 0 var(--space-1); }
.brand-hero--overlay .brand-mark-tri--hero .brand-mark-tri__sep { color: #fff; opacity: 0.7; }
/* Real logo lockup in the hero (client 2026-07-17), in place of the old 3-alphabet text row.
   Client asked for it BIGGER with the headline stepped back, so the mark leads the block:
   ~200px on a phone (was 132) up to 300 on desktop, with the title reduced to match. */
.brand-hero__logo { display: block; width: clamp(240px, 62vw, 320px); height: auto; margin: 0 auto var(--space-2); }
/* Home hero title, phone sizing — sits under the logo, so it steps down (was clamp(2rem,
   4.2vw, 3.4rem) via the base rule). Desktop overrides this inside the 861px block below.
   Logo:title is now ~11:1 by width on a phone — the mark leads, the line supports it. */
.brand-hero--overlay .brand-hero__title { font-size: clamp(1.35rem, 5vw, 2.2rem); }
.brand-hero--overlay .brand-hero__sub { font-size: 0.68rem; letter-spacing: 0.2em; }

@media (max-width: 860px) {
 .brand-hero:not(.brand-hero--overlay) { grid-template-columns: 1fr; }
 .brand-hero:not(.brand-hero--overlay) .brand-hero__media { max-height: 74vh; }
 .brand-hero:not(.brand-hero--overlay) .brand-hero__cap { padding-block: var(--space-10); }
 .brand-hero--overlay .brand-hero__media { height: min(82vh, 150vw); max-height: 82vh; }
 .brand-hero--overlay .brand-hero__cap { bottom: clamp(0.75rem, 4vw, 1.5rem); padding: clamp(3rem, 22vw, 6rem) clamp(1.25rem, 6vw, 2rem) clamp(1.6rem, 7vw, 2.5rem); }
}

/* ============================================================
   DESKTOP (>=861px) — split hero: video LEFT (58%) + light text
   panel RIGHT (42%), left-aligned Fraunces + hairline + a small
   terracotta Amazigh diamond accent. Overrides the mobile overlay
   above (same specificity, later in source). The home header is a
   solid dark-on-white bar ABOVE the hero, so a light right panel
   needs no header handling. Mobile overlay (< 861px) untouched.
   ============================================================ */
@media (min-width: 861px) {
  /* Texte a GAUCHE, video a DROITE (client 2026-07-26). L'ordre du DOM reste
     media puis cap — on ne deplace rien en HTML, on place explicitement dans la
     grille, ce qui laisse le mobile (flux normal) strictement intact. */
  .brand-hero--overlay {
    display: grid;
    grid-template-columns: 42fr 58fr;
    align-items: stretch;
    position: static;
    min-height: clamp(34rem, 80vh, 52rem);
    background: var(--color-bg);
  }
  .brand-hero--overlay .brand-hero__cap { grid-column: 1; grid-row: 1; }
  .brand-hero--overlay .brand-hero__media {
    grid-column: 2; grid-row: 1;
    position: relative; width: auto; height: 100%; max-height: none; overflow: hidden;
    background-position: center 50%;
  }
  .brand-hero--overlay .brand-mark-tri--hero { color: #1a1a1a; }
  .brand-hero--overlay .brand-mark-tri--hero .brand-mark-tri__sep { color: #1a1a1a; opacity: 1; }
  .brand-hero--overlay .brand-hero__video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 50%;
  }
  /* Panneau orange, texte noir. Plus de filet blanc : le panneau est desormais
     au bord gauche de la page, il n'a plus de voisin a separer. */
  .brand-hero--overlay .brand-hero__cap {
    position: static; inset: auto; z-index: auto;
    align-self: stretch; justify-self: stretch;
    align-content: center; justify-items: start; text-align: start;
    max-width: none; gap: var(--space-5);
    padding: clamp(2.5rem, 4vw, 4.5rem) clamp(2.25rem, 4.5vw, 5rem);
    background: var(--terracotta);
    border-inline-start: 0;
    color: #1a1a1a; pointer-events: auto;
  }
  .brand-hero--overlay .brand-hero__cap::before { content: none; }
  /* Le lockup noir est un VRAI fichier de marque (yza-logo-tri.png), pas un filtre :
     on echange simplement l'image sur grand ecran. Si un navigateur ignore `content`
     sur une balise <img>, il garde le logo blanc — lisible aussi sur l'orange. */
  .brand-hero--overlay .brand-hero__logo {
    content: url('/assets/brand/yza-logo-tri.png?v=20260726h');
    margin-inline: 0;
    width: clamp(320px, 26vw, 470px);
  }
  .brand-hero--overlay .brand-hero__cap a { pointer-events: auto; }
  .brand-hero--overlay .brand-hero__title {
    color: #1a1a1a; font-size: clamp(1.85rem, 2.5vw, 3.05rem); line-height: 1.06; max-width: 20ch;
  }
  .brand-hero--overlay .brand-hero__sub {
    color: #1a1a1a; font-size: var(--fs-xs); font-weight: 500;
    letter-spacing: 0.15em; max-width: none; white-space: nowrap;
  }
  .brand-hero--overlay .brand-hero__sub::before {
    content: "\25C6"; color: #1a1a1a; font-size: 0.7em; margin-inline-end: 0.7em; vertical-align: 0.12em;
  }
  .brand-hero--overlay .brand-hero__cap .link-underline { color: #1a1a1a; border-bottom-color: rgba(26,26,26,0.55); }
  .brand-hero--overlay .brand-hero__cap .link-underline:hover { color: rgba(26,26,26,0.72); border-bottom-color: #1a1a1a; }
}

/* Split variant: real SS26 photo beside the orange panel (client: "mettre une image, ça donne pas envie comme ça"). */
.closing-cta--split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding-block: 0; }
.closing-cta__media { overflow: hidden; }
.closing-cta__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== La Nouvelle Vague — editorial lookbook mosaic (home closing section):
   a terracotta text tile + 6 SS26 photos across both columns. ===== */
/* Client 2026-07-17: frame the photos in terracotta so the mosaic reads as ONE block
   with the orange text tile under it. The frame is the grid's own background showing
   through the gaps plus an equal inset — and because .nv-txt lives inside this same
   grid and is already terracotta, the tile melts into the frame with no seam.
   The page gutter moves to .nv-showcase so the frame hugs the photos, not the screen. */
.nv-showcase { padding: clamp(2.5rem, 5vw, 4.5rem) clamp(0.9rem, 2.6vw, 2.25rem); background: var(--color-bg); }
.nv-grid {
  display: grid; gap: clamp(6px, 0.8vw, 12px);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, clamp(230px, 60vw, 340px)) auto;
  grid-template-areas: "m i2" "i4 i5" "txt txt";
  max-width: 1400px; margin-inline: auto;
  background: var(--terracotta);
  padding: clamp(6px, 0.8vw, 12px);
}
.nv-cell { position: relative; overflow: hidden; display: block; }
.nv-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.nv-cell:hover img { transform: scale(1.04); }
.nv-m { grid-area: m; } .nv-i2 { grid-area: i2; } .nv-i3 { grid-area: i3; } .nv-i4 { grid-area: i4; } .nv-i5 { grid-area: i5; } .nv-i6 { grid-area: i6; }
.nv-txt {
  grid-area: txt; background: var(--accent); color: #fff;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--space-3); padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.nv-txt__eye { color: rgba(255,255,255,0.85); margin: 0; }
.nv-txt__title { font-family: var(--font-serif); font-weight: 400; color: #fff; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.05; margin: 0; }
.nv-txt__sub { color: rgba(255,255,255,0.92); margin: 0; max-width: 46ch; font-size: clamp(0.9rem, 1vw, 1rem); }
.nv-txt__cta { display: inline-block; margin-top: var(--space-2); background: #fff; color: var(--accent); padding: 0.85rem 1.75rem; font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.nv-txt__cta:hover { opacity: .88; }
[dir="rtl"] .nv-txt { align-items: flex-end; text-align: right; }
@media (min-width: 901px) {
  .nv-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: clamp(300px, 32vw, 460px) auto;
    grid-template-areas: "m i2 i4 i5" "txt txt txt txt";
  }
}
.closing-cta--split .closing-cta__inner { align-content: center; justify-self: center; max-width: 560px; padding: clamp(4rem, 9vw, 8rem) clamp(1.5rem, 5vw, 4rem); }
@media (max-width: 860px) {
 .closing-cta--split { grid-template-columns: 1fr; }
 .closing-cta__media { max-height: 62vh; }
}

/* Top marquee variant + bold colourful brand treatment for video-band marquees */
.yza-marquee--ontop { position: absolute; left: 0; right: 0; top: 0; bottom: auto; z-index: 3; margin: 0; border-color: rgba(255,255,255,0.28); background: rgba(0,0,0,0.22); }
.yza-marquee--ontop .yza-marquee__track { animation-direction: reverse; }
.video-band__overlay { padding-top: clamp(4rem, 9vw, 7rem); }
.yza-marquee--onband .yza-marquee__item,
.yza-marquee--ontop .yza-marquee__item { font-family: var(--font-display); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em; }
.yza-marquee--onband .yza-marquee__item:nth-child(8n+1), .yza-marquee--ontop .yza-marquee__item:nth-child(8n+1) { color: var(--brand-orange); }
.yza-marquee--onband .yza-marquee__item:nth-child(8n+3), .yza-marquee--ontop .yza-marquee__item:nth-child(8n+3) { color: var(--brand-yellow); }
.yza-marquee--onband .yza-marquee__item:nth-child(8n+5), .yza-marquee--ontop .yza-marquee__item:nth-child(8n+5) { color: var(--brand-pink); }
.yza-marquee--onband .yza-marquee__item:nth-child(8n+7), .yza-marquee--ontop .yza-marquee__item:nth-child(8n+7) { color: var(--brand-olive); }
.yza-marquee--onband .yza-marquee__sep, .yza-marquee--ontop .yza-marquee__sep { color: rgba(255,255,255,0.55); }

/* ============ ARABIC / RTL ============ */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .section-head--center,
[dir="rtl"] .hero__content,
[dir="rtl"] .video-band--center .video-band__content,
[dir="rtl"] .newsletter,
[dir="rtl"] .girls-hero__inner { text-align: center; }
/* keep numbers, prices, codes and Latin tokens visually intact inside RTL text */
[dir="rtl"] .product-card__price,
[dir="rtl"] .product-info__price,
[dir="rtl"] .was,
[dir="rtl"] .price,
[dir="rtl"] [class*="price"],
[dir="rtl"] .bag-family-head p,
[dir="rtl"] time { unicode-bidi: isolate; }
/* flip directional chevrons / arrows (not logos, images, map, whatsapp) */
[dir="rtl"] .link-underline::after,
[dir="rtl"] .breadcrumbs svg,
[dir="rtl"] .accordion__icon svg { transform: scaleX(-1); }
/* spacing that used physical left in a few hand-set spots → mirror */
[dir="rtl"] .product-card__quick { left: auto; right: var(--space-3); }
[dir="rtl"] .girls-feed__cta,
[dir="rtl"] .world-card__body { text-align: right; }
/* drawers mirror sides in RTL (menu from left, cart from right) - fixes drawer parking mid-screen */
[dir="rtl"] .drawer { inset: 0 auto 0 0; transform: translateX(-100%); }
[dir="rtl"] .drawer.is-open { transform: translateX(0); }
[dir="rtl"] .drawer__close { right: auto; left: var(--space-4); }
[dir="rtl"] .cart-drawer { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .cart-drawer.is-open { transform: translateX(0); }
[dir="rtl"] .lang-select__menu { right: auto; left: 0; }
[dir="rtl"] .nav a::after, [dir="rtl"] .nav-more__btn::after { left: auto; right: 0; }


/* ====== Hide native scrollbars on the remaining drag-scroll rows ====== */
.girls-home-grid, .girls-feed, .bag-family-grid, [data-scroll-row], .charm-styling__grid { scrollbar-width: none; -ms-overflow-style: none; }
.girls-home-grid::-webkit-scrollbar,
.girls-feed::-webkit-scrollbar,
.bag-family-grid::-webkit-scrollbar,
[data-scroll-row]::-webkit-scrollbar,
.charm-styling__grid::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ====== Toile illustrations - decorative accents (assets/illustrations) ====== */
.toile-divider { display: flex; justify-content: center; padding-block: clamp(1.25rem, 3.5vw, var(--space-10)); }
.toile-divider img { width: min(640px, 78%); height: auto; display: block; }
.section--accented { position: relative; overflow: hidden; }
.section--accented > * { position: relative; z-index: 1; }
.toile-accent { position: absolute; width: clamp(110px, 15vw, 230px); height: auto; opacity: 0.13; pointer-events: none; z-index: 0; user-select: none; }
.toile-accent--tl { top: var(--space-6); left: var(--space-4); }
.toile-accent--br { bottom: var(--space-6); right: var(--space-4); transform: scaleX(-1); }
@media (max-width: 700px) { .toile-accent { width: 96px; opacity: 0.1; } }

/* Remove all moving marquee ("C'est mieux à Marrakech") texts site-wide */
.yza-marquee { display: none !important; }
/* Toile illustrations are transparent PNGs (cream keyed out) so the line-art floats on the section with no visible box */
.toile-divider, .section--accented, .print-story-section { background: var(--paper); }
.toile-accent { mix-blend-mode: normal; }

.girls-hero { min-height: clamp(560px, 82vh, 760px); display: grid; place-items: center; text-align: center; border-bottom: 1px solid var(--color-border); }
.girls-hero__inner { display: grid; gap: var(--space-5); justify-items: center; }
.girls-hero h1 { font-size: clamp(4rem, 13vw, 11rem); font-weight: 400; line-height: 0.82; }
.girls-hero__symbol { font-family: var(--font-hand); font-size: var(--fs-md); }
.girls-hero__copy { display: grid; gap: var(--space-4); max-width: 78ch; color: var(--color-muted); }
.girls-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; align-items: center; margin-top: var(--space-2); }
.girls-masonry { column-count: 4; column-gap: var(--space-4); }
.girls-card { display: inline-block; width: 100%; margin: 0 0 var(--space-4); break-inside: avoid; }
.girls-card img { width: 100%; min-height: 260px; object-fit: cover; }
.girls-product-map { display: grid; gap: var(--space-10); }
.girls-product-story { display: grid; grid-template-columns: minmax(260px, 0.36fr) 1fr; gap: clamp(1.5rem, 5vw, var(--space-12)); align-items: center; padding-block: var(--space-8); border-top: 1px solid var(--color-border); }
.girls-product-story:first-child { border-top: 0; padding-top: 0; }
.girls-product-story__copy h3 { font-size: clamp(2rem, 4.2vw, 4.4rem); font-weight: 400; line-height: 0.96; margin: var(--space-3) 0 var(--space-4); }
.girls-product-story__copy p:not(.eyebrow) { color: var(--color-muted); margin-bottom: var(--space-5); }
.girls-product-story__images { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.girls-product-story__images span { aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-surface-2); }
.girls-product-story__images img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.girls-product-story:hover img { transform: scale(1.025); }
.girls-archive-wall { column-count: 6; column-gap: var(--space-2); }
.girls-archive-item { break-inside: avoid; margin: 0 0 var(--space-2); background: var(--color-surface-2); }
.girls-archive-item img { width: 100%; height: auto; }

/* ============================================================
 ÉDITORIAL (image + texte)
 ============================================================ */
.editorial { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, var(--space-20)); }
.editorial--reverse .editorial__media { order: 2; }
.editorial__media .media { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; }
.editorial__video { width: 100%; height: 100%; display: block; object-fit: cover; }
.editorial__text .eyebrow { margin-bottom: var(--space-4); }
.editorial__text h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-5); }
.editorial__text p { color: var(--color-muted); margin-bottom: var(--space-6); max-width: 46ch; }
.section--ink .editorial__text p { color: rgba(255,255,255,0.82); }

/* ============================================================
 RÉASSURANCE
 ============================================================ */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-10); }
.trust-card { text-align: center; display: grid; gap: var(--space-3); justify-items: center; align-content: start; }
.brand-icon, .trust-card .brand-icon { width: 58px; height: 58px; object-fit: contain; }
.trust-card h3 { font-size: var(--fs-md); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.01em; line-height: 1.35; }
.trust-card p { font-size: var(--fs-sm); color: var(--color-muted); max-width: 28ch; }
.service-strip-section { background: var(--sand); }
.service-strip {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: clamp(2rem, 6vw, 5.5rem);
 align-items: flex-start;
 padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
.service-strip--compact { padding-block: clamp(2.5rem, 5vw, 4rem); }
.service-card {
 flex: 0 1 clamp(220px, 26%, 300px);
 display: grid;
 gap: var(--space-4);
 justify-items: center;
 text-align: center;
}
.service-card__icon { display: grid; place-items: center; min-height: 90px; }
.service-symbol {
 width: 88px;
 height: 88px;
 object-fit: contain;
 display: block;
}
/* Client 2026-07-17: 64px read as oversized in the page band — matched to the footer's
   44px, which the client called perfect. Both bands now share one size. */
.service-card__icon svg {
 width: 44px;
 height: 44px;
 stroke: var(--color-fg);
 fill: none;
 stroke-width: 1.5;
 stroke-linecap: round;
 stroke-linejoin: round;
 display: block;
}
.footer-service__trust-item .service-card__icon svg { width: 44px; height: 44px; }
/* Client's Amazigh sign set (2026-07-17) — transparent ink PNGs, so they inherit the
   surface behind them instead of carrying a white box. Same box as the old SVGs. */
.yza-sign { width: 44px; height: 44px; object-fit: contain; display: block; }
/* Amazigh raster service icons — black-on-white art; multiply hides the white ground on the light bg */
.service-card__symbol { width: 64px; height: 64px; object-fit: contain; display: block; mix-blend-mode: multiply; }
.footer-service__trust-item .service-card__symbol { width: 52px; height: 52px; }
/* Clean, centered service columns (Jacquemus-style): sentence-case sans title over
   a muted, letter-spaced sub-line. Icons kept. */
.service-card h3 {
 font-family: var(--font-body);
 font-size: clamp(1.05rem, 1.7vw, 1.3rem);
 font-weight: 400;
 font-style: normal;
 letter-spacing: 0.045em;
 text-transform: none;
 color: var(--color-fg);
}
.service-card p {
 max-width: 34ch;
 color: var(--color-muted);
 font-family: var(--font-body);
 font-size: clamp(0.85rem, 1.1vw, 0.95rem);
 font-weight: 400;
 letter-spacing: 0.035em;
 line-height: 1.6;
}

/* ============================================================
 JOURNAL
 ============================================================ */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.journal-card .media { aspect-ratio: 4 / 3; border-radius: var(--radius); margin-bottom: var(--space-4); overflow: hidden; }
.journal-card img { transition: transform 0.7s var(--ease-out); }
.journal-card:hover img { transform: scale(1.04); }
.journal-card .eyebrow { font-size: 0.68rem; }
.journal-card h3 { font-size: var(--fs-lg); margin: var(--space-2) 0 var(--space-3); }
.journal-card p { font-size: var(--fs-sm); color: var(--color-muted); max-width: 40ch; }

/* ===== GENERATED JOURNAL ===== */
.blog-page { background: var(--color-bg); }
.blog-shell { padding: clamp(7rem, 10vw, 10rem) 0 var(--space-16); }
.journal-hero,
.blog-post-hero {
 display: grid;
 grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
 gap: clamp(2rem, 7vw, 7rem);
 align-items: end;
 border-bottom: 1px solid var(--color-line);
 padding-bottom: clamp(2rem, 5vw, 4.5rem);
}
.journal-hero__copy,
.blog-post-hero__copy { max-width: 660px; }
.journal-hero h1,
.blog-post-hero h1 {
 font-size: clamp(3.4rem, 8.4vw, 9rem);
 line-height: 0.88;
 margin: var(--space-4) 0 var(--space-5);
}
.journal-hero p,
.blog-post-hero__dek {
 color: var(--color-muted);
 font-size: clamp(1rem, 1.6vw, 1.25rem);
 max-width: 52ch;
}
.journal-hero__media,
.blog-post-hero__media {
 aspect-ratio: 4 / 5;
 overflow: hidden;
 background: var(--color-surface);
}
.journal-hero__media img,
.blog-post-hero__media img,
.article-card__media img,
.blog-product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.journal-intents {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-3);
 margin-top: var(--space-8);
}
.journal-intents a,
.blog-chip {
 border: 1px solid var(--color-line-strong);
 border-radius: 999px;
 padding: 0.68rem 1.1rem;
 font-size: var(--fs-xs);
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 background: rgba(255, 255, 255, 0.72);
}
.journal-intents a[aria-current="true"] { background: var(--color-ink); color: var(--color-bg); }
.blog-section {
 padding: clamp(3.5rem, 7vw, 7rem) 0;
 border-bottom: 1px solid var(--color-line);
}
.blog-section__head {
 display: flex;
 align-items: end;
 justify-content: space-between;
 gap: var(--space-5);
 margin-bottom: var(--space-8);
}
.blog-section__head h2 { font-size: clamp(2.2rem, 4vw, 4.4rem); line-height: 0.95; }
.objection-grid,
.craft-proof-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: var(--space-4);
}
.objection-card,
.craft-proof-card,
.craft-proof-grid article {
 border-top: 1px solid var(--color-ink);
 padding-top: var(--space-4);
}
.objection-card strong,
.craft-proof-card strong,
.craft-proof-grid article strong {
 display: block;
 margin-bottom: var(--space-3);
 font-size: var(--fs-sm);
 letter-spacing: 0.05em;
 text-transform: uppercase;
}
.objection-card p,
.craft-proof-card p,
.craft-proof-grid article span { color: var(--color-muted); max-width: 38ch; }
.featured-story-grid {
 display: grid;
 grid-template-columns: 1.1fr 0.9fr;
 gap: var(--space-8);
}
.featured-story-grid__side { display: grid; gap: var(--space-6); align-content: start; }
.blog-post-hero__copy > p { color: var(--color-muted); font-size: clamp(1rem, 1.6vw, 1.25rem); max-width: 52ch; }
.article-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: clamp(1rem, 2.4vw, 2rem);
}
.article-card {
 display: grid;
 gap: var(--space-4);
 align-content: start;
}
.article-card__media {
 aspect-ratio: 4 / 5;
 overflow: hidden;
 background: var(--color-surface);
}
.article-card--wide { grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); align-items: end; }
.article-card--wide .article-card__media { aspect-ratio: 16 / 11; }
.article-card__body { display: grid; gap: var(--space-3); }
.article-card__meta,
.blog-meta {
 color: var(--color-muted);
 font-size: var(--fs-xs);
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.article-card h2,
.article-card h3 { font-size: clamp(1.35rem, 2.3vw, 2.2rem); line-height: 1.02; }
.article-card p { color: var(--color-muted); }
.blog-shop-strip {
 display: grid;
 grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
 gap: var(--space-8);
 align-items: start;
}
.blog-product-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: var(--space-4);
}
.blog-product-card {
 display: grid;
 grid-template-rows: auto 1fr;
 border: 1px solid var(--color-line);
 background: rgba(255, 255, 255, 0.58);
 min-width: 0;
}
.blog-product-card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-surface); }
.blog-product-card__body { display: grid; gap: 0.45rem; padding: var(--space-4); }
.blog-product-card__body strong { font-size: var(--fs-sm); line-height: 1.15; text-transform: uppercase; }
.blog-product-card__body span { color: var(--color-muted); font-size: var(--fs-xs); }
.blog-product-card__price { color: var(--color-ink) !important; font-weight: 700; margin-top: var(--space-2); }
.blog-product-card__meta { letter-spacing: 0.06em; text-transform: uppercase; }
.blog-loading,
.blog-empty { color: var(--color-muted); font-size: var(--fs-sm); }
.blog-newsletter {
 display: grid;
 grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.7fr);
 gap: var(--space-8);
 align-items: end;
 background: var(--color-surface);
 padding: clamp(1.5rem, 4vw, 3rem);
}
.blog-newsletter__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); }
.blog-newsletter__form input {
 width: 100%;
 border: 0;
 border-bottom: 1px solid var(--color-ink);
 background: transparent;
 padding: 0.9rem 0;
}
.blog-newsletter__message { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--fs-xs); }
.breadcrumbs {
 display: flex;
 flex-wrap: wrap;
 gap: 0.45rem;
 color: var(--color-muted);
 font-size: var(--fs-xs);
 margin-bottom: var(--space-8);
}
.breadcrumbs a { text-decoration: underline; text-underline-offset: 0.22em; }
.blog-layout {
 display: grid;
 grid-template-columns: minmax(180px, 250px) minmax(0, 780px);
 justify-content: center;
 gap: clamp(2rem, 4vw, 4rem);
 align-items: start;
 padding-top: clamp(2.5rem, 5vw, 5rem);
}
.blog-toc {
 position: sticky;
 top: calc(var(--header-height, 80px) + 1rem);
 border-top: 1px solid var(--color-ink);
 padding-top: var(--space-4);
}
.blog-toc strong {
 display: block;
 font-size: var(--fs-xs);
 letter-spacing: 0.08em;
 text-transform: uppercase;
 margin-bottom: var(--space-3);
}
.blog-toc a {
 display: block;
 color: var(--color-muted);
 font-size: var(--fs-sm);
 padding: 0.35rem 0;
}
.article-body {
 color: var(--color-ink);
 font-size: clamp(1rem, 1.2vw, 1.08rem);
 line-height: 1.75;
}
.article-body h2,
.article-body h3 {
 font-family: var(--font-title);
 font-weight: 400;
 line-height: 1;
 margin: clamp(2.8rem, 6vw, 4.8rem) 0 var(--space-4);
}
.article-body h2 { font-size: clamp(2.2rem, 4.5vw, 4.8rem); }
.article-body h3 { font-size: clamp(1.65rem, 3vw, 3rem); }
.article-body p,
.article-body ul,
.article-body ol { margin-bottom: var(--space-5); }
.article-body ul,
.article-body ol { padding-left: 1.2rem; }
.article-body blockquote,
.quick-answer {
 border-left: 1px solid var(--color-ink);
 padding: var(--space-4) var(--space-5);
 background: var(--color-surface);
 margin: var(--space-8) 0;
}
.quick-answer strong {
 display: block;
 font-size: var(--fs-xs);
 letter-spacing: 0.08em;
 text-transform: uppercase;
 margin-bottom: var(--space-2);
}
.blog-side-module {
 position: sticky;
 top: calc(var(--header-height, 80px) + 1rem);
 display: grid;
 gap: var(--space-5);
}
.blog-side-module .blog-product-grid { grid-template-columns: 1fr; }
.blog-faq {
 margin-top: var(--space-10);
 border-top: 1px solid var(--color-line-strong);
}
.blog-faq__item { border-bottom: 1px solid var(--color-line); }
.blog-faq__button {
 width: 100%;
 border: 0;
 background: transparent;
 padding: var(--space-4) 0;
 display: flex;
 justify-content: space-between;
 gap: var(--space-4);
 font: inherit;
 font-weight: 700;
 text-align: left;
 cursor: pointer;
}
.blog-faq__button::after { content: "+"; font-weight: 400; }
.blog-faq__button[aria-expanded="true"]::after { content: "-"; }
.blog-faq__panel { color: var(--color-muted); padding-bottom: var(--space-5); }
.blog-end-cta {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: var(--space-5);
 align-items: center;
 margin-top: var(--space-12);
 padding: var(--space-8) 0;
 border-top: 1px solid var(--color-ink);
 border-bottom: 1px solid var(--color-ink);
}

/* ============================================================
 NEWSLETTER
 ============================================================ */
.newsletter { text-align: center; }
.newsletter h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-3); }
.newsletter p { color: var(--color-muted); margin-bottom: var(--space-8); max-width: 48ch; margin-inline: auto; }
.newsletter__form { display: flex; gap: var(--space-2); max-width: 480px; margin-inline: auto; }
.newsletter__form input { flex: 1; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); background: var(--color-bg); border-radius: var(--radius); font: inherit; }
.newsletter__form input:focus { outline: none; border-color: var(--color-fg); }
.form-msg { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--color-accent-text); }

/* ============================================================
 FOOTER
 ============================================================ */
.footer { background: var(--color-bg); color: var(--color-fg); padding-block: var(--space-20) var(--space-8); margin-top: var(--space-12); border-top: 1px solid var(--color-border); }
.footer .logo { color: var(--color-fg); }
.footer-service {
 display: grid; grid-template-columns: 0.9fr 1.05fr 1.2fr; gap: var(--space-8); align-items: stretch;
 padding-bottom: var(--space-12); margin-bottom: var(--space-12); border-bottom: 1px solid var(--color-border);
}
.footer-service__item {
 display: grid; align-content: start; gap: var(--space-3); min-width: 0; padding: var(--space-4) 0;
}
.footer-service__item h3 {
 font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-wide);
 text-transform: uppercase;
}
.footer-service__item p { color: var(--color-muted); font-size: var(--fs-sm); max-width: 42ch; }
.footer-service__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.footer-service__links a, .footer-service__form button { font-size: var(--fs-sm); font-weight: 600; border-bottom: 1px solid currentColor; }
.footer-service__form { max-width: none; margin: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: end; }
.footer-service__form > div { grid-column: 1 / -1; }
.footer-service__form label { min-width: 0; }
.footer-service__form input {
 width: 100%; border: 0; border-bottom: 1px solid var(--black); border-radius: 0; padding: var(--space-3) 0;
 background: transparent; font: inherit; color: var(--color-fg);
}
.footer-service__form input:focus { outline: none; border-color: var(--terracotta); }
.footer-service__form button { align-self: center; text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: var(--space-3); }
.footer-service__form .form-msg { grid-column: 1 / -1; margin-top: 0; }
.footer-service--trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.footer-service__trust-item { text-align: center; justify-items: center; padding: 0; gap: var(--space-2); }
.footer-service__trust-item .service-card__icon { display: grid; place-items: center; min-height: 0; margin-bottom: var(--space-3); }
.footer-service__trust-item h3 { font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0.03em; text-transform: none; }
.footer-service__trust-item p { max-width: 32ch; font-size: var(--fs-xs); color: var(--color-muted); }
@media (max-width: 760px) { .footer-service--trust { grid-template-columns: 1fr; gap: var(--space-6); } }
.footer__cols { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: var(--space-12); margin-bottom: var(--space-16); }
/* Clean Jacquemus footer: 3 dropdown columns + a Follow column, no heavy brand/facts block */
.footer__cols--clean { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.footer__col-h {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-text);
  margin: 0 0 var(--space-4); padding: 0;
}
.footer__col--follow ul { margin: 0; padding: 0; list-style: none; }
.footer-help__studio { color: var(--color-muted); font-size: var(--fs-xs); line-height: 1.6; margin: 0 0 var(--space-4); max-width: 34ch; }
.footer__tag { color: var(--color-muted); font-size: var(--fs-sm); max-width: 34ch; margin: var(--space-5) 0; }
.footer__social { display: flex; gap: var(--space-5); }
.footer__social a { font-size: var(--fs-sm); border-bottom: 1px solid var(--color-border); padding-bottom: 2px; }
.footer__social a:hover { border-color: var(--terracotta); color: var(--terracotta); }
.footer__facts {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: var(--space-3) var(--space-5);
 margin-top: var(--space-6);
 max-width: 42rem;
}
.footer__facts li { display: grid; gap: 0.1rem; margin: 0; }
.footer__facts span {
 font-size: 0.58rem;
 color: var(--color-muted);
 font-weight: 700;
 letter-spacing: var(--tracking-wide);
 text-transform: uppercase;
}
.footer__facts strong { font-size: var(--fs-xs); font-weight: 500; line-height: 1.35; }
.footer h4 { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--space-5); color: var(--color-accent-text); font-family: var(--font-body); font-weight: 700; font-style: normal; }
.footer li { margin-bottom: var(--space-3); }
.footer__col a { font-size: var(--fs-sm); color: var(--color-fg); }
.footer__col a:hover { color: var(--jq-ink-hover); }

/* Jacquemus dropdown footer columns — header button + chevron, collapsible panel.
   JS opens them on desktop, collapses to an accordion on mobile; click toggles either way. */
.footer__col--acc { align-self: start; }
.footer__col-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 0 0 var(--space-4); color: var(--color-accent-text);
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  transition: color var(--transition-fast);
}
.footer__col-toggle:hover { color: var(--jq-ink-hover); }
.footer__col-toggle:focus-visible { outline: 1px solid var(--color-fg); outline-offset: 3px; }
.footer__col-chev { width: 11px; height: 8px; flex: 0 0 auto; color: var(--color-muted); transition: transform var(--transition); }
.footer__col--acc.is-open .footer__col-chev { transform: rotate(180deg); }
.footer__col-panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.34s var(--ease-out), opacity 0.28s var(--ease-out); }
.footer__col--acc.is-open .footer__col-panel { max-height: 22rem; opacity: 1; }
.footer__col-panel ul { margin: 0; padding: 0; list-style: none; }
/* — Jacquemus-style footer meta bar (3 equal columns) — */
.footer__meta { background: var(--color-bg); border-top: 1px solid var(--color-border); margin: var(--space-16) calc(-1 * var(--gutter)) calc(-1 * var(--space-8)); padding: 41px 26px 60px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; font-size: 11px; line-height: 20px; font-weight: 400; color: var(--jq-ink); letter-spacing: 0.035em; }
.footer__meta__copy { justify-self: start; }
.footer__meta__country { justify-self: end; text-align: right; }
.footer__meta__country a { color: inherit; text-decoration: none; }
.footer__meta__country a:hover { text-decoration: underline; }
.footer__wordmark { justify-self: center; display: inline-flex; align-items: center; color: var(--color-fg); }
.footer__wordmark svg, .footer__wordmark img { height: 28px; width: auto; }
@media (max-width: 760px) {
 .footer__meta { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 32px 20px 48px; gap: var(--space-4); }
 .footer__meta__copy, .footer__meta__country { justify-self: center; text-align: center; }
 .footer__wordmark { order: -1; }
}

/* — Footer newsletter + help band (Jacquemus) — */
.footer-engage {
 display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem);
 padding-block: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--color-border);
}
.footer-engage--solo { grid-template-columns: 1fr; max-width: 64ch; }
.footer-engage__col h3 {
 font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lg);
 letter-spacing: 0.01em; margin-bottom: var(--space-3); color: var(--color-fg);
}
.footer-engage__col > p { color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.6; max-width: 46ch; margin-bottom: var(--space-5); }
.footer-news__form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 460px; margin: 0; }
.footer-news__form input {
 width: 100%; padding: var(--space-4) 0; border: 0; border-bottom: 1px solid var(--color-fg);
 background: transparent; border-radius: 0; font: inherit; color: var(--color-fg);
}
.footer-news__form input:focus { outline: none; border-bottom-color: var(--jq-ink-hover); }
.footer-news__btn { width: 100%; justify-content: center; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--fs-xs); padding-block: var(--space-4); }
.footer-help__hours { color: var(--color-muted); font-size: var(--fs-xs); line-height: 1.6; margin-bottom: var(--space-4); }
.footer-help__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.footer-help__links a { font-size: var(--fs-sm); color: var(--color-fg); border-bottom: 1px solid var(--color-border); padding-bottom: 2px; }
.footer-help__links a:hover { border-color: var(--color-fg); }
.footer__follow-h {
 font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
 margin: var(--space-6) 0 var(--space-3); color: var(--color-accent-text);
 font-family: var(--font-body); font-weight: 700;
}
@media (max-width: 760px) { .footer-engage { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ============================================================
   JACQUEMUS 3-TIER FOOTER
   Tier 1: collapsible newsletter | contact (vertical rule between)
   Tier 2: three nav accordions + Follow on the right
   Tier 3: meta bar (defined above)
   ============================================================ */

/* —— Tier 1 —— */
.footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--color-border); }
.footer__top--solo { grid-template-columns: 1fr; max-width: 64ch; }
.footer__top-col { min-width: 0; }
.footer__newsletter { align-self: start; border-right: 1px solid var(--color-border);
  padding-right: clamp(1.5rem, 5vw, 4rem); }

/* newsletter title behaves as a toggle (chevron), but reads as a heading not a label */
.footer__newsletter-head { padding: 0; text-transform: none; font-weight: 400;
  font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: 0.01em;
  color: var(--color-fg); }
.footer__newsletter-head .footer__col-chev { width: 14px; height: 8px; color: var(--color-fg); }
.footer__newsletter-desc { color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.6;
  max-width: 46ch; margin: var(--space-4) 0 0; }
.footer__newsletter-panel { margin-top: var(--space-5); }
.footer__col--acc.is-open .footer__newsletter-panel { max-height: 64rem; }

/* form fields — clean Jacquemus underline inputs with a small label above */
.footer-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-5); }
.footer-field > label, .footer-field__label { font-size: var(--fs-xs); color: var(--color-muted); letter-spacing: 0.04em; }
.footer-radios { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-2); }
.footer-radio { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm);
  color: var(--color-fg); cursor: pointer; position: relative; }
.footer-news__form .footer-radio input { position: absolute; width: 1px; height: 1px; opacity: 0;
  border: 0; padding: 0; margin: 0; pointer-events: none; }
.footer-radio__dot { width: 18px; height: 18px; border: 1.5px solid var(--color-fg); border-radius: 50%;
  display: inline-block; position: relative; flex: none; transition: border-color var(--transition-fast); }
.footer-radio input:checked + .footer-radio__dot::after { content: ""; position: absolute; inset: 3.5px;
  background: var(--color-fg); border-radius: 50%; }
.footer-radio input:focus-visible + .footer-radio__dot { outline: 1px solid var(--color-fg); outline-offset: 2px; }

/* expanded REGISTER — outlined; fills on hover */
/* Client 2026-07-17: "JE REJOINS" in orange (was an ink outline). Same white-on-terracotta
   pairing already used by the La Nouvelle Vague tile and the closing CTA, so it reads as
   the brand's button rather than a one-off. Hover darkens instead of inverting. */
.footer-news__btn--register { display: block; width: 100%; margin-top: var(--space-2);
  border: 1px solid var(--terracotta); background: var(--terracotta); color: #fff;
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: var(--fs-xs); padding-block: var(--space-4); cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast); }
.footer-news__btn--register:hover { background: #b55123; border-color: #b55123; color: #fff; }

/* collapsed REGISTER — solid black CTA that reveals the form */
/* Client 2026-07-21: "JE REJOINS" in orange. NB there are TWO buttons with that label in
   this column — this one (the CTA that OPENS the panel, the one you see at rest) and
   .footer-news__btn--register (the form's submit, only visible once open). Only the second
   was turned terracotta on 17/07, so the client kept seeing a dark button. They swap via
   `.footer__newsletter.is-open .footer-news__cta { display: none }`, so they must match. */
.footer-news__cta { display: block; width: 100%; margin-top: var(--space-6);
  /* Fond terracotta LISIBLE : le blanc dessus passe de 3,17:1 a 5,57:1. C'est un bouton,
     pas un aplat decoratif — le texte doit se lire. Le survol #b55123 tient aussi (5,04). */
  border: 0; background: var(--accent-text, var(--terracotta)); color: #fff; font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--fs-xs);
  padding-block: var(--space-4); cursor: pointer; transition: background var(--transition-fast); }
.footer-news__cta:hover { background: #b55123; }
.footer__newsletter.is-open .footer-news__cta { display: none; }

/* Tier 1 right — contact */
.footer__contact-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lg);
  letter-spacing: 0.01em; margin-bottom: var(--space-4); color: var(--color-fg); }
.footer__contact-hours, .footer__contact-addr { color: var(--color-muted); font-size: var(--fs-sm);
  line-height: 1.7; margin: 0 0 var(--space-2); max-width: 42ch; }
.footer__contact-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }
.footer__contact-links a { font-size: var(--fs-sm); color: var(--color-fg); text-decoration: underline; text-underline-offset: 4px; }
.footer__contact-links a:hover { color: var(--jq-ink-hover); }

/* —— Tier 2 —— nav accordions (left) + Follow (right) */
.footer__nav { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--color-border); }
.footer__nav-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
/* Jacquemus nav headers: regular case, light weight, larger — not the uppercase chip style */
.footer__nav-cols .footer__col-toggle { text-transform: none; font-weight: 400;
  font-family: var(--font-display); font-size: var(--fs-md); letter-spacing: 0.01em; color: var(--color-fg); }
.footer__nav-cols .footer__col-chev { color: var(--color-fg); }
.footer__nav-follow { justify-self: end; text-align: left; }
.footer__nav-follow-h { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-md);
  letter-spacing: 0.01em; margin-bottom: var(--space-5); color: var(--color-fg); }
.footer__nav-follow-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer__nav-follow-list a { font-size: var(--fs-sm); color: var(--color-fg); text-decoration: underline; text-underline-offset: 4px; }
.footer__nav-follow-list a:hover { color: var(--jq-ink-hover); }

@media (max-width: 760px) {
  .footer__top { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__newsletter { border-right: 0; padding-right: 0; }
  .footer__nav { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__nav-cols { grid-template-columns: 1fr; gap: 0; }
  .footer__nav-follow { justify-self: start; }
}

/* ============================================================
 FIL D'ARIANE
 ============================================================ */
.breadcrumb { font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); padding-block: var(--space-6); }
.breadcrumb a:hover { color: var(--color-fg); }
.breadcrumb span { margin-inline: var(--space-2); opacity: 0.5; }

/* ============================================================
 PAGE PRODUIT
 ============================================================ */
/* Jacquemus PDP: gallery fills the left, a narrow sticky info panel sits right */
.product { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(2rem, 6vw, var(--space-24)); align-items: start; padding-bottom: var(--space-24); }
.gallery { order: -1; display: grid; grid-template-columns: 72px 1fr; gap: var(--space-4); }
.gallery__thumbs { display: flex; flex-direction: column; gap: var(--space-3); }
.gallery__thumb { width: 80px; aspect-ratio: 3/4; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; transition: border-color var(--transition-fast); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--color-fg); }
.gallery__thumb--play { position: relative; }
.gallery__play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.32); }
.gallery__play-icon::after { content: ''; display: block; width: 18px; height: 18px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 16px solid var(--white); margin-left: 2px; }
.gallery__main .media, .gallery__main { aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; background: var(--color-surface-2); }
/* Horizontal swipe carousel: capture left/right gestures, let the page scroll vertically. */
.gallery__main { touch-action: pan-y; cursor: grab; position: relative; }
.gallery__main:active { cursor: grabbing; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
/* Loading skeleton — shows instantly so the PDP never looks blank/broken while the
   product JS + hero image load on mobile; the media paints on top (z-index) and covers it. */
.gallery__main::before {
 content: ""; position: absolute; inset: 0; z-index: 0;
 background: linear-gradient(100deg, var(--paper-card) 28%, #e6e2d8 46%, #efece5 54%, var(--paper-card) 72%);
 background-size: 220% 100%;
 animation: gallery-shimmer 1.2s ease-in-out infinite;
}
/* Absolute-fill (inset:0 gives top+bottom:0) so the media height comes from the container's
   rendered box, NOT from height:100% resolving against an aspect-ratio-only parent — the
   latter paints blank on iOS Safari. z-index:1 keeps media above the loading skeleton. */
.gallery__main > img, .gallery__main > video { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
/* Cliente 28/07 : les videos produit s'affichaient avec des BANDES NOIRES sur les
   cotes. Un <video> letterboxe peint son propre fond noir PAR-DESSUS celui du
   conteneur : donner un fond au parent ne suffit donc pas, il faut le poser sur
   l'element video lui-meme. `contain` garde la piece entiere visible (jamais rognee)
   et le blanc raccorde avec les photos produit sur fond blanc de la meme galerie. */
.gallery__main > video { object-fit: contain; background: #fff; }
@keyframes gallery-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .gallery__main::before { animation: none; } }

/* Lifestyle video strip on PDP */
.product-lifestyle-strip { width: 100%; overflow: hidden; background: var(--black); margin: var(--space-16) 0 0; }
.lifestyle-strip__inner { position: relative; aspect-ratio: 9/16; max-height: 90vh; margin: 0 auto; }
@media (min-width: 640px) { .lifestyle-strip__inner { aspect-ratio: 16/9; max-height: 540px; } }
.lifestyle-strip__vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.lifestyle-strip__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-6) var(--space-8); background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%); }
.lifestyle-strip__kicker { color: var(--white); opacity: 0.8; font-size: 0.7rem; letter-spacing: 0.12em; }

.product-info { position: sticky; top: calc(var(--header-h) + var(--space-6)); padding-top: clamp(0.5rem, 5vw, 3.5rem); max-width: 30rem; }
.product-info__badge { margin-bottom: var(--space-3); }
.product-info h1 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; letter-spacing: 0.04em; line-height: 1.2; margin-bottom: var(--space-4); }
.product-info__price { font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: 0.03em; margin-bottom: var(--space-6); }
.product-info__short { color: var(--color-muted); font-size: var(--fs-sm); letter-spacing: 0.02em; line-height: 1.5; margin-bottom: var(--space-10); max-width: 42ch; }

/* Editorial product story — flowing "Point → Histoire → Objection → Métaphore → Invitation" block. */
.product-story { display: grid; gap: var(--space-4); margin: var(--space-8) 0; padding-top: var(--space-7); border-top: 1px solid var(--color-border); max-width: 60ch; }
.product-story[hidden] { display: none; }
.product-story__point { font-family: var(--font-serif); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.25; font-weight: 400; color: var(--color-fg); margin: 0; }
.product-story__body { color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.7; margin: 0; }
.product-story__quote { margin: var(--space-2) 0; padding-left: var(--space-4); border-left: 2px solid var(--accent, #de733d); }
.product-story__quote p { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--color-fg); margin: 0; }
.product-story__reassure { color: var(--color-fg); font-size: var(--fs-sm); line-height: 1.6; margin: 0; font-weight: 500; }
.product-story__invite { color: var(--accent, #de733d); font-size: var(--fs-sm); font-weight: 500; line-height: 1.6; margin: 0; }
/* Same block reused as the collection-page editorial band (Fruit Market / clothing manifesto). */
.product-story--collection { margin-inline: auto; max-width: 62ch; }
.col-story__inner .product-story--collection:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* PDP description block — sits directly above the Add-to-cart button. Unified premium ink
   (NO orange/terracotta), tighter frame, and refined letter/word spacing for a premium feel. */
body[data-page="product"] .product-story { margin: var(--space-6) 0 var(--space-8); padding-top: var(--space-6); gap: var(--space-3); max-width: 48ch; }
body[data-page="product"] .product-story__point { color: var(--color-fg); letter-spacing: 0.004em; line-height: 1.28; margin-bottom: 0.1em; }
body[data-page="product"] .product-story__body { color: var(--color-fg); line-height: 1.8; letter-spacing: 0.014em; word-spacing: 0.03em; }
body[data-page="product"] .product-story__quote { margin: var(--space-3) 0; border-left: 2px solid var(--color-fg); }
body[data-page="product"] .product-story__quote p { color: var(--color-fg); letter-spacing: 0.006em; line-height: 1.5; }
body[data-page="product"] .product-story__reassure { color: var(--color-fg); letter-spacing: 0.014em; line-height: 1.72; }
body[data-page="product"] .product-story__invite { color: var(--color-fg); font-weight: 500; letter-spacing: 0.02em; line-height: 1.72; }
/* Unify the PDP info-column links to premium ink too (was olive accent; also on hover). */
body[data-page="product"] .link-underline { color: var(--color-fg); }
body[data-page="product"] .link-underline:hover { color: var(--color-fg); opacity: 0.62; }
/* PDP controls polish — refined premium rhythm, sizes & alignment (Ranaco-calibrated). */
body[data-page="product"] .product-info__price { font-size: 0.95rem; letter-spacing: 0.05em; margin-bottom: var(--space-1); }
body[data-page="product"] #pColorName,
body[data-page="product"] #pVariants .option__label,
body[data-page="product"] #pVariants [data-variant-label],
body[data-page="product"] #pFinish .option__label { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: 0.72rem; letter-spacing: 0.16em; margin-bottom: var(--space-3); color: var(--color-fg); }
body[data-page="product"] .product-add-main { padding-block: 1.05rem; font-size: 0.72rem; letter-spacing: 0.2em; }
body[data-page="product"] .product-info__short { margin-bottom: var(--space-6); }
/* Arabic (RTL): never letter/word-space the script — it breaks the joined letters. */
[dir="rtl"] body[data-page="product"] .product-story__point,
[dir="rtl"] body[data-page="product"] .product-story__body,
[dir="rtl"] body[data-page="product"] .product-story__quote p,
[dir="rtl"] body[data-page="product"] .product-story__reassure,
[dir="rtl"] body[data-page="product"] .product-story__invite { letter-spacing: normal; word-spacing: normal; }

/* ============ FAQ — flat "Questions & Answers" editorial layout (Ranaco-style, YZA brand) ============ */
body[data-page="faq"] .page-hero { text-align: center; max-width: 680px; margin: var(--space-14) auto var(--space-12); }
body[data-page="faq"] .page-hero .eyebrow { color: var(--color-muted); letter-spacing: 0.28em; }
body[data-page="faq"] .page-hero h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(1.3rem, 3.2vw, 1.8rem); line-height: 1.2; color: var(--color-fg); }
body[data-page="faq"] .page-hero > p { color: var(--color-muted); font-size: 0.95rem; line-height: 1.7; letter-spacing: 0.01em; margin-top: var(--space-3); }
body[data-page="faq"] .faq-doc { max-width: 680px; margin: 0 auto; padding-bottom: var(--space-24); }
body[data-page="faq"] .faq-qa { padding: var(--space-8) 0; border-top: 1px solid var(--color-border); }
body[data-page="faq"] .faq-qa:first-child { border-top: 0; padding-top: 0; }
body[data-page="faq"] .faq-q { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.82rem; line-height: 1.5; color: var(--color-fg); margin: 0 0 var(--space-4); }
body[data-page="faq"] .faq-a p { color: var(--color-fg); font-size: 0.95rem; line-height: 1.8; letter-spacing: 0.014em; word-spacing: 0.02em; margin: 0; }
body[data-page="faq"] .faq-qa.accordion__item { padding: 0; }
body[data-page="faq"] .faq-qa.accordion__item:first-child { border-top: 1px solid var(--color-border); }
body[data-page="faq"] .faq-qa.accordion__item .faq-q { margin: 0; }
body[data-page="faq"] .faq-toggle { padding: var(--space-6) 0; text-align: start; text-transform: none; letter-spacing: 0.01em; }
body[data-page="faq"] .faq-answer > p { padding: 0 2.5rem var(--space-6) 0; }
[dir="rtl"] body[data-page="faq"] .faq-answer > p { padding-right: 0; padding-left: 2.5rem; }
body[data-page="faq"] .faq-contact { max-width: 680px; margin: var(--space-4) auto 0; text-align: center; color: var(--color-muted); font-size: 0.9rem; line-height: 1.8; letter-spacing: 0.01em; }
body[data-page="faq"] .faq-contact a { color: var(--color-fg); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
[dir="rtl"] body[data-page="faq"] .faq-q, [dir="rtl"] body[data-page="faq"] .faq-a p { letter-spacing: normal; word-spacing: normal; }

.option { margin-bottom: var(--space-6); }
.option__label { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-3); }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip { padding: 0.55rem var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); font-size: var(--fs-sm); transition: var(--transition-fast); background: var(--color-bg); }
.chip:hover { border-color: var(--color-muted); }
.chip.is-active { border-color: var(--color-fg); background: var(--color-fg); color: var(--cream); }
/* Taille obligatoire non choisie : l'ajout au panier est refuse et le bloc se signale.
   Pas de rouge d'erreur — c'est un rappel, pas une faute ; le contour encre suffit et
   reste dans la palette de la marque. Le libelle passe en encre pour qu'on le relise. */
.option.is-missing .chips { outline: 1px solid var(--color-fg); outline-offset: 6px; border-radius: var(--radius); }
.option.is-missing .option__label { color: var(--color-fg); }
@media (prefers-reduced-motion: no-preference) {
  .option.is-missing .chips { animation: yza-size-nudge 480ms var(--ease-out); }
  @keyframes yza-size-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
}

.chip--variant { display: inline-grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-2); min-width: min(11rem, 100%); border-radius: 999px; }
.chip--variant em { font-style: normal; font-size: 0.74em; opacity: 0.78; white-space: nowrap; }
.chip--variant.is-active em { opacity: 0.86; }

.add-row { display: flex; gap: var(--space-3); align-items: stretch; margin-top: var(--space-2); }
.add-row .qty { border-color: var(--color-border); }
.add-row .qty input { width: 46px; text-align: center; border: none; background: none; font: inherit; }
.add-row .btn { flex: 1; }

/* CTA PRINCIPAL DE LA FICHE PRODUIT — refonte 2026-08-05, meme systeme que la barre
   d'achat rapide des cartes : angle vif, Jost 400 en capitales, et le meme geste
   d'inversion au contact. Mais les deux boutons sont a des bouts opposes de la
   hierarchie, et le style le dit : la carte PROPOSE (surface claire, filet d'un dixieme
   d'encre) et s'assombrit au contact ; la fiche ENGAGE (encre pleine) et s'eclaircit.
   L'etat survole de celui-ci est exactement l'etat au repos de celui-la : c'est ce qui
   fait lire les deux comme un seul systeme plutot que comme deux boutons dessines
   separement. Le contour transparent d'avant se lisait comme un champ vide sur une page
   blanche — le defaut meme que la cliente signalait sur les cartes. */
.product-add-main.btn {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 0.6rem;
  justify-content: space-between; padding-inline: 1.35rem;
  background: var(--color-fg); color: var(--color-bg);
  border: 1px solid var(--color-fg); border-radius: 0;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--fs-xs); font-weight: 400;
  box-shadow: 0 1px 1px rgba(31, 31, 31, 0.05), 0 10px 24px -12px rgba(31, 31, 31, 0.35);
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.product-add-main.btn:hover { background: var(--color-bg); color: var(--color-fg); }
/* Retour physique a l'appui : c'est le seul endroit du site ou l'on engage un achat. */
.product-add-main.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(31, 31, 31, 0.05);
}
.product-add-main.btn:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 3px; }
/* Reprend le .product-add-main:disabled plus bas en ajoutant le retrait de l'ombre :
   une ombre portee sous un bouton inactif le ferait paraitre encore cliquable. */
.product-add-main.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.product-add-main__icon { display: inline-grid; place-items: center; flex: 0 0 auto; }
.product-add-main__icon svg { width: 17px; height: 17px; display: block; }
.product-add-main__label { flex: 1 1 auto; text-align: left; }
.product-add-main__price { flex: 0 0 auto; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.product-add-main__price:empty { display: none; }
.product-info__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }
.product-info__links .link-underline { font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--color-muted); }

.accordion { border-top: 1px solid var(--color-border); margin-top: var(--space-10); }
.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) 0; font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }
.accordion__btn .plus { color: var(--color-muted); line-height: 0; }
.accordion__btn .acc-glyph { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.accordion__btn .acc-glyph .acc-bar-v { transition: opacity var(--transition); }
.accordion__item.is-open .acc-glyph .acc-bar-v { opacity: 0; }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.accordion__item.is-open .accordion__panel { max-height: 800px; }

/* Tifinagh decorative sign - replaces botanical illustrations */
.product-tifinagh { display: block; font-size: 2.8rem; color: var(--terracotta); line-height: 1; margin-bottom: var(--space-4); opacity: 0.55; letter-spacing: 0; }
.accordion__panel-inner { padding-bottom: var(--space-5); color: var(--color-muted); max-width: 54ch; }
.charm-wear { display: grid; gap: var(--space-4); line-height: 1.65; }
.charm-wear h3 {
 font-family: var(--font-body);
 font-size: var(--fs-base);
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--color-fg);
}
.charm-wear ul {
 display: grid;
 gap: 0.45rem;
 margin: 0 0 var(--space-2);
 padding-left: 1.1rem;
}
.charm-wear li::marker { color: var(--olive); }
.charm-wear__intro, .charm-wear strong { color: var(--color-fg); }
.charm-wear__specs {
 border-top: 1px solid var(--color-border);
 padding-top: var(--space-3);
 color: var(--color-muted);
 display: grid;
 gap: 0.6rem;
 line-height: 1.55;
}

.product-support {
 display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr); gap: clamp(2rem, 5vw, var(--space-16));
 padding: var(--space-12) 0; margin-bottom: var(--space-12); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.product-support__copy h2 { font-size: clamp(2.2rem, 5vw, var(--fs-2xl)); margin: var(--space-3) 0 var(--space-5); }
.product-support__copy p:not(.eyebrow) { color: var(--color-muted); max-width: 48ch; }
.product-support__scarcity {
 display: inline-block; margin-top: var(--space-5); padding-left: var(--space-4); border-left: 1px solid var(--black);
 background: transparent; color: var(--color-muted); font-weight: 500;
}
.product-support__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--color-border); background: var(--white); }
.product-support__item { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5); min-height: 160px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.product-support__item:nth-child(2n) { border-right: 0; }
.product-support__item:nth-last-child(-n+2) { border-bottom: 0; }
.product-support__item > span {
 font-size: 0.68rem; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted);
}
.product-support__item a { justify-self: start; font-weight: 600; border-bottom: 1px solid transparent; }
.product-support__item a:hover { color: var(--terracotta); border-bottom-color: currentColor; }
.product-support__prices a { display: flex; width: 100%; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-border); padding-bottom: 0.35rem; }
.product-support__prices em { font-style: normal; color: var(--color-muted); }
.product-support__prices strong { white-space: nowrap; }

.product-rail-section { overflow: clip; }
.product-rail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-6); }
.product-rail-block + .product-rail-block { margin-top: var(--space-12); }
.product-rail-tabs { display: inline-flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.product-rail-tabs button {
 position: relative; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted);
}
.product-rail-tabs button[aria-pressed="true"] { color: var(--color-fg); }
.product-rail-tabs button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.45rem; height: 1px; background: var(--black); }
.rail-card { position: relative; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.rail-card__top { position: relative; }
.rail-card__media { display: block; aspect-ratio: 4 / 5; background: var(--color-surface-2); overflow: hidden; }
.rail-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.rail-card:hover .rail-card__media img { transform: scale(1.045); }
.rail-card__add {
 position: absolute; bottom: var(--space-3); right: var(--space-3); width: 2.2rem; height: 2.2rem;
 display: grid; place-items: center; border: 1px solid var(--black); background: var(--white); color: var(--black); font-size: 1.45rem; line-height: 1;
 transition: transform var(--transition-fast), background var(--transition-fast);
}
.rail-card__add:hover { transform: rotate(90deg); background: var(--brand-yellow); }
.rail-card__body { display: grid; gap: 0.1rem; padding: var(--space-4); min-height: 7rem; }
.rail-card__body span { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.rail-card__body strong { font-size: var(--fs-sm); text-transform: uppercase; line-height: 1.2; }
.rail-card__body em { font-style: normal; font-size: var(--fs-sm); color: var(--color-muted); }

/* ============================================================
 COLLECTIONS
 ============================================================ */
.collection-head { text-align: center; padding-block: var(--space-16) var(--space-8); }
.collection-head h1 { font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 450; line-height: 1; letter-spacing: 0; margin-top: var(--space-2); }
.collection-head p { color: var(--color-muted); margin-top: var(--space-3); max-width: 52ch; margin-inline: auto; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-10); }
.filter-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.filter-chips button { padding: 0.5rem var(--space-4); border: 1px solid var(--color-border); border-radius: 0; font-size: var(--fs-sm); color: var(--color-muted); transition: var(--transition-fast); }
.filter-chips button:hover { border-color: var(--color-muted); color: var(--color-fg); }
.filter-chips button[aria-pressed="true"] { background: var(--color-fg); color: var(--cream); border-color: var(--color-fg); }
.toolbar__right { display: flex; align-items: center; gap: var(--space-4); }
.toolbar select { font: inherit; font-size: var(--fs-sm); border: 1px solid var(--color-border); padding: 0.5rem var(--space-4); border-radius: var(--radius); background: var(--color-bg); }
.results-count { font-size: var(--fs-sm); color: var(--color-muted); }

/* ============================================================
 PAGES CONTENU (histoire, faq, contact, journal)
 ============================================================ */
.page-hero { padding-block: clamp(3rem, 7vw, var(--space-24)) var(--space-12); max-width: 60ch; }
.page-hero h1 { font-size: var(--fs-3xl); margin: var(--space-3) 0 var(--space-5); }
.page-hero p { font-size: var(--fs-md); color: var(--color-muted); }
.full-img { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: var(--radius); }
.prose { max-width: 64ch; }
.prose p { margin-bottom: var(--space-5); color: var(--color-fg); }
.prose h2 { font-size: var(--fs-xl); margin: var(--space-12) 0 var(--space-4); }
.prose .lede { font-size: var(--fs-lg); color: var(--color-fg); font-family: var(--font-display); line-height: 1.4; margin-bottom: var(--space-8); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); text-align: center; }
.stat__n { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--terracotta); }
.stat__l { font-size: var(--fs-sm); color: var(--color-muted); letter-spacing: 0.04em; }

.bespoke-card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; }
.bespoke-card .media { aspect-ratio: 4/5; height: 100%; }
.bespoke-card__body { padding: clamp(2rem,4vw,var(--space-16)); }
.bespoke-card__body h3 { font-size: var(--fs-xl); margin-bottom: var(--space-3); }
.bespoke-card__body p { color: var(--color-muted); margin-bottom: var(--space-5); }
.bespoke-list { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.bespoke-list div { font-size: var(--fs-sm); }
.bespoke-list strong { display: block; font-family: var(--font-display); font-size: var(--fs-md); }

/* Story page */
.story-page { padding-bottom: var(--space-20); }
.story-hero { padding-top: clamp(3.5rem, 7vw, var(--space-24)); overflow: hidden; }
.story-hero__copy { text-align: center; max-width: 980px; margin-inline: auto; }
.story-hero__copy .eyebrow { color: var(--color-fg); }
.story-hero h1 {
 font-size: clamp(3rem, 8vw, 7rem);
 font-weight: 400;
 line-height: 0.92;
 margin: var(--space-3) 0 var(--space-8);
 text-wrap: balance;
}
.story-copy { max-width: 860px; margin-inline: auto; }
.story-copy--center { text-align: center; }
.story-copy p { color: var(--color-fg); font-size: var(--fs-md); line-height: var(--leading-body); }
.story-copy p + p { margin-top: var(--space-5); }
.story-atelier-tagline { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--accent, #de733d); margin-top: var(--space-6) !important; }
.story-copy h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-5); text-wrap: balance; }
.story-copy .btn { margin-top: var(--space-6); }
.story-moodboard {
 margin: clamp(3rem, 7vw, var(--space-20)) 0 0;
 border-block: 1px solid var(--color-border);
 overflow: hidden;
}
.story-moodboard img {
 width: 100%;
 height: min(56vw, 760px);
 min-height: 360px;
 object-fit: cover;
 object-position: center;
}
.story-section { padding-block: clamp(4rem, 8vw, var(--space-24)); }
.story-family { max-width: min(1120px, 100%); margin: var(--space-12) auto 0; overflow: hidden; }
.story-family img { width: 100%; max-height: min(1280px, 160vh); height: auto; object-fit: contain; object-position: top center; display: block; }
.manifesto-title { font-size: clamp(3rem, 13vw, 7rem) !important; font-weight: 400; letter-spacing: 0.04em; line-height: 0.95; margin: 0; }
/* Lookbook editorial magazine (real photos) */
.lookmag { display: flex; flex-direction: column; gap: 5px; max-width: 1400px; margin: 0 auto; padding: 0 5px clamp(3rem, 7vw, 6rem); }
.lookmag figure { margin: 0; overflow: hidden; background: var(--paper-card); }
.lookmag img { width: 100%; height: auto; display: block; }
.lookmag-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.lookmag-cover { position: relative; }
.lookmag-cover figcaption { position: absolute; left: clamp(1.4rem, 4vw, 3.5rem); bottom: clamp(1.4rem, 4vw, 3.5rem); color: #fff; display: grid; gap: 6px; }
.lookmag-kicker { font-family: var(--font-serif); font-style: italic; font-size: clamp(1rem, 2vw, 1.5rem); text-shadow: 0 2px 18px rgba(0,0,0,0.5); }
.lookmag-h { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.2rem, 6vw, 5rem); line-height: 0.98; text-shadow: 0 2px 30px rgba(0,0,0,0.45); }
.lookmag-label { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 2.6vw, 1.7rem); text-align: center; color: var(--accent); margin: clamp(1.4rem, 4vw, 3rem) 0 0.3rem; }
@media (max-width: 700px) { .lookmag-duo { grid-template-columns: 1fr; } }
/* Collection storytelling band (charms craft, Jawhara fabric) */
.col-story { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--color-border); margin-top: clamp(2rem, 5vw, 3.5rem); }
/* Editorial story woven INTO the grid (client: "au milieu des vignettes produit et avoir un joli design"). */
#collectionGrid .col-story--ingrid { grid-column: 1 / -1; display: grid; align-content: center; justify-items: center; text-align: center; gap: var(--space-3); background: #f7f1ea; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem); margin-block: var(--space-2); border: 0; }
#collectionGrid .col-story--ingrid blockquote { position: relative; max-width: 34ch; margin: 0; padding-top: var(--space-6); font-family: var(--font-serif); font-style: italic; font-size: clamp(1.35rem, 3vw, 2.15rem); line-height: 1.28; color: var(--color-fg); }
#collectionGrid .col-story--ingrid blockquote::before { content: "“"; position: absolute; inset: -.25em 50% auto auto; translate: 50% 0; font-size: 3.5em; line-height: 1; color: var(--brand-olive); opacity: .34; }
#collectionGrid .col-story--ingrid h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.1; margin: 0; max-width: 24ch; }
#collectionGrid .col-story--ingrid p { color: var(--color-muted); max-width: 58ch; font-size: var(--fs-md); line-height: var(--leading-body); }
/* "Charger plus" buttons on the YZA Girls walls (client: page too long). */
.girls-loadmore { display: flex; justify-content: center; margin-top: var(--space-8); }
.col-story__inner { max-width: 60ch; margin: 0 auto; text-align: center; }
.col-story__inner h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 3.5vw, 2.6rem); line-height: 1.1; margin: 0.4rem 0 0.8rem; }
.col-story__inner p { color: var(--color-muted); font-size: var(--fs-md); line-height: var(--leading-body); }
/* Bags collection: editorial video banner (La Sculpture clip) above the grid. */
.col-bag-hero { width: 100%; margin: 0 0 clamp(1.5rem, 4vw, 2.75rem); }
.col-bag-hero__inner { position: relative; aspect-ratio: 16 / 9; max-height: 560px; overflow: hidden; background: var(--black); }
@media (max-width: 640px) { .col-bag-hero__inner { aspect-ratio: 4 / 5; max-height: 80vh; } }
.col-bag-hero__vid { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Deep gradient (matches the still La Sculpture tile) so the caption stays very
   readable over the bright clip. */
.col-bag-hero__inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 28%, rgba(0,0,0,0.30) 60%, rgba(0,0,0,0.74) 100%); pointer-events: none; }
.col-bag-hero__cap { position: absolute; z-index: 1; left: clamp(1.1rem, 3vw, 2.5rem); bottom: clamp(1.1rem, 3vw, 2.2rem); color: #fff; display: grid; gap: 0.3rem; text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 24px rgba(0,0,0,0.5); }
.col-bag-hero__cap .eyebrow { color: #fff; font-family: var(--font-serif); font-style: italic; }
.col-bag-hero__line { font-size: var(--fs-md); max-width: 36ch; }
[dir="rtl"] .col-bag-hero__cap { left: auto; right: clamp(1.1rem, 3vw, 2.5rem); }
.story-section--founder {
 background: var(--brand-pink);
 border-block: 0;
}
.story-atelier-image {
 width: 100%;
 height: clamp(280px, 34vw, 460px);
 overflow: hidden;
 margin: 0 auto var(--space-12);
 border: 1px solid var(--color-border);
}
.story-atelier-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
}
.story-founder-image {
 width: min(330px, 72%);
 aspect-ratio: 3 / 4;
 overflow: hidden;
 margin: 0 auto var(--space-10);
 border: 1px solid var(--color-border);
 border-radius: var(--radius);
}
.story-founder-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 38%;
}
.story-section--manifesto {
 border-top: 1px solid var(--color-border);
 background: var(--color-bg);
}
.manifesto-list {
 counter-reset: manifesto;
 display: grid;
 gap: 0;
 max-width: 760px;
 margin: var(--space-10) auto 0;
 padding: 0;
 list-style: none;
}
.manifesto-list li {
 counter-increment: manifesto;
 display: grid;
 grid-template-columns: 4rem 1fr;
 gap: var(--space-4);
 align-items: baseline;
 padding: var(--space-3) 0;
 border-bottom: 1px solid var(--color-border);
 font-size: var(--fs-md);
}
.manifesto-list li::before {
 content: counter(manifesto, upper-roman) ".";
 font-family: var(--font-hand);
 font-size: 1.35rem;
 font-weight: 700;
 color: var(--brand-orange);
 line-height: 1;
}
/* ===== L'évolution — collection frise (YZA-style timeline with product photos) ===== */
.collection-frise { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.collection-frise__track {
  list-style: none; margin: 0; padding: 0 clamp(0.75rem, 4vw, 2rem) 0.75rem;
  display: flex; gap: 0; align-items: flex-start;
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;
}
.collection-frise__track::-webkit-scrollbar { height: 4px; }
.collection-frise__track::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
.frise-step {
  flex: 0 0 clamp(198px, 40vw, 250px); scroll-snap-align: center;
  position: relative; display: flex; flex-direction: column; text-align: center;
}
.frise-step__index {
  font-family: var(--font-serif); font-style: italic; line-height: 1;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem); color: var(--terracotta, #c45e29);
  margin: 0 auto 0.9rem;
}
/* Client 2026-07-17: no grey bands. Two causes, both removed —
   (1) this beige #f4f1ea fill was the placeholder showing through on the neighbouring
       cards, whose images had not loaded yet (a horizontal rail never triggers
       loading="lazy" for what sits off to the SIDE). The 6 frise images are now eager.
   (2) the 1px frame read as a grey mat around each photo at small sizes. */
.frise-step__media {
  margin: 0 clamp(0.55rem, 1.6vw, 1rem); aspect-ratio: 3 / 4; overflow: hidden;
  border: 0; background: transparent;
}
.frise-step__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease-out, ease); }
.frise-step:hover .frise-step__media img { transform: scale(1.045); }
/* Rail spans the full card width so adjacent cards join into one continuous accent line. */
.frise-step__rail { position: relative; height: 2.5rem; margin-block: 0.15rem; }
.frise-step__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--accent, #de733d); transform: translateY(-50%); }
.frise-step:first-child .frise-step__rail::before { left: 50%; }
.frise-step--last .frise-step__rail::before { right: 9px; }
/* Client 2026-07-17: the orange diamond node is gone — "juste un trait". A berber sign
   was the other option but none of them survive being drawn at 11px; the clean
   uninterrupted rail reads better. The node element stays in the markup (harmless,
   and it keeps the rail markup symmetrical) — it is simply not painted. */
.frise-step__node { display: none; }
.frise-step__arrow {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--accent, #de733d);
}
.frise-step__name { font-family: var(--font-serif); font-weight: 500; line-height: 1.15; font-size: clamp(1.05rem, 2vw, 1.3rem); margin: 0 0 0.5rem; }
.frise-step__text { margin: 0 clamp(0.4rem, 1.4vw, 0.9rem); color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.55; }
[dir="rtl"] .frise-step__arrow { right: auto; left: 0; border-left: 0; border-right: 8px solid var(--accent, #de733d); }
@media (max-width: 640px) { .frise-step { flex-basis: 74vw; } }

.story-close { text-align: center; margin-top: var(--space-12); }
.story-close p { font-size: var(--fs-md); margin-bottom: var(--space-6); }
.story-links {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 gap: var(--space-4) var(--space-6);
 /* Cliente 28/07 : « sauter une ligne pour aerer » entre le paragraphe et
    l'encart de liens. 1,5 rem -> 2,5 rem, soit une ligne de blanc en plus.
    Vaut pour les deux pages qui portent l'encart (/histoire et /studio) :
    l'interet de la demande est justement qu'elles soient identiques. */
 margin-top: var(--space-10);
}
.story-feature .editorial__media .media { aspect-ratio: 16 / 10; }

/* FAQ */
.faq-list { max-width: 760px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-item .accordion__btn { text-transform: none; font-family: var(--font-display); font-size: var(--fs-md); letter-spacing: -0.01em; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,var(--space-20)); align-items: start; }
.contact-info dl { display: grid; gap: var(--space-6); }
.contact-info dt { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-1); }
.contact-info dd { font-size: var(--fs-md); }
.contact-info a:hover { color: var(--terracotta); }
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.field label { font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
.field input, .field textarea { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); background: var(--color-bg); border-radius: var(--radius); font: inherit; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--color-fg); }
.reseller-card {
 display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
 border-block: 1px solid var(--color-border); padding-block: var(--space-10); margin-bottom: var(--space-20);
}
.reseller-card h2 { font-size: var(--fs-xl); margin: var(--space-2) 0 var(--space-3); }
.reseller-card p:last-child { max-width: 64ch; color: var(--color-muted); }
.reseller-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); flex: 0 0 auto; }
@media (max-width: 760px) {
 .reseller-card { align-items: flex-start; flex-direction: column; }
 .reseller-card__actions { width: 100%; justify-content: flex-start; }
 .reseller-card__actions .btn { flex: 1 1 100%; }
}

/* ============================================================
 BANDE D'AUTORITÉ / PRESSE
 ============================================================ */
.press-band { padding-block: var(--space-8); border-block: 1px solid var(--color-border); background: var(--color-bg); }
.press-band__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
.press-band__label { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted); }
.press-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.1rem, 4vw, 3rem); }
.press-list span { font-family: var(--font-display); font-size: clamp(1.05rem, 2.2vw, 1.6rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); opacity: 0.78; }
/* Client 2026-07-17: drop the rule above L'ESPRIT YZA too — .press-band sets border-block,
   so killing only border-bottom left the top line showing. */
.icon-strip { padding-block: var(--space-12); border-block: 0; }
/* Small intro label so the values band no longer "arrive bizarrement" (client feedback). */
.icon-strip__label { display: block; text-align: center; margin-bottom: var(--space-8); }
.icon-strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-10); align-items: center; }
.icon-strip__item { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: var(--space-5); min-width: 0; }
.icon-strip__item img { width: 44px; height: 44px; object-fit: contain; transform-origin: center; transition: transform var(--transition); }
.icon-strip__item:hover img { transform: scale(1.12) rotate(-3deg); }
/* Authentic Tifinagh letterforms (Noto Sans Tifinagh) — replace the invented "Berber" PNGs (client: "c pas des signes berbères"). */
.tif-glyph { font-family: 'Noto Sans Tifinagh', var(--font-body); font-size: 2.5rem; line-height: 1; color: var(--color-fg); }
.icon-strip__item .tif-glyph { width: 44px; text-align: center; transform-origin: center; transition: transform var(--transition); }
.icon-strip__item:hover .tif-glyph { transform: scale(1.12) rotate(-3deg); }
.glyph-divider .tif-glyph { font-size: 2rem; opacity: 0.75; }
.glyph-deco .tif-glyph { font-size: 2rem; }
.icon-strip__item span { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0.05em; line-height: 1.35; color: var(--color-fg); }
/* Amazigh / Berber symbols - "stamped" staggered draw-in, details unchanged */
@keyframes icon-stamp { 0% { opacity: 0; transform: translateY(12px) scale(0.55) rotate(-10deg); } 55% { opacity: 1; transform: translateY(0) scale(1.1) rotate(3deg); } 100% { opacity: 1; transform: none; } }
.js .icon-strip__inner .icon-strip__item img, .js .icon-strip__inner .icon-strip__item .tif-glyph { opacity: 0; }
.js .icon-strip__inner.is-visible .icon-strip__item img, .js .icon-strip__inner.is-visible .icon-strip__item .tif-glyph { animation: icon-stamp 0.85s var(--ease-out) both; }
.js .icon-strip__inner.is-visible .icon-strip__item:nth-child(2) img, .js .icon-strip__inner.is-visible .icon-strip__item:nth-child(2) .tif-glyph { animation-delay: 0.12s; }
.js .icon-strip__inner.is-visible .icon-strip__item:nth-child(3) img, .js .icon-strip__inner.is-visible .icon-strip__item:nth-child(3) .tif-glyph { animation-delay: 0.24s; }
.js .icon-strip__inner.is-visible .icon-strip__item:nth-child(4) img, .js .icon-strip__inner.is-visible .icon-strip__item:nth-child(4) .tif-glyph { animation-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) { .js .icon-strip__inner .icon-strip__item img, .js .icon-strip__inner.is-visible .icon-strip__item img, .js .icon-strip__inner .icon-strip__item .tif-glyph, .js .icon-strip__inner.is-visible .icon-strip__item .tif-glyph { animation: none; opacity: 1; } }

/* ============================================================
 GLYPH ORNAMENTS - standalone Amazigh glyphs as decorative accents
 ============================================================ */
.glyph-deco { display: block; text-align: center; margin-bottom: var(--space-4); }
.glyph-deco img { width: 44px; height: 44px; opacity: 0.38; object-fit: contain; }
.glyph-divider { text-align: center; padding-block: var(--space-8) var(--space-4); }
.glyph-divider img { width: 64px; height: 64px; opacity: 0.28; object-fit: contain; }

/* ============================================================
 L'OFFRE (BUNDLES)
 ============================================================ */
/* Jacquemus 4-product grid with per-card draggable image carousel.
   Tight 5px gap between cards, 3/4 portrait media, name + price + heart
   surface on hover (overlaid at the bottom, no chrome at rest). */
/* Full-bleed: grid spans the viewport edge-to-edge, only a 5px rhythm. No header. */
.offer-section { padding-block: 5px; }
.offer-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
  width: 100%; padding: 5px; margin: 0;
}
.offer-card {
  position: relative; display: block; overflow: hidden;
  background: var(--paper-card); aspect-ratio: 3 / 4;
  text-decoration: none; color: var(--color-fg);
}
.offer-card__media {
  position: absolute; inset: 0; overflow: hidden;
  cursor: grab; -webkit-user-select: none; user-select: none;
  touch-action: pan-y; /* allow vertical page scroll, but we'll preventDefault horizontal */
}
.offer-card__media.is-dragging { cursor: grabbing; }
.offer-card__track {
  display: flex; height: 100%; will-change: transform;
  transition: transform 0.45s var(--ease-out);
}
.offer-card__track.is-dragging { transition: none; }
.offer-card__slide { flex: 0 0 100%; height: 100%; min-width: 0; }
.offer-card__slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
}
.offer-card__overlay {
  position: absolute; inset: 0; z-index: 2; display: block;
  /* whole-card click target — clicks pass through to underlying drag until the IIFE swallows them */
}
.offer-card__dots {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 3;
  display: flex; justify-content: center; gap: 5px;
  pointer-events: none;
  opacity: 0; transition: opacity 0.25s var(--ease-out);
}
.offer-card:hover .offer-card__dots, .offer-card:focus-within .offer-card__dots { opacity: 0.85; }
.offer-card__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); transition: background 0.25s, transform 0.25s;
}
.offer-card__dot.is-active { background: var(--white); transform: scale(1.15); }
.offer-card__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-5);
  color: var(--color-fg);
  opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease-out);
}
.offer-card:hover .offer-card__body, .offer-card:focus-within .offer-card__body {
  opacity: 1; pointer-events: auto;
}
.offer-card__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: 14px; letter-spacing: 0.05em; line-height: 1.2;
  color: var(--color-fg); text-decoration: none;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.55);
}
.offer-card__name:hover { color: var(--jq-ink-hover); }
.offer-card__price {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.05em;
  white-space: nowrap; align-self: flex-end;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.55);
}
.offer-card__wish {
  position: absolute; right: 8px; bottom: 8px; z-index: 4;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: none; border: 0; color: var(--color-fg); cursor: pointer;
  opacity: 0; transition: opacity 0.25s var(--ease-out), color var(--transition-fast);
}
.offer-card:hover .offer-card__wish, .offer-card:focus-within .offer-card__wish { opacity: 1; }
.offer-card__wish:hover { color: var(--jq-ink-hover); }
.offer-card__wish svg { display: block; }
.offer-card__wish.is-active svg path { fill: currentColor; }

/* Mobile: 2 columns and always-visible name/price (no hover on touch) */
@media (max-width: 760px) {
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
  .offer-card__body { opacity: 1; pointer-events: auto; }
  .offer-card__dots { opacity: 0.7; }
}

.offer-card__price s, .product-card__price s, .was { color: var(--color-muted); opacity: 0.7; font-size: 0.84em; margin-right: 0.25em; }

/* ============================================================
 PREUVE SOCIALE (témoignages, note)
 ============================================================ */
.stars { color: var(--terracotta); letter-spacing: 0.08em; }
.rating-summary { margin-top: var(--space-4); display: flex; gap: var(--space-2); align-items: center; justify-content: center; font-size: var(--fs-sm); color: var(--color-muted); }
.rating-summary .stars { font-size: var(--fs-md); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
/* Rotating reviews: fade the grid out/in as "show more" swaps the visible set. */
#testimonialsGrid { transition: opacity .2s ease; }
#testimonialsGrid.is-rotating { opacity: 0; }
.reviews-more-wrap { margin-top: var(--space-7); display: flex; justify-content: center; }
.reviews-more { font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink, #1f1f1f); background: transparent; border: 1px solid var(--color-border); border-radius: 999px; padding: .8rem 2rem; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.reviews-more:hover { background: var(--color-ink, #1f1f1f); color: #fff; border-color: var(--color-ink, #1f1f1f); }
.reviews-more[hidden] { display: none; }
.testimonial { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-8); display: grid; gap: var(--space-4); }
.testimonial .stars { font-size: var(--fs-sm); }
.testimonial blockquote { font-family: var(--font-display); font-size: var(--fs-md); line-height: 1.45; }
.testimonial figcaption { font-size: var(--fs-sm); color: var(--color-muted); }

/* ── Reviews — "Le Mur des Voix": a featured pull-quote over a murmur of real raves ─── */
.reviews-editorial { display: block; margin-top: var(--space-10); }
.reviews-hero {
 position: relative;
 display: grid;
 grid-template-columns: minmax(0, 63%) 1fr;
 background: var(--paper-card);
 padding: clamp(2rem, 5vw, 4rem);
 transition: opacity 0.3s var(--ease-out);
}
.reviews-hero > * { grid-column: 1; }
.reviews-hero.is-rotating { opacity: 0; }
.reviews-hero__mark {
 font-family: var(--font-serif);
 font-size: clamp(6rem, 13vw, 11rem);
 line-height: 0.62;
 color: var(--accent-2);
 margin: 0 0 -0.26em -0.05em;
}
.reviews-hero__stars { margin-bottom: var(--space-4); }
.reviews-hero__stars .stars { color: var(--accent); font-size: var(--fs-sm); letter-spacing: 0.1em; }
.reviews-hero__quote {
 font-family: var(--font-serif);
 font-weight: 400;
 font-size: clamp(1.55rem, 3.1vw, 2.55rem);
 line-height: 1.3;
 color: var(--color-fg);
 max-width: 24ch;
 margin: 0;
 text-wrap: pretty;
}
.reviews-hero__rule { display: block; width: 40px; height: 1px; background: var(--accent); margin: var(--space-6) 0 var(--space-4); }
.reviews-hero__by { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.reviews-hero__name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--fs-sm); color: var(--color-fg); }
.reviews-hero__src { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); }
.reviews-hero__src.is-verified { color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0.28em 0.75em; }

/* 3-up review cards (paginated by the arrows) — left-aligned, in the brand paper card. */
/* Reviews: constrained (not full-bleed), premium white cards with a hairline black border (M-batch). */
.reviews-editorial--trio { margin-top: var(--space-8); max-width: 1120px; margin-inline: auto; }
.reviews-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); align-items: stretch; }
.review-card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--white, #fff); border: 1px solid var(--black, #1f1f1f); padding: clamp(1.6rem, 2.4vw, 2.25rem); text-align: left; }
.review-card__stars .stars { color: var(--accent); font-size: var(--fs-sm); letter-spacing: 0.1em; }
.review-card__quote { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.42; color: var(--color-fg); margin: 0; text-wrap: pretty; flex: 1; }
.review-card__by { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.review-card__name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--color-fg); }
.review-card__src { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); }
.review-card__src.is-verified { color: var(--accent); align-self: flex-start; border: 1px solid var(--accent); border-radius: 999px; padding: 0.28em 0.75em; }
@media (max-width: 860px) { .reviews-trio { grid-template-columns: 1fr; gap: var(--space-3); } }

.reviews-murmur {
 max-width: 68ch;
 margin: var(--space-12) auto 0;
 text-align: center;
 font-size: var(--fs-md);
 line-height: 2.1;
 color: var(--color-muted);
}
.reviews-murmur__q { font-family: var(--font-serif); font-style: italic; color: var(--color-fg); }
.reviews-murmur__n { font-family: var(--font-display); font-size: 0.78em; letter-spacing: 0.04em; white-space: nowrap; }
.reviews-murmur__sep { color: var(--accent); margin: 0 0.5em; font-size: 0.8em; }

/* Carousel: one quote at a time, stable height so short/long quotes don't jump */
.reviews-hero--carousel { min-height: clamp(260px, 32vh, 340px); align-content: center; }
.reviews-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-5); }
.reviews-nav__btn {
 width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
 font-family: var(--font-serif); font-size: 1.5rem; line-height: 0; color: var(--color-fg);
 background: transparent; border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer;
 transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.reviews-nav__btn:hover { background: var(--color-fg); color: #fff; border-color: var(--color-fg); }
.reviews-nav__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reviews-nav__count { font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: 0.14em; color: var(--color-muted); min-width: 6ch; text-align: center; font-variant-numeric: tabular-nums; }
.reviews-nav__chev { width: 9px; height: 15px; display: block; }
.reviews-nav__sep { display: inline-block; margin: 0 0.55em; font-size: 0.6em; color: var(--accent); vertical-align: 0.16em; }

.reviews-more-wrap { margin-top: var(--space-12); }

@media (max-width: 768px) {
 .reviews-hero { grid-template-columns: 1fr; padding: var(--space-6); }
 .reviews-hero__mark { font-size: clamp(4rem, 20vw, 6rem); }
 .reviews-hero__quote { font-size: clamp(1.4rem, 6vw, 1.9rem); max-width: none; }
 .reviews-murmur { margin-top: var(--space-8); font-size: var(--fs-base); line-height: 2; }
 .reviews-more-wrap { margin-top: var(--space-8); }
}
@media (prefers-reduced-motion: reduce) {
 .reviews-hero { transition: none; }
}
.testimonial__verified { display: inline-block; margin-left: var(--space-2); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--olive); }

/* ============================================================
 ARCHIVES SOURCES
 ============================================================ */
.archive-summary { padding-block: var(--space-12); }
.archive-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-10); }
.archive-filters button {
 padding: 0.5rem var(--space-4); border: 1px solid var(--color-border); border-radius: 999px;
 font-size: var(--fs-sm); color: var(--color-muted); background: var(--color-bg); transition: var(--transition-fast);
}
.archive-filters button:hover { border-color: var(--color-muted); color: var(--color-fg); }
.archive-filters button[aria-pressed="true"] { background: var(--color-fg); color: var(--cream); border-color: var(--color-fg); }
.archive-filters span { opacity: 0.62; margin-left: 0.25rem; }
.archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.archive-card { display: block; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-bg); transition: transform var(--transition), box-shadow var(--transition); }
.archive-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.archive-card__media { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-surface-2); }
.archive-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.archive-card:hover .archive-card__media img { transform: scale(1.04); }
.archive-card__body { display: grid; gap: var(--space-1); padding: var(--space-4); }
.archive-card__body strong { font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; }
.archive-card__body span:last-child { font-size: var(--fs-xs); color: var(--color-muted); }
.archive-card__group { font-size: 0.62rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-text); }
.archive-docs { display: grid; gap: var(--space-3); }
.archive-doc {
 display: flex; justify-content: space-between; gap: var(--space-4); align-items: center;
 padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius);
 background: var(--color-bg); transition: border-color var(--transition-fast), color var(--transition-fast);
}
.archive-doc:hover { border-color: var(--terracotta); color: var(--terracotta); }
.archive-doc span { display: grid; gap: 0.15rem; }
.archive-doc strong { font-size: var(--fs-sm); font-weight: 500; }
.archive-doc small, .archive-doc em { font-size: var(--fs-xs); color: var(--color-muted); font-style: normal; }

/* Page produit : note + offre au moment du prix */
.product-info__rating { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-muted); margin-bottom: var(--space-3); }
.product-info__rating .stars { font-size: var(--fs-md); }
.product-info__priceRow { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.product-info__priceRow .product-info__price { margin-bottom: 0; }
.pill-save { background: transparent; color: var(--color-muted); border-bottom: 1px solid rgba(0,0,0,0.32); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 0 0.18rem; border-radius: 0; }
.pp-limited { display: inline-block; max-width: 38ch; font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); line-height: 1.35; }
.pp-limited--count { color: var(--jq-coral, #c96f4a); }
.pp-scarcity { font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--jq-coral, #c96f4a); margin-bottom: var(--space-2); }
.pp-shipbar { font-size: var(--fs-xs); color: var(--color-muted); margin-top: var(--space-2); min-height: 1em; }
.pp-shipbar:empty { display: none; }
.product-info__cross { margin-bottom: var(--space-6); }
.product-info__cross a { font-size: var(--fs-sm); color: var(--terracotta); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.product-trust-chips {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-2);
 margin: var(--space-4) 0 var(--space-6);
}
.product-trust-chip {
 display: inline-flex;
 align-items: center;
 gap: 0.45rem;
 min-height: 32px;
 padding: 0.35rem 0.68rem;
 border: 1px solid var(--color-border);
 border-radius: 999px;
 color: var(--color-muted);
 font-size: 0.66rem;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}
.product-trust-chip__icon {
 width: 20px;
 height: 20px;
 object-fit: contain;
 display: block;
}
.service-long-copy { display: grid; gap: var(--space-3); }
.service-long-copy p { margin: 0; color: var(--color-muted); }
.service-long-copy strong { color: var(--color-fg); font-weight: 700; }

.product-proof {
 margin: var(--space-8) 0;
 padding-block: var(--space-5);
 border-block: 1px solid var(--color-border);
}
.product-proof__head {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: var(--space-2) var(--space-5);
 align-items: end;
 margin-bottom: var(--space-4);
}
.product-proof__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.product-proof__head h2 {
 font-family: var(--font-body);
 font-size: var(--fs-md);
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
}
.product-proof__grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 border: 1px solid var(--color-border);
 border-bottom: 0;
}
.product-proof__grid div {
 min-width: 0;
 padding: var(--space-4);
 border-bottom: 1px solid var(--color-border);
}
.product-proof__grid div:nth-child(odd) { border-right: 1px solid var(--color-border); }
.product-proof__grid span, .product-proof__sizes h3 {
 display: block;
 margin-bottom: var(--space-2);
 font-size: 0.62rem;
 color: var(--color-muted);
 font-weight: 700;
 letter-spacing: var(--tracking-wide);
 text-transform: uppercase;
}
.product-proof__grid strong {
 display: block;
 font-size: var(--fs-sm);
 font-weight: 500;
 line-height: 1.45;
}
.product-proof__sizes {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-3);
 margin-top: var(--space-4);
}
.product-proof__sizes h3 { grid-column: 1 / -1; margin-bottom: 0; }
.product-proof__sizes div {
 padding: var(--space-4);
 border: 1px solid var(--color-border);
}
.product-proof__sizes strong {
 display: flex;
 justify-content: space-between;
 gap: var(--space-3);
 margin-bottom: var(--space-2);
 font-size: var(--fs-sm);
}
.product-proof__sizes p { color: var(--color-muted); font-size: var(--fs-xs); }
.blog-service-trust { margin-block: var(--space-12); padding: 0; }

/* Footer : ligne presse */
.footer__press { margin-top: var(--space-6); font-size: var(--fs-xs); color: var(--color-muted); letter-spacing: 0.04em; line-height: 1.8; }
.footer__press span { display: block; font-size: 0.6rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-1); }

/* ============================================================
 BUNDLE + CONVERSION LAYER
 ============================================================ */
.gallery__main img { transition: opacity 0.24s var(--ease-out), transform 0.42s var(--ease-out); }
.gallery__main img.is-swapping { opacity: 0; transform: scale(1.018); }

.bundle-panel {
 margin: var(--space-8) 0 var(--space-8);
 padding: var(--space-5);
 border: 1px solid var(--color-fg);
 background: linear-gradient(135deg, var(--brand-pink), var(--white) 48%, var(--brand-yellow));
 box-shadow: 10px 10px 0 var(--black);
}
.bundle-panel__head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: start; margin-bottom: var(--space-3); }
.bundle-panel__head h3 { font-size: var(--fs-md); font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.bundle-panel__head strong { font-family: var(--font-display); font-size: var(--fs-lg); white-space: nowrap; }
.bundle-panel__kicker { display: block; font-size: 0.62rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--space-1); }
.bundle-panel p { font-size: var(--fs-sm); margin-bottom: var(--space-4); max-width: 46ch; }
.bundle-panel__items { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.bundle-panel__items a { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: var(--space-3); padding: var(--space-2); background: rgba(255,255,255,0.74); border: 1px solid rgba(0,0,0,0.14); transition: transform var(--transition-fast), background var(--transition-fast); }
.bundle-panel__items a:hover { transform: translateX(3px); background: var(--white); }
.bundle-panel__items img { width: 54px; height: 72px; object-fit: cover; }
.bundle-panel__items span { display: grid; gap: 0.1rem; font-size: var(--fs-sm); font-weight: 600; }
.bundle-panel__items small { font-size: var(--fs-xs); color: var(--color-muted); font-weight: 400; }

/* ─── Store navigation widget ─── */
.store-widget {
 position: fixed; left: clamp(12px, 2vw, 28px); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 75;
 display: grid; justify-items: start; gap: 0.32rem;
 animation: store-widget-in 0.72s var(--ease-out) 0.35s both;
 transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast), bottom var(--transition-fast);
}
body.is-footer-visible .store-widget {
 opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px);
}
.store-widget__label {
 display: flex; align-items: center; gap: 0.38rem;
 padding: 0.28rem 0.7rem 0.28rem 0.52rem;
 background: rgba(20,16,12,0.82); color: rgba(255,255,255,0.92);
 border-radius: 6px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
 font-size: 0.5rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
 box-shadow: 0 4px 18px rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.1);
 white-space: nowrap;
}
.store-widget__label::before {
 content: ''; display: inline-block; width: 5px; height: 5px;
 background: var(--brand-orange); border-radius: 999px; flex-shrink: 0;
 box-shadow: 0 0 0 2px rgba(222,115,61,0.28);
}
.store-pill {
 position: static; transform: none;
 display: flex; align-items: center; gap: 0.18rem;
 max-width: calc(100vw - 1rem); padding: 0.22rem;
 background: rgba(255,255,255,0.97); border: 1px solid rgba(0,0,0,0.08);
 border-radius: 999px; box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.07);
 backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.store-pill__sep {
 width: 1px; height: 18px; background: rgba(0,0,0,0.1); flex-shrink: 0; margin: 0 0.06rem;
}
.store-pill__link {
 height: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
 gap: 0.4rem; padding: 0 0.75rem 0 0.55rem;
 border-radius: 999px; background: transparent; color: var(--black);
 font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
 transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
 text-decoration: none;
}
.store-pill__text { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.01em; }
.store-pill__link:hover { transform: translateY(-2px); background: var(--color-fg); color: var(--white); }
.store-pill__link:hover .map-logo img { filter: brightness(0) invert(1); }
.store-pill__link:active { transform: translateY(0) scale(0.97); }
.map-logo { width: 22px; height: 22px; display: inline-grid; place-items: center; flex: 0 0 22px; }
.map-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.map-logo--google { width: 16px; height: 16px; flex-basis: 16px; }

/* Client 2026-07-17: bigger and lifted — at 48px sitting 18px off the bottom it collided
   with the mobile browser's tab bar. */
.lead-chat-fab {
 position: fixed; right: clamp(14px, 2vw, 28px); bottom: calc(34px + env(safe-area-inset-bottom)); z-index: 86;
 width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;
 border-radius: 999px; border: 1px solid var(--brand-orange, #c45e29); background: var(--brand-orange, #c45e29); color: var(--white, #fff);
 box-shadow: 0 12px 28px rgba(196,94,41,0.30); transition: transform var(--transition-fast), filter var(--transition-fast), bottom var(--transition-fast); cursor: pointer;
}
.lead-chat-fab:hover { transform: translateY(-2px); filter: brightness(0.93); }
.lead-chat-fab svg { width: 29px; height: 29px; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* Instant "message us on WhatsApp now" shortcut inside the lead-chat popup (M13). */
.lead-chat__wa { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 2 * var(--space-4)); margin: var(--space-2) var(--space-4) var(--space-3); padding: 11px 14px; border: 0; border-radius: 10px; background: #25D366; color: #fff; font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; line-height: 1.1; cursor: pointer; transition: filter var(--transition-fast); }
.lead-chat__wa:hover { filter: brightness(0.95); }
.lead-chat__wa svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }

/* ─── Lead chat: conversational widget ─── */
.lead-chat {
 position: fixed; right: clamp(14px, 2vw, 28px); bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 96;
 width: min(360px, calc(100vw - 2rem));
 background: var(--white); border-radius: 16px; overflow: hidden;
 box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.1);
 display: flex; flex-direction: column;
 transform: translateY(18px) scale(0.98); opacity: 0; visibility: hidden; pointer-events: none;
 transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out), visibility 0.24s var(--ease-out);
}
.lead-chat.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }

.lead-chat__header {
 display: flex; align-items: center; gap: var(--space-3);
 padding: var(--space-3) var(--space-4);
 background: var(--color-fg); color: var(--white); flex-shrink: 0;
}
.lead-chat__agent { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; }
.lead-chat__avatar {
 width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
 background: var(--brand-orange); color: var(--white);
 display: flex; align-items: center; justify-content: center;
 font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em;
}
.lead-chat__avatar { background: var(--yza-orange); overflow: hidden; }
.lead-chat__avatar img { width: 66%; height: 66%; object-fit: contain; filter: brightness(0) invert(1); display: block; }
.lead-chat__agent-info { min-width: 0; }
.lead-chat__agent-info strong { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--white); letter-spacing: 0; }
.lead-chat__online-status { display: flex; align-items: center; gap: 0.3rem; font-size: 0.6rem; color: rgba(255,255,255,0.65); margin-top: 2px; }
.lead-chat__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--brand-olive); flex-shrink: 0; animation: dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.lead-chat__header .icon-btn { color: rgba(255,255,255,0.6); flex-shrink: 0; }
.lead-chat__header .icon-btn:hover { color: var(--white); background: rgba(255,255,255,0.12); }
.lead-chat__header .icon-btn svg { width: 16px; height: 16px; }

.lead-chat__thread {
 flex: 1; overflow-y: auto; padding: var(--space-4);
 display: flex; flex-direction: column; gap: var(--space-3);
 min-height: 100px; max-height: 200px;
  background: var(--paper-card); scroll-behavior: smooth;
}
.lead-chat__msg { max-width: 84%; }
.lead-chat__msg--bot { align-self: flex-start; }
.lead-chat__msg--user { align-self: flex-end; }
.lead-chat__msg p {
 margin: 0; padding: 0.6rem 0.9rem;
 font-size: var(--fs-sm); line-height: 1.45; border-radius: 16px;
}
.lead-chat__msg--bot p {
 background: var(--white); color: var(--color-fg);
 border: 1px solid rgba(0,0,0,0.07); border-radius: 4px 16px 16px 16px;
 box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.lead-chat__msg--user p { background: var(--color-fg); color: var(--white); border-radius: 16px 16px 4px 16px; }
.lead-chat__msg--appear { animation: msg-appear 0.28s var(--ease-out) both; }
@keyframes msg-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.lead-chat__typing {
 align-self: flex-start; display: flex; gap: 5px; align-items: center;
 padding: 0.6rem 0.9rem; border-radius: 4px 16px 16px 16px;
 background: var(--white); border: 1px solid rgba(0,0,0,0.07); box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.lead-chat__typing span { width: 7px; height: 7px; border-radius: 999px; background: var(--color-muted); display: inline-block; animation: typing-dot 1.2s ease-in-out infinite; }
.lead-chat__typing span:nth-child(2) { animation-delay: 0.18s; }
.lead-chat__typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-dot { 0%,80%,100% { transform: scale(0.65); opacity: 0.35; } 40% { transform: scale(1); opacity: 1; } }

.lead-chat__composer {
 display: flex; align-items: flex-end; gap: var(--space-2);
 padding: var(--space-3) var(--space-4); flex-shrink: 0;
 background: var(--white); border-top: 1px solid rgba(0,0,0,0.07);
}
.lead-chat__composer[hidden] { display: none; }
.lead-chat__input {
 flex: 1; resize: none; min-width: 0; min-height: 38px; max-height: 110px;
 border: 1px solid rgba(0,0,0,0.14); border-radius: 12px;
 padding: 0.55rem 0.8rem; background: var(--white);
 font: var(--fs-sm) / 1.45 var(--font-body); outline: none;
 transition: border-color var(--transition-fast);
}
.lead-chat__input:focus { border-color: var(--brand-orange); }
.lead-chat__send-btn {
 width: 38px; height: 38px; flex-shrink: 0; border-radius: 999px;
 background: var(--color-fg); color: var(--white);
 display: flex; align-items: center; justify-content: center;
 transition: transform var(--transition-fast), background var(--transition-fast);
}
.lead-chat__send-btn:hover { background: var(--brand-orange); transform: scale(1.08); }
.lead-chat__send-btn:active { transform: scale(0.94); }
.lead-chat__send-btn svg { width: 15px; height: 15px; }
.lead-chat__send-btn { background: var(--white); color: var(--color-fg); border: 1px solid var(--color-border-strong); }
.lead-chat__send-btn:hover { background: var(--color-fg); color: var(--white); border-color: var(--color-fg); transform: scale(1.08); }

.lead-chat__contact {
 display: grid; gap: var(--space-2);
 padding: var(--space-3) var(--space-4) var(--space-4); flex-shrink: 0;
 background: var(--white); border-top: 1px solid rgba(0,0,0,0.07);
 animation: contact-in 0.28s var(--ease-out) both;
}
.lead-chat__contact[hidden] { display: none; }
@keyframes contact-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lead-chat__contact-input {
 width: 100%; border: 1px solid rgba(0,0,0,0.14); border-radius: 10px;
 padding: 0.55rem 0.8rem; background: var(--white); outline: none;
 font: var(--fs-sm) / 1.45 var(--font-body); transition: border-color var(--transition-fast);
}
.lead-chat__contact-input:focus { border-color: var(--brand-orange); }
.lead-chat__contact-input::placeholder { color: var(--color-muted); }
.lead-chat__whats { font-size: 0.7rem !important; margin-top: var(--space-1); }
.lead-chat__whats.is-disabled { opacity: 0.4; pointer-events: none; }

/* Pre-chat form */
.lead-chat__form { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); flex-shrink: 0; background: var(--white); border-top: 1px solid rgba(0,0,0,0.07); }
.lead-chat__form[hidden] { display: none; }
.lead-chat__field { width: 100%; border: 1px solid rgba(0,0,0,0.14); border-radius: 10px; padding: 0.55rem 0.8rem; background: var(--white); outline: none; font: var(--fs-sm) / 1.45 var(--font-body); transition: border-color var(--transition-fast); resize: none; }
.lead-chat__field:focus { border-color: var(--brand-orange); }
.lead-chat__field::placeholder { color: var(--color-muted); }
.lead-chat__field--area { min-height: 72px; max-height: 130px; }
.lead-chat__send { width: 100%; padding: 0.7rem var(--space-4); background: var(--brand-orange); color: var(--white); border-radius: 10px; font: 600 var(--fs-sm) / 1 var(--font-body); letter-spacing: 0.02em; transition: background var(--transition-fast), transform var(--transition-fast); }
.lead-chat__send:hover { background: #c45e29; }
.lead-chat__send:active { transform: scale(0.97); }
.lead-chat__err { font-size: var(--fs-xs); color: #c0392b; margin: 0; }

.lookbook-hero, .b2b-hero { padding-block: clamp(4.5rem, 10vw, 8rem) var(--space-10); text-align: center; }
.lookbook-hero h1, .b2b-hero h1 { font-size: clamp(3.2rem, 10vw, 8rem); line-height: 0.9; margin: var(--space-3) auto; max-width: 11ch; }
.lookbook-hero p, .b2b-hero p { max-width: 760px; margin-inline: auto; color: var(--color-muted); }
.lookbook-hero__links, .b2b-hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.lookbook-reader { padding-bottom: var(--space-16); }
.lookbook-reader__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
.lookbook-page { margin: 0; display: grid; gap: var(--space-2); }
.lookbook-page img { width: 100%; display: block; background: var(--color-surface); }
.lookbook-page figcaption { font-size: var(--fs-xs); color: var(--color-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.b2b-hero__facts { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.b2b-hero__facts span { border: 1px solid var(--color-border); border-radius: 999px; padding: 0.42rem 0.72rem; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--white); }
.b2b-section { padding-block: var(--space-8) var(--space-16); }
.b2b-table-wrap { overflow-x: auto; border: 1px solid var(--black); background: var(--white); }
.b2b-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--fs-sm); }
.b2b-table th, .b2b-table td { padding: var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.b2b-table th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.07em; background: var(--color-surface); }
.b2b-table td:first-child { font-weight: 700; }
.b2b-table tr:last-child td { border-bottom: 0; }

.recovery-modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: var(--gutter); opacity: 0; visibility: hidden; transition: opacity 0.24s var(--ease-out), visibility 0.24s var(--ease-out); }
.recovery-modal.is-open { opacity: 1; visibility: visible; }
.recovery-modal__shade { position: absolute; inset: 0; background: rgba(0,0,0,0.58); }
.recovery-card {
 position: relative; z-index: 1; width: min(460px, 100%); padding: clamp(1.5rem, 5vw, var(--space-10));
 background: var(--white); color: var(--black); border: 1px solid var(--black); box-shadow: 14px 14px 0 var(--brand-orange);
 transform: translateY(16px) scale(0.98); transition: transform 0.28s var(--ease-out);
}
.recovery-modal.is-open .recovery-card { transform: none; }
.recovery-card__close { position: absolute; top: var(--space-3); right: var(--space-3); }
.recovery-card h2 { font-size: var(--fs-xl); margin: var(--space-2) 0 var(--space-4); }
.recovery-card p:not(.eyebrow) { color: var(--color-muted); margin-bottom: var(--space-6); }
.recovery-card__skip { display: block; margin: var(--space-4) auto 0; font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 3px; color: var(--color-muted); }
body.has-recovery-modal { overflow: hidden; }

/* ============================================================
 ANIMATION reveal
 ============================================================ */
.announcement { animation: header-in 0.55s var(--ease-out) both; }
.header { animation: header-in 0.55s var(--ease-out) 0.08s both; }
.hero__content h1, .collection-head h1, .page-hero h1, .product-info h1, .section-head h2, .editorial__text h2, .story-copy h2, .girls-hero h1, .product-color-story__copy h2, .girls-product-story__copy h3 { animation: title-rise 0.82s var(--ease-out) both; }
.hero__content p, .collection-head p, .page-hero p, .product-info__short, .editorial__text p, .story-copy p, .section-head .lede, .girls-hero__copy, .product-color-story__copy p, .girls-product-story__copy p { animation: text-rise 0.78s var(--ease-out) 0.12s both; }
.hero__img img, .full-img, .editorial__media img { transform-origin: center; animation: image-breathe 1.1s var(--ease-out) both; }
/* Product gallery main image must NOT use the breathe intro: that animation can
   freeze at its 0% keyframe (opacity .72) on dynamically-inserted images, leaving
   the hero product photo washed-out and "unviewable" (esp. on mobile). Rest at 1. */
.product--cg .gallery__main img:not(.is-swapping) { opacity: 1; }
.js .product-card { opacity: 0; translate: 0 20px; animation: card-in 0.62s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 45ms); }
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
/* video-band uses overflow:hidden - prevent translateY from clipping content below the fold */
.video-band [data-reveal] { transform: none; }
@keyframes header-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes title-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes text-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes image-breathe { from { opacity: 0.72; transform: scale(1.025); } to { opacity: 1; transform: none; } }
@keyframes card-in { to { opacity: 1; translate: 0 0; } }
@keyframes pill-in { from { opacity: 0; transform: translate(-50%, 18px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes store-widget-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
 * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
 .js [data-reveal] { opacity: 1; transform: none; }
 .js .product-card { opacity: 1; translate: 0 0; }
}

/* ============================================================
 RESPONSIVE
 ============================================================ */
@media (max-width: 1024px) {
 .product-grid { grid-template-columns: repeat(3, 1fr); }
 .service-strip { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
 .bag-family-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10) var(--space-5); }
 .product-support { grid-template-columns: 1fr; }
 .footer-service { grid-template-columns: 1fr 1fr; }
 .footer-service__form { grid-column: 1 / -1; }
 .product-story--duo { grid-template-columns: 1fr 1fr; min-height: auto; }
 .product-story--duo .product-story__copy { grid-column: 1 / -1; max-width: 760px; padding-bottom: var(--space-2); }
 .product-story__image { min-height: 54vw; }
 .product-color-story__inner, .girls-product-story { grid-template-columns: 1fr; }
 .product-color-story__copy, .girls-product-story__copy { max-width: 760px; }
 .girls-masonry { column-count: 3; }
 .girls-archive-wall { column-count: 4; }
 .search-result-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
 .cat-grid { grid-template-columns: repeat(2, 1fr); }
 .archive-grid { grid-template-columns: repeat(3, 1fr); }
 .footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
 .collection-head h1 { font-size: 4.5rem; }
 .icon-strip__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1480px) {
 .header__inner { grid-template-columns: auto 1fr auto; gap: var(--space-4); }
 .logo--wordmark { width: 7.45rem; }
 .nav { gap: var(--space-3); }
 .nav a, .nav-more__btn { font-size: 0.73rem; }
 .header-search { width: 36px; min-width: 36px; justify-content: center; border-bottom: 0; }
 .header-search span { display: none; }
}
@media (max-width: 860px) {
 :root { --header-h: 68px; }
 .announcement__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0; padding-block: 0.4rem; }
 .announcement__inner > :first-child:not(.announcement__line), .announcement__inner > :last-child:not(.announcement__line) { display: none; }
 .announcement__line { white-space: normal; } /* one line is impossible at phone widths — wrap gracefully */
 .nav { display: none; }
 .burger { display: inline-grid; }
 .header__left { gap: 0; }
 .header__inner { grid-template-columns: auto 1fr auto; gap: var(--space-3); }
 .logo--wordmark { width: 6.9rem; justify-self: start; }
 .header-search { display: inline-flex; width: 36px; min-width: 36px; justify-content: center; border-bottom: 0; }
 .header-search span { display: none; }
 .search-overlay { overflow-y: auto; -webkit-overflow-scrolling: touch; }
 .search-mega { min-height: 100dvh; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
 .search-mega__top { grid-template-columns: 1fr auto; gap: var(--space-4); }
 .search-mega__top .logo { grid-column: 1 / 2; justify-self: start; }
 .search-mega__top .search-box { grid-column: 1 / -1; order: 3; }
 .search-mega__body { grid-template-columns: 1fr; gap: var(--space-8); padding-top: var(--space-6); }
 .search-mega__suggestions { display: block; white-space: nowrap; overflow-x: auto; padding-bottom: var(--space-2); }
 .search-mega__suggestions h2 { margin-bottom: var(--space-4); }
 .search-mega__suggestions button { margin-right: var(--space-5); }
 .hero { min-height: 650px; }
 .hero__content { padding-top: var(--space-16); }
 .hero__content h1 { font-size: 3.6rem; }
 .hero__img { left: 0; right: 0; bottom: 0; height: 330px; }
 .collection-head h1 { font-size: 3.7rem; }
 .section-head h2 { font-size: clamp(1.6rem, 4.8vw, 2.1rem); }
 .video-band__content h2 { font-size: clamp(2rem, 7vw, 2.8rem); }
 .bag-family-head { grid-template-columns: 1fr; align-items: start; margin-bottom: var(--space-6); }
 .bag-family-head p:not(.eyebrow) { justify-self: start; }
 .bag-family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .bag-color-row__head { align-items: start; flex-direction: column; gap: var(--space-2); }
 /* Jacquemus mobile: category tiles stay a clean full-bleed 2-up (not 1-col). */
 .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }
 .cat-card__cap { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }
 .cat-card__cap h3 { font-size: 1.15rem; line-height: 1.05; }
 .trust-grid, .service-strip { grid-template-columns: 1fr; gap: var(--space-8); }
 .service-strip { padding-block: var(--space-12); }
 .service-card p { margin-inline: auto; }
 .journal-grid { grid-template-columns: 1fr; gap: var(--space-10); }
 .editorial, .editorial--reverse { grid-template-columns: 1fr; gap: var(--space-8); }
 .editorial--reverse .editorial__media { order: 0; }
 .product { grid-template-columns: 1fr; gap: var(--space-8); }
 .product-info { position: static; }
 .gallery { grid-template-columns: 1fr; }
 .gallery__thumbs { flex-direction: row; order: 2; }
 .gallery__thumb { width: 64px; }
 .bespoke-card, .contact-grid, .stats { grid-template-columns: 1fr; }
 .stats { gap: var(--space-6); }
 .testimonials-grid { grid-template-columns: 1fr; }
 .offer-grid { grid-template-columns: repeat(2, 1fr); }
 .product-support__panel { grid-template-columns: 1fr; }
 .product-support__item, .product-support__item:nth-child(2n), .product-support__item:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--color-border); min-height: auto; }
 .product-support__item:last-child { border-bottom: 0; }
 .product-proof__head { grid-template-columns: 1fr; align-items: start; }
 .product-proof__grid, .product-proof__sizes { grid-template-columns: 1fr; }
 .product-proof__grid div:nth-child(odd) { border-right: 0; }
 .product-rail-head { align-items: flex-start; flex-direction: column; }
 .reseller-card { align-items: flex-start; flex-direction: column; }
 .lead-chat { right: 1rem; left: auto; bottom: calc(84px + env(safe-area-inset-bottom)); width: min(360px, calc(100vw - 2rem)); }
 .lookbook-reader__grid { grid-template-columns: 1fr; }
 .b2b-hero__facts { justify-content: flex-start; }
 .b2b-hero { text-align: left; }
 .b2b-hero p { margin-inline: 0; }
 .b2b-hero__actions { justify-content: flex-start; }
 .story-hero h1 { font-size: clamp(3.1rem, 13vw, 5rem); }
 .story-copy p { font-size: var(--fs-base); }
 .story-moodboard img { height: 68vw; min-height: 300px; }
 .manifesto-list li { grid-template-columns: 3.2rem 1fr; }
 .journal-hero,
 .blog-post-hero,
 .featured-story-grid,
 .blog-shop-strip,
 .blog-newsletter,
 .blog-end-cta { grid-template-columns: 1fr; }
 .journal-hero,
 .blog-post-hero { align-items: start; }
 .journal-hero__media,
 .blog-post-hero__media { aspect-ratio: 16 / 10; order: -1; }
 .article-grid,
 .blog-product-grid,
 .objection-grid,
 .craft-proof-grid { grid-template-columns: 1fr 1fr; }
 .article-card--wide { grid-template-columns: 1fr; }
 .blog-layout { grid-template-columns: 1fr; }
 .blog-toc,
 .blog-side-module { position: static; }
 .blog-side-module .blog-product-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
 .product-grid { grid-template-columns: 1fr 1fr; gap: 5px; }
 .bag-family-section { padding-block: var(--space-12); }
 .bag-family-section:first-child { padding-top: var(--space-8); }
 .bag-family-head h2 { font-size: clamp(2.8rem, 18vw, 4rem); }
 .bag-color-row { padding-top: var(--space-8); margin-top: var(--space-8); }
 .bag-family-grid { grid-template-columns: 1fr; gap: var(--space-8); }
 .product-card__name { font-size: 0.78rem; }
 .product-card__row { align-items: flex-start; flex-direction: column; gap: 0.1rem; }
 .product-card__meta { gap: 0.25rem; }
 .product-card__meta span { font-size: 0.56rem; padding: 0.22rem 0.42rem; }
 .product-story { margin-block: var(--space-8); }
 .product-story--duo { grid-template-columns: 1fr; }
 .product-story--duo .product-story__copy { grid-column: auto; padding-right: 0; }
 .product-story__copy h2 { font-size: clamp(2.2rem, 14vw, 3.8rem); }
 .product-story__image { min-height: 108vw; }
 .product-story--wide { min-height: 122vw; }
 .product-story--wide .product-story__copy--overlay { bottom: var(--space-6); max-width: calc(100vw - var(--gutter) * 2); }
 .product-color-story__grid { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
 .product-color-story__image, .product-color-story__image--0 { grid-row: auto; min-height: 78vw; }
 .product-color-story__image--3 { display: block; }
 .girls-hero { min-height: 620px; padding-block: var(--space-12); }
 .girls-hero h1 { font-size: clamp(3.8rem, 21vw, 6.6rem); }
 .girls-masonry { column-count: 1; }
 .girls-card img { min-height: 118vw; }
 .girls-product-story__images { grid-template-columns: 1fr; }
 .girls-product-story__images span { aspect-ratio: 4 / 5; }
 .girls-archive-wall { column-count: 2; }
 .search-mega__top { padding-block: var(--space-3); }
 .search-box input { font-size: clamp(2rem, 11vw, 3.2rem); }
 .search-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
 .search-result-card strong, .search-result-card em { font-size: 0.68rem; }
 .archive-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
 /* phone: keep the 2-up category tiles clean — title only, drop the description */
 .cat-card__cap h3 { font-size: 1.02rem; }
 .cat-card__cap span { display: none; }
 .trust-grid { grid-template-columns: 1fr; }
 .icon-strip__inner { grid-template-columns: 1fr; gap: var(--space-6); }
 /* Mobile: icon above text, everything centered (client: "centered and aligned in the middle in mobile"). */
 .icon-strip__item { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-2); }
 .icon-strip__item img { width: 38px; height: 38px; }
 .icon-strip__item .tif-glyph { font-size: 2.1rem; width: auto; }
 .footer__cols { grid-template-columns: 1fr; gap: var(--space-8); }
 .footer__facts { grid-template-columns: 1fr; }
 .footer-service { grid-template-columns: 1fr; gap: var(--space-4); }
 .footer-service--trust { grid-template-columns: 1fr; gap: var(--space-8); }
 .footer-service__form { grid-template-columns: 1fr; }
 .footer-service__form button { justify-self: start; padding-bottom: 0; }
 .newsletter__form { flex-direction: column; }
 .hero__cta { flex-direction: column; align-items: stretch; }
 .hero { min-height: 610px; }
 .hero__content h1 { font-size: 2.7rem; }
 .hero__content p { font-size: var(--fs-base); }
 .collection-head h1 { font-size: clamp(2.2rem, 13vw, 2.65rem); line-height: 0.98; overflow-wrap: anywhere; }
 .section-head h2 { font-size: clamp(1.4rem, 5vw, 1.85rem); }
 .video-band__content h2 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
 .toolbar { display: grid; grid-template-columns: 1fr; align-items: stretch; }
 .filter-chips { min-width: 0; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.2rem; }
 .filter-chips button { flex: 0 0 auto; padding-inline: var(--space-3); }
 .toolbar__right { width: 100%; min-width: 0; max-width: 100%; justify-content: space-between; gap: var(--space-2); overflow: hidden; }
  .toolbar select { min-width: 0; max-width: 100%; flex: 1; padding-inline: var(--space-3); }
  .header__actions { gap: var(--space-2); }
  .header__actions .locale-tools { display: none; }
  .header__actions .lang { display: none; }
  .drawer__locale { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
  .drawer__locale .drawer__lang.lang { display: inline-flex; order: initial; margin: 0; padding: 0; border: 0; min-width: 0; }
  .drawer__lang.lang { display: inline-flex; }
 .drawer__lang .lang-select { width: 100%; justify-content: space-between; }
 .drawer__lang .lang-select__button {
 width: 100%; justify-content: space-between;
 border: 1px solid var(--color-border); border-radius: 10px;
 padding: 0.85rem 1rem; background: var(--color-surface);
 }
 .drawer__lang .lang-select__button:hover { opacity: 1; border-color: var(--terracotta); }
 .drawer__lang .lang-select__code { font-size: 0.78rem; }
 .drawer__lang .lang-select__chevron { width: 0.5rem; height: 0.5rem; opacity: 1; border-width: 1.5px; }
  .drawer__lang .lang-select__menu { left: 0; right: auto; width: 100%; }
  .drawer__locale .lang-select__button,
  .drawer__locale .currency-select__control,
  .cart-drawer__head .currency-select__control,
  .checkout__head .currency-select__control { min-height: 44px; }
  .drawer__locale .currency-select__control { padding-inline: 0.55rem; border: 1px solid var(--color-border); }
 .bundle-panel { box-shadow: 6px 6px 0 var(--black); }
 .bundle-panel__head { align-items: flex-start; }
 .store-widget { left: 0.7rem; bottom: calc(14px + env(safe-area-inset-bottom)); max-width: calc(100vw - 1.4rem); }
 .store-widget__label { font-size: 0.52rem; letter-spacing: 0.07em; }
 .store-pill { flex-direction: column; gap: 2px; padding: 0.22rem; align-items: stretch; min-width: 162px; }
 .store-pill__text { display: inline; font-size: 0.72rem; font-weight: 500; }
 .store-pill__sep { display: none; }
 .store-pill__link { width: 100%; height: 38px; min-height: 38px; padding: 0 0.65rem 0 0.55rem; justify-content: flex-start; border-radius: 7px; gap: 0.45rem; }
 .map-logo { width: 19px; height: 19px; flex-basis: 19px; flex-shrink: 0; }
 .lead-chat-fab { right: 0.85rem; bottom: calc(14px + env(safe-area-inset-bottom)); width: 45px; height: 45px; }
 .lead-chat-fab svg { width: 20px; height: 20px; }
 .lead-chat { left: 0.75rem; right: 0.75rem; bottom: calc(74px + env(safe-area-inset-bottom)); width: auto; max-width: none; }
 .lead-chat__thread { max-height: 160px; }
 .recovery-card { box-shadow: 8px 8px 0 var(--brand-orange); }
 .story-hero { padding-top: var(--space-12); }
 .story-hero h1 { font-size: clamp(2.6rem, 14vw, 3.6rem); }
 .story-moodboard { margin-top: var(--space-12); }
 .story-moodboard img { height: 88vw; min-height: 280px; }
 .story-section { padding-block: var(--space-16); }
 .story-copy h2 { font-size: clamp(2rem, 11vw, 2.6rem); }
 .story-atelier-image { height: 300px; }
 .manifesto-list li { grid-template-columns: 2.6rem 1fr; gap: var(--space-3); font-size: var(--fs-base); }
 .story-links { flex-direction: column; align-items: stretch; }
 .story-links .btn, .story-links .link-underline { justify-content: center; text-align: center; }
 /* Cliente 28/07 : les « filets gris » barres en vert sur sa capture. Ce ne sont
    pas des separateurs : c'est le soulignement de `.link-underline` (1 px olive
    #b19f31, qui se lit gris a cette taille). En colonne, `align-items: stretch`
    etirait chaque lien sur toute la largeur, donc son soulignement devenait un
    trait horizontal pleine largeur — trois d'affilee sous le bouton noir.
    `align-self: center` fait revenir le lien a la largeur de son texte : le trait
    ne souligne plus que les mots, et le lien reste visiblement cliquable.
    Le bouton noir, lui, garde `stretch` (pleine largeur voulue). */
 .story-links .link-underline { align-self: center; }
 .blog-shell { padding-top: clamp(5.5rem, 18vw, 7rem); }
 .journal-hero h1,
 .blog-post-hero h1 { font-size: clamp(3rem, 18vw, 5rem); }
 .journal-hero__media,
 .blog-post-hero__media { aspect-ratio: 4 / 5; }
 .article-grid,
 .blog-product-grid,
 .objection-grid,
 .craft-proof-grid,
 .blog-side-module .blog-product-grid { grid-template-columns: 1fr; }
 .blog-section__head { display: grid; align-items: start; }
 .blog-newsletter__form { grid-template-columns: 1fr; }
 .blog-newsletter__form button { justify-self: start; }
 .blog-end-cta { align-items: start; }
 .article-body h2 { font-size: clamp(2rem, 13vw, 3.3rem); }
 .article-body h3 { font-size: clamp(1.55rem, 10vw, 2.3rem); }
}
@media (max-width: 360px) {
 .header .container-wide { padding-inline: 0.75rem; }
 .header__inner { gap: var(--space-2); }
 .logo--wordmark { width: 6.15rem; min-width: 0; }
 .icon-btn { width: 32px; height: 32px; }
 .product-grid { grid-template-columns: 1fr 1fr; }
 .archive-grid { grid-template-columns: 1fr; }
 .hero { min-height: 570px; }
 .hero__content h1 { font-size: 2.35rem; }
 .hero__img { height: 285px; }
}

/* ============================================================
 HOMEPAGE VIDEO HERO - LA SCULPTURE
 ============================================================ */
.hero--video {
 min-height: 100vh;
 min-height: 100svh;
 display: flex;
 align-items: flex-end;
 color: var(--white);
  background: var(--black);
 border-bottom: 0;
 isolation: isolate;
}
.hero--video .hero__media {
 position: absolute;
 inset: 0;
 z-index: 0;
 overflow: hidden;
  background-color: var(--black);
 background-image: var(--hero-poster);
 background-position: center;
 background-size: cover;
}
.hero--video .hero__poster {
 position: absolute;
 inset: 0;
 display: block;
 opacity: 1;
 transition: opacity 0.75s var(--ease-out);
}
.hero--video .hero__poster img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center center;
 display: block;
}
.hero--video .hero__video {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center center;
 opacity: 0;
 transform: scale(1.002);
 transition: opacity 0.75s var(--ease-out);
}
.hero--video.is-video-ready .hero__poster { opacity: 0; }
.hero--video.is-video-ready .hero__video { opacity: 1; }
.hero--video.hero--poster-only .hero__video { opacity: 0; }
.hero--video .hero__scrim {
 display: block;
 position: absolute;
 inset: 0;
 z-index: 1;
 pointer-events: none;
 background:
 linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.43) 35%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.28) 100%),
 linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.04) 38%, rgba(0,0,0,0.82) 100%);
}
.hero--video .hero__content {
 position: relative;
 z-index: 2;
 width: 100%;
 max-width: var(--container-wide);
 margin-inline: auto;
 padding-top: 0;
 padding-bottom: clamp(4rem, 8vh, 6.5rem);
 text-align: left;
}
/* Hermès hero: mono uppercase eyebrow · EB Garamond italic headline (mixed case,
 ~440 weight) · EB Garamond italic subhead (~20px) · Manrope body · mono CTAs. */
.hero--video .hero__content .eyebrow {
 display: none;
}
.hero--video .hero__content h1 {
 max-width: 16ch;
 margin: 0 0 var(--space-6);
  color: var(--cream);
 font-family: var(--font-display);
 font-style: normal;
 font-size: clamp(3rem, 5.6vw, 6rem);
 font-weight: 450;
 letter-spacing: 0;
 line-height: 1.05;
 text-wrap: balance;
}
.hero--video .hero__subheading {
 max-width: 520px;
 margin: 0 0 var(--space-8);
 color: rgba(246,246,246,0.92);
 font-family: var(--font-display);
 font-style: normal;
 font-size: clamp(1.05rem, 1.5vw, 1.35rem);
 font-weight: 450;
 letter-spacing: 0;
 line-height: 1.4;
}
.hero--video .hero__content p:not(.eyebrow):not(.hero__subheading):not(.hero__editions):not(.brand-mark-tri) {
 display: none;
}
.hero--video .btn--hero-secondary { display: none; }
.hero--video .hero__cta {
 max-width: 520px;
 justify-content: flex-start;
 align-items: center;
 gap: clamp(1.25rem, 2.4vw, 2.4rem);
}
.hero--video .btn {
 min-height: auto;
 padding: 0;
 border: 0;
 border-bottom: 0.667px solid rgba(246,246,246,0.9);
 border-radius: 0;
 background: transparent;
  color: var(--cream);
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 400;
 letter-spacing: 1px;
 line-height: 16px;
 text-transform: uppercase;
 display: inline-block;
 overflow: visible;
 box-shadow: none;
 transition: opacity var(--transition-fast);
}
.hero--video .btn:hover { opacity: 0.68; }
.hero--video .btn::after { display: none; }
.btn--hero-primary { background: transparent; color: var(--cream); border-color: rgba(246,246,246,0.9); }
.btn--hero-primary:hover { background: transparent; color: var(--cream); }
.btn--hero-secondary { display: none; }
.btn--hero-secondary:hover { background: transparent; color: var(--cream); }

/* 404 hero — full-bleed cinematic image + scrim + white text/CTAs (was unstyled:
   poster rendered in-flow and both CTAs were invisible white-on-white). */
.hero--404 { position: relative; min-height: clamp(540px, 80vh, 760px); display: grid; align-items: center; overflow: hidden; }
.hero--404 .hero__media { position: absolute; inset: 0; z-index: 0; }
.hero--404 .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero--404 .hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.34) 55%, rgba(0,0,0,0.58) 100%); }
.hero--404 .hero__content { position: relative; z-index: 2; }
.hero--404 .hero__content .eyebrow,
.hero--404 .hero__content h1,
.hero--404 .hero__content p { color: var(--white); }
.hero--404 .hero__content h1 { font-size: clamp(4rem, 12vw, 7rem); line-height: 1; margin: var(--space-3) 0 var(--space-4); }
.hero--404 .hero__content p { max-width: 46ch; }
.hero--404 .hero__cta { display: flex; gap: clamp(1.25rem, 2.4vw, 2.4rem); margin-top: var(--space-6); flex-wrap: wrap; }
.hero--404 .btn--hero-primary,
.hero--404 .btn--hero-secondary { display: inline-block; min-height: auto; padding: 0 0 4px; border: 0; border-bottom: 1px solid rgba(246,246,246,0.9); border-radius: 0; background: transparent; color: var(--white); font-size: 12px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; transition: opacity var(--transition-fast); }
.hero--404 .btn--hero-primary:hover,
.hero--404 .btn--hero-secondary:hover { background: transparent; color: var(--white); opacity: 0.7; }

@media (max-width: 767px) {
 .hero--video {
 min-height: 90vh;
 min-height: 90svh;
 align-items: flex-end;
 }
 .hero--video .hero__video { object-position: center center; }
 .hero--video .hero__scrim {
 background:
 linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.08) 36%, rgba(0,0,0,0.84) 100%),
 linear-gradient(90deg, rgba(0,0,0,0.46), rgba(0,0,0,0.1) 74%);
 }
 .hero--video .hero__content {
 max-width: 100%;
 padding: 0 var(--gutter) calc(clamp(4.75rem, 12vh, 6rem) + env(safe-area-inset-bottom));
 }
 .hero--video .hero__content .eyebrow {
 margin-bottom: var(--space-4);
 font-size: 0.74rem;
 }
 .hero--video .hero__content h1 {
 max-width: 14ch;
 font-size: clamp(2.5rem, 12vw, 4.2rem);
 letter-spacing: 0;
 line-height: 1.08;
 }
 .hero--video .hero__subheading {
 max-width: 90%;
 font-size: 0.75rem;
 }
 .hero--video .hero__content p:not(.eyebrow):not(.hero__subheading) {
 max-width: 90%;
 margin-bottom: var(--space-5);
 font-size: 0.92rem;
 }
 .hero--video .hero__cta {
 flex-direction: row;
 align-items: center;
 gap: var(--space-4);
 }
 .hero--video .btn {
 min-height: auto;
 padding: 0 0 0.34rem;
 font-size: 0.66rem;
 letter-spacing: 0.045em;
 }
}

@media (max-width: 430px) {
 .hero--video .hero__cta {
 align-items: center;
 flex-direction: row;
 flex-wrap: wrap;
 width: min(100%, 22rem);
 }
 .hero--video .btn { width: auto; }
}

@media (max-width: 767px), (max-height: 650px) {
 body[data-page="home"].is-on-video-hero .store-widget {
 opacity: 0;
 pointer-events: none;
 visibility: hidden;
 }
}

@media (prefers-reduced-motion: reduce) {
 .hero--video .hero__video { display: none; }
}

/* ============================================================
 HOMEPAGE - WARM EDITORIAL PALETTE (owner request: extend the
 cream the brand reads best on across every section; no stark white)
 Crème base with recessed Lin/Sable bands - 
 punctuated by the existing dark video bands. One accent
 (terracotta) and one radius scale are unchanged.
 ============================================================ */
body[data-page="home"] { background: var(--cream); }
body[data-page="home"] .section { background: var(--cream); }

/* ── Jacquemus pass: the home page is imagery-only ──────────────────
   No section headers, no decorative dividers/illustrations/glyphs
   between sections. Sections sit almost flush (a small uniform rhythm).
   Product/section context surfaces on image hover instead. Other pages
   keep their headers. */
body[data-page="home"] .section-head,
body[data-page="home"] .glyph-deco,
body[data-page="home"] .glyph-divider,
body[data-page="home"] .toile-divider,
body[data-page="home"] .toile-accent,
body[data-page="home"] .press-band:not(.icon-strip) { display: none; }
/* Small Jacquemus breathing gap between content sections (was flush at 0).
   Full-bleed bands (hero/video/closing) aren't .section so they stay edge-to-edge. */
body[data-page="home"] .section { padding-block: 5px; }
body[data-page="home"] .offer-section,
body[data-page="home"] .fruit-market-section { padding-block: 0; }
/* Reviews are live (real ReviewXpo + Instagram testimonials) — show the band with
   its own breathing room instead of the squashed 5px the generic .section gets. */
body[data-page="home"] #avis { display: block; padding-block: clamp(3rem, 7vw, 5.5rem); }

/* 2026-06-27 — the home now OPENS with a visible brand statement + a 4-category
   strip so first-time visitors immediately grasp what YZA sells (client feedback:
   "on comprend moins vite ce que YZA vend"). These two intro blocks are the only
   exception to the imagery-only "hide every .section-head" rule above. */
/* Client 2026-07-17: the lede sat almost flush against "Quatre façons de porter Marrakech".
   Opened the gap on both sides of the seam so the two blocks read as separate beats. */
body[data-page="home"] .home-intro { padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(1.75rem, 4vw, 2.75rem); }
body[data-page="home"] .home-cats { padding-block: clamp(1.5rem, 3.5vw, 2.5rem) clamp(2.75rem, 6vw, 4.5rem); }
body[data-page="home"] .home-intro .section-head,
body[data-page="home"] .home-cats .section-head { display: block; }
body[data-page="home"] .home-intro .section-head { margin-bottom: 0; }
/* the category grid goes full-bleed on home, but its heading text keeps a gutter */
body[data-page="home"] .home-cats .section-head { padding-inline: var(--gutter); }
/* YZA Girls home section keeps its title visible too (client: "titre YZA GIRLS ici"). */
body[data-page="home"] .girls-feed-section .section-head { display: block; padding-inline: var(--gutter); }
/* FAQ preview: two-line questions read left, with room — not cramped/centred. */
.faq-item .accordion__btn { align-items: flex-start; text-align: left; line-height: 1.4; gap: var(--space-4); }
.faq-item .accordion__btn .plus { flex: none; margin-top: 0.1em; }
/* YZA Girls CTA pair: real breathing room around the two buttons — keep a clear
   gap above so they never sit flush against the girls photos. */
body[data-page="home"] .girls-feed-section .section-cta--duo { margin-block: clamp(2.75rem, 4.5vw, 4rem) var(--space-2); gap: var(--space-3) var(--space-4); }

/* Everything full width on home — galleries and grids break out of the gutter. */
body[data-page="home"] .container-wide { max-width: none; padding-inline: 0; }
/* …except the chrome: header, announcement and mega panel keep their side gutter
   so nav/logo/actions don't sit flush against the screen edge. */
body[data-page="home"] .header .container-wide,
body[data-page="home"] .announcement .container-wide,
body[data-page="home"] footer.footer .container-wide,
body[data-page="home"] .mega .container-wide { padding-inline: var(--gutter); }
body[data-page="home"] .girls-feed { gap: 5px; }
/* Journal cards are text-heavy: keep a side gutter so copy doesn't touch the screen edge. */
body[data-page="home"] .section--accented .container-wide { padding-inline: var(--gutter); }
body[data-page="home"] .journal-grid { gap: clamp(1rem, 2.5vw, 2rem); }

/* ===== Alignment (wide screens): keep text/content bands centred =====
   home .container-wide is full-bleed; cap the values strip + YZA Girls to a
   centred column, centre each icon+label pair, and flex the girls feed so an
   incomplete last row centres instead of left-packing. Desktop-only. */
@media (min-width: 1025px) {
  body[data-page="home"] .icon-strip .icon-strip__inner,
  body[data-page="home"] .girls-feed-section .container-wide { max-width: var(--container-wide); padding-inline: var(--gutter); }
  body[data-page="home"] .icon-strip__item { grid-template-columns: 44px auto; justify-content: center; }
  body[data-page="home"] .girls-feed { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
  body[data-page="home"] .girls-feed > * { flex: 0 1 220px; max-width: 220px; }
}
/* drop the redundant shop-CTA blocks that sat as white space between sections */
body[data-page="home"] #bestSellers [style*="margin-top"],
body[data-page="home"] .girls-feed-section .section-cta { display: none; }
/* …but keep the YZA-Girls duo CTA (Nawal: "voir les YZA girls porter leurs pièces") */
body[data-page="home"] .girls-feed-section .section-cta--duo { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); padding-inline: clamp(1rem, 4vw, 2rem); }
/* M-batch: the primary "Voir les YZA Girls" CTA in brand orange, not stretched edge-to-edge. */
body[data-page="home"] .girls-feed-section .section-cta--duo .btn { max-width: min(100%, 34rem); }
body[data-page="home"] .girls-feed-section .btn--solid { background: var(--brand-orange, #c45e29); border-color: var(--brand-orange, #c45e29); color: #fff; }
body[data-page="home"] .girls-feed-section .btn--solid:hover { background: var(--brand-orange, #c45e29); border-color: var(--brand-orange, #c45e29); color: #fff; filter: brightness(0.92); }
.section-cta--duo { flex-wrap: wrap; gap: var(--space-3); }
/* the service strip carried its own large internal vertical padding — trim it */
body[data-page="home"] .service-strip { padding-block: clamp(1.25rem, 3vw, 2rem); }

/* All home sections sit on the same pure-white ground — alternating bands
   are now signalled by the existing top/bottom hairline borders, not by tint. */
body[data-page="home"] .section--surface,
body[data-page="home"] .service-strip-section { background: var(--color-bg); }


/* cream editorial features on the cream ground - framed by their own
 borders/imagery rather than a fill */
body[data-page="home"] .print-story-section,
body[data-page="home"] .section--accented,
body[data-page="home"] .toile-divider { background: var(--cream); }

/* hairline where two same-tone sections meet */
/* Client 2026-07-17: no rule above "Elles portent YZA" — the section reads on its own. */
body[data-page="home"] .yza-girls-home { border-top: 0; }

/* close the page on the cream base so the footer reads as one ground with the
 rest of the site (Jacquemus warm ivory); scoped to home to match globally */
body[data-page="home"] footer.footer { background: var(--color-bg); margin-top: 0; }
body[data-page="home"] footer.footer .footer-service--trust { border-color: var(--color-border); }

/* header sits on the cream base so the chrome speaks one language — solid cream, opaque. */
body[data-page="home"] .header { background: var(--color-bg); }
body[data-page="home"] .header.is-stuck { background: var(--color-bg); box-shadow: 0 1px 24px -16px rgba(58, 38, 18, 0.5); }
/* Directional header — transparent ONLY while scrolling down (all pages); solid white otherwise */
body.is-scroll-down .header, body.is-scroll-down .header.is-stuck { background: transparent; border-bottom-color: transparent; box-shadow: none; }

/* ===== Home hero — two-image split (bags & charms / ready-to-wear) ===== */
.hero-split { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--color-border); }
.hero-split__tile { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-bg); color: #fff; }
.hero-split__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; transition: transform 0.9s var(--ease-out); }
/* Keep each model's face + product in frame (the tall tile crops top & bottom). */
.hero-split__tile[href*="cat=bags"] .hero-split__img { object-position: 50% 20%; }
.hero-split__tile[href*="cat=rtw"] .hero-split__img { object-position: 50% 10%; }
.hero-split__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,0.5)); pointer-events: none; }
/* La Sculpture tile: deeper bottom shadow so the caption stays very readable
   over a bright editorial image. */
.hero-split__tile--deep::after { background: linear-gradient(180deg, rgba(0,0,0,0) 28%, rgba(0,0,0,0.30) 60%, rgba(0,0,0,0.74) 100%); }
.hero-split__tile--deep .hero-split__cap { text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 24px rgba(0,0,0,0.5); }
.hero-split__tile:hover .hero-split__img, .hero-split__tile:focus-visible .hero-split__img { transform: scale(1.045); }
.hero-split__cap { position: absolute; z-index: 1; left: clamp(1.1rem, 2.4vw, 2.75rem); bottom: clamp(1.1rem, 2.8vw, 2.5rem); display: flex; flex-direction: column; gap: 0.45rem; text-shadow: 0 1px 16px rgba(0,0,0,0.35); }
.hero-split__title { font-family: var(--font-serif); font-style: normal; font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.9rem); line-height: 1.02; }
.hero-split__link { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.hero-split__link::after { content: " \2192"; }
@media (min-width: 768px) {
 .hero-split { grid-template-columns: 1fr 1fr; }
 .hero-split__tile { aspect-ratio: auto; height: min(86svh, 940px); }
}
[dir="rtl"] .hero-split__cap { left: auto; right: clamp(1.1rem, 2.4vw, 2.75rem); }
[dir="rtl"] .hero-split__link::after { content: " \2190"; }

/* ===== Home intro — visible brand statement under the split hero ===== */
.home-intro { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2vw, 1.5rem); }
.home-intro__inner { max-width: 62ch; margin-inline: auto; text-align: center; padding-inline: clamp(1.5rem, 6vw, 3rem); box-sizing: border-box; }
.home-intro__title { font-size: var(--fs-2xl); line-height: 1.1; margin-top: 0.5rem; text-wrap: balance; text-align: center; }
/* Client 2026-07-17: body copy was competing with the headings — stepped down a size so
   the titles read first. --fs-sm with a slightly opened line-height keeps it comfortable. */
.home-intro__lede { color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.75; max-width: 52ch; margin: 1rem auto 0; text-align: center; }
.home-intro__lede strong { color: var(--color-fg); font-weight: 500; }

/* ============================================================
 CARD & BORDER ELEVATION
 Warm near-white card surfaces, defined warm borders and
 warm-tinted ambient shadows so cards read as crisp paper
 lifted off the cream ground instead of flat white blocks.
 ============================================================ */
/* product tiles - warm media ground + permanent gallery hairline */
.product-card__media { background: var(--paper-card); }
.product-card__media::after { border-color: var(--color-border); opacity: 1; }
.product-card:hover .product-card__media::after { opacity: 1; border-color: var(--color-border-strong); }

/* bordered content cards - reviews lift off the warm ground (bundles are now frameless) */
.testimonial {
 background: var(--paper-card);
 border-color: var(--color-border-strong);
 box-shadow: var(--shadow-soft);
}
.testimonial { transition: transform var(--transition), box-shadow var(--transition); }
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* image cards - ground them with a soft warm shadow, deepen on hover */
.cat-card,
.world-card { box-shadow: var(--shadow-soft); transition: box-shadow var(--transition); }
.cat-card:hover,
.world-card:hover { box-shadow: var(--shadow); }
.journal-card .media { box-shadow: var(--shadow-soft); transition: box-shadow var(--transition); }
.journal-card:hover .media { box-shadow: var(--shadow); }

/* newsletter field on the warm band */
.newsletter__form input { background: var(--paper-card); border-color: var(--color-border-strong); }
/* …but the FOOTER newsletter stays a clean Jacquemus underline field (no muddy
   grey fill): transparent ground, single bottom rule, generous label spacing. */
.footer-news__form input { background: transparent; border-color: var(--color-fg); padding: var(--space-3) 0; font-size: var(--fs-base); }
.footer-news__form input::placeholder { color: var(--color-muted); }
.footer-news__btn { margin-top: var(--space-3); }

/* Atelier band — two vertical videos side by side on desktop, single on mobile */
.video-band__split { display: flex; }
.video-band__split-vid { width: 50%; height: 100%; object-fit: cover; display: block; }

/* Studio hero: use the studio interior PHOTO (not the video) everywhere.
   - Mobile/tablet (<861): full-bleed photo + overlay title (video-band default).
   - Desktop (>=861): 2-column split like the homepage hero — photo LEFT, light text
     panel RIGHT. The split keeps the lower-res photo at ~half width so it stays sharp. */
.story-video-hero .story-video-hero__vid { display: none; }
.story-video-hero .story-video-hero__img { display: block; }
@media (min-width: 861px) {
  .story-video-hero.video-band--minimal {
    display: grid; grid-template-columns: 58fr 42fr; grid-template-rows: minmax(0, 1fr); align-items: stretch;
    position: static; min-height: 0 !important; height: clamp(19rem, 40vh, 27rem) !important; background: var(--color-bg);
  }
  .story-video-hero.video-band--minimal .story-video-hero__img { position: relative; inset: auto; grid-column: 1; width: 100%; height: 100%; object-fit: cover; }
  .story-video-hero.video-band--minimal .video-band__overlay {
    position: static; z-index: auto; grid-column: 2;
    background: var(--paper-card) !important; border-inline-start: 1px solid var(--color-border);
    align-items: center; justify-content: flex-start; text-align: start;
    padding: clamp(2.5rem, 4vw, 4.5rem) !important;
  }
  .story-video-hero.video-band--minimal .video-band__content { max-width: none; align-items: flex-start; }
  .story-video-hero.video-band--minimal .video-band__content .eyebrow { color: var(--color-muted) !important; }
  .story-video-hero.video-band--minimal .video-band__content h1 { color: var(--color-fg) !important; }
}

/* closing video band - swap static image for video on tablet + mobile */
.video-band__media--mobile { display: none; }
@media (max-width: 1024px) {
 .video-band__media--desktop { display: none; }
 .video-band__media--mobile { display: block; }
}

/* ── Atelier expanded studio section ─────────────────────── */
.story-atelier-gallery {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-4);
 margin-top: var(--space-12);
 margin-bottom: var(--space-12);
}
/* Editorial 2-up pair (craft-in-progress shots) — wider aspect than the 3-col thumbnail grid. */
.story-atelier-gallery--pair { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline: auto; }
.story-atelier-gallery--pair figure { aspect-ratio: 4 / 5; }
.story-atelier-gallery figure {
 aspect-ratio: 3 / 4;
 overflow: hidden;
 border: 1px solid var(--color-border);
}
.story-atelier-gallery figure img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.7s var(--ease-out);
}
.story-atelier-gallery figure:hover img { transform: scale(1.04); }

/* ── Studio full-bleed video hero — opens the page in home editorial style ─── */
.story-section--atelier { padding-top: 0; }
.story-video-hero.video-band {
 min-height: min(76vh, 780px);
 margin-bottom: clamp(3rem, 7vw, var(--space-20));
}
.story-video-hero .video-band__overlay {
 position: absolute; inset: 0;
 align-items: flex-end; justify-content: center; text-align: center;
 padding: clamp(2rem, 6vw, var(--space-16));
 padding-bottom: clamp(2.75rem, 7vw, 5rem);
 background: linear-gradient(to top, rgba(0,0,0,0.66), rgba(0,0,0,0.12) 54%, rgba(0,0,0,0.34));
}
.story-video-hero .video-band__content {
 max-width: 46ch; justify-items: center; text-align: center; gap: var(--space-3);
}
.story-video-hero .video-band__content .eyebrow {
 color: rgba(255,255,255,0.9); font-family: var(--font-display);
 font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 400;
}
.story-video-hero .video-band__content h1 {
 font-family: var(--font-serif); font-weight: 400;
 font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.02; color: var(--white);
 text-shadow: 0 1px 22px rgba(0,0,0,0.42);
}

.story-atelier-women {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--space-12);
 align-items: center;
 margin-top: var(--space-12);
 margin-bottom: var(--space-12);
}
.story-atelier-women__img {
 aspect-ratio: 3 / 4;
 overflow: hidden;
 border: 1px solid var(--color-border);
 background: var(--n-lin);
}
.story-atelier-women__img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center top;
}
.story-atelier-women__copy.story-copy { max-width: none; margin-inline: 0; text-align: left; }
.story-atelier-women__copy h2 { text-align: left; }

.story-atelier-craft {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--space-12);
 align-items: center;
 margin-top: var(--space-12);
 margin-bottom: var(--space-12);
 padding-top: var(--space-12);
 border-top: 1px solid var(--color-border);
}
.story-atelier-craft__img {
 aspect-ratio: 3 / 4;
 overflow: hidden;
 border: 1px solid var(--color-border);
}
.story-atelier-craft__img img { width: 100%; height: 100%; object-fit: cover; }
.story-atelier-craft__copy.story-copy { max-width: none; margin-inline: 0; text-align: left; }
.story-atelier-craft__copy h2 { text-align: left; }
.story-atelier-craft--moodboard {
 grid-template-columns: 1fr;
 gap: var(--space-6);
 text-align: center;
}
.story-atelier-craft--moodboard .story-copy {
 max-width: 64ch;
 margin-inline: auto;
 text-align: center;
}
.story-atelier-craft--moodboard .story-copy h2 { text-align: center; }
.story-atelier-craft--moodboard .story-atelier-craft__img {
 aspect-ratio: 16 / 9;
 width: 100%;
}
.story-atelier-craft--moodboard .story-atelier-craft__img img { object-position: center; }

/* Paires de photos d'atelier (cliente 28/07). Elles remplacent l'ancienne bande 16:9
   unique et en ajoutent une seconde avant « Repartez avec une piece ».
   Cadre 2:3 = le format NATIF des photos (1066x1600) : avec object-fit:cover, cadre et
   source au meme format, donc rien n'est rogne en haut ni en bas.
   Deux colonnes sur grand ecran, empilees sous 768 px — la convention deja suivie par
   .story-atelier-gallery et .lookmag-duo, et la seule qui laisse ces photos
   editoriales respirer sur un telephone. */
.story-atelier-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.story-atelier-duo figure { margin: 0; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--color-border); }
.story-atelier-duo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-atelier-duo--geste { margin-top: var(--space-12); margin-bottom: var(--space-12); }

/* Client 2026-07-21: no grey rule between the frise, the atelier and Arts & matieres. */
.story-atelier-visit {
 /* Cliente 28/07 : l'ecart entre le paragraphe « atelier de femmes » et « Arts &
    matieres » etait beaucoup trop grand sur telephone. Il cumulait DEUX fois
    --space-12 : 3 rem de marge PLUS 3 rem de padding, soit 6 rem de blanc. Le padding
    faisait doublon avec la marge (aucune bordure ni fond ne les separe, border-top:0),
    il n'apportait donc aucune separation supplementaire. On garde une vraie respiration
    entre les deux blocs, mais une seule fois. */
 margin-top: var(--space-10);
 padding-top: 0;
 border-top: 0;
}

body[data-page="studio"] .story-section--atelier { padding-bottom: var(--space-8); }
body[data-page="studio"] .story-atelier-visit:last-child { margin-bottom: 0; }

body[data-page="story"] #atelier > .story-atelier-image { display: none; }
body[data-page="story"] #atelier .story-copy > p:not(.eyebrow):not(.story-women-company):not(.story-materials-summary) { display: none; }
body[data-page="story"] #atelier .story-atelier-board { display: none; }
body[data-page="story"] #atelier .story-materials-summary {
 max-width: 58ch;
 margin-inline: auto;
}
.story-atelier-board {
 max-width: 360px;
 margin: var(--space-10) auto;
 aspect-ratio: 3 / 4;
 overflow: hidden;
 border: 1px solid var(--color-border);
}
.story-atelier-board img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.story-atelier-address {
 font-style: normal;
 margin-top: var(--space-6);
 font-size: var(--fs-sm);
 letter-spacing: 0.02em;
 line-height: 2;
 color: var(--color-muted);
}
.story-atelier-ctas {
 display: flex;
 gap: var(--space-4);
 justify-content: center;
 flex-wrap: wrap;
 margin-top: var(--space-6);
}

@media (max-width: 1024px) {
 .story-atelier-women,
 .story-atelier-craft { gap: var(--space-8); }
}
@media (max-width: 768px) {
 .story-atelier-gallery {
 grid-template-columns: 1fr;
 gap: var(--space-3);
 margin-top: var(--space-8);
 margin-bottom: var(--space-8);
 }
 .story-atelier-women,
 .story-atelier-craft {
 grid-template-columns: 1fr;
 gap: var(--space-8);
 margin-top: var(--space-8);
 margin-bottom: var(--space-8);
 }
 .story-atelier-craft__img { order: -1; }
 /* la paire de photos remonte AU-DESSUS du texte, comme le faisait la bande unique */
 .story-atelier-craft__duo { order: -1; }
 .story-atelier-duo { grid-template-columns: 1fr; }
 .story-atelier-duo--geste { margin-top: var(--space-8); margin-bottom: var(--space-8); }
 .story-atelier-board { max-width: 260px; }
}

/* ── Mobile drawer — full-screen Jacquemus menu ─────── */
.drawer { inset: 0; width: 100%; max-width: 100%; padding: var(--space-4) var(--space-3) var(--space-10); gap: 0; box-shadow: none; }
.drawer__bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: var(--space-5);
}
.drawer__brand {
 font-family: var(--font-body);
 font-weight: 700;
 font-size: 0.78rem;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--color-fg);
}
.drawer__close { position: static; top: auto; right: auto; }

.acc-list { list-style: none; margin: 0; padding: 0; }
.acc { display: block; }
.acc__head {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-4);
 padding: 15px var(--space-3);
 background: none;
 border: 0;
 border-bottom: 1px solid #e9e9e9;
 font-family: var(--font-display);
 font-weight: 400;
 font-size: 18px;
 letter-spacing: 0.01em;
 text-transform: none;
 color: var(--color-fg);
 text-align: left;
 cursor: pointer;
 transition: color 0.18s ease, border-color 0.25s ease;
}
.acc-list > .acc:first-child > .acc__head { border-top: 1px solid #e9e9e9; }
.acc__head:hover { color: var(--jq-ink-hover); }
.acc.is-open > .acc__head { border-bottom-color: #e9e9e9; }

/* +/- toggle drawn from two hairlines; vertical bar fades out when open */
.acc__sign { position: relative; width: 13px; height: 13px; flex: 0 0 auto; }
.acc__sign::before,
.acc__sign::after {
 content: "";
 position: absolute;
 left: 50%;
 top: 50%;
 translate: -50% -50%;
 background: currentColor;
}
.acc__sign::before { width: 13px; height: 1.5px; }
.acc__sign::after {
 width: 1.5px;
 height: 13px;
 transition: opacity 0.28s ease, transform 0.28s ease;
}
.acc.is-open > .acc__head .acc__sign::after { opacity: 0; transform: rotate(90deg); }

/* collapsible panel - animate grid row from 0fr to 1fr (no height measuring) */
.acc__panel {
 display: grid;
 grid-template-rows: 0fr;
 transition: grid-template-rows 0.38s var(--ease-out);
}
.acc.is-open > .acc__panel { grid-template-rows: 1fr; }
/* NB: padding on the grid child forces a min-content floor so 0fr can't collapse to 0
   (leaves a ~20px sliver of the first link = "ghost text"). Keep the inner padding-free
   and space the last link instead; visibility:hidden guarantees closed content never paints. */
.acc__panel-inner { overflow: hidden; min-height: 0; padding-bottom: 0; visibility: hidden; transition: visibility 0s linear 0.38s; }
.acc.is-open > .acc__panel .acc__panel-inner { visibility: visible; transition-delay: 0s; }
.acc__panel-inner > :last-child { margin-bottom: var(--space-4); }

.drawer .acc__link {
 display: block;
 font-family: var(--font-display);
 font-weight: 400;
 font-size: 16px;
 letter-spacing: 0.01em;
 text-transform: none;
 color: var(--color-fg);
 padding: 0.5rem var(--space-3);
 margin: 0;
 border-radius: 0;
}
.drawer .acc__link:first-child { padding-top: var(--space-3); }
.drawer .acc__link:hover { color: var(--jq-ink-hover); }

/* featured editorial card at the foot of an open section */
.drawer .acc__feature {
 display: block;
 position: relative;
 margin-top: var(--space-4);
 aspect-ratio: 16 / 10;
 overflow: hidden;
 padding: 0;
}
.acc__feature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc__feature::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.72));
}
.acc__feature-label {
 position: absolute;
 right: 0.7rem;
 bottom: 0.55rem;
 z-index: 1;
 color: var(--white);
 font-family: var(--font-body);
 font-weight: 700;
 font-size: 0.72rem;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.drawer__lang.lang { order: 2; margin: var(--space-8) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--color-border); }

[dir="rtl"] .acc__head { text-align: right; }

/* ============================================================
 DESKTOP MEGA MENU (>860px; mobile uses the drawer accordion)
 Full-width panels anchored to the sticky header, with
 categorized links and editorial feature cards.
 ============================================================ */
.nav { gap: clamp(1.15rem, 2.3vw, 2.6rem); }
.nav-item { position: static; display: flex; align-items: center; }
.nav-item > a,
.nav-trigger {
 font-family: var(--font-body);
 font-size: 0.875rem; font-weight: 400; letter-spacing: 0.01em; text-transform: none;
 color: var(--color-fg); white-space: nowrap; line-height: 1;
 position: relative; padding-block: var(--space-2);
 display: inline-flex; align-items: center; gap: 0.4rem;
 background: none; border: 0; cursor: pointer;
 transition: color var(--transition-fast);
}
.nav-item > a:hover, .nav-trigger:hover { color: var(--jq-ink-hover); }
/* Jacquemus top-level labels are plain words — no chevron affordance. */
.nav-trigger__chev {
 display: none;
 width: 0.32rem; height: 0.32rem;
 border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor;
 transform: rotate(45deg) translateY(-1px);
 transition: transform var(--transition-fast);
}
.nav-item > a::after,
.nav-trigger::after {
 content: ""; position: absolute; left: 0; bottom: 2px; width: 0; height: 1px;
 background: currentColor; transition: width var(--transition);
}
.nav-item > a:hover::after,
.nav-item > a[aria-current="page"]::after,
.nav-item--mega:hover .nav-trigger::after,
.nav-item--mega:focus-within .nav-trigger::after,
.nav-item--mega.is-open .nav-trigger::after { width: 100%; }
.nav-item--mega:hover .nav-trigger__chev,
.nav-item--mega:focus-within .nav-trigger__chev,
.nav-item--mega.is-open .nav-trigger__chev { transform: rotate(-135deg) translateY(2px); }

/* The dropping panel - spans the full header width */
.mega {
 position: absolute; left: 0; right: 0; top: 100%;
 background: var(--color-bg);
 border-top: 1px solid var(--color-border);
 border-bottom: 1px solid var(--color-border);
 box-shadow: 0 28px 44px -30px rgba(58, 38, 18, 0.55);
 opacity: 0; visibility: hidden; transform: translateY(-10px);
 transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s;
 z-index: 40;
}
.nav-item--mega:hover .mega,
.nav-item--mega:focus-within .mega,
.nav-item--mega.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }

.mega__inner {
 display: grid;
 grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(290px, 360px);
 gap: clamp(var(--space-8), 4vw, var(--space-16));
 padding-block: var(--space-8) var(--space-10);
 align-items: start;
}
/* Maison / Aide have no product grid — just rail + lifestyle image. */
.mega__inner--noprod {
 grid-template-columns: minmax(160px, 230px) minmax(280px, 560px);
 justify-content: start;
}
.mega__col { display: flex; flex-direction: column; min-width: 0; }
.mega__eyebrow {
 margin: 0 0 var(--space-4); padding-bottom: var(--space-3);
 border-bottom: 1px solid var(--color-border);
 font-family: var(--font-body);
 font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
 color: var(--color-muted);
}
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list li { margin: 0; }
.nav .mega__list a {
 display: inline-flex; align-items: baseline; gap: 0.5rem;
 padding: 0.42rem 0;
 font-family: var(--font-display); font-size: 1.12rem; font-weight: 500;
 letter-spacing: 0; text-transform: none; color: var(--color-fg); white-space: normal;
 transition: color var(--transition-fast), transform var(--transition-fast);
}
.nav .mega__list a:hover { color: var(--terracotta); transform: translateX(3px); }
.nav .mega a::after { content: none; }
.mega__sub {
 font-family: var(--font-body);
 font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
 color: var(--color-muted); align-self: center;
}
.mega__studio {
 font-style: normal; font-family: var(--font-body);
 font-size: 0.82rem; line-height: 1.95; color: var(--color-muted); margin: 0 0 var(--space-4);
}
.nav a.mega__studio-link { font-size: 0.7rem; padding: 0; }

/* Editorial feature card */
.nav a.mega__feature {
 position: relative; display: block; overflow: hidden;
 aspect-ratio: 4 / 5; padding: 0; text-transform: none;
 background: var(--color-surface-2);
}
.mega__feature img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.85s var(--ease-out); }
.nav a.mega__feature:hover img { transform: scale(1.05); }
.nav a.mega__feature::after {
 content: ""; position: absolute; inset: 0;
 background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75));
}
.mega__feature-body {
 position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  z-index: 1; color: var(--white); display: flex; flex-direction: column; gap: 0.18rem;
}
.mega__feature-body strong {
 font-family: var(--font-body);
 font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
 text-shadow: 0 1px 5px rgba(0,0,0,0.55);
}
.mega__feature-body span {
 font-family: var(--font-body);
 font-size: 0.74rem; letter-spacing: 0.01em; text-transform: none; opacity: 0.88;
 text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ============================================================
   JACQUEMUS-STYLE MEGA MENU
   Left text rail · centre product grid · right lifestyle image.
   These rules appear after `.nav .mega a::after { content:none }`
   (above) so the rail/name hover underlines win at equal specificity.
   ============================================================ */
/* Left category rail — stacked text links in visual groups. */
.mega__nav { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.mega__nav-list { list-style: none; margin: 0; padding: 0; }
.mega__nav-list li { margin: 0; }
.nav .mega__nav-list a {
 position: relative; display: inline-block;
 padding: 0.34rem 0;
 font-family: var(--font-display); font-size: 0.875rem; font-weight: 400;
 letter-spacing: 0.035em; text-transform: none; line-height: 1.3;
 color: var(--color-fg); white-space: normal;
 transition: color var(--transition-fast);
}
.nav .mega__nav-list a::after {
 content: ""; position: absolute; left: 0; bottom: 0.18rem;
 width: 100%; height: 1px; background: currentColor;
 transform: scaleX(0); transform-origin: left;
 transition: transform 0.32s var(--ease-out);
}
.nav .mega__nav-list a:hover::after,
.nav .mega__nav-list a[aria-current="page"]::after { transform: scaleX(1); }

/* Centre product grid — square light thumbnails, name beneath. */
.mega__products {
 display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: clamp(var(--space-3), 1.4vw, var(--space-5)) clamp(var(--space-3), 1.2vw, var(--space-4));
 min-width: 0;
}
.nav a.mega-prod {
 display: flex; flex-direction: column; gap: 0.5rem;
 text-transform: none; letter-spacing: 0; color: var(--color-fg);
}
.nav a.mega-prod::after { content: none; }
.mega-prod__media {
 display: block; overflow: hidden; aspect-ratio: 4 / 5;
 background: var(--paper-card, var(--color-surface-2));
}
.mega-prod__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.85s var(--ease-out); }
.nav a.mega-prod:hover .mega-prod__media img { transform: scale(1.04); }
.mega-prod__name {
 font-family: var(--font-display); font-size: 0.8125rem; font-weight: 400;
 letter-spacing: 0.03em; line-height: 1.25; color: var(--color-fg);
}
.nav a.mega-prod:hover .mega-prod__name { text-decoration: underline; text-underline-offset: 3px; }

/* Right lifestyle image with caption + discover link.
   In the product-grid mega the hero stretches to match the (tall) grid column —
   the img is absolutely positioned so it never inflates the row, and we set NO
   aspect-ratio so the width stays pinned to the 360px column. In the no-product
   megas there is no tall column to match, so the hero defines its own height via
   a fixed portrait ratio. */
.nav a.mega__hero {
 position: relative; display: block; overflow: hidden; align-self: stretch;
 min-height: 320px; padding: 0;
 text-transform: none; letter-spacing: 0;
 background: var(--color-surface-2);
}
.mega__inner--noprod .mega__hero { align-self: start; aspect-ratio: 3 / 4; min-height: 0; }
.nav a.mega__hero::after {
 content: ""; position: absolute; inset: 0;
 background: linear-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.6));
}
.mega__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.nav a.mega__hero:hover img { transform: scale(1.04); }
.mega__hero-cap {
 position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5);
 z-index: 1; color: var(--white); display: flex; flex-direction: column; gap: 0.35rem;
}
.mega__hero-cap strong {
 font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.02em;
 text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.mega__hero-link {
 font-family: var(--font-body); font-size: 0.66rem; font-weight: 400;
 letter-spacing: 0.18em; text-transform: uppercase; text-decoration: underline;
 text-underline-offset: 4px; text-shadow: 0 1px 5px rgba(0,0,0,0.55);
}
.mega__studio-block { margin-top: var(--space-2); }

[dir="rtl"] .nav .mega__nav-list a::after { transform-origin: right; }
[dir="rtl"] .nav .mega__list a:hover { transform: translateX(-3px); }
[dir="rtl"] .nav-item > a::after, [dir="rtl"] .nav-trigger::after { left: auto; right: 0; }

/* ============================================================
 YZA PRODUCT CAROUSEL (Swiper) - home best-sellers + product rails
 4 cards per view on desktop, arrows advance one card at a time, looped.
 ============================================================ */
/* Full-bleed carousel. margin-left/right use !important to beat Swiper's base
   `.swiper { margin: 0 auto }`, which would otherwise re-center it. */
/* Align the first card with the page content (left), and let the track bleed off
   the right edge (Jacquemus pattern) instead of breaking out on both sides, which
   pushed the first card past the viewport edge and out of line with the section. */
.yza-swiper { position: relative; width: auto; max-width: none; margin-left: 0 !important; margin-right: calc(50% - 50vw) !important; padding: 5px 0; box-sizing: border-box; }
.yza-swiper .swiper-wrapper { align-items: stretch; }
.yza-swiper .swiper-slide { height: auto; display: flex; }
.yza-swiper .swiper-slide > * { width: 100%; }
/* Cards keep their own look; just neutralise the entrance animation inside
 the carousel so Swiper clones / re-renders never get stuck at opacity 0
 (which is what the global .js .product-card reveal anim starts from). */
.yza-swiper .rail-card,
.yza-swiper .product-card,
.js .yza-swiper .product-card { opacity: 1; translate: 0 0; animation: none; }

/* Jacquemus carousel arrows: bare thin charcoal chevrons, no chip/shadow,
   centred on the image height, revealed on hover. */
.yza-swiper__nav {
 position: absolute; top: 50%; transform: translateY(-50%); z-index: 12;
 width: 1.9rem; height: 3rem; border-radius: 0;
 display: grid; place-items: center; cursor: pointer;
 background: none; color: var(--color-fg); border: 0;
 box-shadow: none;
 opacity: 0; transition: opacity 0.26s var(--ease-out), color var(--transition-fast);
}
.yza-swiper:hover .yza-swiper__nav, .yza-swiper:focus-within .yza-swiper__nav { opacity: 1; }
.yza-swiper__nav:hover { transform: translateY(-50%); color: var(--jq-ink-hover); box-shadow: none; }
.yza-swiper__nav svg { width: 9px; height: 16px; display: block; }
.yza-swiper__nav--prev { left: 0.6rem; }
.yza-swiper__nav--next { right: 0.6rem; }
.yza-swiper__nav.swiper-button-disabled,
.yza-swiper__nav.swiper-button-lock { opacity: 0 !important; pointer-events: none; }

@media (max-width: 1024px) {
 .yza-swiper__nav { opacity: 0.85; width: 1.8rem; height: 2.6rem; }
 .yza-swiper__nav--prev { left: 0.35rem; }
 .yza-swiper__nav--next { right: 0.35rem; }
}
@media (hover: none) { .yza-swiper__nav { opacity: 0.94; } }

[dir="rtl"] .yza-swiper__nav--prev { left: auto; right: 0.5rem; }
[dir="rtl"] .yza-swiper__nav--next { right: auto; left: 0.5rem; }

/* Fallback if Swiper can't load: degrade to a simple drag-scroll row. */
.yza-swiper--fallback .swiper-wrapper { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.yza-swiper--fallback .swiper-wrapper::-webkit-scrollbar { display: none; }
.yza-swiper--fallback .swiper-slide { flex: 0 0 calc((100% - 15px) / 4); }
.yza-swiper--fallback .yza-swiper__nav { display: none; }
@media (max-width: 1024px) { .yza-swiper--fallback .swiper-slide { flex-basis: calc((100% - 5px) / 2.2); } }

/* ============================================================
   PRODUCT PAGE REFERENCE LAYOUT + MINIMAL COMMERCE CARDS
   ============================================================ */
.product--cg {
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.82fr);
  gap: clamp(2rem, 6vw, var(--space-24));
  padding-top: clamp(1.5rem, 4vw, var(--space-10));
}
.product--cg .product-info { max-width: 30rem; align-self: start; }
.product-info__breadcrumb {
  display: flex; flex-wrap: wrap; gap: 0.42rem; align-items: center;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: var(--space-5);
}
.product-info__breadcrumb a:hover { color: var(--terracotta); }
.product--cg .product-info h1 {
  font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 400;
  line-height: 1.18; text-transform: none; font-style: normal; letter-spacing: 0.02em;
  margin: 0 0 var(--space-3); max-width: 100%; overflow-wrap: break-word;
  /* Client 2026-07-21: `hyphens: auto` was splitting words mid-stem — "CHARM RAISINS
     EN RA-PHIA". Wrap at spaces instead; break-word stays as a last resort for a
     single word wider than the column. */
  hyphens: manual;
}
.product--cg .product-info__price { display: none; }
.product--cg .product-info__short { font-size: var(--fs-sm); color: var(--color-fg); margin-bottom: var(--space-6); line-height: 1.55; }
.product--cg .product-info__bullets { display: none; }
.product-info__divider { height: 1px; background: var(--color-border); margin-bottom: var(--space-6); }
.product--cg .product-color { margin-bottom: var(--space-6); }
.product-color__name { font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.01em; color: var(--color-fg); margin-bottom: var(--space-3); }
.product-color__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.product-color__swatches { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.product-color__swatch {
  width: 1.05rem; height: 1.05rem; border-radius: 0; border: 1px solid var(--color-border-strong);
  padding: 0; position: relative; transition: border-color var(--transition-fast);
}
.product-color__swatch.is-active { border-color: var(--color-fg); }
.product-color__swatch.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--color-fg); }
.product-color__swatch:hover { border-color: var(--color-fg); }
.product-color__viewall { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0; text-transform: none; color: var(--color-fg); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.product-color__viewall[hidden] { display: none; }

/* PDP - "See other sizes" size-variant rail (image tiles, bags) */
.option--size-rail .option__label { margin-bottom: var(--space-3); }
.size-rail__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.size-rail__tile { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: var(--color-fg); }
.size-rail__thumb { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-card); border: 1px solid transparent; transition: border-color var(--transition-fast); }
.size-rail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out); }
.size-rail__tile:hover .size-rail__thumb img { transform: scale(1.045); }
.size-rail__tile.is-active .size-rail__thumb { border-color: var(--color-fg); }
.size-rail__name { font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: 0.01em; line-height: 1.2; }
.size-rail__tile.is-active .size-rail__name { text-decoration: underline; text-underline-offset: 3px; }
.size-rail__price { font-size: 0.78rem; color: var(--color-muted); }
.size-rail__tile.is-soldout { opacity: 0.5; }
.size-rail__tile.is-soldout .size-rail__thumb { filter: grayscale(0.4); }
@media (max-width: 520px) {
 .size-rail__track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-2); }
 .size-rail__tile { scroll-snap-align: start; }
}
.product-add-main:disabled { opacity: 0.45; cursor: not-allowed; }
.product--cg .product-info__links { display: flex; justify-content: flex-start; gap: var(--space-5); margin-top: var(--space-4); flex-wrap: wrap; }
/* UN SEUL TRAIT. `.link-underline` porte deja un border-bottom : ajouter
   text-decoration: underline dessinait un SECOND trait sous le premier
   (« Livraison le jour meme » sur la fiche produit). Regle absolue du client :
   jamais deux traits sous un lien. Ne pas reintroduire text-decoration ici. */
.product-info__links .link-underline { font-size: 0.66rem; letter-spacing: 0; text-decoration: none; }
.product-accordions { margin-top: var(--space-10); }
.product-accordions .accordion__btn { padding-block: 1.05rem; font-family: var(--font-body); font-size: 0.76rem; letter-spacing: 0; }
.product-accordions .plus { color: var(--color-fg); font-weight: 300; }
.product-accordions .accordion__panel-inner { font-size: var(--fs-sm); }

.product--cg .gallery { position: relative; display: block; order: -1; }
.product--cg .gallery__main { aspect-ratio: 3 / 4; background: var(--paper-card); }
.product--cg .gallery__main img { object-fit: cover; }
.product--cg .gallery__thumbs {
  position: absolute; top: 50%; right: clamp(10px, 1.4vw, 18px); transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 9px; z-index: 3; margin: 0;
}
.product--cg .gallery__thumbs[hidden] { display: none; }
.product--cg .gallery__thumb {
  width: 7px; height: 7px; min-width: 0; padding: 0; aspect-ratio: auto; overflow: visible;
  border: 0; border-radius: 50%; background: rgba(46, 46, 46, 0.3);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.product--cg .gallery__thumb img { display: none; }
.product--cg .gallery__thumb.is-active { background: var(--color-fg); border: 0; transform: scale(1.15); }
.product--cg .gallery__thumb:hover { background: var(--color-fg); }
.product--cg .gallery__thumb--play { background: var(--terracotta); }
.product--cg .gallery__thumb--play .gallery__play-icon { display: none; }
.product--cg .gallery__wish { position: absolute; right: clamp(12px, 1.6vw, 20px); bottom: clamp(12px, 1.6vw, 20px); z-index: 4; }
.product--cg .gallery__wish-btn { width: 36px; height: 36px; display: grid; place-items: center; color: var(--color-fg); background: none; border: 0; cursor: pointer; }
.product--cg .gallery__wish-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.product--cg .gallery__wish-btn.is-active svg { fill: currentColor; }

/* Variant / size selector — Jacquemus plain-label row */
.product--cg .option--variants { margin-bottom: var(--space-6); }
.product--cg .option--variants .option__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0; text-transform: uppercase; color: var(--color-fg); margin-bottom: var(--space-3); }
.product--cg .chips--variants { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.product--cg .chip--variant {
  display: inline-flex; align-items: baseline; min-width: 0; position: relative;
  padding: 0.15rem 0; border: 0; border-radius: 0; background: none;
  font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.01em; color: var(--color-muted);
  transition: color var(--transition-fast);
}
.product--cg .chip--variant em { display: none; }
.product--cg .chip--variant:hover { color: var(--color-fg); background: none; }
.product--cg .chip--variant.is-active { color: var(--color-fg); background: none; }
.product--cg .chip--variant.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--color-fg); }
.product--cg .chip--variant.is-soldout { opacity: 0.4; text-decoration: line-through; pointer-events: none; cursor: not-allowed; }

/* Full-screen PDP image zoom (click the main image) */
.product--cg .gallery__main img { cursor: zoom-in; }

/* ===== Ranacо-inspired PDP layout, kept in the YZA brand (white/terracotta + Fraunces/Jost):
   info panel LEFT, larger display title + visible price, gallery RIGHT with a real image
   thumbnail rail, size chips as bordered boxes, airier uppercase accordions. ===== */
.product--cg { grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.42fr); }
.product--cg .product-info { order: 0; }
.product--cg .gallery { order: 1; display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: var(--space-3); align-items: start; position: relative; }
.product--cg .product-info h1 { margin-bottom: var(--space-3); text-transform: none; }
.product--cg .product-info__price { display: block; font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.08em; color: var(--color-fg); margin: var(--space-4) 0 0; }
.product--cg .product-add-main__price { display: none; }
/* Le prix vit deja au-dessus (`.product-info__price`), il est donc masque DANS le bouton.
   Consequence longtemps passee inapercue : le `space-between` du bouton n'avait plus qu'un
   seul enfant a repartir, et le libelle restait plaque a gauche avec un grand vide a
   droite. On recentre — sous le MEME selecteur que celui qui masque le prix, pour que les
   deux ne puissent pas se desynchroniser si le prix revient un jour dans le bouton. */
.product--cg .product-add-main.btn { justify-content: center; }
.product--cg .product-add-main.btn .product-add-main__label { flex: 0 1 auto; text-align: center; }
/* hairline rule above the description, like the reference */
.product--cg .product-info__short { border-top: 1px solid var(--color-fg); padding-top: var(--space-6); margin-top: var(--space-6); }
.product--cg .product-info__short:empty { border-top: 0; padding-top: 0; margin-top: 0; }
/* add-to-cart reads as a tracked uppercase label */
.product--cg .product-add-main { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; }
/* real thumbnail rail (replaces the dot indicators) */
.product--cg .gallery__thumbs { position: static; transform: none; inset: auto; flex-direction: column; gap: 8px; max-height: 84vh; overflow-y: auto; z-index: 1; }
.product--cg .gallery__thumb { width: 100%; height: auto; min-width: 0; aspect-ratio: 3 / 4; border-radius: 0; overflow: hidden; background: var(--paper-card); border: 1px solid transparent; opacity: 0.38; transform: none; transition: border-color var(--transition-fast), opacity var(--transition-fast); }
.product--cg .gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product--cg .gallery__thumb:hover { opacity: 1; background: none; transform: none; }
.product--cg .gallery__thumb.is-active { opacity: 1; background: none; border-color: var(--color-fg); transform: none; }
.product--cg .gallery__thumb--play { background: var(--paper-card); }
.product--cg .gallery__thumb--play .gallery__play-icon { display: grid; place-items: center; position: absolute; inset: 0; }
.product--cg .gallery__thumb--play .gallery__play-icon::after { border-left-color: #fff; width: 12px; height: 12px; border-top-width: 6px; border-bottom-width: 6px; border-left-width: 10px; }
/* size chips as bordered boxes */
.product--cg .chip--variant { padding: 0.5rem 0.95rem; min-width: 46px; justify-content: center; text-align: center; border: 1px solid var(--color-border-strong); color: var(--color-fg); }
.product--cg .chip--variant::after { display: none; }
.product--cg .chip--variant:hover { border-color: var(--color-fg); background: none; }
.product--cg .chip--variant.is-active { border-color: var(--color-fg); background: none; }
/* accordions: airier + uppercase, like the reference */
.product-accordions .accordion__btn { padding-block: 1.65rem; text-transform: uppercase; letter-spacing: 0.12em; }
.gallery-zoom { position: fixed; inset: 0; z-index: 200; background: rgba(18, 18, 18, 0.94); display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); opacity: 0; visibility: hidden; pointer-events: none; cursor: zoom-out; transition: opacity 0.3s var(--ease-out), visibility 0.3s; }
.gallery-zoom.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.gallery-zoom__img { max-width: 95vw; max-height: 92vh; object-fit: contain; cursor: default; }
.gallery-zoom__close { position: absolute; top: clamp(0.8rem, 2vw, 1.4rem); right: clamp(0.8rem, 2vw, 1.4rem); width: 42px; height: 42px; display: grid; place-items: center; color: #fff; font-size: 1.9rem; font-weight: 300; line-height: 1; background: none; border: 0; cursor: pointer; transform: rotate(45deg); }
.gallery-zoom__close:hover { opacity: 0.7; }

.product-tabs { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, var(--space-12)); margin-bottom: var(--space-8); }
.product-tabs__tab {
  position: relative; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0; text-transform: uppercase;
  color: var(--color-muted); padding-bottom: 0.45rem;
}
.product-tabs__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform var(--transition-fast); }
.product-tabs__tab.is-active { color: var(--color-fg); }
.product-tabs__tab.is-active::after { transform: scaleX(1); }

.product-support { display: block; padding: clamp(2.5rem, 7vw, var(--space-20)) 0; margin: 0; border-top: 1px solid var(--color-border); border-bottom: 0; }
.product-support__reassurance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); text-align: center; }
.product-support__tile { display: grid; justify-items: center; gap: var(--space-3); padding-inline: var(--space-4); }
.product-support__icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.25; color: var(--terracotta); }
.product-support__tile h2 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0; text-transform: uppercase; font-style: normal; }
.product-support__tile p { max-width: 28ch; margin: 0 auto; color: var(--color-muted); font-size: var(--fs-sm); }

.product-mini-modal {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.36); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}
.product-mini-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.product-mini-modal__card {
  width: min(420px, calc(100vw - 2rem)); background: var(--paper-card); border: 1px solid var(--color-border-strong);
  padding: var(--space-8); position: relative; box-shadow: var(--shadow);
}
.product-mini-modal__close { position: absolute; top: 0.75rem; right: 0.75rem; transform: rotate(45deg); font-size: 1.4rem; }
.product-mini-modal__card h2 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.product-mini-modal__card p { color: var(--color-muted); }

/* Premium "Voir les couleurs" panel — swatch dot + name grid instead of a text run. */
.colors-modal__card { width: min(460px, calc(100vw - 2rem)); background: var(--white, #fff); padding: clamp(1.75rem, 4vw, 2.5rem); }
.colors-modal__card h2 { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.01em; font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.colors-modal__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.5rem; }
.colors-modal__item { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.colors-modal__dot { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14); }
.colors-modal__name { font-size: var(--fs-sm); letter-spacing: 0.01em; color: var(--color-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .colors-modal__list { grid-template-columns: 1fr; } }

@media (max-width: 860px) { body[data-page="product"]:has(.product-mobile-bar:not([hidden])) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } }
.product-mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94); border-top: 1px solid var(--color-border);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.product-mobile-bar[hidden] { display: none; }
.product-mobile-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; font-size: 0.78rem; }
.product-mobile-bar .btn { min-height: 44px; padding-inline: var(--space-5); letter-spacing: 0; }

.product-card__media,
.rail-card__media,
.yza-swiper .swiper-slide,
figure { background: var(--paper-card); }
.product-card__media::before,
.rail-card__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(255, 255, 255, 0.035); mix-blend-mode: multiply;
}
.product-card__media::after { z-index: 2; }
.product-card__img { position: relative; z-index: 0; }

body.has-cart-drawer .lead-chat-fab,
body.has-cart-drawer .lead-chat { display: none; }

@media (max-width: 1024px) {
  .product--cg { grid-template-columns: 1fr; }
  .product--cg .gallery { order: -1; grid-template-columns: 1fr; }
  /* thumbnail rail becomes a horizontal strip under the main image */
  .product--cg .gallery__thumbs { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; gap: 8px; margin-top: var(--space-3); -webkit-overflow-scrolling: touch; }
  .product--cg .gallery__thumb { width: 62px; flex: 0 0 62px; }
  .product--cg .product-info { max-width: none; }
  .product-support__reassurance { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 700px) {
  .product--cg .product-info h1 { font-size: 1.08rem; line-height: 1.25; max-width: 100%; overflow-wrap: break-word; hyphens: manual; }
  .product-tabs { justify-content: flex-start; overflow-x: auto; gap: var(--space-8); }
}

/* Lazy WhatsApp conversation panel */
.lead-chat--simple {
  width: min(380px, calc(100vw - 2rem));
  border-radius: 0;
  background: var(--black);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.lead-chat--simple .lead-chat__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) 0;
}
.lead-chat--simple .lead-chat__top strong {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.9rem;
  letter-spacing: 0;
}
.lead-chat--simple .lead-chat__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}
.lead-chat--simple .lead-chat__close {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}
.lead-chat--simple .lead-chat__empty {
  min-height: 260px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.lead-chat--simple .lead-chat__empty-icon {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  border-radius: 999px;
}
.lead-chat--simple .lead-chat__empty-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.lead-chat--simple .lead-chat__empty h2 {
  color: var(--white);
  font-size: 1rem;
  font-style: normal;
  letter-spacing: 0;
}
.lead-chat--simple .lead-chat__empty p {
  max-width: 27ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--fs-sm);
}
.lead-chat--simple .lead-chat__new {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0 var(--space-5) var(--space-5);
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0;
  text-transform: uppercase;
}
.is-invalid {
  border-color: var(--terracotta) !important;
  outline: 2px solid color-mix(in srgb, var(--terracotta) 22%, transparent);
  outline-offset: 1px;
}
body.has-cart-drawer .lead-chat-fab,
body.has-cart-drawer .lead-chat { display: none; }

@media (max-width: 700px) {
  .lead-chat--simple {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    bottom: calc(74px + env(safe-area-inset-bottom));
  }
  .lead-chat--simple .lead-chat__empty { min-height: 230px; }
}

/* ============================================================
   HEADER TREATMENT — JACQUEMUS
   Futura (var --font-display) · 14px · ~0.5px tracking · sentence
   case · solid charcoal ink. Hover signal is the growing underline
   (defined above), not an opacity fade. Applied to the announcement
   bar, the desktop nav (top-level triggers/links + dropdown links)
   and the search / language labels.
   ============================================================ */
.announcement__inner,
.nav-item > a, .nav-trigger,
.header-search,
.lang-select__button,
.nav .mega__list a,
.mega__eyebrow,
.mega__sub {
  font-family: var(--font-display);
  text-transform: none;
}

/* Top-level nav + action labels */
.nav-item > a, .nav-trigger,
.header-search,
.lang-select__button {
  font-size: 14px;
  letter-spacing: 0.5px;
  font-weight: 400;
  line-height: 16px;
  opacity: 1;
  transition: color var(--transition-fast);
}
.nav-item > a:hover, .nav-trigger:hover,
.header-search:hover,
.lang-select__button:hover { color: var(--jq-ink-hover); }
/* Jacquemus UPPERCASE top-level nav (owner-approved) — scoped to top-level links
   only, so the announcement bar + mega sublinks keep their sentence case. */
.nav-item > a, .nav-trigger { text-transform: none; letter-spacing: 0.02em; font-size: 14px; }

/* Announcement bar texts */
.announcement__inner { font-size: 12.5px; letter-spacing: 0.2px; font-weight: 400; }
.announcement__inner > * { opacity: 1; transition: color var(--transition-fast); }
.announcement__inner a:hover { color: var(--jq-ink-hover); }

/* Dropdown (mega-menu) links → same Futura sentence-case style */
.nav .mega__list a {
  font-size: 14px;
  letter-spacing: 0.5px;
  font-weight: 400;
  opacity: 1;
}
.nav .mega__list a:hover { color: var(--jq-ink-hover); }

/* b2b hero h1 — wider max-width so the <br> gives exactly 2 lines */
.b2b-hero h1 { max-width: 22ch; font-size: clamp(2.8rem, 8vw, 6.5rem); }

/* video-band content: widen container so copy fits in 2 lines at large viewports */
.video-band__content { max-width: min(600px, 90vw); }

/* readability on photo/video dark backgrounds */
.video-band__content h2 { text-shadow: 0 2px 20px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.45); }
.product-story--wide .product-story__image::after { background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0.06) 55%, transparent); }
.product-story--wide .product-story__copy--overlay h2 { text-shadow: 0 2px 16px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.4); }

/* best-sellers section background override */
#bestSellers { background: var(--color-bg); }

/* ============================================================
   RTL (Arabic) — polish overrides for elements not covered by
   the upstream [dir="rtl"] block. Keep additions surgical.
   ============================================================ */
[dir="rtl"] .b2b-hero,
[dir="rtl"] .b2b-table th,
[dir="rtl"] .b2b-table td,
[dir="rtl"] .story-atelier-women__copy,
[dir="rtl"] .story-atelier-craft__copy,
[dir="rtl"] .lang-select__dropdown { text-align: right; }

/* Floating action buttons anchored to the bottom-right via physical
   properties — swap to bottom-left visually for RTL screens. */
[dir="rtl"] .store-widget { left: 0.7rem; right: auto; }
[dir="rtl"] .lead-chat-fab { left: 1rem; right: auto; }

/* Mirror chevrons drawn with CSS borders or arrow-like glyphs. */
[dir="rtl"] .lang-select__chevron,
[dir="rtl"] .nav-more__btn::before { transform: scaleX(-1); }

/* Play-icon triangle (CSS border trick) points the wrong way under RTL. */
[dir="rtl"] .gallery__play-icon::after {
  border-left: 0;
  border-right: 16px solid var(--white, #fff);
}

/* Ordered list indentation flips for RTL — keep the gutter on the start side. */
[dir="rtl"] .article-body ol,
[dir="rtl"] .article-body ul { padding-left: 0; padding-right: 1.2rem; }

/* ============================================================
   Tri-script brand mark — YZA · ⴰⵣⵉ · ييزة
   Tifinagh (Amazigh) + Arabic alongside the Latin wordmark
   as a quiet reminder of the brand's heritage.
   ============================================================ */
.brand-mark-tri {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0;
  direction: ltr;
  font-family: var(--font-display, 'Jost', 'Helvetica Neue', Arial, sans-serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-fg);
  text-transform: none;
  line-height: 1.4;
}
.brand-mark-tri__lat { font-family: var(--font-display, 'Jost', 'Helvetica Neue', Arial, sans-serif); font-style: normal; }
.brand-mark-tri__tif,
.brand-mark-tri__ar { font-family: "Segoe UI", "Noto Sans Tifinagh", "Noto Naskh Arabic", "Geeza Pro", system-ui, sans-serif; font-size: 1.08em; font-style: normal; }
.brand-mark-tri__sep { opacity: 0.45; font-size: 0.85em; }

/* Centered variant for hero / section dividers */
.brand-mark-tri--center { display: flex; justify-content: center; }

/* Larger ornamental variant for histoire / hero use */
.brand-mark-tri--lg { font-size: 1.4rem; gap: 0.85rem; letter-spacing: 0.12em; }

/* Footer placement: a quiet line above the tagline */
.footer__brand .brand-mark-tri { margin-block: 0.4rem 0.6rem; opacity: 0.85; }

/* Hero variant — sits above the headline, light orange on dark video.
   Selector is doubled (.hero__content .brand-mark-tri--hero) to beat the
   generic `.hero__content p` cascade rule for font-size + color. */
.hero__content .brand-mark-tri--hero,
.hero .brand-mark-tri--hero {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--font-display, 'Jost', 'Helvetica Neue', Arial, sans-serif);
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #ffffff;
  margin: 0 auto 0.85rem;
  max-width: none;
  opacity: 1;
}
.hero__content .brand-mark-tri--hero .brand-mark-tri__lat,
.hero__content .brand-mark-tri--hero .brand-mark-tri__tif,
.hero__content .brand-mark-tri--hero .brand-mark-tri__ar { font-style: normal; color: #ffffff; }
.hero__content .brand-mark-tri--hero .brand-mark-tri__sep { color: #ffffff; opacity: 0.55; }

@media (prefers-reduced-motion: no-preference) {
  .brand-mark-tri { transition: opacity 0.4s ease; }
}

/* ============================================================
   LE MARCHÉ AUX FRUITS — 2-col bundles + styling (Jacquemus 2-up)
   Two equal portrait tiles, each tile is an autoplay rotator with
   crossfade between slides. No nav UI — the imagery does the work.
   ============================================================ */
/* Full-bleed 2-up: edge-to-edge, 5px rhythm, no header, no surface border. */
.fruit-market-section { padding-block: 5px; border-block: 0; }
.fruit-market-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5px; width: 100%; margin: 0; padding: 5px;
}
.fm-tile {
  position: relative; display: block; overflow: hidden;
  background: var(--paper-card); aspect-ratio: 3 / 4;
  text-decoration: none; color: var(--color-fg);
}
.fm-stage { position: absolute; inset: 0; }
.fm-tile[data-fm-rotator] { cursor: grab; -webkit-user-select: none; user-select: none; touch-action: pan-y; }
.fm-tile[data-fm-rotator]:active { cursor: grabbing; }
.fm-tile[data-fm-rotator] img { -webkit-user-drag: none; user-drag: none; }
.fm-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.9s var(--ease-out);
  display: grid; grid-template-rows: 1fr auto;
}
.fm-slide.is-active { opacity: 1; z-index: 2; }
.fm-slide img, .fm-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bundle tile — 3-up triptych of clean isolated charm stills */
.fm-tile--bundle .fm-stage { background: var(--paper-card); }
.fm-triptych {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--color-border); height: 100%; min-height: 0;
}
.fm-triptych img { width: 100%; height: 100%; object-fit: cover; background: var(--paper-card); }

/* Slide captions — quiet micro-caps under the imagery */
.fm-slide__cap {
  display: grid; gap: 2px; padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--paper-card); color: var(--color-fg);
}
.fm-slide__cap--over {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  color: var(--white); padding: clamp(2rem, 4vw, 3rem) var(--space-5) var(--space-5); display: flex; flex-direction: column; justify-content: flex-end; min-height: 4.75rem;
}
/* Bundle caption overlays the triptych too — no white strip below the images */
.fm-tile--bundle .fm-slide__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0));
  color: var(--white);
  padding: clamp(2rem, 4vw, 3rem) var(--space-5) var(--space-5); display: flex; flex-direction: column; justify-content: flex-end; min-height: 4.75rem;
}
.fm-tile--bundle .fm-slide__name { color: var(--white); }
.fm-slide__kicker {
  font-family: var(--font-display); font-size: 10px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.9;
}
.fm-slide__name {
  font-family: var(--font-display); font-size: 13px; font-weight: 400;
  letter-spacing: 0.04em; color: var(--color-fg);
}

/* "Shop" affordance — a quiet underlined link at the corner, only on hover */
.fm-tile__shoplink {
  position: absolute; right: clamp(0.75rem, 1.5vw, 1.25rem);
  top: clamp(0.75rem, 1.5vw, 1.25rem); z-index: 3;
  font-family: var(--font-display); font-size: 10px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--white); padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.55);
  opacity: 0; transition: opacity 0.3s var(--ease-out);
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.fm-tile--bundle .fm-tile__shoplink {
  color: var(--color-fg);
  border-bottom-color: var(--color-border-strong);
  text-shadow: none;
}
.fm-tile:hover .fm-tile__shoplink, .fm-tile:focus-visible .fm-tile__shoplink { opacity: 1; }

/* Mobile: stack to one column */
@media (max-width: 760px) {
  .fruit-market-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .fm-tile { aspect-ratio: 4 / 5; }
  .fm-tile__shoplink { opacity: 0.92; }
}

/* Reduced motion: drop crossfade to instant cuts */
@media (prefers-reduced-motion: reduce) {
  .fm-slide { transition: none; }
}

/* ============================================================
   JACQUEMUS — QUIET SECTION HEADLINES  (sitewide, intentional)
   Section intros read as small, subtle labels rather than loud display
   type. Placed last + !important so it wins over the scattered per-page
   sizes and the mobile re-enlargements. Page-level hero <h1>s are left
   alone — they stay the focal title of their page.
   ============================================================ */
.section-head h2,
.print-story__text h2,
.product-color-story__copy h2,
.product-story__copy h2,
.product-support__copy h2,
.charm-styling__head h2,
.editorial__text h2,
.story-copy h2,
.blog-section__head h2,
.bag-family-head h2,
.girls-product-story__copy h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.55vw, 1.45rem) !important;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: none;
}
.section-head { margin-bottom: var(--space-8); }
.section-head .eyebrow { margin-bottom: var(--space-2); }
/* Lede under a quieted headline shouldn't shout louder than the title */
.section-head .lede { font-size: var(--fs-sm); color: var(--color-muted); }

/* ============================================================
   PRODUCT PAGES — Futura PT type treatment (supplied type scale)
   Regular weight throughout, px letter-spacing (0.8px headings,
   0.56px body & labels), tight understated heading scale. Scoped
   to the PDP; per-tag literal sizes (9px p / 10px div / 24px button)
   are intentionally NOT applied as blanket rules (they break layout
   and fall below readable size on mobile).
   ============================================================ */
body[data-page="product"] h1,
body[data-page="product"] h2,
body[data-page="product"] h3,
body[data-page="product"] h4,
body[data-page="product"] h5 { font-weight: 400; font-style: normal; }
body[data-page="product"] .product-info h1,
body[data-page="product"] #pName { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; font-size: clamp(1.7rem, 3.6vw, 2.75rem); line-height: 1.02; letter-spacing: 0.04em; text-align: left; }
body[data-page="product"] h2 { font-size: 0.875rem; line-height: 1.45; letter-spacing: 0.56px; }
body[data-page="product"] h3 { font-size: 1.25rem; line-height: 1; letter-spacing: 0.8px; }
body[data-page="product"] h4 { font-size: 1.25rem; line-height: 1.1; letter-spacing: 0.8px; }
body[data-page="product"] h5 { font-size: 0.625rem; line-height: 1.2; letter-spacing: 0.56px; }
body[data-page="product"] .product-info__short,
body[data-page="product"] .product-info__bullets,
body[data-page="product"] .product--cg .product-info__short { letter-spacing: 0.54px; font-weight: 400; }
body[data-page="product"] .option__label,
body[data-page="product"] .product-color__name,
body[data-page="product"] .size-rail__name,
body[data-page="product"] label { font-size: 0.875rem; line-height: 1.05; letter-spacing: 0.56px; font-weight: 400; }
body[data-page="product"] .product-info__price,
body[data-page="product"] .product-add-main__label { letter-spacing: 0.56px; font-weight: 400; }

/* ─── Floating widgets vs sticky buy bar (kept LAST in the file) ───
   While the product page's sticky ADD-TO-CART bar is visible
   (body.has-product-bar, toggled by the same IntersectionObserver that
   shows the bar in main.js), lift the chat bubble + store pill above it
   so they can never cover the button. !important on purpose: these
   floats must always yield to the primary CTA, at every breakpoint. */
body.has-product-bar .lead-chat-fab { bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
body.has-product-bar .lead-chat { bottom: calc(148px + env(safe-area-inset-bottom)) !important; }
body.has-product-bar .store-widget { bottom: calc(88px + env(safe-area-inset-bottom)) !important; }

/* ============================================================
   Full-width newsletter band (−10% first order) + simpler header
   ============================================================ */
.news-band { position: relative; width: 100%; min-height: 460px; display: grid; place-items: center; padding: clamp(3rem, 7vw, 6rem) 1.25rem; overflow: hidden; text-align: center; background: #d9d3c7 center/cover no-repeat; background-image: url("../assets/lifestyle/hero.jpg"); }
.news-band__overlay { position: absolute; inset: 0; z-index: 0; background: rgba(26, 22, 18, 0.4); }
.news-band__inner { position: relative; z-index: 1; width: min(620px, 100%); color: #fff; }
.news-band__form { margin: 0 0 var(--space-6); }
.news-band__row { display: flex; align-items: stretch; justify-content: center; gap: 14px; }
.news-band__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; }
.news-band__row input[type="email"] { flex: 1 1 auto; min-width: 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.85); color: #fff; font-family: var(--font-body); font-size: 15px; padding: 14px 18px; border-radius: 0; outline: none; transition: border-color 0.2s; }
.news-band__row input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.78); }
.news-band__row input[type="email"]:focus { border-color: #fff; }
.news-band__row button { flex: 0 0 auto; background: transparent; border: 1px solid rgba(255, 255, 255, 0.85); color: #fff; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; padding: 14px 26px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.news-band__row button:hover { background: #fff; color: var(--color-fg); }
.news-band__copy { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.95rem, 1.4vw, 1.05rem); line-height: 1.6; margin: 0 0 0.55rem; color: #fff; }
.news-band__more { font-family: var(--font-body); font-weight: 300; font-size: 0.95rem; margin: 0; color: rgba(255, 255, 255, 0.9); }
.news-band__msg { color: #fff; margin: 10px 0 0; }
@media (max-width: 560px) { .news-band__row { flex-direction: column; } .news-band__row button { width: 100%; } }
/* Simpler header: search reads as an icon only (label kept for screen readers) */
.header-search > span[data-i18n="a.search"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Home FAQ → YZA Girls: keep a clear, intentional pause between the FAQ link
   and the next editorial band. The redundant orange eyebrow is removed in the
   markup, so the statement begins cleanly with its actual heading. */
body[data-page="home"] .girls-feed-section { margin-top: clamp(4rem, 10vw, 6rem); }

/* A: collection title + subtitle left-aligned on EVERY collection page (charms, etc.), not just bags. */
body[data-page="collections"] .collection-head { align-items: flex-start; text-align: left; }
body[data-page="collections"] .collection-head h1 { justify-content: flex-start; text-align: left; }
body[data-page="collections"] .collection-head p { margin-inline: 0; text-align: left; }

/* Collections: bag-specific filters and editorial hierarchy. */
body[data-page="collections"][data-collection="bags"] .collection-head { align-items: flex-start; text-align: left; }
body[data-page="collections"][data-collection="bags"] .collection-head h1 { justify-content: flex-start; font-size: clamp(58px, 7vw, 104px) !important; text-align: left; }
body[data-page="collections"][data-collection="bags"] .toolbar { flex-wrap: wrap; align-items: stretch; }
body[data-page="collections"][data-collection="bags"] .filter-chips { width: 100%; flex: 1 1 100%; }
body[data-page="collections"][data-collection="bags"] .toolbar__right { width: 100%; max-width: 100%; box-sizing: border-box; flex: 1 1 100%; justify-content: flex-start; padding: 10px 0 12px; border-top: 1px solid var(--color-border); }
.bag-filter-group { display: grid; width: min(680px, 100%); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 20px; }
.bag-filter-group[hidden], #collectionSort[hidden] { display: none !important; }
.bag-filter { display: grid; min-width: 118px; gap: 3px; }
.bag-filter > span { color: var(--color-muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
body[data-page="collections"] .bag-filter select,
body[data-page="collections"] #bagSizeFilter { width: 100%; min-height: 34px; padding: 0 26px 0 0; border: 0; border-bottom: 1px solid var(--color-border-strong); border-radius: 0; background-color: transparent; color: var(--color-fg); font-size: 13px; }
body[data-page="collections"] .bag-family-head { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(260px, 1.25fr); align-items: start; gap: 32px; margin-bottom: 30px; text-align: left; }
body[data-page="collections"] .bag-family-head > div { align-items: start; text-align: left; }
body[data-page="collections"] .bag-family-head .eyebrow { display: none; }
body[data-page="collections"] .bag-family-head .eyebrow::before { display: none; }
body[data-page="collections"] .bag-family-head h2 { margin-top: 7px; font-size: clamp(34px, 3vw, 46px) !important; line-height: 1; text-align: left; }
body[data-page="collections"] .bag-family-head p:not(.eyebrow) { max-width: 50ch; justify-self: start; color: var(--color-muted); line-height: 1.7; text-align: left; }
#collectionGrid .col-story--rtw { grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr); justify-items: start; align-items: start; gap: 12px 48px; margin-block: 22px; padding: clamp(30px, 4vw, 54px); text-align: left; }
#collectionGrid .col-story--rtw blockquote { grid-row: 1 / span 4; max-width: 27ch; padding-top: 0; font-size: clamp(1.15rem, 2vw, 1.55rem); text-align: left; }
#collectionGrid .col-story--rtw blockquote::before { display: none; }
#collectionGrid .col-story--rtw h2,
#collectionGrid .col-story--rtw p { max-width: 52ch; text-align: left; }
#collectionGrid .col-story--rtw h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
#collectionGrid .col-story--rtw p { font-size: 14px; line-height: 1.75; }
.charm-styling__cats { display: grid; gap: 14px; margin-top: clamp(42px, 7vw, 82px); }
.charm-styling__cats-label { margin: 0; }
.charm-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* Cartes de categorie « Explorez aussi » — alignees sur les vignettes produit
   (client 2026-07-28). Avant : cadre 4/3 paysage, image en `cover`, et un degrade noir
   sur la moitie basse de la carte pour faire tenir un libelle blanc PAR-DESSUS l'image.
   Deux reproches de la cliente : les visuels (portrait) etaient rognes en haut et en
   bas, et l'ombre noire ne ressemblait a rien d'autre sur le site.
   Desormais, exactement le patron de .product-card__media : cadre 3:4, meme filet fin
   en box-shadow (et non `border` — l'ombre se pose HORS du bloc overflow:hidden, elle
   ne mord donc jamais l'image), libelle en encre SOUS l'image.
   `contain` et non `cover` : les visuels de categorie ne sont PAS tous en 3:4 (les
   boucles pasteque sont nettement plus etroites), et seul `contain` garantit zero
   rognage quel que soit le format de la source. Fond blanc et non --paper-card : le
   beige ferait apparaitre des bandes autour d'un visuel hors format. */
.charm-related-card { position: relative; display: block; min-width: 0; color: var(--color-fg); }
.charm-related-card__media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .charm-related-card__media { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.09); }
}
.charm-related-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .7s var(--ease-out); }
.charm-related-card:hover .charm-related-card__media img { transform: scale(1.035); }
.charm-related-card__label { display: block; padding: var(--space-2) 2px 0; font-family: var(--font-display); font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--color-fg); }
@media (max-width: 700px) {
  body[data-page="collections"][data-collection="bags"] .collection-head h1 { justify-content: flex-start !important; font-size: 44px !important; }
  body[data-page="collections"] .toolbar__right { align-items: stretch; }
  .bag-filter-group { width: 100%; padding: 10px 0 12px; display: grid; grid-template-columns: 1.25fr .8fr 1fr; gap: 10px; }
  .bag-filter { min-width: 0; }
  body[data-page="collections"] .bag-filter select,
  body[data-page="collections"] #bagSizeFilter { min-width: 0; font-size: 12px; }
  body[data-page="collections"] .bag-family-head { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 34px 20px 22px; }
  body[data-page="collections"] .bag-family-head h2 { font-size: 34px !important; }
  #collectionGrid .col-story--rtw { grid-template-columns: 1fr; gap: 14px; margin: 18px 0; padding: 34px 20px; }
  #collectionGrid .col-story--rtw blockquote { grid-row: auto; }
  .charm-related-grid { grid-template-columns: repeat(3, minmax(145px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; }
  /* plus de min-height : c'est l'aspect-ratio 3:4 du cadre qui donne la hauteur */
  .charm-related-card { scroll-snap-align: start; }
}

/* Apercu tactile (cliente 2026-08-05) : le doigt pose sur la carte revele la photo
   portee, comme :hover sur ordinateur. La classe s'appelait .is-auto-swapping du temps
   ou la bascule etait automatique — renommee, parce qu'un nom qui ment sur le
   comportement coute une relecture entiere a la personne suivante. */
.product-card.is-touch-preview .product-card__img--hover { opacity: 1; }
.product-card.is-touch-preview .product-card__media.has-hover-video .product-card__vid { opacity: 1; }
@media (hover: none) {
  /* Sans ca, iOS ouvre sa popover « ouvrir / copier le lien » apres ~0,5 s d'appui et
     mange l'apercu au moment precis ou la visiteuse le regarde. Limite au visuel : le
     nom et le prix restent selectionnables, et la carte reste un lien cliquable. */
  .product-card__media { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* ============================================================
   MODE JOUR / NUIT — collection prêt-à-porter uniquement
   Client 2026-07-22. Deux ambiances de la MÊME collection Jawhara :
   « lumière d'atelier marrakchi » et « Marrakech après la nuit ».
   Portée volontairement étroite : html[data-yza-mood] + body[data-page="collections"]
   + une catégorie vêtement. Les sacs, charms, bijoux, la recherche, les fiches
   produit et le checkout ne sont JAMAIS touchés.
   Aucune règle ici ne pose filter/opacity/mix-blend-mode sur une photo produit :
   les couleurs des vêtements doivent rester exactes dans les deux modes.
   ============================================================ */
html[data-yza-mood="day"] body[data-page="collections"][data-collection="rtw"],
html[data-yza-mood="day"] body[data-page="collections"][data-collection="tops"],
html[data-yza-mood="day"] body[data-page="collections"][data-collection="pareos"],
html[data-yza-mood="day"] body[data-page="collections"][data-collection="pants"],
html[data-yza-mood="day"] body[data-page="collections"][data-collection="bottoms"] {
  /* Blanc pur, comme le reste du site (--color-bg: #ffffff). Un crème avait été
     retenu au départ ; il jurait avec les pages voisines. */
  --mood-bg: #FFFFFF;      --mood-panel: #FFFFFF;   --mood-ink: #292725;
  /* --mood-muted etait #756E67 : 5,02:1 sur le blanc de la page, mais seulement 4,17:1
     sur --mood-sand, qui est justement le fond de la carte postale ou ce gris porte le
     texte le plus long de la page. Assombri d'un cran : 5,57 sur blanc, 4,62 sur sand. */
  --mood-muted: #6E6760;   --mood-line: #E5DED3;    --mood-sand: #F1E9DD;
  --mood-accent: #B99A62;  --mood-cool: #DCE9EF;
  --mood-shadow: 0 1px 2px rgba(41,39,37,.04), 0 8px 24px -18px rgba(41,39,37,.18);
  --mood-ring: rgba(41,39,37,.55);
}
html[data-yza-mood="night"] body[data-page="collections"][data-collection="rtw"],
html[data-yza-mood="night"] body[data-page="collections"][data-collection="tops"],
html[data-yza-mood="night"] body[data-page="collections"][data-collection="pareos"],
html[data-yza-mood="night"] body[data-page="collections"][data-collection="pants"],
html[data-yza-mood="night"] body[data-page="collections"][data-collection="bottoms"] {
  /* NOIR PUR (cliente 2026-07-29 : « only black and the stars elements »). C'etait
     #120F13, un noir tirant sur le violet. Le jeton sert aussi d'anneau d'espacement sur
     les pastilles actives et de couleur de texte au survol du bouton « Ajouter au
     panier » — le noir pur y ameliore le contraste, il ne le degrade nulle part. */
  --mood-bg: #000000;      --mood-panel: #211A21;   --mood-ink: #F5EFE6;
  --mood-muted: #BEB2B8;   --mood-line: #3A3039;    --mood-sand: #1C171D;
  --mood-accent: #BCA16B;  --mood-cool: #142752;    --mood-wine: #6E1728;
  --mood-silver: #AEB5BD;
  /* Ombre NEUTRE : la seconde couche etait une lueur bordeaux (110,23,40) qui donnait un
     halo chaud sous chaque carte. Sur l'ancien ciel degrade elle se fondait ; sur le noir
     pur elle devenait la seule couleur restante en dehors des etoiles, ce que la cliente
     ne veut plus (2026-07-29). */
  --mood-shadow: 0 2px 6px rgba(0,0,0,.5), 0 26px 60px -30px rgba(0,0,0,.55);
  --mood-ring: rgba(245,239,230,.7);
}

/* --- application, commune aux deux ambiances (les valeurs viennent des tokens) --- */
/* PÉRIMÈTRE (client 2026-07-24) : l'ambiance habille UNIQUEMENT la zone de contenu
   de la collection. L'en-tête, le bandeau d'annonce et le pied de page gardent leur
   habillage normal — ce sont des éléments de navigation communs à tout le site, les
   teinter donnait l'impression que le site entier basculait. */
body[data-page="collections"][data-collection] { transition: background-color 380ms var(--ease-out), color 380ms var(--ease-out); }
/* Le fond va sur <body>, pas sur <main> : <main> n'accepte aucun background sur
   ces pages (vérifié en direct — même un style inline !important y reste sans
   effet, alors que .container-wide et les cartes l'acceptent). On teinte donc le
   body, puis on REND au chrome son habillage normal juste en dessous.
   Sélecteur volontairement spécifique : la forme courte `.is-mood` perdait la
   cascade et laissait le fond blanc. Celle-ci teinte réellement la page. */
html[data-yza-mood] body[data-page="collections"][data-collection="rtw"] {
  background: var(--mood-bg);
}
/* L'ENCRE VA SUR LE CONTENU, PAS SUR <body> (cliente 2026-08-05 : « le panier est
   illisible la nuit »). Elle etait posee sur <body> avec le fond. Or le tiroir panier,
   le menu, la recherche, la modale d'achat rapide et les favoris sont tous injectes
   comme ENFANTS DE <body> : ils heritaient donc du creme #F5EFE6 tout en gardant leur
   propre fond blanc. Resultat mesure : contraste 1,14 sur onze elements — titre
   « Panier », noms d'articles, prix, quantites, total, bouton « Voir mon panier ».
   Invisible, pas seulement inconfortable.
   Le correctif d'origine enumerait les surfaces a re-blanchir (.header, .announcement,
   .footer, juste en dessous) : cette approche est perdante par construction, il faut
   penser a chaque nouvelle surcouche. En posant l'encre sur `> main`, tout ce qui n'est
   pas le contenu de la collection garde l'encre normale du site SANS avoir a etre cite.
   Le fond, lui, RESTE sur <body> : <main> n'accepte aucun background sur ces pages
   (verifie en direct, meme en inline !important). */
html[data-yza-mood] body[data-page="collections"][data-collection="rtw"] > main {
  color: var(--mood-ink);
}

/* ============================================================
   NUIT — LE CIEL DE MARRAKECH
   Le mode nuit ne se contente plus d'assombrir : la page devient un
   ciel. Deux halos chauds (la lanterne, la braise), un voile de voie
   lactée, un vrai champ d'étoiles qui scintille, et de temps à autre
   une étoile filante.
   RÈGLES DE SÛRETÉ :
   - 100 % CSS : zéro image, zéro requête, rien à déployer.
   - Ciel FIXE (background-attachment / position: fixed) : il ne
     s'étire pas sur une page longue et ne provoque aucun reflow.
   - Il reste DERRIÈRE le contenu (en-tête, pied de page et cartes
     intacts) et ne capte aucun clic (pointer-events: none).
   - Aucune photo produit n'est teintée : ni filter, ni opacity, ni
     mix-blend-mode dessus — les coloris doivent rester exacts, c'est
     la règle du mode nuit depuis le début.
   - Tout s'arrête sous prefers-reduced-motion.
   ============================================================ */
/* CIEL NOIR UNI (cliente 2026-07-29 : « the dark mode has a gradient, I want to use only
   black and the stars elements »). Les quatre couches de degrade sont RETIREES : la
   lanterne doree en haut a droite, la braise rouge en bas a gauche, le voile de voie
   lactee en diagonale, et l'eclaircissement du ciel vers le haut. Il ne reste que du noir
   et le champ d'etoiles ci-dessous, qui lui est un element a part (::before) et n'a pas
   bouge — l'etoile filante (::after) non plus. */
html[data-yza-mood="night"] body[data-page="collections"][data-collection="rtw"] {
  background-color: var(--mood-bg);
  background-image: none;
  background-attachment: fixed;
}
/* le champ d'étoiles : trois profondeurs, chacune sur sa propre trame */
html[data-yza-mood="night"] body[data-page="collections"][data-collection="rtw"]::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(2.2px 2.2px at 18% 22%, rgba(255,255,255,1), transparent 100%),
    radial-gradient(2px 2px at 73% 12%, rgba(255,247,235,.98), transparent 100%),
    radial-gradient(1.9px 1.9px at 34% 78%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1.5px 1.5px at 41% 63%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 47%, rgba(220,233,239,.88), transparent 100%),
    radial-gradient(1.4px 1.4px at 9% 71%, rgba(255,255,255,.8), transparent 100%),
    radial-gradient(1.3px 1.3px at 62% 40%, rgba(255,247,235,.78), transparent 100%),
    radial-gradient(1.1px 1.1px at 57% 31%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1.1px 1.1px at 29% 8%, rgba(255,255,255,.68), transparent 100%),
    radial-gradient(1px 1px at 66% 84%, rgba(255,255,255,.62), transparent 100%),
    radial-gradient(1px 1px at 95% 77%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(.9px .9px at 12% 44%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(.9px .9px at 79% 66%, rgba(255,255,255,.52), transparent 100%);
  background-size: 780px 700px, 780px 700px, 780px 700px,
                   520px 470px, 520px 470px, 520px 470px, 520px 470px,
                   300px 280px, 300px 280px, 300px 280px, 300px 280px, 300px 280px, 300px 280px;
  animation: yza-twinkle 7s ease-in-out infinite alternate;
}
/* Les etoiles filantes. Un SEUL element, mais l'animation le fait traverser a trois
   hauteurs et trois inclinaisons differentes au fil du cycle : on en voit donc passer
   plusieurs, jamais deux en meme temps (c'est ce qui les garde discretes), et ca ne
   coute qu'une seule couche composee. Les sauts de position se font a opacite 0. */
html[data-yza-mood="night"] body[data-page="collections"][data-collection="rtw"]::after {
  content: ""; position: fixed; top: 0; left: 0; z-index: 0; pointer-events: none;
  width: 11vw; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  opacity: 0;
  animation: yza-shooting-star 26s linear infinite;
}
@keyframes yza-twinkle { from { opacity: .62; } to { opacity: 1; } }
@keyframes yza-shooting-star {
  /* passage 1 — haut, longue et rapide */
  0%        { transform: translate3d(-12vw, 11vh, 0) rotate(15deg); opacity: 0; }
  1.5%      { opacity: .7; }
  8%        { opacity: .55; }
  11%       { transform: translate3d(88vw, 33vh, 0) rotate(15deg); opacity: 0; }
  /* passage 2 — plus bas, plus courte */
  37%       { transform: translate3d(-10vw, 46vh, 0) rotate(7deg); opacity: 0; }
  38.5%     { opacity: .5; }
  44%       { transform: translate3d(58vw, 55vh, 0) rotate(7deg); opacity: 0; }
  /* passage 3 — tres haute, a peine visible */
  71%       { transform: translate3d(-10vw, 5vh, 0) rotate(22deg); opacity: 0; }
  72.5%     { opacity: .6; }
  79%       { transform: translate3d(92vw, 31vh, 0) rotate(22deg); opacity: 0; }
  100%      { transform: translate3d(92vw, 31vh, 0) rotate(22deg); opacity: 0; }
}
/* le contenu et le chrome passent au-dessus du ciel */
html[data-yza-mood="night"] body[data-page="collections"][data-collection="rtw"] > main,
html[data-yza-mood="night"] body[data-page="collections"][data-collection="rtw"] > .footer,
html[data-yza-mood="night"] body[data-page="collections"][data-collection="rtw"] > footer {
  position: relative; z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  html[data-yza-mood="night"] body[data-page="collections"][data-collection="rtw"]::before { animation: none; opacity: .85; }
  html[data-yza-mood="night"] body[data-page="collections"][data-collection="rtw"]::after { display: none; }
}

/* Le chrome reste hors ambiance, quelle que soit l'ambiance active. */
.is-mood .header,
.is-mood .announcement,
.is-mood .footer {
  background: var(--color-bg); color: var(--color-fg); border-color: var(--color-border);
}
.is-mood .breadcrumb, .is-mood .breadcrumb a, .is-mood .collection-head p, .is-mood .toolbar { color: var(--mood-muted); }
/* Ces trois-la etaient restes sur --color-muted alors qu'ils vivent DANS la zone
   d'ambiance. La nuit, ils s'affichaient donc en gris de jour sur le ciel noir et ne
   passaient (4,66) que par chance, parce que l'ancien #767676 tombait juste au-dessus du
   seuil. En assombrissant ce gris pour les fonds clairs, ils sont passes a 3,77 — la
   preuve que le rattachement manquait, pas que l'assombrissement etait mauvais.
   Rattaches a --mood-muted comme leurs voisins immediats de la meme barre. */
.is-mood .collection-head__count,
/* `:not([aria-pressed="true"])` est indispensable : la puce ACTIVE est un aplat d'encre
   avec du texte creme. Sans l'exclusion, cette regle-ci lui reimposait le gris sourdine
   par-dessus son fond sombre — 2,44:1, c'est-a-dire casser la puce active pour reparer
   les inactives. */
.is-mood .filter-chips button:not([aria-pressed="true"]),
.is-mood .grid-density__label { color: var(--mood-muted); }
.is-mood .collection-head h1, .is-mood .section-head h2 { color: var(--mood-ink); }
.is-mood .toolbar, .is-mood .collection-head { border-color: var(--mood-line); }
.is-mood .toolbar__cats button, .is-mood .grid-density__btn, .is-mood .bag-filter select { color: var(--mood-muted); border-color: var(--mood-line); background: transparent; }
/* Le menu de tri (« En vedette ») était le SEUL contrôle resté blanc sur le ciel noir :
   sa boîte vient de `.toolbar select { background: var(--color-bg) }` et la ligne
   ci-dessus ne cite que `.bag-filter select`. On l'aligne sur les boutons 3/4/6 juste
   à côté — fond transparent, filet --mood-line — plutôt que d'inventer un style.

   LA LISTE DÉROULANTE EST UN PIÈGE (cliente 2026-08-05, 2e passe). Elle n'est pas peinte
   dans la page : c'est un panneau du navigateur, posé PAR-DESSUS. Il hérite du `color`
   du <select> mais PAS de son fond — donc l'encre crème de la nuit se retrouvait sur le
   panneau blanc du système : les quatre options non surlignées étaient invisibles.
   `color-scheme: dark` était censé assombrir ce panneau ; il assombrit bien la flèche,
   mais pas le panneau partout — et ça, aucun outil ne permet de le vérifier, le panneau
   étant hors du document (ni capture, ni inspection possible).
   On arrête donc de dépendre du thème natif : `appearance: none` supprime la flèche du
   système (on dessine la nôtre, à l'encre de l'ambiance) et les <option> sont repeintes
   explicitement en CLAIR. Le panneau reste donc lisible dans tous les cas de figure —
   même sur un navigateur qui ignorerait complètement le style des <option>, puisqu'il
   retomberait alors sur ses propres couleurs système, claires elles aussi. */
.is-mood .toolbar select {
  background-color: transparent; color: var(--mood-ink); border-color: var(--mood-line);
  -webkit-appearance: none; appearance: none;
  padding-inline-end: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23292725' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 10px 6px;
}
html[data-yza-mood="night"] .is-mood .toolbar select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F5EFE6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[dir="rtl"] .is-mood .toolbar select { background-position: left 0.75rem center; }
/* Panneau clair, encre sombre : les deux propriétés ensemble, jamais l'une sans l'autre
   — c'est exactement le fait de n'avoir que la couleur (héritée) et pas le fond qui a
   créé le bug. */
.is-mood .toolbar select option { background-color: #FFFFFF; color: #292725; }
.is-mood .toolbar__cats button.is-active, .is-mood .grid-density__btn.is-active { color: var(--mood-ink); border-color: var(--mood-ink); }
/* the product photo stays a lit panel: white in Day, a jewel-box spotlight at Night */
.is-mood .product-card__media { background: var(--mood-panel); box-shadow: 0 0 0 1px var(--mood-line), var(--mood-shadow); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .is-mood .product-card__media { box-shadow: 0 0 0 .5px var(--mood-line), var(--mood-shadow); }
}
.is-mood .product-card__name, .is-mood .product-card__price { color: var(--mood-ink); }
.is-mood .product-card__limited, .is-mood .product-card__few, .is-mood .product-card__stock { color: var(--mood-muted); }
.is-mood .product-card__wish svg { stroke: var(--mood-ink); }
.is-mood .product-card__swatch-dot { box-shadow: inset 0 0 0 1px var(--mood-line); }
.is-mood .product-card__swatch-dot--btn.is-active { box-shadow: inset 0 0 0 1px var(--mood-line), 0 0 0 2px var(--mood-bg), 0 0 0 3px var(--mood-ink); }
.is-mood .col-story-panel, .is-mood .col-story--ingrid, .is-mood .collection-empty { background: var(--mood-sand); color: var(--mood-ink); border-color: var(--mood-line); }
/* Pas de règle sur .footer ni .header : ils restent volontairement hors ambiance. */
.is-mood *:focus-visible { outline: 2px solid var(--mood-ring); outline-offset: 3px; }
/* the swap itself: a short crossfade, never a layout change */
.is-mood .product-card__img { transition: opacity 210ms var(--ease-out); }
.is-mood .product-card__img.is-mood-fading { opacity: 0; }
/* La pastille « Ajouter au panier » est un blanc translucide pensé pour une page
   claire. En nuit, l'encre passe en crème et le duo devient crème-sur-blanc :
   contraste 1,14, bouton invisible. On inverse la pastille, pas le texte. */
/* LA CARTE POSTALE S'INVERSE LA NUIT : son fond passe de creme (#F1E9DD) a presque noir
   (--mood-sand #1C171D). Le terracotta LISIBLE (--accent-text, volontairement sombre pour
   les fonds clairs) y tombe a 3,17:1 — sur fond sombre, c'est le terracotta CLAIR d'origine
   qui est le bon : 5,57:1. Un jeton « lisible » ne l'est que sur la surface pour laquelle
   il a ete calcule ; on le rend donc a l'ambiance ICI, et surtout PAS en redefinissant
   --accent-text sur <body> — l'en-tete et le pied de page restent blancs et reclament,
   eux, la version sombre. */
html[data-yza-mood="night"] .is-mood .postcard__quote { color: var(--accent); }
html[data-yza-mood="night"] .is-mood .postcard__mark {
  color: var(--accent); border-color: var(--accent);
}
html[data-yza-mood="night"] .is-mood .product-card__addbag {
  background: rgba(18, 15, 19, 0.78);
  border-color: var(--mood-line);
  color: var(--mood-ink);
}
html[data-yza-mood="night"] .is-mood .product-card__addbag:hover {
  background: var(--mood-ink);
  color: var(--mood-bg);
}
@media (max-width: 767px) {
  html[data-yza-mood="night"] .is-mood .product-card__addbag { background: rgba(18, 15, 19, 0.88); }
}

/* --- la bascule : un bouton flottant en bas à gauche (cliente 2026-08-05) ---
   Elle était une petite bascule à glissière posée dans la barre d'outils, entre le
   spectre des coloris et le tri. Deux raisons de l'en sortir : sous 860px elle
   disputait la ligne au rail des 10 pastilles, et surtout une bascule Jour/Nuit se
   cherche dans un coin de page, pas au milieu d'un filtre.
   Taille et ligne de base COPIÉES sur `.lead-chat-fab` (cliente : « ces 2 éléments
   gauche et droite doivent avoir la même taille et le même alignement ») — mêmes
   littéraux 60/45 px, 34/14 px de fond, clamp(14px,2vw,28px)/0.85rem de bord. Si l'un
   des deux coins bouge un jour, bouger l'autre dans le même geste.
   En RTL `inset-inline-start` amène celui-ci à droite, et la règle RTL existante
   envoie la discussion à gauche : les deux se croisent proprement. */
.mood-fab {
  position: fixed;
  inset-inline-start: clamp(14px, 2vw, 28px);
  bottom: calc(34px + env(safe-area-inset-bottom));
  /* au-dessus du ciel (0) et du contenu (1), sous le panier (95) et la discussion (96) */
  z-index: 76;
  width: 60px; height: 60px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; cursor: pointer;
  border: 1px solid var(--mood-line, var(--color-border-strong));
  background: var(--mood-panel, var(--color-bg));
  color: var(--mood-ink, var(--color-fg));
  /* Ombre PROPRE au bouton, pas --mood-shadow : celle des cartes est volontairement
     imperceptible (elles reposent sur la page), alors qu'un bouton flottant blanc sur
     une page blanche disparaît sans un vrai décollement. */
  box-shadow: 0 6px 20px -8px rgba(41,39,37,.30), 0 1px 3px rgba(41,39,37,.12);
  transition: transform var(--transition-fast), background-color 380ms var(--ease-out),
              border-color 380ms var(--ease-out), color 380ms var(--ease-out);
}
/* La nuit, une ombre portée ne se voit pas sur du noir pur : c'est un liseré clair qui
   détache le bouton du ciel. */
html[data-yza-mood="night"] .mood-fab {
  box-shadow: 0 0 0 1px rgba(245,239,230,.10), 0 12px 30px -14px rgba(0,0,0,.9);
}
/* Un `display` explicite écrase la règle navigateur de [hidden] : sans cette
   ligne, main.js masquait bien le bouton mais le CSS le réaffichait, et la
   bascule apparaissait sur les pages sacs, charms et bijoux. */
.mood-fab[hidden] { display: none; }
.mood-fab:hover { transform: translateY(-2px); }
.mood-fab:active { transform: translateY(0) scale(.96); }
.mood-fab:focus-visible { outline: 2px solid var(--mood-ring, currentColor); outline-offset: 3px; }

/* Les deux icônes occupent la MÊME cellule de grille : elles se croisent en fondu sur
   place, sans jamais décaler le centre du bouton — c'est de ce centre que part le
   cercle de lumière, il ne doit pas bouger d'un pixel pendant l'échange. */
.mood-fab__icons { display: grid; width: 26px; height: 26px; place-items: center; }
.mood-fab__icon {
  grid-area: 1 / 1; width: 26px; height: 26px;
  transition: opacity 330ms var(--ease-out), transform 330ms var(--ease-out);
}
/* jour → on propose la nuit : la lune. nuit → on propose le jour : le soleil. */
.mood-fab .mood-fab__icon--sun  { opacity: 0; transform: scale(.55) rotate(25deg); }
.mood-fab .mood-fab__icon--moon { opacity: 1; transform: none; }
.mood-fab[aria-checked="true"] .mood-fab__icon--sun  { opacity: 1; transform: none; }
.mood-fab[aria-checked="true"] .mood-fab__icon--moon { opacity: 0; transform: scale(.55) rotate(-25deg); }

/* Le libellé se déplie au survol et au clavier. Il reste aria-hidden : le nom
   accessible du bouton vient de son aria-label, sinon le lecteur d'écran lirait
   deux fois la même chose. */
.mood-fab__label {
  position: absolute; inset-inline-start: calc(100% + .5rem);
  padding: .34rem .7rem; border-radius: 999px;
  border: 1px solid var(--mood-line, var(--color-border));
  background: var(--mood-panel, var(--color-bg)); color: var(--mood-ink, var(--color-fg));
  font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
[dir="rtl"] .mood-fab__label { transform: translateX(6px); }
.mood-fab:hover .mood-fab__label,
.mood-fab:focus-visible .mood-fab__label { opacity: 1; transform: none; }
@media (hover: none) { .mood-fab__label { display: none; } }
/* 767px et non 600 : c'est la césure de `.lead-chat-fab`, les deux coins doivent
   rapetisser au même moment, sinon ils sont dépareillés entre 600 et 767px. */
@media (max-width: 767px) {
  .mood-fab { width: 45px; height: 45px; inset-inline-start: 0.85rem; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .mood-fab__icons, .mood-fab__icon { width: 20px; height: 20px; }
}
/* La discussion disparaît quand le tiroir panier s'ouvre : la bascule fait pareil,
   sinon un seul des deux coins reste allumé au-dessus du voile. */
body.has-cart-drawer .mood-fab { display: none; }

/* --- le cercle de lumière : la bascule elle-même ---
   Une View Transition. Le navigateur photographie la page avant et après, puis
   n'anime QUE le masque du cliché « après » : aucune photo produit n'est redécodée
   et aucune mise en page n'est recalculée pendant les 700 ms.
   Le fondu croisé par défaut est coupé sur les deux clichés — sans ça, l'ancien se
   dissout en même temps que le cercle s'ouvre et le noir vire au gris laiteux.
   La classe restreint la règle à CETTE transition : elle ne s'appliquera pas à une
   éventuelle transition de navigation ajoutée plus tard.
   Le cercle lui-même (clip-path) est animé en JS depuis le centre du bouton — sa
   position n'est pas connue du CSS. */
html.is-mood-vt::view-transition-old(root),
html.is-mood-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.is-mood-vt::view-transition-old(root) { z-index: 0; }
html.is-mood-vt::view-transition-new(root) { z-index: 1; }

/* --- le passage de lumière : le repli quand View Transitions manque à l'appel --- */
.mood-sweep { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%); }
.mood-sweep.is-running { animation: mood-sweep 620ms var(--ease-out) 1; }
@keyframes mood-sweep { 0% { opacity: 0; transform: translateX(-40%); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(40%); } }

/* ============================================================
   CARTE POSTALE — le récit de catégorie (prêt-à-porter, charms)
   La maison dit déjà « une carte postale de Marrakech » : le bloc
   prend donc le dos d'une vraie carte — message à gauche, filet
   central, timbre + cachet + adresse de l'atelier à droite.
   Tout est en CSS : aucune image, donc rien à déployer ni à
   traduire, et ça reste net à n'importe quelle taille.
   ============================================================ */
.col-story--postcard { border-top: 0; padding-inline: clamp(1rem, 4vw, 2rem); }
/* Les tokens --mood-* n'existent que sur les collections vêtement : les valeurs de
   repli gardent la carte correcte sur la page charms et si la bascule est absente.
   C'est ce qui remplace l'ancienne règle `.is-mood .col-story-panel`. */
.postcard {
  position: relative; display: grid; grid-template-columns: 1.25fr .75fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 62rem; margin-inline: auto;
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
  background: var(--mood-sand, var(--paper-card));
  color: var(--mood-ink, var(--color-fg));
  border: 1px solid var(--mood-line, var(--color-border-strong));
  box-shadow: var(--mood-shadow, 0 18px 40px -32px rgba(0,0,0,.45));
  text-align: left;
}
/* le liseré intérieur d'une carte imprimée */
.postcard::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid var(--mood-line, var(--color-border));
  pointer-events: none;
}
/* le filet central du dos de carte */
.postcard::after {
  content: ""; position: absolute; top: 15%; bottom: 15%; left: 62%;
  border-left: 1px solid var(--mood-line, var(--color-border-strong)); opacity: .55;
}
.postcard__msg { display: grid; gap: var(--space-4); align-content: start; }
.postcard__quote {
  margin: 0; padding: 0; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem); line-height: 1.4; color: var(--accent-text, var(--accent));
  max-width: 30ch;
}
.postcard__quote::before { content: none; }
.postcard__title {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.12; max-width: 22ch;
}
.postcard__text { margin: 0; color: var(--mood-muted, var(--color-muted)); font-size: var(--fs-sm); line-height: 1.8; max-width: 46ch; }
.postcard__addr { display: grid; gap: var(--space-4); align-content: start; }
/* la suite du recit, cote adresse : meme voix que le debut, un cran plus serree */
.postcard__text--suite { max-width: 34ch; }
.postcard__philately { display: flex; align-items: flex-start; gap: .9rem; justify-content: flex-end; min-height: 74px; }
/* --- le timbre, dentelé au masque CSS --- */
.postcard__stamp {
  position: relative; display: grid; place-items: center; gap: 2px;
  width: 62px; height: 74px; padding: 6px; color: var(--accent);
  background: linear-gradient(160deg, #fff 0%, #fdf7ee 55%, #f6e7d6 100%);
  -webkit-mask:
    radial-gradient(circle 3.2px at 50% 0, #0000 3.2px, #000 3.6px) 50% 0 / 10px 10px repeat-x,
    radial-gradient(circle 3.2px at 50% 100%, #0000 3.2px, #000 3.6px) 50% 100% / 10px 10px repeat-x,
    radial-gradient(circle 3.2px at 0 50%, #0000 3.2px, #000 3.6px) 0 50% / 10px 10px repeat-y,
    radial-gradient(circle 3.2px at 100% 50%, #0000 3.2px, #000 3.6px) 100% 50% / 10px 10px repeat-y,
    linear-gradient(#000, #000) 50% 50% / calc(100% - 10px) calc(100% - 10px) no-repeat;
  mask:
    radial-gradient(circle 3.2px at 50% 0, #0000 3.2px, #000 3.6px) 50% 0 / 10px 10px repeat-x,
    radial-gradient(circle 3.2px at 50% 100%, #0000 3.2px, #000 3.6px) 50% 100% / 10px 10px repeat-x,
    radial-gradient(circle 3.2px at 0 50%, #0000 3.2px, #000 3.6px) 0 50% / 10px 10px repeat-y,
    radial-gradient(circle 3.2px at 100% 50%, #0000 3.2px, #000 3.6px) 100% 50% / 10px 10px repeat-y,
    linear-gradient(#000, #000) 50% 50% / calc(100% - 10px) calc(100% - 10px) no-repeat;
}
.postcard__stamp-sign { display: block; width: 26px; height: 26px; }
.postcard__stamp-sign svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }
.postcard__stamp-name { font-family: var(--font-display); font-size: .5rem; letter-spacing: .18em; color: #2e2e2e; }
/* --- le cachet d'oblitération, posé de travers sur le timbre --- */
.postcard__mark {
  display: grid; place-content: center; gap: 1px; width: 68px; height: 68px; margin-left: -22px; margin-top: 6px;
  /* CACHET D'OBLITERATION — ornement assume. A 50 % d'opacite il tombait a 1,64:1 : il
     n'etait pas « peu contraste », il etait invisible. Passe au terracotta lisible et a
     80 % : 3,28:1. Cela reste SOUS le seuil AA de 4,5, volontairement — un cachet net et
     sombre ne ressemblerait plus a un cachet. C'est un decor, et « Marrakech » / « SS26 »
     figurent deja en clair dans le texte de la carte : aucune information n'est portee
     uniquement ici. Doubler le gain de lisibilite sans denaturer l'objet. */
  border: 1.5px solid var(--accent-text, var(--accent)); border-radius: 50%; color: var(--accent-text, var(--accent)); opacity: .8;
  transform: rotate(-13deg); text-align: center; box-shadow: inset 0 0 0 3px var(--paper-card), inset 0 0 0 4.5px currentColor;
}
.postcard__mark-city { font-family: var(--font-display); font-size: .46rem; letter-spacing: .14em; text-transform: uppercase; }
.postcard__mark-line { display: block; height: 1px; background: currentColor; margin: 2px auto; width: 62%; }
.postcard__mark-year { font-family: var(--font-display); font-size: .46rem; letter-spacing: .14em; }
.postcard__cta { margin: 0; font-family: var(--font-display); font-size: var(--fs-sm); line-height: 1.7; color: var(--mood-ink, var(--color-fg)); }
/* l'adresse de l'atelier, sur ses lignes d'écriture */
.postcard__from {
  margin: 0; padding-top: .55rem; font-family: var(--font-display); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mood-muted, var(--color-muted)); line-height: 2.1;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(2.1em - 1px), var(--mood-line, var(--color-border)) calc(2.1em - 1px) 2.1em);
}
@media (max-width: 860px) {
  .postcard { grid-template-columns: 1fr; gap: var(--space-5); }
  .postcard::after { content: none; }              /* pas de filet vertical en colonne unique */
  .postcard__philately { justify-content: flex-start; }
  .postcard__quote, .postcard__title, .postcard__text { max-width: none; }
}
[dir="rtl"] .postcard { text-align: right; }
[dir="rtl"] .postcard::after { left: auto; right: 62%; }
[dir="rtl"] .postcard__philately { justify-content: flex-start; }
[dir="rtl"] .postcard__mark { margin-left: 0; margin-right: -22px; }
@media (prefers-reduced-motion: reduce) { .postcard__mark { transform: none; } }

/* ============================================================
   SPECTRE DES COLORIS (prêt-à-porter)
   Un rail de pastilles dans la barre d'outils : la première panache
   (« Mélange »), les 9 suivantes habillent toute la grille d'un seul
   coloris Jawhara. Les couleurs viennent du HTML inline (JAWHARA_COLORS),
   jamais d'une valeur codée ici — une seule source de vérité.
   ============================================================ */
.spectrum { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; max-width: 100%; min-width: 0; }
.spectrum__label { color: var(--mood-muted, var(--color-muted)); font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
/* Le rail DEFILE (cliente 2026-07-29) : sur un telephone les 9 coloris + « Melange »
   depassent la largeur de l'ecran. Il etait en `inline-flex` sans overflow et, pire,
   en `touch-action: pan-y` — qui INTERDIT explicitement le balayage horizontal : les
   deux dernieres pastilles etaient inatteignables, au doigt comme autrement.
   `min-width: 0` est indispensable : sans lui l'element flex refuse de retrecir sous
   la largeur de son contenu et le rail deborde au lieu de defiler.
   La barre de defilement est masquee (le rail est une pilule, une barre la salirait) ;
   l'affordance vient du contenu coupe net au bord et de la pastille active amenee dans
   le champ par paintControl(). */
.spectrum__rail { display: flex; align-items: center; gap: .3rem; padding: .28rem .4rem; border: 1px solid var(--mood-line, var(--color-border)); border-radius: 999px; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-x pan-y; }
.spectrum__rail::-webkit-scrollbar { display: none; }
/* flex-shrink: 0 — sinon les pastilles se compriment en ovales au lieu de defiler. */
.spectrum__dot { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; transition: transform var(--transition-fast); }
/* la pastille elle-même : un disque net, cerclé pour rester lisible sur les tons clairs */
.spectrum__chip { display: block; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); transition: width var(--transition-fast), height var(--transition-fast); }
.spectrum__dot:hover { transform: translateY(-1px); }
.spectrum__dot:hover .spectrum__chip { width: 19px; height: 19px; }
/* `--mood-fg` N'EXISTE PAS : le jeton s'appelle `--mood-ink`. La faute de frappe etait
   silencieuse — `var()` retombait simplement sur le repli de jour, donc la nuit l'anneau
   de la pastille active etait dessine en #2e2e2e sur du noir (invisible) et le nom du
   coloris affichait 1,55 de contraste. Aucune erreur nulle part : c'est le mode d'echec
   des variables CSS, le repli masque la faute. Verifie : `--mood-fg` n'etait defini a
   aucun endroit de la feuille. */
.spectrum__dot.is-active .spectrum__chip { width: 21px; height: 21px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 0 0 2px var(--mood-bg, var(--color-bg)), 0 0 0 3.5px var(--mood-ink, var(--color-fg)); }
.spectrum__dot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.spectrum__name { min-width: 8.5ch; color: var(--mood-ink, var(--color-fg)); font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: .04em; white-space: nowrap; }
/* fondu de l'image pendant l'échange de coloris — indépendant de la classe .is-mood,
   pour que le spectre marche aussi si la bascule Jour/Nuit est absente */
.product-card__img { transition: opacity 210ms var(--ease-out); }
.product-card__img.is-spectrum-fading { opacity: 0; }
/* Sous 860px la barre d'outils est déjà dense : on garde le rail, on retire le mot. */
@media (max-width: 860px) {
  .spectrum__label { display: none; }
  .spectrum__name { min-width: 0; }
}
@media (max-width: 860px) {
  /* Le rail prend sa PROPRE LIGNE. Sur la meme ligne que « Mode nuit » et le tri il ne
     lui restait qu'une quarantaine de pixels, et .toolbar__right est en overflow:hidden :
     les dernieres pastilles etaient purement et simplement coupees. Sur une ligne
     entiere les 10 pastilles tiennent sans meme avoir besoin de defiler ; le defilement
     ajoute plus haut reste le filet de securite (ecran tres etroit, coloris futurs). */
  .toolbar__right { flex-wrap: wrap; }
  .spectrum { order: 9; flex: 1 1 100%; }
  .spectrum__rail { flex: 1 1 auto; }
}
@media (max-width: 600px) {
  .spectrum__name { display: none; }
  /* padding vertical un peu plus genereux qu'avant : le rail est desormais un
     conteneur de defilement, donc il ROGNE — sans cette marge l'anneau de la
     pastille active (chip 21px + 3,5px de halo) serait coupe en haut et en bas. */
  .spectrum__rail { gap: .18rem; padding: .3rem .32rem; }
  .spectrum__dot { width: 22px; height: 22px; }
}

/* Selection d'un coloris : la VIDEO de survol est neutralisee (cliente 2026-07-29).
   Elle choisissait « Violet Lilas » et le survol montrait la chemise NOIRE. Une video
   est tournee dans UN coloris et ne se decline pas : elle mentirait sur les neuf autres.
   L'IMAGE de survol n'est plus listee ici (2026-07-30) : depuis applyColorHover elle est
   servie PAR coloris et PAR ambiance, donc juste par construction — et absente, plutot
   que fausse, quand la paire n'existe pas. La neutralisation reste en CSS plutot qu'en
   reecrivant le src : le spectre ne doit toucher que img.src/alt (spectrumController.dress). */
.product-card.is-spectrum-locked .product-card__vid,
.product-card.is-spectrum-locked:hover .product-card__vid { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .is-mood .product-card__img, .mood-fab, .mood-fab__icon, .mood-fab__label,
  body[data-page="collections"][data-collection] { transition: none !important; }
  .mood-sweep, .mood-sweep.is-running { display: none !important; animation: none !important; }
  .product-card__img, .spectrum__dot, .spectrum__chip { transition: none !important; }
}

/* Itineraire depuis la discussion (cliente 28/07). Les logos sont les VRAIES marques
   (Waze, Google Maps, Plans) : on ne dessine jamais une approximation d'un logo connu.
   Hauteur fixe + width:auto pour que chacun garde son ratio propre — les trois fichiers
   n'ont pas du tout les memes proportions (1024x296, 256x367, 512x512). */
.lead-chat__maps { padding: 10px 16px 4px; border-top: 1px solid #f0eeea; }
.lead-chat__maps-label { display: block; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: #6b6b6b; margin-bottom: 8px; }
.lead-chat__maps-row { display: flex; gap: 8px; }
.lead-chat__map { flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 6px; border: 1px solid #e3ded7; border-radius: 6px;
  background: #fff; transition: border-color .2s, transform .2s; }
.lead-chat__map:hover { border-color: #1f1f1f; }
.lead-chat__map:active { transform: scale(.97); }
/* NE PAS remettre width:auto ici. Les logos portent loading="lazy" (via logoImg) et
   vivent dans un panneau ferme : sans largeur explicite, `auto` se resout a 0 tant que
   l'image n'est pas chargee -> l'element fait 0 px de large -> il n'entre jamais dans le
   viewport -> le chargement paresseux ne se declenche JAMAIS. Blocage circulaire, et
   totalement muet : les trois boutons restaient vides. Mesure : naturalWidth 0 alors que
   les memes URL se chargeaient parfaitement en direct.
   Une largeur explicite donne une boite des le depart ; object-fit garde le ratio propre
   de chaque logo (1024x296, 256x367, 512x512). */
.lead-chat__map img { height: 20px; width: 100%; max-width: 68px; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) { .lead-chat__map { transition: none; } }

/* ---------------------------------------------------------------------------
   2026-08-07 — BANDES DE LETTERBOX DU PACKSHOT DE NUIT
   Les visuels catalogue sont en 3:4 dans un cadre de carte en 2:3 : `contain`
   laisse donc une bande en haut et en bas. La regle plus haut peint ces bandes en
   BLANC directement sur la balise <img>, ce qui les fond dans la carte le JOUR.
   Le packshot de nuit du Top Bateau est sur fond NOIR : les memes bandes lui
   dessinaient un encadrement blanc au milieu d'une page sombre.
   Le suffixe `.night.webp` identifie ces visuels ; `*=` et non `$=` parce que le
   src porte une chaine `?v=`. Aucune autre carte n'est touchee.
   --------------------------------------------------------------------------- */
html[data-yza-mood="night"] body[data-page="collections"] .product-card__img[src*=".night.webp"] { background: #000; }

/* LE LISERE AUTOUR DU PACKSHOT DE NUIT (retour proprietaire : « the background is not
   blending correctly »). Ce n'est ni la photo ni les bandes : c'est le FILET DE CARTE.
   `.is-mood .product-card__media` (l.5816) pose `box-shadow: 0 0 0 .5px var(--mood-line)`,
   soit #3A3039 — mesure a l'ecran : un trait de 1 px a rgb(58,48,57) en haut et a gauche.
   Ma premiere hypothese (le fond rgb(33,26,33) du conteneur qui affleure) etait FAUSSE :
   le liseré subsistait apres l'avoir passe au noir. C'est l'ombre qui le dessine.
   Ce filet a une vraie raison d'etre, expliquee l.643 : les packshots sont blanc sur
   blanc et les tuiles voisines se confondaient sans lui. Mais sur un packshot sur fond
   NOIR pose sur une page NOIRE, il devient la seule chose visible et encadre la piece.
   On le rend donc transparent pour ces cartes-la — en surchargeant la VARIABLE plutot
   que la liste d'ombres, pour que les ombres portees du theme restent intactes.
   Le fond du conteneur est aligne sur le noir de la photo par la meme occasion (les
   cartes ont des dimensions fractionnaires). `:has()` ne vise que les cartes portant un
   packshot de nuit ; la ou il n'est pas supporte on retombe sur le rendu actuel. */
html[data-yza-mood="night"] body[data-page="collections"] .product-card__media:has(.product-card__img[src*=".night.webp"]) {
  --mood-line: transparent;
  background: #000;
}

/* ---------------------------------------------------------------------------
   2026-08-07 — « PLUS QUE QUELQUES PIECES » ILLISIBLE LA NUIT
   Retour proprietaire : « make that plus que quelques pieces readable on white
   backgrounds ». Ces deux mentions sont posees SUR LE PACKSHOT, pas sur la page.
   `.is-mood .product-card__few` (l.5819) les passait en `--mood-muted` = #BEB2B8,
   une couleur CLAIRE pensee pour le fond noir de la page — mais le packshot, lui,
   est BLANC. Contraste mesure a l'ecran : **2,07:1** pour un texte de 9,5 px, la ou
   AA en demande 4,5. Le JOUR n'avait pas ce defaut (5,57:1) : c'est la nuit qui
   l'introduisait, et c'est exactement le meme piege que celui corrige l.712 —
   du texte clair sur des packshots clairs.
   `__stock` cumule : sa pastille est blanche (rgba(255,255,255,.88)), le texte clair
   y etait deux fois perdant. `__limited`, lui, vit SOUS l'image, sur la page noire :
   il garde `--mood-muted`, on n'y touche pas.
   --------------------------------------------------------------------------- */
html[data-yza-mood="night"] .product-card__few { color: var(--color-muted); }
html[data-yza-mood="night"] .product-card__stock { color: var(--color-fg); }

/* Seule exception : le Top Bateau sert la nuit un packshot sur fond NOIR — la, c'est
   la mention claire qui est juste. Meme signature `.night.webp` que les regles plus haut. */
html[data-yza-mood="night"] .product-card:has(.product-card__img[src*=".night.webp"]) .product-card__few { color: var(--mood-muted); }