/* ==========================================================================
   Intimi-D · sélection Angel'ina
   Grammaire : le diptyque. Deux aplats (citron = le patch, crème = les
   lingettes) cousus au milieu ; la couture est la navigation, puis elle se
   découd et se recoud à l'horizontale en barre.
   ========================================================================== */

:root {
  /* Les deux mondes, plus l'encre de la boîte */
  --lime:      #C8EE4A;
  --lime-2:    #B7DD38;   /* emplacement photo sur citron */
  --olive:     #3B4711;   /* texte secondaire sur citron (7,6:1) */
  --cream:     #EEE5D4;
  --cream-2:   #E3D7C1;
  --brown:     #66584A;   /* texte secondaire sur crème (5,6:1) */
  --ink:       #17140F;
  --ink-2:     #221E17;
  --ink-3:     #2E2920;
  --mist:      #A99E8B;   /* texte secondaire sur encre (6,9:1) */

  /* Le moteur */
  --sc-canvas: var(--ink);
  --sc-surface: var(--ink-2);
  --sc-ink: var(--cream);
  --sc-ink-soft: var(--mist);
  --sc-accent: var(--lime);
  --sc-accent-ink: var(--ink);
  --sc-font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-shadow-color: 32 40% 8%;

  --gut: clamp(1rem, 4vw, 4.25rem);
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 10px;

  --split: 50;     /* position de la couture, en % (écrit par site.js) */
  --open: 0;       /* ouverture des deux portes, 0 → 1 (écrit par site.js) */
}

html { background: var(--ink); }
body { background: var(--ink); color: var(--cream); }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.shop :focus-visible, .faq :focus-visible, .inside :focus-visible, .bar :focus-visible, .duostrip :focus-visible { outline-color: var(--lime); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--lime); transform: translateY(-160%); transition: transform 180ms var(--sc-ease-out); }
.skip:focus { transform: none; }

/* ------------------------------------------------------------- type ---- */
.disp {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 84, "opsz" 72;
  letter-spacing: -0.026em;
  line-height: 0.95;
  text-wrap: balance;
  margin: 0;
}
.disp--xl { font-size: clamp(2.7rem, 5.4vw, 6rem); }
.disp--lg { font-size: clamp(2.1rem, 3.9vw, 4.25rem); }
.disp--md { font-size: clamp(1.75rem, 2.7vw, 3rem); letter-spacing: -0.022em; line-height: 1; }
.disp--sm { font-size: 1.6rem; letter-spacing: -0.02em; }

.lede { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); line-height: 1.45; letter-spacing: -0.01em;
  max-width: 40ch; margin: 0; text-wrap: pretty; }
.body { font-size: 1.04rem; line-height: 1.62; max-width: 56ch; margin: 0; text-wrap: pretty; }
.kicker { font: 600 0.78rem/1.2 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }

/* ---------------------------------------------------------- boutons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: 0 1.5em; border: 0; border-radius: 999px;
  font: 600 0.98rem/1 var(--sc-font-text); letter-spacing: -0.005em; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--ink  { background: var(--ink); color: var(--lime); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 18px -8px rgba(23,20,15,.55); }
.btn--lime { background: var(--lime); color: var(--ink); box-shadow: 0 8px 22px -10px rgba(200,238,74,.55); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--big { min-height: 58px; padding: 0 2em; font-size: 1.06rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover  { background: var(--ink-3); }
  .btn--lime:hover { background: #D6F86A; }
  .btn--ghost:hover { background: rgba(23,20,15,.06); }
}
.arrowlink { display: inline-flex; gap: .4em; font-weight: 600; text-decoration: none; color: inherit;
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.arrowlink span { transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .arrowlink:hover span { transform: translateX(3px); } }
.arrowlink--inv { color: var(--cream); }

/* ------------------------------------------------ emplacements vides ---- */
.todo {
  display: inline-block; vertical-align: middle; margin-left: .45em;
  font: 500 0.72rem/1.25 var(--sc-font-text); letter-spacing: .02em; text-transform: none;
  padding: 3px 8px; border-radius: 6px; border: 1px dashed currentColor; opacity: .78;
}
.slot {
  position: relative; display: grid; place-content: center; text-align: center; gap: 4px;
  border-radius: var(--r-md); color: var(--olive);
  background: var(--lime-2);
  border: 1.5px dashed rgba(23, 20, 15, .38);
}
.slot__label { font: 600 0.72rem/1.2 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase; }
.slot__hint  { font: 500 0.72rem/1.2 var(--sc-font-text); opacity: .8; }
.slot--patch { width: 100%; aspect-ratio: 1.38; box-shadow: 0 18px 30px -18px rgba(40,50,10,.6); }
.slot--dark  { background: rgba(200,238,74,.12); border-color: rgba(200,238,74,.6); color: var(--lime); box-shadow: none; }
.slot--fill  { position: absolute; inset: 0; border-radius: 0; border: 0; background: var(--lime-2); }
.slot--cream { background: var(--cream-2); color: var(--brown); }
.slot--round { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.slot--mini  { width: 76px; aspect-ratio: 1.38; border-radius: 12px; background: var(--lime-2); }
.slot--mini .slot__label { font-size: .6rem; }

/* ===================================================== LA COUTURE (chrome) */
.seam {
  position: fixed; left: 0; top: 0; width: 100%; height: 0; z-index: 60;
  pointer-events: none; transform: translateX(calc(var(--split) * 1%));
  transition: opacity 200ms var(--sc-ease-out);
}
.seam__line { display: none; }
.seam__top {
  position: absolute; top: 14px; left: 0; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 14px; width: 560px; translate: -50% 0; pointer-events: auto;
}
.seam__link {
  font: 600 0.82rem/1 var(--sc-font-text); color: var(--ink); text-decoration: none; white-space: nowrap;
  padding: 10px 4px;
}
.seam__link--l { justify-self: end; }
.seam__link--r { justify-self: start; }
@media (hover: hover) and (pointer: fine) { .seam__link:hover { text-decoration: underline; text-underline-offset: 4px; } }

/* l'étiquette tissée : un rectangle d'encre cousu par ses deux bouts */
.tag {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--cream); border: 0; border-radius: 3px;
  font: 600 0.82rem/1 var(--sc-font-text); text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 14px -6px rgba(23,20,15,.6);
}
.tag::before, .tag::after {
  content: ""; position: absolute; top: 5px; bottom: 5px; width: 0;
  border-left: 1.5px dashed rgba(238,229,212,.55);
}
.tag::before { left: 5px; } .tag::after { right: 5px; }
.tag--brand { padding: 10px 18px; }
.tag--brand .wordmark { width: 108px; }
.tag--cart { position: absolute; left: 0; top: calc(100svh - 62px); translate: -50% 0; padding: 12px 20px; pointer-events: auto; white-space: nowrap; }
.tag:active { transform: scale(.97); }

.wordmark {
  display: inline-block; width: 100%; aspect-ratio: 511.2 / 85;
  background: currentColor;
  -webkit-mask: url(assets/wordmark.svg) center / contain no-repeat;
          mask: url(assets/wordmark.svg) center / contain no-repeat;
}

/* l'étiquette du téléphone, en haut à gauche */
.mtag { display: none; }

/* --------------------------------------------------------------- barre -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 70; height: 62px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 0 var(--gut); background: var(--ink); color: var(--cream);
  transform: translateY(-101%); visibility: hidden;
  transition: transform 260ms var(--sc-ease-out), visibility 0s linear 260ms;
}
.bar.is-on { transform: none; visibility: visible; transition: transform 260ms var(--sc-ease-out), visibility 0s; }
.bar__stitch {
  position: absolute; left: 0; right: 0; bottom: 7px; height: 1.5px;
  background: repeating-linear-gradient(90deg, rgba(238,229,212,.5) 0 9px, transparent 9px 16px);
  transform: scaleX(var(--sew, 0)); transform-origin: 50% 50%;
}
.bar__nav { display: flex; gap: 26px; }
.bar__nav a { font: 500 0.88rem/1 var(--sc-font-text); color: var(--cream); text-decoration: none; padding: 8px 0; }
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover { color: var(--lime); } }
.bar__brand { color: var(--cream); width: 118px; display: grid; justify-items: center; gap: 4px; text-decoration: none; }
/* « by Angel'ina » s'écrit de gauche à droite quand on arrive à la boutique (--by, site.js) */
.byline {
  font: 600 0.6rem/1 var(--sc-font-text); letter-spacing: 0.34em; text-transform: uppercase; color: var(--lime);
  white-space: nowrap; margin-right: -0.34em;
  clip-path: inset(0 calc((1 - var(--by, 0)) * 100%) 0 0); opacity: calc(var(--by, 0) * 1.6);
}
.bar:has(.byline) { --brand-shift: calc(var(--by, 0) * -3px); }
.bar__brand .wordmark { transform: translateY(var(--brand-shift, 0)); }
.bar__end { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
/* les réseaux de l'institut : pastilles rondes, dans la barre et à la fin */
.bar__social { display: flex; gap: 8px; }
.sicon { display: inline-grid; place-content: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
  color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(238,229,212,.32);
  transition: color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out); }
.sicon svg { width: 18px; height: 18px; }
.sicon:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .sicon:hover { color: var(--ink); background: var(--lime); box-shadow: none; } }
@media (pointer: coarse) { .sicon { width: 44px; height: 44px; } }
.cartpill { display: inline-flex; gap: 8px; align-items: center; text-decoration: none;
  background: var(--lime); color: var(--ink); border-radius: 999px; min-height: 40px; padding: 0 16px;
  font: 600 0.88rem/1 var(--sc-font-text); transition: background-color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .cartpill:hover { background: #D6F86A; } }

/* « Où l'acheter » flottant : téléphone */
.fab { display: none; }

/* ====================================================== LE DIPTYQUE ===== */
.dip { background: var(--ink); }
.dip__panel { position: absolute; inset: 0; overflow: hidden; }
.dip__panel--l { clip-path: inset(0 calc(100% - var(--split) * 1%) 0 0); color: var(--ink); }
.dip__panel--r { clip-path: inset(0 0 0 calc(var(--split) * 1%)); color: var(--ink); }
.ground { position: absolute; inset: 0; }
.ground--lime  { background: var(--lime); }
.ground--cream { background: var(--cream); }
.dip__panel--l .kicker { color: var(--olive); }
.dip__panel--l .lede   { color: #26300A; }
.dip__panel--r .kicker { color: var(--brown); }
.dip__panel--r .lede   { color: #3D342A; }

/* la couture dans chaque scène : un pli et un point avant */
.dip__seam {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  transform: translateX(calc(var(--split) * 1%));
}
.dip__seam::before {          /* le pli */
  content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: linear-gradient(90deg, rgba(23,20,15,.16), rgba(255,255,255,.18));
}
.dip__seam::after {           /* le point avant */
  content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: repeating-linear-gradient(180deg, rgba(23,20,15,.78) 0 11px, transparent 11px 22px);
}
.dip__seam--live::after { display: none; }   /* acte 3 : points vivants */
.stitch {
  position: absolute; left: -1.5px; width: 3px; height: 13px; border-radius: 2px;
  background: rgba(23,20,15,.86); will-change: transform, opacity;
}

/* les ombres de feuillage : un même soleil sur les deux moitiés */
.plane { position: absolute; inset: -12% 0; pointer-events: none; }
.shade {
  position: absolute; mix-blend-mode: multiply; will-change: transform;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.shade--soft {            /* le même rameau, flou : il est loin */
  left: 8%; top: -4%; width: 64%; aspect-ratio: 615 / 750;
  -webkit-mask-image: url(assets/shade-far.webp); mask-image: url(assets/shade-far.webp);
  -webkit-mask-size: contain; mask-size: contain;
}
.shade--branch {
  left: 33%; width: 36%; top: 4%; aspect-ratio: 710 / 980;
  -webkit-mask-image: url(assets/shade-branch.webp); mask-image: url(assets/shade-branch.webp);
  -webkit-mask-size: contain; mask-size: contain;
}
.dip__panel--l .shade--soft   { background: rgba(70, 86, 18, .42); }
.dip__panel--r .shade--soft   { background: rgba(120, 88, 48, .30); }
.dip__panel--l .shade--branch { background: rgba(52, 66, 10, .40); }
.dip__panel--r .shade--branch { background: rgba(110, 76, 38, .34); }
.shade--b { left: 30%; top: 18%; width: 70%; rotate: 160deg; }

/* ------------------------------------------------ acte 1 : le héros ---- */
.dip__over { position: absolute; inset: 0; z-index: 10; pointer-events: none; color: var(--ink); }
.dip__over a, .dip__over button { pointer-events: auto; }
.hero { position: absolute; inset: 0; }
.hero__h1 {
  margin: 0; font-family: var(--sc-font-display); font-weight: 760;
  font-variation-settings: "wdth" 80, "opsz" 96;
  font-size: min(7vw, 15vh); line-height: .9; letter-spacing: -0.03em;
}
.hero__half { position: absolute; top: 25vh; white-space: nowrap; }
.hero__half--l { right: calc(50% + 1.2vw); }
.hero__half--r { left: calc(50% + 1.2vw); }
.br-phone { display: none; }   /* le titre passe sur deux lignes de chaque côté de la couture, sur téléphone */
.hero__side { position: absolute; bottom: 8vh; display: grid; gap: 10px; justify-items: start; max-width: 30vw; }
.hero__side--l { left: var(--gut); }
.hero__side--r { right: var(--gut); justify-items: end; text-align: right; }
.hero__side--l .kicker { color: var(--olive); }
.hero__side--r .kicker { color: var(--brown); }
.hero__line { margin: 0 0 6px; font: 500 clamp(1.05rem, .9rem + .5vw, 1.35rem)/1.3 var(--sc-font-text); letter-spacing: -0.01em; }

.hero-obj { position: absolute; z-index: 2; }
.hero-obj--box   { left: 57.5vw; top: 44vh; width: min(25vw, 46vh); }
.hero-obj--patch { left: 18.5vw; top: 39vh; width: min(14.5vw, 27vh); }
.hero-obj__in { position: relative; will-change: transform; }
.hero-obj--box .hero-obj__in   { rotate: -7deg; }
.hero-obj--patch .hero-obj__in { rotate: 6deg; }
.hero-obj img { width: 100%; height: auto; filter: drop-shadow(0 2px 2px rgba(80,55,25,.25)); }
.contact {
  position: absolute; left: 6%; right: 6%; bottom: -16%; height: 20%; z-index: -1;
  background: radial-gradient(closest-side, rgba(70,48,22,.42), rgba(70,48,22,0));
  filter: blur(8px);
}
.hero-obj--patch .contact { background: radial-gradient(closest-side, rgba(40,52,8,.45), rgba(40,52,8,0)); }
.contact--dark { background: radial-gradient(closest-side, rgba(0,0,0,.7), rgba(0,0,0,0)); }

/* ---------------------------------------- acte 1 : états de la couture -- */
.pcopy { position: absolute; display: grid; gap: 16px; justify-items: start; z-index: 3; }
.pcopy--l { left: var(--gut); }
.pcopy--r { right: var(--gut); justify-items: end; text-align: right; }
.pcopy--mid { top: 50%; translate: 0 -50%; max-width: min(38vw, 34rem); }
.pcopy--lean { top: 50%; translate: 0 -50%; max-width: min(36vw, 33rem); gap: 18px; }
.pcopy--lean .lede { max-width: 34ch; }
.pcopy--lean .btn { margin-top: 6px; }
.pcopy--mini { top: 50%; translate: 0 -50%; width: min(25vw, 24rem); gap: 22px; }
.mini-box { width: 100%; height: auto; rotate: -5deg; filter: drop-shadow(0 18px 22px rgba(90,62,30,.28)); }
.mini-line { margin: 0; font: 500 1.15rem/1.35 var(--sc-font-text); color: #3D342A; text-wrap: balance; }
.mini-line strong { font-weight: 700; color: var(--ink); }
.lean-slot { position: absolute; left: 42vw; top: 50%; translate: 0 -50%; width: min(19vw, 40vh); z-index: 2; }
.lean-photo { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; rotate: 4deg;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 30px 50px -24px rgba(40,50,10,.6), 0 8px 16px -8px rgba(40,50,10,.35); }
.lean-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.patch-cut { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 2px rgba(40,50,10,.25)); }
/* la petite fenêtre film du patch (acte 2), en face de celle des lingettes.
   En attendant la vidéo : la photo du chevet, poussée lentement par le défilement. */
.minifilm {
  position: relative; margin: 0 0 6px; width: min(15vw, 26vh); aspect-ratio: 9 / 16; border-radius: var(--r-md); overflow: hidden;
  background: #d9c6a6;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 28px 46px -22px rgba(40,50,10,.6), 0 8px 16px -8px rgba(40,50,10,.3);
}
.minifilm :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%;
  transform: scale(calc(1.06 + var(--sc-p, 0) * 0.14)) translateY(calc(var(--sc-p, 0) * -2.5%)); transform-origin: 46% 62%; }
/* « en vente à l'institut » */
.minifilm--sac :is(img, video) { object-position: 46% 50%; transform-origin: 48% 42%; }
.instore { display: flex; align-items: center; gap: 8px; margin: 0; width: 100%; font: 500 .94rem/1.35 var(--sc-font-text); }
.instore svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.instore--inv { color: #CFC5B2; justify-content: center; font-size: .86rem; }

.slot--tilt { rotate: 5deg; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.chips li { padding: 9px 14px; border-radius: 999px; font: 600 .86rem/1 var(--sc-font-text);
  box-shadow: inset 0 0 0 1.5px rgba(23,20,15,.55); }

/* ------------------------------------------------ acte 2 : le film ----- */
.film { position: absolute; top: 50%; right: var(--gut); height: min(80vh, 78svh); aspect-ratio: 9 / 16; translate: 0 -50%; z-index: 2; }
.film__frame {
  position: absolute; inset: 0; border-radius: var(--r-lg); overflow: hidden; background: #d9c6a6;
  box-shadow: 0 2px 0 rgba(255,255,255,.4) inset, 0 34px 60px -26px rgba(80,52,20,.55), 0 10px 22px -8px rgba(80,52,20,.3);
}
.film__scrim { display: none; }
.filmcopy {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(24vw, 26rem); z-index: 3;
  left: calc(36% + 3.5vw);
}
.filmcopy__item { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; display: grid; gap: 16px; justify-items: start; }
.pcopy--side { top: 50%; translate: 0 -50%; max-width: min(27vw, 22rem); gap: 18px; }
.side-big { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-variation-settings: "wdth" 84;
  font-size: clamp(1.6rem, 2.5vw, 2.6rem); line-height: 1; letter-spacing: -0.03em; }
.pcopy--side .kicker { color: var(--olive); }

/* --------------------------------------------- acte 3 : l'ouverture ---- */
.dip--open { perspective: 1800px; }
.door { will-change: transform; }
.door--l { transform: translateX(calc(var(--open) * -51%)); }
.door--r { transform: translateX(calc(var(--open) * 51%)); }
.door__edge { position: absolute; top: 0; bottom: 0; width: 7vw; pointer-events: none; opacity: calc(var(--open) * 4); }
.door__edge--l { left: calc(50% - 7vw); background: linear-gradient(90deg, transparent, rgba(23,20,15,.22)); }
.door__edge--r { left: 50%; background: linear-gradient(270deg, transparent, rgba(23,20,15,.22)); }
.doorname {
  position: absolute; top: 50%; translate: 0 -50%; margin: 0; white-space: nowrap;
  font-family: var(--sc-font-display); font-weight: 760; font-variation-settings: "wdth" 80, "opsz" 96;
  font-size: min(8vw, 17vh); letter-spacing: -0.03em; line-height: .9; color: var(--ink);
}
.doorname--l { right: calc(50% + 1.6vw); }
.doorname--r { left: calc(50% + 1.6vw); }

.inside { position: absolute; inset: 0; background: var(--ink); color: var(--cream); overflow: hidden; }
.inside__glow {
  position: absolute; inset: -10%;
  background: radial-gradient(46% 58% at 52% 48%, rgba(255, 210, 140, .34), rgba(255, 210, 140, 0) 72%);
  transform: scaleX(calc(.25 + var(--open) * .75)); opacity: calc(var(--open) * 1.6);
}
.inside__leaves {
  position: absolute; left: 48%; top: -4%; width: 44%; aspect-ratio: 710 / 980; opacity: calc(var(--open) * .55);
  background: var(--ink);
  -webkit-mask: url(assets/shade-branch.webp) center / contain no-repeat; mask: url(assets/shade-branch.webp) center / contain no-repeat;
}
.duo {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center;
  text-align: center; gap: 1.6vh; padding: 92px var(--gut) 5vh;
}
.duo__copy { display: grid; gap: 14px; justify-items: center; position: relative; z-index: 2; }
.duo__h { max-width: 16ch; color: var(--cream); font-size: clamp(2.5rem, 4.4vw, 5rem); }
.duo__copy .lede { max-width: 46ch; }
.kicker--lime { color: var(--lime); }
.lede--inv { color: #CFC5B2; }
.duo__objs { position: relative; width: min(54vw, 46rem); height: 100%; max-height: 40vh; min-height: 200px; }
.duo__obj { position: absolute; bottom: 8%; }
.duo__obj--box { left: 52%; height: 84%; }
.duo__obj--box img { height: 100%; width: auto; }
.duo__obj--patch { right: 53%; height: 87%; bottom: 6.6%; rotate: -2deg; }
.duo__obj--patch .patch-cut { height: 100%; width: auto; }
.duo__floor { position: absolute; left: 0; right: 0; bottom: 7.5%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238,229,212,.28), transparent); }
.duo .buy { justify-content: center; }
.duo .price { justify-content: center; }

/* la fente : la couture s'ouvre là où les points ont sauté */
.slit {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 10px; margin-left: -5px; z-index: 9; pointer-events: none;
  background: linear-gradient(90deg, rgba(23,20,15,0), #17140F 30%, #4A3A24 50%, #17140F 70%, rgba(23,20,15,0));
  transform: scaleY(var(--unpick, 0)); transform-origin: 50% 0;
  opacity: calc(1 - var(--open) * 3);
}

.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.buy--inv { margin-top: 6px; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3em .6em; margin: 0;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 2rem; letter-spacing: -0.03em; width: 100%; }
.price .todo { font-family: var(--sc-font-text); letter-spacing: .02em; }
.buy--inv .price { color: var(--cream); }

/* ============================================================ BOUTIQUE == */
.shop { position: relative; background: var(--ink); color: var(--cream); padding: clamp(3.5rem, 8vh, 6rem) 0 clamp(4rem, 9vh, 7rem); }
.shop__head { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 3rem; margin-bottom: 3rem; }
.spread {
  display: grid; grid-template-columns: 1.02fr 1fr; border-radius: var(--r-lg); overflow: hidden;
  margin-top: 1.5rem; color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 40px 80px -40px rgba(0,0,0,.6);
}
.spread--lime  { background: var(--lime); }
.spread--cream { background: var(--cream); }
.spread--flip .gallery { order: 2; }
.spread--lime .kicker  { color: var(--olive); }
.spread--cream .kicker { color: var(--brown); }
.spread .body { color: #2B261E; }
.spread--lime .body { color: #26300A; }

.gallery { padding: 14px; display: grid; gap: 10px; align-content: start; }
.gallery__main { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: rgba(23,20,15,.06); }
.gallery__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery__main img.is-white { object-fit: contain; background: #fff; }
.gallery__main [hidden] { display: none; }
.gallery__thumbs { display: flex; gap: 8px; }
.gallery__thumbs button {
  position: relative; width: 64px; height: 80px; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden;
  cursor: pointer; background: rgba(23,20,15,.08); opacity: .6; transition: opacity 160ms var(--sc-ease-out);
  box-shadow: inset 0 0 0 1.5px transparent;
}
.gallery__thumbs button[aria-selected="true"] { opacity: 1; box-shadow: inset 0 0 0 2px var(--ink); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumb-slot { display: grid; place-content: center; height: 100%; font: 600 .8rem var(--sc-font-text);
  border: 1.5px dashed rgba(23,20,15,.35); border-radius: var(--r-sm); }

.spread__info { padding: clamp(1.75rem, 4vw, 3.75rem); align-self: center; }
.spread__info.sc-stack > * + * { margin-top: 1.1rem; }
.spread__info .disp--lg { margin-top: .35rem; }
.feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.feats li { position: relative; padding-left: 36px; font-size: 1rem; line-height: 1.4; }
.feats svg { position: absolute; left: 0; top: -1px; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spread .buy { padding-top: .5rem; }
.limits { margin-top: 1.6rem !important; padding: 18px 20px; border-radius: var(--r-md); background: rgba(23,20,15,.07); }
.limits p { margin: 0; font-size: .95rem; line-height: 1.5; color: #26300A; }
.limits__h { font-weight: 700 !important; color: var(--ink) !important; margin-bottom: 6px !important; }
.more { border-top: 1px solid rgba(23,20,15,.18); padding-top: 14px; }
.more summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; font-size: 1.2rem; line-height: 1; transition: transform 200ms var(--sc-ease-out); }
.more[open] summary::after { transform: rotate(45deg); }
.more p { margin: 10px 0 0; }

.duostrip {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 22px;
  margin-top: 1.5rem; padding: 18px 22px 18px 18px; border-radius: var(--r-lg);
  background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(238,229,212,.1);
}
.duostrip__pics { display: flex; align-items: center; gap: 10px; }
.duostrip__pics img { width: 96px; height: auto; rotate: -5deg; }
.duostrip__pics .duostrip__patch { width: 48px; rotate: 6deg; }
.duostrip__t { margin: 0; font-size: 1.1rem; color: #CFC5B2; }
.duostrip__t strong { color: var(--cream); font-weight: 700; }
.price--inv { width: auto; font-size: 1.6rem; color: var(--cream); }

/* ============================================================ GESTES ==== */
.gestes__stage { background: var(--cream); color: var(--ink); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw; padding: 0 var(--gut); }
.gestes__copy { display: grid; gap: 2.4rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.step { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; align-items: baseline; }
.step__n { grid-row: span 2; display: grid; place-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--lime); font: 700 1rem/1 var(--sc-font-text); align-self: start; }
.step__v { font-family: var(--sc-font-display); font-weight: 700; font-variation-settings: "wdth" 84; font-size: clamp(1.8rem, 2.6vw, 2.8rem); letter-spacing: -0.03em; line-height: 1; }
.step__t { color: #3D342A; font-size: 1.05rem; margin-top: 6px; }

.gestes__art { position: relative; height: min(70vh, 40vw); }
.band { position: absolute; left: 4%; right: 4%; height: 26%; top: 48%; border-radius: 10px; }
.band--back { top: 42%; background: linear-gradient(180deg, #D7C9AF, #E6DAC4); box-shadow: inset 0 6px 14px rgba(80,56,28,.22); }
.band--front {
  background: linear-gradient(180deg, #FFFCF6 0%, #F3EBDD 55%, #E6DAC6 100%);
  box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset, 0 22px 30px -18px rgba(80,56,28,.45), 0 2px 4px rgba(80,56,28,.12);
}
.band__stitch { position: absolute; left: 3%; right: 3%; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(23,20,15,.55) 0 11px, transparent 11px 20px); }
.band__stitch--t { top: 12px; } .band__stitch--b { bottom: 12px; }
.token {
  --t: clamp(0, (var(--sc-p, 0) - 0.04) * 2.7, 1);
  position: absolute; left: 50%; top: 8%; width: 24%; aspect-ratio: 649 / 816;
  transform: translate(-50%, calc(var(--t) * 78%)) rotate(calc(-9deg + var(--t) * 9deg));
}
.token img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 18px 18px rgba(40,50,10,.35)); }
.gestes__chips { z-index: 5; }
.gestes__chips {
  position: absolute; left: 0; right: 0; bottom: 4%; display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0;
  opacity: clamp(0, (var(--sc-p, 0) - 0.68) * 6, 1);
}
.gestes__chips li { list-style: none; padding: 9px 14px; border-radius: 999px; font: 600 .86rem/1 var(--sc-font-text);
  background: var(--ink); color: var(--cream); }

/* ============================================================== FAQ ===== */
.faq { background: var(--ink); color: var(--cream); padding: clamp(5rem, 12vh, 8rem) 0; }
.faq__wrap { display: grid; grid-template-columns: 1fr 1.25fr; gap: 5vw; align-items: start; }
.faq__head { position: sticky; top: 110px; display: grid; gap: 1.2rem; }
.faq__head a { color: var(--lime); }
.faq__list details { border-top: 1px solid rgba(238,229,212,.14); }
.faq__list details:last-child { border-bottom: 1px solid rgba(238,229,212,.14); }
.faq__list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center;
  padding: 22px 0; font: 600 1.12rem/1.3 var(--sc-font-text); letter-spacing: -0.01em;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: "+"; flex: none; display: grid; place-content: center; width: 32px; height: 32px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(238,229,212,.35); font-size: 1.15rem; transition: transform 200ms var(--sc-ease-out), background-color 160ms; }
.faq__list details[open] summary::after { transform: rotate(45deg); background: var(--lime); color: var(--ink); box-shadow: none; }
.faq__list p { margin: 0 0 22px; color: #CFC5B2; line-height: 1.6; max-width: 60ch; }

/* ========================================================= ANGEL'INA ==== */
/* La FAQ en conversation (site.js). Les questions en citron (le patch), les
   réponses en crème (les lingettes) : les deux moitiés du diptyque se parlent,
   et les coutures en pointillés tiennent le panneau. */
.faq__wrap:has(.bot) { align-items: center; }
.bot {
  /* minmax(0, 1fr) : la rangée de questions du téléphone ne doit pas élargir le panneau */
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(640px, 76vh); border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink-2); color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(238,229,212,.08), 0 44px 80px -44px rgba(0,0,0,.75), 0 14px 28px -14px rgba(0,0,0,.5);
}
.bot__head { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 24px; }
.bot__head::after, .bot__dock::before {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: repeating-linear-gradient(90deg, rgba(238,229,212,.3) 0 9px, transparent 9px 16px);
}
.bot__head::after { bottom: 0; }
.bot__dock::before { top: 0; }
.bot__av { position: relative; flex: none; display: grid; place-content: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--lime); color: var(--ink); }
.bot__av::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed rgba(23,20,15,.42); }
.bot__av svg { width: 22px; height: 22px; fill: currentColor; }
.bot__name { margin: 0; font: 700 1.45rem/1 var(--sc-font-display); font-variation-settings: "wdth" 84, "opsz" 72; letter-spacing: -0.02em; }
.bot__status { margin: 5px 0 0; font-size: .88rem; line-height: 1.3; color: var(--mist); }

.bot__log { position: relative; display: flex; flex-direction: column; gap: 12px; overflow-x: hidden; overflow-y: auto; padding: 22px 24px 14px;
  scrollbar-width: thin; scrollbar-color: rgba(238,229,212,.22) transparent;
  /* les messages s'effacent sous la couture du haut au lieu d'être coupés net */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 8px), transparent);
          mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 8px), transparent); }
.msg { display: flex; align-items: flex-end; gap: 10px; max-width: 86%; animation: msg-in 340ms var(--sc-ease-out) both; }
.msg--bot { align-self: flex-start; transform-origin: 0 100%; }
.msg--me { align-self: flex-end; flex-direction: row-reverse; transform-origin: 100% 100%; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.msg__av { flex: none; display: grid; place-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: var(--ink); }
.msg__av svg { width: 14px; height: 14px; fill: currentColor; }
.msg__b { padding: 12px 16px; border-radius: 20px; font-size: 1rem; line-height: 1.5; text-wrap: pretty;
  box-shadow: 0 10px 20px -14px rgba(0,0,0,.6); }
.msg__b p { margin: 0; }
.msg--bot .msg__b { background: var(--cream); color: var(--ink); border-bottom-left-radius: 6px; }
.msg--bot .msg__b a:not(.act) { color: var(--ink); font-weight: 600; }
.msg--me .msg__b { background: var(--lime); color: var(--ink); font-weight: 600; border-bottom-right-radius: 6px; }
.msg__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.act { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font: 600 .9rem/1 var(--sc-font-text); text-decoration: none; transition: transform 160ms var(--sc-ease-out); }
.act:active { transform: scale(.97); }
.act--ink { background: var(--ink); color: var(--lime); }
.act--line { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.bot .msg :focus-visible { outline-color: var(--ink); }
.msg--typing .msg__b { display: inline-flex; gap: 5px; padding: 17px 18px; }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(23,20,15,.55); animation: typing 1s ease-in-out infinite; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.msg.is-flash .msg__b { animation: flash 1.3s var(--sc-ease-out); }
@keyframes flash { 0%, 45% { outline: 2px solid var(--lime); outline-offset: 4px; } 100% { outline: 2px solid rgba(200,238,74,0); outline-offset: 4px; } }

.bot__dock { position: relative; padding: 16px 24px 20px; }
.bot__hint { margin: 0 0 12px; font: 600 .74rem/1 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.bot__asks { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.ask {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(238,229,212,.3);
  font: 600 .92rem/1.2 var(--sc-font-text); text-align: left;
  transition: color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .ask:hover { color: var(--lime); box-shadow: inset 0 0 0 1.5px var(--lime); } }
.ask:active { transform: scale(.97); }
.ask__tick { display: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ask.is-asked { color: var(--lime); background: rgba(200,238,74,.1); box-shadow: inset 0 0 0 1.5px rgba(200,238,74,.42); }
.ask.is-asked .ask__tick { display: block; }

/* ========================================================== INSTITUT ==== */
.inst { background: var(--cream); color: var(--ink); padding: clamp(5rem, 12vh, 8rem) 0; }
.inst__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5vw; align-items: center; }
.inst__photo { margin: 0; }
.inst__wipe { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3.1; }
.inst__par { height: 118%; margin-top: -9%; }
.inst__par img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.inst__photo figcaption { margin-top: 12px; font-size: .86rem; color: var(--brown); }
.inst .kicker { color: var(--brown); }
.inst .body { color: #3D342A; }
.facts { display: grid; grid-template-columns: repeat(3, auto); gap: 18px 28px; margin: 1.8rem 0 0; justify-content: start; }
.facts div { display: grid; gap: 4px; align-content: start; }
@media (min-width: 861px) { .facts dd { white-space: nowrap; } }   /* les horaires tiennent en deux lignes */
.facts dt { font: 600 .74rem/1.2 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--brown); }
.facts dd { margin: 0; font-weight: 600; }
.facts a { color: inherit; }
a[href^="tel:"] { white-space: nowrap; }
.inst__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 1.8rem !important; }
/* le surtitre colle au titre ; le texte prend de l'air sous le titre */
.inst__text > .kicker + .disp { margin-top: .7rem; }
.inst__text > .body { margin-top: 1rem; }
/* « Suivre l'institut » : les deux comptes, en encre comme les boutons du site, sous une couture */
.follow { position: relative; margin-top: 2rem !important; padding-top: 1.6rem; }
.follow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px;
  background: repeating-linear-gradient(90deg, rgba(23,20,15,.35) 0 9px, transparent 9px 16px); }
.follow__t { margin: 0 0 .9rem; font: 600 .74rem/1.2 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--brown); }
.follow__links { display: flex; flex-wrap: wrap; gap: 10px; }
.follow__a { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 20px 8px 8px; border-radius: 999px;
  background: var(--ink); color: var(--cream); text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 24px -14px rgba(23,20,15,.6);
  transition: transform 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.follow__a:active { transform: scale(.97); }
.follow__ico { display: grid; place-content: center; width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--lime); color: var(--ink); }
.follow__ico svg { width: 20px; height: 20px; }
.follow__txt { display: grid; gap: 2px; line-height: 1.15; }
.follow__txt strong { font: 700 1rem/1.15 var(--sc-font-text); }
.follow__txt span { font-size: .86rem; color: var(--mist); }
.follow__go { margin-left: auto; padding-left: 10px; color: var(--lime); font-weight: 600; transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .follow__a:hover { background: var(--ink-3); } .follow__a:hover .follow__go { transform: translate(2px, -2px); } }
.inst :focus-visible { outline-color: var(--ink); }

/* ============================================================== FIN ===== */
.fin__stage { background: var(--lime); color: var(--ink); display: grid; grid-template-rows: 1fr auto; overflow: clip; }
.fin__shade {
  position: absolute; right: -4%; top: -8%; width: 46%; aspect-ratio: 710 / 980; background: rgba(52,66,10,.36); mix-blend-mode: multiply;
  -webkit-mask: url(assets/shade-branch.webp) center / contain no-repeat; mask: url(assets/shade-branch.webp) center / contain no-repeat;
}
.fin__card { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto 1fr; align-items: center; gap: 2vh 4vw; padding: 9vh var(--gut) 2vh; }
.fin__mark { grid-column: 1 / -1; color: var(--ink); }
.fin__mark .wordmark { width: min(88vw, 150vh); display: block; margin: 0 auto; }
.fin__by { display: block; width: min(88vw, 150vh); margin: .6vh auto 0; text-align: right;
  font: 600 clamp(.8rem, 1.25vw, 1.25rem)/1 var(--sc-font-text); letter-spacing: .42em; text-transform: uppercase; color: var(--ink); }
.fin__buy .instore { color: #26300A; max-width: 34ch; }
.fin__objs { display: flex; align-items: flex-end; justify-content: center; gap: 3vw; }
.fin__objs .patch-cut { width: min(14vw, 21vh); rotate: 5deg; filter: drop-shadow(0 22px 24px rgba(40,50,10,.35)); }
.fin__objs img { width: min(28vw, 40vh); height: auto; rotate: -6deg; filter: drop-shadow(0 22px 24px rgba(40,50,10,.35)); }
.fin__buy { display: grid; gap: 18px; justify-items: start; }
.fin__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fin__acts .btn { margin-right: 6px; }
.sicon--fin { width: 58px; height: 58px; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(23,20,15,.55); }
.sicon--fin svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .sicon--fin:hover { color: var(--lime); background: var(--ink); } }
.fin__buy .price .todo { color: var(--olive); }
.foot { position: relative; display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 14px 32px; align-items: end;
  padding: 18px var(--gut) 22px; border-top: 1px solid rgba(23,20,15,.22); font-size: .8rem; line-height: 1.45; color: #2E380C; }
.foot p { margin: 0; }
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.foot a { color: var(--ink); }


/* ======================================================= TÉLÉPHONE ===== */
@media (max-width: 860px) {
  :root { --gut: 18px; }

  /* Les trois premières scènes défilent comme sur l'ordinateur : la couture reste
     verticale, le patch à gauche, les lingettes à droite. Tout est seulement
     redimensionné pour une moitié d'écran de téléphone. */
  .seam__link { display: none; }
  .seam__top { top: 10px; width: auto; grid-template-columns: auto; gap: 0; }
  .tag--brand { padding: 8px 14px; }
  .tag--brand .wordmark { width: 84px; }
  .tag--cart { top: calc(100svh - 58px); padding: 11px 16px; font-size: .8rem; }

  .fab {
    display: grid; place-content: center; position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 65;
    width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--ink); color: var(--lime); box-shadow: inset 0 0 0 2px var(--lime), 0 12px 24px -10px rgba(0,0,0,.55);
  }
  .fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }

  .bar { height: 56px; grid-template-columns: 1fr auto 1fr; gap: 10px; }
  .bar__nav, .bar .cartpill { display: none; }
  .bar__brand { grid-column: 2; width: 100px; }
  .byline { font-size: .52rem; }
  .bar__end { grid-column: 3; }
  /* les deux réseaux tiennent au-dessus des pointillés de la barre (36 px visibles, 44 px au doigt) */
  .bar { padding-bottom: 8px; }
  .bar .sicon { position: relative; width: 36px; height: 36px; }
  .bar .sicon svg { width: 16px; height: 16px; }
  .bar .sicon::before { content: ""; position: absolute; inset: -4px; }
  .btn { min-height: 46px; font-size: .94rem; }

  /* héros : le titre à cheval sur la couture, un produit de chaque côté */
  .hero__h1 { font-size: min(11vw, 7svh); line-height: .92; }
  .hero__half { top: 12svh; white-space: normal; max-width: calc(50vw - var(--gut) - 8px); }
  .hero__half--l { right: calc(50% + 8px); text-align: right; }
  .hero__half--r { left: calc(50% + 8px); }
  .br-phone { display: inline; }
  .hero__side { bottom: 84px; max-width: calc(50vw - var(--gut) - 10px); gap: 6px; }
  .hero__side .kicker { font-size: .6rem; letter-spacing: .1em; }
  .hero__line { font-size: .86rem; line-height: 1.3; margin-bottom: 2px; }
  .hero__side .btn { min-height: 44px; padding: 0 13px; font-size: .78rem; }
  .hero-obj--patch { left: 12vw; top: 34svh; width: min(25vw, 15svh); }
  .hero-obj--box { left: 55vw; top: 38svh; width: min(39vw, 24svh * 1.53); }

  /* les états de l'acte 1 */
  .pcopy--mid { max-width: calc(50vw - var(--gut) - 12px); gap: 12px; }
  .pcopy--mid .disp--md { font-size: clamp(1.2rem, 5.4vw, 1.6rem); }
  .pcopy--mid .lede { font-size: .86rem; line-height: 1.4; }
  .pcopy--lean { top: 44%; max-width: calc(70vw - 2 * var(--gut)); gap: 12px; }
  .pcopy--lean .disp--lg { font-size: clamp(1.5rem, 7vw, 2.1rem); }
  .pcopy--lean .lede { font-size: .88rem; line-height: 1.4; }
  .pcopy--lean .chips li { padding: 7px 10px; font-size: .72rem; }
  .pcopy--lean .btn { margin-top: 2px; }
  .lean-slot { left: auto; right: calc(30% + 14px); top: auto; bottom: 84px; translate: none; width: 24vw; }
  .pcopy--mini { width: calc(30vw - var(--gut) - 8px); gap: 12px; }
  .mini-line { font-size: .8rem; line-height: 1.35; }

  /* acte 2 : le patch à gauche, le film des lingettes remplit la droite */
  .pcopy--side { max-width: calc(40vw - 2 * var(--gut) + 6px); gap: 8px; }
  .minifilm { width: 100%; margin: 0 0 4px; }
  .side-big { font-size: clamp(1rem, 4.6vw, 1.3rem); }
  .pcopy--side .arrowlink { font-size: .84rem; }
  .film { top: 0; bottom: 0; left: 40%; right: 0; height: auto; aspect-ratio: auto; translate: none; }
  .film__frame { border-radius: 0; box-shadow: none; }
  .film__scrim { display: block; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(0deg, rgba(238,229,212,.97) 0%, rgba(238,229,212,.9) 30%, rgba(238,229,212,0) 56%); }
  .filmcopy { left: calc(40% + 14px); right: 14px; width: auto; top: auto; bottom: 0; height: 56%; }
  .filmcopy__item { top: auto; bottom: 84px; translate: none; gap: 8px; }
  .filmcopy__item .disp--md { font-size: clamp(1.2rem, 5.4vw, 1.6rem); }
  .filmcopy__item .lede { font-size: .86rem; line-height: 1.4; }

  /* acte 3 : les portes s'écartent sur les côtés, comme sur l'ordinateur */
  .doorname { font-size: min(8.4vw, 6svh); }
  .doorname--l { right: calc(50% + 8px); }
  .doorname--r { left: calc(50% + 8px); }
  /* le duo se lit au centre, comme sur l'ordinateur : les portes s'ouvrent depuis le milieu */
  .duo { grid-template-rows: auto auto auto; align-content: center; justify-items: center; text-align: center; padding: 70px var(--gut) 92px; gap: 14px; }
  .duo__copy { justify-items: center; }
  .duo .buy, .duo .price { justify-content: center; }
  .duo__objs { order: -1; width: 100%; height: min(30svh, 64vw); max-height: none; min-height: 0; }
  .duo__copy { gap: 14px; }
  .duo__h { font-size: clamp(2.1rem, 9.6vw, 3rem); }
  .inside__leaves { left: 30%; width: 80%; }

  .shop__head { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
  /* minmax(0, …) : sinon la rangée de miniatures élargit la colonne et la galerie déborde de la carte */
  .spread { grid-template-columns: minmax(0, 1fr); }
  .gallery__thumbs button { flex: 0 1 64px; min-width: 0; width: auto; height: auto; aspect-ratio: 4 / 5; }
  .spread--flip .gallery { order: 0; }
  .spread__info { padding: 8px 20px 26px; }
  .duostrip { grid-template-columns: auto 1fr; }
  .duostrip__pics img { width: 72px; } .duostrip__pics .duostrip__patch { width: 36px; }
  .duostrip__t { font-size: 1rem; line-height: 1.35; }
  .duostrip .price, .duostrip .btn { grid-column: 1 / -1; }

  .gestes__stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 3vh; padding-top: 72px; }
  .gestes__copy { gap: 1.2rem; }
  .steps { gap: .9rem; }
  .step__v { font-size: 1.6rem; }
  .step__t { font-size: .95rem; }
  /* même cadre que sur l'ordinateur (11:10) : le patch rentre dans le bandeau au lieu de passer dessous */
  .gestes__art { height: auto; width: min(100%, 50svh); aspect-ratio: 11 / 10; justify-self: center; }
  .gestes__chips { left: calc(50% - 50vw + var(--gut)); right: calc(50% - 50vw + 74px); }
  .gestes__chips li { padding: 8px 12px; font-size: .8rem; }
  .gestes__chips li { white-space: nowrap; }

  .faq__wrap { grid-template-columns: 1fr; gap: 1.5rem; }
  .faq__head { position: static; }
  .faq__list summary { font-size: 1.02rem; padding: 18px 0; }
  /* Angel'ina sur téléphone : les questions défilent en rangée, comme des réponses rapides */
  .bot { height: min(600px, 80svh); border-radius: var(--r-md); }
  .bot__head { padding: 14px 16px; gap: 12px; }
  .bot__av { width: 42px; height: 42px; }
  .bot__name { font-size: 1.3rem; }
  .bot__status { font-size: .84rem; }
  .bot__log { padding: 16px 14px 12px; }
  .msg { max-width: 94%; gap: 8px; }
  .msg__b { font-size: .97rem; padding: 11px 14px; }
  .bot__dock { padding: 14px 0 16px; }
  .bot__hint { padding: 0 16px; margin-bottom: 10px; }
  .bot__asks { flex-wrap: nowrap; overflow-x: auto; padding: 0 16px; scroll-padding-inline: 16px; scroll-snap-type: x proximity;
    scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 36px), transparent); }
  .bot__asks::-webkit-scrollbar { display: none; }
  .ask { flex: none; white-space: nowrap; scroll-snap-align: start; }
  .fab { transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out), visibility 0s linear 0s; }
  .fab.is-off { opacity: 0; transform: scale(.9); visibility: hidden;
    transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out), visibility 0s linear 200ms; }

  .inst__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .facts { grid-template-columns: 1fr 1fr; }

  .fin__card { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 72px var(--gut) 10px; gap: 2.4vh; align-content: center; }
  .fin__objs .patch-cut { width: 26vw; } .fin__objs img { width: 46vw; }
  .fin__buy { justify-items: start; }
  /* sur téléphone le bouton fait 46 px : les deux réseaux s'alignent dessus */
  .sicon--fin { width: 46px; height: 46px; }
  .sicon--fin svg { width: 20px; height: 20px; }
  .follow__a { flex: 1 1 15rem; }
  .foot { grid-template-columns: 1fr; gap: 8px; padding-bottom: 86px; font-size: .74rem; }
  /* le pied de page laisse la place du bouton rond « Où l'acheter » */
  .foot__links, .foot__copy { padding-right: 66px; }
  /* pendant les scènes cousues, « Où l'acheter » est l'étiquette de la couture : le bouton rond attend la barre */
  .fab.is-seam { opacity: 0; transform: scale(.9); visibility: hidden;
    transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out), visibility 0s linear 200ms; }
}

@media (max-width: 380px) { .gestes__chips { gap: 6px; } .gestes__chips li { padding: 8px 10px; font-size: .74rem; } }

/* très petits écrans : on allège sans couper les animations */
/* iPhone dans Safari : barres affichées, l'écran visible fait 660 à 750 px de haut.
   On resserre, on ne cache ni le patch ni les produits. */
@media (max-width: 860px) and (max-height: 700px) {
  .pcopy--lean .chips { display: none; }
  .duo__objs { height: 22svh; }
  .duo .lede { display: none; }
  .gestes__art { width: min(100%, 36svh); }
  .steps { gap: .6rem; }
  .step__t { font-size: .9rem; margin-top: 2px; }
  .fin__card { gap: 1.6svh; }
  .fin__objs .patch-cut { width: auto; height: 12svh; }
  .fin__objs img { width: auto; height: 10svh; }
}
/* très petits écrans (iPhone SE et équivalents) : là seulement, on allège le texte */
@media (max-width: 860px) and (max-height: 600px) {
  .step__t, .fin__objs, .fin__buy .instore, .hero__line, .pcopy--mid .lede { display: none; }
  .pcopy--lean .lede { font-size: .82rem; }
  .lean-slot { width: 20vw; }
}
@media (min-width: 861px) and (max-height: 700px) {
  .pcopy--lean .lede { font-size: 1rem; }
  .hero__side { bottom: 5vh; }
  .duo__h { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
}

/* ===================================================== MOUVEMENT RÉDUIT == */
@media (prefers-reduced-motion: reduce) {
  .door--l, .door--r { transform: none !important; opacity: calc(1 - var(--open)); }
  .token { transform: translate(-50%, calc(var(--t) * 78%)); transition: none; }
  .minifilm :is(img, video) { transform: none; }
  .msg, .msg.is-flash .msg__b, .msg--typing i { animation: none; }
  .hero-obj__in, .shade { transform: none !important; }
}

.dip__seam--live::before { opacity: calc(1 - var(--unpick, 0)); }