/* Maquette « on entre dans le parfum » : un seul voyage piloté par le défilement. */
:root { --ink: #2A1A20; --serif: "Bodoni Moda", Georgia, serif; --sans: "Instrument Sans", Arial, sans-serif; --pad: clamp(20px, 3.4vw, 56px);
  --sky-o: 1; --in-o: 0; --hole-r: 0px; --flash-o: 0; --tint: #e9a64a; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font: 400 14px/1.6 var(--sans); background: #F4E9E4; -webkit-font-smoothing: antialiased; }
/* ciel de l'aube : dégradé doux rose et bleu poudré */
.sky { position: fixed; inset: 0; z-index: 0; opacity: var(--sky-o);
  background: linear-gradient(180deg, #5F6F96 0%, #8E86A8 28%, #C39BA2 52%, #E2B19C 72%, #EDC7B2 100%); }   /* crépuscule plus profond : la brume claire se détache */
/* intérieur du parfum : liquide ambré, plus sombre sur les bords */
.inside { position: fixed; inset: 0; z-index: 1; opacity: var(--in-o);
  background: radial-gradient(120% 90% at 50% 45%, color-mix(in srgb, var(--tint) 55%, #fff6e6) 0%, var(--tint) 45%, color-mix(in srgb, var(--tint) 40%, #2a1408) 100%); }
.gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2; display: block; pointer-events: none; }
/* le trou du vaporisateur s'ouvre sur l'intérieur */
.hole { position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent calc(var(--hole-r) - 2px), #0d0907 var(--hole-r));
  opacity: var(--hole-o, 0); }
.flash { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: #fffaf2; opacity: var(--flash-o); }
.nav { position: fixed; inset: 0 0 auto; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px var(--pad); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--nav, var(--ink)); }
.nav_logo { font: italic 400 22px/1 var(--serif); letter-spacing: 0; text-transform: none; }
.nav_step { justify-self: end; }
.caps { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.caps-back { z-index: 1; }   /* entre le liquide et la scène 3D */
.cap { position: absolute; opacity: 0; will-change: opacity, transform; color: var(--cap, var(--ink)); }
.c-title, .c-left, .c-note, .c-end { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }   /* toutes les typos centrées */
/* titres en mode « différence » : encre foncée sur le ciel, clairs sur le flacon noir */
.blend { position: fixed; z-index: 6; pointer-events: none; color: var(--ink); }
.twin { color: #F4E9E4 !important; }   /* copie claire, visible seulement sur le flacon */



.eyebrow { margin: 0 0 14px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; opacity: .7; }
h1 { margin: 0; font: 400 clamp(64px, 17vw, 300px)/.86 var(--serif); letter-spacing: -.03em; text-transform: uppercase; }
h1 em, .big em { text-transform: none; }
h2 { margin: 0; font: 400 clamp(32px, 4vw, 64px)/1.05 var(--serif); letter-spacing: -.02em; }
h2.big { font-size: clamp(80px, 23vw, 420px); line-height: .9; text-transform: uppercase; letter-spacing: -.03em; }
em { font-style: italic; }
.end_sub { margin: 16px 0 0; opacity: .7; }
.c-left h2, .c-end h2 { font-size: clamp(48px, 9vw, 160px); line-height: .95; }
.status { position: fixed; z-index: 20; left: 50%; bottom: 20px; transform: translateX(-50%); margin: 0; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; opacity: .6; }

/* noms des notes en plein écran : deux lignes qui partent chacune de leur côté au défilement */
.c-note h2.big { display: flex; flex-direction: column; align-items: center; line-height: .8; margin: 0; white-space: nowrap; }
.half { display: block; will-change: transform; }

/* ---- fin : fiche produit dans la pénombre, puis bandeau PP.stud ---- */
.endbg { position: fixed; inset: 0; z-index: 1; opacity: var(--end-o, 0); pointer-events: none;
  background: radial-gradient(55% 75% at 33% 52%, #4a3530 0%, #1d1513 45%, #0b0908 100%); }
.fiche { position: fixed; z-index: 7; right: 8vw; top: 50%; width: min(420px, 38vw); transform: translateY(-50%); color: #F4E9E4; opacity: var(--fiche-o, 0); pointer-events: none; }
.fiche .eyebrow { opacity: .6; }
.fiche_name { margin: 0 0 18px; font: 400 clamp(54px, 7vw, 120px)/.9 var(--serif); letter-spacing: -.03em; text-transform: uppercase; }
.fiche_name em { text-transform: none; }
.fiche_lede { margin: 0 0 26px; font: italic 400 19px/1.45 var(--serif); opacity: .85; }
.fiche_notes { margin: 0 0 28px; }
.fiche_notes div { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid rgba(244,233,228,.2); }
.fiche_notes dt { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; opacity: .6; }
.fiche_notes dd { margin: 0; font: italic 400 17px/1.3 var(--serif); }
.fiche_buy { display: flex; align-items: center; gap: 24px; }
.fiche_price { margin: 0; font: 400 30px/1 var(--serif); }
.fiche_note { margin: 22px 0 0; font-size: 11px; opacity: .5; }
.fiche_insta { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(244,233,228,.2); color: inherit; text-decoration: none; pointer-events: auto; }
.fiche_insta img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; padding: 2px; background: conic-gradient(#E9B872, #C97B4B, #3B5A2A, #E9B872); }
.fiche_insta span { flex: 1; font: italic 400 18px/1.2 var(--serif); }
.fiche_insta small { display: block; margin-bottom: 5px; font: 500 10px/1 var(--sans); font-style: normal; letter-spacing: .26em; text-transform: uppercase; opacity: .6; }
.fiche_insta b { font-weight: 400; font-size: 18px; transition: transform .3s ease; }
.fiche_insta:hover b { transform: translateX(6px); }
.btn { display: inline-block; border: 1px solid currentColor; border-radius: 999px; padding: 15px 26px; background: #F4E9E4; color: #1A1210; font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; pointer-events: auto; cursor: pointer; }
.studio { position: fixed; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; background: #0b0908; color: #F4E9E4; opacity: var(--studio-o, 0); pointer-events: none; }
.studio h2 { font-size: clamp(44px, 7vw, 120px); line-height: 1; margin: 0 0 22px; }
.studio .eyebrow { opacity: .55; }
@media (max-width: 900px) { .fiche { left: 6vw; right: 6vw; width: auto; top: auto; bottom: 6vh; transform: none; } }

/* prototypes d'arrivée */
.arrbg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--arr-bg, none); opacity: var(--arr-o, 0); }
.arr { position: fixed; z-index: 30; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 4px; align-items: center; padding: 5px 6px 5px 14px; border-radius: 999px; background: rgba(20,16,15,.82); color: #F4E9E4; font: 500 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.arr span { margin-right: 6px; opacity: .55; }
.arr a { padding: 7px 11px; border-radius: 999px; color: inherit; text-decoration: none; }
.arr a.is-on { background: #F4E9E4; color: #1A1210; }

/* arrivée « trèfles chromés » : la marque en relief dans le mur */
.emboss { position: fixed; inset: -10vh 0 auto 0; z-index: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2vh; padding-top: 8vh; }
.emboss { --paper: #EFCFC7; }
.emboss span { font: 400 clamp(80px, 15vw, 260px)/.86 var(--serif); letter-spacing: -.02em; color: color-mix(in srgb, var(--paper) 97%, #fff);
  text-shadow: -2px -2px 2px color-mix(in srgb, #fff 70%, transparent), 3px 3px 5px color-mix(in srgb, color-mix(in srgb, var(--paper) 45%, #3a1d18) 40%, transparent); white-space: nowrap; }
/* papier encre : relief plus discret, lumière rasante plus froide */
.emboss-ink span { text-shadow: -1px -1px 1px rgba(255,240,230,.14), 3px 3px 6px rgba(0,0,0,.55); }
/* papier épais feutré : relief de fibres éclairé en lumière rasante (feDiffuseLighting) + marbrure légère de la feuille */
.paper-grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .85;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' seed='5' stitchTiles='stitch'/><feColorMatrix type='luminanceToAlpha'/><feDiffuseLighting surfaceScale='2.2' diffuseConstant='1' lighting-color='rgb(150,150,150)'><feDistantLight azimuth='225' elevation='52'/></feDiffuseLighting></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.008 .012' numOctaves='2' seed='8' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  .35 0 0 0 0'/></filter><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>");
  background-size: 420px 420px, 900px 900px; }
.paper-grain.ink { opacity: .55; }

/* débossage : lettres gravées en creux (ombre en haut à gauche, lumière en bas à droite) */
.deboss span { color: #EAC6BD; text-shadow: 2px 2px 2px rgba(255,255,255,.7), -2px -2px 3px rgba(140,80,75,.28); }
.arr { flex-wrap: wrap; justify-content: center; max-width: 92vw; }

/* mur embossé version sombre : seul le rai de lumière le révèle */
.emboss-dark span { color: #2a1d19;
  text-shadow: -1px -1px 1px rgba(255,226,206,.28), 3px 4px 6px rgba(0,0,0,.75); }
.emboss-dark { -webkit-mask-image: radial-gradient(ellipse 42% 60% at var(--lx, 40%) var(--ly, 30%), #000 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.06) 100%);
  mask-image: radial-gradient(ellipse 42% 60% at var(--lx, 40%) var(--ly, 30%), #000 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.06) 100%); }
/* deuxième ligne du sélecteur : finition et mouvement des trèfles */
.arr .arr-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; }
.arr { flex-direction: column; border-radius: 22px; padding: 6px 8px; }
.arr .arr-row span { margin: 0 4px 0 8px; }
.no-title .c-title { display: none !important; }

/* mur : lignes bord à bord, sans marge */
.emboss { gap: 0; padding-top: 2vh; overflow: hidden; height: 120vh; }
.emboss span { letter-spacing: -.01em; }

/* mur pressé en SVG */
.emboss.press { display: block; padding: 0; inset: 0 0 auto 0; height: 135vh; overflow: hidden; }
.emboss.press svg { display: block; }
.emboss.press { will-change: transform, opacity; }

/* arrivée « Nocturne » : titres et nav clairs dans le noir, filets verticaux fins + grain de film */
.nocturne-on .nav, .nocturne-on .c-title { color: #E9E3DF !important; }
.noct-over { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: grid; grid-template-columns: repeat(5, 1fr); }
.noct-over i { border-left: 1px solid rgba(255,255,255,.06); }
.noct-over::after { content: ""; position: absolute; inset: -50%; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  animation: grain 3s steps(4) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* Nocturne : intérieur du parfum dans le noir, la couleur de la note en halo derrière le flacon */
.dark-in .inside { background:
  radial-gradient(38% 48% at 50% 46%, color-mix(in srgb, var(--glow, #E9B872) 34%, transparent) 0%, transparent 70%),
  radial-gradient(90% 80% at 50% 45%, var(--tint) 0%, color-mix(in srgb, var(--tint) 50%, #000) 55%, #020202 100%); }
.dark-in .c-note { color: color-mix(in srgb, var(--glow, #E9B872) 22%, #F1EAE4) !important; }
.dark-in .c-note h2.big { text-shadow: 0 0 60px color-mix(in srgb, var(--glow, #E9B872) 35%, transparent); }

/* ---- La campagne (après la fiche) ---- */
.campagne { position: relative; z-index: 9; height: 560vh; background: #0b0908; color: #F1EAE4; }
.camp-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #0b0908; }
.camp-eyebrow { position: absolute; top: 13vh; left: 0; right: 0; margin: 0; text-align: center; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; opacity: 0; }
.camp-grid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2vw; }
.camp-card { position: relative; margin: 0; width: 13vw; flex: none; opacity: 0; will-change: transform, opacity; transform-origin: 50% 40%; }
.camp-card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.camp-card figcaption { margin-top: 12px; text-align: center; font: 500 9px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: #CFC6C0; }
.camp-type { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ct { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap;
  font: 400 13vw/1 var(--serif); letter-spacing: -.035em; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-size: cover; background-position: center 30%; opacity: 0; will-change: transform, opacity; }
.camp-note { position: absolute; bottom: 9vh; left: 0; right: 0; margin: 0; text-align: center; font-size: 11px; opacity: 0; color: #9d948e; }
/* bandeau PP.stud : désormais une vraie section après la campagne */
.studio.flow { position: relative; inset: auto; z-index: 9; height: 100vh; opacity: 1; pointer-events: auto; }
@media (max-width: 900px) { .camp-grid { gap: 3vw; } .camp-card { width: 26vw; } .camp-card:nth-child(n+5) { display: none; } .ct { font-size: 12vw; } }
.camp-light .nav { color: #1A1210 !important; }   /* nav foncée pendant les lettres sur fond crème */

/* ---- campagne : textes, galerie vivante ---- */
.camp-card.clone { position: absolute; left: 0; top: 0; width: 13vw; }
.camp-card .ph { overflow: hidden; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease, box-shadow .35s ease; }
.camp-card .ph img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease; filter: brightness(.92); }
.camp-card.is-hot .ph { box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.camp-card.is-hot .ph img { transform: scale(1.08); filter: brightness(1.05); }
.camp-card figcaption { transition: transform .4s ease, color .4s ease; font: italic 400 14px/1.3 var(--serif); letter-spacing: 0; text-transform: none; color: #BDB4AE; }
.camp-card.is-hot figcaption { transform: translateY(-3px); color: #F1EAE4; }
.camp-grid.has-hot .camp-card:not(.is-hot) .ph img { filter: brightness(.6); }
.camp-line { position: absolute; left: 0; right: 0; bottom: 22vh; margin: 0; text-align: center; font: italic 400 clamp(18px, 1.7vw, 26px)/1.3 var(--serif); color: #2A1A20; opacity: 0; }
.camp-head { position: absolute; top: 9vh; left: 0; right: 0; text-align: center; opacity: 0; }
.camp-head .eyebrow { opacity: .55; }
.camp-head h3 { margin: 0; font: 400 clamp(30px, 3.4vw, 56px)/1.05 var(--serif); letter-spacing: -.02em; }
.camp-cta { position: absolute; left: 50%; bottom: 16vh; transform: translateX(-50%); opacity: 0; }
.camp-note { bottom: 6vh; }

/* ---- galerie : noir et blanc, couleur révélée au survol, visionneuse ---- */
.camp-card { cursor: zoom-in; }
.camp-card .ph { position: relative; }
.camp-card .ph img:not(.col) { transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .35s ease; }
.camp-grid.live .camp-card .ph img:not(.col) { filter: grayscale(1) contrast(1.06) brightness(.88); }
.camp-card .ph .col { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none;
  clip-path: circle(0% at var(--mx, 50%) var(--my, 50%));
  transition: clip-path .5s cubic-bezier(.6,0,.4,1), transform 1.1s cubic-bezier(.2,.7,.2,1); }
.camp-card.is-hot .ph .col, .camp-card:focus-visible .ph .col { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); transform: scale(1.08);
  transition: clip-path .6s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.camp-grid:not(.live) .camp-card .ph .col { display: none; }
.camp-card.is-hot .ph img:not(.col) { filter: grayscale(1) brightness(.88); }
.camp-grid.has-hot .camp-card:not(.is-hot) .ph img:not(.col) { filter: grayscale(1) brightness(.5); }
.camp-card:focus-visible { outline: none; }
.camp-card:focus-visible .ph { box-shadow: 0 0 0 1px #F1EAE4, 0 30px 60px rgba(0,0,0,.55); }
.camp-card.cb-src .ph { opacity: 0; }

.cb-lock, .cb-lock body { overflow: hidden; }
.camp-box { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; color: #F1EAE4; }
.camp-box.on { display: flex; }
.camp-box .cb-bg { position: absolute; inset: 0; background: rgba(8,7,6,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: zoom-out; animation: cbIn .6s ease both; }
.camp-box.out .cb-bg, .camp-box.out .cb-btn, .camp-box.out .cb-close, .camp-box.out figcaption { animation: cbOut .5s ease both; }
.cb-fig { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; pointer-events: none; }
.cb-img { display: block; height: min(82vh, 120vw); aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 40px 120px rgba(0,0,0,.6); will-change: transform; }
.cb-fig figcaption { display: flex; gap: 18px; align-items: baseline; animation: cbIn .6s .35s ease both; }
.cb-n { font: 500 10px/1 var(--sans); letter-spacing: .28em; opacity: .55; }
.cb-cap { font: italic 400 clamp(17px, 1.5vw, 22px)/1.3 var(--serif); }
.cb-btn, .cb-close { position: absolute; background: none; border: 0; color: inherit; cursor: pointer; animation: cbIn .6s .3s ease both; }
.cb-btn { top: 50%; width: 64px; height: 64px; margin-top: -32px; border-radius: 50%; border: 1px solid rgba(241,234,228,.3); font: 300 22px/1 var(--sans); transition: background .3s, color .3s, border-color .3s; }
.cb-btn:hover, .cb-btn:focus-visible { background: #F1EAE4; color: #0b0908; border-color: #F1EAE4; outline: none; }
.cb-prev { left: clamp(16px, 5vw, 80px); }
.cb-next { right: clamp(16px, 5vw, 80px); }
.cb-close { top: 26px; right: clamp(16px, 3.4vw, 56px); font: 500 10px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; padding: 10px 0; }
.cb-close::after { content: ""; display: block; height: 1px; margin-top: 6px; background: currentColor; transform-origin: right; transition: transform .4s ease; }
.cb-close:hover::after, .cb-close:focus-visible::after { transform: scaleX(.3); }
.cb-close:focus-visible { outline: none; }
@keyframes cbIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cbOut { from { opacity: 1; } to { opacity: 0; } }
/* tout reste en noir et blanc : au survol, le cercle révèle une version plus lumineuse et contrastée de l'image */
.camp-card .ph .col { filter: grayscale(1) contrast(1.12) brightness(1.06); }
.camp-grid.live .camp-card .ph img:not(.col), .camp-card.is-hot .ph img:not(.col) { filter: grayscale(1) contrast(.95) brightness(.62); }
.cb-img { filter: grayscale(1); }
/* arrivée « champ doré » : le champ de la photo passe devant le pied du flacon (bord doux sous l'horizon) */
.champ-front { position: fixed; inset: 0; z-index: 3; pointer-events: none; background: url(media/arrivee/champ_dore.jpg) center 58% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent var(--cf-cut, 60%), #000 calc(var(--cf-cut, 60%) + 3%));
          mask-image: linear-gradient(to bottom, transparent 0, transparent var(--cf-cut, 60%), #000 calc(var(--cf-cut, 60%) + 3%)); }

/* ---- fiche : flacon attrapable ---- */
.grab { position: fixed; z-index: 6; left: 0; top: 0; width: 52vw; height: 100vh; pointer-events: none; cursor: grab; touch-action: pan-y; }
.fiche-on .grab { pointer-events: auto; }
.grab.held { cursor: grabbing; }
.grab-hint { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); white-space: nowrap; font: italic 400 15px/1 var(--serif); color: #F4E9E4; opacity: 0; transition: opacity .6s ease; pointer-events: none; }

.fiche-on .grab-hint { opacity: .7; }
.fiche-on .grab.used .grab-hint { opacity: 0; }
/* le sélecteur de prototypes s'efface pendant la fiche pour ne rien masquer */
.fin .arr { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
@media (max-width: 900px) { .grab { width: 100vw; height: 55vh; } }

/* ---- Instagram toujours accessible : dans la barre du haut et dans le bandeau final ---- */
.nav_right { justify-self: end; display: flex; align-items: center; gap: 22px; }
.nav_insta { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 10px; border: 1px solid currentColor; border-radius: 999px; color: inherit; text-decoration: none; transition: background .3s ease, color .3s ease; }
.nav_insta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav_insta svg .dot { fill: currentColor; stroke: none; }
.nav_insta:hover { background: #F4E9E4; color: #14100F; }
.studio_insta { margin-top: 18px; color: inherit; font: italic 400 17px/1.3 var(--serif); text-decoration: none; opacity: .75; transition: opacity .3s ease; }
.studio_insta:hover { opacity: 1; }
@media (max-width: 900px) { .nav_step { display: none; } .nav_insta span { display: none; } }

/* ---- section Instagram (après la fiche, avant le bandeau PP.stud) ---- */
.ig { position: relative; z-index: 9; padding: 16vh var(--pad) 14vh; background: #0b0908; color: #F4E9E4; }
.ig-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 4vw; margin-bottom: 7vh; }
.ig-id { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.ig-id img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; padding: 3px; background: conic-gradient(#E9B872, #C97B4B, #3B5A2A, #E9B872); }
.ig-id b { display: block; font: italic 400 20px/1.2 var(--serif); }
.ig-id small { font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .55; }
.ig-title { text-align: center; }
.ig-title .eyebrow { opacity: .55; }
.ig-title h2 { margin: 0 0 16px; font: 400 clamp(40px, 5.4vw, 92px)/.95 var(--serif); letter-spacing: -.02em; }
.ig-lede { max-width: 440px; margin: 0 auto; font: italic 400 17px/1.45 var(--serif); opacity: .75; }
.ig-follow { justify-self: end; }
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ig-post { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #1a1513; color: #F4E9E4; text-decoration: none; }
.ig-post img, .ig-post video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.ig-reel { position: absolute; top: 12px; right: 14px; font-size: 16px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.ig-over { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 20px; background: linear-gradient(to top, rgba(11,9,8,.85), rgba(11,9,8,0) 60%); opacity: 0; transition: opacity .45s ease; }
.ig-over b { font: 500 11px/1 var(--sans); letter-spacing: .18em; }
.ig-over em { font: italic 400 17px/1.3 var(--serif); transform: translateY(8px); transition: transform .5s ease; }
.ig-post:hover img, .ig-post:hover video, .ig-post:focus-visible img { transform: scale(1.06); }
.ig-post:hover .ig-over, .ig-post:focus-visible .ig-over { opacity: 1; }
.ig-post:hover .ig-over em { transform: none; }
.ig-grid:hover .ig-post:not(:hover) img, .ig-grid:hover .ig-post:not(:hover) video { filter: brightness(.55); }
@media (max-width: 900px) {
  .ig-head { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 22px; }
  .ig-follow { justify-self: center; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
}
.ig-follow { white-space: nowrap; }

/* tournage vidéo : sélecteur de variantes masqué (retirer cette ligne pour le réafficher) */
.arr { display: none !important; }

/* feed Instagram : publication affichée en grand au clic */
.ig-box { position: fixed; inset: 0; z-index: 110; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(8,7,6,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: zoom-out; color: #F1EAE4; }
.ig-box.on { display: flex; animation: cbIn .5s ease both; }
.igb-media img, .igb-media video { display: block; max-height: 82vh; max-width: 90vw; width: auto; height: auto; box-shadow: 0 40px 90px rgba(0,0,0,.6); }
.igb-cap { margin: 0; font: italic 400 19px/1.3 var(--serif); opacity: .85; text-align: center; padding: 0 24px; }
.igb-close { position: absolute; top: 22px; right: 28px; background: none; border: 0; color: inherit; font: 300 34px/1 var(--sans); cursor: pointer; }

/* surtitre au-dessus du grand PAS PAREILLE : « Soyez » */
.camp-over { position: absolute; left: 0; right: 0; top: calc(50% - 11vw); z-index: 4; margin: 0; text-align: center; font: 500 12px/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; color: #2A1A20; opacity: 0; pointer-events: none; }
@media (max-width: 900px) { .camp-over { top: calc(50% - 10vw); font-size: 10px; } }
/* logo de la nav : le nom du parfum, la maison en petit dessous */
.nav_logo { font-style: normal; white-space: nowrap; }
.nav_logo em { font-style: italic; }
.nav_logo small { display: block; margin-top: 6px; font: 500 8px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; opacity: .7; }
@media (max-width: 900px) { .nav { grid-template-columns: 1fr auto; } .nav_mid { display: none; } .nav_logo { font-size: 19px; } }
/* la maison, à droite avant Instagram */
.nav_house { white-space: nowrap; opacity: .8; }
@media (max-width: 900px) { .nav_house { font-size: 8px; letter-spacing: .24em; } }

/* indication de l étape du voyage retirée de la nav */
.nav .nav_step { display: none; }

/* phrase du milieu retirée : nom à gauche, maison + Instagram à droite */
.nav { grid-template-columns: 1fr auto; }
.nav .nav_mid { display: none; }

/* hero : « Eau de parfum » sous le nom, comme sur une étiquette */
.c-title .hero-sub { margin: 2.4em 0 0; }

/* mobile : bouton Instagram parfaitement rond, maison plus proche du bouton, masquée sur les très petits écrans */
@media (max-width: 900px) {
  .nav_insta { width: 34px; height: 34px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; flex: none; }
  .nav_right { gap: 12px; }
  .nav_house { letter-spacing: .18em; }
}
@media (max-width: 380px) { .nav .nav_house { display: none; } }

/* test : titre du hero DERRIÈRE le flacon (entre le ciel et la scène 3D) */
.titre-derriere .c-title.blend { z-index: 1; }

/* contact du studio, sous le bouton */
.studio_mail { margin: 18px 0 0; font: italic 400 16px/1 var(--serif); }
.studio_mail a { color: inherit; opacity: .7; text-decoration: none; border-bottom: 1px solid currentColor; }
/* FICHE sur mobile : le flacon en haut (petit), le texte compact en dessous, sans chevauchement */
@media (max-width: 900px) {
  .fiche { bottom: 4vh; }
  .fiche .eyebrow { margin-bottom: 8px; font-size: 9px; }
  .fiche_name { margin-bottom: 10px; font-size: clamp(40px, 12vw, 64px); }
  .fiche_lede { margin-bottom: 14px; font-size: 15px; line-height: 1.4; }
  .fiche_notes { margin-bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .fiche_notes div { flex-direction: column; gap: 3px; padding: 7px 0; }
  .fiche_notes dd { font-size: 15px; }
  .fiche_insta { display: none; }   /* l'accès Instagram reste dans la barre du haut */
  .grab { height: 42vh; }
  .grab-hint { bottom: 1vh; font-size: 13px; }
}
/* titre derrière le flacon (grand écran) : le bloc remonte pour que « Eau de parfum » passe au-dessus du sol du décor */
.titre-derriere .c-title.blend { padding-bottom: 20vh; }

.hero-sub-front { position: fixed; z-index: 6; left: 0; right: 0; margin: 0; text-align: center; pointer-events: none; opacity: 0; color: var(--cap, #E9E3DF); }
.titre-derriere .c-title.blend { padding-bottom: 0; }

/* HERO : arrivée du nom. Chaque ligne monte depuis un masque, l'une après l'autre, puis « Eau de parfum » apparaît */
.c-title h1 .ln { display: block; overflow: hidden; padding: 0 .06em .1em; margin-bottom: -.1em; will-change: transform; }
.c-title h1 .ln > * { display: inline-block; transform: translateY(110%); transition: transform 1.6s cubic-bezier(.16, .84, .2, 1); }
.c-title h1 .ln + .ln > * { transition-delay: .18s; }
.title-in .c-title h1 .ln > * { transform: none; }
.c-title .hero-sub { opacity: 0; letter-spacing: .6em; transition: opacity 1.2s ease .9s, letter-spacing 1.8s cubic-bezier(.16, .84, .2, 1) .9s; }
.title-in .c-title .hero-sub { opacity: .75; letter-spacing: .28em; }

/* fiche : bouton « Voir la gravure » */
.zoom-grav { position: fixed; z-index: 8; left: 26vw; bottom: 3.6vh; transform: translateX(-50%); padding: 10px 18px; border: 1px solid rgba(244,233,228,.35); border-radius: 999px; background: rgba(20,14,14,.35); color: #F4E9E4; font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .6s ease, background .3s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.zoom-grav:hover { background: rgba(244,233,228,.12); }
.fiche-on .zoom-grav { opacity: 1; pointer-events: auto; }
.zoom-on .grab-hint { opacity: 0 !important; }
@media (max-width: 900px) { .zoom-grav { left: auto; right: 5vw; bottom: auto; top: 30vh; transform: none; padding: 9px 14px; font-size: 9px; } }

/* ================= ENTRÉE DU SITE (intro.js) ================= */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 1. Sandwich : QUARTA derrière le flacon, Foglia devant (même taille et même place que le titre habituel) */
.intro-sandwich .c-title { display: none !important; }
.sw { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; color: #E9E3DF; will-change: transform, opacity; }
.sw-back { z-index: 1; } .sw-front { z-index: 6; }
.sw-h { display: block; margin: 0; font: 400 clamp(64px, 17vw, 300px)/.86 var(--serif); letter-spacing: -.03em; }
.sw-h > span, .sw-h > em { display: block; }
.sw-l1 { text-transform: uppercase; }
.sw-l2 { font-style: italic; text-transform: none; }
.sw-ghost { visibility: hidden; }
.sw-sub { margin: 2.4em 0 0; }
.sw-back .sw-in { opacity: 0; transform: translateY(18%) scale(1.06); filter: blur(10px); transition: opacity 2s ease, transform 2.6s cubic-bezier(.16,.84,.2,1), filter 2s ease; }
.sw-front .sw-in { opacity: 0; transform: translateX(14vw); filter: blur(14px); transition: opacity 1.6s ease .7s, transform 2.2s cubic-bezier(.16,.84,.2,1) .7s, filter 1.6s ease .7s; text-shadow: 0 10px 50px rgba(0,0,0,.55); }
.sw-front .sw-sub { opacity: 0; letter-spacing: .6em; transition: opacity 1.2s ease 1.7s, letter-spacing 1.8s cubic-bezier(.16,.84,.2,1) 1.7s; }
.sw-on .sw-back .sw-in { opacity: .95; transform: none; filter: none; }
.sw-on .sw-front .sw-in { opacity: 1; transform: none; filter: none; }
.sw-on .sw-front .sw-sub { opacity: .75; letter-spacing: .28em; }
/* 3. Lumière : le nom n'apparaît que là où passe le faisceau */
.intro-lumiere .c-title h1 .ln > * { transform: none !important; transition: none; }
.intro-lumiere .c-title h1 {
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,var(--a0,0)) calc(var(--lx,-30%) - 22%), #000 var(--lx,-30%), rgba(0,0,0,var(--a1,0)) calc(var(--lx,-30%) + 22%));
          mask-image: linear-gradient(100deg, rgba(0,0,0,var(--a0,0)) calc(var(--lx,-30%) - 22%), #000 var(--lx,-30%), rgba(0,0,0,var(--a1,0)) calc(var(--lx,-30%) + 22%));
  text-shadow: 0 0 calc(var(--glow,0) * 60px) rgba(255,236,214,calc(var(--glow,0) * .9)); }
/* 4. Trèfle trouvé : la phrase sous le nom */
.c-title .hero-line { margin: 1.2em 0 0; font: italic 400 clamp(16px, 1.6vw, 22px)/1.2 var(--serif); opacity: 0; transform: translateY(8px); transition: opacity 1.4s ease 1.5s, transform 1.4s ease 1.5s; }
.title-in .c-title .hero-line { opacity: .85; transform: none; }
/* sandwich, grand écran : « Eau de parfum » décalé à droite, sous la fin de « Foglia » */
/* (validé) « Eau de parfum » sous la fin de « Foglia », décalé à droite */
@media (min-width: 901px) { .sw-sub { margin-top: 1em; transform: translateX(16vw); } }
/* surtitre de la campagne : sur une ligne en grand écran, coupé après « feuilles, » sur mobile */
.br-mob { display: none; }
@media (max-width: 900px) { .br-mob { display: inline; } .camp-over { line-height: 1.8; top: calc(50% - 10vw - 34px); letter-spacing: .3em; } }
/* campagne : surtitre et phrase du bas plus détachés du grand mot */
.camp-over { top: calc(50% - 14vw); }
.camp-line { bottom: 15vh; }
@media (max-width: 900px) { .camp-over { top: calc(50% - 10vw - 64px); } .camp-line { bottom: 16vh; } }

/* campagne : mots plus lisibles (traits fins moins fins : taille optique « texte » au lieu de « affiche ») */
.ct { font-optical-sizing: none; font-variation-settings: "opsz" 20; }
/* galerie sur fond crème (comme la référence) : textes et bouton en encre foncée */
.camp-head, .camp-head h3 { color: #1A1210; }
.camp-card figcaption { color: #74675f; }
.camp-card.is-hot figcaption { color: #1A1210; }
.camp-cta.btn { background: #1A1210; color: #F4E9E4; border-color: #1A1210; }
.camp-note { color: #8c817a; }
.camp-grid.live .camp-card .ph img:not(.col), .camp-card.is-hot .ph img:not(.col) { filter: grayscale(1) contrast(1.02) brightness(.96); }
.camp-card.is-hot .ph { box-shadow: 0 30px 60px rgba(40,25,20,.22); }

/* ?galerie=noir : la galerie repasse sur le fond sombre (textes clairs) */
.gal-noir .camp-head, .gal-noir .camp-head h3 { color: #F1EAE4; }
.gal-noir .camp-card figcaption { color: #BDB4AE; }
.gal-noir .camp-card.is-hot figcaption { color: #F1EAE4; }
.gal-noir .camp-cta.btn { background: #F4E9E4; color: #1A1210; border-color: #F4E9E4; }
.gal-noir .camp-note { color: #9d948e; }
.gal-noir .camp-grid.live .camp-card .ph img:not(.col) { filter: grayscale(1) contrast(.95) brightness(.72); }
/* arrivée : pendant le chargement (avant que la 3D prenne la main), fond nocturne d'emblée, plus de ciel rose une seconde */
:root { --arr-bg: radial-gradient(70% 80% at 50% 42%, #151313 0%, #070707 55%, #020202 100%); --arr-o: 1; }
html { background: #050505; }
.status { color: #CFC6C0; }

/* ================= retours du 7 nov. ================= */
/* Bodoni : traits fins légèrement épaissis sur les titres (taille optique plus « texte » que « affiche ») */
h1, h2, h3, .sw-h, .fiche_name, .ig h2, .studio h2, .camp-head h3, .c-note h2.big {
  font-optical-sizing: none; font-variation-settings: "opsz" 28; }
/* Instagram : l'identifiant en typo d'interface (comme Instagram), plus petit */
.ig-id b { font: 600 16px/1.2 var(--sans); letter-spacing: 0; }
.fiche_insta span { font: 600 15px/1.2 var(--sans); letter-spacing: 0; }
/* fiche produit, écrans peu hauts (portables) : tout tient entre la barre du haut et le bas */
@media (min-width: 901px) and (max-height: 960px) {
  .fiche_name { font-size: clamp(48px, min(6.4vw, 10.5vh), 120px); margin-bottom: 12px; }
  .fiche_lede { font-size: 17px; margin-bottom: 18px; }
  .fiche_notes { margin-bottom: 18px; }
  .fiche_notes div { padding: 8px 0; }
  .fiche_insta { margin-top: 18px; padding-top: 14px; }
}
@media (min-width: 901px) and (max-height: 760px) { .fiche_insta { display: none; } .fiche_lede { font-size: 15px; } }
/* fiche produit en colonne (mobile et fenêtres étroites) : la phrase disparaît, le bouton « Voir la gravure »
   se place juste sous le flacon, centré */
@media (max-width: 900px) {
  .grab-hint { display: none; }
  .zoom-grav { left: 50%; right: auto; top: 39vh; bottom: auto; transform: translateX(-50%); }
  .fiche_name { font-size: clamp(34px, 9.5vw, 56px); }
  .fiche_lede { font-size: 14px; }
}

/* survol des visuels : piloté par le script (la carte réellement sous la souris, même quand la galerie défile), réactions plus vives */
.camp-card .ph { transition: transform .25s ease, box-shadow .3s ease; }
.camp-card figcaption { transition: transform .25s ease, color .25s ease; }

/* fiche → Instagram : un fondu, pas un deuxième rideau. La fiche monte et s'efface, le flacon recule, Instagram apparaît */
.fiche { opacity: calc(var(--fiche-o, 0) * var(--fiche-out, 1)); margin-top: calc(var(--ig-k, 0) * -8vh); }
.gl { opacity: var(--gl-o, 1); }
.ig { background: linear-gradient(to bottom, rgba(11,9,8,var(--ig-k, 1)) 0, #0b0908 55vh); }   /* haut transparent pendant le fondu, opaque une fois arrivé */
.ig-head, .ig-grid { opacity: calc(.15 + .85 * min(1, var(--ig-k, 1) * 1.6)); transform: translateY(calc((1 - min(1, var(--ig-k, 1) * 1.4)) * 6vh)); }
/* fiche, grand écran : flacon, phrase et bouton centrés dans la colonne de gauche */
@media (min-width: 901px) {
  .grab { width: calc(var(--colx, 26vw) * 2); }
  .zoom-grav { left: var(--colx, 26vw); }
}
/* Instagram : titre et sous-titres plus aérés */
.ig-head { margin-bottom: 9vh; }
.ig-title .eyebrow { margin-bottom: 20px; }
.ig-title h2 { line-height: 1.08; margin: 0 0 26px; }
.ig-lede { line-height: 1.55; }

/* fiche : un peu d'air entre le nom et le descriptif ; contenu centré dans la hauteur */
.fiche_name { margin-bottom: 30px; }
@media (min-width: 901px) and (max-height: 960px) { .fiche_name { margin-bottom: 24px; } }
@media (max-width: 900px) { .fiche_name { margin-bottom: 18px; } }

/* fiche en colonne : grand flacon en haut (zone d'attrape), infos en dessous qui défilent par-dessus en remontant */
@media (max-width: 900px) {
  .fiche { top: 60vh; bottom: auto; left: 0; right: 0; padding: 18px 6vw 24px; background: linear-gradient(to bottom, rgba(11,9,8,0) 0, rgba(11,9,8,.92) 34px, #0b0908 70px); }
  .grab { height: 56vh; }
  .zoom-grav { top: 55.5vh; }
}
@media (max-width: 900px) { .fiche-up .zoom-grav { opacity: 0 !important; pointer-events: none !important; } }

/* ===== revue mobile (7 nov.) ===== */
@media (max-width: 900px) {
  /* noms des notes : en haut de l'écran, au-dessus du flacon, plus grands */
  .caps-back .c-note { justify-content: flex-start; padding-top: 12vh; }
  .c-note h2.big { font-size: 21vw; }
  /* campagne : texte centré sur deux lignes possible */
  .ct { text-align: center; }
  /* galerie : visuels plus grands, bouton sur une ligne */
  .camp-card, .camp-card.clone { width: 40vw; }
  .camp-grid { gap: 4vw; }
  .camp-card figcaption { font-size: 13px; }
  .camp-cta { white-space: nowrap; }
}

/* sélecteur de prototypes : seulement avec ?proto=1 */
html:not(.proto) .arr { display: none !important; }