/* ============================================================
   IN MY ELEMENT — Styles de pages & pièces spéciales
   ============================================================ */

/* ——— HERO montage vidéo/plans ——— */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;color:var(--paper)}
.montage{position:absolute;inset:0;z-index:0;background:var(--noir)}
.montage__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease);will-change:opacity}
.montage__slide.is-on{opacity:1}
.montage__slide img,.montage__slide video{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
/* Voile : garantit la lisibilité du titre quel que soit le plan (clair ou sombre).
   C'est la faute de la maquette client — corrigée ici. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(20,15,17,.42) 0%,rgba(20,15,17,.10) 26%,rgba(20,15,17,.62) 72%,rgba(20,15,17,.88) 100%),
    linear-gradient(100deg,rgba(20,15,17,.72) 0%,rgba(20,15,17,.34) 38%,rgba(20,15,17,0) 62%)}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:var(--s-7)}
.hero__title{font-size:var(--fs-mega)}
.hero__sub{max-width:38ch;color:#EAE4D6;margin-top:var(--s-2)}
.hero__cta{display:flex;gap:var(--s-2);margin-top:var(--s-4);flex-wrap:wrap}
.hero__scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;font-size:var(--fs-xs);letter-spacing:var(--track-wide);text-transform:uppercase;color:#EAE4D6;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero__scroll::after{content:"";width:1px;height:38px;background:currentColor;animation:scrollpulse 2.4s var(--ease) infinite}
@keyframes scrollpulse{0%,100%{opacity:.3;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ——— Bloc couleur signature ——— */
.signature{background:var(--ime-green);color:var(--ink)}
.signature__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-6);align-items:center;min-height:70vh;padding-block:var(--s-7)}
.swatch-row{display:flex;gap:var(--s-2);margin-top:var(--s-3)}
.swatch{width:56px;height:56px;border-radius:var(--r-pill);border:1px solid rgba(58,28,34,.25)}

/* ——— Maroquinerie signature (mockup) ——— */
.mock{position:relative;width:100%;aspect-ratio:3/4;background:
  radial-gradient(130% 100% at 35% 22%, #FBF9F4 0%, #EAE4D6 55%, #D4CAC6 120%);
  display:grid;place-items:center;overflow:hidden}
.mock::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.30),transparent 42%);mix-blend-mode:screen;pointer-events:none}
.mock__field{position:relative;width:62%;aspect-ratio:2/2.7;
  background:linear-gradient(158deg,#C9D18A 0%,#B4BE77 48%,#95A05E 100%);border-radius:4px;
  box-shadow:0 2px 4px rgba(60,64,30,.18), 0 26px 46px rgba(60,64,30,.30), 0 40px 80px rgba(60,64,30,.22), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -12px 30px rgba(70,76,40,.25);
  display:flex;flex-direction:column;justify-content:space-between;padding:16% 12%}
.mock--card .mock__field{aspect-ratio:1.6/1;align-self:center}
.mock--key .mock__field{aspect-ratio:1/1.3;width:44%}
.mock__stitch{position:absolute;inset:7px;border:1px dashed rgba(58,28,34,.28);border-radius:2px}
.mock__brand{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;font-size:.62rem;color:var(--ink);text-align:center;line-height:1.6}
.mock__brand span{display:block;font-size:.42rem;letter-spacing:.4em;color:var(--gold)}
.mock__mono{align-self:center;width:38px;height:38px;border:1.4px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:.6rem;letter-spacing:.06em;font-family:var(--sans)}

/* ——— Split éditorial ——— */
.editorial{position:relative}
.editorial__img{aspect-ratio:4/5;overflow:hidden;background:var(--bone)}
.editorial__img img,.editorial__img video{width:100%;height:100%;object-fit:cover}
.figure-tall{aspect-ratio:3/4.4;overflow:hidden;background:var(--bone)}
.figure-tall img,.figure-tall video{width:100%;height:100%;object-fit:cover}
/* Rectangle vidéo (hero éditorial) */
.hero-vid-frame{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--bone);box-shadow:var(--sh-2)}
.hero-vid-frame--lg{aspect-ratio:4/5.3}
.hero-vid-frame video{width:100%;height:100%;object-fit:cover}
.hero-vid-frame .montage__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.hero-vid-frame .montage__slide.is-on{opacity:1}
.hero-vid-frame figcaption{position:absolute;left:0;bottom:0;right:0;padding:var(--s-3);color:var(--paper);background:linear-gradient(0deg,rgba(20,15,17,.7),transparent);z-index:2}
/* Hero Maison — colonnes en CSS (pas inline) pour que le mobile puisse les écraser */
.maison-hero-grid{grid-template-columns:.92fr 1.08fr}
@media(max-width:820px){
  .maison-hero-grid{grid-template-columns:1fr;gap:var(--s-4)}
  /* La vidéo passe en premier, plein cadre, immersive */
  .maison-hero-grid .hero-vid-frame{order:-1;margin-inline:calc(-1 * var(--gutter));width:auto;aspect-ratio:auto;height:60vh;min-height:440px}
  .maison-hero-grid .hero-vid-frame figcaption{padding:var(--s-4)}
}
/* Bande vidéo — contenue, cinématique */
.video-band{position:relative;width:calc(100% - 2*var(--gutter));max-width:var(--maxw);margin:var(--s-4) auto;
  height:38vh;min-height:260px;max-height:460px;overflow:hidden;background:var(--noir)}
.video-band video{width:100%;height:100%;object-fit:cover}
.video-band__cap{position:absolute;inset:auto 0 0 0;padding:var(--s-4);z-index:2;color:var(--paper);background:linear-gradient(0deg,rgba(20,15,17,.6),transparent)}
.video-band::after{content:"";position:absolute;inset:0;background:rgba(20,15,17,.12)}

/* ——— Marquee ——— */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:var(--s-3)}
.marquee__track{display:flex;gap:var(--s-5);white-space:nowrap;animation:marq 28s linear infinite;font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,3vw,2.4rem);color:var(--ink-2)}
.marquee__track span{display:inline-flex;gap:var(--s-5);align-items:center}
.marquee__track .dot{width:6px;height:6px;border-radius:50%;background:var(--ime-green)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ——— PLP header / filtres ——— */
.plp-head{padding-top:calc(var(--nav-h) + var(--s-6));padding-bottom:var(--s-4)}
.filters{display:flex;gap:var(--s-1);flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:var(--s-3);margin-bottom:var(--s-5)}
.filter{font-size:var(--fs-xs);letter-spacing:var(--track-mid);text-transform:uppercase;padding:.6rem 1.1rem;border:1px solid transparent;transition:all var(--dur-1) var(--ease);color:var(--ink-2)}
.filter:hover{color:var(--ink)}
.filter.is-active{border-color:var(--ink);color:var(--ink)}

/* ——— PDP ——— */
.pdp{padding-top:var(--nav-h)}
.pdp__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-6);align-items:start}
.pdp__gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pdp__gallery .g-item{aspect-ratio:3/4;overflow:hidden;background:var(--bone)}
.pdp__gallery .g-item:first-child{grid-column:1/-1;aspect-ratio:4/4.2}
.pdp__gallery .g-item:last-child:nth-child(even){grid-column:1/-1;aspect-ratio:16/10}
.pdp__gallery img{width:100%;height:100%;object-fit:cover}
.pdp__info{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:var(--s-3)}
.pdp__price{display:flex;gap:.8rem;align-items:baseline;font-size:1.3rem}
.pdp__price del{color:var(--ink-3);text-decoration:line-through;font-size:1rem;opacity:.75}
.pdp__price ins{color:var(--ink);text-decoration:none}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.size{min-width:52px;padding:.7rem .9rem;border:1px solid var(--line);text-align:center;font-size:var(--fs-sm);cursor:pointer;transition:all var(--dur-1) var(--ease)}
.size:hover{border-color:var(--ink)}
.size.is-sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.acc{border-top:1px solid var(--line)}
.acc__head{display:flex;justify-content:space-between;align-items:center;padding:var(--s-3) 0;cursor:pointer;font-size:var(--fs-xs);letter-spacing:var(--track-mid);text-transform:uppercase}
.acc__body{max-height:0;overflow:hidden;transition:max-height var(--dur-2) var(--ease);color:var(--ink-2);font-size:var(--fs-sm);line-height:1.7}
.acc.is-open .acc__body{max-height:240px;padding-bottom:var(--s-3)}
.acc__head .pm{transition:transform var(--dur-1)}
.acc.is-open .acc__head .pm{transform:rotate(45deg)}
.trust-row{display:flex;gap:var(--s-3);flex-wrap:wrap;font-size:var(--fs-xs);letter-spacing:var(--track-tight);color:var(--ink-2);text-transform:uppercase}

/* ——— Panier & Paiement ——— */
.checkout{padding-top:calc(var(--nav-h) + var(--s-5))}
.co-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--s-6);align-items:start}
.cart-line{display:grid;grid-template-columns:96px 1fr auto;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.cart-line__img{width:96px;aspect-ratio:3/4;object-fit:cover;background:var(--bone)}
.cart-line__mock{width:96px;aspect-ratio:3/4}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line)}
.qty button{width:34px;height:34px}
.qty span{min-width:34px;text-align:center;font-size:var(--fs-sm)}
.summary{background:var(--paper-2);border:1px solid var(--line);padding:var(--s-4);position:sticky;top:calc(var(--nav-h) + 24px)}
.summary__row{display:flex;justify-content:space-between;padding:.5rem 0;font-size:var(--fs-sm);color:var(--ink-2)}
.summary__row--total{border-top:1px solid var(--line);margin-top:var(--s-2);padding-top:var(--s-3);font-size:1.15rem;color:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-3)}
.field label{font-size:var(--fs-xs);letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--ink-2)}
.field input,.field select{padding:.9rem 1rem;border:1px solid var(--line);background:var(--paper-2);font:inherit;font-size:var(--fs-sm);color:var(--ink);border-radius:0}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.pay-note{font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.04em;line-height:1.6}
.demo-badge{display:inline-block;background:var(--ime-green);color:var(--ink);font-size:var(--fs-xs);letter-spacing:var(--track-mid);text-transform:uppercase;padding:5px 10px;margin-bottom:var(--s-3)}
.empty{text-align:center;padding:var(--s-8) 0}

/* ——— Page maison / éditorial long ——— */
.page-hero{padding-top:calc(var(--nav-h) + var(--s-7));padding-bottom:var(--s-6)}
.big-quote{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.8rem);line-height:1.35;max-width:24ch}
.two-col-text{columns:2;column-gap:var(--s-6);color:var(--ink-2);line-height:1.8}
.step-num{font-family:var(--serif);font-style:italic;font-size:2.2rem;color:var(--ime-green-ink)}

/* ——— Confirmation ——— */
.confirm{padding-top:calc(var(--nav-h) + var(--s-8));text-align:center;min-height:70vh}

/* ——— Barre de presse « Vu dans » (preuve d'autorité) ——— */
.press{border-block:1px solid var(--line);background:var(--paper-2);padding-block:var(--s-5)}
.press__label{text-align:center;font-size:var(--fs-xs);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-4)}
.press__wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.press__track{display:flex;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;width:max-content;animation:press-scroll 34s linear infinite}
.press__name{font-family:var(--serif);font-size:clamp(1.15rem,2.1vw,1.7rem);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);opacity:.62;white-space:nowrap;font-weight:500}
@keyframes press-scroll{to{transform:translateX(-50%)}}

/* ——— Barre de réassurance ——— */
.trust-bar{background:var(--noir);color:var(--paper)}
.trust-bar__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);padding-block:var(--s-5);max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.trust-cell{text-align:center;display:flex;flex-direction:column;gap:6px}
.trust-cell h4{font-size:var(--fs-xs);letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--ime-green)}
.trust-cell p{font-size:var(--fs-sm);color:#D9CFC9;line-height:1.5}

/* ——— Preuve sociale / communauté ——— */
.social{background:var(--bone)}
.social__stats{display:flex;justify-content:center;gap:clamp(1.5rem,5vw,4.5rem);flex-wrap:wrap;text-align:center;margin-bottom:var(--s-6)}
.social__stat .n{font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);line-height:1;color:var(--ink)}
.social__stat .l{font-size:var(--fs-xs);letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--ink-2);margin-top:8px}
.stars{color:var(--gold-ink);letter-spacing:.15em;font-size:.9em}
.social__quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.quote-card{background:var(--paper-2);border:1px solid var(--line);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2)}
.quote-card .q{font-family:var(--serif);font-size:1.3rem;line-height:1.4;color:var(--ink)}
.quote-card .who{font-size:var(--fs-xs);letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--ink-2)}
.quote-card .src{font-size:var(--fs-xs);color:var(--gold-ink);letter-spacing:.04em}

/* ——— Page Entretien ——— */
.care-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);counter-reset:care}
.care-step{border-top:1px solid var(--ink);padding-top:var(--s-3);display:flex;flex-direction:column;gap:var(--s-2)}
.care-step .num{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--ime-green-ink)}
.care-do-dont{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.care-list{display:flex;flex-direction:column;gap:.7rem}
.care-list li{display:flex;gap:.7rem;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.care-list li::before{content:"";flex:0 0 6px;height:6px;margin-top:.55em;border-radius:50%;background:var(--ime-green)}
.care-list--dont li::before{background:var(--ink-3)}

@media(max-width:900px){
  .trust-bar__grid{grid-template-columns:1fr 1fr;gap:var(--s-4)}
  .social__quotes{grid-template-columns:1fr}
  .care-steps{grid-template-columns:1fr}
  .care-do-dont{grid-template-columns:1fr;gap:var(--s-4)}
}

@media(max-width:960px){
  .signature__grid,.pdp__grid,.co-grid{grid-template-columns:1fr}
  .pdp__info{position:static}
  .summary{position:static}
  .two-col-text{columns:1}
}
@media(max-width:560px){
  .field-row{grid-template-columns:1fr}
  .pdp__gallery{grid-template-columns:1fr}
}

/* ============================================================
   L'UNIVERS — 01 Porter · 02 Écrire · 03 Voyager · 04 Emporter
   (grammaire de la maquette maison, raffinée)
   ============================================================ */
.universe{padding-block:var(--s-7);overflow:hidden}
/* ============================================================
   L'UNIVERS — parti pris graphique : bichromie maison, index ajourés
   ============================================================ */

/* Bichromie : n'importe quelle photo devient « In My Element » */
.duo{position:relative;isolation:isolate}
.duo img,.duo video{filter:grayscale(1) contrast(1.18) brightness(.92)}
.duo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(165deg,var(--ink) 0%,var(--ime-green-deep) 62%,var(--ime-green) 100%);
  mix-blend-mode:color;opacity:.92}
.duo::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:.30;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

/* En-tête : photo bichrome plein cadre + déclaration posée dessus */
.uni-head{position:relative;margin-inline:calc(-1*var(--gutter));margin-bottom:var(--s-7);
  min-height:clamp(420px,64vh,680px);display:flex;align-items:flex-end;overflow:hidden;background:var(--noir)}
.uni-head__bg{position:absolute;inset:0;z-index:0}
.uni-head__bg img{width:100%;height:100%;object-fit:cover}
.uni-head__inner{position:relative;z-index:4;padding:var(--gutter);width:100%;
  display:flex;flex-direction:column;gap:var(--s-2)}
.uni-head .eyebrow--gold{color:var(--ime-green)}
.uni-statement{font-family:var(--sans);font-weight:700;text-transform:uppercase;
  line-height:.86;letter-spacing:-.03em;font-size:clamp(2.4rem,8vw,7rem);
  display:flex;flex-direction:column;align-items:flex-start;margin:.3rem 0 0;
  text-shadow:0 2px 40px rgba(20,15,17,.5)}
.uni-statement .g{color:var(--ime-green)}
.uni-statement .b{color:var(--paper)}
.uni-sub{font-family:var(--serif);font-size:var(--fs-lead);color:#EAE4D6;
  margin-top:var(--s-3);max-width:46ch}
/* compteur de section, en Space Mono */
.uni-head__count{position:absolute;top:var(--gutter);right:var(--gutter);z-index:4;
  font-family:var(--mono);font-size:max(.7rem,.8rem);letter-spacing:.2em;color:var(--ime-green)}

/* ——— Rangées ——— */
.uni-row{position:relative;display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(1.6rem,3.5vw,3.5rem);align-items:center;
  padding-block:clamp(2rem,4vw,3.4rem);border-top:1px solid var(--line)}
.uni-row.flip{grid-template-columns:1.15fr 1fr}
.uni-row.flip .uni-body{order:2}
.uni-row.flip .uni-fig{order:1;margin-left:calc(-1*var(--gutter));margin-right:0}

/* Index géant ajouré — la signature graphique */
.uni-body .num{display:block;font-family:var(--sans);font-weight:700;
  font-size:clamp(4.5rem,11vw,9.5rem);line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px var(--ime-green-deep);
  margin-bottom:-.12em;pointer-events:none;transition:transform .6s var(--ease)}
.uni-row:hover .uni-body .num{transform:translateX(.04em)}
.uni-body .name{display:inline-block;color:var(--ink);font-family:var(--sans);
  font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:-.03em;
  font-size:clamp(2.6rem,6.4vw,5.4rem);position:relative;z-index:2}
.uni-body .copy{margin-top:1rem;font-family:var(--serif);color:var(--ink-2);
  font-size:var(--fs-lead);line-height:1.5;max-width:24rem}
.uni-body .textlink{display:inline-block;margin-top:1.1rem}

/* Image : débord, bichromie, voile vert */
.uni-fig{position:relative;overflow:hidden;aspect-ratio:4/3.2;
  margin-right:calc(-1*var(--gutter));background:var(--bone)}
.uni-fig img,.uni-fig video{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.6,.2,1),filter .6s var(--ease)}
.uni-row:hover .uni-fig img{transform:scale(1.05)}
/* la couleur revient au survol : le geste « on entre dans l'élément » */
.uni-row .uni-fig.duo::after{transition:opacity .6s var(--ease)}
.uni-row:hover .uni-fig.duo::after{opacity:0}
.uni-row:hover .uni-fig.duo img{filter:none}
.uni-fig .wipe{position:absolute;inset:0;z-index:4;background:var(--ime-green);
  transform:translateX(-101%);pointer-events:none}
.uni-row.in .uni-fig .wipe{animation:citronWipe 1.05s cubic-bezier(.75,0,.25,1) .1s forwards}
@keyframes citronWipe{0%{transform:translateX(-101%)}50%{transform:translateX(0)}100%{transform:translateX(101%)}}

/* Tiroir */
.uni-toggle{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  color:var(--ink);font-weight:500;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;border-bottom:1.5px solid transparent;
  padding-bottom:.15rem;transition:border-color .25s}
.uni-toggle:hover{border-color:var(--ink)}
.uni-toggle .plus{display:inline-block;font-size:.95rem;line-height:1;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.uni-row.open .uni-toggle .plus{transform:rotate(45deg)}
.uni-shop{grid-column:1/-1;display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.uni-row.open .uni-shop{grid-template-rows:1fr}
.uni-shop>div{overflow:hidden;min-height:0}
.uni-shop .p-grid{padding-top:1.6rem}

@media(max-width:900px){
  .uni-row,.uni-row.flip{grid-template-columns:1fr;gap:var(--s-3);padding-block:var(--s-5)}
  .uni-row.flip .uni-body,.uni-row .uni-body{order:1}
  .uni-row.flip .uni-fig,.uni-row .uni-fig{order:2;
    margin-inline:calc(-1*var(--gutter));aspect-ratio:4/3.4}
  .uni-body .num{-webkit-text-stroke-width:1.2px}
}
@media(prefers-reduced-motion:reduce){.uni-fig .wipe{display:none}}

/* ============================================================
   REÇUS — preuve sociale en ticket de caisse (concept client)
   ============================================================ */
.receipt{
  position:relative;background:var(--paper-2);color:var(--ink);
  padding:var(--s-4) var(--s-3) var(--s-3);display:flex;flex-direction:column;gap:.6rem;
  box-shadow:var(--sh-1);
}
.receipt:nth-child(even){background:var(--ime-green-wash)}
/* perforations haut/bas */
.receipt::before,.receipt::after{
  content:"";position:absolute;left:0;right:0;height:8px;
  background-image:radial-gradient(circle at 5px 4px, var(--bone) 4px, transparent 4.5px);
  background-size:10px 8px;background-repeat:repeat-x;
}
.receipt::before{top:-1px}
.receipt::after{bottom:-1px;transform:rotate(180deg)}
.receipt__head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;
  font-family:var(--mono);font-size:max(.7rem,var(--fs-xs));letter-spacing:.06em;color:var(--ink-2);
  border-bottom:1px dashed var(--line);padding-bottom:.6rem}
.receipt__verified{align-self:flex-start;font-family:var(--mono);font-size:max(.7rem,.62rem);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ime-green-ink);
  border:1px solid var(--ime-green-deep);padding:2px 8px;transform:rotate(-1.5deg)}
.receipt__item{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--track-mid)}
.receipt__meta{font-family:var(--mono);font-size:max(.7rem,var(--fs-xs));color:var(--ink-3)}
.receipt__meta .st{color:var(--gold-ink);letter-spacing:.12em}
.receipt__quote{font-family:var(--serif);font-size:1.15rem;line-height:1.45;color:var(--ink)}
.receipt__foot{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;
  border-top:1px dashed var(--line);padding-top:.6rem;
  font-family:var(--mono);font-size:max(.7rem,var(--fs-xs));color:var(--ink-2)}

/* ——— Hero : la question + réponses tapées (vert sur cuir noir = 10,6:1) ——— */
/* ——— HERO — la question, composition en escalier (d'après la maquette maison) ———
   Adapté à notre fond cuir sombre : vert Élément + ivoire (le burgundy serait invisible). */
.hero-q{
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  letter-spacing:-.025em;line-height:.92;
  font-size:clamp(2.4rem,7.2vw,6.4rem);
  display:flex;flex-direction:column;align-items:flex-start;margin:0;
}
/* Cascade d'entrée maison — cédée à la couche FX quand elle est présente,
   pour ne jamais laisser un mot à opacité 0 (animations gelées si page masquée). */
.hero-q span{display:block}
html:not(.fx) .hero-q span{opacity:0;transform:translateY(.28em);
  animation:heroWord .9s var(--ease) forwards}
html.fx .hero-q span{opacity:1;transform:none}
.hero-q .w1{color:var(--ime-green)}
.hero-q .w2{color:var(--ime-green);font-size:.42em;margin:.14em 0 .1em .16em;animation-delay:.10s}
.hero-q .w3{color:var(--paper);font-size:1.12em;margin-top:-.02em;animation-delay:.20s}
.hero-q .w4{color:var(--ime-green);font-size:.36em;margin:.5em 0 .12em 3.2em;animation-delay:.30s}
.hero-q .w5{color:var(--ime-green);margin-left:.35em;animation-delay:.40s}
@keyframes heroWord{to{opacity:1;transform:none}}

.hero-answer{display:grid;justify-items:start;gap:.2rem;margin-top:var(--s-3);
  font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(1rem,2.4vw,1.7rem);line-height:1.2}
.hero-answer .fixed{color:var(--ime-green)}
.type-wrap{color:var(--paper);text-transform:lowercase;font-weight:400;
  font-family:var(--serif);font-style:italic;letter-spacing:0;
  font-size:1.12em}
.type-caret{display:inline-block;width:2px;height:.9em;background:var(--ime-green);
  margin-left:.1em;vertical-align:-.08em;animation:caretBlink 1.05s steps(1) infinite}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .type-caret{animation:none}
  .hero-q span{opacity:1;transform:none;animation:none}
}


/* ============================================================
   GRAIN — texture argentique (signature maison)
   ============================================================ */
.grain{position:relative}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  opacity:.32;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");background-size:140px 140px}

/* ============================================================
   REÇUS — tickets de caisse (réplique fidèle de la maquette)
   ============================================================ */
.receipt-rail{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2.4rem .4rem 3rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.receipt-rail::-webkit-scrollbar{display:none}

.ime-receipt{position:relative;flex:0 0 min(86vw,21.5rem);scroll-snap-align:center;
  display:grid;gap:1.1rem;min-height:29rem;padding:1.6rem 1.4rem 1.4rem;overflow:hidden;
  color:var(--ink);
  background:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.5'/%3E%3C/svg%3E");
  border:1px solid rgba(58,28,34,.22);
  box-shadow:0 1.2rem 2.8rem rgba(58,28,34,.12);
  isolation:isolate;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.ime-receipt+.ime-receipt{margin-left:clamp(-2.4rem,-2vw,-1.2rem)}
.ime-receipt:nth-child(odd){transform:rotate(-1.6deg) scale(.97)}
.ime-receipt:nth-child(even){transform:rotate(1deg) translateY(14px) scale(.97)}
.ime-receipt:hover{transform:rotate(0) translateY(-8px) scale(1);
  box-shadow:0 1.8rem 3.6rem rgba(58,28,34,.20);z-index:4}
/* perforations */
.ime-receipt::before,.ime-receipt::after{content:"";position:absolute;left:0;right:0;height:8px;z-index:3;
  background-image:radial-gradient(circle at 4px 4px,var(--bone) 3px,transparent 3.5px);background-size:12px 8px}
.ime-receipt::before{top:-1px}
.ime-receipt::after{bottom:-1px}
/* papier vert Élément (alterné) */
.ime-receipt.paper-citron{background:linear-gradient(rgba(194,204,131,.92),rgba(194,204,131,.92)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.5'/%3E%3C/svg%3E")}

.ime-receipt__header,.ime-receipt__footer{position:relative;z-index:2;display:flex;
  justify-content:space-between;gap:1rem;align-items:flex-start}
.ime-receipt__eyebrow,.ime-receipt__meta,.ime-receipt__customer,
.ime-receipt__order,.ime-receipt__verified{font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.08em;font-size:max(.7rem,.62rem)}
.ime-receipt__eyebrow{opacity:.6}
.ime-receipt__title{margin:.25rem 0 0;font-family:var(--sans);font-size:1.5rem;line-height:.95;
  text-transform:uppercase;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.ime-receipt__cut{font-size:1rem;opacity:.4}
.ime-receipt__body{position:relative;z-index:2;align-self:center}
.ime-receipt__verified{display:inline-block;border:1.5px solid var(--ink);color:var(--ink);
  padding:.3rem .5rem;margin-bottom:.9rem;transform:rotate(-1.5deg)}
.ime-receipt__product{font-family:var(--sans);font-size:1rem;font-weight:700;
  text-transform:uppercase;color:var(--ink);letter-spacing:.04em}
.ime-receipt__meta{opacity:.6;margin-top:.3rem}
.ime-receipt__rating{margin:.85rem 0;font-size:.95rem;letter-spacing:.14em;color:var(--ink)}
.ime-receipt__quote{margin:.9rem 0;font-family:var(--sans);font-size:1.28rem;line-height:1.18;
  color:var(--ink);font-weight:500}
.ime-receipt__customer{opacity:.8}
.ime-receipt__order{display:flex;flex-direction:column;gap:.15rem}
.ime-receipt__order strong{font-family:var(--mono);font-size:max(.7rem,.66rem)}
.ime-receipt__barcode{width:7rem;height:2rem;background:repeating-linear-gradient(90deg,
  var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px)}
/* .ime-receipt__hologram retiré le 29.07.26 — conic-gradient saturé en
   mix-blend-mode:screen, interdit par la bible §2 et rejeté par le
   fusion-plan P2-8. Un ticket de caisse n'a pas d'hologramme. */
@media(prefers-reduced-motion:reduce){
  .ime-receipt,.ime-receipt:nth-child(odd),.ime-receipt:nth-child(even){transform:none}
}

/* ============================================================
   RAIL D'INDEX — l'Univers se lit comme un chapitre
   ============================================================ */
.uni-rail{position:sticky;top:calc(var(--nav-h) + var(--announce-h) + 1.2rem);z-index:6;
  display:flex;gap:.9rem;align-items:center;padding:.55rem .9rem;width:max-content;
  margin:0 0 -1.6rem;background:rgba(244,241,233,.82);backdrop-filter:blur(8px);
  border:1px solid var(--line)}
.uni-rail a{font-family:var(--mono);font-size:max(.7rem,.72rem);letter-spacing:.14em;
  color:var(--ink-3);transition:color .3s var(--ease);position:relative;padding-bottom:2px}
.uni-rail a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--ime-green-deep);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.uni-rail a.on{color:var(--ink)}
.uni-rail a.on::after{transform:scaleX(1)}
@media(max-width:820px){.uni-rail{display:none}}

/* ============================================================
   PIED DE PAGE-CARNET — la question rendue au visiteur
   ============================================================ */
.journal{position:relative;background:var(--noir);color:var(--paper);
  padding-block:clamp(4rem,10vw,7.5rem);overflow:hidden}
.journal__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  padding-inline:var(--gutter);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.journal__q{font-family:var(--sans);font-weight:700;text-transform:uppercase;
  line-height:.9;letter-spacing:-.025em;font-size:clamp(2rem,6.4vw,5rem);
  display:flex;flex-direction:column;align-items:flex-start}
.journal__q .g{color:var(--ime-green)}
.journal__q .p{color:var(--paper)}
.journal__field{display:flex;align-items:baseline;gap:.6rem;width:min(100%,42rem);
  border-bottom:1.5px solid rgba(244,241,233,.35);padding-bottom:.5rem;margin-top:var(--s-3);
  transition:border-color .35s var(--ease)}
.journal__field:focus-within{border-color:var(--ime-green)}
.journal__field .pre{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;
  font-size:max(.7rem,.85rem);color:var(--ime-green);white-space:nowrap}
.journal__field input{flex:1;background:none;border:0;color:var(--paper);
  font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.4vw,1.7rem);
  padding:0;min-width:0}
.journal__field input::placeholder{color:rgba(244,241,233,.38)}
.journal__field input:focus{outline:none}
.journal__send{font-family:var(--mono);font-size:max(.7rem,.72rem);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ime-green);white-space:nowrap;padding-bottom:2px;
  border-bottom:1px solid transparent;transition:border-color .3s}
.journal__send:hover{border-color:var(--ime-green)}
.journal__note{font-family:var(--mono);font-size:max(.7rem,.68rem);letter-spacing:.08em;
  color:rgba(244,241,233,.45);margin-top:var(--s-2)}
/* wordmark géant en filigrane */
.journal__mark{position:absolute;left:0;right:0;bottom:-.18em;z-index:1;pointer-events:none;
  font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(2.4rem,11.2vw,11rem);line-height:.8;white-space:nowrap;text-align:center;
  color:transparent;-webkit-text-stroke:1px rgba(194,204,131,.22)}