/* Maison Kôssi (marque fictive) — feuille commune. Organisation : reset, tokens, base, layout, components, utilities, pages.
   Les styles propres à une page vivent dans accueil.css, boutique.css, produit.css, commande.css, confirmation.css, lookbook.css, histoire.css, aide.css et legal.css (chargées après celle-ci). */
@layer reset, tokens, base, layout, components, utilities, pages;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, video, picture { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  a { color: inherit; }
  ul[role="list"], ol[role="list"], :where(ul, ol)[class]:not(.detail-list) { list-style: none; padding: 0; }
  :where(h1, h2, h3, h4) { text-wrap: balance; }
  :where(p, li) { text-wrap: pretty; }
  [hidden] { display: none !important; }
  table { border-collapse: collapse; }
}

@layer tokens {
  :root {
    --color-creme: #F7EDDC; --color-papier: #FFFAF1; --color-sable: #EBDDC3;
    --color-encre: #1C1B2B; --color-doux: #5B556A; --color-sur-indigo: #C9C2D2;
    --color-indigo: #1B275F; --color-indigo-clair: #2B3A80; --color-nuit: #111A44;
    --color-or: #EAB532; --color-or-pale: #F6DDA0; --color-ocre: #8A5A00;
    --color-rouille: #AD4216; --color-rouille-fonce: #8E3410; --color-rouille-pale: #F5DCCB;
    --color-vert: #036639; --color-vert-pale: #D7EBDD; --color-erreur: #A3261B; --color-erreur-pale: #F8DDD9;
    --color-ligne: #8F826E; --color-ligne-deco: #D8C7A8;
    --font-display: Unbounded, "Arial Black", system-ui, sans-serif;
    --font-body: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --fs-small: 0.875rem;
    --fs-h1: clamp(2rem, 1.3rem + 3.4vw, 3.75rem);
    --fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
    --fs-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
    --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
    --radius: 0.5rem; --radius-lg: 1rem;
    --arch: 50% 50% 0.5rem 0.5rem / 40% 40% 0.5rem 0.5rem;
    --shadow-warm: 0 12px 32px oklch(0.3 0.05 60 / 0.12);
    --shadow-pop: 0 18px 48px oklch(0.25 0.06 270 / 0.28);
    --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 300ms; --dur-4: 500ms;
    --header-h: 4.5rem;
    --selvedge: repeating-linear-gradient(90deg, var(--color-indigo) 0 28px, var(--color-or) 28px 36px, var(--color-rouille) 36px 44px, var(--color-vert) 44px 52px, var(--color-or) 52px 56px);
  }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + 1rem); }
  body {
    background: var(--color-creme); color: var(--color-encre); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6;
    min-block-size: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; overflow-x: clip;
  }
  main { flex: 1 0 auto; }
  h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; }
  h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.03em; }
  h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.025em; }
  h3 { font-size: var(--fs-h3); }
  p + p { margin-block-start: var(--s-4); }
  a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  a:not([class]) { color: var(--color-indigo); }
  a:not([class]):hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 2px solid var(--color-indigo); outline-offset: 3px; border-radius: 3px; }
  .on-dark :focus-visible, .site-footer :focus-visible, .announce :focus-visible { outline-color: var(--color-or); }
  ::selection { background: var(--color-or-pale); }
  .visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip { position: fixed; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 300; padding: 0.75rem 1.25rem; background: var(--color-indigo); color: var(--color-creme); border-radius: 999px; font-weight: 700; transform: translateY(-200%); }
  .skip:focus { transform: none; }
  img { background: var(--color-sable); }
}

@layer layout {
  .wrap { inline-size: min(100% - 2 * var(--gutter), 80rem); margin-inline: auto; }
  .wrap--narrow { inline-size: min(100% - 2 * var(--gutter), 52rem); margin-inline: auto; }
  .section { padding-block: var(--s-7); }
  @media (min-width: 48em) { .section { padding-block: var(--s-8); } }
  @media (min-width: 64em) { .section { padding-block: var(--s-9); } }
  .section--sable { background: var(--color-sable); }
  .section--indigo { background: var(--color-indigo); color: var(--color-creme); }
  .section--papier { background: var(--color-papier); }
  .section--tight { padding-block: var(--s-6); }
  .section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-block-end: var(--s-6); }
  .section-head h2 { max-inline-size: 22ch; }
  .section-head p { max-inline-size: 46ch; color: var(--color-doux); }
  .section--indigo .section-head p { color: var(--color-sur-indigo); }
  .split > *, .grid-2 > *, .grid-3 > *, .atelier-grid > *, .cart-layout > *, .checkout > *, .pdp > *, .shop-layout > *, .confirm-grid > *, .month > *, .glow > *, .hero__grid > *, .look > * { min-inline-size: 0; }
  .stack > * + * { margin-block-start: var(--stack, var(--s-4)); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--s-3)); align-items: center; }
  .measure { max-inline-size: 68ch; }
  .split { display: grid; gap: var(--s-6); }
  @media (min-width: 48em) { .split { grid-template-columns: repeat(12, 1fr); align-items: center; gap: var(--s-6) var(--s-5); } .split > :first-child { grid-column: span 5; } .split > :last-child { grid-column: 7 / -1; } .split--rev > :first-child { grid-column: 8 / -1; order: 2; } .split--rev > :last-child { grid-column: 1 / 7; order: 1; } }
}

@layer components {
  /* ---------- Textes ---------- */
  .eyebrow { font-family: var(--font-display); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ocre); margin-block-end: var(--s-3); display: block; }
  .section--indigo .eyebrow, .on-dark .eyebrow, .tile-lb .eyebrow { color: var(--color-or); }
  .section--sable .eyebrow { color: var(--color-rouille-fonce); }
  .tile-title { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; max-inline-size: 16ch; margin-block-end: var(--s-3); }
  .h-sm { font-size: 1.5rem; }
  .lede { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3rem); line-height: 1.55; color: var(--color-doux); max-inline-size: 52ch; }
  .muted { color: var(--color-doux); }
  .small { font-size: var(--fs-small); }
  .num { font-variant-numeric: tabular-nums; }
  .prose { max-inline-size: 68ch; }
  .prose > * + * { margin-block-start: var(--s-4); }
  .prose h2, .prose h3 { margin-block-start: var(--s-6); }
  .prose h2 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem); }
  .prose ul, .prose ol { padding-inline-start: 1.25rem; } .prose li + li { margin-block-start: var(--s-2); }

  /* ---------- Boutons ---------- */
  .btn { --_bg: var(--color-indigo); --_fg: var(--color-creme); --_bd: var(--color-indigo); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-block-size: 3rem; padding: 0.7rem 1.5rem; border-radius: 999px; border: 2px solid var(--_bd); background: var(--_bg); color: var(--_fg); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center; transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2), scale var(--dur-1), box-shadow var(--dur-2); }
  .btn:hover { --_bg: var(--color-indigo-clair); --_bd: var(--color-indigo-clair); }
  .btn:active { scale: 0.97; }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; scale: 1; }
  .btn--ghost { --_bg: transparent; --_fg: var(--color-indigo); } .btn--ghost:hover { --_bg: var(--color-indigo); --_fg: var(--color-creme); }
  .btn--gold { --_bg: var(--color-or); --_fg: var(--color-encre); --_bd: var(--color-or); } .btn--gold:hover { --_bg: #F2C455; --_bd: #F2C455; }
  .btn--light { --_bg: var(--color-creme); --_fg: var(--color-indigo); --_bd: var(--color-creme); } .btn--light:hover { --_bg: var(--color-papier); --_bd: var(--color-papier); }
  .btn--outline-light { --_bg: transparent; --_fg: var(--color-creme); --_bd: color-mix(in srgb, var(--color-creme) 55%, transparent); } .btn--outline-light:hover { --_bg: var(--color-creme); --_fg: var(--color-indigo); --_bd: var(--color-creme); }
  .btn--wa { --_bg: transparent; --_fg: var(--color-vert); --_bd: var(--color-vert); } .btn--wa:hover { --_bg: var(--color-vert); --_fg: #fff; --_bd: var(--color-vert); }
  .btn--sm { min-block-size: 2.5rem; padding: 0.4rem 1rem; font-size: 0.9375rem; }
  .btn--block { inline-size: 100%; }
  .btn svg, .link-btn svg { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
  .link-btn { display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 2.75rem; font-weight: 700; color: var(--color-indigo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
  .link-btn:hover { text-decoration-thickness: 2px; }
  .link-arrow::after { content: "→"; transition: translate var(--dur-2) var(--ease-out); display: inline-block; margin-inline-start: 0.35em; }
  .link-arrow:hover::after { translate: 4px 0; }
  .icon { inline-size: 1.5rem; block-size: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .icon-btn { position: relative; display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; color: inherit; text-decoration: none; transition: background var(--dur-2), scale var(--dur-1); }
  .icon-btn:hover { background: color-mix(in srgb, var(--color-indigo) 9%, transparent); } .icon-btn:active { scale: 0.94; }

  /* ---------- En-tête ---------- */
  .site-header { position: sticky; inset-block-start: 0; z-index: 60; background: var(--color-creme); box-shadow: 0 1px 0 var(--color-ligne-deco); transition: box-shadow var(--dur-3); }
  .announce { background: var(--color-indigo); color: var(--color-creme); font-size: 0.8125rem; line-height: 1.35; }
  .announce__in { display: flex; align-items: center; justify-content: center; gap: var(--s-3); min-block-size: 2.5rem; padding-block: 0.25rem; text-align: center; }
  .announce p { margin: 0; } .announce__long { display: none; }
  .announce button, .announce a { color: var(--color-or); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; min-block-size: 2rem; display: inline-flex; align-items: center; white-space: nowrap; }
  @media (min-width: 30em) { .announce__short { display: none; } .announce__long { display: inline; } .announce { font-size: 0.875rem; } }
  .site-header.is-compact .announce { display: none; }
  .selvedge { block-size: 4px; background: var(--selvedge); }
  .selvedge-lg { display: block; inline-size: 100%; block-size: 24px; }
  .selvedge-lg--thin { block-size: 24px; }
  .svg-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
  .header-row { display: flex; align-items: center; gap: var(--s-2); min-block-size: var(--header-h); }
  .logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--color-indigo); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.9375rem; line-height: 1; min-block-size: 3rem; white-space: nowrap; }
  .logo svg { inline-size: 2rem; block-size: 2rem; flex: none; }
  .header-spacer { flex: 1; }
  .nav { display: none; }
  .nav ul { display: flex; gap: var(--s-1); list-style: none; padding: 0; }
  .nav a { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.55rem; white-space: nowrap; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.9375rem; color: var(--color-encre); transition: background var(--dur-2); }
  .nav a:hover { background: color-mix(in srgb, var(--color-indigo) 9%, transparent); }
  .nav a[aria-current] { color: var(--color-indigo); box-shadow: inset 0 -3px 0 var(--color-or); border-radius: 0; }
  .header-actions { display: flex; align-items: center; gap: 0; margin-inline-start: auto; }
  .menu-btn { margin-inline-start: -0.6rem; }
  .header-row > .icon-btn, .header-actions > .icon-btn, .header-actions > a { flex: none; }
  @media (max-width: 29.99em) { .header-row { gap: 0.25rem; } .logo { font-size: 0.8125rem; letter-spacing: 0.03em; gap: 0.45rem; } .logo svg { inline-size: 1.75rem; block-size: 1.75rem; } .header-row .icon-btn { inline-size: 2.75rem; block-size: 2.75rem; } }
  @media (max-width: 22.49em) { .logo { font-size: 0.75rem; letter-spacing: 0.02em; } .header-row .icon-btn { inline-size: 2.5rem; block-size: 2.5rem; } .header-actions [data-js="wish-link"] { display: none; } }
  .count { position: absolute; inset-block-start: 0.1rem; inset-inline-end: 0; min-inline-size: 1.25rem; block-size: 1.25rem; padding-inline: 0.3rem; border-radius: 999px; background: var(--color-rouille); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1.25rem; text-align: center; }
  .count[hidden] { display: none; }
  .count.is-pulse { animation: pulse var(--dur-2) var(--ease-out); }
  @keyframes pulse { 40% { scale: 1.35; } }
  .market-btn { display: none; align-items: center; gap: 0.4rem; min-block-size: 2.75rem; padding-inline: 0.85rem; border: 1.5px solid var(--color-ligne); border-radius: 999px; font-weight: 600; font-size: 0.875rem; background: var(--color-papier); white-space: nowrap; transition: border-color var(--dur-2), background var(--dur-2); }
  .market-btn:hover { border-color: var(--color-indigo); }
  .market-btn .icon { inline-size: 1.125rem; block-size: 1.125rem; }
  .search { position: relative; display: none; }
  .search input { inline-size: 11rem; min-block-size: 2.75rem; padding: 0.5rem 1rem 0.5rem 2.6rem; border: 1.5px solid var(--color-ligne); border-radius: 999px; background: var(--color-papier); transition: inline-size var(--dur-3) var(--ease-out), border-color var(--dur-2); }
  .search input:focus { inline-size: 15rem; border-color: var(--color-indigo); outline-offset: 2px; }
  .search .icon { position: absolute; inset-inline-start: 0.8rem; inset-block-start: 50%; translate: 0 -50%; inline-size: 1.25rem; block-size: 1.25rem; pointer-events: none; color: var(--color-doux); }
  .search.is-open { display: block; position: absolute; inset-inline: 0; inset-block-start: 100%; padding: var(--s-3) var(--gutter); background: var(--color-creme); box-shadow: var(--shadow-warm); }
  .search.is-open input { inline-size: 100%; }
  .search.is-open .icon { inset-inline-start: calc(var(--gutter) + 0.8rem); }
  .search-toggle { display: none; }
  .js .search-toggle { display: inline-grid; } .js .search:not(.is-open) { display: none; }
  @media (min-width: 100em) { .search, .js .search:not(.is-open) { display: block; } .js .search-toggle { display: none; } .search input { inline-size: 10rem; } .search input:focus { inline-size: 14rem; } }
  @media (min-width: 64em) {
    .nav { display: block; } .menu-btn { display: none; } .market-btn { display: inline-flex; }
    .header-actions { margin-inline-start: 0; }
    .header-spacer { flex: 1; }
    .logo { margin-inline-end: var(--s-4); }
  }
  @media (max-width: 63.99em) { .market-btn-m { display: inline-grid; } .nav-inline-fallback { display: none; } }
  @media (min-width: 64em) { .market-btn-m { display: none; } }
  .no-js-nav { display: block; }
  .js .no-js-nav { display: none; }
  /* Menu mobile */
  .menu-panel { position: fixed; inset: 0; z-index: 90; background: var(--color-indigo); color: var(--color-creme); padding: calc(var(--header-h) + 3rem) var(--gutter) var(--s-6); overflow-y: auto; visibility: hidden; opacity: 0; translate: 0 -1rem; transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out), visibility 0s var(--dur-3); }
  .menu-panel.is-open { visibility: visible; opacity: 1; translate: 0; transition-delay: 0s; }
  .menu-panel ul { list-style: none; padding: 0; display: grid; gap: 0; }
  .menu-panel a { color: var(--color-creme); display: flex; align-items: center; justify-content: space-between; min-block-size: 3.5rem; font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; text-decoration: none; border-block-end: 1px solid color-mix(in srgb, var(--color-creme) 18%, transparent); }
  .menu-panel a::after { content: "→"; color: var(--color-or); }
  .menu-panel .menu-foot { margin-block-start: var(--s-5); display: grid; gap: var(--s-3); color: var(--color-sur-indigo); font-size: var(--fs-small); }
  .menu-open .site-header { z-index: 100; background: transparent; box-shadow: none; }
  .menu-open .site-header .logo, .menu-open .site-header .icon-btn { color: var(--color-creme); }
  .menu-open .site-header .announce, .menu-open .site-header .selvedge { visibility: hidden; }
  .menu-open .site-header .header-row > :not(.menu-btn):not(.logo):not(.header-spacer) { visibility: hidden; }
  .menu-open { overflow: hidden; }
  .noscript-nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); padding-block: var(--s-2); font-size: 0.9375rem; }
  .noscript-nav a { min-block-size: 2.75rem; display: inline-flex; align-items: center; font-weight: 600; text-decoration: none; }

  /* ---------- WhatsApp flottant ---------- */
  .wa-float { position: fixed; z-index: 55; inset-inline-end: 1rem; inset-block-end: calc(1rem + env(safe-area-inset-bottom)); display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; background: var(--color-vert); color: #fff; box-shadow: var(--shadow-warm); transition: scale var(--dur-2) var(--ease-out); }
  .wa-float:hover { scale: 1.07; } .wa-float:active { scale: 0.95; }
  .wa-float svg { inline-size: 1.75rem; block-size: 1.75rem; }
  /* Bandeau du kit de démonstration présent (classe posée par main.js, moins coûteuse qu'un :has() sur tout le document) : le bouton flotte au-dessus. */
  .demo-badge-on .wa-float { inset-block-end: calc(9.25rem + env(safe-area-inset-bottom)); }
  @media (min-width: 35em) { .demo-badge-on .wa-float { inset-block-end: 6.5rem; } }
  .has-buybar .wa-float { display: none; }

  /* ---------- Pied de page ---------- */
  .site-footer { background: var(--color-indigo); color: var(--color-creme); margin-block-start: var(--s-9); }
  main:has(> .section:last-child) + .site-footer, main:has(> section:last-child[class*="section"]) + .site-footer { margin-block-start: 0; }
  .site-footer a { color: inherit; }
  .reassure { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); padding-block: var(--s-6); border-block-end: 1px solid color-mix(in srgb, var(--color-creme) 20%, transparent); }
  @media (min-width: 48em) { .reassure { grid-template-columns: repeat(4, 1fr); } }
  .reassure li { list-style: none; display: grid; gap: var(--s-1); }
  .reassure strong { font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; }
  .reassure span { color: var(--color-sur-indigo); font-size: var(--fs-small); }
  .foot-news { padding-block: var(--s-7); border-block-end: 1px solid color-mix(in srgb, var(--color-creme) 20%, transparent); display: grid; gap: var(--s-5); }
  @media (min-width: 48em) { .foot-news { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-8); } }
  .foot-news h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); }
  .foot-cols { display: grid; gap: var(--s-6) var(--s-5); padding-block: var(--s-7); grid-template-columns: 1fr 1fr; }
  @media (min-width: 64em) { .foot-cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
  .foot-cols > :first-child { grid-column: 1 / -1; } @media (min-width: 64em) { .foot-cols > :first-child { grid-column: auto; } }
  .foot-cols h2 { font-family: var(--font-display); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-or); margin-block-end: var(--s-3); }
  .foot-cols ul { list-style: none; padding: 0; display: grid; gap: 0; }
  .foot-cols li a { display: inline-flex; align-items: center; min-block-size: 2.5rem; text-decoration: none; color: var(--color-sur-indigo); } .foot-cols li a:hover { color: #fff; text-decoration: underline; }
  .foot-cols address { font-style: normal; color: var(--color-sur-indigo); font-size: 0.9375rem; line-height: 1.6; }
  .status { display: inline-flex; align-items: center; gap: 0.5rem; margin-block-start: var(--s-3); font-weight: 600; font-size: 0.9375rem; }
  .status::before { content: ""; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--color-sur-indigo); }
  .status[data-open="1"]::before { background: #6FD39B; }
  .pay-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-block: var(--s-5); border-block-start: 1px solid color-mix(in srgb, var(--color-creme) 20%, transparent); }
  .pay-pills li { list-style: none; padding: 0.3rem 0.8rem; border: 1px solid color-mix(in srgb, var(--color-creme) 35%, transparent); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--color-sur-indigo); }
  .foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-block: var(--s-5) var(--s-8); background: var(--color-nuit); font-size: 0.8125rem; color: var(--color-sur-indigo); }
  .foot-base-wrap { background: var(--color-nuit); }
  .foot-base p { margin: 0; max-inline-size: 60ch; } .foot-base a { color: var(--color-or); }
  .foot-lite { background: var(--color-nuit); color: var(--color-sur-indigo); font-size: 0.8125rem; padding-block: var(--s-5) var(--s-8); margin-block-start: var(--s-8); }
  .foot-lite a { color: var(--color-or); }

  /* ---------- Formulaires ---------- */
  .field { display: grid; gap: 0.35rem; align-content: start; }
  .field > label, .field > legend, .label { font-weight: 600; font-size: 0.9375rem; }
  .field .opt { font-weight: 400; color: var(--color-doux); }
  .field .hint { font-size: var(--fs-small); color: var(--color-doux); }
  .input, .select, .textarea { inline-size: 100%; min-block-size: 3rem; padding: 0.6rem 0.9rem; border: 1.5px solid var(--color-ligne); border-radius: var(--radius); background: var(--color-papier); transition: border-color var(--dur-2), box-shadow var(--dur-2); }
  .textarea { min-block-size: 7rem; resize: vertical; }
  .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1B2B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25rem; padding-inline-end: 2.5rem; }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--color-encre); }
  .input:focus, .select:focus, .textarea:focus { border-color: var(--color-indigo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-indigo) 22%, transparent); outline: none; }
  .field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea, .input[aria-invalid="true"] { border-color: var(--color-erreur); background: #FFF6F4; }
  .field__error { display: none; align-items: flex-start; gap: 0.4rem; color: var(--color-erreur); font-size: var(--fs-small); font-weight: 600; }
  .field.is-invalid .field__error { display: flex; }
  .field__error::before { content: "!"; flex: none; display: grid; place-items: center; inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: 0.1rem; border-radius: 50%; background: var(--color-erreur); color: #fff; font-size: 0.75rem; }
  .check { display: flex; align-items: flex-start; gap: 0.7rem; min-block-size: 2.75rem; padding-block: 0.4rem; cursor: pointer; font-size: 0.9375rem; }
  .check input { flex: none; inline-size: 1.4rem; block-size: 1.4rem; margin-block-start: 0.1rem; accent-color: var(--color-indigo); }
  .form-grid { display: grid; gap: var(--s-4); } @media (min-width: 40em) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } }
  .err-summary { padding: var(--s-4) var(--s-5); border: 2px solid var(--color-erreur); border-radius: var(--radius); background: var(--color-erreur-pale); color: #6E150E; }
  .err-summary h3, .err-summary h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin-block-end: var(--s-2); }
  .err-summary ul { padding-inline-start: 1.1rem; } .err-summary a { color: inherit; font-weight: 600; }
  .honey { position: absolute; inset-inline-start: -9999px; }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  .notice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-radius: var(--radius); background: var(--color-or-pale); color: var(--color-encre); font-size: 0.9375rem; }
  .notice .icon { margin-block-start: 0.1rem; color: var(--color-ocre); }
  .notice--ok { background: var(--color-vert-pale); } .notice--ok .icon { color: var(--color-vert); }
  .notice--err { background: var(--color-erreur-pale); } .notice--err .icon { color: var(--color-erreur); }
  .notice--plain { background: var(--color-papier); border: 1px solid var(--color-ligne-deco); }
  .notice p { margin: 0; }

  /* ---------- Radios en cartes, pastilles, puces ---------- */
  .rc-group { display: grid; gap: var(--s-3); }
  .rc { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 0.25rem var(--s-3); align-items: center; padding: var(--s-4); border: 1.5px solid var(--color-ligne); border-radius: var(--radius); background: var(--color-papier); cursor: pointer; transition: border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2); }
  .rc:hover { border-color: var(--color-encre); }
  .rc input { inline-size: 1.35rem; block-size: 1.35rem; accent-color: var(--color-indigo); grid-row: 1 / span 2; }
  .rc:has(input:checked) { border-color: var(--color-indigo); background: color-mix(in srgb, var(--color-indigo) 6%, var(--color-papier)); box-shadow: 0 0 0 1px var(--color-indigo); }
  .rc:has(input:focus-visible) { outline: 2px solid var(--color-indigo); outline-offset: 3px; }
  .rc:has(input:disabled) { opacity: 0.62; cursor: not-allowed; background: var(--color-sable); } .rc:has(input:disabled):hover { border-color: var(--color-ligne); }
  .rc__t { font-weight: 700; } .rc__d { grid-column: 2 / 3; font-size: var(--fs-small); color: var(--color-doux); } .rc__p { grid-column: 3; grid-row: 1 / span 2; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
  .opt-grid { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .swatch-opt { position: relative; }
  .swatch-opt input, .size-opt input { position: absolute; opacity: 0; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; cursor: pointer; }
  .swatch-opt label { display: block; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; border: 2px solid var(--color-papier); outline: 1.5px solid var(--color-ligne); background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%); transition: outline-color var(--dur-2), scale var(--dur-1); cursor: pointer; }
  .swatch-opt input:checked + label { outline: 3px solid var(--color-indigo); } .swatch-opt input:focus-visible + label { outline: 3px solid var(--color-indigo); outline-offset: 3px; } .swatch-opt label:active { scale: 0.93; }
  .swatch-opt input:disabled + label { opacity: 0.4; }
  .size-opt { position: relative; }
  .size-opt label { display: grid; place-items: center; min-inline-size: 3rem; min-block-size: 2.75rem; padding-inline: 0.7rem; border: 1.5px solid var(--color-ligne); border-radius: var(--radius); background: var(--color-papier); font-weight: 600; font-size: 0.9375rem; cursor: pointer; transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2); }
  .size-opt label:hover { border-color: var(--color-encre); }
  .size-opt input:checked + label { background: var(--color-indigo); color: var(--color-creme); border-color: var(--color-indigo); }
  .size-opt input:focus-visible + label { outline: 2px solid var(--color-indigo); outline-offset: 3px; }
  .size-opt input:disabled + label { color: var(--color-doux); text-decoration: line-through; background: var(--color-sable); cursor: not-allowed; border-style: dashed; }
  .qty { display: inline-flex; align-items: center; border: 1.5px solid var(--color-ligne); border-radius: 999px; background: var(--color-papier); }
  .qty button { inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; border-radius: 50%; font-size: 1.25rem; line-height: 1; transition: background var(--dur-2); }
  .qty button:hover:not(:disabled) { background: var(--color-sable); } .qty button:disabled { opacity: 0.35; cursor: not-allowed; }
  .qty output { min-inline-size: 2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

  /* ---------- Cartes produit ---------- */
  .products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-3); list-style: none; padding: 0; }
  @media (min-width: 40em) { .products { gap: var(--s-6) var(--s-5); } }
  @media (min-width: 48em) { .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 80em) { .products--filters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .products--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .card { position: relative; display: flex; flex-direction: column; block-size: 100%; }
  .products > li { display: flex; flex-direction: column; min-inline-size: 0; }
  .card__media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--arch); overflow: hidden; background: var(--color-sable); isolation: isolate; z-index: 2; pointer-events: none; }
  .card__media .heart, .card__media .card__qv { pointer-events: auto; }
  .card__media > svg, .card__media > img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--dur-4) var(--ease-out); }
  .card__badges { position: absolute; inset-block-start: 0.75rem; inset-inline: 0.6rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; z-index: 2; pointer-events: none; }
  .badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--color-papier); color: var(--color-encre); font-size: 0.75rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.01em; }
  .badge--promo { background: var(--color-rouille-pale); color: var(--color-rouille-fonce); } .badge--new { background: var(--color-or-pale); } .badge--out { background: var(--color-encre); color: var(--color-creme); } .badge--cer { background: var(--color-indigo); color: var(--color-creme); }
  .card__medal { position: absolute; inset-block-end: 0.75rem; inset-inline-end: -4.5rem; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; overflow: hidden; border: 3px solid var(--color-papier); box-shadow: var(--shadow-warm); transition: inset-inline-end var(--dur-3) var(--ease-out); z-index: 2; }
  .card__medal svg { inline-size: 100%; block-size: 100%; }
  @media (hover: hover) and (pointer: fine) { .card:hover .card__media > svg, .card:hover .card__media > img { scale: 1.03; } .card:hover .card__medal { inset-inline-end: 0.75rem; } }
  .heart { position: absolute; inset-block-start: 27%; inset-inline-end: 0.5rem; z-index: 3; inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--color-papier) 88%, transparent); color: var(--color-encre); transition: scale var(--dur-1), background var(--dur-2); }
  .heart:hover { background: var(--color-papier); } .heart:active { scale: 0.88; }
  .heart svg { inline-size: 1.4rem; block-size: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: fill var(--dur-2), stroke var(--dur-2); }
  .heart[aria-pressed="true"] svg { fill: var(--color-rouille); stroke: var(--color-rouille); }
  .card__qv { position: absolute; z-index: 3; inset-block-end: 0.6rem; inset-inline: 0.6rem; min-block-size: 2.75rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: color-mix(in srgb, var(--color-papier) 94%, transparent); color: var(--color-indigo); font-weight: 700; font-size: 0.875rem; backdrop-filter: blur(6px); transition: background var(--dur-2), color var(--dur-2); }
  .card__qv:hover { background: var(--color-indigo); color: var(--color-creme); }
  @media (hover: hover) and (pointer: fine) { .card__qv { inset-inline-end: auto; } .card__medal { display: block; } }
  .card__body { padding-block-start: var(--s-3); display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
  .card__title { font-size: 1rem; font-weight: 700; line-height: 1.3; }
  .card__title a { text-decoration: none; } .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .card__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.75rem; font-size: var(--fs-small); color: var(--color-doux); }
  .card__price { margin-block-start: auto; padding-block-start: 0.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .card__price s { font-weight: 400; color: var(--color-rouille-fonce); font-size: var(--fs-small); }
  .price-now--promo { color: var(--color-rouille-fonce); }
  .equiv { font-size: 0.8125rem; font-weight: 400; color: var(--color-doux); }
  .rating { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-small); color: var(--color-doux); }
  .stars { display: inline-flex; gap: 1px; color: var(--color-or); } .stars svg { inline-size: 0.95rem; block-size: 0.95rem; fill: currentColor; stroke: var(--color-ocre); stroke-width: 1; }
  .stars .off svg, .stars .off { fill: none; color: transparent; }

  /* ---------- Carte horizontale (tiroir, panier) ---------- */
  .line { display: grid; grid-template-columns: 5rem 1fr; gap: var(--s-3) var(--s-4); padding-block: var(--s-4); border-block-end: 1px solid var(--color-ligne-deco); }
  .line__img { border-radius: var(--arch); overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-sable); } .line__img svg { inline-size: 100%; block-size: 100%; }
  .line__t { font-weight: 700; line-height: 1.3; } .line__t a { text-decoration: none; } .line__t a:hover { text-decoration: underline; }
  .line__v { font-size: var(--fs-small); color: var(--color-doux); }
  .line__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); margin-block-start: var(--s-2); }
  .line__tot { font-weight: 700; font-variant-numeric: tabular-nums; }
  .line__warn { margin-block-start: var(--s-2); padding: 0.5rem 0.75rem; border-radius: var(--radius); background: var(--color-erreur-pale); color: #6E150E; font-size: var(--fs-small); font-weight: 600; }
  .line__act { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
  .line__act button, .line__act a { min-block-size: 2.75rem; display: inline-flex; align-items: center; font-size: var(--fs-small); font-weight: 600; color: var(--color-indigo); text-decoration: underline; text-underline-offset: 0.2em; }

  /* ---------- Dialogues & tiroir ---------- */
  dialog { margin: auto; border: 0; padding: 0; background: var(--color-papier); color: var(--color-encre); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); max-inline-size: calc(100vw - 2rem); max-block-size: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; }
  dialog::backdrop { background: color-mix(in srgb, var(--color-nuit) 62%, transparent); backdrop-filter: blur(2px); }
  dialog[open] { animation: dlg var(--dur-3) var(--ease-out); } @keyframes dlg { from { opacity: 0; translate: 0 1rem; } }
  .dlg { padding: var(--s-5); display: grid; gap: var(--s-4); inline-size: min(30rem, calc(100vw - 2rem)); }
  .dlg h2 { font-size: 1.25rem; padding-inline-end: 3rem; }
  .dlg-x { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; z-index: 5; inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--color-sable) 80%, transparent); } .dlg-x:hover { background: var(--color-sable); }
  .dlg-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: flex-end; }
  .drawer { position: fixed; inset: 0 0 0 auto; margin: 0; inline-size: min(26rem, 100%); max-inline-size: 100%; block-size: 100dvh; max-block-size: 100dvh; border-radius: 0; display: none; flex-direction: column; background: var(--color-papier); }
  .drawer[open] { display: flex; animation: none; translate: 0; transition: translate var(--dur-3) var(--ease-out), display var(--dur-3) allow-discrete, overlay var(--dur-3) allow-discrete; }
  @starting-style { .drawer[open] { translate: 100% 0; } }
  .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); border-block-end: 1px solid var(--color-ligne-deco); }
  .drawer__head h2 { font-size: 1.125rem; }
  .drawer__body { flex: 1; overflow-y: auto; padding: 0 var(--s-5); }
  .drawer__foot { padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--color-ligne-deco); background: var(--color-papier); display: grid; gap: var(--s-3); box-shadow: 0 -8px 20px oklch(0.3 0.05 60 / 0.06); }
  .drawer .dlg-x { position: static; }
  .progress { display: grid; gap: var(--s-2); padding-block: var(--s-4); font-size: 0.9375rem; }
  .progress__bar { block-size: 0.5rem; border-radius: 999px; background: var(--color-sable); overflow: hidden; }
  .progress__bar i { display: block; block-size: 100%; inline-size: var(--p, 0%); background: var(--selvedge); border-radius: inherit; transition: inline-size var(--dur-4) var(--ease-out); }
  .progress.is-done { color: var(--color-vert); font-weight: 700; }
  .totals { display: grid; gap: var(--s-2); font-variant-numeric: tabular-nums; }
  .totals div { display: flex; justify-content: space-between; gap: var(--s-4); }
  .totals dt { color: var(--color-doux); } .totals dd { margin: 0; text-align: end; font-weight: 600; }
  .totals .t-total { padding-block-start: var(--s-3); margin-block-start: var(--s-1); border-block-start: 1px solid var(--color-ligne-deco); font-size: 1.25rem; font-weight: 700; } .totals .t-total dt { color: var(--color-encre); font-weight: 700; } .totals .t-total dd { font-weight: 800; }
  .totals .t-eq { justify-content: flex-end; font-size: 0.8125rem; color: var(--color-doux); }
  .totals .t-disc dd { color: var(--color-vert); }
  .empty { display: grid; justify-items: center; gap: var(--s-3); text-align: center; padding: var(--s-7) var(--s-4); }
  .empty .arch-ill { inline-size: 7.5rem; aspect-ratio: 4 / 5; border-radius: var(--arch); background: var(--color-sable); display: grid; place-items: center; color: var(--color-indigo); } .empty .arch-ill svg { inline-size: 3rem; block-size: 3rem; }
  .empty h2, .empty h3 { font-size: 1.25rem; }
  .empty .cluster { justify-content: center; } .empty--tight { padding-block: 0 var(--s-8); } .empty p { max-inline-size: 52ch; }
  .qv { inline-size: min(54rem, calc(100vw - 2rem)); }
  .qv__grid { display: grid; } .qv__media { background: var(--color-sable); aspect-ratio: 4 / 4.2; } .qv__media svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .qv__info { padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
  @media (min-width: 48em) { .qv__grid { grid-template-columns: 1fr 1.1fr; } .qv__media { aspect-ratio: auto; } }
  @media (max-width: 47.99em) { .qv, .dlg--full { inline-size: 100vw; max-inline-size: 100vw; block-size: 100dvh; max-block-size: 100dvh; border-radius: 0; margin: 0; } }
  .sheet { margin: auto 0 0; max-inline-size: 100vw; inline-size: 100%; border-radius: 1.25rem 1.25rem 0 0; max-block-size: 85dvh; }
  @media (min-width: 48em) { .sheet { margin: auto; inline-size: 28rem; border-radius: var(--radius-lg); } }

  /* ---------- Accordéons, onglets, carrousel ---------- */
  .faq details { border-block-end: 1px solid var(--color-ligne-deco); }
  .faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-block-size: 3.5rem; padding-block: var(--s-3); cursor: pointer; font-weight: 700; list-style: none; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; flex: none; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--color-sable); font-size: 1.25rem; line-height: 1; transition: rotate var(--dur-3) var(--ease-out), background var(--dur-2); }
  .faq details[open] summary::after { rotate: 45deg; background: var(--color-or-pale); }
  .faq summary:hover { color: var(--color-indigo); }
  .faq .answer { padding-block-end: var(--s-4); max-inline-size: 64ch; color: var(--color-doux); }
  .faq h3 { font-family: var(--font-display); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ocre); margin-block: var(--s-6) var(--s-2); }
  .carousel { position: relative; }
  .carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; padding-block-end: var(--s-2); list-style: none; margin: 0; }
  .carousel__track::-webkit-scrollbar { display: none; }
  .carousel__track > li { scroll-snap-align: start; display: grid; }
  @media (min-width: 40em) { .carousel__track { grid-auto-columns: 38%; } } @media (min-width: 48em) { .carousel__track { grid-auto-columns: 30%; } } @media (min-width: 64em) { .carousel__track { grid-auto-columns: 23%; } }
  .round-btn { inline-size: 3rem; block-size: 3rem; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--color-ligne); background: var(--color-papier); transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2), scale var(--dur-1); }
  .round-btn:hover:not(:disabled) { background: var(--color-indigo); color: var(--color-creme); border-color: var(--color-indigo); } .round-btn:active { scale: 0.93; } .round-btn:disabled { opacity: 0.35; cursor: not-allowed; }

  /* ---------- Tableaux ---------- */
  .table-wrap { overflow-x: auto; border: 1px solid var(--color-ligne-deco); border-radius: var(--radius); background: var(--color-papier); }
  .table { inline-size: 100%; font-size: 0.9375rem; }
  .table caption { text-align: start; padding: var(--s-3) var(--s-4); font-weight: 700; }
  .table th, .table td { padding: 0.65rem var(--s-4); text-align: start; border-block-start: 1px solid var(--color-ligne-deco); vertical-align: top; }
  .table thead th { background: var(--color-sable); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; border-block-start: 0; }
  .table tbody th { font-weight: 700; }
  .table td.n, .table th.n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* ---------- Frise de suivi ---------- */
  .timeline { list-style: none; padding: 0; display: grid; gap: 0; position: relative; }
  .timeline li { position: relative; padding: 0 0 var(--s-5) 2.5rem; color: var(--color-doux); }
  .timeline li::before { content: ""; position: absolute; inset-inline-start: 0.85rem; inset-block: 1.6rem 0; inline-size: 2px; background: var(--color-ligne-deco); }
  .timeline li:last-child::before { display: none; }
  .timeline li::after { content: ""; position: absolute; inset-inline-start: 0.25rem; inset-block-start: 0.25rem; inline-size: 1.2rem; block-size: 1.2rem; border-radius: 50%; border: 2px solid var(--color-ligne); background: var(--color-creme); }
  .timeline li.is-done { color: var(--color-encre); } .timeline li.is-done::after { background: var(--color-vert); border-color: var(--color-vert); }
  .timeline li.is-done::before { background: var(--color-vert); }
  .timeline li[aria-current="step"]::after { background: var(--color-or); border-color: var(--color-indigo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-or) 35%, transparent); }
  .timeline li[aria-current="step"] { color: var(--color-encre); }
  .timeline strong { display: block; font-weight: 700; color: var(--color-encre); } .timeline .when { font-size: var(--fs-small); }

  /* ---------- Divers ---------- */
  .breadcrumb { padding-block: var(--s-4); font-size: 0.875rem; color: var(--color-doux); }
  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; padding: 0; }
  .breadcrumb li + li::before { content: "/"; margin-inline-end: 0.5rem; color: var(--color-ligne); }
  .breadcrumb a { display: inline-flex; align-items: center; min-block-size: 2rem; }
  .pill-pay { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; } .pill-pay li { padding: 0.25rem 0.7rem; border: 1px solid var(--color-ligne-deco); border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--color-doux); background: var(--color-papier); }
  .toc { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; padding: 0; }
  .toc a { display: inline-flex; min-block-size: 2.5rem; align-items: center; font-weight: 600; }
  .kv { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem var(--s-5); } .kv dt { color: var(--color-doux); } .kv dd { margin: 0; font-weight: 600; }
  .copy-row { display: inline-flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
  .order-no { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 0.9rem + 1.2vw, 1.75rem); letter-spacing: 0.02em; word-break: break-all; }
  .status-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.875rem; font-weight: 700; background: var(--color-vert-pale); color: #034A2A; } .status-pill--due { background: var(--color-or-pale); color: var(--color-encre); }
  .tile-link { display: grid; gap: var(--s-1); padding: var(--s-4); border-radius: var(--radius-lg); background: var(--color-papier); border: 1px solid var(--color-ligne-deco); text-decoration: none; transition: border-color var(--dur-2), translate var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
  .tile-link:hover { border-color: var(--color-indigo); translate: 0 -2px; box-shadow: var(--shadow-warm); } .tile-link strong { font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; color: var(--color-indigo); } .tile-link span { color: var(--color-doux); font-size: var(--fs-small); }
  .tiles { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); } @media (min-width: 48em) { .tiles { grid-template-columns: repeat(4, 1fr); } }
  .figure { margin: 0; } .figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .figure figcaption { font-size: 0.8125rem; color: var(--color-doux); padding-block-start: var(--s-2); }
  .arch-img { aspect-ratio: 4 / 5; border-radius: var(--arch); overflow: hidden; background: var(--color-sable); } .arch-img img, .arch-img svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .rect-img { aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-sable); } .rect-img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .sun-mark { color: var(--color-or); }
  .demo-tag { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--color-or-pale); font-size: 0.75rem; font-weight: 700; }
  .copy-code { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.4rem 0.4rem 0.4rem 1rem; border: 2px dashed var(--color-ligne); border-radius: 999px; background: var(--color-papier); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; }
  [data-reveal] { transition: opacity var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
  .js:not(.reveal-off) [data-reveal]:not(.is-in) { opacity: 0; translate: 0 1.25rem; }
  .news-form { display: grid; gap: var(--s-3); } .news-form .row { display: flex; flex-wrap: wrap; gap: var(--s-2); } .news-form .row .field { flex: 1 1 14rem; } .news-form .row .btn { align-self: end; }
  .news-form .input { background: var(--color-papier); color: var(--color-encre); }
  .news-note { font-size: var(--fs-small); color: var(--color-sur-indigo); } .section--sable .news-note, .news-note--dark { color: var(--color-doux); }
  .on-dark .field__error { color: #FFC9C2; } .on-dark .field__error::before { background: #FFC9C2; color: var(--color-nuit); } .on-dark .field.is-invalid .input { background: var(--color-papier); }
  .sum-title { font-family: var(--font-body); font-size: 1.125rem; font-weight: 700; letter-spacing: 0; }
  .hint.is-bad { color: var(--color-erreur); font-weight: 600; }
  .link-btn--sm { min-block-size: 1.75rem; }
  .lede--light { color: var(--color-sur-indigo); }
  .foot-news p { color: var(--color-sur-indigo); margin-block-start: var(--s-2); }
  .detail-list { padding-inline-start: 1.1rem; display: grid; gap: 0.25rem; }
  .mini-line--plain { grid-template-columns: 2rem 1fr auto; }
  .mb-0 { margin-block-end: 0; }
  html:not(.js) .menu-btn { display: none; }
  html[data-market="eu"] [data-only-cm], html:not([data-market="eu"]) [data-only-eu] { display: none; }
  .noscript-nav { display: flex; } @media (min-width: 64em) { .noscript-nav { display: none; } }
  .toast-bar { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }
}

@layer utilities {
  .center { text-align: center; } .h-small { font-size: 1rem; } .h-sub { font-size: 1.5rem; } .mt-0 { margin-block-start: 0 !important; } .mt-3 { margin-block-start: var(--s-3); } .mt-5 { margin-block-start: var(--s-5); } .mt-6 { margin-block-start: var(--s-6); }
  .nowrap { white-space: nowrap; } .grid-2 { display: grid; gap: var(--s-5); } @media (min-width: 48em) { .grid-2 { grid-template-columns: 1fr 1fr; } }
  .grid-3 { display: grid; gap: var(--s-5); } @media (min-width: 48em) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
  .hide-mobile { display: none; } @media (min-width: 48em) { .hide-mobile { display: initial; } .hide-desktop { display: none; } }
}

@layer pages {
  .atelier-grid { display: grid; gap: var(--s-6); align-items: center; } @media (min-width: 48em) { .atelier-grid { grid-template-columns: 7fr 5fr; gap: var(--s-8); } }

  .pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; } .pdp__price s { font-size: 1rem; font-weight: 400; color: var(--color-rouille-fonce); } .pdp__price .equiv { font-size: 0.9375rem; }
  .opt-label { font-weight: 700; margin-block-end: var(--s-2); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); } .opt-label span { font-weight: 500; color: var(--color-doux); } .opt-label button { font-weight: 600; font-size: var(--fs-small); color: var(--color-indigo); text-decoration: underline; min-block-size: 2.25rem; }
  .stock { font-size: var(--fs-small); font-weight: 600; display: flex; align-items: center; gap: 0.45rem; } .stock::before { content: ""; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--color-vert); } .stock[data-s="0"]::before { background: var(--color-ligne); } .stock:empty { display: none; }
  .pdp__buy { display: grid; gap: var(--s-3); grid-template-columns: auto 1fr; align-items: center; } .pdp__buy .btn { min-block-size: 3.25rem; }
  .eta { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4); border-radius: var(--radius); background: var(--color-papier); border: 1px solid var(--color-ligne-deco); font-size: 0.9375rem; } .eta .icon { color: var(--color-indigo); }
  .size-err { color: var(--color-erreur); font-weight: 600; font-size: var(--fs-small); display: none; } .size-err.is-on { display: block; }
  .detail-list { padding-inline-start: 1.1rem; display: grid; gap: 0.25rem; }
  .recent h2 { font-size: var(--fs-h3); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

  /* ---------- Panier ---------- */
  .cart-layout { display: grid; gap: var(--s-6); padding-block-end: var(--s-7); } @media (min-width: 64em) { .cart-layout { grid-template-columns: 1fr 24rem; gap: var(--s-8); align-items: start; } }
  .cart-lines .line { grid-template-columns: 6rem 1fr; } @media (min-width: 48em) { .cart-lines .line { grid-template-columns: 7rem 1fr; } }
  .summary { padding: var(--s-5); border-radius: var(--radius-lg); background: var(--color-papier); border: 1px solid var(--color-ligne-deco); display: grid; gap: var(--s-4); align-content: start; }
  @media (min-width: 64em) { .summary { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); } }
  .summary h2 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
  .promo-row { display: flex; gap: var(--s-2); } .promo-row .input { flex: 1; min-inline-size: 0; }
  .gift-box { padding: var(--s-4); border-radius: var(--radius); border: 1px dashed var(--color-ligne); }
  .counter { font-size: var(--fs-small); color: var(--color-doux); text-align: end; }

  .mini-line { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: var(--s-3); align-items: center; font-size: 0.9375rem; } .mini-line .line__img { inline-size: 3.5rem; } .mini-line b { font-variant-numeric: tabular-nums; }

  .card-box { padding: var(--s-5); border-radius: var(--radius-lg); background: var(--color-papier); border: 1px solid var(--color-ligne-deco); display: grid; gap: var(--s-4); align-content: start; }
  .card-box h2 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

  .lookbook-hero { padding-block: var(--s-7) var(--s-6); display: grid; gap: var(--s-4); }

  .calc { display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: var(--radius-lg); background: var(--color-papier); border: 1px solid var(--color-ligne-deco); }

}

@media print {
  .site-header, .site-footer, .wa-float, .buybar, .skip, .foot-lite, .co-lite-foot, .msd-badge, .msd-toasts, .help-nav, .no-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; } a { color: inherit; text-decoration: none; }
  .section, .legal, .confirm-grid { padding-block: 0.5rem; } .card-box, .co-step { border: 1px solid #999; break-inside: avoid; }
  .js [data-reveal] { opacity: 1 !important; translate: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; translate: none !important; }
}

/* Sélecteur de langue FR | EN (en-tête, menu mobile, pied de page) */
.lang { display: inline-flex; align-items: center; gap: 0.1rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.25rem; min-inline-size: 2.25rem; padding-inline: 0.4rem; border-radius: 999px; text-decoration: none; color: inherit; }
.lang a:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.lang a[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--color-or); border-radius: 0; }
.lang .sep { opacity: 0.45; }
.lang--header { display: none; margin-inline-end: 0.35rem; }
@media (min-width: 64em) { .lang--header { display: inline-flex; } }
.lang--menu { justify-self: start; }
.lang--foot { order: 3; }
.menu-panel .lang { gap: 0.25rem; color: var(--color-creme); }
.menu-panel .lang a { display: inline-flex; justify-content: center; min-block-size: 2.5rem; min-inline-size: 2.5rem; padding-inline: 0.6rem; font-family: var(--font-body); font-weight: 700; font-size: 0.9375rem; border-block-end: 0; }
.menu-panel .lang a::after { content: none; }
.menu-panel .lang a[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--color-or); }