/* Maison Japandi — feuille de style unique.
   Papier pierre, encre sumi, sceau rouge en accent rare. Titres Shippori Mincho, texte Zen Kaku Gothic New.
   Mobile d'abord : tout est pensé à 375 px, puis élargi. */
@font-face { font-family: 'Mincho'; src: url('/assets/fonts/shippori-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Mincho'; src: url('/assets/fonts/shippori-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Gothic'; src: url('/assets/fonts/zenkaku-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Gothic'; src: url('/assets/fonts/zenkaku-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --paper: #F3F1EC; --paper-2: #E8E4DC; --blanc: #FBFAF7; --pierre: #D9D2C5;
  --ink: #1D1C19; --ink-2: #3A3833; --muted: #6B675F; --line: #D6D0C4; --line-2: #BDB6A8;
  --sceau: #A63426; --sceau-2: #8C2B1F; --sauge: #5B6752;
  --serif: 'Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, serif;
  --sans: 'Gothic', 'Hiragino Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --page: 1320px; --gouttiere: 16px; --rythme: 72px;
  color-scheme: light;
}
@media (min-width: 750px) { :root { --gouttiere: 32px; --rythme: 104px; } }
@media (min-width: 1100px) { :root { --gouttiere: 48px; --rythme: 128px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.7 var(--sans); letter-spacing: .01em; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.25; letter-spacing: .02em; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(30px, 5.4vw, 52px); }
h2 { font-size: clamp(24px, 3.4vw, 34px); }
h3 { font-size: clamp(18px, 2vw, 21px); }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--sceau); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.visually-hidden:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; }
.page-width { max-width: var(--page); margin: 0 auto; padding: 0 var(--gouttiere); }
.section { padding: var(--rythme) 0; }
.section--alt { background: var(--paper-2); }
.section--encre { background: var(--ink); color: var(--paper); }
.section--encre .caption { color: #B9B3A7; }
.caption { display: inline-block; font: 500 11px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.caption::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--sceau); margin-right: 10px; vertical-align: 1px; }
.caption--nu::before { display: none; }
.link { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.link:hover { text-decoration-color: var(--sceau); }
.muted { color: var(--muted); }

/* Boutons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.button:hover { background: var(--sceau-2); border-color: var(--sceau-2); }
.button--secondaire { background: transparent; color: var(--ink); }
.button--secondaire:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.button--clair { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.button--petit { min-height: 38px; padding: 0 16px; font-size: 11px; }
.button--full-width { width: 100%; }
.button[disabled], .button[aria-busy="true"] { opacity: .6; cursor: progress; }
.fleche { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 10px 0; border-bottom: 1px solid currentColor; }
.fleche::after { content: '→'; font-size: 15px; letter-spacing: 0; transition: transform .2s; }
.fleche:hover::after { transform: translateX(4px); }

/* Bandeau et en-tête */
.announcement-bar { background: var(--ink); color: #DCD6CA; font: 400 12px/1.4 var(--sans); letter-spacing: .08em; text-align: center; padding: 9px var(--gouttiere); }
.header-wrapper { position: sticky; top: 0; z-index: 30; background: rgba(243, 241, 236, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo img { width: 34px; height: 34px; }
.logo span { font: 500 15px/1 var(--serif); letter-spacing: .26em; white-space: nowrap; }
.header__nav { display: none; }
.header__nav ul { list-style: none; display: flex; justify-content: center; gap: 26px; margin: 0; padding: 0; }
.header__item { position: static; }
.header__menu-item { display: inline-block; padding: 22px 0; font-size: 13px; letter-spacing: .06em; border-bottom: 1px solid transparent; }
.header__menu-item:hover, .header__menu-item[aria-current="true"] { border-bottom-color: var(--ink); }
.header__icons { display: flex; align-items: center; gap: 4px; }
.header__icon { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 42px; height: 42px; font-size: 12px; }
.header__icon svg { width: 21px; height: 21px; }
[data-cart-count]:not(:empty), [data-wish-count]:not(:empty) { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; align-items: center; justify-content: center; border-radius: 9px; background: var(--sceau); color: #fff; font-size: 10px; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -30px rgba(29, 28, 25, .35); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.header__item:hover .mega, .header__item:focus-within .mega { visibility: visible; opacity: 1; transform: none; }
.mega__in { display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 32px; padding-top: 36px; padding-bottom: 40px; }
.mega__title { display: block; font: 500 17px/1.3 var(--serif); margin-bottom: 12px; }
.mega ul { list-style: none; display: block; padding: 0; margin: 0; }
.mega li a { display: block; padding: 4px 0; color: var(--muted); font-size: 14px; }
.mega li a:hover { color: var(--ink); }
.mega__visuel { position: relative; }
.mega__visuel img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.mega__visuel span { display: block; margin-top: 10px; font: 500 15px/1.3 var(--serif); }
.menu-drawer-container > summary { list-style: none; cursor: pointer; display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; }
.menu-drawer-container > summary::-webkit-details-marker { display: none; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 20px; height: 1.5px; background: var(--ink); position: relative; content: ''; }
.menu-icon::before { position: absolute; top: -6px; } .menu-icon::after { position: absolute; top: 6px; }
.menu-drawer { position: fixed; inset: 0 auto 0 0; width: min(88vw, 380px); background: var(--paper); z-index: 50; overflow-y: auto; padding: 72px 24px 40px; border-right: 1px solid var(--line); }
.menu-drawer-container[open] > summary { position: fixed; top: 12px; left: min(calc(88vw - 54px), 326px); z-index: 51; }
.menu-drawer-container[open] .menu-icon { background: transparent; }
.menu-drawer-container[open] .menu-icon::before { top: 0; transform: rotate(45deg); } .menu-drawer-container[open] .menu-icon::after { top: 0; transform: rotate(-45deg); }
.menu-drawer-container[open]::before { content: ''; position: fixed; inset: 0; background: rgba(29, 28, 25, .35); z-index: 49; }
.menu-drawer a { display: block; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.menu-drawer__group > summary { list-style: none; cursor: pointer; padding: 14px 0; border-bottom: 1px solid var(--line); font: 500 19px/1.3 var(--serif); display: flex; justify-content: space-between; }
.menu-drawer__group > summary::after { content: '+'; font-family: var(--sans); color: var(--muted); }
.menu-drawer__group[open] > summary::after { content: '−'; }
.menu-drawer__sub { padding: 4px 0 14px 12px; }
.menu-drawer__sub a { border: 0; padding: 7px 0; color: var(--ink-2); }
@media (min-width: 1100px) {
  .header { grid-template-columns: auto 1fr auto; gap: 32px; }
  .header__nav { display: block; }
  .menu-drawer-container { display: none; }
}
@media (max-width: 1099px) {
  .header { grid-template-columns: 42px 1fr auto; }
  .logo { justify-self: center; }
  .logo span { font-size: 13px; letter-spacing: .2em; }
  .header__icon--texte { display: none; }
}
@media (max-width: 380px) { .logo span { display: none; } }

/* Fil d'Ariane */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; padding: 22px 0 0; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs span { color: var(--line-2); }

/* Accueil */
.hero { display: grid; gap: 32px; padding: 32px 0 var(--rythme); }
.hero__texte { position: relative; align-self: center; }
.hero__texte h1 { font-size: clamp(34px, 6.2vw, 64px); line-height: 1.12; margin-bottom: 24px; }
.hero__texte h1 em { font-style: normal; color: var(--sceau); }
.hero__texte p { color: var(--ink-2); max-width: 46ch; font-size: 17px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 30px; }
.hero__media { position: relative; }
.hero__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.hero__media::before { content: ''; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--line-2); z-index: -1; }
.hero__legende { position: absolute; left: 0; bottom: 0; background: var(--paper); padding: 12px 16px 0 0; font: 500 14px/1.3 var(--serif); }
.hero__legende small { display: block; font: 400 12px/1.5 var(--sans); color: var(--muted); }
.vertical { display: none; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 5fr 6fr; gap: 72px; padding-top: 56px; }
  .vertical { display: block; position: absolute; left: calc(-1 * var(--gouttiere) + 6px); top: 0; writing-mode: vertical-rl; font: 500 12px/1 var(--sans); letter-spacing: .4em; color: var(--muted); }
}
.matieres { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); }
.matiere { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: center; padding: 22px; background: var(--paper); transition: background .2s; }
.matiere:hover { background: var(--blanc); }
.matiere img { width: 112px; height: 112px; object-fit: cover; }
.matiere h3 { margin: 0 0 6px; font-size: 22px; }
.matiere p { margin: 0; color: var(--muted); font-size: 14px; }
@media (min-width: 750px) { .matieres { grid-template-columns: 1fr 1fr; } .matiere { grid-template-columns: 160px 1fr; padding: 28px; } .matiere img { width: 160px; height: 160px; } }
.entete-section { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 40px; }
.entete-section h2 { margin: 0; }
.entete-section p { margin: 8px 0 0; color: var(--muted); max-width: 52ch; }
.pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); counter-reset: piece; }
.pieces li { counter-increment: piece; background: var(--paper); }
.pieces a { display: flex; flex-direction: column; height: 100%; padding: 16px; transition: background .2s; }
.pieces a:hover { background: var(--blanc); }
.pieces a::before { content: counter(piece, decimal-leading-zero); font: 500 11px/1 var(--sans); letter-spacing: .2em; color: var(--sceau); margin-bottom: 12px; }
.pieces img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 14px; }
.pieces strong { font: 500 17px/1.3 var(--serif); }
.pieces small { color: var(--muted); font-size: 12px; margin-top: 4px; }
@media (min-width: 750px) { .pieces { grid-template-columns: repeat(3, 1fr); } .pieces a { padding: 22px; } .pieces strong { font-size: 20px; } }
@media (min-width: 1100px) { .pieces { grid-template-columns: repeat(4, 1fr); } }
.principe { display: grid; gap: 40px; align-items: center; }
.principe__kanji { font: 600 clamp(110px, 18vw, 220px)/1 var(--serif); color: var(--sceau); opacity: .9; }
.principe__texte { max-width: 60ch; }
.principe__texte p { color: #D2CCC0; font-size: 17px; }
.principe ul { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.principe li { border-top: 1px solid #45423B; padding-top: 16px; }
.principe li strong { display: block; font: 500 18px/1.3 var(--serif); color: var(--paper); margin-bottom: 4px; }
.principe li span { color: #B9B3A7; font-size: 14px; }
@media (min-width: 900px) { .principe { grid-template-columns: 1fr 2fr; gap: 80px; } .principe ul { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.rail { scroll-padding-inline: var(--gouttiere); display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gouttiere) 12px; list-style: none; margin: 0; scrollbar-width: thin; }
.rail > li { scroll-snap-align: start; }
@media (min-width: 750px) { .rail { grid-auto-columns: 34%; } }
@media (min-width: 1100px) { .rail { grid-auto-columns: calc((var(--page) - 2 * var(--gouttiere) - 48px) / 4); padding-left: max(var(--gouttiere), calc((100vw - var(--page)) / 2 + var(--gouttiere))); scroll-padding-inline: max(var(--gouttiere), calc((100vw - var(--page)) / 2 + var(--gouttiere))); } }
.atouts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.atouts div { display: flex; flex-direction: column; gap: 4px; }
.atouts strong { font: 500 16px/1.3 var(--serif); }
.atouts span { font-size: 13px; color: var(--muted); }
@media (min-width: 900px) { .atouts { grid-template-columns: repeat(4, 1fr); } }

/* Cartes produit et grilles */
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 14px; }
@media (min-width: 750px) { .grid--3-col, .grid--4-col, .grid--4 { grid-template-columns: repeat(3, 1fr); gap: 48px 24px; } }
@media (min-width: 1100px) { .grid--4-col, .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.grid > li, .rail > li { position: relative; }
.card-wrapper { display: block; }
.card__media { position: relative; aspect-ratio: 1; background: var(--paper-2); overflow: hidden; margin-bottom: 14px; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .4s; }
.card__media img + img { position: absolute; inset: 0; opacity: 0; }
.card-wrapper:hover .card__media img { transform: scale(1.03); }
.card-wrapper:hover .card__media img + img { opacity: 1; }
.card__matiere { display: block; font: 500 10px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.card__heading { font: 500 15px/1.4 var(--serif); margin: 0 0 6px; letter-spacing: .01em; }
@media (min-width: 750px) { .card__heading { font-size: 17px; } }
.price { font-size: 14px; color: var(--ink-2); letter-spacing: .02em; }
.price s { color: var(--muted); margin-left: 6px; }
.card__media--guide { aspect-ratio: 4 / 3; }
.wish { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(251, 250, 247, .9); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.wish svg { width: 18px; height: 18px; }
.wish[aria-pressed="true"] svg path { fill: var(--sceau); stroke: var(--sceau); }
.product__title .wish { position: static; background: transparent; border: 1px solid var(--line); flex: none; }

/* Collections */
.collection-hero { padding: 28px 0 32px; max-width: 760px; }
.collection-hero h1 { margin-bottom: 14px; }
.collection-hero__description { color: var(--ink-2); font-size: 16px; margin: 0; }
.collection-hero__description a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.chips a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line-2); font-size: 13px; transition: border-color .2s, background .2s; }
.chips a:hover, .chips a[aria-current="page"] { border-color: var(--ink); background: var(--blanc); }
.facets { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.tri { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 0 0 26px; }
.tri__filtres { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.tri__groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tri__groupe > span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.tri__groupe button { border: 1px solid var(--line-2); background: transparent; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.tri__groupe button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tri__ordre { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.tri__ordre select { border: 1px solid var(--line-2); background: var(--paper); padding: 8px 10px; color: var(--ink); }
.tri__vide, .tri__plus { text-align: center; margin-top: 32px; }
.pagination { display: flex; justify-content: center; gap: 6px; margin: 56px 0 0; }
.pagination a, .pagination span { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); font-size: 14px; }
.pagination span[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.essentiel { border: 1px solid var(--line-2); background: var(--blanc); padding: 24px; margin-bottom: 48px; }
.essentiel dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.essentiel dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.essentiel dt { color: var(--muted); } .essentiel dd { margin: 0; text-align: right; }
@media (min-width: 750px) { .essentiel { padding: 32px 36px; } .essentiel dl { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.colonnes { display: grid; gap: 48px; }
@media (min-width: 1000px) { .colonnes { grid-template-columns: 1fr 340px; gap: 80px; align-items: start; } .colonnes > aside { position: sticky; top: 96px; } }

/* Texte riche */
.rte { max-width: 72ch; }
.rte h2 { margin-top: 2em; font-size: clamp(22px, 2.8vw, 28px); }
.rte h2:first-child { margin-top: 0; }
.rte h3 { margin-top: 1.6em; }
.rte ul, .rte ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.rte li { margin-bottom: .45em; }
.rte li::marker { color: var(--sceau); }
.rte a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.rte a:hover { text-decoration-color: var(--sceau); }
.rte table { width: 100%; border-collapse: collapse; margin: 1.4em 0 2em; font-size: 14px; display: block; overflow-x: auto; }
.rte th, .rte td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rte thead th { font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--ink); }
.rte strong { font-weight: 500; }
.rte blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 2px solid var(--sceau); font-family: var(--serif); font-size: 19px; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.accordion { border-bottom: 1px solid var(--line); }
.accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font: 500 17px/1.4 var(--serif); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; font: 400 20px/1 var(--sans); color: var(--muted); flex: none; }
.accordion[open] summary::after { content: '−'; }
.accordion__content { padding: 0 0 22px; color: var(--ink-2); max-width: 70ch; }

/* Fiche produit */
.product { display: grid; gap: 28px; padding: 18px 0 var(--rythme); }
@media (min-width: 1000px) { .product { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; } }
.galerie { position: relative; min-width: 0; }
.product__media-list { list-style: none; margin: 0 calc(-1 * var(--gouttiere)); padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.product__media-list::-webkit-scrollbar { display: none; }
.product__media-item { scroll-snap-align: center; background: var(--paper-2); }
.product__media-item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.galerie__points { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.galerie__points i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.galerie__points i.is-active { background: var(--ink); }
@media (min-width: 1000px) {
  .product__media-list { margin: 0; grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; }
  .product__media-item:first-child { grid-column: 1 / -1; }
  .galerie__points { display: none; }
}
.product__info-container { min-width: 0; }
@media (min-width: 1000px) { .product__info-container { position: sticky; top: 96px; } }
.product__title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.product__title h1 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; }
.product .price { font-size: 20px; color: var(--ink); }
.product__tax { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.product-form { margin: 26px 0 0; display: grid; gap: 18px; }
.product-form__input { border: 0; margin: 0; padding: 0; }
.product-form__input legend { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.product-form__input input { position: absolute; opacity: 0; pointer-events: none; }
.product-form__input label { display: inline-block; margin: 0 6px 8px 0; padding: 10px 14px; border: 1px solid var(--line-2); font-size: 14px; cursor: pointer; background: transparent; }
.product-form__input input:checked + label { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.product-form__input input:focus-visible + label { outline: 2px solid var(--sceau); outline-offset: 2px; }
.quantity { display: inline-flex; align-items: center; border: 1px solid var(--line-2); height: 50px; width: max-content; }
.quantity button { width: 44px; height: 100%; border: 0; background: transparent; cursor: pointer; font-size: 17px; }
.quantity input { width: 44px; text-align: center; border: 0; background: transparent; -moz-appearance: textfield; }
.quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; }
.product-form__ligne { display: flex; gap: 10px; }
.product-form__ligne .button { flex: 1; }
.product__eta { margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }
.product__quote { display: inline-block; margin-top: 12px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); color: var(--muted); }
.product__reassurance { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.product__reassurance li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.product__reassurance li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 9px; background: var(--sceau); }
.product__facts { margin: 28px 0 0; }
.product__facts div { display: grid; grid-template-columns: 42% 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.product__facts dt { color: var(--muted); } .product__facts dd { margin: 0; }
.produit-texte { display: grid; gap: 48px; }
@media (min-width: 1000px) { .produit-texte { grid-template-columns: 7fr 5fr; gap: 72px; } }
.pierre-note { border: 1px solid var(--line-2); padding: 24px; background: var(--blanc); font-size: 14px; color: var(--ink-2); }
.pierre-note h2 { font-size: 20px; }
.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gouttiere); background: var(--paper); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .25s; }
.sticky-atc.is-visible { transform: none; }
.sticky-atc .button { min-height: 44px; }
@media (min-width: 1000px) { .sticky-atc { display: none; } }
body.has-sticky-atc .chat { bottom: 74px; }

/* ---------- Stories de la fiche produit (pastilles sous le formulaire d'achat, vidéo dans une fenêtre) */
.at-stories { margin: 24px 0 6px; } .at-stories__track { display: flex; gap: 18px; align-items: flex-start; overflow-x: auto; padding: 6px 2px; scrollbar-width: none; } .at-stories__track::-webkit-scrollbar { display: none; }
.at-story { appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: center; flex: 0 0 auto; width: 96px; color: var(--ink); font: inherit; }
.at-story__thumb { display: grid; place-items: center; width: 82px; height: 82px; margin: 0 auto 8px; border-radius: 999px; overflow: hidden; border: 3px solid var(--line-2); background: var(--paper-2); transition: border-color .2s; } .at-story:hover .at-story__thumb, .at-story:focus-visible .at-story__thumb { border-color: var(--sceau); }
.at-story__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .at-story__label { display: block; font-size: 14px; line-height: 1.1; white-space: nowrap; }
.at-story-dialog { border: 0; padding: 0; width: min(460px, 92vw); max-height: 90vh; border-radius: 4px; overflow: hidden; background: var(--blanc); color: var(--ink); } .at-story-dialog::backdrop { background: rgba(0,0,0,.6); }
.at-story-dialog__inner { position: relative; padding: 14px 14px 16px; } .at-story-dialog__close { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line-2); cursor: pointer; font-size: 22px; line-height: 1; background: var(--blanc); color: var(--ink); display: grid; place-items: center; z-index: 1; }
.at-story-dialog__title { margin: 6px 0 12px; font-size: 18px; } .at-story-dialog__media video { width: 100%; height: auto; max-height: 74vh; display: block; border-radius: 2px; background: #000; }

/* Panier et tiroir */
.cart-drawer { position: fixed; inset: 0; z-index: 60; }
.cart-drawer[hidden] { display: none; }
.cart-drawer__overlay { position: absolute; inset: 0; background: rgba(29, 28, 25, .4); }
.cart-drawer__inner { position: absolute; top: 0; right: 0; bottom: 0; width: min(100vw, 440px); background: var(--paper); display: flex; flex-direction: column; overflow-y: auto; }
.cart-drawer__header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.cart-drawer__header h2 { margin: 0; font-size: 22px; }
.cart-drawer__close { border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; width: 42px; height: 42px; }
.cart-drawer__items { padding: 0 24px; flex: 1; }
.cart-drawer__footer { padding: 20px 24px 28px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.drawer-reco-zone { padding: 16px 24px; background: var(--paper-2); }
.drawer-reco { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.drawer-reco li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.drawer-reco img { width: 64px; height: 64px; object-fit: cover; }
.cart-items { list-style: none; margin: 0; padding: 0; }
.cart-item { display: grid; grid-template-columns: 84px 1fr; gap: 6px 16px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cart-item > a img { width: 84px; height: 84px; object-fit: cover; background: var(--paper-2); }
.cart-item > div:first-of-type > a { font: 500 16px/1.35 var(--serif); }
.cart-item .quantity { grid-column: 2; height: 40px; }
.cart-item__remove { border: 0; background: transparent; color: var(--muted); font-size: 12px; padding: 6px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cart-item__props { color: var(--muted); font-size: 12px; }
.cart-note { color: var(--muted); font-size: 13px; margin-top: 18px; }
.commande { display: grid; gap: 40px; padding: 32px 0 var(--rythme); }
@media (min-width: 1000px) { .commande { grid-template-columns: 1fr 380px; gap: 72px; } }
.commande__recap { background: var(--blanc); border: 1px solid var(--line); padding: 26px; align-self: start; display: grid; gap: 10px; }
.commande__total { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.commande__total--grand { font: 500 19px/1.3 var(--serif); padding-top: 12px; border-top: 1px solid var(--line); margin-top: 6px; }
body.drawer-open { overflow: hidden; }

/* Recherche */
.search-form { display: flex; gap: 10px; margin: 24px 0 32px; }
.search-form input { flex: 1; min-width: 0; height: 52px; border: 1px solid var(--line-2); background: var(--blanc); padding: 0 16px; }
.search-vide { color: var(--muted); }

/* Formulaires génériques */
.champ { display: grid; gap: 6px; margin-bottom: 16px; }
.champ label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.champ input, .champ textarea, .champ select { width: 100%; border: 1px solid var(--line-2); background: var(--blanc); padding: 13px 14px; }
.champ textarea { min-height: 140px; resize: vertical; }
.invalid { border-color: var(--sceau) !important; }

/* Lettre */
.newsletter { text-align: center; }
.newsletter .page-width { max-width: 640px; }
.newsletter form { display: flex; gap: 8px; margin: 24px 0 10px; }
.newsletter input { flex: 1; min-width: 0; height: 50px; border: 1px solid var(--line-2); background: var(--blanc); padding: 0 16px; }
.newsletter small { color: var(--muted); }

/* Pages d'information */
.page-entete { display: grid; gap: 32px; padding: 24px 0 56px; }
.page-entete__texte { align-self: center; }
.page-entete__texte p { color: var(--ink-2); font-size: 17px; max-width: 52ch; }
.page-entete img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) { .page-entete { grid-template-columns: 1fr 1fr; gap: 72px; padding-bottom: 80px; } }
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); }
.etapes li { counter-increment: etape; background: var(--paper); padding: 26px; }
.etapes li::before { content: counter(etape, decimal-leading-zero); display: block; font: 500 12px/1 var(--sans); letter-spacing: .2em; color: var(--sceau); margin-bottom: 14px; }
.etapes strong { display: block; font: 500 19px/1.3 var(--serif); margin-bottom: 6px; }
.etapes span { color: var(--muted); font-size: 14px; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(4, 1fr); } }

/* Articles */
.article-entete { max-width: 820px; padding: 24px 0 40px; }
.article-entete p.chapo { font-size: 18px; color: var(--ink-2); }
.article-meta { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; }
.article-visuel { margin: 0 0 56px; }
.article-visuel img { width: 100%; max-height: 560px; object-fit: cover; }
.sommaire { border: 1px solid var(--line); padding: 22px; font-size: 14px; background: var(--blanc); }
.sommaire ol { margin: 10px 0 0; padding-left: 1.2em; }
.sommaire li { margin: 6px 0; }
.sommaire a:hover { color: var(--sceau); }
.carte-guide { display: block; }
.carte-guide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 16px; background: var(--paper-2); }
.carte-guide h3 { font-size: 20px; margin-bottom: 8px; }
.carte-guide p { color: var(--muted); font-size: 14px; margin: 0; }

/* Pied de page */
.footer { background: var(--ink); color: #CFC9BD; padding: 72px 0 32px; font-size: 14px; margin-top: 0; }
.footer a:hover { color: var(--paper); }
.footer__haut { display: grid; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid #3A3833; }
.footer__marque p { max-width: 36ch; color: #A9A397; }
.footer__marque .logo span { color: var(--paper); }
.footer-block__heading { font: 500 11px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #8F897D; margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
@media (min-width: 750px) { .footer__haut { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__frequent { padding: 32px 0; border-bottom: 1px solid #3A3833; }
.footer__frequent .chips a { border-color: #45423B; color: #CFC9BD; font-size: 12px; }
.footer__frequent .chips a:hover { border-color: #8F897D; background: transparent; }
.footer__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; color: #8F897D; font-size: 12px; }

/* Bulle de discussion */
.chat { position: fixed; right: 16px; bottom: 16px; z-index: 40; }
.chat__bubble { width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(29, 28, 25, .6); }
.chat__panel { position: absolute; right: 0; bottom: 66px; width: min(92vw, 360px); background: var(--paper); border: 1px solid var(--line-2); box-shadow: 0 24px 50px -20px rgba(29, 28, 25, .45); display: flex; flex-direction: column; max-height: 70vh; }
.chat__panel[hidden] { display: none; }
.chat__header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--ink); color: var(--paper); }
.chat__header span { display: block; font-size: 12px; color: #B9B3A7; }
.chat__header button { border: 0; background: transparent; color: inherit; font-size: 24px; cursor: pointer; }
.chat__fil { padding: 16px; overflow-y: auto; display: grid; gap: 10px; font-size: 14px; }
.chat__msg { background: var(--blanc); border: 1px solid var(--line); padding: 10px 12px; margin: 0; }
.chat__msg--moi { background: var(--paper-2); justify-self: end; }
.chat__rapides { display: flex; flex-wrap: wrap; gap: 6px; }
.chat__rapides button { border: 1px solid var(--line-2); background: transparent; padding: 6px 10px; font-size: 12px; cursor: pointer; text-align: left; }
.chat__form { display: flex; border-top: 1px solid var(--line); }
.chat__form input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 16px; }
.chat__form button { border: 0; background: var(--ink); color: var(--paper); width: 52px; cursor: pointer; }

/* Bandeau de consentement et fenêtre lettre */
.consentement { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; background: var(--paper); border: 1px solid var(--line-2); padding: 18px; display: grid; gap: 12px; max-width: 520px; font-size: 14px; }
.consentement div { display: flex; gap: 8px; }
.popup-lettre { position: fixed; inset: 0; z-index: 80; background: rgba(29, 28, 25, .45); display: grid; place-items: center; padding: 16px; }
.popup-lettre__boite { background: var(--paper); max-width: 520px; padding: 32px; position: relative; }
.popup-lettre__fermer { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; font-size: 26px; cursor: pointer; }

/* Wishlist, 404, divers */
[data-wishlist-empty] { color: var(--muted); }
.tableau-prix { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau-prix th, .tableau-prix td { text-align: left; padding: 12px 8px 12px 0; border-bottom: 1px solid var(--line); }
.sceau-texte { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--sceau); color: var(--paper); font: 600 24px/1 var(--serif); }
@media (max-width: 899px) { .hero__media::before { display: none; } .hero__legende { position: static; padding: 12px 0 0; } }

/* ---------- Passe du 22/10/2026 */
/* Logo : sur ordinateur il est à gauche (menu au centre) ; sous 1100 px il est au centre, exactement, quelle que soit
   la largeur des icônes de droite (colonnes 1fr auto 1fr) et sans l'espace laissé par l'espacement de la dernière lettre. */
@media (max-width: 1099px) {
  .header { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .menu-drawer-container { justify-self: start; } .header__icons { justify-self: end; }
  .header .logo span { margin-right: -.2em; }
}
/* Nos garanties, sous les stories */
.garanties { margin: 22px 0 6px; font-size: 14px; color: var(--ink); }
.garanties__titre { margin: 0 0 10px; } .garanties__titre strong { font-weight: 700; font-family: var(--sans); font-synthesis: weight; }
.garanties__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.garanties__liste li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.garanties__icone { flex: none; margin-top: 2px; color: var(--ink); }
/* Guides : photos dans le corps, collection pilier, articles voisins, sources */
.article-photo { margin: 36px auto; max-width: 560px; } .article-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--blanc); }
.article-photo figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); } .article-photo figcaption a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.article-pilier a, .article-voisins a, .sources a { text-decoration: underline; text-underline-offset: 3px; }
.sources { font-size: 14px; color: var(--muted); } .sources a { color: var(--ink); word-break: break-word; }
.article-signature a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Code de bienvenue affiché dans la pop-up après inscription */
.popup-lettre__offre { font-weight: 600; }
.popup-lettre__code { font-size: 18px; letter-spacing: .12em; }

/* Pastille d'offre (pop-up fermée sans inscription) : en bas à gauche, la bulle de discussion étant à droite */
@keyframes badge-offre-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.badge-offre { position: fixed; left: 20px; bottom: 20px; z-index: 29; animation: badge-offre-in .25s ease-out; }
.badge-offre__ouvrir { width: 104px; height: 104px; border-radius: 50%; border: 1px solid var(--line); background: var(--blanc); color: var(--ink); box-shadow: 0 8px 24px rgba(29, 28, 25, .18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--sans); font-weight: 600; font-size: 14px; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: transform .2s; }
.badge-offre__ouvrir span:first-child { font-size: 19px; letter-spacing: .02em; }
.badge-offre__ouvrir:hover { transform: scale(1.04); }
.badge-offre__ouvrir:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.badge-offre__fermer { position: absolute; top: -4px; right: -4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--ink); color: var(--blanc); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
body.drawer-open .badge-offre { display: none; }
@media (max-width: 999px) { body.has-sticky-atc .badge-offre { bottom: 82px; } }
@media (max-width: 749px) { .badge-offre { left: 12px; bottom: 12px; } .badge-offre__ouvrir { width: 84px; height: 84px; font-size: 12px; } .badge-offre__ouvrir span:first-child { font-size: 16px; } body.has-sticky-atc .badge-offre { bottom: 82px; } }
@media (prefers-reduced-motion: reduce) { .badge-offre { animation: none; } .badge-offre__ouvrir { transition: none; } .badge-offre__ouvrir:hover { transform: none; } }

/* Caractéristiques techniques (fiche produit) : 4 cartes numérotées, 4 → 2 → 1 colonnes ; produit entier en contain */
.caracs__titre { margin: 0 0 32px; }
.caracs__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.caracs__photo { aspect-ratio: 1; overflow: hidden; border-radius: 0; background: var(--paper-2); }
.caracs__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caracs__photo--produit { background: #fff; }
.caracs__photo--produit img { object-fit: contain; } /* le produit entier, jamais recadré */
.caracs__num { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; font-family: var(--serif); font-size: 16px; color: var(--ink); }
.caracs__num::after { content: ""; flex: 1; border-top: 1px dashed var(--line-2); }
.caracs__carte h3 { margin: 0 0 8px; line-height: 1.25; }
.caracs__carte p:last-child { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 989px) { .caracs__liste { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 549px) { .caracs__liste { grid-template-columns: 1fr; gap: 40px; } }

/* Bloc dimensions (Longueur / Profondeur / Hauteur avec icônes), au-dessus de la quantité */
.dims { list-style: none; margin: 20px 0; padding: 0 0 20px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 18px 30px; }
.dims[hidden] { display: none; }
.dims li { display: flex; align-items: center; gap: 12px; }
.dims__icone { width: 40px; height: 40px; border-radius: 0; background: var(--paper-2); color: var(--ink); display: flex; align-items: center; justify-content: center; flex: none; }
.dims__icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dims__nom { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; }
.dims strong { font-size: 17px; font-weight: 600; color: var(--ink); }

/* 25/10/2026 – affichage mobile : le nom de la marque ne passe plus sous les icônes, images d'articles entières, rien sous la bulle */
@media (max-width: 479px) {
  .header { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; }
  .logo { justify-self: center; gap: 9px; }
  .logo img { width: 30px; height: 30px; }
  .header .logo span { font-size: 12px; letter-spacing: .16em; margin-right: -.16em; }
  .header__icons { gap: 0; }
  .header__icon { min-width: 38px; }
}
@media (max-width: 749px) {
  .article-visuel img { aspect-ratio: auto !important; height: auto; max-height: none; object-fit: contain; }
  .footer { padding-bottom: 96px; }
}
.chat__bubble { border: 1px solid rgba(243, 241, 236, .3); }
@media (max-width: 479px) { .product-form__ligne .button { padding-left: 12px; padding-right: 12px; letter-spacing: .1em; white-space: nowrap; } }
@media (max-width: 899px) { .hero__media img { display: block; } .hero__legende { display: block; } }
@media (max-width: 999px) { body.has-sticky-atc .footer { padding-bottom: 150px; } }

/* 26/10/2026 – menu tiroir : le flou de l'en-tête sur un calque à part. Un backdrop-filter sur l'en-tête en faisait le bloc
   conteneur du tiroir (position: fixed), qui ne couvrait alors que la hauteur de l'en-tête au lieu de tout l'écran. */
.header-wrapper { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.header-wrapper::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* Pop-up d'inscription : champ e-mail pleine largeur (27/10/2026, il gardait le style par défaut du navigateur) */
.popup-lettre form { display: grid; gap: 10px; margin-top: 16px; }
.popup-lettre input[type="email"] { width: 100%; box-sizing: border-box; height: 52px; padding: 0 16px; border: 1px solid var(--line-2, var(--line)); border-radius: var(--rayon-petit, 4px); background: #fff; color: var(--ink); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.popup-lettre input[type="email"]::placeholder { color: var(--ink); opacity: .5; }
.popup-lettre input[type="email"]:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.popup-lettre form .button { width: 100%; margin: 0; }