/* Composants front Lapidaire — mobile-first, un seul fichier, aucune valeur en dur :
   tailles de police = échelle de tokens.css (11/12/13/15/17/22/28/34/42), espacements sur grille 4 px,
   couleurs et rayons par tokens. Desktop (≥ 960 px) regroupé en fin de fichier. */

/* Le tunnel (chk-*, cardp, stepper, sum-*, pay-box) vit dans checkout.css, chargé par le layout du tunnel seul. */
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-offset) + var(--space-4)); }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent); }
img, picture, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; }
h1, h2, h3, p, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.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; }
.sr-only:focus-visible { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 100; width: auto; height: auto; margin: 0; padding: var(--space-2) var(--space-3); clip: auto; background: var(--color-ink); color: var(--color-ink-inverse); }
body.is-locked { overflow: hidden; }

.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.section { padding-top: var(--space-12); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-4); }
.section-head .link { padding-bottom: var(--space-1); }

/* ---------- Typo utilitaires ---------- */
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: var(--serif-letter-spacing); }
.it { font-style: italic; }
.eyebrow { font-size: var(--text-11); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-muted); font-weight: 600; line-height: var(--leading-snug); }
.display { font-family: var(--font-serif); font-weight: 400; letter-spacing: var(--serif-letter-spacing); line-height: var(--leading-tight); font-size: var(--text-h2); text-wrap: balance; }
.display--sm { font-size: var(--text-h3); line-height: 1.1; }
.display--lg { font-size: var(--text-h1); }
.display--xl { font-size: var(--text-hero); line-height: .96; }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-13); }
.xs { font-size: var(--text-11); }
.link { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; font-weight: 500; }
.hr { height: 1px; background: var(--color-line); }

/* ---------- Icônes ---------- */
.ico { width: var(--icon); height: var(--icon); stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ico--sm { width: var(--icon-sm); height: var(--icon-sm); }

/* ---------- Boutons, chips, badges ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--btn-height); padding: 0 var(--space-6);
  background: var(--color-ink); color: var(--color-ink-inverse);
  border-radius: var(--radius); font-weight: 500; font-size: var(--text-13); line-height: var(--leading-snug);
  letter-spacing: var(--ui-tracking); text-transform: uppercase; text-align: center; border: 1px solid transparent;
  transition: opacity var(--duration) var(--easing), transform var(--duration) var(--easing);
}
.btn:hover { color: var(--color-ink-inverse); opacity: .85; }
.btn:active { transform: scale(.985); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--ghost:hover { color: var(--color-ink); }
.btn--light { background: var(--color-surface); color: var(--color-ink); }
.btn--light:hover { color: var(--color-ink); }
.btn--ghost-light { color: var(--color-ink-inverse); border-color: var(--color-ink-inverse); }
.btn--ghost-light:hover { color: var(--color-ink-inverse); }
.btn--sm { min-height: var(--btn-height-sm); font-size: var(--text-12); padding: 0 var(--space-4); }
.btn--plain { text-transform: none; letter-spacing: 0; font-size: var(--text-15); }
.btn .price { display: inline; font-weight: 500; }

/* Chips d'ancres : hauteur 36 px, zone tactile étendue à 44 px par pseudo-élément */
.chip { position: relative; height: 36px; padding: 0 var(--space-4); border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); display: inline-flex; align-items: center; font-size: var(--text-13); white-space: nowrap; background: var(--color-surface); flex-shrink: 0; scroll-snap-align: start; transition: background var(--duration) var(--easing), color var(--duration) var(--easing); }
.chip::before { content: ""; position: absolute; inset: -4px; }
.chip.is-on { background: var(--color-ink); color: var(--color-ink-inverse); border-color: var(--color-ink); }

 /* Badges : une seule taille (11 px / 22 px), couleur par rôle : promo (encre), nouveauté (cuivre), fin de série (bleu acier),
   précommande (ambre), épuisé (rouge sobre) */
.badge { display: inline-flex; align-items: center; height: var(--badge-height); padding: 0 var(--space-2); font-size: var(--text-11); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--radius-sm); white-space: nowrap; line-height: 1; }
.badge--sm { height: var(--badge-height-sm); padding: 0 6px; font-size: var(--text-10); }   /* cartes : 10 px / 18 px */
.badge--promo { background: var(--color-ink); color: var(--color-ink-inverse); }
.badge--offer { background: var(--color-accent); color: var(--color-ink-inverse); }   /* laiton = offres / codes */
.badge--new { background: var(--color-new); color: var(--color-new-ink); }
.badge--out { background: var(--color-state-out-bg); color: var(--color-state-out); }
.badge--preorder { background: var(--color-state-resupply-bg); color: var(--color-state-resupply); }
.badge--destock { background: var(--color-destock); color: var(--color-destock-ink); }

/* L'attribut hidden gagne toujours (un .badge / .btn en inline-flex l'écrasait : badge « Victime de son succès » peint sur une variante achetable) */
[hidden] { display: none !important; }

/* ---------- Bandeaux (hauteurs fixes : rien ne saute) ---------- */
/* Bandeaux : bloc + line-height 16 px (jamais flex : un <b> dans le texte deviendrait un item et perdrait ses espaces) */
.ann, .accent-bar { display: block; text-align: center; line-height: 16px; padding: calc((var(--ann-height) - 16px) / 2) var(--space-4); }
.ann { background: var(--color-ink); color: var(--color-ink-inverse); font-size: var(--text-11); letter-spacing: .12em; text-transform: uppercase; }
/* Bandeau d'offre unique (dans .topbar, sous le header) : une ligne de 36 px, laiton, « wording · code · fin dans 3 j 12 h ».
   Le texte est un seul span inline (les <b> gardent leurs espaces) ; il est tronqué plutôt que de passer sur deux lignes. */
.promo-bar { display: block; height: var(--ann-height); line-height: var(--ann-height); padding: 0 var(--space-3); text-align: center; background: var(--color-accent); color: var(--color-ink-inverse); font-size: var(--text-12); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-bar b, .promo-bar .countdown { font-weight: 700; }
.promo-bar .countdown { font-variant-numeric: tabular-nums; }
/* Aperçu d'un brouillon (lien signé) : bandeau fin au-dessus de l'annonce, défile avec la page. */
.preview-bar { background: var(--color-surface); color: var(--color-ink); font-size: var(--text-12); text-align: center; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-line); }
.preview-bar a { text-decoration: underline; text-underline-offset: 2px; }
.promo-notice { background: var(--color-surface); color: var(--color-ink); font-size: var(--text-12); text-align: center; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-line); }

/* ---------- Header : logo centré, icônes 24 px dans des cibles 44 px ----------
   .topbar (header + bandeau d'offre unique) est le seul bloc collant ; le bandeau d'annonce défile. Rien ne se chevauche :
   le bandeau est dans le flux sous le header, et --header-offset (menu.js) = hauteur du bloc pour les ancres/chips. */
.topbar { position: sticky; top: 0; z-index: 30; }
.hdr { position: relative; z-index: 2; background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
.hdr__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-height); padding: 0 var(--space-2); }
.hdr__left, .hdr__right { display: flex; align-items: center; gap: var(--space-1); }
.hdr__right { justify-content: flex-end; }
.hdr__nav { display: none; }
.hdr__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); position: relative; border-radius: var(--radius); }
.logo { font-family: var(--font-serif); font-size: var(--text-22); letter-spacing: .06em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.cart-count { position: absolute; top: 6px; right: 4px; min-width: 16px; height: 16px; padding: 0 3px; background: var(--color-ink); color: var(--color-ink-inverse); font-size: var(--text-11); font-weight: 600; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; line-height: 1; }
.nav-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-13); letter-spacing: var(--ui-tracking); text-transform: uppercase; height: var(--header-height-desktop); }
.hdr__inner .hdr__histoire { display: none; }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-new); display: inline-block; }

/* Sous-menu « Bijoux » (desktop) : panneau pleine largeur sous le header — 5 familles en tuiles 4/5 (nom + nombre
   de pièces), colonne de liens à droite ; grille 4 px. Ouvert/fermé par menu.js (survol temporisé, clavier, Échap). */
.nav-item { position: static; }
.nav-link--toggle .ico { transition: transform var(--duration) var(--easing); }
.nav-link--toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }
.submenu { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 3; background: var(--color-bg); border-top: 1px solid var(--color-line); box-shadow: var(--shadow-menu); }
.submenu.is-open { display: block; }
.submenu__inner { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-1); padding: var(--space-1) var(--space-12); max-width: var(--container-max); margin-inline: auto; }
/* Tuiles de familles (front/_families) : partagées par le sous-menu et le bloc de rebond (.rebound) */
.ftiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }
.ftile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; color: var(--color-ink-inverse); background: var(--color-placeholder); }
.ftile:hover { color: var(--color-ink-inverse); }
.ftile .ftile__img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--easing); }
.ftile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .58)); }
.ftile:hover .ftile__img { transform: scale(1.04); }
.ftile__caption { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.ftile__name { font-size: var(--text-22); line-height: 1; margin: 0; font-weight: 400; }
.ftile__count { font-size: var(--text-11); letter-spacing: var(--ui-tracking); text-transform: uppercase; opacity: .85; }
.submenu__aside { display: flex; flex-direction: column; padding: var(--space-2) var(--space-6); border-left: 1px solid var(--color-line); }
.submenu__link { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-size: var(--text-15); border-bottom: 1px solid var(--color-line); }
.submenu__note { margin-top: auto; padding-top: var(--space-4); line-height: var(--leading-snug); }

/* Menu off-canvas (mobile) */
.menu-overlay, .drawer-overlay { position: fixed; inset: 0; z-index: 40; background: var(--color-overlay); opacity: 0; visibility: hidden; transition: opacity var(--duration-slow) var(--easing), visibility 0s var(--duration-slow); }
.menu-overlay.is-open, .drawer-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu { position: fixed; top: 0; left: 0; bottom: 0; z-index: 41; width: min(100%, var(--drawer-width)); background: var(--color-bg); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); transition: transform var(--duration-slow) var(--easing); display: flex; flex-direction: column; will-change: transform; }
.menu.is-open { transform: none; }
.menu__head { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); padding: 0 var(--space-2); border-bottom: 1px solid var(--color-line); flex-shrink: 0; }
.menu__body { padding: var(--space-2) var(--gutter) var(--space-8); display: flex; flex-direction: column; }
.menu__row { display: flex; justify-content: space-between; align-items: center; min-height: var(--tap); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); font-size: var(--text-17); }
.menu__row span { display: inline-flex; align-items: center; gap: var(--space-2); }
.menu__eyebrow { padding: var(--space-6) 0 var(--space-2); }
.menu__cat { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--text-17); }
.menu__cat .ph { width: 52px; height: 52px; border-radius: var(--radius-sm); }
.menu__cat span { flex: 1; }
.menu__links { border-top: 1px solid var(--color-line); margin-top: var(--space-2); padding-top: var(--space-1); display: flex; flex-direction: column; }
.menu__links a { display: flex; align-items: center; min-height: var(--tap); font-size: var(--text-15); }

/* ---------- Placeholder média ---------- */
.ph { position: relative; overflow: hidden; flex-shrink: 0; background: var(--color-placeholder); }
.ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%); pointer-events: none; }
.ph--argent { background: var(--ph-argent); }
.ph--noir { background: var(--ph-noir); }
.ph--or { background: var(--ph-or); }
.ph--cuir { background: var(--ph-cuir); }
.ph--beton { background: var(--ph-beton); }
.ph--skin { background: var(--ph-skin); }
.ph--pierre { background: var(--ph-pierre); }

/* ---------- Picture ---------- */
.picture { display: block; position: relative; overflow: hidden; background: var(--color-placeholder); }
.picture img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Product card ----------
   Image principale et image de survol (.card__alt, 2e photo) occupent EXACTEMENT la même boîte : absolute inset 0,
   object-fit cover, ratio de la carte (4/5, carré en compact). Le survol fond l'alternative par-dessus (desktop, pointeur fin). */
.card { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.card__media { position: relative; display: block; aspect-ratio: var(--card-ratio); width: 100%; overflow: hidden; background: var(--color-placeholder); margin-bottom: var(--space-2); }
.card__media .picture, .card__media .ph, .card__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.card__media img { object-fit: cover; transition: transform var(--duration-slow) var(--easing), opacity 200ms var(--easing); }
.card__alt { opacity: 0; pointer-events: none; transition: opacity 200ms var(--easing); }   /* le fondu vit sur le <picture> qui porte l'opacité, pas sur l'img */
.card__badge { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 1; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 1px 3px rgba(0, 0, 0, .18); }
.card__name { font-weight: 500; font-size: var(--text-13); line-height: var(--leading-snug); }
.card__mat { font-size: var(--text-12); color: var(--color-muted); line-height: var(--leading-snug); }
.card a:hover { color: inherit; }
.card--compact .card__media { aspect-ratio: 1; }
.card--compact .card__name { font-weight: 400; }
/* Épuisé (« Victime de son succès ») : image en niveaux de gris sous un voile clair, libellé centré, carte inerte
   (aucun lien, aria-disabled, curseur par défaut), prix en gris. Partagé avec la mosaïque (.mcell--out). */
.card--out, .mcell--out { cursor: default; }
.card--out .card__media img, .mcell--out .mcell__media img, .card--out .card__media .ph, .mcell--out .mcell__media .ph { filter: grayscale(1); }
.card__veil { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-3); background: var(--color-veil); }
.card__veil-label { font-size: var(--text-10); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--color-ink); line-height: var(--leading-snug); }
.card--out .price, .mcell--out .price, .card--out .price__final, .mcell--out .price__final { color: var(--color-muted); }
.card--out .card__media:hover img, .mcell--out .mcell__media:hover img { transform: none; }

/* ---------- Price (seul rendu de prix du site) ---------- */
.price { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; font-weight: 500; font-variant-numeric: tabular-nums; line-height: var(--leading-snug); }
.price__ref { color: var(--color-muted-2); font-weight: 400; }
.price .badge { align-self: center; }   /* le badge se centre sur la hauteur des chiffres, quelle que soit la taille du prix */
.price__omnibus { flex-basis: 100%; font-size: var(--text-11); color: var(--color-muted); font-weight: 400; }
.price--sm { font-size: var(--text-13); }
.price__separate { flex-basis: 100%; font-size: var(--text-11); color: var(--color-muted); font-weight: 400; }   /* pack : valeur des pièces séparées */

/* ---------- Grille produits « content-first » : colonnes / gouttière / marges = tokens --grid-* (tokens.css), une seule définition ---------- */
.grid-products { display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); gap: var(--grid-row-gap) var(--grid-gutter); margin-inline: calc(var(--grid-margin) - var(--container-pad)); }
.grid-products .card__name, .grid-products .card__mat, .grid-products .price { padding-inline: var(--space-1); }
/* Squelette de la page suivante (collection suivante, recos) : une rangée de cartes fantômes, hauteur réservée pendant le fetch, aucun spinner. */
.skel { pointer-events: none; }
.skel__card { display: flex; flex-direction: column; gap: var(--space-2); }
.skel__media { aspect-ratio: var(--card-ratio); background: var(--color-placeholder); }
.skel__line { display: block; width: 60%; height: var(--space-3); border-radius: var(--radius-sm); background: var(--color-placeholder); }
.skel__line--short { width: 35%; }
/* Bloc de rebond (fin des recos / des collections) : titre serif, tuiles de familles en défilement horizontal sur mobile, lien Lookbook */
.rebound { padding-top: var(--space-12); padding-bottom: var(--space-4); }
.rebound__head { margin-bottom: var(--space-5); }
.rebound .ftiles { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--container-pad)); padding-inline: var(--grid-margin); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.rebound .ftiles::-webkit-scrollbar { display: none; }
.rebound .ftile { flex: 0 0 62vw; max-width: 300px; scroll-snap-align: start; }

/* ---------- Hero : plein écran (100svh − header), texte lisible sur dégradé ---------- */
.hero { position: relative; min-height: calc(100svh - var(--header-height)); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gutter) var(--space-8); color: var(--color-ink-inverse); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, var(--color-scrim)); }
.hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; max-width: 22ch; }
.hero__content .eyebrow { color: var(--color-accent-soft); }
.hero__title { font-family: var(--font-serif); font-weight: 400; letter-spacing: var(--serif-letter-spacing); font-size: var(--text-hero); line-height: var(--leading-tight); text-wrap: balance; }
.hero__title--md { font-size: var(--text-h1); }
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1); }
.hero--short { min-height: min(60svh, 480px); }

/* ---------- Footer sombre, aéré ---------- */
.foot { background: var(--color-ink); color: var(--color-ink-inverse); padding: var(--space-12) var(--gutter) var(--space-8); display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-16); }
.foot__brand { font-family: var(--font-serif); font-size: var(--text-34); line-height: 1; }
.foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.foot h2 { margin: 0 0 var(--space-3); font-size: var(--text-11); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-muted-2); font-weight: 600; }
.foot a { display: flex; align-items: center; min-height: var(--space-8); font-size: var(--text-15); color: var(--color-line); }
.foot a:hover { color: var(--color-ink-inverse); }
.foot__reassurance { list-style: none; margin: 0; padding: var(--space-6) 0 0; border-top: 1px solid var(--color-muted); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); font-size: var(--text-13); color: var(--color-line); }
.foot__legal { font-size: var(--text-11); color: var(--color-muted-2); line-height: var(--leading-loose); }
.foot__legal--brand { margin-top: var(--space-2); }

/* ---------- Utilitaires de page ---------- */
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-h3); line-height: 1.1; margin-top: var(--space-8); letter-spacing: var(--serif-letter-spacing); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-2); }
.prose p { line-height: var(--leading-loose); }
.spinner { width: 20px; height: 20px; border: 2px solid var(--color-line-strong); border-top-color: var(--color-ink); border-radius: 50%; animation: spin 900ms linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.fragment-loader { display: flex; justify-content: center; align-items: center; gap: var(--space-3); min-height: var(--space-24); padding: var(--space-8) var(--gutter); }
.fragment-loader:empty { display: none; }
.fragment-loader.fragment-skeleton { display: block; min-height: 0; max-width: var(--container-max); margin-inline: auto; padding: var(--space-8) var(--container-pad) 0; }
.recos__end { text-align: center; padding: var(--space-10) var(--gutter) var(--space-4); }
.crumbs { padding-top: var(--space-3); padding-bottom: var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a:hover { color: var(--color-ink); text-decoration: underline; }

/* ---------- Swiper (cœur seul) + repli natif avant initialisation ---------- */
.swiper { position: relative; overflow: hidden; z-index: 1; }
.swiper-wrapper { position: relative; width: 100%; display: flex; transition-property: transform; box-sizing: content-box; }
.swiper-slide { flex-shrink: 0; width: 100%; position: relative; transition-property: transform; }
.carousel:not(.is-ready) .swiper { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carousel:not(.is-ready) .swiper::-webkit-scrollbar { display: none; }
.carousel:not(.is-ready) .swiper-wrapper { gap: var(--grid-gutter); }
.carousel:not(.is-ready) .swiper-slide { width: calc((100% - var(--grid-gutter)) / 1.3); scroll-snap-align: start; }
.carousel--compact:not(.is-ready) .swiper-slide { width: calc((100% - var(--grid-gutter)) / 2.4); }

/* ---------- Carrousel : 1,3 slide mobile + puces (hauteur réservée), flèches desktop ---------- */
.carousel { position: relative; }
.carousel__nav { display: flex; justify-content: center; align-items: center; gap: var(--space-4); min-height: var(--space-8); margin-top: var(--space-2); }
.carousel__arrow { display: none; width: var(--tap); height: var(--tap); border: 1px solid var(--color-line-strong); border-radius: 50%; align-items: center; justify-content: center; background: var(--color-surface); color: var(--color-ink); }
.carousel__arrow:disabled { opacity: .35; cursor: default; }
.carousel__dots { display: flex; gap: var(--space-2); min-height: var(--space-3); align-items: center; }
.carousel__dot { width: 6px; height: 6px; border-radius: 3px; background: var(--color-line-strong); transition: width var(--duration) var(--easing), background var(--duration) var(--easing); }
.carousel__dot.is-on { width: 20px; background: var(--color-ink); }
.carousel--dark .carousel__arrow { background: transparent; color: var(--color-ink-inverse); border-color: var(--color-muted); }
.carousel--dark .carousel__dot { background: var(--color-muted); }
.carousel--dark .carousel__dot.is-on { background: var(--color-ink-inverse); }
.carousel--dark .card__mat, .carousel--dark .price__ref, .carousel--dark .price__omnibus { color: var(--color-muted-2); }
.carousel--dark .card a:hover { color: var(--color-ink-inverse); }

/* ---------- Accueil ---------- */
.fam-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 188px; gap: var(--grid-gutter); margin-inline: calc(var(--grid-margin) - var(--container-pad)); }
.fam-tile { display: flex; align-items: flex-end; padding: var(--space-4); color: var(--color-ink); }
.fam-tile:nth-child(1) { grid-row: span 2; }
.fam-tile:nth-child(4n) { grid-column: span 2; }
.fam-tile.ph--noir, .fam-tile.ph--pierre, .fam-tile.ph--skin, .fam-tile.ph--cuir { color: var(--color-ink-inverse); }
.fam-tile.ph--noir .fam-tile__sub, .fam-tile.ph--pierre .fam-tile__sub, .fam-tile.ph--skin .fam-tile__sub, .fam-tile.ph--cuir .fam-tile__sub { color: var(--color-accent-soft); }
.fam-tile__caption { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fam-tile__title { font-family: var(--font-serif); font-size: var(--text-22); line-height: 1; letter-spacing: var(--serif-letter-spacing); }
.fam-tile__sub { color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fam-tile:hover { color: inherit; }
.edito { position: relative; display: flex; align-items: flex-end; min-height: 420px; padding: var(--space-6) var(--gutter); color: var(--color-ink); }
.edito__caption { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.edito__title { font-size: var(--text-34); }
.edito__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.edito:hover { color: inherit; }
.band { background: var(--color-ink); color: var(--color-ink-inverse); padding: var(--space-8) 0; display: flex; flex-direction: column; gap: var(--space-4); }
.band__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); }
.band__lead { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.band__note { color: var(--color-muted-2); }
.band .link, .band .display { color: var(--color-ink-inverse); }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-4); align-items: end; }
.story__media { aspect-ratio: 3 / 4; }
.story__text { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.story__title { font-size: var(--text-h3); line-height: 1.05; }
.seo { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-8); }
.seo__title { font-size: var(--text-22); line-height: 1.1; font-weight: 400; letter-spacing: var(--serif-letter-spacing); }
.seo__more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; min-height: var(--space-8); }
.seo__more > summary::-webkit-details-marker { display: none; }
.seo__more[open] > summary { display: none; }
.seo__more > p { margin-top: var(--space-2); }

/* ---------- Collection : en-tête composé, chips sur une ligne, blocs ---------- */
.mosaic { display: grid; gap: var(--space-1); padding: var(--space-1); }
.mosaic--head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-auto-rows: 120px; }
.mosaic__tile { position: relative; overflow: hidden; }
.mosaic__tile--main { grid-row: span 2; display: flex; align-items: flex-end; padding: var(--space-4); }
.mosaic__tile--desktop { display: none; }
.mosaic__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaic__caption { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.col-head__title { font-size: var(--text-hero); line-height: .96; font-weight: 400; letter-spacing: var(--serif-letter-spacing); }
.col-head__intro { padding-top: var(--space-3); line-height: var(--leading-loose); }
.col-head__intro b { color: var(--color-ink); }
.col-head__intro--desktop { display: none; }
.chips { position: sticky; top: var(--header-offset); z-index: 5; background: var(--color-bg); border-bottom: 1px solid var(--color-line); height: 56px; padding: 0 0 0 var(--gutter); display: flex; align-items: center; gap: var(--space-2); }
.chips__scroller { display: flex; flex-wrap: nowrap; gap: var(--space-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; flex: 1; min-width: 0; padding: var(--space-1) var(--space-10) var(--space-1) 0; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.chips__scroller::-webkit-scrollbar { display: none; }
.block { padding-top: var(--space-8); }
.block--band, .block--image { padding-top: 0; margin-top: var(--space-10); }
.block__head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); max-width: 70ch; }
.block__title { font-size: var(--text-h2); }
.block__desc p { margin: 0; }
.callout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); background: var(--color-ink); color: var(--color-ink-inverse); border-radius: var(--radius); overflow: hidden; }
.callout--solo { display: flex; margin-top: var(--space-10); }
.callout__media { aspect-ratio: 3 / 4; }
.callout__body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); padding: var(--space-5); align-items: flex-start; }
.callout__eyebrow { color: var(--color-muted-2); }
.callout__title { font-size: var(--text-22); line-height: 1.05; }
.callout__text { color: var(--color-line); font-size: var(--text-13); }
.callout .link { color: var(--color-ink-inverse); }
.col-next { padding-top: var(--space-10); margin-top: var(--space-4); border-top: 1px solid var(--color-line); }
.col-next__head { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- Fiche produit ---------- */
.pdp__grid { display: grid; grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
.gallery { position: relative; }
.gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 4 / 5; position: relative; background: var(--color-placeholder); }
.gallery__slide .picture, .gallery__slide .ph, .gallery__slide img, .gallery__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery__zoom { position: absolute; inset: 0; width: 100%; height: 100%; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.gallery__ghost { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity 200ms var(--easing); }
.gallery__ghost.is-out { opacity: 0; }
.gallery__dots { position: absolute; left: 0; right: 0; bottom: var(--space-4); display: flex; justify-content: center; gap: var(--space-2); pointer-events: none; }
.gallery__dot { position: relative; width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); transition: width var(--duration) var(--easing); pointer-events: auto; }
.gallery__dot::before { content: ""; position: absolute; inset: -10px; }
.gallery__dot.is-on { width: 20px; background: var(--color-ink-inverse); }
.zoom { position: fixed; inset: 0; z-index: 70; background: var(--color-bg); overflow: auto; overscroll-behavior: contain; cursor: zoom-out; display: none; -webkit-overflow-scrolling: touch; }
.zoom.is-open { display: block; }
.zoom img { width: 200%; max-width: none; height: auto; }
.zoom__close { position: fixed; top: var(--space-2); right: var(--space-2); z-index: 1; width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--color-surface); color: var(--color-ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-float); }
.buy { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--gutter) 0; }
.buy__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.buy__head > div { min-width: 0; }
.buy__badges { display: flex; gap: var(--space-2); flex-shrink: 0; padding-top: var(--space-1); }
.buy__badges:empty { display: none; }
.buy__title { font-size: var(--text-h1); line-height: var(--leading-tight); font-weight: 400; margin-top: var(--space-1); letter-spacing: var(--serif-letter-spacing); text-wrap: balance; }
.buy__price .price { font-size: var(--text-22); }
.buy__price .price__ref { font-size: var(--text-15); }
.buy__short { font-size: var(--text-15); line-height: var(--leading-loose); }
.buy__btn { width: 100%; margin-top: var(--space-1); }
.buy__note { line-height: var(--leading-loose); }
.opt { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.opt__legend { display: flex; justify-content: space-between; width: 100%; padding: 0; }
.opt__guide { text-decoration: underline; text-underline-offset: 3px; }
.opt__values { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.opt__values--swatch { gap: var(--space-3); padding: var(--space-1) 0; }
.pill { height: var(--tap); min-width: 56px; padding: 0 var(--space-4); border: 1px solid var(--color-line-strong); border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-13); background: var(--color-surface); transition: background var(--duration) var(--easing), color var(--duration) var(--easing); }
.pill.is-on { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-ink-inverse); }
/* États d'une valeur (stratégie de rupture) : hidden = barrée, non sélectionnable · soldout = grisée (« épuisé » au survol) ·
   preorder = sélectionnable, pastille ambre (délai en title) */
.pill { position: relative; }
.pill.is-hidden, .sw.is-hidden { opacity: .35; cursor: not-allowed; }
.pill.is-hidden { text-decoration: line-through; }
.pill.is-soldout, .sw.is-soldout { opacity: .5; }
.pill.is-soldout { color: var(--color-muted); background: var(--color-bg); border-style: dashed; }
.pill.is-soldout.is-on { color: var(--color-ink-inverse); background: var(--color-muted); border-color: var(--color-muted); opacity: 1; }
.opt__mark { display: none; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-state-resupply); box-shadow: 0 0 0 2px var(--color-bg); }
.is-preorder .opt__mark { display: block; }
.sw { position: relative; width: 32px; height: 32px; margin: 4px; border-radius: 50%; border: 1px solid var(--color-line-strong); display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface); }
.sw::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.sw.is-hidden::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1.5px; background: var(--color-ink); transform: rotate(-45deg); }
.sw.is-on { outline: 1.5px solid var(--color-ink); outline-offset: 3px; }
.sw .opt__mark { top: -3px; right: -3px; }
.sw__dot { width: 20px; height: 20px; border-radius: 50%; background: var(--swatch, var(--color-placeholder)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.accs { display: flex; flex-direction: column; }
.acc { border-top: 1px solid var(--color-line); }
.acc:last-child { border-bottom: 1px solid var(--color-line); }
.acc > summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: var(--space-3) 0; font-size: var(--text-15); font-weight: 600; cursor: pointer; list-style: none; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--duration) var(--easing); margin: 0 var(--space-1) 4px 0; flex-shrink: 0; }
.acc[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.acc > *:not(summary) { padding-bottom: var(--space-5); }
.acc > .prose + .prose, .acc > .specs + .prose { padding-top: var(--space-1); }
.specs { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; line-height: var(--leading-snug); }
.specs dd { margin: 0; }
.sticky-cta { position: sticky; bottom: 0; z-index: 10; background: var(--color-bg); border-top: 1px solid var(--color-line); padding: var(--space-2) var(--space-4) max(var(--space-2), env(safe-area-inset-bottom)); display: flex; gap: var(--space-3); align-items: center; box-shadow: 0 -8px 24px rgba(0, 0, 0, .06); }
.sticky-cta__thumb { width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden; }
.sticky-cta__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sticky-cta__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sticky-cta__label { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Lookbook (fond sombre : on redéfinit les tokens de surface) ---------- */
.is-dark { --color-bg: var(--color-ink); --color-surface: var(--color-ink); --color-line: var(--color-muted); --color-line-strong: var(--color-muted); color: var(--color-ink-inverse); }
.is-dark .ann { background: #000; }
.is-dark .logo, .is-dark .nav-link, .is-dark .hdr__icon, .is-dark .menu, .is-dark .display, .is-dark a { color: var(--color-ink-inverse); }
.is-dark .submenu { background: var(--color-ink); }
.is-dark .eyebrow, .is-dark .muted { color: var(--color-muted-2); }
.lb-head { padding: var(--space-10) var(--gutter) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.lb-head__title { font-size: var(--text-hero); line-height: .96; }
.lb-head__lead { max-width: 36ch; }
.mosaic--lookbook { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; grid-auto-flow: dense; gap: var(--space-1); padding: 0 var(--space-1) var(--space-1); }
.mosaic--lookbook .mosaic__tile { margin: 0; }
.mosaic__tile--wide { grid-column: span 2; }
.mosaic__tile--tall { grid-row: span 2; }
.mosaic__tile--big { grid-column: span 2; grid-row: span 3; }
.mosaic__play { position: absolute; left: 50%; top: 50%; width: var(--tap); height: var(--tap); margin: -22px 0 0 -22px; border-radius: 50%; background: var(--color-overlay); display: flex; align-items: center; justify-content: center; }
.mosaic__play svg { width: 18px; height: 18px; fill: var(--color-ink-inverse); }
.hot { position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface); color: var(--color-ink); display: flex; align-items: center; justify-content: center; font-size: var(--text-17); line-height: 1; box-shadow: var(--shadow-float); z-index: 1; }
.hot::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.is-dark .hot { background: var(--color-ink-inverse); color: var(--color-ink); }
.mosaic--lookbook figcaption.mosaic__caption { position: absolute; left: var(--space-4); bottom: var(--space-4); }
.lb-foot { padding: var(--space-10) var(--gutter) var(--space-12); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.lb-foot__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Pages statiques (colonne de lecture 65 ch), aide, 404 ---------- */
.page { max-width: calc(var(--measure) + 2 * var(--gutter)); padding-top: var(--space-8); padding-bottom: var(--space-12); display: flex; flex-direction: column; gap: var(--space-6); }
.page__head { display: flex; flex-direction: column; gap: var(--space-3); }
.page__lead { max-width: 52ch; font-size: var(--text-17); line-height: var(--leading-loose); }
.page__quote { font-size: var(--text-22); line-height: 1.3; }
.page__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.page__duo-a, .page__duo-b { aspect-ratio: 3 / 4; }
.page__duo-b { margin-top: var(--space-8); }
.contact-box { background: var(--color-ink); color: var(--color-ink-inverse); border-radius: var(--radius); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.contact-box .display { color: var(--color-ink-inverse); }
.contact-box__note { color: var(--color-line); }
.help-cards { display: flex; flex-direction: column; gap: var(--space-2); }
.help-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); }
.help-card__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.help-panel { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); scroll-margin-top: calc(var(--header-offset) + var(--space-4)); }
.form { display: flex; flex-direction: column; gap: var(--space-3); }
.form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.label { font-size: var(--text-11); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.input { height: var(--input-height); border: 1px solid var(--color-line-strong); border-radius: var(--radius); padding: 0 var(--space-4); background: var(--color-surface); font: inherit; font-size: var(--text-input); color: var(--color-ink); width: 100%; -webkit-appearance: none; appearance: none; }
.input:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 0; border-color: var(--color-ink); }
.input:disabled { color: var(--color-muted-2); }
.steps { padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.form-type { border: 1px dashed var(--color-line-strong); padding: var(--space-4); border-radius: var(--radius); }
.form-type p + p { margin-top: var(--space-3); }
.err404 { padding: var(--space-16) var(--gutter); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; max-width: 60ch; min-height: calc(100svh - var(--header-height) - var(--ann-height)); }
.err404__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.err404__cats { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Offres / habillages ---------- */
.offer-hero__end .countdown { font-variant-numeric: tabular-nums; font-weight: 700; }
.offer-hero { overflow: hidden; }
.offer-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offer-hero__end { align-self: center; font-size: var(--text-11); letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-inverse); }
.offer-popup { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.offer-popup__overlay { position: absolute; inset: 0; background: var(--color-overlay); }
.offer-popup__box { position: relative; background: var(--color-bg); width: 100%; max-width: 380px; padding: var(--space-8) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); text-align: center; box-shadow: var(--shadow-menu); border-radius: var(--radius); }
.offer-popup__close { position: absolute; top: var(--space-1); right: var(--space-1); width: var(--tap); height: var(--tap); display: flex; align-items: center; justify-content: center; color: var(--color-ink); }
.offer-popup__close .ico { width: 20px; height: 20px; }
.offer-popup__title { font-size: var(--text-34); line-height: 1; margin: 0; }
.offer-popup__wording { background: var(--color-accent); color: var(--color-ink-inverse); font-weight: 700; font-size: var(--text-15); padding: var(--space-3); letter-spacing: .06em; text-transform: uppercase; }
.offer-popup__other { text-decoration: underline; min-height: var(--space-8); }

/* ---------- Drawer panier ---------- */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(100%, var(--drawer-width)); background: var(--color-bg); transform: translateX(100%); transition: transform var(--duration-slow) var(--easing); box-shadow: -16px 0 40px var(--color-shadow); display: flex; flex-direction: column; will-change: transform; }
.drawer.is-open { transform: none; }
.drawer__body { display: flex; flex-direction: column; min-height: 100%; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; height: var(--header-height); padding: 0 var(--space-2) 0 var(--gutter); border-bottom: 1px solid var(--color-line); flex-shrink: 0; }
.drawer__spacer { width: var(--tap); }
.drawer__title { font-size: var(--text-22); letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }
.drawer__error, .drawer__flash { background: var(--color-state-out-bg); color: var(--color-state-out); font-size: var(--text-13); padding: var(--space-3) var(--gutter); }
.drawer__flash { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
.drawer__empty { padding: var(--space-8) var(--gutter); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.drawer__empty-title { font-size: var(--text-28); line-height: 1.1; }
.drawer__lines { padding: var(--space-4) var(--gutter); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.drawer__foot { padding: var(--space-3) var(--gutter) max(var(--space-5), env(safe-area-inset-bottom)); border-top: 1px solid var(--color-line); display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-bg); }
.drawer__foot .btn { width: 100%; }
.drawer__totals { display: flex; flex-direction: column; gap: var(--space-1); }
.drawer__subtotal { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.drawer__subtotal--line { color: var(--color-muted); }
.drawer__subtotal--total { border-top: 1px solid var(--color-line); margin-top: var(--space-1); padding-top: var(--space-2); }
.drawer__subtotal--total .price__final { font-size: var(--text-22); font-weight: 600; }
.drawer__subtotal-label { font-size: var(--text-12); letter-spacing: .08em; text-transform: uppercase; }
.drawer__subtotal--total .drawer__subtotal-label { color: var(--color-ink); font-weight: 600; }
.accent-bar { background: var(--color-accent); color: var(--color-ink-inverse); font-size: var(--text-12); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.accent-bar--ok { background: var(--color-state-ok); }
.accent-bar b { font-weight: 700; }
.tiers { padding: var(--space-3) var(--gutter); background: var(--color-accent-bg); display: flex; flex-direction: column; gap: var(--space-2); }
.tiers__labels { display: grid; text-align: center; font-size: var(--text-11); letter-spacing: .06em; text-transform: uppercase; line-height: var(--leading-snug); }
.tiers__labels b { display: block; }
.tiers__track { height: 8px; background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: 4px; position: relative; }
.tiers__track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-accent); border-radius: 4px; transition: width var(--duration-slow) var(--easing); }
.tiers__track u { position: absolute; top: -1px; bottom: -1px; width: 1px; background: var(--color-line-strong); text-decoration: none; }
/* Lignes compactes (Review n°3) : vignette 64 px, nom 13 px, variante 12 px, quantité et prix sur la même ligne, écrin 12 px, 12 px entre lignes */
.cline { display: flex; gap: var(--space-3); }
.cline--off { opacity: .55; }
.cline__media { width: 64px; flex-shrink: 0; }
.cline__media .picture, .cline__media .ph { width: 64px; height: 80px; border-radius: var(--radius-sm); }
.cline__media img { width: 64px; height: 80px; object-fit: cover; }
.cline__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cline__top { display: flex; justify-content: space-between; gap: var(--space-2); }
.cline__name { font-weight: 500; line-height: var(--leading-snug); }
.cline__var { font-size: var(--text-12); line-height: var(--leading-snug); }
.cline__parts { list-style: none; margin: 0; padding: 0; line-height: var(--leading-snug); }   /* pièces d'un pack */
.cline__remove { position: relative; color: var(--color-muted-2); display: inline-flex; margin: -4px -4px 0 0; padding: var(--space-1); }
.cline__remove::before { content: ""; position: absolute; inset: -10px; }
.cline__msg { color: var(--color-state-out); font-weight: 500; }
.cline__row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: var(--space-1); }
.cline__gift { display: flex; align-items: center; gap: var(--space-2); min-height: var(--space-6); font-size: var(--text-12); }
.cline__gift input { width: 14px; height: 14px; margin: 0; accent-color: var(--color-ink); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--color-line-strong); height: 32px; border-radius: var(--radius); background: var(--color-surface); }
.qty button, .qty span { width: 32px; height: 30px; text-align: center; font-size: var(--text-13); line-height: 30px; }
.qty button { position: relative; }
.qty button::before { content: ""; position: absolute; inset: -7px 0; }
.qty button:disabled { color: var(--color-muted-2); cursor: default; }
/* Code promo : une ligne compacte 13 px sur fond très léger (laiton = codes), sans titre ni sous-titre */
.codebox { background: var(--color-accent-bg); border-top: 1px solid var(--color-line); padding: var(--space-2) var(--gutter); display: flex; flex-direction: column; gap: 2px; }
.codebox__l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-1); font-size: var(--text-13); line-height: var(--leading-snug); }
.codebox__code { color: var(--color-accent); }
.codebox__remove { display: inline; }
.codebox__remove button { text-decoration: underline; text-underline-offset: 3px; font-size: var(--text-11); min-height: var(--space-6); color: var(--color-muted); }
.codebox__amount { font-weight: 600; }
.codebox__note { line-height: var(--leading-snug); }
.codebox__details > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; min-height: var(--space-8); }
.codebox__details > summary::-webkit-details-marker { display: none; }
.codebox__form { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.codebox__form .input { height: var(--btn-height-sm); min-width: 0; }
form.is-busy { opacity: .6; pointer-events: none; }

.field--error .input { border-color: var(--color-state-out); }
.field__error { color: var(--color-state-out); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
  .spinner { animation: none; border-top-color: var(--color-line-strong); }
}

/* ---------- Pointeur fin : effets de survol ---------- */
@media (hover: hover) and (pointer: fine) {
  .card__media:hover img { transform: scale(1.03); }
  .card--hover .card__media:hover .card__alt { opacity: 1; }
}

/* =====================================================================
   Desktop (≥ 960 px)
   ===================================================================== */
@media (min-width: 960px) {
  .section { padding-top: var(--space-24); }
  .hdr__inner { height: var(--header-height-desktop); padding: 0 var(--space-12); }
  .hdr__burger { display: none; }
  .hdr__nav { display: flex; gap: var(--space-8); align-items: center; }
  .hdr__inner .hdr__histoire { display: inline-flex; }
  .hdr__right { gap: var(--space-4); }
  .logo { font-size: var(--text-28); }
  .card__name { font-size: var(--text-15); }
  .hero { min-height: calc(100svh - var(--header-height-desktop)); max-height: 900px; padding: 0 var(--gutter-desktop) var(--gutter-desktop); }
  .hero__content { max-width: 32ch; }
  .hero__title { line-height: .94; }
  .hero::after { background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 55%, var(--color-scrim)); }
  .foot { padding: var(--gutter-desktop); display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--space-10); margin-top: var(--space-24); }
  .foot__cols { display: contents; }
  .foot__brand { font-size: var(--text-42); }
  .foot__reassurance { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: var(--space-6); }
  .foot__legal { grid-column: 1 / -1; }
  .fragment-loader { padding: var(--space-16) var(--gutter-desktop); }
  .rebound { padding-top: var(--space-24); }
  .rebound .ftiles { display: grid; overflow: visible; margin-inline: 0; padding-inline: 0; gap: var(--space-2); }
  .rebound .ftile { flex: none; max-width: none; }
  .carousel__arrow { display: inline-flex; }
  .carousel__nav { position: absolute; top: calc(-1 * var(--space-16)); right: 0; margin: 0; min-height: 0; }
  .carousel__dots { display: none; }
  .fam-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 300px; margin-inline: 0; }
  .fam-tile { padding: var(--space-6); }
  .fam-tile:nth-child(4n) { grid-column: auto; }
  .fam-tile:nth-child(1) { grid-row: span 2; }
  .edito { min-height: 520px; padding: var(--gutter-desktop); }
  .edito__title { font-size: var(--text-h1); }
  .band { padding: var(--space-12) 0; gap: var(--space-5); }
  .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: center; }
  .story__title { font-size: var(--text-h2); }
  .seo__title { font-size: var(--text-h3); }
  .mosaic--head { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 170px; gap: var(--space-2); padding: var(--space-2) var(--space-2) 0; }
  .mosaic__tile--main { padding: var(--space-8); }
  .mosaic__tile--desktop { display: block; }
  .col-head__title { line-height: .92; }
  .col-head__intro--desktop { display: block; max-width: 52ch; padding-top: var(--space-2); }
  .col-head__intro--mobile { display: none; }
  .chips { padding: 0 var(--gutter-desktop); height: 64px; }
  .chips__scroller { mask-image: none; -webkit-mask-image: none; padding-right: 0; }
  .block { padding-top: var(--space-12); }
  .block--band, .block--image { margin-top: var(--space-16); }
  .callout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .callout__media { aspect-ratio: 16 / 9; }
  .callout__body { padding: 0 var(--gutter-desktop); gap: var(--space-4); }
  .callout__title { font-size: var(--text-h1); }
  .callout__text { font-size: var(--text-15); }
  .col-next { padding-top: var(--space-16); }
  .pdp__grid { grid-template-columns: minmax(0, 1.3fr) 420px; gap: var(--space-16); padding: var(--space-4) var(--gutter-desktop) 0; align-items: start; }
  .gallery__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); overflow: visible; }
  .gallery__slide { aspect-ratio: 4 / 5; }
  .gallery__slide:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .gallery__dots { display: none; }
  .buy { position: sticky; top: calc(var(--header-offset) + var(--space-6)); padding: 0; gap: var(--space-4); }
  .buy__title { line-height: .95; margin-top: var(--space-2); }
  .buy__price .price { font-size: var(--text-28); }
  .sticky-cta { display: none; }
  .lb-head { padding: var(--space-16) var(--gutter-desktop) var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: end; }
  .lb-head__title { line-height: .9; }
  .mosaic--lookbook { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 220px; gap: var(--space-2); padding: 0 var(--space-2) var(--space-2); }
  .mosaic__tile--big { grid-column: span 3; }
  .lb-foot { flex-direction: row; justify-content: space-between; align-items: center; padding: var(--gutter-desktop); }
  .page { padding-top: var(--space-12); padding-bottom: var(--space-24); }
  .help-cards { flex-direction: row; }
  .help-card { flex: 1; }
  .err404 { padding: var(--space-24) var(--gutter-desktop); min-height: 0; }
  .zoom img { width: 100%; }
}
/* Bannière de consentement (mode banner) : fixe en bas, deux choix au même niveau, inline sur /consentement */
.consent { position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: 60; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0,0,0,.14); max-width: 560px; margin: 0 auto; }
.consent--inline { position: static; box-shadow: none; margin-top: var(--space-6); }
.consent__body p { margin: 0 0 var(--space-1); }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }