/* =====================================================================
   RT BIJOUX — feuille de style
   Palette : sel rose des étangs, vert lagune, or.
   Typo : Bodoni Moda (titres), Hanken Grotesk (texte).
   ===================================================================== */

@font-face { font-family: 'Bodoni Moda'; src: url('/fonts/bodoni-moda-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/fonts/bodoni-moda-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/hanken-grotesk-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/hanken-grotesk-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/hanken-grotesk-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --sel: #FBF8F6;
  --rose: #F2DDD6;
  --rose-2: #E8CBC1;
  --lagune: #18443F;
  --lagune-2: #24605A;
  --lagune-soft: #DCE7E2;
  --sable: #EFE5D7;
  --encre: #241D1F;
  --muted: #6A5E60;
  --line: #E7DAD5;
  --or: #8A6516;
  --or-light: #E8D3A0;
  --danger: #A3322A;

  --serif: 'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --s-1: .8125rem; --s0: 1rem; --s1: 1.1875rem; --s2: 1.4375rem; --s3: 2rem; --s4: 2.75rem; --s5: 3.75rem; --s6: 5.25rem;
  --gap: clamp(1rem, 3vw, 2rem);
  --wrap: 1320px;
  --pad: clamp(1rem, 4vw, 3rem);
  --radius: 3px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* métal du hero (piloté par le sélecteur Doré / Acier) */
  --m0: #6E4C10; --m1: #B88A33; --m2: #F6E2A0; --m3: #D9B05A; --m4: #8A6219;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--sel); color: var(--encre); font: 400 var(--s0)/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--lagune); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--lagune); color: var(--sel); padding: .6rem 1rem; z-index: 100; }
.skip:focus { top: 1rem; }
.icon { flex: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ------------------------------------------------------------ typographie */
.h1, .h2, .h3, .hero__title, .pdp__title, .footer__h, .drawer__title { font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; margin: 0; }
.h1 { font-size: clamp(var(--s3), 5vw, var(--s5)); }
.h1--article { font-size: clamp(var(--s3), 4.2vw, var(--s4)); }
.h2 { font-size: clamp(var(--s2), 3.4vw, var(--s4)); }
.h3 { font-size: var(--s1); font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.link { color: var(--lagune); font-weight: 500; }
.link--small { font-size: var(--s-1); font-weight: 400; margin-left: .5rem; }
.linklike { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .2em; color: inherit; }

/* ---------------------------------------------------------------- boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .7rem 1.5rem; border-radius: 999px; border: 1px solid var(--lagune); background: var(--lagune); color: var(--sel); font-weight: 500; text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); }
.btn:hover { background: var(--lagune-2); }
.btn:active { transform: scale(.98); }
.btn--lg { min-height: 54px; padding: .85rem 2rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: var(--lagune); }
.btn--ghost:hover { background: var(--lagune-soft); }
.btn--light { background: var(--sel); color: var(--lagune); border-color: var(--sel); }
.btn--light:hover { background: var(--rose); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* --------------------------------------------------------------- annonce */
.announce { background: var(--lagune); color: var(--sel); text-align: center; font-size: var(--s-1); padding: .45rem var(--pad); }
.announce p { margin: 0; }
.announce a { color: inherit; }
.announce__season + .announce__std { display: none; }
.announce__season[hidden] + .announce__std { display: block; }

/* ---------------------------------------------------------------- header */
.header { position: sticky; top: 0; z-index: 40; background: rgba(251, 248, 246, .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.header__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); height: 68px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; }
.header__burger { display: none; background: none; border: 0; padding: .5rem; margin-left: -.5rem; }
.logo { display: inline-flex; color: var(--lagune); text-decoration: none; }
.logo__svg { width: 154px; height: auto; }
.logo--light { color: var(--sel); }
.nav ul { list-style: none; display: flex; gap: clamp(.9rem, 2vw, 2rem); justify-content: center; margin: 0; padding: 0; }
.nav a { text-decoration: none; font-size: .9375rem; padding: .4rem 0; border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--encre); }
.header__tools { display: flex; gap: .15rem; }
.tool { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; color: var(--encre); text-decoration: none; }
.tool:hover { background: var(--rose); }
.tool__count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--lagune); color: var(--sel); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.tool__count.bump { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); } }

@media (max-width: 960px) {
  .header__inner { grid-template-columns: auto 1fr auto; height: 60px; }
  .header__burger { display: inline-grid; place-items: center; }
  .nav { display: none; }
  .logo { justify-self: center; }
  .logo__svg { width: 128px; }
  .tool--fav { display: none; }
}

/* --------------------------------------------------------------- drawers */
.drawer, .search { position: fixed; inset: 0; z-index: 60; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(36, 29, 31, .38); opacity: 0; transition: opacity .25s var(--ease); }
.drawer__panel { position: absolute; top: 0; bottom: 0; width: min(440px, 92vw); background: var(--sel); display: flex; flex-direction: column; transition: transform .3s var(--ease); box-shadow: 0 0 40px rgba(36, 29, 31, .12); }
.drawer--right .drawer__panel { right: 0; transform: translateX(100%); }
.drawer--left .drawer__panel { left: 0; transform: translateX(-100%); }
.drawer.is-open .drawer__scrim, .search.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem .75rem 1.5rem; border-bottom: 1px solid var(--line); }
.drawer__title { font-size: var(--s2); }
.menu { padding: 1rem 1.5rem 2rem; overflow-y: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu__main a { display: block; font-family: var(--serif); font-size: var(--s2); padding: .55rem 0; text-decoration: none; }
.menu__aux { margin-top: 1.5rem !important; padding-top: 1.25rem !important; border-top: 1px solid var(--line) !important; }
.menu__aux a { display: block; padding: .45rem 0; text-decoration: none; color: var(--muted); }
body.is-locked { overflow: hidden; }

/* ---------------------------------------------------------------- search */
.search__panel { position: absolute; left: 50%; top: 0; transform: translate(-50%, -16px); opacity: 0; width: min(760px, 100%); background: var(--sel); padding: 1rem var(--pad) 1.5rem; max-height: 86vh; overflow-y: auto; transition: transform .25s var(--ease), opacity .25s var(--ease); border-radius: 0 0 var(--radius) var(--radius); }
.search.is-open .search__panel { transform: translate(-50%, 0); opacity: 1; }
.search__form { display: flex; align-items: center; gap: .75rem; border-bottom: 1px solid var(--encre); padding: .25rem 0; }
.search__form input { flex: 1; border: 0; background: none; font-size: var(--s1); padding: .7rem 0; min-width: 0; }
.search__form input:focus { outline: none; }
.search__form input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search__results { padding-top: 1rem; }
.search__results ul { list-style: none; margin: 0; padding: 0; }
.search__results li a { display: grid; grid-template-columns: 56px 1fr auto; gap: .9rem; align-items: center; padding: .5rem 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.search__results img { width: 56px; height: 56px; border-radius: var(--radius); }
.search__results .muted, .muted { color: var(--muted); font-size: var(--s-1); }
.search__all { margin-top: 1rem; }

/* ---------------------------------------------------------------- layout */
main { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad) var(--s6); }
.section { margin-top: clamp(3.5rem, 8vw, 6.5rem); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.1rem 0 0; padding: 0; font-size: var(--s-1); color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: .4rem; color: var(--rose-2); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.pagehead { text-align: center; max-width: 46rem; margin: clamp(1.5rem, 4vw, 3rem) auto 2rem; }
.pagehead--left { text-align: left; margin-left: 0; }
.pagehead__intro { color: var(--muted); font-size: var(--s1); margin: .9rem 0 0; }

/* ------------------------------------------------------------------ hero */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: center; min-height: min(78vh, 760px); padding-top: clamp(1rem, 3vw, 2.5rem); }
.hero__title { font-size: clamp(3rem, 8.2vw, 7.4rem); line-height: .94; letter-spacing: -.025em; max-width: 9.5ch; color: var(--lagune); }
.hero__lead { font-size: var(--s1); max-width: 34rem; margin: 1.5rem 0 1.75rem; color: var(--encre); }
.hero__finish { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.75rem; }
.hero__finish-label { color: var(--muted); margin-right: .35rem; font-size: .9375rem; }
.hero__finish button, .initial__finish button { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .4rem 1rem .4rem .55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--sel); font-size: .9375rem; transition: border-color .2s, background .2s; }
.hero__finish button[aria-checked="true"], .initial__finish button[aria-checked="true"] { border-color: var(--encre); background: #fff; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__art { position: relative; }
.arch { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radius) var(--radius); background: radial-gradient(120% 80% at 50% 30%, #F8E9E3 0%, var(--rose) 55%, var(--rose-2) 100%); overflow: hidden; }
.arch svg { position: absolute; inset: 6% 0 0; width: 100%; height: 94%; }
.arch stop { transition: stop-color .6s var(--ease); }
.hero[data-finish="acier"] { --m0: #565B61; --m1: #9DA4AB; --m2: #F2F4F6; --m3: #B7BDC3; --m4: #646A71; }
.hero__art::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -14px; height: 28px; background: radial-gradient(closest-side, rgba(36, 29, 31, .16), transparent); z-index: -1; }
@media (prefers-reduced-motion: no-preference) {
  .hero__title, .hero__lead, .hero__finish, .hero__cta { animation: rise .9s var(--ease) both; }
  .hero__lead { animation-delay: .08s; } .hero__finish { animation-delay: .16s; } .hero__cta { animation-delay: .22s; }
  .arch { animation: archIn 1.1s var(--ease) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes archIn { from { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); } to { clip-path: inset(0 0 0 0 round 999px 999px 0 0); } }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 1.25rem; }
  .hero__art { order: -1; max-width: 340px; width: 78%; margin: 0 auto; }
  .hero__title { font-size: clamp(2.7rem, 13vw, 4.2rem); max-width: 10ch; }
  .hero__lead { margin: 1rem 0 1.25rem; font-size: var(--s0); }
}

/* ----------------------------------------------------------------- proof */
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof__item { display: flex; gap: .9rem; padding: 1.5rem clamp(.5rem, 2vw, 1.75rem); }
.proof__item + .proof__item { border-left: 1px solid var(--line); }
.proof__item .icon { color: var(--lagune); width: 26px; height: 26px; margin-top: .15rem; }
.proof h2 { font-size: var(--s0); font-weight: 600; margin: 0 0 .2rem; }
.proof p { margin: 0; color: var(--muted); font-size: .9375rem; }
@media (max-width: 860px) { .proof { grid-template-columns: 1fr; } .proof__item + .proof__item { border-left: 0; border-top: 1px solid var(--line); } .proof__item { padding: 1.1rem 0; } }

/* ------------------------------------------------------------------ tiles */
.tiles { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: var(--gap); }
.tile { position: relative; text-decoration: none; display: grid; gap: .25rem; align-content: start; }
.tile--big { grid-row: span 2; }
.tile__img { display: block; overflow: hidden; border-radius: 999px 999px var(--radius) var(--radius); background: var(--rose); }
.tile__img img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s var(--ease); }
.tile--big .tile__img img { aspect-ratio: 4 / 5.2; }
.tile:hover .tile__img img { transform: scale(1.04); }
.tile__name { font-family: var(--serif); font-size: var(--s2); margin-top: .5rem; }
.tile__count { color: var(--muted); font-size: var(--s-1); }
@media (max-width: 860px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile--big { grid-row: auto; grid-column: span 2; }
  .tile--big .tile__img img { aspect-ratio: 16 / 11; }
  .tile__name { font-size: var(--s1); }
}

/* ------------------------------------------------------------------ cards */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem) var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .grid--scroll { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) .5rem; scrollbar-width: none; }
  .grid--scroll::-webkit-scrollbar { display: none; }
  .grid--scroll > * { scroll-snap-align: start; }
}
.card { position: relative; display: flex; flex-direction: column; }
.card__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--rose); }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s var(--ease), transform .6s var(--ease); }
.card__alt { opacity: 0; }
@media (hover: hover) { .card:hover .card__alt { opacity: 1; } .card:hover .card__media img:first-child { transform: scale(1.03); } }
.badge { position: absolute; top: .6rem; left: .6rem; background: var(--sel); color: var(--encre); font-size: .75rem; font-weight: 500; padding: .2rem .6rem; border-radius: 999px; pointer-events: none; }
.badge--best { background: var(--lagune); color: var(--sel); }
.badge--gift { background: var(--or-light); }
.badge--out { background: var(--encre); color: var(--sel); }
.card__add[disabled] { opacity: .55; cursor: not-allowed; }
.card__add[disabled]:hover { background: transparent; color: inherit; border-color: var(--line); }
.card__fav { position: absolute; z-index: 3; top: .35rem; right: .35rem; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(251, 248, 246, .82); color: var(--encre); }
.card__fav .icon, .fav-btn .icon { width: 20px; height: 20px; }
[data-fav][aria-pressed="true"] .icon { fill: var(--lagune); stroke: var(--lagune); }
.card__body { padding: .75rem .1rem .5rem; flex: 1; }
.card__title { font: 500 var(--s0)/1.3 var(--sans); margin: 0; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ''; position: absolute; inset: 0 0 3.2rem; }
.card__meta { display: flex; align-items: center; gap: .55rem; margin: .25rem 0 0; color: var(--muted); font-size: .9375rem; }
.card__price { color: var(--encre); }
.card__was { font-size: var(--s-1); }
.swatches { display: inline-flex; gap: 4px; margin-left: auto; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, var(--sw) 55%, color-mix(in srgb, var(--sw) 70%, #000) 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.card__add { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: 42px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: .875rem; font-weight: 500; text-decoration: none; transition: background .2s, border-color .2s; }
.card__add:hover { background: var(--lagune); border-color: var(--lagune); color: var(--sel); }
.card__add.is-done { background: var(--lagune-soft); border-color: var(--lagune-soft); }

/* --------------------------------------------------------- initial picker */
.initial { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(3.5rem, 8vw, 6.5rem); }
.initial__preview { background: var(--rose); border-radius: var(--radius); overflow: hidden; }
.initial__preview img { width: 100%; aspect-ratio: 1; transition: opacity .2s; }
.initial__text p { color: var(--muted); max-width: 34rem; }
.letters { display: grid; grid-template-columns: repeat(9, 1fr); gap: .35rem; margin: 1.5rem 0 1rem; max-width: 30rem; }
.letters button { aspect-ratio: 1; border: 1px solid var(--line); background: transparent; border-radius: 50%; font-family: var(--serif); font-size: 1.05rem; display: grid; place-items: center; transition: background .15s, color .15s; }
.letters button:hover { border-color: var(--encre); }
.letters button[aria-checked="true"] { background: var(--lagune); border-color: var(--lagune); color: var(--sel); }
.initial__finish { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.initial__buy { margin: 0; }
@media (max-width: 860px) { .initial { grid-template-columns: 1fr; } .letters { grid-template-columns: repeat(7, 1fr); } }

/* ------------------------------------------------------------------ gifts */
.gifts { margin: clamp(3.5rem, 8vw, 6.5rem) calc(50% - 50vw) 0; padding: clamp(2.5rem, 6vw, 4.5rem) max(var(--pad), calc(50vw - var(--wrap) / 2 + var(--pad))); background: var(--lagune); color: var(--sel); }
.gifts .badge--best { background: var(--or-light); color: var(--encre); }
.gifts__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.gifts__head p { margin: 0; color: rgba(251, 248, 246, .78); max-width: 26rem; }
.gifts .card__media { background: #1E4A46; }
.gifts .card__meta, .gifts .card__was { color: rgba(251, 248, 246, .7); }
.gifts .card__price { color: var(--sel); }
.gifts .card__add { border-color: rgba(251, 248, 246, .35); color: var(--sel); }
.gifts .card__add:hover { background: var(--sel); color: var(--lagune); }
.gifts .card__fav { background: rgba(251, 248, 246, .9); }
@media (max-width: 860px) { .gifts .grid--3 { grid-template-columns: 1fr 1fr; } .gifts .grid--3 > :first-child { grid-column: span 2; } }

/* ------------------------------------------------------------------ split */
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.split__text p { max-width: 38rem; }
.facts { margin: 0; display: grid; gap: 0; }
.facts div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.facts div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--serif); font-size: var(--s3); color: var(--or); line-height: 1; }
.facts dd { margin: 0; color: var(--muted); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ posts */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.post a { text-decoration: none; display: block; }
.post__img { display: block; overflow: hidden; border-radius: var(--radius); }
.post__img img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .6s var(--ease); }
.post a:hover img { transform: scale(1.03); }
.post__title { font-family: var(--serif); font-weight: 500; font-size: var(--s1); line-height: 1.25; margin: .9rem 0 .35rem; }
.post__excerpt { color: var(--muted); margin: 0; font-size: .9375rem; }
@media (max-width: 860px) { .posts { grid-template-columns: 1fr; } .post a { display: grid; grid-template-columns: 112px 1fr; gap: 0 1rem; } .post__img img { aspect-ratio: 1; } .post__title { margin-top: 0; } .post__excerpt { grid-column: 2; } }

/* ---------------------------------------------------------------- filters */
.filters { position: sticky; top: 68px; z-index: 20; background: var(--sel); padding: .75rem 0; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.filters__row { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.filters__row--end { justify-content: space-between; margin-top: .65rem; }
.filters__count { margin: 0; color: var(--muted); font-size: .9375rem; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .3rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: .875rem; }
.chip[aria-pressed="true"] { background: var(--encre); color: var(--sel); border-color: var(--encre); }
.select { position: relative; display: inline-flex; align-items: center; }
.select select { appearance: none; border: 1px solid var(--line); border-radius: 999px; background: transparent; padding: .5rem 2.4rem .5rem 1rem; min-height: 40px; font-size: .875rem; }
.select .icon { position: absolute; right: .8rem; width: 16px; pointer-events: none; }
@media (max-width: 960px) {
  .filters { top: 60px; }
  .filters__row:first-child { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); scrollbar-width: none; }
  .filters__row:first-child::-webkit-scrollbar { display: none; }
  .chips { flex-wrap: nowrap; }
  .chip { white-space: nowrap; }
}
.empty { text-align: center; color: var(--muted); padding: 3rem 0; }

/* -------------------------------------------------------------------- PDP */
.pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4.5vw, 4.5rem); margin-top: 1.25rem; align-items: start; }
.pdp__gallery { position: sticky; top: 88px; display: grid; grid-template-columns: 76px 1fr; gap: .75rem; }
.pdp__main { grid-column: 2; grid-row: 1; border-radius: var(--radius); overflow: hidden; background: var(--rose); }
.pdp__main img { width: 100%; aspect-ratio: 1; }
.pdp__thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: .5rem; }
.thumb { padding: 0; border: 1px solid transparent; border-radius: var(--radius); overflow: hidden; background: none; opacity: .75; }
.thumb[aria-current="true"] { border-color: var(--encre); opacity: 1; }
.pdp__photo-note { grid-column: 2; margin: 0; font-size: .75rem; color: var(--muted); }
.pdp__cat { margin: 0 0 .5rem; font-size: var(--s-1); }
.pdp__cat a { color: var(--muted); }
.pdp__title { font-size: clamp(var(--s3), 4vw, 3.1rem); }
.pdp__price { font-size: var(--s2); margin: .6rem 0 0; }
.pdp__price s { font-size: var(--s0); color: var(--muted); margin-left: .5rem; }
.pdp__short { color: var(--muted); font-size: var(--s1); margin: .75rem 0 1.5rem; }
.opt { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.opt__legend { font-weight: 500; margin-bottom: .6rem; padding: 0; }
.opt__legend span { font-weight: 400; color: var(--muted); }
.opt__values { display: flex; flex-wrap: wrap; gap: .4rem; }
.opt__values--letters { display: grid; grid-template-columns: repeat(9, 1fr); }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 44px; min-height: 44px; padding: .35rem .95rem; border: 1px solid var(--line); border-radius: 999px; transition: border-color .15s, background .15s; }
.opt__values--letters .pill span { width: 100%; padding: 0; font-family: var(--serif); font-size: 1.05rem; }
.pill input:checked + span { border-color: var(--encre); background: #fff; box-shadow: inset 0 0 0 1px var(--encre); }
.pill input:focus-visible + span { outline: 2px solid var(--lagune); outline-offset: 2px; }
.pill:hover span { border-color: var(--encre); }
.pill--swatch span { padding-left: .55rem; }
.opt__error { color: var(--danger); font-size: .9375rem; margin: .5rem 0 0; }
.opt.is-invalid .pill span { border-color: var(--danger); }
.pdp__buy { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: stretch; margin-top: .5rem; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; }
.qty button { width: 40px; height: 52px; border: 0; background: none; display: grid; place-items: center; }
.qty button .icon { width: 18px; }
.qty input { width: 2.2rem; border: 0; background: none; text-align: center; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty--small button { width: 32px; height: 36px; }
.fav-btn { width: 54px; border: 1px solid var(--line); border-radius: 50%; background: transparent; display: grid; place-items: center; }
.alert-form { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.alert-form label { display: block; font-weight: 500; margin-bottom: .5rem; }
.alert-form__row { display: flex; gap: .5rem; }
.alert-form input { flex: 1; min-width: 0; min-height: 46px; padding: .6rem .9rem; border: 1px solid var(--rose-2); border-radius: var(--radius); }
.duo { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; align-items: center; margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.duo__imgs { display: flex; align-items: center; gap: .35rem; }
.duo__imgs img { width: 56px; height: 56px; border-radius: var(--radius); }
.duo__text { margin: 0; font-size: .9375rem; line-height: 1.45; }
.duo__text s { color: var(--muted); }
.duo__price { font-weight: 600; color: var(--lagune); }
.duo .btn { grid-column: 1 / -1; }
.pagehead__deal { display: inline-block; margin: 1rem 0 0; padding: .3rem .9rem; border-radius: 999px; background: var(--lagune-soft); color: var(--lagune); font-size: .9375rem; }
.pdp__assure { list-style: none; margin: 1.5rem 0; padding: 1.1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: .55rem; font-size: .9375rem; }
.pdp__assure li { display: flex; gap: .7rem; align-items: flex-start; }
.pdp__assure .icon { width: 20px; color: var(--lagune); margin-top: .1rem; }
.includes { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; }
.includes a { display: flex; gap: .8rem; align-items: center; text-decoration: none; }
.includes img { width: 64px; height: 64px; border-radius: var(--radius); }
.includes span { display: grid; }
.includes small { color: var(--muted); }
.accordions details, .faq details { border-bottom: 1px solid var(--line); }
.accordions summary, .faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; cursor: pointer; font-weight: 500; }
.accordions summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.accordions summary::after, .faq summary::after { content: ''; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; flex: none; }
.accordions details[open] summary::after, .faq details[open] summary::after { transform: rotate(-135deg); }
.accordions details > div, .faq details > div { padding: 0 0 1.1rem; color: var(--muted); }
.accordions p { margin: 0 0 .75rem; }
.specs { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.specs th, .specs td { text-align: left; padding: .45rem 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.specs th { font-weight: 500; color: var(--encre); width: 42%; }
.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: .75rem; padding: .6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom)); background: rgba(251, 248, 246, .97); border-top: 1px solid var(--line); transform: translateY(100%); transition: transform .3s var(--ease); }
.sticky-buy.is-visible { transform: none; }
.sticky-buy img { width: 48px; height: 48px; border-radius: var(--radius); }
.sticky-buy p { margin: 0; flex: 1; display: grid; font-size: .9375rem; line-height: 1.3; }
@media (min-width: 861px) { .sticky-buy { display: none !important; } }
@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__gallery { position: static; grid-template-columns: 1fr; margin: 0 calc(var(--pad) * -1); }
  .pdp__main { grid-column: 1; border-radius: 0; }
  .pdp__thumbs { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; padding: 0 var(--pad); }
  .thumb { width: 64px; flex: none; }
  .pdp__photo-note { grid-column: 1; padding: 0 var(--pad); }
  .opt__values--letters { grid-template-columns: repeat(7, 1fr); }
}

/* ------------------------------------------------------------------- cart */
.cart { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cart__ship { padding: 1rem 1.5rem; background: var(--lagune-soft); font-size: .9375rem; }
.cart__ship p { margin: 0 0 .5rem; }
.bar { height: 6px; background: rgba(24, 68, 63, .15); border-radius: 3px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--lagune); border-radius: 3px; transition: width .5s var(--ease); }
.cart__lines { list-style: none; margin: 0; padding: .5rem 1.5rem; flex: none; }
.line { display: grid; grid-template-columns: 76px 1fr auto; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.line img { width: 76px; height: 76px; border-radius: var(--radius); }
.line__name { font-weight: 500; margin: 0; line-height: 1.3; }
.line__name a { text-decoration: none; }
.line__var { color: var(--muted); font-size: var(--s-1); margin: .15rem 0 .5rem; }
.line__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.line__remove { background: none; border: 0; padding: .25rem 0; color: var(--muted); font-size: var(--s-1); text-decoration: underline; }
.cart__upsell { padding: 1rem 1.5rem; border-top: 1px solid var(--line); }
.cart__upsell h3 { font-size: .9375rem; margin: 0 0 .6rem; font-weight: 600; }
.upsell { display: grid; grid-template-columns: 52px 1fr auto; gap: .75rem; align-items: center; padding: .35rem 0; }
.upsell img { width: 52px; height: 52px; border-radius: var(--radius); }
.upsell p { margin: 0; font-size: .9375rem; line-height: 1.3; }
.upsell button { min-height: 36px; padding: .3rem .9rem; font-size: .8125rem; }
.cart__foot { margin-top: auto; position: sticky; bottom: 0; padding: 1rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.cart--page .cart__foot { position: static; }
.cart__opt { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; margin-bottom: .6rem; }
.cart__opt input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--lagune); flex: none; }
.cart__multi { color: var(--lagune); }
.cart__saving { display: flex; justify-content: space-between; color: var(--lagune); font-size: .9375rem; margin-top: .5rem; }
.cart__total { display: flex; justify-content: space-between; font-size: var(--s1); font-weight: 500; margin: .75rem 0 .2rem; }
.cart__note { color: var(--muted); font-size: var(--s-1); margin: 0 0 .9rem; }
.cart__msg { color: var(--danger); font-size: .9375rem; margin: .6rem 0 0; }
.cart__secure { display: flex; align-items: center; justify-content: center; gap: .4rem; color: var(--muted); font-size: .75rem; margin: .7rem 0 0; }
.cart__secure .icon { width: 14px; }
.cart__empty { padding: 2.5rem 1.5rem; text-align: center; color: var(--muted); }
.cart--page { max-width: 760px; margin: 0 auto; border: 1px solid var(--line); background: #fff; }

/* ------------------------------------------------------------------ prose */
.prose-page { max-width: 46rem; margin: 0 auto; }
.prose { font-size: 1.0625rem; }
.prose h2 { font-family: var(--serif); font-weight: 500; font-size: var(--s2); line-height: 1.2; margin: 2.5rem 0 .75rem; }
.prose p, .prose li { color: #3D3335; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin: .35rem 0; }
.prose a { color: var(--lagune); }
.prose--legal { font-size: .9875rem; }
.prose--legal h2 { font-size: var(--s1); font-family: var(--sans); font-weight: 600; }
.legal-box { border: 1px solid var(--line); background: #fff; padding: 1rem 1.25rem; border-radius: var(--radius); font-size: .9375rem; }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: 1rem 0; display: block; overflow-x: auto; }
.table th, .table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-weight: 600; background: var(--sable); }
.plain { list-style: none; padding: 0; }

/* ------------------------------------------------------------------ forms */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 500; font-size: .9375rem; }
.optional { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea, .track input, .search-page input { width: 100%; padding: .75rem .9rem; border: 1px solid var(--rose-2); border-radius: var(--radius); background: #fff; min-height: 48px; }
.field input:focus, .field select:focus, .field textarea:focus, .track input:focus, .search-page input:focus { outline: 2px solid var(--lagune); outline-offset: 0; border-color: transparent; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--danger); }
.form__legal { font-size: var(--s-1); color: var(--muted); margin: 0; }
.form__msg { margin: 0; font-size: .9375rem; }
.form__msg.is-error { color: var(--danger); }
.form__msg.is-ok { color: var(--lagune); }
.contact__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.contact__aside { background: var(--rose); padding: 1.5rem; border-radius: var(--radius); }
.contact__aside .h3 { margin: 1rem 0 .3rem; } .contact__aside .h3:first-child { margin-top: 0; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }
.track { margin-bottom: 2rem; }
.track label { display: block; font-weight: 500; margin-bottom: .4rem; }
.track__row, .search-page { display: flex; gap: .5rem; }
.search-page { max-width: 34rem; margin: 1.5rem auto 0; }
.notice { max-width: 40rem; margin: clamp(3rem, 10vw, 7rem) auto; text-align: center; }
.notice .h1 { margin-bottom: 1rem; }
.notice p { color: var(--muted); }
.notice__ref { font-weight: 600; color: var(--encre) !important; }
.recap { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.recap ul { list-style: none; margin: 0; padding: 0; }
.recap li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px dashed var(--line); }
.recap p { margin: .75rem 0 0; display: flex; justify-content: space-between; color: var(--encre) !important; font-weight: 600; }

/* ------------------------------------------------------------------ quiz */
.quiz-cta { text-align: center; margin: 2rem 0 0; color: var(--muted); }
.quiz__steps { list-style: none; padding: 0; margin: 0 auto; max-width: 44rem; }
.quiz__step fieldset { border: 0; padding: 0; margin: 0; }
.quiz__step legend { margin-bottom: 1rem; }
.quiz__answers { display: grid; gap: .6rem; }
.quiz__answer { text-align: left; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font-size: 1.0625rem; transition: border-color .15s, background .15s; }
.quiz__answer:hover { border-color: var(--encre); }
.quiz__answer[aria-pressed="true"] { border-color: var(--lagune); background: var(--lagune-soft); }
.quiz__result { margin-top: 2rem; }
.quiz__result > .h2 { margin-bottom: 1.25rem; }
.quiz__again { margin-top: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ avis */
.stars { color: var(--or); letter-spacing: .1em; }
.reviews__avg { margin: 0; }
.reviews__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); }
.reviews__list li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.reviews__head { margin: 0 0 .5rem; }

/* ----------------------------------------------------------------- saison */
.season { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-top: clamp(3rem, 7vw, 5rem); padding: clamp(1.5rem, 4vw, 3rem); background: var(--lagune); color: var(--sel); border-radius: var(--radius); }
.season p { color: rgba(251, 248, 246, .82); max-width: 32rem; }
.season__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.season__items a { display: grid; gap: .2rem; text-decoration: none; font-size: .875rem; }
.season__items img { border-radius: var(--radius); aspect-ratio: 1; object-fit: cover; }
.season__items span:last-child { color: var(--or-light); }
@media (max-width: 860px) { .season { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- popup newsletter */
.nl-pop { position: fixed; z-index: 65; right: 1rem; bottom: 1rem; width: min(380px, calc(100vw - 2rem)); background: var(--sel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.25rem 1.25rem; box-shadow: 0 16px 50px rgba(36, 29, 31, .18); }
.nl-pop__close { position: absolute; top: .25rem; right: .25rem; }
.nl-pop__title { font-family: var(--serif); font-weight: 500; font-size: var(--s2); line-height: 1.15; margin: 0 2rem .5rem 0; color: var(--lagune); }
.nl-pop p { margin: 0 0 1rem; color: var(--muted); font-size: .9375rem; }
.nl-pop .newsletter { grid-template-columns: 1fr; }
.nl-pop .newsletter input { border: 1px solid var(--rose-2); background: #fff; color: var(--encre); }
.nl-pop .newsletter input::placeholder { color: var(--muted); }
.nl-pop .newsletter .btn { width: 100%; }
.nl-pop .newsletter__msg { color: var(--lagune); margin: 0; min-height: 0; }
@media (prefers-reduced-motion: no-preference) { .nl-pop:not([hidden]) { animation: rise .5s var(--ease) both; } }

/* ----------------------------------------------------------------- footer */
.footer { background: var(--lagune); color: rgba(251, 248, 246, .82); margin-top: var(--s5); }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--sel); text-decoration: underline; }
.footer__news { max-width: var(--wrap); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; align-items: center; border-bottom: 1px solid rgba(251, 248, 246, .14); }
.footer__h { color: var(--sel); font-size: clamp(var(--s2), 3vw, var(--s3)); margin-bottom: .5rem; }
.footer__news p { margin: 0; }
.newsletter { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.newsletter input { min-height: 50px; padding: .7rem 1.1rem; border-radius: 999px; border: 1px solid rgba(251, 248, 246, .35); background: rgba(251, 248, 246, .06); color: var(--sel); }
.newsletter input::placeholder { color: rgba(251, 248, 246, .6); }
.newsletter__msg { grid-column: 1 / -1; font-size: .9375rem; color: var(--or-light); min-height: 1.2em; }
.footer__grid { max-width: var(--wrap); margin: 0 auto; padding: 2.5rem var(--pad); display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .9375rem; }
.footer__h3 { font-size: var(--s0); color: var(--sel); font-weight: 600; margin: 0 0 .9rem; }
.footer__brand p { font-size: .9375rem; max-width: 22rem; }
.footer__social { display: flex; gap: .5rem; }
.footer__social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(251, 248, 246, .25); border-radius: 50%; }
.footer .linklike { text-decoration: none; font-size: .9375rem; }
.footer .linklike:hover { text-decoration: underline; color: var(--sel); }
.footer__base { max-width: var(--wrap); margin: 0 auto; padding: 1.25rem var(--pad) 2rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; font-size: var(--s-1); border-top: 1px solid rgba(251, 248, 246, .14); }
.footer__base p { margin: 0; display: flex; align-items: center; gap: .4rem; }
.footer__base .icon { width: 15px; }
@media (max-width: 860px) {
  .footer__news { grid-template-columns: 1fr; }
  .newsletter { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: span 2; }
}

/* ---------------------------------------------------------------- consent */
.consent { position: fixed; z-index: 70; left: 1rem; right: 1rem; bottom: 1rem; max-width: 560px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: 0 12px 40px rgba(36, 29, 31, .14); font-size: .9375rem; }
.consent p { margin: 0 0 .9rem; }
.consent__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.consent__actions .btn { min-height: 40px; padding: .45rem 1rem; font-size: .875rem; flex: 1 1 auto; }
.consent__custom { display: grid; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.consent__custom label { display: flex; gap: .6rem; align-items: center; }
.consent__custom input { accent-color: var(--lagune); width: 18px; height: 18px; }

/* ------------------------------------------------------------------ toast */
.toast { position: fixed; z-index: 80; left: 50%; bottom: 1.25rem; transform: translateX(-50%); background: var(--encre); color: var(--sel); padding: .75rem 1.25rem; border-radius: 999px; font-size: .9375rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); max-width: calc(100vw - 2rem); }