/* ==========================================================================
   Design by Sophie — feuille unique
   Mobile d'abord. Points de rupture : 640 / 1024 / 1440.
   Polices déclarées dans /assets/fonts/fonts.local.css (Bodoni Moda, Jost).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */
:root {
  --papel: #F6F1EA;
  --arena: #E8DFD0;
  --tinta: #121212;
  --mute: #6E675F;
  --oro: #B8923E;
  --oro-clair: #D4B36A;
  --oro-sombre: #D4B36A;
  --erreur: #9A3B2B;
  --trait: rgba(18, 18, 18, .12);
  --trait-fort: rgba(18, 18, 18, .2);

  --display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --texte: 'Jost', 'Futura', 'Helvetica Neue', Arial, sans-serif;

  --fs-hero: clamp(4rem, 13vw, 15rem);
  --fs-h2: clamp(2.4rem, 5.5vw, 5.5rem);
  --fs-h3: clamp(1.75rem, 3vw, 2.75rem);
  --fs-corps: 1.0625rem;
  --fs-libelle: .6875rem;

  --marge: clamp(1.25rem, 4vw, 4.5rem);
  --gouttiere: 1.5rem;
  --conteneur: 1480px;
  --section: clamp(5rem, 12vw, 11rem);
  --header-h: 4.5rem;

  --lent: cubic-bezier(.16, 1, .3, 1);
  --vif: cubic-bezier(.76, 0, .24, 1);

  --z-fil: 2;
  --z-menu: 90;
  --z-entete: 100;
  --z-tiroir: 200;
  --z-grain: 900;
  --z-curseur: 1000;
}

@media (min-width: 640px) {
  :root { --fs-libelle: .75rem; --gouttiere: 1.5rem; }
}
@media (min-width: 1024px) {
  :root { --header-h: 5.5rem; }
}

/* --------------------------------------------------------------------------
   2. Reset léger
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
html, body { overflow-x: clip; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texte);
  font-weight: 300;
  font-size: var(--fs-corps);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
em { font-style: italic; }
strong { font-weight: 500; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
::selection { background: var(--oro); color: var(--tinta); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   3. Typographie
   -------------------------------------------------------------------------- */
h1, h2, h3, .titre-page, .hero__titre {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1, h2 { font-variation-settings: 'opsz' 96; }
.hero__titre { font-size: var(--fs-hero); line-height: .86; }
.titre-page { font-size: clamp(3rem, 8vw, 7.5rem); line-height: .92; }
h2 { font-size: var(--fs-h2); line-height: .95; }
h3 { font-size: var(--fs-h3); line-height: 1.05; }
h2 em, h1 em { font-style: italic; font-weight: 400; }

.libelle {
  font-family: var(--texte);
  font-weight: 400;
  font-size: var(--fs-libelle);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.4;
}
.lead {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  max-width: 42ch;
  text-wrap: pretty;
}
.prose { max-width: 62ch; text-wrap: pretty; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 1em; }
.prose h2, .prose h3 { margin-top: 2em; margin-bottom: .6em; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; }
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: none; padding-left: 1.25em; }
.prose ul li { position: relative; margin-top: .35em; }
.prose ul li::before { content: ''; position: absolute; left: -1.25em; top: .7em; width: .45em; height: 1px; background: var(--oro); }
.prose a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--oro); }
.prose strong { font-weight: 500; }

/* Liens */
.lien {
  display: inline-block;
  font-family: var(--texte);
  font-weight: 400;
  font-size: var(--fs-libelle);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta);
  line-height: 1.4;
  min-height: 44px;
  padding-block: calc((44px - 1.4 * var(--fs-libelle)) / 2);
  cursor: pointer;
}
.lien--souligne { position: relative; }
.lien--souligne::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: calc((44px - 1.4 * var(--fs-libelle)) / 2 - .25em);
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform .5s var(--lent);
}
.lien--souligne:hover::after { transform: scaleX(0); transform-origin: right; }
.lien--retour::before { content: '←'; margin-right: .6em; font-family: var(--display); letter-spacing: 0; }
.lien--retour:hover { color: var(--oro); }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75em;
  min-height: 48px;
  padding: 0 1.75rem;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: transparent;
  color: var(--tinta);
  font-family: var(--texte);
  font-weight: 500;
  font-size: var(--fs-libelle);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .45s var(--lent), color .45s var(--lent), border-color .45s var(--lent);
  -webkit-tap-highlight-color: transparent;
}
.btn--plein { background: var(--tinta); color: var(--papel); }
.btn--plein:hover { background: var(--oro); border-color: var(--oro); color: var(--tinta); }
.btn--fantome:hover { background: var(--tinta); color: var(--papel); }
.btn--clair { border-color: var(--papel); color: var(--papel); }
.btn--clair:hover { background: var(--papel); color: var(--tinta); }
.btn--large { min-height: 56px; padding-inline: 2.25rem; width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.is-added, .btn.is-added:hover { background: var(--oro); border-color: var(--oro); color: var(--tinta); }
.carte__ajout.is-added { color: var(--oro); }
@media (min-width: 640px) { .btn--large { width: auto; } }

/* --------------------------------------------------------------------------
   4. Mise en page
   -------------------------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: calc(var(--conteneur) + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: var(--marge);
}
.grille { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gouttiere); row-gap: 2.5rem; }
.grille > * { min-width: 0; }
@media (min-width: 1024px) {
  .grille { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 4rem; }
}
.principal { position: relative; z-index: 1; }
section { padding-block: var(--section); }
.evitement {
  position: fixed;
  top: 1rem; left: 1rem;
  z-index: calc(var(--z-entete) + 1);
  padding: .75rem 1.25rem;
  background: var(--tinta);
  color: var(--papel);
  font-size: .875rem;
  transform: translateY(-200%);
}
.evitement:not(:focus) { opacity: 0; pointer-events: none; }
.evitement:focus { transform: none; }
.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Cadres */
.cadre {
  position: relative;
  overflow: hidden;
  background: var(--arena);
  aspect-ratio: 4 / 5;
  width: 100%;
  min-width: 0;
}
.cadre--4-5 { aspect-ratio: 4 / 5; }
.cadre--1-1 { aspect-ratio: 1 / 1; }
.cadre--3-4 { aspect-ratio: 3 / 4; }
.cadre--16-9 { aspect-ratio: 16 / 9; }
.cadre picture, .cadre img, .cadre .img-absente { position: absolute; inset: 0; width: 100%; height: 100%; }
.cadre img { object-fit: cover; }
.img-absente {
  display: grid;
  place-items: center;
  margin: 0;
  background: var(--arena);
  color: var(--mute);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. En-tête
   -------------------------------------------------------------------------- */
.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-entete);
  color: var(--tinta);
  background: transparent;
  transition: background-color .5s var(--lent), box-shadow .5s var(--lent), color .3s;
}
.entete::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--trait);
  opacity: 0;
  transition: opacity .5s;
}
.entete.is-scrolled { background: rgba(246, 241, 234, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.entete.is-scrolled::after { opacity: 1; }
.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
  padding-inline: var(--marge);
  max-width: calc(var(--conteneur) + 2 * var(--marge));
  margin-inline: auto;
  transition: height .5s var(--lent);
}
.entete.is-scrolled .entete__inner { height: calc(var(--header-h) - .75rem); }
.logo { display: block; flex: 0 0 auto; height: 2.1rem; background: var(--papel); }
.logo picture { height: 100%; }
.logo__img, .pied__logo-img {
  height: 100%;
  width: auto;
  object-fit: cover;
  object-position: center 80%;
  clip-path: inset(7% 0 5% 0);
  mix-blend-mode: multiply;
}
.logo__img { height: 100%; }
.pied__logo { display: block; height: 2.6rem; background: var(--papel); }
.pied__logo picture { height: 100%; }
.entete__nav { display: none; }
.entete__liste { display: flex; gap: 2.25rem; }
.entete__liste a, .entete__panier, .langs a {
  font-family: var(--texte);
  font-weight: 400;
  font-size: var(--fs-libelle);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
}
.entete__liste a { position: relative; display: inline-block; padding-block: .5rem; }
.entete__liste a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .1rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--lent);
}
.entete__liste a:hover::after, .entete__liste a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.entete__outils { display: flex; align-items: center; gap: .5rem; }
.entete__langs { display: none; }
.langs { display: flex; gap: .25rem; }
.langs a { display: inline-grid; place-items: center; min-width: 2.25rem; min-height: 44px; color: var(--mute); transition: color .3s; }
.langs a:hover, .langs a[aria-current] { color: inherit; }
.langs a[aria-current] { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.entete__panier {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  min-height: 44px;
  padding-inline: .5rem;
  color: inherit;
  transition: color .3s;
}
.entete__panier:hover { color: var(--oro); }
.entete__panier-mot { display: inline-block; }
.entete__compte { font-family: var(--display); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.entete__compte::before { content: '('; }
.entete__compte::after { content: ')'; }
.burger {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  margin-right: -.5rem;
}
.burger__trait {
  position: absolute;
  left: 11px;
  width: 22px; height: 1px;
  background: currentColor;
  transition: transform .5s var(--vif), top .5s var(--vif);
}
.burger__trait:nth-child(1) { top: 18px; }
.burger__trait:nth-child(2) { top: 25px; }
.burger.is-open .burger__trait:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger.is-open .burger__trait:nth-child(2) { top: 21px; transform: rotate(-45deg); }
@media (min-width: 640px) {
  .entete__langs { display: block; }
  .entete__outils { gap: 1rem; }
}
@media (min-width: 1024px) {
  .entete__nav { display: block; }
  .burger { display: none; }
  .logo { height: 2.4rem; }
}
/* Page atelier : hero sombre sous l'en-tête transparent */
.page-atelier .entete:not(.is-scrolled) { color: var(--papel); }
.page-atelier .entete:not(.is-scrolled) .logo { background: var(--tinta); }
.page-atelier .entete:not(.is-scrolled) .logo__img { filter: invert(1); mix-blend-mode: screen; }
.page-atelier .entete:not(.is-scrolled) .langs a { color: rgba(246, 241, 234, .6); }
.page-atelier .entete:not(.is-scrolled) .langs a[aria-current], .page-atelier .entete:not(.is-scrolled) .langs a:hover { color: var(--papel); }

/* Menu mobile */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--papel);
  padding: calc(var(--header-h) + 1.5rem) var(--marge) max(1.5rem, env(safe-area-inset-bottom));
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--vif), visibility 0s linear .7s;
}
.menu-mobile.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .7s var(--vif), visibility 0s; }
.menu-mobile__inner { display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow-y: auto; }
.menu-mobile__liste li { border-top: 1px solid var(--trait); }
.menu-mobile__liste li:first-child { border-top: 0; }
.menu-mobile__liste a {
  display: block;
  padding: .6rem 0;
  font-family: var(--display);
  font-size: clamp(2.25rem, 9vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .6s var(--lent), transform .8s var(--lent);
}
.menu-mobile.is-open .menu-mobile__liste a { opacity: 1; transform: none; }
.menu-mobile.is-open .menu-mobile__liste li:nth-child(2) a { transition-delay: .05s; }
.menu-mobile.is-open .menu-mobile__liste li:nth-child(3) a { transition-delay: .1s; }
.menu-mobile.is-open .menu-mobile__liste li:nth-child(4) a { transition-delay: .15s; }
.menu-mobile.is-open .menu-mobile__liste li:nth-child(5) a { transition-delay: .2s; }
.menu-mobile.is-open .menu-mobile__liste li:nth-child(6) a { transition-delay: .25s; }
.menu-mobile.is-open .menu-mobile__liste li:nth-child(7) a { transition-delay: .3s; }
.menu-mobile__bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--trait); margin-top: 2rem; }
.menu-mobile__langs .langs a { min-width: 2.5rem; }
.menu-mobile__ig { font-family: var(--display); font-style: italic; font-size: 1.25rem; }
@media (min-width: 1024px) { .menu-mobile { display: none; } }

/* --------------------------------------------------------------------------
   6. Accueil
   -------------------------------------------------------------------------- */
.accueil { position: relative; }
.fil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-fil);
  pointer-events: none;
  overflow: visible;
}
.fil__trace {
  fill: none;
  stroke: var(--oro);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}
.accueil > section, .accueil > .marquee { position: relative; }

/* Hero */
.hero {
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.hero__grille { display: flex; flex-direction: column; gap: 1.5rem; }
.hero__eyebrow { margin-bottom: .5rem; }
.hero__titre { margin-bottom: 1rem; }
.hero__italique { font-style: italic; font-weight: 400; }
.hero__cadre--1 { width: 72%; margin-left: auto; }
.hero__cadre--2 { width: 46%; margin-top: -28%; position: relative; z-index: 2; box-shadow: 0 0 0 6px var(--papel); }
.hero__lead { max-width: 38ch; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); margin-top: 1rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__scroll { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; margin-top: 1rem; }
.hero__scroll-mot { font-size: var(--fs-libelle); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.hero__scroll-trait { width: 3.5rem; height: 1px; background: var(--tinta); position: relative; overflow: hidden; }
.hero__scroll-trait::after { content: ''; position: absolute; inset: 0; background: var(--oro); transform: translateX(-100%); animation: trait-glisse 2.4s var(--lent) infinite; }
@keyframes trait-glisse { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@media (min-width: 640px) {
  .hero__cadre--1 { width: 56%; }
  .hero__cadre--2 { width: 32%; margin-top: -22%; margin-left: 10%; }
}
@media (min-width: 1024px) {
  .hero { min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--header-h) + 2.5rem); }
  .hero__grille {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: var(--gouttiere);
    row-gap: 1.5rem;
    width: 100%;
    align-items: start;
  }
  .hero__eyebrow { grid-column: 1 / 7; grid-row: 1; margin: 0; }
  .hero__titre { grid-column: 1 / 13; grid-row: 2; margin: 0; position: relative; z-index: 2; }
  .hero__cadre--1 { grid-column: 8 / 12; grid-row: 3 / 5; width: 100%; margin: -1.5rem 0 0; }
  .hero__cadre--2 { grid-column: 5 / 8; grid-row: 4 / 5; width: 100%; margin: 3rem 0 0; box-shadow: none; align-self: start; }
  .hero__lead { grid-column: 1 / 5; grid-row: 3; margin: 0; }
  .hero__actions { grid-column: 1 / 5; grid-row: 4; align-self: end; }
  .hero__scroll { grid-column: 1 / 4; grid-row: 5; margin: 0; }
}
@media (min-width: 1440px) {
  .hero__cadre--1 { grid-column: 9 / 12; }
  .hero__cadre--2 { grid-column: 6 / 8; }
}

/* Marquee */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  padding-block: 1rem;
  user-select: none;
}
.marquee__piste { display: flex; width: max-content; animation: marquee 40s linear infinite; will-change: transform; }
.marquee__groupe { display: flex; align-items: center; flex: 0 0 auto; }
.marquee__item {
  font-family: var(--display);
  font-size: clamp(1.375rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  padding-inline: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
.marquee__item::after { content: ''; width: .45em; height: .45em; background: var(--oro); transform: rotate(45deg); flex: 0 0 auto; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.marquee:hover .marquee__piste { animation-play-state: paused; }

/* Chapitre sombre */
.chapitre--encre {
  --oro: var(--oro-clair);
  background: var(--tinta);
  color: var(--papel);
}
.chapitre--encre .libelle { color: rgba(246, 241, 234, .6); }
.chapitre--encre h1 em, .chapitre--encre h2 em { color: var(--oro-clair); }
.chapitre--encre ::selection { background: var(--oro-clair); }
.manifeste { position: relative; overflow: hidden; }
.manifeste__numero {
  position: absolute;
  right: var(--marge);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: clamp(6rem, 20vw, 22rem);
  line-height: 1;
  color: var(--oro-clair);
  opacity: .14;
  white-space: nowrap;
  pointer-events: none;
}
.manifeste__titre { font-size: clamp(2.6rem, 7vw, 7rem); max-width: 14ch; }
.manifeste__texte { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); max-width: 48ch; }
.manifeste__cta { margin-top: .5rem; }
@media (min-width: 1024px) {
  .manifeste__label { grid-column: 1 / 4; }
  .manifeste__titre { grid-column: 1 / 11; }
  .manifeste__texte { grid-column: 6 / 12; }
  .manifeste__cta { grid-column: 6 / 12; margin-top: -1rem; }
}

/* Bande horizontale */
.bande { padding-block: var(--section) clamp(3rem, 8vw, 6rem); }
.bande__tete { display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.bande__titre { font-size: clamp(2.2rem, 5vw, 4.5rem); max-width: 14ch; }
.bande__texte { max-width: 44ch; }
.bande__cta { align-self: flex-start; }
.bande__piste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem var(--gouttiere); padding-inline: var(--marge); }
@media (min-width: 640px) { .bande__piste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .bande { overflow: clip; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(3rem, 6vh, 5rem); }
  .bande__tete { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: var(--gouttiere); row-gap: .75rem; align-items: end; margin-bottom: clamp(2rem, 4vh, 3.5rem); }
  .bande__tete .libelle { grid-column: 1; grid-row: 1; }
  .bande__titre { grid-column: 1; grid-row: 2; font-size: clamp(2.2rem, 4vw, 4rem); }
  .bande__texte { grid-column: 2; grid-row: 1; max-width: 38ch; justify-self: end; }
  .bande__cta { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; }
  .bande__piste { display: flex; flex-wrap: nowrap; gap: var(--gouttiere); width: max-content; padding-inline: var(--marge); will-change: transform; }
  .bande__piste .carte { flex: 0 0 clamp(260px, 24vw, 360px); width: clamp(260px, 24vw, 360px); }
  .bande__piste::after { content: ''; flex: 0 0 var(--marge); }
}

/* Chapitres éditoriaux */
.chapitres { display: flex; flex-direction: column; gap: clamp(4rem, 10vw, 9rem); }
.chapitre-item { row-gap: 2rem; }
.chapitre-item__num { display: block; font-family: var(--display); font-size: clamp(3.5rem, 7vw, 6.5rem); line-height: 1; color: var(--oro); margin-bottom: 1rem; }
.chapitre-item__titre { font-size: clamp(2.4rem, 5vw, 5rem); margin-bottom: 1.25rem; }
.chapitre-item__cadre { width: 86%; }
.chapitre-item--2 .chapitre-item__cadre { width: 76%; margin-left: auto; }
.chapitre-item--3 .chapitre-item__cadre { width: 80%; }
@media (min-width: 1024px) {
  .chapitre-item { align-items: center; }
  .chapitre-item__cadre { width: 100%; }
  .chapitre-item--1 .chapitre-item__cadre { grid-column: 1 / 7; }
  .chapitre-item--1 .chapitre-item__texte { grid-column: 8 / 13; }
  .chapitre-item--2 .chapitre-item__cadre { grid-column: 7 / 12; grid-row: 1; width: 100%; margin: 0; }
  .chapitre-item--2 .chapitre-item__texte { grid-column: 1 / 6; grid-row: 1; }
  .chapitre-item--3 .chapitre-item__cadre { grid-column: 2 / 7; width: 100%; }
  .chapitre-item--3 .chapitre-item__texte { grid-column: 8 / 13; }
}

/* Édition */
.edition { border-top: 1px solid var(--trait); }
.edition__inner { display: flex; flex-direction: column; gap: 1rem; }
.edition__douze {
  font-family: var(--display);
  font-size: clamp(11rem, 34vw, 34rem);
  line-height: .78;
  letter-spacing: -.04em;
  color: var(--arena);
  margin-left: -.04em;
}
@supports ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
  .edition__douze { color: transparent; -webkit-text-stroke: 1px var(--tinta); }
}
.edition__titre { font-size: clamp(2.2rem, 4.5vw, 4.5rem); margin-block: .75rem 1.25rem; }
@media (min-width: 1024px) {
  .edition__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: center; }
  .edition__douze { grid-column: 1 / 6; }
  .edition__texte { grid-column: 7 / 13; }
}

/* Instagram */
.insta { border-top: 1px solid var(--trait); }
.insta__tete { display: flex; flex-direction: column; gap: .75rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.insta__titre { font-size: clamp(2.2rem, 4.5vw, 4.5rem); }
.insta__handle { font-family: var(--display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.2; align-self: flex-start; transition: color .3s; }
.insta__handle:hover { color: var(--oro); }
.insta__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.insta__cta { margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 1024px) {
  .insta__tete { display: grid; grid-template-columns: 1fr auto; align-items: end; }
  .insta__tete .libelle { grid-column: 1; }
  .insta__titre { grid-column: 1; }
  .insta__handle { grid-column: 2; grid-row: 1 / 3; align-self: end; }
  .insta__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gouttiere); }
}

/* Fin du fil */
.fil-fin { padding-block: clamp(6rem, 16vw, 14rem) clamp(8rem, 18vw, 16rem); text-align: center; }
.fil-fin__phrase {
  font-family: var(--display);
  font-size: clamp(2rem, 5.5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   7. Cartes et grilles produits
   -------------------------------------------------------------------------- */
.grille-produits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem var(--gouttiere); }
@media (min-width: 640px) { .grille-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grille-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem var(--gouttiere); } }

.carte { position: relative; min-width: 0; }
.carte__lien { display: block; }
.carte__cadre { background: var(--arena); }
.carte__img { position: absolute; inset: 0; transition: opacity .7s var(--lent), transform 1.4s var(--lent); }
.carte__img picture, .carte__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.carte__img--survol { opacity: 0; }
.carte__img--survol:empty { display: none; }
.carte:hover .carte__img--survol { opacity: 1; }
.carte:hover .carte__img--base { transform: scale(1.04); }
.carte__edition {
  position: absolute;
  top: .75rem; left: .75rem;
  z-index: 2;
  padding: .3em .6em;
  background: var(--papel);
  font-family: var(--display);
  font-size: .8125rem;
  letter-spacing: .04em;
  line-height: 1;
}
.carte__epuise {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  place-items: center;
  background: rgba(246, 241, 234, .55);
  font-family: var(--texte);
  font-size: var(--fs-libelle);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.carte[data-stock="0"] .carte__epuise { display: grid; }
.carte[data-stock="0"] .carte__ajout { display: none; }
.carte__infos { padding-top: 1rem; }
.carte__cat { display: flex; flex-wrap: wrap; gap: .5em; }
.carte__limite { color: var(--oro); }
.carte__limite::before { content: '·'; margin-right: .5em; color: var(--mute); }
.carte__nom { font-size: clamp(1.375rem, 1.8vw, 1.75rem); margin-top: .35rem; letter-spacing: 0; }
.carte__nom a:hover { color: var(--oro); }
.carte__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .35rem; }
.carte__prix { font-weight: 400; }
.carte__reste { font-size: .8125rem; color: var(--mute); }
.carte__actions { display: flex; gap: 1.5rem; margin-top: .25rem; }

/* --------------------------------------------------------------------------
   8. Pages : en-têtes, collection, fiche produit
   -------------------------------------------------------------------------- */
.en-tete-page {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.en-tete-page .lead { margin-top: .5rem; }
.en-tete-page--court { padding-bottom: 1.5rem; }
.titre-page__compte { font-family: var(--display); font-style: italic; font-size: .35em; color: var(--mute); letter-spacing: 0; margin-left: .25em; vertical-align: .4em; }
.titre-page__compte:empty { display: none; }

.coleccion { padding-top: 0; }
.filtres { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); margin-bottom: clamp(2rem, 5vw, 4rem); }
.filtres__boutons { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.filtre {
  position: relative;
  min-height: 44px;
  font-size: var(--fs-libelle);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color .3s;
}
.filtre::after { content: ''; position: absolute; left: 0; right: 0; bottom: .6rem; height: 1px; background: var(--tinta); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--lent); }
.filtre:hover, .filtre.is-active { color: var(--tinta); }
.filtre.is-active::after { transform: scaleX(1); transform-origin: left; }
.filtres__compte { font-size: .8125rem; color: var(--mute); }

/* Fiche produit */
.produit { padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: clamp(3rem, 8vw, 6rem); }
.produit__retour { margin-bottom: 1rem; }
.produit__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.produit__galerie { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.produit__media { background: var(--arena); }
.produit__media--principal { aspect-ratio: 4 / 5; }
.produit__vignettes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.produit__vignettes:empty { display: none; }
.produit__vignettes .produit__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; cursor: pointer; outline: 1px solid transparent; outline-offset: 2px; transition: outline-color .3s; }
.produit__vignettes .produit__media:hover, .produit__vignettes .produit__media.is-active { outline-color: var(--oro); }
.produit__vignettes .produit__media picture, .produit__vignettes .produit__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.produit__panneau { min-width: 0; }
.produit__colle { display: flex; flex-direction: column; gap: 1.5rem; }
.produit__cat { margin-bottom: -.5rem; }
.produit__nom { font-size: clamp(2.6rem, 6vw, 5rem); line-height: .95; }
.produit__prix { font-size: 1.25rem; font-weight: 400; margin-top: -.5rem; }
.produit__edition { display: flex; align-items: baseline; gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.produit__edition-num { font-family: var(--display); font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1; color: var(--oro); }
.produit__description { font-size: 1.0625rem; }
.produit__specs > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-block: .75rem; border-top: 1px solid var(--trait); }
.produit__specs > div:last-child { border-bottom: 1px solid var(--trait); }
.produit__specs dd { font-weight: 300; }
.produit__stock { font-size: .875rem; color: var(--oro); font-weight: 400; margin-top: -.5rem; }
.produit__achat { display: flex; flex-direction: column; gap: 1rem; }
.produit__notes { display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; color: var(--mute); }
.produit__notes li { position: relative; padding-left: 1.25rem; }
.produit__notes li::before { content: ''; position: absolute; left: 0; top: .75em; width: .5rem; height: 1px; background: var(--oro); }
.produit__liste li { position: relative; padding: .35rem 0 .35rem 1.25rem; }
.produit__liste li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: .5rem; height: 1px; background: var(--oro); }
@media (min-width: 640px) {
  .produit__achat { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .produit__achat .btn--large { flex: 1 1 14rem; }
}
@media (min-width: 1024px) {
  .produit { padding-top: calc(var(--header-h) + 2.5rem); }
  .produit__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: start; }
  .produit__galerie { grid-column: 1 / 8; }
  .produit__panneau { grid-column: 9 / 13; }
  .produit__colle { position: sticky; top: 6rem; }
}
@media (min-width: 1440px) {
  .produit__galerie { grid-column: 1 / 8; }
  .produit__panneau { grid-column: 9 / 13; }
}

/* Quantité */
.qte { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--trait-fort); }
.qte__label { padding-inline: 1rem; }
.qte__btn { width: 44px; height: 44px; display: grid; place-items: center; font-family: var(--texte); font-weight: 400; font-size: 1.125rem; line-height: 1; transition: background-color .3s, color .3s; }
.qte__btn:hover { background: var(--tinta); color: var(--papel); }
.qte__input { width: 3.25rem; height: 44px; text-align: center; border: 0; border-left: 1px solid var(--trait-fort); border-right: 1px solid var(--trait-fort); background: transparent; font-size: 1rem; font-weight: 400; -moz-appearance: textfield; appearance: textfield; }
.qte__input::-webkit-inner-spin-button, .qte__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qte__input:focus-visible { outline-offset: -2px; }
.qte__val { min-width: 2.5rem; text-align: center; font-weight: 400; }
.qte--mini .qte__btn { width: 36px; height: 36px; font-size: 1.1rem; }

/* Accordéon */
.produit__details { margin-top: .5rem; }
.accordeon { border-top: 1px solid var(--trait); }
.accordeon:last-child { border-bottom: 1px solid var(--trait); }
.accordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding-block: .75rem;
  font-family: var(--display);
  font-size: 1.25rem;
}
.accordeon summary::after, .faq__item summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--texte);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--oro);
  transition: transform .5s var(--lent);
}
.accordeon[open] summary::after, .faq__item[open] summary::after { transform: rotate(45deg); }
.accordeon > :not(summary) { padding-bottom: 1.25rem; }

/* Pièces liées */
.lies { border-top: 1px solid var(--trait); }
.lies__titre { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: clamp(2rem, 5vw, 4rem); }

/* --------------------------------------------------------------------------
   9. Atelier
   -------------------------------------------------------------------------- */
.atelier-hero { padding-top: calc(var(--header-h) + clamp(3rem, 9vw, 8rem)); }
.atelier-hero__titre { font-size: clamp(3rem, 9vw, 9.5rem); line-height: .9; }
.atelier-hero__lead { font-size: clamp(1.125rem, 1.6vw, 1.375rem); max-width: 42ch; }
@media (min-width: 1024px) {
  .atelier-hero__label { grid-column: 1 / 4; }
  .atelier-hero__titre { grid-column: 1 / 12; }
  .atelier-hero__lead { grid-column: 7 / 13; }
}
.recit { row-gap: 2.5rem; }
.recit__cadre--1 { width: 90%; }
.recit__cadre--2 { width: 70%; margin-left: auto; }
.recit__texte p + p { margin-top: 1.25em; }
.recit__texte { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
@media (min-width: 1024px) {
  .recit__cadre--1 { grid-column: 1 / 7; grid-row: 1; width: 100%; }
  .recit__texte { grid-column: 8 / 13; grid-row: 1 / 3; align-self: center; }
  .recit__cadre--2 { grid-column: 3 / 7; grid-row: 2; width: 100%; margin: 0; }
}
.valeurs { border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); padding-block: clamp(3rem, 7vw, 6rem); }
.valeurs__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem var(--gouttiere); }
.valeur__num, .etape__num { display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--oro); margin-bottom: 1rem; }
.valeur__titre, .etape__titre { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: .6rem; }
.valeur p, .etape p { max-width: 36ch; }
@media (min-width: 640px) { .valeurs__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.processus { row-gap: 2.5rem; }
.processus__cadre { width: 80%; }
.processus__liste { display: flex; flex-direction: column; }
.etape { padding-block: 2rem; border-top: 1px solid var(--trait); }
.etape:last-child { border-bottom: 1px solid var(--trait); }
@media (min-width: 1024px) {
  .processus__cadre { grid-column: 1 / 6; width: 100%; position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; }
  .processus__liste { grid-column: 7 / 13; }
}
.citation { text-align: center; }
.citation__bloc { max-width: 60rem; margin-inline: auto; }
.citation__texte { font-family: var(--display); font-style: italic; font-size: clamp(1.875rem, 4.5vw, 4rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.citation__signature { margin-top: 1.5rem; font-size: var(--fs-libelle); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.citation__signature::before { content: '— '; }
.citation__cta { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* --------------------------------------------------------------------------
   10. Formulaires
   -------------------------------------------------------------------------- */
.formulaire { min-width: 0; }
.formulaire__champs { display: flex; flex-direction: column; gap: 1.25rem; }
.formulaire__champs .btn { align-self: flex-start; margin-top: .5rem; }
.champ { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.champ > div { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.champ--2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 640px) { .champ--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.champ label, .champ legend {
  font-size: var(--fs-libelle);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
}
.champ input, .champ textarea, .news__input {
  width: 100%;
  min-height: 48px;
  padding: .75rem .9rem;
  border: 1px solid var(--trait-fort);
  border-radius: 0;
  background: rgba(255, 255, 255, .45);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--tinta);
  transition: border-color .3s, box-shadow .3s, background-color .3s;
  -webkit-appearance: none;
  appearance: none;
}
.champ textarea { resize: vertical; min-height: 9rem; }
.champ input::placeholder, .news__input::placeholder { color: var(--mute); opacity: 1; }
.champ input:focus, .champ textarea:focus, .news__input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); background: #fff; }
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"], .news__input[aria-invalid="true"] { border-color: var(--erreur); box-shadow: 0 0 0 1px var(--erreur); }
.champ__erreur { font-size: .8125rem; color: var(--erreur); font-weight: 400; }
.formulaire__ok, .news__ok { font-family: var(--display); font-size: 1.25rem; line-height: 1.3; }
.formulaire__erreur, .news__erreur { font-size: .875rem; color: var(--erreur); font-weight: 400; }
.formulaire.is-sent .formulaire__champs { display: none; }
.pago__etape + .pago__etape { margin-top: 0; }

/* Contact */
.contact { padding-top: 0; row-gap: 3rem; }
.contact__cote { display: flex; flex-direction: column; gap: 2rem; }
.contact__cadre { width: 70%; }
.contact__infos > div { display: grid; gap: .25rem; padding-block: .9rem; border-top: 1px solid var(--trait); }
.contact__infos > div:last-child { border-bottom: 1px solid var(--trait); }
.contact__infos a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.contact__infos a:hover { color: var(--oro); }
.contact__lieu { font-family: var(--display); font-size: 1.25rem; }
@media (min-width: 1024px) {
  .contact__form { grid-column: 1 / 8; }
  .contact__cote { grid-column: 9 / 13; }
  .contact__cadre { width: 100%; }
}

/* Newsletter (pied) */
.news { display: flex; flex-direction: column; gap: .75rem; }
.news__champs { display: flex; border-bottom: 1px solid var(--tinta); }
.news__input { border: 0; background: transparent; padding-inline: 0; min-height: 48px; }
.news__input:focus { box-shadow: none; background: transparent; }
.news__btn { flex: 0 0 auto; min-height: 48px; padding-inline: .75rem 0; font-size: var(--fs-libelle); letter-spacing: .18em; text-transform: uppercase; font-weight: 500; white-space: nowrap; transition: color .3s; }
.news__btn:hover { color: var(--oro); }
.news__note { font-size: .8125rem; color: var(--mute); }
.news.is-sent .news__champs, .news.is-sent .news__note { display: none; }

/* FAQ */
.faq-page { padding-top: 0; max-width: calc(52rem + 2 * var(--marge)); }
.faq { border-top: 1px solid var(--trait); }
.faq__item { border-bottom: 1px solid var(--trait); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
  padding-block: 1.1rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.2;
  transition: color .3s;
}
.faq__item summary:hover { color: var(--oro); }
.faq__a { padding-bottom: 1.5rem; max-width: 62ch; }
.faq__a p + p { margin-top: 1em; }
.faq-page__cta { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* --------------------------------------------------------------------------
   11. Panier (tiroir et page)
   -------------------------------------------------------------------------- */
.tiroir { position: fixed; inset: 0; z-index: var(--z-tiroir); visibility: hidden; transition: visibility 0s linear .7s; }
.tiroir.is-open { visibility: visible; transition-delay: 0s; }
.tiroir__voile { position: absolute; inset: 0; background: rgba(18, 18, 18, .4); opacity: 0; transition: opacity .6s var(--lent); cursor: pointer; }
.tiroir.is-open .tiroir__voile { opacity: 1; }
.tiroir__panneau {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  transform: translateX(100%);
  transition: transform .7s var(--vif);
  box-shadow: -20px 0 60px rgba(18, 18, 18, .08);
  padding-bottom: env(safe-area-inset-bottom);
}
.tiroir.is-open .tiroir__panneau { transform: translateX(0); }
.tiroir__tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem var(--marge) 1rem; border-bottom: 1px solid var(--trait); }
.tiroir__titre { font-size: 1.75rem; letter-spacing: -.01em; }
.tiroir__compte { font-style: italic; font-size: .6em; color: var(--mute); margin-left: .2em; }
.tiroir__compte:empty { display: none; }
.tiroir__fermer { min-height: 44px; padding-inline: .5rem; font-size: var(--fs-libelle); letter-spacing: .18em; text-transform: uppercase; transition: color .3s; }
.tiroir__fermer:hover { color: var(--oro); }
.tiroir__corps { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 1.25rem var(--marge); }
.tiroir__pied { padding: 1.25rem var(--marge) 1.5rem; border-top: 1px solid var(--trait); display: flex; flex-direction: column; gap: 1rem; }
.tiroir__pied .btn--large { width: 100%; }
.tiroir__liens { display: flex; justify-content: space-between; gap: 1rem; font-size: .8125rem; }
.tiroir__liens a, .tiroir__liens .lien { font-size: .8125rem; letter-spacing: .04em; text-transform: none; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; min-height: 0; padding: 0; color: var(--mute); }
.tiroir__liens a:hover, .tiroir__liens .lien:hover { color: var(--tinta); }
@media (min-width: 640px) { .tiroir__tete, .tiroir__corps, .tiroir__pied { padding-inline: 2rem; } }

.panier-vide { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding-block: 1.5rem; }
.panier-vide__texte { font-family: var(--display); font-size: 1.375rem; line-height: 1.3; }
.panier-lignes { display: flex; flex-direction: column; }
.panier-ligne { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding-block: 1.25rem; border-top: 1px solid var(--trait); }
.panier-ligne:first-child { border-top: 0; }
.panier-lignes--page .panier-ligne:first-child { border-top: 1px solid var(--trait); }
.panier-lignes--page .panier-ligne:last-child { border-bottom: 1px solid var(--trait); }
.panier-ligne__cadre { display: block; aspect-ratio: 4 / 5; }
.panier-ligne__infos { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.panier-ligne__nom { font-size: 1.25rem; letter-spacing: 0; }
.panier-ligne__nom a:hover { color: var(--oro); }
.panier-ligne__prix { font-size: .9375rem; }
.panier-ligne__bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .5rem; flex-wrap: wrap; }
.panier-ligne__suppr { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); min-height: 36px; padding-block: 0; }
.panier-ligne__suppr::after { bottom: .5em; }
.panier-ligne__suppr:hover { color: var(--tinta); }
.panier-ligne__total { grid-column: 1 / -1; text-align: right; font-weight: 400; display: none; }
@media (min-width: 640px) {
  .panier-lignes--page .panier-ligne { grid-template-columns: 6.5rem 1fr auto; align-items: start; }
  .panier-lignes--page .panier-ligne__total { grid-column: auto; display: block; padding-top: .15rem; }
}
.panier-totaux { display: flex; flex-direction: column; gap: .6rem; }
.panier-totaux > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9375rem; }
.panier-totaux dt { color: var(--mute); }
.panier-totaux dd { font-weight: 400; }
.panier-totaux__total { padding-top: .75rem; margin-top: .25rem; border-top: 1px solid var(--trait); }
.panier-totaux__total dt { color: var(--tinta); }
.panier-totaux__total dd { font-family: var(--display); font-size: 1.5rem; line-height: 1; }

.panier-page { padding-top: 1rem; row-gap: 2.5rem; }
.panier-page__resume { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--trait); }
.panier-page__resume .btn--large { width: 100%; }
.panier-page__continuer { text-align: center; }
@media (min-width: 1024px) {
  .panier-page__liste { grid-column: 1 / 8; }
  .panier-page__resume { grid-column: 9 / 13; position: sticky; top: calc(var(--header-h) + 1rem); padding: 2rem; }
}

/* --------------------------------------------------------------------------
   12. Paiement (démonstration)
   -------------------------------------------------------------------------- */
.bandeau-demo {
  align-self: flex-start;
  display: inline-block;
  padding: .55rem .9rem;
  border: 1px solid var(--oro);
  color: var(--tinta);
  font-size: var(--fs-libelle);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
}
.pago { padding-top: 1rem; row-gap: 2.5rem; }
.etapes { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin-bottom: .75rem; }
.etapes__item { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-libelle); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); transition: color .3s; }
.etapes__item.is-active { color: var(--tinta); }
.etapes__num { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid currentColor; font-family: var(--display); font-size: .875rem; letter-spacing: 0; transition: background-color .3s, color .3s, border-color .3s; }
.etapes__item.is-done .etapes__num { background: var(--oro); border-color: var(--oro); color: var(--tinta); }
.pago__compteur { margin-bottom: 2rem; }
.pago__etape { display: none; flex-direction: column; gap: 1.25rem; }
.pago__etape.is-active { display: flex; }
.pago__legende { font-family: var(--display); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -.02em; margin-bottom: .75rem; }
.pago__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
.pago__nav .btn { flex: 1 1 auto; }
.pago__nav .btn--large { width: auto; }
.pago__securise { font-size: .8125rem; color: var(--mute); }
.pago__resume { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--trait); }
.pago__resume-titre { font-size: 1.5rem; letter-spacing: 0; }
.resume-lignes { display: flex; flex-direction: column; }
.resume-ligne { display: grid; grid-template-columns: 3.25rem 1fr auto; gap: .9rem; align-items: center; padding-block: .85rem; border-top: 1px solid var(--trait); }
.resume-ligne:first-child { border-top: 0; }
.resume-ligne__cadre { aspect-ratio: 4 / 5; }
.resume-ligne__nom { font-family: var(--display); font-size: 1.0625rem; line-height: 1.2; }
.resume-ligne__qte { font-size: .8125rem; color: var(--mute); }
.resume-ligne__prix { font-weight: 400; font-size: .9375rem; }
.resume-vide { font-family: var(--display); font-size: 1.25rem; }
@media (min-width: 640px) { .pago__nav .btn { flex: 0 1 auto; } }
@media (min-width: 1024px) {
  .pago__form { grid-column: 1 / 8; }
  .pago__resume { grid-column: 9 / 13; position: sticky; top: calc(var(--header-h) + 1rem); padding: 2rem; }
}

/* Merci */
.gracias { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 7rem)); min-height: 70svh; display: flex; flex-direction: column; gap: 1.5rem; max-width: calc(56rem + 2 * var(--marge)); }
.gracias__numero { font-family: var(--display); font-size: 1.25em; letter-spacing: .04em; text-transform: none; color: var(--oro); margin-left: .5em; }
.gracias__titre { font-size: clamp(3.5rem, 12vw, 11rem); line-height: .9; }
.gracias__texte { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
.gracias__note { font-size: .875rem; color: var(--mute); }
.gracias__cta { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   13. Légal, 404
   -------------------------------------------------------------------------- */
.legal { padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem)); }
.legal__inner { max-width: 68ch; }
.legal__titre { font-size: clamp(2.5rem, 6vw, 5rem); line-height: .95; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.introuvable { padding-top: calc(var(--header-h) + 2rem); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.25rem; }
.introuvable__code { font-family: var(--display); font-size: clamp(8rem, 28vw, 24rem); line-height: .8; letter-spacing: -.04em; color: var(--arena); margin-left: -.04em; }
@supports ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
  .introuvable__code { color: transparent; -webkit-text-stroke: 1px var(--tinta); }
}
.introuvable__titre { font-size: clamp(2.2rem, 5vw, 4.5rem); }
.introuvable__texte { max-width: 42ch; }
.introuvable__cta { margin-top: .75rem; }

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */
.pied { position: relative; z-index: 1; border-top: 1px solid var(--trait); padding-block: clamp(3.5rem, 8vw, 6rem) clamp(1.5rem, 3vw, 2.5rem); background: var(--papel); }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem var(--gouttiere); }
.pied__marque { display: flex; flex-direction: column; gap: 1rem; }
.pied__tagline { font-family: var(--display); font-size: 1.25rem; line-height: 1.3; max-width: 24ch; }
.pied__origine { font-size: .8125rem; color: var(--mute); }
.pied__titre { margin-bottom: 1rem; color: var(--tinta); }
.pied__col ul { display: flex; flex-direction: column; gap: .15rem; }
.pied__col a { display: inline-block; padding-block: .3rem; font-size: .9375rem; transition: color .3s; }
.pied__col a:hover { color: var(--oro); }
.pied__news { display: flex; flex-direction: column; }
.pied__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid var(--trait); font-size: .75rem; color: var(--mute); }
.pied__copyright { margin: 0; }
.pied__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.pied__legal a { display: inline-block; padding-block: .5rem; transition: color .3s; }
.pied__legal a:hover { color: var(--tinta); }
.pied__credits { width: 100%; }
@media (min-width: 640px) {
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__marque, .pied__news { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .pied__grille { grid-template-columns: 2fr 1fr 1fr 1fr 2fr; gap: 3rem var(--gouttiere); }
  .pied__marque, .pied__news { grid-column: auto; }
  .pied__credits { width: auto; }
}

/* --------------------------------------------------------------------------
   15. Curseur, grain, états de révélation
   -------------------------------------------------------------------------- */
.curseur {
  display: none;
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-curseur);
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0);
  transition: width .5s var(--lent), height .5s var(--lent), margin .5s var(--lent), opacity .3s;
  place-items: center;
  overflow: hidden;
}
.curseur__mot { font-family: var(--display); font-style: italic; font-size: 1.125rem; color: #000; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.curseur.is-ver { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
.curseur.is-ver .curseur__mot { opacity: 1; transition-delay: .15s; }
.curseur.is-hidden { opacity: 0; }
@media (pointer: fine) {
  .curseur { display: grid; }
  [data-cursor="ver"], [data-cursor="ver"] a { cursor: none; }
  [data-cursor="ver"] button { cursor: pointer; }
}
@media (pointer: coarse) { .curseur { display: none !important; } }

.grain {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
}
@media (min-width: 1024px) and (pointer: fine) { .grain { display: block; } }

.is-visible { opacity: 1; }
.ligne-mask { overflow: visible !important; clip-path: inset(-.18em 0 -.18em 0); }

/* --------------------------------------------------------------------------
   16. Mouvement réduit, impression
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee__piste { animation: none; width: auto; flex-wrap: wrap; }
  .marquee__groupe:nth-child(2) { display: none; }
  .hero__scroll-trait::after { animation: none; transform: none; }
  .curseur, .grain { display: none !important; }
  [data-reveal], [data-split], [data-reveal-img] picture, [data-reveal-img] img { opacity: 1 !important; visibility: visible !important; transform: none !important; clip-path: none !important; }
}

@media print {
  .entete, .menu-mobile, .tiroir, .curseur, .grain, .marquee, .fil, .evitement, .btn, .hero__scroll, .pied__news, .filtres, .qte, .produit__achat { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  section { padding-block: 1.5rem; }
  .hero, .en-tete-page, .produit, .legal, .gracias, .introuvable, .atelier-hero { padding-top: 1rem; min-height: 0; }
  .chapitre--encre { background: #fff; color: #000; }
  .cadre { break-inside: avoid; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .8em; color: #666; }
  [data-reveal], [data-split], [data-reveal-img] picture, [data-reveal-img] img { opacity: 1 !important; visibility: visible !important; transform: none !important; clip-path: none !important; }
}