/* ============================================================
   KAPRISS — STYLES
   Tu n'as normalement pas besoin d'ouvrir ce fichier.
   Sauf pour ajuster la couleur de fond : ligne --cream.
   ============================================================ */

:root{
  --cream:    #F5F1EA;
  --ink:      #111111;
  --muted:    #8B857B;
  --hairline: #E2DCD1;
  --accent:   #E73542;

  --gutter: clamp(1.5rem, 5vw, 5rem);
  --stack:  clamp(4rem, 10vh, 8rem);
  --ease:   cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Fraunces", Georgia, serif;
  font-optical-sizing:auto;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:1.5px solid var(--ink); outline-offset:4px; }

/* ═════════════════════════════════════════════ HEADER */

.header{ padding:clamp(2rem,4.5vh,3.2rem) var(--gutter) 0; text-align:center; }

.logo{ display:inline-block; margin-bottom:clamp(1.3rem,3vh,2rem); }
.logo img{ height:clamp(36px,4.6vw,50px); width:auto; margin:0 auto; }
.logo-fallback{
  display:none; font-size:clamp(1.6rem,3.6vw,2.2rem);
  font-style:italic; font-weight:300;
}

.nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(1.3rem,3.2vw,2.9rem); }
.nav a{
  font-size:clamp(.85rem,1vw,1rem);
  letter-spacing:.055em; color:var(--muted);
  padding:.25rem 0; display:inline-block;
  transform-origin:center bottom;
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.nav a:hover{ color:var(--ink); transform:scale(1.06); }
.nav a.is-active{ color:var(--ink); font-style:italic; }

/* ═════════════════════════════════════════════ TITRES DE PAGE */

.pagehead{ padding:var(--stack) var(--gutter) 0; text-align:center; }
.pagehead h1{
  margin:0; font-size:clamp(1.9rem,4.2vw,3.1rem);
  font-weight:300; letter-spacing:.01em; line-height:1.1;
}
.pagehead p{
  margin:1.2rem auto 0; max-width:46ch;
  font-size:clamp(.98rem,1.25vw,1.1rem);
  font-style:italic; font-weight:300; color:var(--muted);
}

/* ═════════════════════════════════════════════ GRILLE ESCALES */

.grid{
  padding:var(--stack) var(--gutter) 0;
  display:grid; gap:clamp(2rem,4vw,3.4rem);
  justify-content:center; align-items:start;
}
.grid[data-count="1"]{ grid-template-columns:minmax(0,min(1440px,92vw)); }
.grid[data-count="2"]{ grid-template-columns:repeat(2,minmax(0,min(700px,45vw))); }
.grid[data-count="3"]{ grid-template-columns:repeat(3,minmax(0,min(350px,26vw))); }
.grid[data-count="4"]{ grid-template-columns:repeat(4,minmax(0,min(300px,20vw))); }

/* toutes les escales, page dédiée */
.grid--all{ grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); max-width:1320px; margin-inline:auto; }

.card{ display:block; }

.card__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--muted);
}
.card__media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.78) contrast(1.06);
  transition:transform .9s var(--ease), filter .8s var(--ease);
}
.card__name{
  position:absolute; inset:0; display:grid; place-items:center; padding:1rem;
  text-align:center; color:#fff; font-weight:300;
  font-size:clamp(1.35rem,2.6vw,2.2rem); letter-spacing:.02em;
  text-shadow:0 1px 24px rgba(0,0,0,.3);
  transition:opacity .45s ease;
}
.card:hover .card__media,
.card:focus-visible .card__media{
  transform:scale(1.06);
  filter:grayscale(0) brightness(1) contrast(1);
}
.card:hover .card__name,
.card:focus-visible .card__name{ opacity:0; }

.card--epuise .card__media{ filter:grayscale(1) brightness(.7) contrast(1.05); }
.card--epuise:hover .card__media{ filter:grayscale(1) brightness(.74) contrast(1.05); }

.card__meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin-top:.9rem; font-size:.82rem; letter-spacing:.05em; color:var(--muted);
}
.card__meta strong{ color:var(--ink); font-weight:400; }
.card--epuise .card__meta strong{ color:var(--muted); }

/* ═════════════════════════════════════════════ BLOC LARGE (vestiaire) */

.wide{ padding:var(--stack) var(--gutter) 0; }
.wide__inner{ max-width:1180px; margin:0 auto; display:block; }

.eyebrow{
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.2rem;
}

.wide__frame{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--muted); }
.wide__media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .95s var(--ease);
}
.wide__inner:hover .wide__media{ transform:scale(1.025); }

.wide__label{
  position:absolute; inset:auto 0 0 0; padding:clamp(1.3rem,3vw,2.4rem);
  color:#fff; background:linear-gradient(to top,rgba(17,17,17,.46),transparent);
}
.wide__nom{ font-size:clamp(1.35rem,2.5vw,2rem); font-weight:300; line-height:1.15; }
.wide__type{ font-size:.83rem; letter-spacing:.09em; opacity:.86; margin-top:.25rem; }

.wide__accroche{
  margin:1.4rem 0 0; max-width:38ch;
  font-size:clamp(1rem,1.3vw,1.12rem);
  font-style:italic; font-weight:300; color:var(--muted); line-height:1.6;
}

.cta{
  display:inline-block; margin-top:1.5rem; font-size:.87rem; letter-spacing:.07em;
  border-bottom:1px solid var(--hairline); padding-bottom:.34rem;
  transition:border-color .35s ease;
}
.wide__inner:hover .cta, a:hover > .cta{ border-color:var(--ink); }

/* ═════════════════════════════════════════════ PAGE DROP */

.hero{ padding:var(--stack) var(--gutter) 0; }
.hero__inner{ max-width:900px; margin:0 auto; }
.hero__frame{ aspect-ratio:1/1; overflow:hidden; background:var(--muted); }
.hero__frame img,.hero__frame video{ width:100%; height:100%; object-fit:cover; }

.hero__title{
  margin:2.4rem 0 0; text-align:center;
  font-size:clamp(2rem,4.4vw,3.3rem); font-weight:300; line-height:1.08;
}
.hero__ville{
  margin:.7rem 0 0; text-align:center;
  font-size:.84rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}

.recit{ padding:var(--stack) var(--gutter) 0; }
.recit__inner{ max-width:60ch; margin:0 auto; }
.recit p{
  margin:0 0 1.7rem;
  font-size:clamp(1.02rem,1.35vw,1.18rem);
  font-weight:300; line-height:1.8;
}
.recit .signature{
  margin-top:2.6rem; text-align:center;
  font-style:italic; color:var(--muted);
  font-size:clamp(1.02rem,1.35vw,1.18rem);
}

.strip{ padding:var(--stack) var(--gutter) 0; }
.strip__inner{
  max-width:1320px; margin:0 auto;
  display:grid; gap:clamp(1rem,2vw,1.8rem);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
}
.strip img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

/* boutique */

.shop{ padding:var(--stack) var(--gutter) 0; }
.shop__inner{
  max-width:1180px; margin:0 auto;
  display:grid; gap:clamp(2rem,4vw,4rem);
  grid-template-columns:1.15fr .85fr; align-items:start;
}
.shop__gallery{ display:grid; gap:clamp(.7rem,1.4vw,1.1rem); grid-template-columns:1fr 1fr; }
.shop__gallery img{ width:100%; aspect-ratio:4/5; object-fit:cover; }

.shop__panel{ position:sticky; top:2rem; }
.shop__nom{ margin:0; font-size:clamp(1.5rem,2.5vw,2rem); font-weight:300; line-height:1.15; }
.shop__prix{ margin:.6rem 0 0; font-size:1.1rem; color:var(--muted); }

.shop__details{ margin:2rem 0 0; padding:0; list-style:none; }
.shop__details li{
  padding:.55rem 0; border-bottom:1px solid var(--hairline);
  font-size:.9rem; font-weight:300; color:var(--muted);
}
.shop__details li:first-child{ border-top:1px solid var(--hairline); }

.sizes{ display:flex; flex-wrap:wrap; gap:.55rem; margin:2rem 0 0; }
.size{
  min-width:3.1rem; padding:.6rem .8rem; text-align:center;
  border:1px solid var(--hairline); background:none; cursor:pointer;
  font-family:inherit; font-size:.88rem; color:var(--ink);
  transition:border-color .25s ease, background .25s ease;
}
.size:hover{ border-color:var(--ink); }
.size.is-on{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.buy{
  display:block; width:100%; margin:1.6rem 0 0; padding:1rem;
  background:var(--ink); color:var(--cream); border:none; cursor:pointer;
  font-family:inherit; font-size:.92rem; letter-spacing:.08em;
  transition:opacity .25s ease;
}
.buy:hover{ opacity:.85; }
.buy[disabled]{ background:var(--hairline); color:var(--muted); cursor:not-allowed; }

.soldout{
  margin:1.6rem 0 0; padding:1rem; text-align:center;
  border:1px solid var(--hairline); color:var(--muted);
  font-size:.88rem; letter-spacing:.06em;
}

/* emplacement du bouton Shopify */
.shopify-slot{ margin-top:1.4rem; }
.shopify-slot:empty::after{
  content:"↑ Colle ici le script Shopify Buy Button (voir LISEZ-MOI)";
  display:block; padding:.8rem; border:1px dashed var(--hairline);
  font-size:.74rem; color:var(--muted); text-align:center; font-style:italic;
}

/* ═════════════════════════════════════════════ MUSÉE */

.musee{ padding:var(--stack) var(--gutter) 0; }
.musee__inner{
  max-width:1320px; margin:0 auto;
  display:grid; gap:clamp(2rem,4vw,3.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
}
.oeuvre img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.oeuvre__meta{
  margin-top:.85rem; display:flex; justify-content:space-between;
  gap:1rem; font-size:.82rem; letter-spacing:.04em; color:var(--muted);
}
.oeuvre__meta strong{ color:var(--ink); font-weight:400; }

/* ═════════════════════════════════════════════ MAISON */

.maison{ padding:var(--stack) var(--gutter) 0; }
.maison__inner{ max-width:1100px; margin:0 auto; }
.maison__inner img{ width:100%; aspect-ratio:16/11; object-fit:cover; }
.maison__texte{ max-width:60ch; margin:clamp(2.6rem,5vw,4rem) auto 0; }
.maison__texte p{
  margin:0 0 1.7rem;
  font-size:clamp(1.02rem,1.35vw,1.18rem); font-weight:300; line-height:1.8;
}
.maison__sign{
  margin-top:2.6rem; text-align:center; font-style:italic; color:var(--muted);
}

/* ═════════════════════════════════════════════ ÉTAT VIDE */

.empty{
  padding:var(--stack) var(--gutter);
  text-align:center; color:var(--muted); font-style:italic; font-weight:300;
}

/* ═════════════════════════════════════════════ FOOTER */

.footer{
  margin-top:var(--stack);
  padding:2.2rem var(--gutter) 2.8rem;
  border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:1rem 2.4rem;
  justify-content:space-between; align-items:center;
  font-size:.79rem; letter-spacing:.05em; color:var(--muted);
}
.footer__links{ display:flex; flex-wrap:wrap; gap:1rem 1.8rem; }
.footer a{ transition:color .3s ease; }
.footer a:hover{ color:var(--ink); }

/* ═════════════════════════════════════════════ MOBILE */

@media (max-width:900px){
  .shop__inner{ grid-template-columns:1fr; }
  .shop__panel{ position:static; }
}

@media (max-width:760px){
  .grid[data-count="1"],
  .grid[data-count="2"],
  .grid[data-count="3"],
  .grid[data-count="4"]{
    grid-template-columns:minmax(0,1fr);
    max-width:460px; margin-inline:auto;
  }
  .card__frame{ aspect-ratio:9/16; }
  .stop__media .card__frame{ aspect-ratio:1/1 }

  .nav{ gap:.9rem 1.2rem; }
  .nav a{ font-size:.82rem; letter-spacing:.04em; }
  .wide__frame{ aspect-ratio:4/3; }
  .footer{ justify-content:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* ════════════════════════════════════════════════════════════
   HERO — photo d'accueil plein écran, header par-dessus
   ════════════════════════════════════════════════════════════ */

/* Sur l'accueil, l'en-tête reste collé en haut et s'inverse
   automatiquement selon ce qu'il a derrière lui.
   Le mélange "difference" fait tout le travail : posé sur du clair
   il apparaît noir, posé sur du sombre il apparaît blanc. */

body.has-hero .header{
  position:fixed; top:0; left:0; right:0; z-index:30;
  padding-top:clamp(1.5rem,3.4vh,2.4rem);
  mix-blend-mode:difference;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}

/* pour que l'inversion fonctionne, le trait doit être blanc */
body.has-hero .logo img{
  height:clamp(54px,7.2vw,88px);
}
body.has-hero .logo-fallback{ color:#fff; }
body.has-hero .header .nav a{ color:rgba(255,255,255,.66); }
body.has-hero .header .nav a:hover,
body.has-hero .header .nav a.is-active{ color:#fff; }

/* il s'efface quand on arrive sur la collection */
body.has-hero .header.is-out{
  opacity:0; transform:translateY(-26px); pointer-events:none;
}

.hero-photo{
  position:relative;
  height:100svh; min-height:520px;
}
.hero-photo__bg{ position:absolute; inset:0; overflow:hidden; }
.hero-photo__img{
  position:absolute; inset:-8% 0 -8% 0;
  width:100%; height:116%; object-fit:cover;
  will-change:transform;
}
.hero-photo__veil{
  position:absolute; inset:0; pointer-events:none;
}
body.hero-sombre .hero-photo__veil{
  background:linear-gradient(to bottom, rgba(245,241,234,.55) 0%, rgba(245,241,234,0) 26%, rgba(245,241,234,0) 74%, rgba(245,241,234,.9) 100%);
}
body.hero-clair .hero-photo__veil{
  background:linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(245,241,234,.9) 100%);
}

.scroll-hint{
  position:absolute; left:50%; bottom:clamp(1.6rem,4vh,2.6rem);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
  animation:hintIn 1.2s .8s both;
}
.scroll-hint span{ display:block; width:1px; height:2.1rem; background:currentColor; opacity:.4; animation:hintLine 2.4s ease-in-out infinite; transform-origin:top; }
@keyframes hintIn{ from{ opacity:0; transform:translate(-50%,12px);} to{ opacity:1; transform:translate(-50%,0);} }
@keyframes hintLine{ 0%,100%{ transform:scaleY(.35); opacity:.25 } 50%{ transform:scaleY(1); opacity:.55 } }

/* ════════════════════════════════════════════════════════════
   APPARITIONS AU SCROLL
   ════════════════════════════════════════════════════════════ */

.rev{ opacity:0; transform:translateY(26px); }
.rev.in{ opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rev.in.d1{ transition-delay:.09s } .rev.in.d2{ transition-delay:.18s }
.rev.in.d3{ transition-delay:.27s } .rev.in.d4{ transition-delay:.36s }

/* trait qui se trace */
.rule{ height:1px; background:var(--hairline); transform:scaleX(0); transform-origin:left; }
.rule.in{ transform:scaleX(1); transition:transform 1.1s var(--ease); }

/* ════════════════════════════════════════════════════════════
   PLUS DE JEU AU SURVOL
   ════════════════════════════════════════════════════════════ */


.card__meta{ position:relative; }
.card__meta::after{
  content:""; position:absolute; left:0; right:0; bottom:-.5rem; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.card:hover .card__meta::after{ transform:scaleX(1); }

.cta{ position:relative; border-bottom-color:transparent; }
.cta::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
a:hover .cta::after, .wide__inner:hover .cta::after{ transform:scaleX(1); }

.strip img, .shop__gallery img, .oeuvre img{
  transition:transform 1s var(--ease), filter .6s ease;
}
.strip img:hover, .shop__gallery img:hover, .oeuvre img:hover{ transform:scale(1.02); }

.footer a{ position:relative; }
.footer a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.footer a:hover::after{ transform:scaleX(1); }

/* ════════════════════════════════════════════════════════════
   VITRINE — bloc drop et bloc citation
   ════════════════════════════════════════════════════════════ */

.intro{ padding:var(--stack) var(--gutter) 0; text-align:center; }
.intro p{
  max-width:44ch; margin:0 auto;
  font-size:clamp(1.15rem,2.1vw,1.6rem);
  font-weight:300; font-style:italic; line-height:1.55; color:var(--ink);
}

.next{
  padding:var(--stack) var(--gutter) 0; text-align:center;
}
.next__line{ max-width:520px; margin:0 auto 1.6rem; }
.next p{
  margin:0; font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.next strong{
  display:block; margin-top:.9rem;
  font-size:clamp(1.2rem,2.4vw,1.7rem);
  font-weight:300; letter-spacing:.01em; color:var(--ink);
  text-transform:none;
}

/* ════════════════════════════════════════════════════════════
   LES ESCALES — carnet de route
   ════════════════════════════════════════════════════════════ */

.route{
  position:relative;
  padding:var(--stack) var(--gutter) 0;
  max-width:1000px; margin-inline:auto;
}

.route__svg{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible;
}
.route__path{
  fill:none; stroke:var(--hairline); stroke-width:1.4;
  stroke-linecap:round;
}
.route__drawn{
  fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linecap:round;
}
.route__dash{
  fill:none; stroke:var(--muted); stroke-width:1.2;
  stroke-dasharray:1 9; stroke-linecap:round; opacity:.55;
}

.stop{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem,4vw,3.4rem); align-items:center;
  margin-bottom:clamp(4rem,9vh,7rem);
}
.stop:nth-child(even) .stop__media{ order:2 }
.stop:nth-child(even) .stop__text{ order:1; text-align:right }

.stop__media{ position:relative; }
.stop__media .card__frame{ aspect-ratio:1/1 }

.stop__text h2{
  margin:0; font-size:clamp(1.5rem,3vw,2.3rem);
  font-weight:300; line-height:1.12;
}
.stop__ville{
  margin:.7rem 0 0; font-size:.78rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted);
}
.stop__note{
  margin:1.1rem 0 0; font-size:.92rem; font-weight:300;
  color:var(--muted); font-style:italic;
}

/* escale à venir */
.stop--bientot{ grid-template-columns:1fr; text-align:center; margin-bottom:clamp(3rem,7vh,5rem); }
.stop--bientot .stop__text{ text-align:center !important; order:0 !important }

.pulse{
  width:9px; height:9px; margin:0 auto 1.6rem; border-radius:50%;
  background:var(--dot,#8B857B); position:relative;
}
.pulse::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid var(--dot,#8B857B); opacity:.5;
  animation:pulse 2.8s ease-out infinite;
}
@keyframes pulse{
  0%{ transform:scale(.7); opacity:.55 }
  70%{ transform:scale(2.1); opacity:0 }
  100%{ transform:scale(2.1); opacity:0 }
}

.stop--bientot h2{
  font-size:clamp(1.25rem,2.4vw,1.8rem);
  color:var(--ink); opacity:.72;
}
.stop--bientot .stop__ville{ color:var(--muted) }

@media (max-width:760px){
  .stop{ grid-template-columns:1fr; }
  .stop:nth-child(even) .stop__media{ order:0 }
  .stop:nth-child(even) .stop__text{ order:1; text-align:left }
  .route__svg{ display:none }
}


/* ════════════════════════════════════════════════════════════
   TRANSITION ENTRE LES PAGES
   ════════════════════════════════════════════════════════════ */

.veil{
  position:fixed; inset:0; z-index:999; pointer-events:none;
  background:var(--cream); opacity:1;
  transition:opacity .55s var(--ease);
}
.veil.gone{ opacity:0; }
.veil.back{ opacity:1; pointer-events:all; }

/* ════════════════════════════════════════════════════════════
   PAGE DROP — la vidéo reste, le contenu passe dessus
   ════════════════════════════════════════════════════════════ */

.hero--sticky{ padding:0; }

.hero--sticky .hero__stick{
  position:sticky; top:0;
  height:86svh; min-height:460px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(.5rem, 2vw, 2.5rem);
  padding-inline:var(--gutter);
  overflow:hidden;
}

.hero--sticky .hero__frame{
  width:min(1240px, 92vw);
  aspect-ratio:16/9;          /* ordinateur : horizontal */
  max-height:72vh;
  overflow:hidden;
  will-change:transform, opacity;
}
.hero--sticky .hero__frame img,
.hero--sticky .hero__frame video{
  width:100%; height:100%; object-fit:cover;
}

@media (max-width:900px){
  .hero--sticky .hero__stick{ grid-template-columns:1fr; padding-inline:var(--gutter); }
  .hero--sticky .hero__frame{
    width:min(86vw, 60vh);
    aspect-ratio:9/16;        /* téléphone : vertical */
    max-height:64vh;
  }
}

/* le contenu glisse par-dessus */
.overlap{
  position:relative; z-index:3;
  background:var(--cream);
  padding-top:clamp(1.6rem,4vh,2.6rem);
}

@media (max-width:760px){
  .hero--sticky .hero__frame{ width:88vw; }
  .overlap{ margin-top:-8vh; }
}


/* ════════════════════════════════════════════════════════════
   LES PERSONNAGES DE PART ET D'AUTRE
   ════════════════════════════════════════════════════════════ */

.perso{
  display:grid; place-items:center;
  pointer-events:none;
  will-change:transform;
}
.perso--g{ justify-items:end; }
.perso--d{ justify-items:start; }

/* le récit encadré par les deux personnages */
.recit--duo{
  display:grid;
  grid-template-columns:1fr minmax(0,60ch) 1fr;
  align-items:center;
  gap:clamp(1rem, 3vw, 3.5rem);
}
.recit--duo .recit__inner{ max-width:none; margin:0; }

.perso svg{
  width:100%; height:auto;
  max-height:min(62vh, 520px);
  max-width:clamp(120px, 20vw, 300px);
}

/* chaque tracé se révèle */
.perso .dp{
  opacity:0;
  transform-box:fill-box; transform-origin:center;
  transform:scale(.94);
  transition:opacity .22s ease, transform .3s var(--ease);
}
.perso .dp.on{
  opacity:1; transform:scale(1);
}

/* sous 900px les personnages disparaissent, la vidéo reprend toute la place */
@media (max-width:900px){
  .recit--duo{ grid-template-columns:1fr; }
  .perso{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .perso .dp{ opacity:1; transform:none; }
}


/* ════════════════════════════════════════════════════════════
   LE TITRE DE LA COLLECTION
   Il se pose sous la vidéo, puis remonte coiffer le récit.
   C'est le même, il ne fait que suivre le mouvement.
   ════════════════════════════════════════════════════════════ */

.titre{
  padding:0 var(--gutter);
  text-align:center;
}
.titre h1{
  margin:0;
  font-size:clamp(1.8rem,3.6vw,2.9rem);
  font-weight:300; line-height:1.08;
}
.titre p{
  margin:.7rem 0 0;
  font-size:.78rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted);
}
.titre + .recit{ padding-top:clamp(2.4rem,5.5vh,3.6rem); }


/* ════════════════════════════════════════════════════════════
   EMPILEMENT — rien ne doit passer sous la photo d'accueil
   ════════════════════════════════════════════════════════════ */

body.has-hero .hero-photo{ position:relative; z-index:0; }

body.has-hero main > section:not(.hero-photo),
body.has-hero main > div{
  position:relative; z-index:2;
  background:var(--cream);
}

body.has-hero .footer{ position:relative; z-index:2; background:var(--cream); }


/* ════════════════════════════════════════════════════════════
   LA BANDE DU HAUT
   Menu à gauche, K♥ au milieu, menu à droite. Toujours visible.
   Sur la photo d'accueil elle est transparente et blanche ;
   ensuite elle devient crème avec le texte noir.
   ════════════════════════════════════════════════════════════ */

:root{ --bar-h:64px; }

.bar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  height:var(--bar-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  column-gap:clamp(1rem,3vw,2.4rem);
  padding:0 var(--gutter);
  text-align:left;
  color:#fff;
  border-bottom:1px solid transparent;
  transition:background-color .35s ease, color .35s ease, border-color .35s ease;
}
.bar.is-light{
  color:var(--ink);
  background:var(--cream);
  border-bottom-color:rgba(0,0,0,.08);
}
body.has-bar:not(.has-hero):not(.drop-hero){ padding-top:var(--bar-h); }

.bar__nav{ display:flex; gap:clamp(1.1rem,3vw,2.6rem); }
.bar__nav--g{ justify-content:flex-start; }
.bar__nav--d{ justify-content:flex-end; }
.bar__nav a{
  font-size:clamp(.8rem,1vw,.98rem);
  letter-spacing:.06em;
  color:inherit; opacity:.78;
  padding:.3rem 0; display:inline-block;
  transform-origin:center bottom;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.bar__nav a:hover{ opacity:1; transform:scale(1.06); }
.bar__nav a.is-active{ opacity:1; font-style:italic; }

/* le petit logo K♥ au centre */
.bar__km{
  position:relative; display:block; justify-self:center;
  width:19px; height:40px;
}
.bar__km img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity .3s ease;
}
.bar__km-b{ opacity:0; }
.bar:not(.is-light) .bar__km-n{ opacity:0; }
.bar:not(.is-light) .bar__km-b{ opacity:1; }
/* sur l'accueil il n'apparaît qu'à l'arrivée du grand logo (géré par le script) */
body.has-hero .bar__km{ opacity:0; pointer-events:none; }

/* ════════════════════════════════════════════════════════════
   LE GRAND LOGO D'ACCUEIL
   ════════════════════════════════════════════════════════════ */

.grandlogo{
  --gl-w:clamp(250px,46vw,640px);
  position:sticky; z-index:5; display:block;
  top:calc(50svh - var(--gl-w) * .27);
  width:var(--gl-w); aspect-ratio:548/296; margin:0 auto;
  pointer-events:none; will-change:opacity;
}
.grandlogo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
}

/* la photo d'accueil : voile sombre léger pour que le blanc se lise */
body.has-bar .hero-photo__veil,
body.has-bar.hero-sombre .hero-photo__veil,
body.has-bar.hero-clair .hero-photo__veil{
  background:linear-gradient(to bottom, rgba(0,0,0,.40) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,.40) 100%);
}
/* la photo est calée en bas : l'étiquette du col reste en haut, hors du
   chemin du grand logo, et on ne voit que le tissu au centre */
body.has-bar .hero-photo__img{
  inset:0; height:100%; object-position:50% 50%;
}
body.has-bar .scroll-hint{ color:rgba(255,255,255,.85); z-index:5; animation:none; transition:opacity .2s ease; }

@media (max-width:640px){
  :root{ --bar-h:58px; }
  .bar{ column-gap:.8rem; padding:0 1.1rem; }
  .bar__nav{ gap:.95rem; }
  .bar__nav a{ font-size:.74rem; letter-spacing:.03em; }
  .bar__km{ width:16px; height:34px; }
  .grandlogo{ --gl-w:clamp(220px,68vw,420px); }
}

/* ── la vidéo du drop en cours : plein écran, sans bordure ── */
body.has-hero #escales[data-count]{
  padding:0; padding-top:0; grid-template-columns:minmax(0,100%); gap:0;
}
body.has-hero #escales .card__frame{ aspect-ratio:auto; height:100svh; min-height:480px; }
body.has-hero #escales .card__meta{ padding:.9rem var(--gutter) 0; }

/* l'accueil reste en noir et blanc : la couleur n'arrive que dans la collection */
body.has-hero #escales .card:hover .card__media,
body.has-hero #escales .card:focus-visible .card__media{
  transform:none; filter:grayscale(1) brightness(.78) contrast(1.06);
}
body.has-hero #escales .card:hover .card__name,
body.has-hero #escales .card:focus-visible .card__name{ opacity:1; }
body.has-hero #escales .card__name{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
}


/* la vidéo est collée à la photo : pas d'apparition en fondu qui laisserait un vide */
body.has-hero #escales .rev{ opacity:1; transform:none; transition:none; }


/* ════════════════════════════════════════════════════════════
   PAGE DROP : la vidéo prend tout l'écran, puis s'estompe
   pour laisser place aux deux personnages et au récit
   ════════════════════════════════════════════════════════════ */

body.drop-hero .hero--sticky{ height:100svh; min-height:480px; padding:0; }
body.drop-hero .hero--sticky .hero__stick{
  position:fixed; inset:0; z-index:0;
  height:100svh; min-height:480px; padding:0; display:block; overflow:hidden;
}
body.drop-hero .hero--sticky .hero__frame{
  width:100%; height:100%; max-height:none; aspect-ratio:auto;
}
body.drop-hero .hero--sticky .hero__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 100%);
}
body.drop-hero .overlap{ background:transparent; margin-top:0; padding-top:clamp(3rem,10vh,6rem); }
body.drop-hero .titre,
body.drop-hero .recit,
body.drop-hero .strip,
body.drop-hero .shop{ position:relative; z-index:3; }
body.drop-hero .shop,
body.drop-hero .strip{ background:var(--cream); }


/* ════════════════════════════════════════════════════════════
   TÉLÉPHONE : vidéos et fluidité
   ════════════════════════════════════════════════════════════ */

/* jamais de bouton lecture natif par-dessus nos vidéos */
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-panel{ display:none !important; -webkit-appearance:none; opacity:0; }
video{ -webkit-tap-highlight-color:transparent; background:#111; }

/* sur écran tactile le noir et blanc est déjà dans le fichier vidéo :
   un filtre CSS sur une vidéo plein écran fait ramer le défilement */
@media (hover:none){
  .card__media,
  body.has-hero #escales .card__media{ filter:none; transition:none; transform:none; }
  .card:hover .card__media{ transform:none; filter:none; }
  .hero-photo__img{ will-change:auto; }
  html{ -webkit-text-size-adjust:100%; }
}

body.drop-hero .hero--sticky .hero__stick{ will-change:opacity; }