/* Kyei&One — design system « Cuir, métal, lumière »
   Règle d'or : l'interface est ivoire et métal ; la couleur vient du parfum (--accent).
   Signature : la ligne de métal verticale qui fend le cuir des flacons. */

/* ---------- Polices (auto-hébergées, OFL) ---------- */
@font-face { font-family: "Bodoni Moda"; src: url(/assets/fonts/bodoni-moda-latin-opsz-normal.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(/assets/fonts/bodoni-moda-latin-opsz-italic.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/assets/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  /* matières */
  --bg: #120A06;            /* noir de la marque, réchauffé (cuir, braise) */
  --bg-raised: #1F140C;
  --ink: #F4E9DA;           /* ivoire chaud — 16:1 sur --bg */
  --ink-soft: #D2BCA2;      /* ivoire doux — 10:1 */
  --hair: rgba(244, 233, 218, .16);
  --silver: #C9CCD1;
  --rosegold: #D19A7E;
  --brand: #E8701F;         /* orange de la marque (logo) */
  --gold: #E9AE5B;          /* lumière dorée de Florence */
  --accent: var(--brand);   /* redéfini par parfum */
  --halo: color-mix(in oklab, var(--accent) 34%, transparent);

  --metal-v: linear-gradient(180deg, transparent 0%, #7E8288 16%, #F4F5F7 44%, #A3A7AD 62%, #E9EAEC 78%, transparent 100%);
  --metal-h: linear-gradient(90deg, #7E8288 0%, #F4F5F7 38%, #A3A7AD 64%, #E9EAEC 100%);

  /* typographie */
  --f-display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --f-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
  --t-h3: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem);
  --t-h2: clamp(2.5rem, 1.5rem + 3.6vw, 5rem);
  --t-h1: clamp(3.25rem, 1.6rem + 6.4vw, 9rem);
  --t-mega: clamp(4.5rem, 1.5rem + 12vw, 14rem);

  /* espace */
  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem; --s-6: 6.5rem; --s-7: 10rem;
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --maxw: 1440px;

  /* mouvement */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --d-fast: 200ms; --d-base: 500ms; --d-slow: 900ms;

  --z-line: 40; --z-header: 50; --z-menu: 60; --z-cursor: 90; --z-intro: 100;
}

/* teinte d'ambiance : suit le parfum (--accent) ou la section en cours (data-tone), fondu de 1,2 s */
@property --tone { syntax: "<color>"; inherits: true; initial-value: #E8701F; }
html { --tone: var(--accent); transition: --tone 1.2s var(--ease-inout); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--bg); color: var(--ink);
  font: 400 var(--t-m)/1.6 var(--f-text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* lumière d'ambiance : halos chauds fixes, couleur de la section ou du parfum */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80% 65% at 88% -5%, color-mix(in oklab, var(--tone) 38%, transparent), transparent 70%),
    radial-gradient(65% 55% at -5% 105%, color-mix(in oklab, var(--tone) 24%, transparent), transparent 70%),
    linear-gradient(180deg, transparent 35%, color-mix(in oklab, var(--tone) 9%, transparent));
}
/* grain de cuir : bruit très fin, fixe, composité */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-line);
  opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
[hidden] { display: none !important; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul[class], ol[class], nav ul { list-style: none; padding: 0; }

h1, h2, h3, .display {
  font-family: var(--f-display); font-weight: 400; line-height: 1.02;
  letter-spacing: -.012em; text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.1; }
p { max-width: 62ch; text-wrap: pretty; }
.lede { font-size: var(--t-l); line-height: 1.5; color: var(--ink); max-width: 46ch; }
.soft { color: var(--ink-soft); }
.label { font-size: var(--t-s); color: var(--ink-soft); letter-spacing: .01em; }
.serif-i { font-family: var(--f-display); font-style: italic; }
.num { font-family: var(--f-display); font-variant-numeric: lining-nums tabular-nums; }

.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--s-6); position: relative; }

.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 200; background: var(--ink); color: var(--bg); padding: .75rem 1rem; }
.skip:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* placeholder visible mais soigné */
.todo {
  display: inline-block; font-family: var(--f-text); font-size: .62em; font-style: normal;
  letter-spacing: .02em; line-height: 1.6; vertical-align: middle;
  color: var(--ink-soft); padding: 0 .55em; border: 1px dashed currentColor;
}

/* ---------- Ligne de métal ---------- */
.ml { display: block; width: 1px; background: var(--metal-v); }
.ml--sep { align-self: stretch; opacity: .55; }
/* séparateur de section : un trait vertical qui descend */
.section--cut::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: var(--s-5);
  background: var(--metal-v); opacity: .6;
}
/* progression du scroll : la ligne se remplit (transform uniquement) */
.scroll-line {
  position: fixed; z-index: var(--z-line); top: 0; bottom: 0; right: calc(var(--gutter) / 2 - 1px);
  width: 1px; background: var(--hair); pointer-events: none;
}
.scroll-line::after {
  content: ""; position: absolute; inset: 0; background: var(--metal-v);
  transform-origin: top; transform: scaleY(var(--p, 0));
}
/* liens soulignés d'un filet de métal */
.ml-link { position: relative; display: inline-block; padding-block: .2em; }
.ml-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--metal-h); transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-base) var(--ease-out);
}
.ml-link:hover::after, .ml-link:focus-visible::after, .ml-link[aria-current="page"]::after { transform: scaleX(1); }
p a, .prose a { background: linear-gradient(var(--ink-soft), var(--ink-soft)) left bottom / 100% 1px no-repeat; padding-bottom: 1px; }
p a:hover, .prose a:hover { background-image: var(--metal-h); }

/* révélation d'image : deux volets s'écartent depuis la ligne centrale */
.reveal-open { position: relative; overflow: hidden; }
.reveal-open::before, .reveal-open::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 2; background: var(--bg);
  transition: transform 1.1s var(--ease-inout);
}
.reveal-open::before { left: 0; }
.reveal-open::after { right: 0; }
.reveal-open > .reveal-line {
  position: absolute; z-index: 3; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--metal-v);
  transform: scaleY(0); transition: transform .6s var(--ease-out), opacity .4s .9s;
}
.js .reveal-open.is-in::before { transform: translateX(-101%); transition-delay: .45s; }
.js .reveal-open.is-in::after { transform: translateX(101%); transition-delay: .45s; }
.js .reveal-open.is-in > .reveal-line { transform: scaleY(1); opacity: 0; }
html:not(.js) .reveal-open::before, html:not(.js) .reveal-open::after, html:not(.js) .reveal-line { display: none; }

/* ---------- Boutons ---------- */
.btn {
  --b-bg: var(--brand); --b-fg: var(--bg);
  position: relative; display: inline-flex; align-items: center; gap: .9rem;
  min-height: 52px; padding: 0 1.6rem 0 1.25rem;
  background: var(--b-bg); color: var(--b-fg);
  font-size: var(--t-s); font-weight: 500; letter-spacing: .01em;
  transition: background-color var(--d-fast), color var(--d-fast), transform var(--d-base) var(--ease-out);
}
.btn::before { /* la ligne de métal, signature */
  content: ""; width: 1px; height: 1.35em; background: var(--metal-v); flex: none;
}
.btn:hover { --b-bg: var(--ink); }
.btn:active { transform: scale(.98); }
.btn--ghost { --b-bg: transparent; --b-fg: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.btn--ghost:hover { --b-bg: transparent; box-shadow: inset 0 0 0 1px var(--accent); }

/* ---------- En-tête & menu ---------- */
.site-header {
  position: fixed; z-index: var(--z-header); inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 1.1rem var(--gutter);
  transition: transform var(--d-base) var(--ease-out), background-color var(--d-base);
}
.site-header.is-scrolled { background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(10px); }
.site-header.is-hidden { transform: translateY(-100%); }
.brand img { width: 128px; height: auto; }
.site-nav ul { display: flex; gap: clamp(1rem, 2.4vw, 2.5rem); }
.site-nav a { font-size: var(--t-s); }
.menu-toggle { display: none; min-height: 44px; padding: 0 .25rem; font-size: var(--t-s); }
main { display: block; }

@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; align-items: center; gap: .6rem; position: relative; z-index: calc(var(--z-menu) + 1); }
  .menu-toggle::before { content: ""; width: 1px; height: 1.2em; background: var(--metal-v); transition: transform var(--d-base) var(--ease-out); }
  .menu-open .menu-toggle::before { transform: rotate(90deg) scaleY(1.4); }
  .site-nav {
    position: fixed; inset: 0; z-index: var(--z-menu); background: var(--bg);
    display: grid; align-content: center; padding: var(--s-6) var(--gutter);
    visibility: hidden; opacity: 0;
    transition: opacity var(--d-base) var(--ease-out), visibility 0s var(--d-base);
  }
  .menu-open .site-nav { visibility: visible; opacity: 1; transition: opacity var(--d-base) var(--ease-out); }
  .site-nav ul { flex-direction: column; gap: var(--s-2); }
  .site-nav a { font-family: var(--f-display); font-size: clamp(2.25rem, 9vw, 3.5rem); line-height: 1.15; }
  .site-nav li { transform: translateY(1.2rem); opacity: 0; transition: transform var(--d-slow) var(--ease-out), opacity var(--d-base); }
  .menu-open .site-nav li { transform: none; opacity: 1; }
  .menu-open .site-nav li:nth-child(2) { transition-delay: 60ms; }
  .menu-open .site-nav li:nth-child(3) { transition-delay: 120ms; }
  .menu-open .site-nav li:nth-child(4) { transition-delay: 180ms; }
}

/* ---------- Pied de page ---------- */
.site-footer { position: relative; padding: var(--s-6) var(--gutter) var(--s-3); margin-top: var(--s-6); }
.site-footer::before { content: ""; position: absolute; left: var(--gutter); top: 0; width: 1px; height: var(--s-5); background: var(--metal-v); }
.footer-grid { display: grid; gap: var(--s-5); grid-template-columns: 1.3fr 1fr 1.3fr; max-width: var(--maxw); margin-inline: auto; }
.footer-brand { font-family: var(--f-display); font-size: var(--t-h3); margin-bottom: var(--s-2); }
.site-footer ul { display: grid; gap: .55rem; }
.site-footer p { color: var(--ink-soft); }
.newsletter label { display: block; font-family: var(--f-display); font-size: var(--t-l); margin-bottom: var(--s-2); }
.newsletter-row { display: flex; border-bottom: 1px solid var(--hair); }
.newsletter input { flex: 1; min-width: 0; min-height: 52px; background: transparent; border: 0; outline-offset: 2px; }
.newsletter input::placeholder { color: var(--ink-soft); }
.newsletter button { min-height: 52px; padding-inline: 1rem; font-size: var(--t-s); }
.newsletter-status { min-height: 1.6em; margin-top: .5rem; font-size: var(--t-s); color: var(--ink-soft); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--s-2); max-width: var(--maxw); margin: var(--s-5) auto 0; font-size: var(--t-xs); color: var(--ink-soft); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Curseur (pointeur fin uniquement) ---------- */
.cursor { position: fixed; z-index: var(--z-cursor); top: 0; left: 0; pointer-events: none; display: none; }
.cursor-dot, .cursor-halo { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-dot { width: 6px; height: 6px; background: var(--ink); }
.cursor-halo { width: 44px; height: 44px; background: radial-gradient(circle, var(--halo) 0%, transparent 70%); transition: width var(--d-base) var(--ease-out), height var(--d-base) var(--ease-out); }
.cursor.is-hover .cursor-halo { width: 90px; height: 90px; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) { .has-cursor .cursor { display: block; } }

/* ---------- Révélations (JS uniquement, jamais cachées sans JS) ---------- */
.js:not(.anim-ready) [data-reveal] { opacity: 0; }
.line-mask { overflow: clip; padding-bottom: .06em; }

/* ---------- Pages internes : intro de page ---------- */
.page-intro { padding: calc(var(--s-7) + 2rem) 0 var(--s-5); }
.page-intro h1 { max-width: 14ch; }
.page-intro .lede { margin-top: var(--s-3); }

/* ---------- Transition de page : la ligne de métal se trace, deux volets se ferment puis s'ouvrent ---------- */
html::before, html::after {
  content: ""; position: fixed; z-index: 95; top: 0; bottom: 0; width: 50.5%; background: var(--bg); pointer-events: none;
  transition: transform .6s var(--ease-inout);
}
html::before { left: 0; transform: translateX(-101%); }
html::after { right: 0; transform: translateX(101%); }
html.pt-out::before, html.pt-out::after, .js.pt-in:not(.pt-open)::before, .js.pt-in:not(.pt-open)::after { transform: none; }
.js.pt-in:not(.pt-open)::before, .js.pt-in:not(.pt-open)::after { transition: none; }
.pt-line {
  position: fixed; z-index: 96; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--metal-v); pointer-events: none;
  transform: scaleY(0); transition: transform .5s var(--ease-out), opacity .3s;
}
.pt-out .pt-line, .pt-in .pt-line { transform: scaleY(1); }
.pt-open .pt-line { opacity: 0; }

/* ---------- Premier écran : titres visibles dès le premier rendu (LCP), simple montée ---------- */
@keyframes rise { from { opacity: .01; transform: translateY(.3em); } }
.rise { animation: rise 1.1s var(--ease-out) .05s both; }
/* contrôles affichés par JS : leur place est réservée pour éviter tout décalage (CLS) */
.js .filters[hidden], .js .picks[hidden], .js .sum-total[hidden] { display: flex !important; visibility: hidden; }
.js .qty-btn[hidden] { display: block !important; visibility: hidden; }

/* ---------- Bandeau cookies : discret, en bas, accepter et refuser à égalité ---------- */
.cookies {
  position: fixed; z-index: calc(var(--z-header) + 5); left: var(--gutter); bottom: var(--s-2); max-width: 34rem;
  display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 2px);
  background: color-mix(in oklab, var(--bg-raised) 94%, transparent); backdrop-filter: blur(10px);
  box-shadow: inset 1px 0 0 var(--brand); font-size: var(--t-s); animation: rise .6s var(--ease-out) both;
}
.cookies p { max-width: none; }
.cookies-actions { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.cookies .btn { min-height: 46px; }
.cookie-manage { font: inherit; color: inherit; }
@media (max-width: 640px) { .cookies { right: var(--gutter); bottom: var(--s-1); } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   ACCUEIL
   ===================================================================== */

/* ---------- Intro (8 s, une fois par session) ---------- */
.intro { position: fixed; inset: 0; z-index: var(--z-intro); display: none; background: var(--bg); overflow: hidden; }
.js:not(.intro-seen) .intro { display: block; }
.intro-case {
  position: absolute; top: 0; bottom: 0; width: 50%; background-color: #1A100A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.intro-case--l { left: 0; } .intro-case--r { right: 0; }
.intro-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: var(--metal-v); transform-origin: top; transform: scaleY(0); overflow: hidden; z-index: 2; }
.intro-line-sheen { position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(transparent, #fff, transparent); }
.intro-logo { position: absolute; left: 50%; top: 50%; width: min(56vw, 420px); transform: translate(-50%, -50%) scale(.96); opacity: 0; }
.intro-mist { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.intro-mist span {
  position: absolute; left: 50%; top: 50%; width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 232, 221, .16) 0%, rgba(238, 232, 221, .05) 35%, transparent 62%);
  opacity: 0; transform: scale(.4);
}
.intro-mist span:nth-child(2) { margin-left: -50vmax; margin-top: -30vmax; }
.intro-mist span:nth-child(3) { margin-left: -20vmax; margin-top: -42vmax; }
.intro-mist span:nth-child(4) { margin-left: -45vmax; margin-top: -24vmax; }
.intro-mist span:nth-child(5) { margin-left: -26vmax; margin-top: -26vmax; }
.intro-mist span:nth-child(6) { margin-left: -38vmax; margin-top: -46vmax; }
.intro-skip { position: absolute; z-index: 4; right: var(--gutter); bottom: var(--s-3); min-height: 44px; padding: 0 .25rem; font-size: var(--t-s); color: var(--ink-soft); }
.intro-skip:hover { color: var(--ink); }
.intro-playing body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } }

/* ---------- Hero : les cinq flacons ---------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding-top: calc(var(--s-6) + 1rem); overflow: hidden; isolation: isolate; }
/* fond : la photo du trio parmi ses matières, en profondeur derrière les flacons qu'on survole */
.hero-bg { position: absolute; inset: 30% 0 0; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%); mask-image: linear-gradient(180deg, transparent, #000 18%); }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, color-mix(in oklab, var(--bg) 80%, transparent) 82%, var(--bg) 100%); }
@media (max-width: 1023px) { /* mobile et tablette : la photo entre le titre et les flacons, pas derrière eux */
  .hero { grid-template-rows: auto auto 1fr auto; }
  .hero-copy { grid-row: 1; }
  .hero-bg { position: relative; inset: auto; grid-row: 2; z-index: 0; height: clamp(220px, 34svh, 420px); margin-top: var(--s-2);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 84%, transparent); }
  .hero-bg img { object-position: 60% 45%; }
  .hero-bg::after { content: none; }
  .hero-bottles { grid-row: 3; align-self: end; }
  .hero-hint { grid-row: 4; }
}
.hero-title { font-size: clamp(3.25rem, 1.4rem + 7.4vw, 6.75rem); }
.hero-sub { margin-top: var(--s-2); color: var(--ink-soft); font-size: var(--t-l); }
.hero-halo {
  position: absolute; left: 0; bottom: 4vh; width: min(70vw, 900px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 30%, transparent) 0%, transparent 62%);
  transform: translateX(calc(var(--hx, 50vw) - 50%)); opacity: var(--ho, .55);
  transition: transform 1.1s var(--ease-out), opacity .8s, background .8s;
}
.hero-bottles {
  --hb-gap: clamp(.6rem, 4.5vw, 5rem);
  display: flex; justify-content: center; align-items: flex-end; gap: var(--hb-gap);
  padding: var(--s-4) var(--gutter) 0; touch-action: pan-y; position: relative;
}
.hb { display: grid; justify-items: center; transition: transform 1s var(--ease-out), opacity .7s var(--ease-out); outline-offset: 10px; }
.hb-img {
  position: relative; display: block; aspect-ratio: 106 / 460;
  height: min(30svh, 470px, calc((100vw - 2 * var(--gutter) - 4 * var(--hb-gap)) / 5 * 4.34));
  animation: hb-float 6.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s);
}
.hb-img img { width: 100%; height: 100%; }
.hb-sheen { position: absolute; inset: 0; overflow: hidden; -webkit-mask: var(--src) center / 100% 100% no-repeat; mask: var(--src) center / 100% 100% no-repeat; mix-blend-mode: overlay; }
.hb-sheen::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75) 50%, transparent);
  animation: hb-sheen 7s var(--ease-inout) infinite; animation-delay: calc(var(--i) * .9s);
}
@keyframes hb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes hb-sheen { 0%, 55% { transform: translateX(0); } 85%, 100% { transform: translateX(420%); } }
.hb-meta { position: absolute; top: 100%; left: 50%; display: grid; justify-items: center; gap: .15rem; width: max-content; max-width: 46vw; margin-top: 1.2rem; text-align: center; opacity: 0; transform: translate(-50%, 8px); transition: opacity .5s, transform .7s var(--ease-out); }
.hero-bottles li { position: relative; padding-bottom: 5.5rem; }
.hb-name { font-family: var(--f-display); font-size: var(--t-h3); line-height: 1; }
.hb-family { font-size: var(--t-s); color: var(--ink-soft); }
.hero-bottles li.is-active .hb, .hero-bottles li:not(.is-dim) .hb:hover, .hb:focus-visible { transform: translateY(-14px) scale(1.05); }
.hero-bottles li.is-active .hb-meta, .hb:hover .hb-meta, .hb:focus-visible .hb-meta { opacity: 1; transform: translate(-50%, 0); }
.hero-bottles.has-active li:not(.is-active) .hb { opacity: .3; transform: scale(.94) translateY(6px); }
.hero-hint { text-align: center; padding: 0 var(--gutter) var(--s-4); font-size: var(--t-xs); color: var(--ink-soft); }
.hint-touch { display: none; }
@media (pointer: coarse) { .hint-fine { display: none; } .hint-touch { display: inline; } }
@media (min-width: 1024px) {
  /* la photo occupe la droite et se fond dans le noir à gauche ; titre et flacons survolables à gauche */
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: 1fr auto auto; column-gap: var(--s-5); padding: var(--s-6) var(--gutter) 0; }
  .hero-bg { inset: 0 0 0 36%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
  .hero-bg img { object-position: 66% 50%; }
  .hero-bg::after { background: linear-gradient(180deg, transparent 70%, var(--bg) 100%); }
  .hero-copy { width: auto; margin: 0; grid-column: 1; grid-row: 1; align-self: end; }
  .hero-title { font-size: clamp(3.5rem, 1rem + 4.4vw, 6.75rem); }
  .hero-bottles { grid-column: 1; grid-row: 2; justify-content: flex-start; padding: var(--s-4) 0 0; --hb-gap: clamp(1rem, 2vw, 2rem); }
  .hb-img { height: min(30svh, 260px); }
  .hero-bottles li { padding-bottom: 4.5rem; }
  .hero-hint { grid-column: 1; text-align: left; padding-left: 0; }
}
@media (max-width: 640px) {
  .hero { padding-top: calc(var(--s-6) - 1rem); }
  .hb-name { font-size: 1.35rem; }
  .hero-bottles li { padding-bottom: 4.5rem; }
  .hero-bottles li:first-child .hb-meta { left: 0; justify-items: start; text-align: left; transform: translate(0, 8px); }
  .hero-bottles li:last-child .hb-meta { left: auto; right: 0; justify-items: end; text-align: right; transform: translate(0, 8px); }
  .hero-bottles li:is(:first-child, :last-child).is-active .hb-meta { transform: none; }
}

/* ---------- Florence : la photo en grand, lumineuse, fondue dans la page ---------- */
.florence { position: relative; padding-bottom: var(--s-6); }
.florence-img { position: relative; height: min(92svh, 920px); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
.florence-img img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; object-position: 50% 40%; }
.florence-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 35%, transparent) 0%, transparent 18%); }
.florence .manifeste-grid { position: relative; margin-top: calc(-1 * var(--s-6)); }
@media (max-width: 760px) { .florence-img { height: 62svh; } .florence .manifeste-grid { margin-top: calc(-1 * var(--s-4)); } }

/* ---------- Manifeste ---------- */
.manifeste-grid { display: grid; grid-template-columns: minmax(8rem, 1fr) 4fr; gap: var(--s-4); align-items: start; }
.kicker { font-family: var(--f-display); font-style: italic; font-size: var(--t-l); color: var(--gold); letter-spacing: 0; line-height: 1.4; }
.manifeste-text { font-family: var(--f-display); font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem); line-height: 1.18; max-width: 24ch; }
.manifeste-note { margin-top: var(--s-4); color: var(--ink-soft); }
@media (max-width: 760px) { .manifeste-grid { grid-template-columns: 1fr; gap: var(--s-2); } }

/* ---------- Cinq couleurs, cinq signatures (épinglé) ---------- */
.sig-title { padding-top: var(--s-6); padding-bottom: var(--s-4); }
.sig-kicker { padding-top: var(--s-6); }
.sig-kicker + .sig-title { padding-top: .4rem; }
.hero-kicker { margin-bottom: .6rem; }
.page-intro .kicker { margin-bottom: .4rem; }
.sig-panel { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: var(--s-4); min-height: 100svh; padding: var(--s-5) var(--gutter); overflow: hidden; }
.sig-bg { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(55% 65% at 30% 52%, color-mix(in oklab, var(--accent) 34%, transparent), transparent 72%),
  linear-gradient(180deg, transparent, color-mix(in oklab, var(--accent) 8%, transparent)); }
.sig-visual { display: grid; place-items: center; }
.sig-visual img { height: min(72vh, 680px); width: auto; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .55)); }
.sig-leather { font-size: var(--t-s); color: var(--ink-soft); }
.sig-name { font-size: var(--t-mega); line-height: .9; margin: .1em 0 .15em; }
.sig-name--long { font-size: clamp(2.75rem, 1.2rem + 5vw, 6.5rem); line-height: 1; }
.sig-family { font-family: var(--f-display); font-style: italic; font-size: var(--t-h3); color: var(--accent); }
.sig-tagline { margin-top: var(--s-2); font-size: var(--t-l); }
.sig-notes { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s-2) var(--s-4); margin: var(--s-4) 0; }
.sig-notes > div { border-left: 1px solid var(--hair); padding-left: var(--s-2); }
.sig-notes dt { font-size: var(--t-xs); color: var(--ink-soft); }
.sig-notes dd { font-size: var(--t-s); }
.sig-link { font-size: var(--t-s); }
/* version épinglée (JS + mouvement autorisé) */
.sig-pinned .sig-stage { position: relative; height: 100svh; }
.sig-pinned .sig-panel { position: absolute; inset: 0; }
.sig-3d { position: absolute; z-index: 2; pointer-events: none; }
.sig-3d canvas { width: 100% !important; height: 100% !important; }
.has-3d .sig-visual img { visibility: hidden; }
@media (max-width: 760px) {
  .sig-panel { grid-template-columns: 1fr; align-content: center; gap: var(--s-1); padding-top: 4.5rem; padding-bottom: var(--s-3); }
  .sig-visual img { height: 30svh; }
  .sig-name { font-size: clamp(3rem, 15vw, 5rem); }
  .sig-name--long { font-size: clamp(2.25rem, 10.5vw, 3.5rem); }
  .sig-family { font-size: 1.4rem; }
  .sig-tagline { margin-top: .5rem; font-size: var(--t-m); }
  .sig-notes { grid-template-columns: repeat(3, 1fr); gap: var(--s-1); margin: var(--s-2) 0; }
  .sig-notes > div { padding-left: .6rem; }
}

/* ---------- Ce que l'on respire : la photo des matières et les parfums qui les portent ---------- */
.ingredients h2 { margin-bottom: var(--s-4); }
.ingr-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ingr-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.ingr-list li { display: grid; gap: .2rem; padding-top: .8rem; border-top: 1px solid var(--hair); }
.ingr-name { font-family: var(--f-display); font-size: var(--t-l); }
.ingr-in { font-size: var(--t-s); }
.ingr-in a { color: var(--accent); }
@media (max-width: 760px) { .ingr-img img { aspect-ratio: 4 / 3; } }

/* ---------- Nés de l'écoute ---------- */
.ecoute-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-5); align-items: center; padding-top: var(--s-5); }
.ecoute-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ecoute-text h2 { margin-bottom: var(--s-3); }
.stats { display: flex; gap: var(--s-5); margin-top: var(--s-4); }
.stats > div { display: flex; flex-direction: column-reverse; gap: .3rem; padding-left: var(--s-2); border-left: 1px solid; border-image: var(--metal-v) 1; }
.stats dd { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: 1; }
.stats dt { font-size: var(--t-s); color: var(--ink-soft); }
@media (max-width: 860px) { .ecoute-grid { grid-template-columns: 1fr; } .ecoute-img img { aspect-ratio: 4 / 3; } }

/* ---------- Matière ---------- */
.matiere-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: end; padding-top: var(--s-5); }
.matiere-img { overflow: hidden; }
.matiere-img img { width: 100%; aspect-ratio: 830 / 941; object-fit: cover; transform: scale(1.12); }
.matiere-text { padding-bottom: var(--s-4); }
.matiere-text h2 { margin-bottom: var(--s-3); }
@media (max-width: 860px) { .matiere-grid { grid-template-columns: 1fr; } }

/* ---------- Appel au quiz ---------- */
.cta-quiz { margin-top: var(--s-6); padding-bottom: var(--s-6); background: var(--brand); color: var(--bg); }
.cta-quiz .btn { --b-bg: var(--bg); --b-fg: var(--ink); }
.cta-quiz .btn:hover { --b-bg: var(--ink); --b-fg: var(--bg); }
.cta-quiz :focus-visible { outline-color: var(--bg); }
.cta-quiz ::selection { background: var(--bg); color: var(--brand); }
.cta-quiz .wrap { padding-top: var(--s-6); }
.cta-quiz h2 { font-size: clamp(3.25rem, 1.2rem + 10vw, 13rem); max-width: 9ch; line-height: .95; }
.cta-quiz .lede { margin: var(--s-3) 0 var(--s-4); color: var(--bg); }

/* =====================================================================
   FICHE PARFUM
   ===================================================================== */
.pdp-hero { padding-top: calc(var(--s-6) + .5rem); }
.crumbs { font-size: var(--t-s); color: var(--ink-soft); margin-bottom: var(--s-3); }
.pdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: center; min-height: calc(100svh - var(--s-7)); }
.pdp-stage { position: relative; display: grid; grid-template-rows: 100%; place-items: center; height: min(78svh, 820px); margin: 0; touch-action: pan-y; cursor: grab; outline-offset: 8px; }
.pdp-stage:active { cursor: grabbing; }
.pdp-halo { position: absolute; inset: 8% 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 32%, transparent), transparent); pointer-events: none; }
.pdp-fallback { position: relative; height: 92%; width: auto; transition: opacity .8s var(--ease-out); filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .5)); }
.pdp-canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease-out); }
.pdp-canvas canvas { width: 100% !important; height: 100% !important; }
.pdp-stage.is-3d .pdp-canvas { opacity: 1; }
.pdp-stage.is-3d .pdp-fallback { opacity: 0; }
.pdp-hint { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: var(--t-xs); color: var(--ink-soft); opacity: 0; transition: opacity .6s; }
.pdp-stage.is-3d .pdp-hint { opacity: 1; }
.pdp-leather { font-size: var(--t-s); color: var(--ink-soft); }
.pdp-name { font-size: var(--t-mega); line-height: .9; margin: .08em 0 .12em; }
.pdp-name--long { font-size: clamp(3rem, 1.4rem + 5.4vw, 7.5rem); line-height: 1; }
.pdp-family { font-family: var(--f-display); font-style: italic; font-size: var(--t-h3); color: var(--accent); }
.pdp-tagline { margin-top: var(--s-2); font-size: var(--t-l); }
.pdp-price { margin: var(--s-4) 0 var(--s-3); }
.pdp-price .num { font-size: var(--t-h3); margin-right: .5rem; }

/* pyramide en brume */
.pyramide h2 { margin-bottom: var(--s-4); }
.pyr { display: grid; gap: 0; }
.pyr-tier { position: relative; display: grid; grid-template-columns: minmax(10rem, 1fr) 3fr; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-top: 1px solid var(--hair); overflow: hidden; }
.pyr-tier:last-child { border-bottom: 1px solid var(--hair); }
.pyr-label h3 { font-size: var(--t-h3); }
.pyr-label p { font-size: var(--t-s); color: var(--ink-soft); margin-top: .3rem; }
.pyr-notes { display: flex; flex-wrap: wrap; gap: .2em .8em; font-family: var(--f-display); font-size: clamp(2rem, 1.2rem + 3vw, 4.25rem); line-height: 1.1; }
.pyr-notes li { position: relative; z-index: 1; }
.pyr-mist { position: absolute; inset: 0; pointer-events: none; }
.pyr-mist i { position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in oklab, var(--accent) 70%, white); opacity: 0; animation: mist-rise var(--d, 6s) linear infinite; animation-delay: var(--delay, 0s); }
@keyframes mist-rise { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .5; } 100% { transform: translate(var(--dx, 10px), -180px) scale(1.6); opacity: 0; } }
@media (max-width: 760px) { .pyr-tier { grid-template-columns: 1fr; gap: var(--s-2); } }

/* sur la peau */
.peau-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-5); align-items: center; }
.peau-visual { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%); }
.peau-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s var(--ease-inout); }
.peau-visual img.is-on { opacity: 1; }
.peau-ctrl h2 { margin-bottom: var(--s-3); }
.peau-stage { padding: var(--s-2) 0; border-top: 1px solid var(--hair); }
.peau-time { font-family: var(--f-display); font-size: var(--t-h3); }
.peau-notes { font-size: var(--t-l); margin-top: .2rem; }
.peau-tier { font-size: var(--t-s); color: var(--ink-soft); }
.has-range .peau-stages { display: grid; }
.has-range .peau-stage { grid-area: 1 / 1; border: 0; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .8s var(--ease-out); }
.has-range .peau-stage.is-on { opacity: 1; transform: none; }
.peau-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin-top: var(--s-4); background: transparent; cursor: pointer; }
.peau-range::-webkit-slider-runnable-track { height: 1px; background: var(--hair); }
.peau-range::-moz-range-track { height: 1px; background: var(--hair); }
.peau-range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 28px; margin-top: -14px; background: var(--metal-v); border: 0; }
.peau-range::-moz-range-thumb { width: 2px; height: 28px; background: var(--ink); border: 0; border-radius: 0; }
.peau-ticks { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--ink-soft); }
@media (max-width: 860px) { .peau-grid { grid-template-columns: 1fr; } .peau-visual { width: min(70vw, 320px); margin-inline: auto; } }

/* histoire, matières, à porter, accord, voisins */
.histoire-grid { display: grid; grid-template-columns: minmax(8rem, 1fr) 4fr; gap: var(--s-4); padding-top: var(--s-5); }
.histoire-text { font-family: var(--f-display); font-size: clamp(1.5rem, 1rem + 1.8vw, 2.6rem); line-height: 1.25; max-width: 30ch; }
.pdp-matieres h2, .pdp-porter h2, .pdp-voisins h2 { padding-top: var(--s-5); margin-bottom: var(--s-4); }
.mat-figure { width: min(100%, 980px); margin-left: auto; overflow: hidden; }
.mat-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transform: scale(1.1); }
.peau-visual .peau-flacon { inset: 12% 0; width: auto; height: 76%; margin: auto; object-fit: contain; opacity: 1; }
.porter { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.porter > div { border-left: 1px solid; border-image: var(--metal-v) 1; padding-left: var(--s-2); }
.porter dt { font-size: var(--t-s); color: var(--ink-soft); }
.porter dd { font-family: var(--f-display); font-size: var(--t-h3); margin-top: .3rem; }
.gauge { display: inline-flex; gap: 5px; vertical-align: middle; margin-right: .4rem; }
.gauge span { width: 1px; height: 1.1em; background: var(--hair); }
.gauge span.on { background: var(--metal-v); width: 2px; }
.accord-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: center; padding-top: var(--s-5); }
.accord-grid img { height: min(46vh, 380px); width: auto; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .5)); }
.accord-line { font-family: var(--f-display); font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem); line-height: 1.15; margin: var(--s-2) 0; max-width: 20ch; }
.mini-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.mini { display: grid; justify-items: center; gap: .5rem; padding: var(--s-3) 0; text-align: center; }
.mini img { height: 220px; width: auto; transition: transform .8s var(--ease-out); }
.mini:hover img, .mini:focus-visible img { transform: translateY(-8px); }
.mini-name { font-family: var(--f-display); font-size: var(--t-l); }
.mini-family { font-size: var(--t-s); color: var(--ink-soft); }
@media (max-width: 860px) {
  .pdp-grid { grid-template-columns: 1fr; gap: var(--s-3); min-height: 0; }
  .pdp-stage { height: 56svh; }
  .histoire-grid { grid-template-columns: 1fr; gap: var(--s-2); }
  .porter { grid-template-columns: 1fr; gap: var(--s-3); }
  .mat-figure img { aspect-ratio: 4 / 5; }
  .accord-grid { grid-template-columns: 1fr; justify-items: start; }
  .accord-grid img { height: 240px; }
  .mini-list { grid-template-columns: repeat(2, 1fr); }
  .mini img { height: 170px; }
}

/* bouton « Demander ce parfum » fixé en bas sur mobile */
.pdp-sticky { display: none; }
@media (max-width: 760px) {
  .pdp-sticky {
    position: fixed; z-index: var(--z-header); left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
    padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
    border-top: 1px solid var(--hair);
  }
  .pdp-sticky > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pdp-sticky-name { font-family: var(--f-display); font-size: var(--t-l); }
  .pdp-sticky .btn { white-space: nowrap; flex: none; padding-inline: 1rem 1.2rem; }
  .page-pdp .site-footer { padding-bottom: 6rem; }
}

/* =====================================================================
   LES PARFUMS : liste, filtres, carte olfactive, comparateur
   ===================================================================== */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0; border-block: 1px solid var(--hair); margin-bottom: var(--s-5); }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.filter-label { font-size: var(--t-s); color: var(--ink-soft); margin-right: .25rem; }
.chip { min-height: 40px; padding: 0 1rem; font-size: var(--t-s); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow var(--d-fast), background-color var(--d-fast), color var(--d-fast); }
.chip:hover { box-shadow: inset 0 0 0 1px var(--ink-soft); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.filter-reset { font-size: var(--t-s); color: var(--ink-soft); }
.filter-count { margin-left: auto; font-size: var(--t-s); color: var(--ink-soft); }

.pcards { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); }
.pcard[hidden] { display: none; }
.pcard-link { display: grid; justify-items: start; gap: .35rem; padding-bottom: var(--s-3); }
.pcard-img { position: relative; display: grid; grid-template-rows: 100%; place-items: center; width: 100%; height: min(52vh, 520px); margin-bottom: var(--s-2); }
.pcard-img::before { content: ""; position: absolute; inset: 10% -10%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 28%, transparent), transparent); opacity: 0; transition: opacity .7s; }
.pcard-img img { position: relative; height: 92%; width: auto; transition: transform 1s var(--ease-out); filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .5)); }
.pcard-link:hover .pcard-img::before, .pcard-link:focus-visible .pcard-img::before { opacity: 1; }
.pcard-link:hover .pcard-img img, .pcard-link:focus-visible .pcard-img img { transform: translateY(-12px) rotate(-2deg); }
.pcard-leather { font-size: var(--t-xs); color: var(--ink-soft); }
.pcard-name { font-family: var(--f-display); font-size: var(--t-h3); line-height: 1.05; }
.pcard-family { font-family: var(--f-display); font-style: italic; color: var(--accent); }
.pcard-tagline { font-size: var(--t-s); color: var(--ink-soft); }
.filter-empty { padding: var(--s-5) 0; font-size: var(--t-l); }
@media (max-width: 1100px) { .pcards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .pcards { grid-template-columns: 1fr; gap: 0; }
  .pcard-link { grid-template-columns: 34% 1fr; grid-template-rows: auto auto auto 1fr; column-gap: var(--s-3); align-items: start; padding: var(--s-3) 0; border-top: 1px solid var(--hair); }
  .pcard-img { grid-row: 1 / span 4; height: 240px; margin: 0; }
  .filter-count { margin-left: 0; width: 100%; }
}

/* carte olfactive */
.carte h2 { padding-top: var(--s-5); }
.carte .lede { margin: var(--s-2) 0 var(--s-4); }
.map { position: relative; aspect-ratio: 16 / 9; max-height: 80vh; margin-inline: auto; border: 1px solid var(--hair);
  background:
    linear-gradient(var(--hair), var(--hair)) center / 1px 100% no-repeat,
    linear-gradient(var(--hair), var(--hair)) center / 100% 1px no-repeat,
    radial-gradient(60% 60% at 80% 20%, rgba(232, 132, 58, .08), transparent),
    radial-gradient(60% 60% at 20% 80%, rgba(224, 68, 75, .06), transparent); }
.map-axis { position: absolute; display: flex; justify-content: space-between; font-family: var(--f-display); font-style: italic; color: var(--ink-soft); pointer-events: none; }
.map-axis--x { left: 1rem; right: 1rem; top: 50%; transform: translateY(-140%); }
.map-axis--y { top: 1rem; bottom: 1rem; left: 50%; flex-direction: column; align-items: center; transform: translateX(-50%); }
.map-axis--y span { background: var(--bg); padding: 0 .4rem; }
.map-dots { position: absolute; inset: 0; }
.map-dot { position: absolute; transform: translate(-50%, -50%); }
.map-dot a { position: relative; display: grid; justify-items: center; gap: .3rem; padding: .5rem; }
.map-dot img { height: clamp(70px, 12vw, 140px); width: auto; transition: transform .7s var(--ease-out); filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .5)); }
.map-name { font-family: var(--f-display); font-size: var(--t-l); white-space: nowrap; }
.map-tip { position: absolute; left: 100%; top: 20%; width: max-content; max-width: 16rem; padding: .7rem .9rem; background: var(--bg-raised); border-left: 1px solid var(--accent); font-size: var(--t-s); color: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .5s var(--ease-out); pointer-events: none; z-index: 2; }
.map-dot a:hover img, .map-dot a:focus-visible img { transform: translateY(-8px) scale(1.06); }
.map-dot a:hover .map-tip, .map-dot a:focus-visible .map-tip { opacity: 1; transform: none; }
.map-unplaced { margin-top: var(--s-3); font-size: var(--t-s); }
@media (max-width: 760px) {
  .map { aspect-ratio: 1; }
  .map-tip { display: none; }
  .map-name { font-size: var(--t-s); }
}

/* comparateur */
.compare h2 { padding-top: var(--s-5); margin-bottom: var(--s-3); }
.picks { border: 0; padding: 0; margin: 0 0 var(--s-4); display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.picks legend { margin-bottom: .75rem; font-size: var(--t-s); }
.pick { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 1rem; box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; }
.pick:has(input:checked) { box-shadow: inset 0 0 0 1px var(--accent); }
.pick input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }
.pick:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.cmp-scroll { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp th, .cmp td { padding: 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.cmp tbody th { font-weight: 400; font-size: var(--t-s); color: var(--ink-soft); width: 9rem; }
.cmp thead th { font-family: var(--f-display); font-weight: 400; font-size: var(--t-h3); }
.cmp thead th img { height: 150px; width: auto; margin-bottom: .75rem; }
.cmp thead th span { display: block; }
.cmp [data-slug].is-off { display: none; }

/* =====================================================================
   QUIZ : typographique, une question par écran
   ===================================================================== */
.page-quiz .site-footer { margin-top: 0; }
.quiz { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 4.75rem 0 var(--s-3); overflow: hidden; }
.quiz-glow { position: absolute; inset: -20% -10%; z-index: -1; background: radial-gradient(50% 50% at 70% 45%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 70%); transition: background 1.2s; }
.quiz-line { position: absolute; left: calc(var(--gutter) / 2); top: 5rem; bottom: var(--s-3); width: 1px; background: var(--hair); }
.quiz-line span { position: absolute; inset: 0; background: var(--metal-v); transform-origin: top; transform: scaleY(var(--q, 0)); transition: transform .8s var(--ease-out); }
.quiz-start, .quiz-form, .quiz-result { grid-area: 1 / 1; }
.q-count { font-size: var(--t-s); color: var(--ink-soft); }
.quiz-intro { font-family: var(--f-display); font-size: clamp(2.25rem, 1.2rem + 4.4vw, 5.5rem); line-height: 1.05; margin: var(--s-2) 0 var(--s-4); max-width: 16ch; }
.q-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.q-step:not(.is-on) { display: none; }
.q-title { padding: 0; font-family: var(--f-display); font-size: clamp(2rem, 1rem + 4.2vw, 5rem); line-height: 1.05; max-width: 18ch; margin: var(--s-1) 0 var(--s-4); outline: none; }
.q-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 980px; }
.q-answer {
  display: flex; align-items: center; gap: 1rem; min-height: 64px; padding: .8rem 1.2rem; text-align: left;
  font-size: var(--t-l); box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow var(--d-fast), background-color var(--d-fast), transform var(--d-base) var(--ease-out);
}
.q-answer:hover { box-shadow: inset 0 0 0 1px var(--ink-soft); }
.q-answer.is-picked { background: var(--accent); color: var(--bg); box-shadow: none; }
.q-key { font-family: var(--f-display); font-size: var(--t-s); color: var(--ink-soft); width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border: 1px solid var(--hair); flex: none; }
.q-answer.is-picked .q-key { color: var(--bg); border-color: currentColor; }
.q-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.q-back { min-height: 44px; font-size: var(--t-s); }
.q-back[disabled] { opacity: .35; cursor: default; }
.q-help { font-size: var(--t-xs); color: var(--ink-soft); }
@media (pointer: coarse) { .q-help { display: none; } }
.r-kicker { font-family: var(--f-display); font-style: italic; font-size: var(--t-l); color: var(--ink-soft); }
.r-name { font-size: var(--t-mega); line-height: .9; color: var(--accent); outline: none; margin: .1em 0; }
.r-match { font-family: var(--f-display); font-size: var(--t-h3); }
.r-family { font-family: var(--f-display); font-style: italic; font-size: var(--t-l); margin-top: .3rem; }
.r-tagline { margin-top: var(--s-1); color: var(--ink-soft); }
.r-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: var(--s-4) 0 var(--s-3); }
.r-second { font-size: var(--t-s); color: var(--ink-soft); }
.r-more { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); font-size: var(--t-s); }
@media (max-width: 640px) {
  .quiz { align-items: start; padding-top: 5.25rem; }
  .q-answers { grid-template-columns: 1fr; gap: .5rem; }
  .q-answer { min-height: 54px; font-size: var(--t-m); padding: .6rem 1rem; }
  .q-title { margin-bottom: var(--s-3); }
  .q-nav { margin-top: var(--s-2); }
}

/* =====================================================================
   LA MAISON : récit en chapitres (horizontal si mouvement autorisé)
   ===================================================================== */
.chapter { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-5); align-items: center; padding: var(--s-6) var(--gutter); }
.chapter + .chapter { border-top: 1px solid var(--hair); }
.ch-num { font-family: var(--f-display); font-style: italic; color: var(--ink-soft); }
.ch-title { font-size: var(--t-h1); margin: .15em 0 var(--s-3); }
.ch-text p { max-width: 40ch; }
.ch-text p + p { margin-top: var(--s-2); }
.ch-text .btn { margin-top: var(--s-4); }
.ch-big { font-size: clamp(4rem, 2.5rem + 6vw, 9rem); line-height: 1; margin-top: var(--s-4) !important; }
.ch-fig { overflow: hidden; }
.ch-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ch-fig--tall img { aspect-ratio: 4 / 5; max-height: 70svh; width: auto; margin-inline: auto; }
.chapter[data-accent] .ch-title { color: var(--ch-accent, var(--ink)); }
.ch-bottles { display: flex; justify-content: center; align-items: flex-end; gap: clamp(.6rem, 2.5vw, 2.5rem); }
.ch-bottles a { display: grid; justify-items: center; gap: .6rem; font-family: var(--f-display); font-size: var(--t-s); }
.ch-bottles img { height: clamp(140px, 30vh, 300px); width: auto; transition: transform .8s var(--ease-out); }
.ch-bottles a:hover img, .ch-bottles a:focus-visible img { transform: translateY(-10px); }

/* version horizontale */
.h-scroll .chapters { overflow: hidden; }
.h-scroll .chapters-track { display: flex; width: max-content; }
.h-scroll .chapter { width: min(86vw, 1320px); height: 100svh; flex: none; border: 0; padding: 6rem var(--s-5) var(--s-4) var(--gutter); }
.h-scroll .chapter::after { content: ""; position: absolute; right: 0; top: 20%; bottom: 20%; width: 1px; background: var(--metal-v); opacity: .5; }
.h-scroll .chapter:last-child::after { display: none; }
@media (max-width: 860px) {
  .chapter { grid-template-columns: 1fr; gap: var(--s-3); padding-block: var(--s-5); }
  .ch-title { font-size: clamp(2.75rem, 12vw, 4.5rem); }
  .h-scroll .chapter { width: 100vw; padding: 5.5rem var(--gutter) var(--s-3); align-content: center; }
  .h-scroll .ch-fig img { max-height: 32svh; }
  .h-scroll .ch-big { font-size: 3.5rem; margin-top: var(--s-2) !important; }
}

/* ---------- Demander un parfum ---------- */
.req { display: grid; gap: var(--s-5); padding-bottom: var(--s-5); }
.req-block { border: 0; padding: 0; margin: 0 0 var(--s-5); min-width: 0; }
.req-h { font-family: var(--f-display); font-weight: 400; font-size: var(--t-h3); line-height: 1.1; padding: 0; margin-bottom: var(--s-3); }
.req-list { border-top: 1px solid var(--hair); }
.req-item { position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--hair); }
.req-item::before { /* la ligne s'allume quand le parfum est choisi */
  content: ""; position: absolute; left: calc(var(--gutter) * -.5); top: 18%; bottom: 18%; width: 1px; background: var(--accent);
  transform: scaleY(0); transition: transform var(--d-base) var(--ease-out);
}
.req-item.is-on::before { transform: scaleY(1); }
.req-item img { width: 26px; height: auto; }
.req-id { display: grid; gap: .15rem; cursor: pointer; min-width: 0; }
.req-name { font-family: var(--f-display); font-size: var(--t-h3); line-height: 1.1; transition: color var(--d-base); }
.req-item.is-on .req-name { color: var(--accent); }
.req-fam { font-size: var(--t-s); color: var(--ink-soft); }
.qty { display: flex; align-items: center; box-shadow: inset 0 0 0 1px var(--hair); }
.qty-btn { position: relative; width: 48px; height: 48px; touch-action: manipulation; }
.qty-btn::before, .qty-btn--plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.qty-btn::before { width: 13px; height: 1px; }
.qty-btn--plus::after { width: 1px; height: 13px; }
.qty-btn:disabled { opacity: .3; cursor: not-allowed; }
.qty input { width: 4ch; min-height: 48px; text-align: center; background: transparent; border: 0; font-family: var(--f-display); font-size: var(--t-l); font-variant-numeric: lining-nums tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.req-err { color: #F2A7A0; margin-top: var(--s-2); }

.fields { display: grid; gap: var(--s-3) var(--s-4); }
.field label { display: block; font-size: var(--t-s); color: var(--ink-soft); margin-bottom: .35rem; }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: .6rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0;
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.field input:user-invalid { border-bottom-color: #F2A7A0; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }

.req-sum { position: relative; padding: var(--s-4) var(--s-3) var(--s-3); background: var(--bg-raised); }
.req-sum::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--metal-v); }
.sum-lines li { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: var(--s-2); padding: .6rem 0; border-bottom: 1px solid var(--hair); }
.sl-name { font-family: var(--f-display); font-size: var(--t-l); color: var(--accent); }
.sl-q { color: var(--ink-soft); font-size: var(--t-s); }
.sum-empty { color: var(--ink-soft); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin: var(--s-3) 0 var(--s-1); }
.sum-total .num { font-size: var(--t-h3); }
.sum-note { font-size: var(--t-s); }
.req-submit { width: 100%; justify-content: center; margin-top: var(--s-3); }
@media (min-width: 1024px) {
  .req { grid-template-columns: 1fr minmax(320px, 400px); gap: var(--s-6); align-items: start; }
  .req-sum { position: sticky; top: 6.5rem; }
}

.req-review { padding: var(--s-3) 0 var(--s-6); }
.rev-grid { display: grid; gap: var(--s-4); }
.rev-you > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-2); padding: .6rem 0; border-bottom: 1px solid var(--hair); }
.rev-you dt, .contact-list dt { color: var(--ink-soft); font-size: var(--t-s); }
.rev-you dd { overflow-wrap: anywhere; white-space: pre-line; }
.req-review .sum-total { max-width: 34rem; }
.rev-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.rev-status { min-height: 1.6em; margin-top: var(--s-2); color: var(--ink-soft); }
@media (min-width: 860px) { .rev-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }

.req-done { position: relative; padding: var(--s-4) 0 var(--s-6) var(--s-4); }
.done-line { position: absolute; left: 0; top: 0; bottom: var(--s-5); width: 1px; background: var(--metal-v); transform-origin: top; transform: scaleY(0); transition: transform 1.6s var(--ease-out); }
.req-done.is-in .done-line { transform: scaleY(1); }
.req-done h2 { font-size: var(--t-h1); margin-bottom: var(--s-3); }

.req-more { display: grid; gap: var(--s-5); padding-top: var(--s-6); }
.contact-list > div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-2); align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--hair); }
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-item:first-of-type { border-top: 1px solid var(--hair); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); min-height: 60px; padding: .8rem 0; cursor: pointer; font-family: var(--f-display); font-size: var(--t-l); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-mark { position: relative; width: 14px; height: 14px; flex: none; }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform var(--d-base) var(--ease-out); }
.faq-mark::before { width: 14px; height: 1px; background: var(--ink); }
.faq-mark::after { width: 1px; height: 14px; background: var(--metal-v); }
.faq-item[open] .faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-a { padding-bottom: var(--s-3); }
@media (min-width: 860px) { .req-more { grid-template-columns: 1fr 1.4fr; gap: var(--s-6); } }
@media (max-width: 560px) {
  .req-item { gap: var(--s-2); }
  .req-name { font-size: var(--t-l); }
  .qty-btn { width: 44px; }
}

/* ---------- Mentions légales ---------- */
.legal { display: grid; gap: var(--s-4); padding-bottom: var(--s-6); }
.legal section { max-width: 72ch; padding-top: var(--s-3); border-top: 1px solid var(--hair); }
.legal h2 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.legal p + p { margin-top: .35rem; }

/* ---------- 404 ---------- */
.nf { display: grid; justify-items: start; gap: var(--s-3); padding: calc(var(--s-7) + 1rem) 0 var(--s-6); }
.nf-code { display: flex; align-items: center; gap: .18em; font-size: var(--t-mega); line-height: .9; color: var(--ink-soft); }
.nf-line { width: 1px; height: .78em; background: var(--metal-v); }
.nf-bottles { justify-content: flex-start; margin: var(--s-2) 0 var(--s-3); }
.nf-bottles img { height: clamp(110px, 18vh, 180px); }